-
99 Great Website & Blog Headers for Design, Layout & Content Inspiration
- 19 April 2012 by Dean 2 Comments
Headers – every site has one, but what does a good one look like?
Header categories in this article:
- Blogs
- Business & E-commerce
- Cafe & Coffee
- Digital Blogs
- Hotels & Tourism
- Magazine & News Style
- Products & Services
- Web Design & Development
- Random
A website or blog header is one of the most important areas of your website. In almost all cases it is displayed on every page (called a “global” element) and is inside the first viewable area on the screen when someone visits your site (called “above the fold” – a prime piece of screen real estate).
This huge collection showcases 99 of the latest website and blog headers to give you inspiration on how to design a great header and what content to use.
Each header has been expertly reviewed so you know it has a good layout (for a good user interface) and well chosen content (for good information architecture). These are the two most important elements of a header – consider these two points as you browse the headers below.
Banners are included to show you just how common it is for sites to have large leaderboard sized advertising in the header.
Note: View a large version of the header by clicking the screenshot below.
Blog Headers
Random Stuff

http://styleobserver.com/

http://www.walltowatch.com/

http://www.youngprepro.com/
Business & E-commerce

http://happycog.com/
Startup Nation – Home Page
Startup Nation – Section Header (Blue)
Startup Nation - Section Header (Yellow)
Cafe & Coffee
Digital Blogs
Hotels & Tourism
Magazine & News Style
British Journal of Photography
Think Progress – Home
Think Progress – Section Header
Products & Services

The header here sits both horizontally and vertically. The cog-looking logo on the left and links below it are part of the global navigation, as well as the top horizontal gray bar. http://graphpaperpress.com/
MailChimp – Section Header (Blue)
MailChimp – Section Header (Orange)

Shopify’s header is a “sticky header”, staying at the top of the page when scrolling down. http://www.shopify.com/
Web Design & Development
Happy Cog - “Mega” Menu Expanded
Happy Cog
Random
Official London 2012 Olympic Games
Tips For Making Your Own Header
You don’t need to be a pro designer to make your own effective header. Seen in many of the above headers, consider the following when creating your own website or blog header:
- Logo is positioned on the top left of the page.
- Taglines or supporting copy are included if the logo text doesn’t explain the purpose (e.g. Mental Floss in the blog headers section doesn’t tell you what the site is about, but the tagline “Where knowledge junkies get their fix” clears it all up!). This helps to reinforce your offering.
- About and Contact Us page links are in the main navigation.
- Subscribe and follow (RSS, Email, Twitter, Facebook).
- Many blog headers include category links as the main form of navigation.
- Search box included (larger sites only, or blogs with lots of posts).
- Most prominent calls to action are included in a notification style area (e.g. Chris G and Colour Lovers in the digital blogs section).
- Logo and navigation area are usually contrasting in colour to the main body of the page.
Want to learn more about good design for web? Get your head around IA, ID, UX, UI, Usability: Making Sense of Digital Design Jargon.
Did you know that you can use simple PHP to easily selective display content on the home page using WordPress.
- Categories:


































































































Very nice and informative blog. Different designing styles have added a much needed flavor to it.
Pingback: 99 Great Website & Blog Headers for Design, Layout & Content Inspiration | You Make The Website | The Social Media Library