The first screen concise design trend of famous websites

When a user logs on to your site, the first thing he does will certainly notice your site's header information. Whether he is a small navigation bar, or a large picture full screen wheel display, the site's head design is undoubtedly a very important part of the whole station layout. Most of the site's head design tends to impress the visitor and better help him to promote the site's brand. A good first screen design can leave a lasting indelible impression on every visitor.

In this article, I would like to share a few very useful tips to help web designers achieve a tall header design. The best way is to focus on the content of the site, and focus on the important part, so that this part of the entire head of the design has a distinctive feature of the protruding out. On the other hand, we should also pay attention to the design of the time to expand the influence of the brand.

Large background picture hero Images

In recent years, the use of a large full-screen picture in the first screen design has become more and more commonplace, the rapid development of the Internet to make the download of resources unprecedented fast. Now the background image contains a 1920x1080 image that allows him to adapt to any size of the screen is fairly simple.

Hero image is a Web page design term that is a specific type of page banner. Hero image is a large banner graphic that highlights the front and center position of a Web page.

Hero image is often the first sight visitors encounter on the site. Its purpose is to outline the most important content of a Web site, usually containing images and text, which can be static or dynamic.

Hero image is more typical than banner, and he is often placed in the important position of the first screen. Often with a number of powerful photographic pictures, used in product promotion, company or individual promotion. Brand has always been a decisive factor in it, but hero images is not always about the brand, their goal is also to narrow the visitors, so that their relationship with the site more closely.

For example, on Woocommerce's homepage, we can see that hero image does not have to be related to Woocommerce itself. This image creates a preset scenario for the ecommerce store and proposes a solution to sell their products or services. Ideally this picture will attract the attention of the business and propose the solution they want. Let Woocommerce, for example, run online stores for them.

I really like to use hero images to complete the relevant content design. He was able to make the site stand out and make the picture look more powerful. The most important question of the moment is to find a picture that is perfect for this project. If you were a photographer it would be a lot easier, but for those of us who don't take pictures, we can consider buying some buyout pictures to solve the problem (it's really bad to steal a picture, now it's not very expensive, From I do support genuine ha ~) ~ such as Unsplash Harold has creative and so on.

Clear navigation links legible navigation links

For the first screen design to be conspicuous, the most important element is navigation. Unless you design a single page layout, it is likely that you need some links to control the site rather than navigation, and many single page designs apply a scrolling link design.

It is very important for users to have a simple and readable navigation. People want to be able to quickly identify the page and make a choice. Links can be bold, wireframe, underline, or links and backgrounds with contrasting colors and so on, all in order to make it easier for them to read.

Give a design studio 1minus1 example, they create a black-and-white contrast color scheme. And this navigation link put a small paragraph of comment text. This may not help the user experience, but he enhances the overall design feel.

Kin HR is another site that uses a different form of navigation. The effect of the link bold and the wireframe is placed in the upper-right corner of the page. They used a gray font to add a white effect to the mouse. Such a design makes navigation full of vitality (this effect in the CSS only need to mark the logo on the tag plus hover definition of the mouse after the font color on the line ~ this belongs to the knowledge of the front-end Web production ha ~ I just know on the line ~). On the other hand, the link to the current page has an underscore effect to represent the position, and there is no dependency on the content. Readability is the quickest and easiest way to link design. Be sure to remember these when you are designing your own navigation menu.

Compelling brand design noticeable branding

The importance of the brand to the company is self-evident, no matter which company they all need an eye-catching brand design. The things that visitors remember must be compelling, and he will stand out from a whole bunch of familiar logos.

Theme Trust's logo is memorable, it is big to your eyes immediately back to focus on the above. He is also a simple and excellent landmark case, not too much modification. The logo has a "T" shield graphic, and their icons add multiple spaces to the design, such as the contrast of the text. Find new ways to make the site brand more prominent in the first screen. Never underestimate the power of a good logo.

Fixed navigation bar fix scrolling Menus

As Web browsers continue to update, some special effects are becoming more common. The fixed navigation bar is one such effect, he was discovered by some famous modern developers, he is a navigation in the Web page anywhere can be found the fastest solution. Such handy discoveries are due to the rapid development of CSS3 and jquery. (CSS3 and jquery are knowledge of Web page production ~)

Ausdom This site has a very interesting fixed navigation bar. When you first log on to the page, all navigation links seem to be on the top right of hero image on the homepage, the navigation link is a white font inlaid in the darker background.

When you start scrolling the mouse, the navigation bar will bounce out and follow you to move to the page where you scroll to the mouse. He used a white background color, so the logo and text links also became a new color. It's a pretty cool design style, and he keeps the page intact so that navigation can be easily found in any location.

Another kind of hybrid navigation, you can try to add your own design style, make the fixed navigation bar more creative. For example, the Drew Wilson Web site applied a scrolling navigation bar to his top and applied a cloudy blur to the navigation bar. There are not many links on the navigation, because the site has only one page, but he is still a creative design attempt, in the fastest time to attract your attention.

Inspiration Summary ~

Master these design tips to make a good first-screen design faster. These first screens are designed to attract attention mainly by the design of content, logos or navigation. Because users tend to be interested in these title page elements perfectly show how to ignite the curiosity in the first visitors. Easy to be attracted by the interesting headline elements and the perfect page display, the most perfect first screen design should be to ignite the curiosity of the visitors at the first time.

Daniel Filler

Grain & Mortar

Playground INC.

Sellfy

Kiawah Island

Localfu

Statsiv

N+1

Seed Spot

Leshopo

Picsell

Góralski Domek

Clouder

Circle

Paleo Granola Sola

Cuppa

Photoshop Etiquette

CUPS Annual

Pastini Pastaria

Metaverse Mod Squad

About the author

Jake Rocheleau is a creative writer and UI designer. You can jakerocheleau.com in Twitter@jakerocheleau or you can visit his personal homepage.

Articles are translated in the spare time, there is no technical content ~ My english is not good, dream of one day to be able to and foreign designers fluent exchange AH ~ For this is a hobby to start translating small text, but also welcome love design Love English friends to join in, we a group of good foundation friend built a Zcool translation group ( In my homepage can see, in this will not put, lest like to play advertising, welcome to stir the base Oh ~ ~