The essence of design - what is it?
A few days ago I received a guest post from Viktor Fomin, author of the Kruffock blog, "chronicles of the living mind of a copywriter philosopher." To begin with, in…

Continue reading →

Where and how does a designer make money on the Internet
At present, it is not so easy to find a suitable and well-paid job, even for a knowledgeable, versed person. The crisis and all other nonsense oppresses, some unemployment in…

Continue reading →

Stages of development of a web designer and reaction to criticism at work
Just as a singer cannot exist without listeners, so a designer cannot exist without a spectator. And this viewer, of course, has the right to his opinion on the evaluation…

Continue reading →

Tips for creating a beautiful one-page portfolio site

Many global web design trends can be applied to single-page users, but they also have their own unique features. Such projects are specific enough, so it’s useful to read something on the topic before creating your own, for example, an article on the process of developing a landing page design that will improve conversion, or see general tips for single-page sites.

In addition, it will be nice to find the best of existing solutions in order to be fully inspired by them. This can be easily done in the OnePageLove and Land Book services, plus to complement your impressions with a selection of cool portfolio sites, since this is exactly this niche.

No less useful for you will be the material from this English-language article, which is devoted to the creation of one-page portfolio sites.

For sites where content is placed on one page, quite often you can find a division into some horizontal blocks. In the process of scrolling the page, the user browses this or that information, and with it the background image, the color of the blocks, etc. This idea can be developed into a scrolling area equal to the full screen. For a classic site in the portfolio, by the way, you can add endless scrolling (scrolling) of works on the page.

Fixed Scrolling Area

The Zack Batsaikhan personal site is an excellent example of what we just talked about – for one rotation of the mouse wheel you move up / down one screen. There are also supported keyboard arrows for navigation, so you can even do without a mouse.

Beautiful one-page portfolio site

Another example of such a solution from the designer Jeya Karthika. Each section / block uses its own background, which is especially convenient for mobile devices. On one of the screens, you can use not only the up / down arrows, but also the left / right arrows to scroll horizontally. Usually this is all implemented using the jQuery plugin, or you can do it yourself if you understand JavaScript.

Together with the importance of supporting mobile devices, the so-called adaptive (responsive) design is developing. The trend is far from new, but it is in a kind of “free search” – developers play with different options and ideas for implementing responsive web design. If we talk about the portfolio, then here it is even more important, as it demonstrates your personal skills in solving such problems.

Adaptive design

Andrew Shen has a great responsive portfolio site with customizable content and menus. The latter on small screens transforms into an icon familiar to everyone, which shows / hides menu items. The site is simple and looks great on any monitor.

Responsive Portfolio Website

Comparing the previous project with the site of another Dennis Field designer, you will find many similarities. The content here is divided into horizontal blocks that are oriented to the width of the browser. When scrolling down, the main one is replaced by another fixed menu and moves along with the scrolling. However, on smaller screens the menu is removed altogether, and site navigation does not suffer from this at all.

There are also several other responsive design solutions that you might want to add to your site. For example, images that change size with a smaller screen size, as well as “folding” galleries for photos. Think about the size of the screen when you need to perform certain actions, as well as the size of the font.

Effects can add a little charm to your one-page and attract attention, but only if they are correctly made. There is a certain boundary, after which the intrusive and cumbersome animation will only annoy users. It is important to keep a balance and not overdo it with this decision.

Creation of a one-page site

Design studio Keele has many animated details on its website. In principle, the permissible number for a particular user is a subjective value. They attract someone to a greater degree, while on the contrary, they annoy others. Be that as it may, the site has interesting details (the effect of the logo and underlining the menu, etc.).

Animation and website effects

Instead of animating the interface, you can try adding effects to the images and content on the page. On the Karol Krakowiak website, this technique is used with items / work in the portfolio. If you can implement such things on jQuery then they will work equally well on regular computers and mobile devices.

The navigation topic for single-page sites can be a bit confusing for a novice developer / designer. Since there are no other (or very few) pages in the project except the main page, as a rule, navigation responds with scrolling. When you click on any of the menu items, the user simply moves to the desired information block.

Web Design Illustrations - Best Uses
If you carefully study any selection of website designs on a particular topic, one trend will be obvious to you - illustrations are now in fashion. They are so widespread…


6 main stages of website development
I was recently told in the comments that some posts do not correspond to the format of the blog, which is positioned as a useful resource specifically for web designers.…


Google Chrome and automatic user authorization
The Google Chrome browser (based on Chromium) uses WebKit engine to render pages. The first version for Windows was released back on 12/11/2008, and now it is one of the…


Social networks for a designer career
Today's topic, as you already understood, will be related to the use of social media by design workers and not only. Moreover, unlike the article about useful social networks, the…