6 Tips for Creating One-Page Websites
One-page websites are becoming popular and fashionable now - there is no doubt about it, although they are not suitable for every topic or organization. However, if everything is done…

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 →

How to make favicon with your own hands?
Favicon A site without a favicon, like a ship without a flag. Favicon is an integral part of a site’s brand, its image and identification. By the way, look at…

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.

FIXED SCROLLING AREA
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.

ADAPTIVE DESIGN
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.

ANIMATION AND EFFECTS
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.

HID / ARISING NAVIGATION
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.

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…

...

Frequently Asked Questions (FAQ) - developing an effective FAQ section
As you, of course, know, Frequently asked questions (FAQ) are frequently asked questions that are collected and highlighted on a separate page. Thanks to her, the user will be able…

...

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…

...

Typography for web.
There are many books and articles on typography, but only a few of them reveal issues of choice and combination of fonts. In view of the opening opportunities and prospects…

...