The history of web design: from the Stone Age to the era of modern technology
From the author: the development of web design, like the Internet, in our country fell on the 90s of the last century. Prior to that, the computer age reigned, it…

Continue reading →

The combination of colors in web design as an effective marketing tool
From the author: the web designer has in his arsenal many tools for interacting with users using color. The combination of colors in web design is an effective marketing tool,…

Continue reading →

Rubber web design. What and where are we going to stretch?
When developing a website, the webmaster, first of all, should be based on the project goals. If it is important for the customer that the web page can be adjusted…

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 2016: Chrome attacks!
Personally, I remember in 2016 design and UX that Chrome applications have become a full-fledged version of web design. I wrote in 2016 about three of them. Web Design 2016:…

...

Typography in web design: basics and rules of use
From the author: I welcome you, friends! We continue to analyze the intricacies of professional web design, and today a very relevant topic is web typography. Unfortunately, many developers do…

...

Basic web design tutorials in Photoshop
From the author: in past classes, we examined the theoretical foundations of web design. It's time to move on to practical exercises, so today you will receive basic web design…

...

Web Designer - Creative Internet Profession
Who is a web designer? Before moving on to a more detailed examination of the profession of a web designer and starting to analyze the necessary knowledge and skills, let's…

...