{"id":7578,"date":"2022-01-14T14:31:56","date_gmt":"2022-01-14T14:31:56","guid":{"rendered":"https:\/\/www.thewebkitchen.co.uk\/?p=7578"},"modified":"2022-01-14T14:31:29","modified_gmt":"2022-01-14T14:31:29","slug":"creating-the-perfect-header","status":"publish","type":"post","link":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/","title":{"rendered":"Creating the perfect header"},"content":{"rendered":"

In design there\u2019s never a one size fits all approach, there are infinite ways to create something visually impactful without confining yourself to one style. That being said, there are some best practices to ensure your header is as strategic and creative as possible, thus creating the perfect header.<\/span><\/p>\n

What is a header?<\/b><\/h2>\n

First of all, a header refers to the top of a website page. The purpose of which is to clearly outline the content within the page\/website and let visitors know what they can expect from the site. This is the first thing a user will see, which means making it visually striking is as important as unpacking the key content within the fold. The synergy of these two parts is what creates a perfect header.<\/span><\/p>\n

What should be featured in the header?<\/b><\/h2>\n

This is largely dependent on the industry of your business, but there are some common areas that are consistent across the board. These include: <\/span><\/p>\n

Navigation<\/b><\/h2>\n

Every site should have a seamless navigation that allows users to find what they\u2019re looking for quickly and easily. There are lots of ways to house these including: a conventional navigation, hamburger menus, super navs etc. The number of pages in the sitemap largely dictates which is the best approach to use, but all are solid options if executed well.<\/span><\/p>\n

<\/h3>\n

\"Working
\nWorking Voices \u2013 Design, Development, SEO, CMS, Mobile Website<\/p>\n

Logo\/name<\/b><\/h2>\n

Another essential is the brand name and logo. A user must instantly recognise where they are, so placing this at the top of the homepage creates that instant brand recognition. The position can vary between designs, primarily for stylistic reasons. It\u2019s commonly found in the top left, but don\u2019t let this discourage you from experimenting with other placements.<\/span><\/p>\n

<\/h3>\n

\"Rose
\nRose Bruford College \u2013 Design, Development, SEO, CMS, Mobile Website<\/p>\n

Engaging introduction<\/b><\/h2>\n

You\u2019ve got to assume every visitor knows nothing about your company. Therefore, outlining what you do through the use of copy and imagery is essential for a visitor to decide to continue to interact with the brand.<\/span><\/p>\n

<\/h3>\n

\"Pennthorpe
\nPennthorpe School \u2013 Brand Assets,\u00a0<\/span>Website Design<\/span>, Development, SEO, CMS, Mobile Website<\/span><\/p>\n

A call to action<\/b><\/h2>\n

Whilst all websites have different end objectives, they should all aim to have as much interaction with the visitor as possible. Therefore, having one clear call to action is a great way of reducing bounce rate by giving them the next piece of information. This call to action could be as simple as \u2018Scroll down\u2019 on a content focused website. Alternatively, if the website is in the ecommerce space, including a best selling product and a link to the detail page could be a great idea.<\/span><\/p>\n

<\/h3>\n

\"Elton
\nElton John Aids Foundation \u2013 Design, Development, WebGL animation, Mobile responsive website, SEO, CMS<\/span><\/p>\n

<\/h2>\n

Creative<\/b><\/h2>\n

Adding creative flair to your website has never been so important. Visitors spend an average of 15 seconds on a site, so capturing their attention is key to reducing bounce rate and keeping them on your page \u2013 a strong creative concept can do exactly that. There are many ways to achieve a unique & perfect header, but some great assets include: photos, videos, illustration & WebGL. When these are paired with animation this can create a really slick experience that encourages visitors to click around the site. To view some great examples check out our portfolio<\/a>.<\/span><\/p>\n

<\/h3>\n
\nhttps:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/sm-menu-animation_1.mp4<\/a><\/video><\/div>\n

Sea Mirror \u2013 Design, Development, SEO, CMS, Mobile Website<\/span><\/p>\n

Ensure it\u2019s responsive<\/b><\/h2>\n

In a world where 54% of internet users are browsing via mobile, having a site that looks great at every device size is a must. Although the screen obviously becomes smaller, it\u2019s important the header packs the same punch as the desktop site. Elements may have to get hidden to allow all the most important aspects to stand out within the fold, this is where content hierarchy comes into play. Understanding what your visitors want to see first, is the key to a great header.<\/span><\/p>\n

<\/span>
\n\"Sea
\nSea Mirror \u2013 Design, Development, SEO, CMS, Mobile Website<\/span><\/p>\n

Conclusion<\/h2>\n

So creating the perfect header is possible? It absolutely is, although it\u2019s important to follow these core principles whilst designing your header. Equally, don\u2019t let this hold back your creativity, it\u2019s okay to experiment with the positioning of these elements \u2013 provided they are there. After all, that\u2019s how we keep our sites unique, and interesting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

In design there\u2019s never a one size fits all approach, there are infinite ways to create something visually impactful without confining yourself…<\/p>\n","protected":false},"author":17,"featured_media":7594,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[38,26],"tags":[],"class_list":["post-7578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-school-website-design-2","category-web-design"],"acf":{"banner_type":"simple","banner_intro_text":"","banner_alternative_title":"","banner_intro":"","video_type":"file","banner_full_height":false,"blog_banner_image":false,"image_array":false,"image_url":false,"image_id":false,"repeater":false,"blog_author_quote":""},"yoast_head":"\nCreating the perfect header - The Web Kitchen<\/title>\n<meta name=\"description\" content=\"Discover the best practices when it comes to designing a perfect header, that is both visually striking and performance focussed\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating the perfect header - The Web Kitchen\" \/>\n<meta property=\"og:description\" content=\"Discover the best practices when it comes to designing a perfect header, that is both visually striking and performance focussed\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/\" \/>\n<meta property=\"og:site_name\" content=\"The Web Kitchen\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-14T14:31:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1732\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joe Wales\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@twkmedia\" \/>\n<meta name=\"twitter:site\" content=\"@twkmedia\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joe Wales\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/\"},\"author\":{\"name\":\"Joe Wales\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/person\/039aba5a9cd5f3831ea83bebff3cac72\"},\"headline\":\"Creating the perfect header\",\"datePublished\":\"2022-01-14T14:31:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/\"},\"wordCount\":735,\"publisher\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg\",\"articleSection\":[\"School website design\",\"Web design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/\",\"url\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/\",\"name\":\"Creating the perfect header - The Web Kitchen\",\"isPartOf\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg\",\"datePublished\":\"2022-01-14T14:31:56+00:00\",\"description\":\"Discover the best practices when it comes to designing a perfect header, that is both visually striking and performance focussed\",\"breadcrumb\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#primaryimage\",\"url\":\"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg\",\"contentUrl\":\"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg\",\"width\":1732,\"height\":1200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.thewebkitchen.co.uk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating the perfect header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#website\",\"url\":\"https:\/\/www.thewebkitchen.co.uk\/\",\"name\":\"The Web Kitchen\",\"description\":\"Web Design London\u00a0Agency | TWK, a full service Website Design and Development company\u00a0based in Marylebone London. Professional Web Design, WordPress, TYPO3 and SEO.\",\"publisher\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#organization\"},\"alternateName\":\"TWK\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.thewebkitchen.co.uk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#organization\",\"name\":\"The Web Kitchen\",\"alternateName\":\"TWK Media\",\"url\":\"https:\/\/www.thewebkitchen.co.uk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2020\/11\/twk-logo-2020-dark-resize-@2x.png\",\"contentUrl\":\"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2020\/11\/twk-logo-2020-dark-resize-@2x.png\",\"width\":360,\"height\":36,\"caption\":\"The Web Kitchen\"},\"image\":{\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/twkmedia\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/person\/039aba5a9cd5f3831ea83bebff3cac72\",\"name\":\"Joe Wales\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4fec917ae45011a59271309076886562?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4fec917ae45011a59271309076886562?s=96&d=mm&r=g\",\"caption\":\"Joe Wales\"},\"url\":\"https:\/\/www.thewebkitchen.co.uk\/author\/joe-wales\/\"}]}<\/script>\n","yoast_head_json":{"title":"Creating the perfect header - The Web Kitchen","description":"Discover the best practices when it comes to designing a perfect header, that is both visually striking and performance focussed","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/","og_locale":"en_US","og_type":"article","og_title":"Creating the perfect header - The Web Kitchen","og_description":"Discover the best practices when it comes to designing a perfect header, that is both visually striking and performance focussed","og_url":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/","og_site_name":"The Web Kitchen","article_published_time":"2022-01-14T14:31:56+00:00","og_image":[{"width":1732,"height":1200,"url":"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg","type":"image\/jpeg"}],"author":"Joe Wales","twitter_card":"summary_large_image","twitter_creator":"@twkmedia","twitter_site":"@twkmedia","twitter_misc":{"Written by":"Joe Wales","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#article","isPartOf":{"@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/"},"author":{"name":"Joe Wales","@id":"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/person\/039aba5a9cd5f3831ea83bebff3cac72"},"headline":"Creating the perfect header","datePublished":"2022-01-14T14:31:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/"},"wordCount":735,"publisher":{"@id":"https:\/\/www.thewebkitchen.co.uk\/#organization"},"image":{"@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg","articleSection":["School website design","Web design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/","url":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/","name":"Creating the perfect header - The Web Kitchen","isPartOf":{"@id":"https:\/\/www.thewebkitchen.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#primaryimage"},"image":{"@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg","datePublished":"2022-01-14T14:31:56+00:00","description":"Discover the best practices when it comes to designing a perfect header, that is both visually striking and performance focussed","breadcrumb":{"@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#primaryimage","url":"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg","contentUrl":"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2021\/11\/perfect_header_featured@2x-4.jpg","width":1732,"height":1200},{"@type":"BreadcrumbList","@id":"https:\/\/www.thewebkitchen.co.uk\/creating-the-perfect-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thewebkitchen.co.uk\/"},{"@type":"ListItem","position":2,"name":"Creating the perfect header"}]},{"@type":"WebSite","@id":"https:\/\/www.thewebkitchen.co.uk\/#website","url":"https:\/\/www.thewebkitchen.co.uk\/","name":"The Web Kitchen","description":"Web Design London\u00a0Agency | TWK, a full service Website Design and Development company\u00a0based in Marylebone London. Professional Web Design, WordPress, TYPO3 and SEO.","publisher":{"@id":"https:\/\/www.thewebkitchen.co.uk\/#organization"},"alternateName":"TWK","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thewebkitchen.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thewebkitchen.co.uk\/#organization","name":"The Web Kitchen","alternateName":"TWK Media","url":"https:\/\/www.thewebkitchen.co.uk\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/logo\/image\/","url":"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2020\/11\/twk-logo-2020-dark-resize-@2x.png","contentUrl":"https:\/\/www.thewebkitchen.co.uk\/wp-content\/uploads\/2020\/11\/twk-logo-2020-dark-resize-@2x.png","width":360,"height":36,"caption":"The Web Kitchen"},"image":{"@id":"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/twkmedia"]},{"@type":"Person","@id":"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/person\/039aba5a9cd5f3831ea83bebff3cac72","name":"Joe Wales","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thewebkitchen.co.uk\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4fec917ae45011a59271309076886562?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4fec917ae45011a59271309076886562?s=96&d=mm&r=g","caption":"Joe Wales"},"url":"https:\/\/www.thewebkitchen.co.uk\/author\/joe-wales\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/posts\/7578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/comments?post=7578"}],"version-history":[{"count":0,"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/posts\/7578\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/media\/7594"}],"wp:attachment":[{"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/media?parent=7578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/categories?post=7578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thewebkitchen.co.uk\/wp-json\/wp\/v2\/tags?post=7578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}