Editor’s note: Banner is one of the design elements we talk about most. It is the signboard of a web page and the most visible visual element for users. Today, we will talk about Banner in the vanguard, the page header, its design.
Web designers all know that the first impression of a web page is very important to the user, and the first impression of a web page to the user largely depends on the visual design of the page. Although there are a variety of web pages, most of them use large background or oversized Banner for visual design purposes. When the user opens the web page, the Banner that catches the user’s eye is a key factor affecting the visual design. There is a special term Hero image for it, which is usually called the header image. Therefore, the design of the page header needs special attention.
The header should be more than just a beautiful image, it should be a powerful visual communication tool. In today’s article, we’re going to show you some of the best practices for graphic design.
1. Be sure to use relevant pictures
Be very selective when choosing pictures.
The right image can enhance the overall experience, while the wrong one can ruin the design. In the selection of pictures, try to choose pictures that fit the theme, consistent content, and match the theme and purpose, so as to avoid the sense of fragmentation between users’ expectations and content. Just like they hate clickbait, users will lose trust in the content of a site because the header doesn’t match the content, and they will fly away.
The content of the first picture is actually about loans, but the picture is about towels, so there is a mismatch in information transmission.
The main product of this website is ice cream. The content is consistent with the picture and also meets the expectation of users.
2. Make the header the core
The header is an important container for content.
If you want something to stand out and stand out from the rest of your design, use the first image. A visually well-designed header will make users stop every time they open a site.
In the first image, Apple has provided us with the best case study every time.
Tip: The first image does not need to present all the information. Instead, the first image should emphasize the main points and highlight the most salient points.
3. Come up with emotional designs
Integrating emotion into design and using emotion to describe users is the way to design the first picture. Designs that touch users’ emotions are more persuasive.
Most of the time, no matter we use creativity, use popular IP, elaborate copy, just want to make the first picture to surprise, like, need, and ultimately through it to arouse the user’s mood.
Positive emotional stimulation is a great way to create a sense of interaction between your users and your site.
4. Be sure to have HD
Images should never be blurred or pixelated. This is a silly mistake, but it is often unavoidable.
Poor quality images are very alienating, and on hd screens everywhere today, blurry images are unacceptable (specialized pixel wind is another case).
Want users to have a positive mood on your website, then the quality of the picture must be guaranteed, high-quality pictures can let users get accurate information, clear pictures can always make people look more comfortable.
5. Strengthen CTA button
The header is often paired with a behavioral call (CTA) button. Due to the first graph illustrated usually extremely prominent on the vision, but with call button on the first figure, its essence is to attract users, information, and guide the user to click on the button, so call button and visual information between rich images, should not interference with each other, but by design, let the CTA buttons more outstanding, make pictures in the position of the auxiliary, Finally achieve the purpose of attracting and guiding.
The visual weight of the button should exceed the visual weight of the image.
6. Control contrast
Contrast is a must in any design, as well as when designing the first image.
The text and typography in the first image should also be carefully designed, usually in bold and legible fonts. If your image and text are superimposed, pay attention to the contrast between the image in the background and the text in the foreground to make sure the text is legible. Often, designers overlay images with a translucent color layer to reduce the visual complexity and distraction of the complex colors.
In addition, you can use Scrims technology, a web technology that recognizes text and contrasts images with underlying images to ensure readability.
Tip: If you plan to use a graphic overlay for your first image, make sure that the main body of the image is clearly visible and easily understood by the user.
7. Consider different screen sizes
Today’s content needs to consider cross-platform, cross-device, cross-platform compatibility and adaptation. When your pictures appear on screens of different sizes, whether they can be displayed properly and correctly, and meet the display requirements of different platforms and screens.
At this point, you should learn more about responsive design:
- 7 Tips to Help you Figure out graphic Design for Responsive Web pages
- Nine DOS and Don ‘ts for Responsive Web Gallery Design
- Tencent dry goods! Responsive image finally has a great solution!
Tip: With the need for responsive design, you can use a multi-size image generation tool like Cloudinary to help you generate images that meet responsive image breakpoints.
8. Consider using illustrations
Using an illustration in the header of a web page can personalize the header. Compared with pictures, illustration is more personalized, and the content of illustration is more free and easier to control, from content to technology.
Dropbox uses illustrations to present and express complex content:
Tip: When using an illustration in the first image, try to keep it as consistent as possible between the illustration and the overall design, and try to make it look like they come from the same source.
conclusion
The header is definitely one of the most critical parts of a web design. Choose high-quality, interesting images, combine them with the content of your site, and use these best practices to take your first images to the next level.
The copyright of this article belongs to the author of the original, reproduced please indicate the source of this article address: www.uisdc.com/best-practi…