How to modernize your project for the current year: where to give free rein to the designer, and where - to the product developers.
2020 was a watershed year for many entrepreneurs. Someone has successfully jumped on the online wave. And someone has sunk into oblivion, never knowing the opportunities that self-isolation gave us. In this whole story, one thing is important: there are more purchases on the Internet, which means that the visual component of your site should work even more for promotion.
Web design is a ton of possibilities right now, but like all designs, they need to be used wisely. What has changed in 2020, and what will we take with us in 2021? Let’s talk about this!
1. Social networks are everything
Have you noticed that most sites, regardless of what they sell, have become more and more like the most popular social networks in the world? Let’s take a cosmetics and perfumery store – “Golden Apple”. Let’s open the homepage.
Doesn’t it look like anything? Similar to the homepage of any Instagram or Facebook account. This is especially noticeable when you open the site from a mobile device.
Here we have a cover photo and a “story” with current goods and promotions, and the main feed in the form of the most popular products and new products. The icons in the mobile version are downright reminiscent of the “Instagram” markup of the social network.
This design decision is quite understandable. The category of beauty products has been sold on Instagram for 5 years, so why not make a website similar to the page of your favorite social network, where you can see the current, study the feed. The interface is understandable for anyone who even visits the site for the first time because he has already seen all this somewhere and knows how to use it.
Such a design will be relevant not only for cosmetic brands and clothing. For example, the English language school SkyEng has been actively using the “Instagram shell” almost from the very foundation of the company.
This is another trend that is gaining momentum both among developers and among users. People are tired of the clutter and unnecessary information. Therefore, sometimes it is more pleasant to look at one picture of the main page and listen to the singing of whales, as the creators of the safe-whales website use, than to puzzle over the received stream of numbers and letters. By the way, this site uses not only minimalism but also up-to-date animation and soft shadows, which is another trend of 2021.
But minimalism, as a way to design your site, is not just one picture on the home page. Here, the task of the designer is to show in all its glory the product, information, or service that you offer through a few simple, understandable forms, and not focus on decorative elements.
The aforementioned whale rescue site does not hit straight on the head “send your money to us and we will save the whales.” From the main page, he introduces the reader to those species of whales that need species conservation and support. No clutter with unnecessary information – only whales.
The simplest and most understandable principle of minimalism has been used by Google for a long time.
As you can see, minimalism can also be different, so we propose to consider its features.
Simplicity in everything
Clear and clear lines, no unnecessary details, complex fonts and a variety of motley illustrations, a complex grid of information, and media placement. Simplicity can also be found in the internal content of the site: from photographs in the style of minimalism to videos and text design.
The second important feature of minimalism. It is worth noting here that earlier designers adhered to a black and white palette, a maximum of pastel, bright flashy colors were not used. But the new year dictates new rules to us. The most important thing about using any color is that it should provide good contrast between images and the background. The white background is still relevant. It can be diluted with bright semantic accents, for example, in those places where the gaze should fall in the first place.
Images without background
With the help of images, the designer creates an emotional connection with the client, so it is important not to overdo it here. You won’t have a second try.
Rules for the image in minimalism:
– it should not pollute the layout: a simple photo/graphics without small details, elements;
– the color scheme can be any, the main thing is that it contrasts with the background and presents your product in a winning way;
– images must be of the same style;
– more often use images without a background to make the product even more emphasis.
The basic rule here is less is better than more. The designer removes unnecessary elements and leaves only the main thing. The correct spacing allows you to draw attention to the right things on the site. A person does not have to digest information for too long, look for what he needs. As if a hanging photo/graphics/text in space helps the future client not to get lost in the flow of information, a tete-a-teta atmosphere is created.
It is also important to understand that this airiness must be created like everything else with the mind. Especially pay attention to the top of the layout. Most users make their first impression of a company from the first elements on the site. The second point is how adding white space and space will affect the size of the layout. Not all users like to scroll for too long. The third task for the designer and developers is how such a site will look on a mobile device. Whether the text is too small, and the photo or images are full screens.
3. Dark theme
Have you noticed that not only social networks have started to offer to go to the “dark side”? Sites will also help to save the charge of your mobile device battery. And this is not just a new trend, such giants as Apple, Mercedes-Benz, Instagram, Telegram, WhatsApp, VKontakte, ASOS have long been pleasing to the eye, literally and figuratively, their consumers.
It is important to note that here, too, companies choose adaptation, if a person sits on the phone, then he can choose a dark theme on the site or in the application. True, on the desktop versions, not all sites have such a function. So, for example, the ASOS website on your PC will have a standard white background and pictures, but on the mobile device and in the application, you can choose the “dark side”.
Actually, why did web designers and developers decide to bring a little darkness into our lives? First, it is healthier for your eyes than the bright white light that is already around you. In addition, black is convenient in the dark. Moreover, if you believe the research for 2020, the average person spends more than 6 hours on the Internet every day, the eyes will definitely get tired during this time. Secondly, against a dark background, graphic solutions can look visually different and more advantageous than on a light one, which gives free rein for creativity. Third, it increases the contrast ratio.
In addition, dark themes are great for OLED screens (not only TVs but also Samsung smartphones), as they save energy and increase the lifespan of the screen. Dark shades allow you to create creative elements with a neon glow, which is also one of the graphic design trends of 2021.
4. Artificial intelligence
Unsurprisingly, this position appeared in our article on Website Design Trends 2021. Artificial intelligence (AI) is already deeply embedded in our Internet life. Any chatbot that pops up on the website of a medical clinic or home goods is also part of artificial intelligence.
In this story, AI takes pride in the domestic manufacturer.
Back in 2017, Artefact co-founder Rob Geerling pondered artificial intelligence and the design profession: what predictions are expected by 2025:
“I can well imagine a future where AI plays the role of a personal assistant, equipped with a deep understanding of our motivations, heroes, and what inspires us. They could evaluate our work, offer useful ideas and ways of professional self-improvement. The world will become a place where special bots can provide us with different points of view on a problem and different approaches to solving it. Where simulations of real users test the products we have developed: they test their performance under various conditions and propose adjustments even before the prototype turns into a working model. Where the A / B test algorithms (split test – several different versions of the page are evenly alternated for all its visitors) are constantly looking for opportunities to make even microscopic changes to improve the quality of the design. “
We do not undertake to think so far, but we can assume what will change in 2021. According to forecasts, more and more often we will see voice search on sites. This is due to the rhythm of a person’s life, in which spending time typing your request is a luxury. In the future, to reach such a level of using AI that the site, knowingly knowing the client’s preferences according to the data from BIG Data, will build the most comfortable platform for a specific user (hello to fans of the Black Mirror series). But this is still in the future, which has no time frame.)
5. Photo + graphics = love
A hybrid of photos and graphics is another trend in web design of the outgoing 2020 and the upcoming 2021. Such a collage is a tribute to pop art lovers, it creates not only a playful mood but also a certain layering. This adds interest to your product and service. Unfortunately, not all manufacturers on the Russian market favor this story, preferring standard solutions. Western competitors, by contrast, are easily embedding photos and graphics on their sites, from media sites to food and clothing. The use of such a technique in the latest segment of goods may indicate not only that your company is keeping up with the times, but also about the product itself, about your target audience. By the way, DePlace Maison uses another “2021” feature: fluid animation. On the brand’s website, your mouse will be a black blot, which you definitely want to play with, which means your visit time will be longer. And this is a guarantee that you will study the site and its products without knowing it.
6. Asymmetric layouts
Despite the social media style design trend, there is also an organic trend with it to break boundaries and understand page markup.
The usual grid, like that of online stores or news resources, is fading away. New forms appear that are unlike each other. The boundaries are really erased and the usual placement of “Menu”, “Contacts”, “About us”, etc. may look completely unconventional. An asymmetric layout will at least pique the user’s curiosity, which means they’ll start exploring your site, then your product. You will keep the client on the site longer than the usual square, understandable grid.
When using asymmetry, do not forget about balance and composition so that one part of the page does not “outweigh” the other. For example, the image should not be larger than the text block.
Let’s summarize who should use asymmetry and for what purpose:
– to revive the selling page, initially focusing the attention of users on the most important things;
– to facilitate the visual perception of information;
– it is more profitable to use the space on the page;
– the very situation of asymmetry is well suited for emotional design, the use of images/information of an advertising nature, goods that enhance emotional motives;
– a feeling of dynamism is created, the site ceases to be boring.
What not to do in 2021:
1. Use many different fonts, both in size and style.
What is the text on the site for? In order to read it, learn about you, your product, or service. But there is a big “BUT” – small print or using a complex font style.
A modern person holds attention for 8 seconds – during this time he can read only 18 words. If your text is larger, and also in small print, most likely, the user will simply scroll down the page further. Optimization Ways: Use video or animation + voice to bring your product to life.
Different font styles are also distracting and sometimes annoying to the user. Let’s go back to the door site example. Let’s look at the name of the company: how quickly did you read it? How many font styles have you counted? Thanks to this fragmentation, the impression of chaos is created, although everything is built logically. Old school: the information worth focusing on is highlighted in bold and the text size is larger, but at the same time, the clutter and variability make the visual perception heavier. The consumer first tries to read the name of the company, then sees the phone number, then tries to read the translucent and small text.
2. Use sliders
Whoever tried to open the MVideo or Zara website from the phone at least once will nod their heads in understanding. Sliders not only make the site heavier but also make it out of date.
According to a study by Nort Dam University, only 1% of respondents clicked on the slider. At the same time, 84% of clicks were only on the first slide. The principle of banner advertising on search engine sites works here, as a rule, it looks like a slider and is placed on the side of the site, so no one pays attention to it.
3. Low contrast fonts
We hope that no one does this anymore, but if you understand that this item is about you, call/write to the professionals in order to correct the mistake.
The editor of an Australian magazine, Colin Wheeldon, decided to ask his readers what color of background and text they consider acceptable:
– Black text on white: 70% good, 19% fair, 11% poor;
– White text on black: 0% good, 12% fair, 88% bad;
– White text on purple: 2% good, 16% fair, 82% bad;
– White text on royal blue: 0% good, 4% fair, 96% bad.