Effective web design - what is it?
From the author: I welcome you, dear friends! Today's material is devoted to how an attractive and effective web design should look, which would cause a wow effect for site…

Continue reading →

5 new trends that will make your web designs even better in 2017
From the author: 2017 has already set the movement in some very interesting directions, as a result of which new trends in web design are starting to appear. This year…

Continue reading →

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…

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.

10 web design trends that may appear in 2016
From the author: in this article we will consider 10 trends in web design that may appear in 2016. Design trends may not change for several years (and in some…

...

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…

...

10 Photoshop plugins for design-accelerating designs
From the author: Photoshop was not originally intended for web design, but even right out of the box is a pretty powerful tool. But even such a wonderful tool may…

...

Where to look for fresh website design ideas, or how to catch inspiration?
From the author: probably each of you had moments in life when there is no hint of creativity and inspiration? Especially when original ideas are expected from you. Especially when,…

...