11 Tips For Designing A Great Website Header

Start a free trial ➜ https://hubs.ly/H0sDJs90

In this video, you'll get an overview of various styles of website headers and get tips on how to design a great looking header for your website!

For a detailed breakdown with screenshots, see our blog post:

11 Tips For Designing A Great Website Header
https://hubs.ly/H0sDHT70

---------------------------------------------

11 Tips For Designing A Great Website Header

A website header is the first thing that visitors see when they visit a site, and it appears on every page of the site. A good website header balances clean design and crystal-clear navigation to the deeper pages of a website. As such, it’s important to concentrate on best practices to design a website header for your clients that helps their customers quickly get to the information they need. To help you build great headers for your sites, here are 11 tips to guide you.

0:24 Emphasize the most important elements
1:17 Use clear, readable fonts
1:45 Use transparent headers for sites with impressive images
2:10 Shrink the header on scroll to keep key info visible
2:36 Got a shop? Put it at the top!
2:56 Use effects to show visitors where they are, and where they are going
3:26 Choose a layout that flatters the logo
3:50 Use design elements that express the company’s personality
4:16 Use expandable menus to let images shine
4:55 Consider the sidebar – is it right for your site?
5:18 Change them up to keep your websites fresh

TIP #1. EMPHASIZE THE MOST IMPORTANT ELEMENTS
Consider the main thing that you want site visitors to do on a site, and make sure that this element is clearly visible in the header. For example, for nonprofit sites, have a Donate Now icon; for restaurant sites, have a Book a Table icon.

TIP #2. USE CLEAR, READABLE FONTS IN YOUR WEBSITE HEADER
Text in a header must be readable at a glance. Use words that are short, when possible, and choose fonts that are clear and in a relatively large font size. Headers are not usually the place for stylized fonts, as these can be harder to read.

TIP #3. USE TRANSPARENT HEADERS FOR SITES WITH IMPRESSIVE IMAGES
For sites that have dazzling images, try using a transparent header. This gives maximum exposure for images, while still showing important links.

TIP #4. SHRINK THE WEBSITE HEADER ON SCROLL TO KEEP KEY INFO VISIBLE
The shrinking header is a great way of minimizing the amount of space headers take when users scroll while keeping key site information accessible. They are particularly handy if you’ve designed a really big, impactful header. The shrinking header can show primary navigation elements and the logo, and change color as users scroll.

TIP #5. GOT A SHOP? PUT IT AT THE TOP!
In eCommerce sites, place a shopping cart icon in the header. This enables site visitors to complete their purchase easily and in a single click, regardless of where they’ve gone on the site.

TIP #6. USE EFFECTS TO SHOW VISITORS WHERE THEY ARE, AND WHERE THEY ARE GOING
Hover/selected effects are important elements in guiding users as they navigate. Choose effects that are visible enough to attract attention, but not so visible that they distract. Note that some effects are only visible on desktop, so be sure to choose effects (such as a color change or underline) that will be visible on mobile devices.

TIP #7. CHOOSE A SITE HEADER LAYOUT THAT FLATTERS THE LOGO
Headers are often the first thing site visitors see, so having the company logo is important. Choose a header layout that best suits the logo shape and style. In general, round and square logos look best in the center; rectangular ones look good to the right or left side.

TIP #8. USE DESIGN ELEMENTS THAT EXPRESS THE COMPANY’S PERSONALITY
You can use colors and effects to express a company’s personality. For example, if a brand is light-hearted, having a floating effect when visitors hover the navigation can support this feeling. By contrast, a floating effect may be less appropriate for clients that offer professional services, such as lawyers and real estate agents.

TIP #9. USE EXPANDABLE MENUS TO LET IMAGES SHINE
Expandable menus are terrific for image-rich websites such as portfolios as they allow plenty of space for images to shine. They’ve appeared on mobile websites for quite some time, and are increasingly on desktop ones, too.

TIP #10. CONSIDER THE SIDEBAR – IS IT RIGHT FOR YOUR SITE?
Sidebar headers enable you to keep key information on the site, while users scroll and with minimal distraction. They can be handy for sites with important anchor links, as those links will appear along the side at all times.

TIP #11. CHANGE THEM UP TO KEEP YOUR WEBSITES FRESH
Headers are incredibly flexible, and have a huge impact on how your sites appear. That’s why changing website header layouts is a great way of keeping websites looking fresh, with minimal effort.

-------------------

Duda Professional Website Builder:
https://www.duda.co