50 Web page header design for users to linger (on)

In the template flying today, opening a blog seems to be a particularly simple thing, is not it? Platform is there, the blogger just need to go to the dispatch, this is all right, how difficult?

But the reality is that there are thousands of websites and blogs, and it's not easy to want users to notice you and focus on you. What do you need to do to stand out from a large number of peers?

Creating a nice blog does not require you to build the entire layout from scratch, you can use the existing template to match it with a banner map that is nice enough and appropriate, plus an interesting headline that can be more effective in attracting the target audience and users. Think about it, when users open a Web site, the first show is the site's page header, whether the user will stay to a large extent at this moment there is a decision. It is necessary to design a good enough Web page header.

So what exactly is to be done? Shiko, let the following 50 design cases show you how it works.

1. Function description

The blogger of the Everywhereist is a heavy travel enthusiast who travels around the world with her husband and leaves their mark, and broadcasts them on a blog. Passports, maps, and film are all evidence of their travels around the world, and the blogs banner These elements are enough to convince you.

2, let the title become your logo

Weeks of UX, just look at the name you know this is a year-round user experience related blog, its page head is simple enough and clear enough, you know that what you read Next must be a UX-related article.

3, the type of design

Trent Walton's web site is doing so, in the title of the selection of more type, so that the site on the title of different articles have a clear distinction, but also easier to attract users to subdivide.

4, show the dynamic effect

Dynamic effect is always more attractive than static elements, and as a compelling website blog, VOTD will open the site in your time, add in a beautiful logo dynamic, full of texture of the logo on the white background gradually unfold, this dynamic effect will often let people fondle admiringly.

5, the use of expressive fonts

The Wanderlust Project's header uses a very character handwriting style font to write the title, which is not only very eye-catching, but also when the font is applied to the map, it appears that the site is still very consistent.

6, white bottom black word is always good

In the Web layout, white background black Word This classic collocation is always not wrong, but the character and layout of the font will determine the temperament of the entire site. The socialite Family is a typical fashion website, with a stylish and elegant interior design, and a graceful selection of fonts.

7, let the logo in the central position

Premium Pixels's website collection of a large number of design articles and resources, the most eye-catching page is the website that cool logo, when the mouse hovers over the time will change. The website content is very rich, perhaps you want the resources.

8, font typesetting and illustration match up

The content of this site is about how to cook for the children, the Web page not only uses the theme-related illustrations, but also combines the effect of good text composition, combined with a unique color, so that the whole page looks delicious.

9, reduce the page header font

The New Minimum is a stylish digital magazine with slim and modern header fonts and limited navigation features that make the entire page look very simple.

10, bold with color

Joy the Baker used a watercolor-textured substrate at the bottom of the page and made the whole page's appeal rise.

11, high-definition big picture page head

A picture wins thousand words. I Am a Food blog as a gourmet blog, its design in the same category is not much, the designer will be reduced to a very small navigation bar, and then full screen wheel broadcast large map filled the entire interface, content Han, but also full of visual impact.

12. Add Texture

Lark and linen is an interior design blog, designers choose a handwritten font in the header header, and add textured texture to the font, which is very fitting with the theme of the blog.

13, Text plus illustrations

Keiko Lynn This site also uses static illustrations and text titles to design the page head, in order to create a playful and lovely atmosphere, color and font style selection are more vivid and fancy.

14, the use of exaggerated font size

Nature will be more visible. This web site called good moods the site name with oversized fonts on the home page, is simply a bold "hello", even in the relative position of such blog design is quite rare.

15, full of creative design

The Five O ' Clock Cocktail blog is a blog about cocktails, designers in the design of the page, the cocktail glass elements into the head, Han and visualization. Linear icon Collage pattern not only will not be distracting, but also very stylized.

16, manufacturing visual depth

Friend of Type's web site has assembled a number of graffiti-style black icons, the head of the use of green graffiti font as a distinction between the page header and foreground content with a shallow shadow to create a sense of hierarchy and visual depth, so that the entire site appears more structured.

17. Keep Minimalist

Freunde Von Freunden is a blogger dedicated to creative workers, whose name is German, meaning "friend of friends." The website design style is extremely simple and has the taste, this kind of throughout always style manifests on the page head, gives the person to feel also very good.

18, the unique logo

If your site has a design that is good enough to let it show that the logo, good designs will put their own logo in the center of the head, eye-catching and in place.

19, the beautiful handwriting font logo

Many fashion-like websites use such a page header design, handwriting style logo plus simple navigation design, the temperament of their own brand by strong contrast and personalized design performance, with a reasonable white and branded color, the site will give people a kind of elegant and professional feeling.

20, the design of a unique pattern

Now many of the site's logo will use a free and artistic design, elegant, unique and full of modern wind, such a pattern can be very good and the current popular modern wind together, but will not give people too strong brand logo feeling.

21. Font collocation

and collision color is a truth, two different styles of fonts in some occasions will create a strong sense of dislocation, this dislocation if the good handle will be very eye-catching and will not appear too play. Homey Oh My page header of this site is this way to create a visual center of gravity.

22, beautiful Carousel Map

Simple navigation, tidy title and beautiful Carousel map are the features of the home page of Harper and Haley, and the most attractive is the selection of the wheel-seeding chart.

23, away from the central title

Bie's title design is also very appealing, just like the Lust for Life page header design, the left-aligned title is not only a unique handwriting font, but also dynamic.

24, very simplified

Unlike the simplicity of the style, lined and Unlined's web site design tends to be more minimalist, simplifying the overall design, making fonts and colors as simple as possible, highlighting what's really interesting.

25, center positioning logo

Lauren Liess is also a classic elegant design blog, and the same kind of fashion sites, occupy two lines of the logo is magnified in the center, different styles to attract users ' attention. If your logo is similar to this, you may wish to adopt a similar design.