Scientists at Stanford University conducted a survey that showed that 46% of respondents form an opinion about the site based on its appearance and interface. If the user, does not like the design then all the content seems unreliable and not trustworthy. In this article I want to talk about what are the ways to improve the design of the site.
Correctly selected illustrations make the site live. Their main task is not just to fill an empty space, but to evoke emotions and associate them with a brand. Author’s illustrations will help to make the site recognizable. They can be used in headings, icons and when creating animations.
Illustrations will help make even the most minimalistic design friendly.
When filling the site with illustrations, it is important to remember uniformity and not overdo it. The most beautiful illustrations will cause rejection if there are too many.
Dropbox uses simple-to-use illustrations that enhance the impression of text.
Typography plays a big role in the formation of brand identity. It depends on it, how users will perceive the text.
Every font has its own character. Try to choose the font that will convey the mood of the text at the expense of the graphic image.
Conditional fonts can be divided into four categories:
Antifiven fonts (Serif) are serif fonts. Previously, they were used to recruit books and periodicals, but with the advent of high-resolution screens, antiquity fonts came to web design. They are easy to read, so it is suitable for typing large amounts of text.
Grotesque fonts (Sans Serif) – sans serif fonts. Well suited for texts of small volume, headings and narrow columns.
Decorative fonts are fonts that mimic a historical style or decorative processing. Suitable for dialing a small amount of text, which requires a complex decoration.
Handwritten fonts are fonts that imitate handwriting or calligraphic style. Are used the same as decorative.
Google Fonts – a well-known library of free fonts, where you can easily find the right font and import it to the site. The main thing is not to forget to adjust the size, style and line spacing.
To design your site design studio Perky Bros used two fonts: Brown and Minion. The grotesque font Brown used in the design of the navigation bar, and the antikvenny Minion for typing about the company.
Another design bureau Your Majesty also uses two fonts: grotesque Plain for menu design and decorative Canela for highlighting information about the company’s main partners.
Do not be afraid to combine serif fonts . The main thing is that they are easily read and combined with each other.
Most people find it easier to remember a picture than reading or hearing text. Therefore, the choice of photos for the site should be approached especially carefully.
According to the research, one image can replace 84 words.
The correct photo for the site should be:
- Of good quality;
Designers like to post large background photos on the sites. They are beautiful, but quickly forgotten. The exception is photos that cause emotions: for example, images of people or photos from unusual angles.
The ideal option is to discard stock photos, especially with free photoshots. If a user sees a photo from a site on another resource, this can undermine the credibility of your content and the brand as a whole.
The Post of Russia has two official representatives in social networks – Dmitry Markin and Tatyana Kuznetsova. Users found out that both photos were purchased on photoshoots and doubted the reality of the employees. History quickly spread through the network, striking the reputation of the Post and its “officials.”
Animation can be fullscreen or integrated into the navigation. Its main task is to help the user deal with difficult moments and draw his attention to important details.
Web development studio HTMLBURGER uses a “burger” menu in the literal sense of the word. Navigation elements come to life when you hover over the cursor. This not only draws attention, but also makes it clear which elements are clickable.
As in the case of animation, a moving image on the page instantly captures the attention of users. The main advantages of video – dynamics, the development of the plot and a greater emotional response.
The video on the site is suitable for the following purposes:
- Show something that is difficult to tell (training videos);
- Tell a story;
- Demonstrate the product.
Background videos only for beauty are best not to use: they reduce the performance of the site and at the same time do not deliver any information to the user. If you still want to surprise users, I advise you to take a closer look at alternatives to video: animation, parallax and cinematography.
Cinemagraf is a photograph, one element of which makes a slight and infinitely repeated movement, and the rest of the image remains motionless.
Source – cinemagraphs.com
When placing a video on the site that plays automatically, it will turn off auto audio playback in a good way. Users like to decide for themselves whether a sound is needed – and it is better to provide an opportunity to do this easily. A sudden loud sound scares not only the user, but all those around him.
Instead of a thousand words – a bright, dynamic video, which from the first seconds immerses in the world of the game Monument Valley.
With each new generation, monitors and device displays are getting better. Therefore, the concept of a “safe web palette” is obsolete. Choosing the color design of the site, it is worth remembering about:
- Target audience;
- Corporate style;
- Contrast typography;
- Color harmony.
To choose a color solution, determine the target audience and the message you want to bring to it.
Using a bright color palette when designing a website is a popular trend in recent years. This is a universal solution for sites designed for a wide audience.
Some designers select a color scheme by eye, others use color palette generators. One of the best at the moment is considered Adobe Color CC. With its help you can create your own color schemes, and also be inspired by the work of other designers.
Fans of material design like tools like MaterialPallete or Material Design Palette Generator.
True, it is important to remember that generators help the designer, but do not replace the sense of taste. The effective palette that the generator gave out may turn out to be a poor solution at the implementation stage.
A service that will sign and send a postcard to your friends for you. The main target audience of the service is women, but not only they will appreciate the bright color scheme and cute illustrations.
Monochrome palette – the combination of one basic color and shadows, tones and halftones of this shade – allows the site to look stylish and concise. This solution is great for creating a flat or minimalistic design.
Choosing a monochrome palette for the site, special attention should be given to contrast. If it is not sharp enough, the elements of the site merge with the background.
A discreet monochrome website design studio from Canada.
Once everyone forgets about the retro style in web design, he returns again. Designers like it for its restrained color palette and the ability to evoke nostalgia among users.
To design your site, the digital agency uses sepia and a sign that was previously designated by roadside motels and restaurants on America’s highways.
The development of virtual reality technologies is one of the most discussed topics of this year. While technologies do not yet allow full use of VR in web design, all existing attempts are at the prototype stage. It is not completely clear if VR can make sites more convenient or just a way to attract attention.
But there are techniques that can be called imitation of virtual reality. Their main goal is to allow the user to feel himself a participant in the events.
Parallax effect is created when scrolling, when the background and the object on it are scrolled at different speeds. It allows you to create the illusion of a three-dimensional. Admission can be applied to an entire page or individual blocks to draw attention to a certain part of the content.
Heroes of the project to help the homeless come to life when scrolling through the page and tell the story of their lives.
360 ° view
A 360 ° view is created from a multitude of photographs of one subject at different angles. They are glued in such a way that the user can rotate it 360 ° and view it from all sides.
This technique performs the same function as the video: it demonstrates the goods. However, the main difference from video is the possibility of control.
When viewing the product, the buyer himself controls the time and speed of the review. This makes him a participant in the process, not a passive observer.
So, tips to help improve the design of the site
- Use of author’s illustrations.
- Attention to typography. Each font has a character – pick one that fits your text.
- Refusal of stock photos: their use undermines confidence in the brand.
- Use animation to highlight important blocks.
- Determine the purpose of the video on the site: tell the story, explain the complex, demonstrate the product.
- The choice of a color scheme that will support the ideology of the brand.
- Transformation of the user into the participant of events.
Whichever reception you choose, remember common sense and trust your own experience. Each advice should be justified by a specific purpose. The is no ideal solutions for all situations, but there are those that suit your project.