The best designs of single-page sites Landing Page
From the author: I welcome web designers of all ages and blood types. According to statistics and the opinion of top marketers in the world, the Landing Page is 2-3…

Continue reading →

Web design basics. Analysis of the main blocks on the site
From the author: I greet you, dear reader! In this article, I propose to consider the basics of web design, or rather, the main blocks of the site. External beauty…

Continue reading →

Best Photoshop Plugins for Web Design
From the author: welcome to our blog, dear reader! Today we’ll talk about where to use Photoshop plug-ins for web design, and also find out which plug-ins are best for…

Continue reading →

Current Web Design Trends: Fullscreen Homepages

From the author: full-screen Splash Screen’s currently the most famous template on the Internet, in fact, the current trend in web design. Some people like him, others hate him, but let’s put aside your feelings and look at really worthwhile examples, and also talk about the best ways to use them.

A little bit about design convergence
The term “design convergence” means that all designs have a habit of being similar, i.e. converge over time or become more similar. @Jongold recently posted on Twitter:

He talked about the fact that today designers lack creativity, and they take up the easiest method in designing web pages. Fullscreen Splash Screens are a good example of his thoughts. Do we, as designers, choose the easiest way using this template? Do we intentionally not want to push the boundaries and bring something new? Is the Internet standing still just because you are so lazy?

Or, as Paul Boag says, are we just part of that foundation in web design? We create what users want, what do they expect and thereby simplify our products?

“The more we see an object, the more it becomes a standard” – Paul Boag
I will leave you alone with this thought, so that you yourself decide everything. In the meantime, let’s take a look at a few full-screen page designs!
Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more
Top to bottom, left to right
Many full-screen sites are very sensitive to screen resolution and use JS or CSS to ensure that the initially visible part of the page is the same resolution with the size of the browser window. After determining the resolution of the window and even when changing it later using CSS positioning, the elements can be placed in the most extreme positions.

Makeshift use this template to press the second menu and the left / right arrows to the bottom of the screen. The wallpaper is added using the figure element and the background-size: cover; property.
Ideas is a full-screen WordPress theme with several options for slide shows, intros, homepages, etc. To make the name and caption of images more readable, use the gradient, which is located at the bottom of the screen.

James Tupper placed his face at the bottom of the page using the background-position: center bottom property; as if he was peeking out from under the screen. The yellow background elegantly adjusts to the height of the window using the height property: 100vh ;.
The brainchild of Elliot Jay and Samantha Stocks, the Lagom style and fashion magazine, completely fills the homepage with one image. You don’t need to scroll anything (only on small screens). At the bottom of the screen are links to social networks.

Soul – Shopify Template. One of the templates has a full-screen slider with navigation on the right side of the screen.

Scroll further ↓
When using full-screen templates, there is a danger that the user may not understand that the page needs to be flipped. The Envato website solves this problem with a scroll icon that tells the user what to scroll down.
Blandly decided to use the arrow at the bottom of the page.
Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more

On the Kindeo homepage, site developers used my favorite method; they left visible a small portion of the next section at the bottom of the screen. They also placed an arrow labeled “Find out more” to make it clear to users that they could find something else below.

The Kilani website implements a rather dubious method with automatic sound reproduction; in the lower right corner of the screen there is a mute button. But they unusually solved the problem with scrolling down the page and attached the inscription “Scroll Down” to the cursor:

Video
Aerial photography enthusiasm for Damir Kotorić, a former UX website designer for Envato, has grown into a separate Falcon Films website. Video occupies most of the website’s homepage; The video is inserted through the video tag. You can look at the cool shots of Melbourne from the drone.

And just like above, Damir used the min-height: 100vh; property to stretch the section to full screen. Landscape has the same effect; full-screen template with video with automatic playback, however, JS is used here to stretch to full screen. The mp4 video file weighs 1.3 MB, so this will not affect the speed of work much.

Styles
We still have not talked about what the full-screen template gives us: canvas! The whole point of the template is to use the space to represent a product, company or idea. Interfering content elements are removed, and attention is focused on the message and individual approach. In the example above, Landscape uses a beautiful shade of blue. Voog decided to use the same approach.

Web design trends: the main directions of 2016
From the author: Hello everyone! Today we will take a break from complex technical topics and do a short review of current year trends. In this article, I collected the…

...

Buttons in web design
From the author: I love buttons. With their help, you can do many different things: move on to the next stage, accept various conditions, perform something. Buttons make the site…

...

5 trends in logo design 2016
From the author: Web designers often like to predict trends on the Internet for next year. What about logo design? As the saying goes, the devil is in the details.…

...

Web design standards: everything you need to know for beginners and pros
How do design standards increase website popularity? There is an opinion that web design standards attract users to sites, and most importantly - keep them for a long time. Why?…

...