The main types of user interface buttons on sites and applications
Buttons are one of the most famous interactive user interface elements. They play a very important role in creating user interaction and creating a positive experience. Continuing a series of…

Continue reading →

Current trends and trends in logo design
The current trends in logo design 2017 did not become any special revelation. Similar to the main trends in website design, they are more a continuation and development of what…

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…

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.

How to choose the best illustrations for your site
I somehow had publications about the best free photo banks and photo stocks in which the question was raised where to look for images for the site. Today I want…


Jacob Nielsen
I decided to dilute the publications with all kinds of pictures and materials for downloading a very interesting article about a famous person in narrow (and not so) circles. I…


Vintage and innovation cocktail: retro style in web design
Once on a blog, I already wrote about the retro style for the Internet, or rather just published a very interesting selection of retro website designs. Now let’s add a…


The difference between UI and UX: a practical example
Today there will be a guest post on the topic of UX and UI interfaces using the Icons8 service as an example. The author is a usability specialist Andrei Burmistrov,…