Web design trends in 2018
On October 11, a lecture by the art director of the Vintage Web Production studio Olga Shevchenko was held, dedicated to the trends of web design and digital in 2018. Olga is a member of the Awwwards jury and every day she looks at hundreds of new websites developed by agencies and designers from all over the world. This allows her to keep track of new developments and trends in web development and design.
The article describes the main messages of the lecture, and you can find the full version at the link.
The cursor is indicated by an arrow. It either turns into a clicking finger, hovers can appear. Now the cursor can be an element. The transition to the page is highlighted under it. Elements under it can change or interact with the cursor.
The Volcan website is a favorite example. The diamond cursor becomes a hint of what to expect when pressed. There is an element of interactivity. As a result, the hover is not needed, its role is played by the cursor.
An example of an interactive scroll on the Volcano website
New theme for UI / UX designers battles – how convenient is it? But if you think it over correctly, it can turn out well.
With their help, you can make space transitions. They are simple in development, but they free the hands of designers. The Rich Brown site uses a cross as a transition. But it can be any form.
Who uses Photoshop, then there it can be done by simply cutting out a hole in the layer with a mask. Or overlapping 6 squares. We made a transition from screen to screen for our client with the help of this thing. Opening a picture from a form is also an SVG mask. But if you look at the layout, it looks like a static picture.
This is already difficult. You definitely need a person with an understanding of the mathematical aspects of the process. Some things can be borrowed from libraries. But there is no cursor sync in SVG. And here there is.
Climachill by Adidas, for example.
Morphing with letter is Canvas. The Gradient Overflow is Canvas. And this has been popular for several years, but it will not become obsolete soon. Because it is lightweight, and it is 2D graphics that are difficult to repeat. Suitable for those who want a lot of “wow” on their website.
3D + WEBGL
The direction will develop. When you make even a small but high-quality video for 1 minute, this is at least 10 people in a team. When in 3D it is 1 designer. And webgl is a +1 developer. 3D can be classic, like on the Globekit website. Looks fantastic, unique. Although it consists of 6 slides in total.
But again: you have to be careful with the application. One such effect is enough to make the site bright, but not flashy.
In March 2017, the first VR site appeared. There are more of them. The first VR track at a football stadium was recently made. A man puts on a mask, and it seems to him that he is on a race track.
A virtual racing device from Audi.
We argued more recently whether VR will take root. Yes, it has a future because it has become easier to do. We will make a portfolio in VR so that you can turn over it by turning your head, and when you fix your gaze, go to work.
Cool that now you can do without the application. You go to the browser on the link and you should have a marker that will read some things. You show this marker and it draws whatever you want. That is, first you make a design in 3D, show it to it and it draws on the already augmented reality. You can customize it for yourself.
PWA is a browser functionality that looks like an application. It is added like an icon and looks like an application. In fact, it opens in a browser and allows you to send notifications to the user, record it through a form, and receive content offline.
This is a ready-made library where you can find all the things for AR and VR. You can see how they work, watch them in action.
Therefore, I advise all web designers to go to finish their studies in 3D. This will make your site much more lively.
Keep an eye on them. They do not stand still. There is such a thing as Google experiments. Free up a couple of hours of time to explore all the beauty. Google conducts a lot of experiments, which involves developers, agencies. The latter is the use of big data.
Recently, Awwwards have partnered with Google. This means that now there will be an emphasis on mobile sites. Optimization of technologies will begin to make them easier. Google is starting to show more interest in the mobile web.
A very new problem. The page is built on the basis of data. There is one Japanese man, Masatatsu Nakamura, who is especially serious about this. Its graphics are made entirely by a programmer, not by designers. It does a lot for Google Experiments.
An example of Masatatsu Nakamura graphics made with WebVJ
The most asked question is “What color / font / pattern will be trending next year?”. I call this “trend shoes”.
It is currently impossible to define a single trending font set or color scheme. Kind of like pastel colors are starting to trend. But then you look at these bright explosive sites, and you realize that they are not.
I would advise you to play with the flow of the component using patterns anyway. This will make the content look more expensive and interesting. The usual semi-transparent and lightweight pattern will already give status to your site. Oblique lines, broken elements are not that difficult and does not require the involvement of a developer.
And don’t forget about the illustrations. A rocket flying through the page can easily bring a serious boring investment fund website to life.
The classic trends on the web are no longer limited. The main thing is to create the right atmosphere for the user.
Who to follow
- JAM3 are crazy guys from Canada. There are 43 of them in total, but already a world agency.
- AQuest are Italians. Obsessed with the latest web technologies.
- Hellomonday – a lot of interaction with users. They love non-standard transitions, non-standard page breaks. There are still questions about navigation and UX, but they look very nice.
- Goodmorning – Norwegians, Agency of the Year 2016. They have a cool corporate Scandinavian look.
- The Watsons / DG are the astronauts I adore. The Swiss knife is their job. Trash and space, video, 3D are all about them.
- Unit9 is a huge agency with offices all over the world. About 50 Cannes lions. Websites – 1% of the services provided. I love their campaign where they made a man out of water.
- Lokomativ are my favorite Canadian guys. 1.5 years ago I met their creative director. And literally a year after they took the site of the day on Awwwrds, they entered the top 20 best agencies in the world. This is because they have a crazy front-renderer that rummages in all libraries. So they developed their own handwriting. This pace is colossal.