{"id":34841,"date":"2019-06-27T13:19:59","date_gmt":"2019-06-27T17:19:59","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=34841"},"modified":"2023-07-11T19:43:00","modified_gmt":"2023-07-11T23:43:00","slug":"design-killer-website-header","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/","title":{"rendered":"How to Design a Killer Website Header"},"content":{"rendered":"<blockquote><p>If you&#8217;re not familiar with the website design strategy of &#8220;above the fold&#8221; than it&#8217;s important to understand why your website header design means everything.<\/p><\/blockquote>\n<p>When <a href=\"https:\/\/www.forbes.com\/sites\/annieridout\/2019\/06\/18\/how-to-write-good-copy-for-your-website-without-hiring-a-copywriter\/#7f11f454139e\" target=\"_blank\" rel=\"noopener\">designing a website<\/a>, what you put above the fold is key. You want to make sure that your website header, and what&#8217;s directly below it really grabs and holds your reader&#8217;s attention. Keep reading to learn more about how to design an effective and attention-grabbing\u00a0website header.<\/p>\n<h3>How To Design A Website Header<\/h3>\n<p><a href=\"https:\/\/www.crazyegg.com\/blog\/designing-website-header-image\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-34842 lazyload\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/volunteer.jpg\" alt=\"volunteer\" width=\"550\" height=\"293\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 550px; --smush-placeholder-aspect-ratio: 550\/293;\" \/><\/a><br \/>\n<em>3 Elements to Consider When Designing A Website Header Image<\/em><\/p>\n<p>Your website&#8217;s header is one of the most valuable parts of your website. The header is what runs across the top of your web page, and continues to appear on almost every page of your website.<\/p>\n<p>You want to make sure your header makes your site instantly recognizable while promoting your brand. For most businesses, a header is a great place to effectively and efficiently communicate exactly what your business does.<\/p>\n<p>The design of your header can vary based on what your website is promoting. There are also design websites and programs that can help you out. As well as apps like this best free online twitch banners maker app.<\/p>\n<h3>Branding A Person<\/h3>\n<p><a href=\"https:\/\/www.forbes.com\/sites\/theyec\/2018\/10\/19\/how-to-build-a-personal-brand-in-three-steps\/#303f60b46d13\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-34843 lazyload\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg\" alt=\"how-to-build-a-personal-brand-in-three-steps\" width=\"960\" height=\"640\" data-srcset=\"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg 960w, https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps-768x512.jpg 768w\" data-sizes=\"(max-width: 960px) 100vw, 960px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 960px; --smush-placeholder-aspect-ratio: 960\/640;\" \/><\/a><br \/>\n<em>How To Build A Personal Brand In Three Steps<\/em><\/p>\n<p>If your website is promoting a person such as a celebrity or even a spokesperson for a brand, you&#8217;ll want the header to connect the visitor to that person immediately. To do this, you&#8217;ll want to make sure that the picture of the person you&#8217;re branding is happy and smiling.<\/p>\n<p>Even if the visitor has never met this person, seeing this face over and over will make your visitor feel like they already know this person. If your website is branding a person, you&#8217;ll want to include your logo, that photo, name, and title in your header.<\/p>\n<h3>Branding A Business<\/h3>\n<p>When you&#8217;re branding a business, your website&#8217;s header is less likely to make or break your company&#8217;s success. Actually, in many cases, the best strategy is to make your header smaller and bring your content higher up on the page.<\/p>\n<p>Sometimes you might not even want to use a header at all, as your logo won&#8217;t convince someone to hire you. When you design a website header for a business, keep it simple only including your tagline and logo. You want your heard area to be small.<\/p>\n<p>If you&#8217;re going to add any images to your header&#8217;s design, don&#8217;t overdo it. Keep your logo simple with one main hero image that is relevant to what your website and business is all about.<\/p>\n<h3>Branding A Thing<\/h3>\n<p>If you&#8217;re branding a thing like a product, event, program or service, then you may want to create a logo. Your logo should be the core offering. When you&#8217;re designing a website header for a product, think about including the logo of the item you&#8217;re promoting, a tagline, short description, and photo if needed.<\/p>\n<p>If you&#8217;re designing a header for an event or program, make sure the images used are able to communicate the vibe of the program or event.<\/p>\n<h3>Design Your Header<\/h3>\n<p><a href=\"https:\/\/designshack.net\/articles\/graphics\/website-header-tips\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-large wp-image-34844 lazyload\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/website-header-tips-1024x559.jpg\" alt=\"website-header-tips\" width=\"1024\" height=\"559\" data-srcset=\"https:\/\/www.andysowards.com\/blog\/assets\/website-header-tips-1024x559.jpg 1024w, https:\/\/www.andysowards.com\/blog\/assets\/website-header-tips-768x420.jpg 768w, https:\/\/www.andysowards.com\/blog\/assets\/website-header-tips.jpg 1100w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/559;\" \/><\/a><br \/>\n<em>7 Tips for Creating a Website Header That Wows<\/em><\/p>\n<p>Now that you know how to design a website header, it&#8217;s time to work on yours. Make sure your header fits whatever person, business or thing your website is promoting.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re not familiar with the website design strategy of &#8220;above the fold&#8221; than it&#8217;s important to understand why your website header design means everything. When designing a website, what<\/p>\n","protected":false},"author":1,"featured_media":34843,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[24,35],"tags":[5905,803,9360,626,5907,5891,5885,3264,1099,10446,5887,10447,7236,227,115,6236,848,3024,220,4419,677],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Design a Killer Website Header<\/title>\n<meta name=\"description\" content=\"If you&#039;re not familiar with the website design strategy of &quot;above the fold&quot; than it&#039;s important to understand why your website header design means\" \/>\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.andysowards.com\/blog\/2019\/design-killer-website-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design a Killer Website Header\" \/>\n<meta property=\"og:description\" content=\"If you&#039;re not familiar with the website design strategy of &quot;above the fold&quot; than it&#039;s important to understand why your website header design means\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-27T17:19:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-11T23:43:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andy Sowards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Sowards\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/\",\"name\":\"How to Design a Killer Website Header\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg\",\"datePublished\":\"2019-06-27T17:19:59+00:00\",\"dateModified\":\"2023-07-11T23:43:00+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\"},\"description\":\"If you're not familiar with the website design strategy of \\\"above the fold\\\" than it's important to understand why your website header design means\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg\",\"width\":960,\"height\":640},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Design a Killer Website Header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\",\"description\":\"Design Inspiration &amp; Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\",\"name\":\"Andy Sowards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"caption\":\"Andy Sowards\"},\"description\":\"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards\",\"sameAs\":[\"https:\/\/www.andysowards.com\"],\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Design a Killer Website Header","description":"If you're not familiar with the website design strategy of \"above the fold\" than it's important to understand why your website header design means","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.andysowards.com\/blog\/2019\/design-killer-website-header\/","og_locale":"en_US","og_type":"article","og_title":"How to Design a Killer Website Header","og_description":"If you're not familiar with the website design strategy of \"above the fold\" than it's important to understand why your website header design means","og_url":"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2019-06-27T17:19:59+00:00","article_modified_time":"2023-07-11T23:43:00+00:00","og_image":[{"width":960,"height":640,"url":"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg","type":"image\/jpeg"}],"author":"Andy Sowards","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Andy Sowards","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/","url":"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/","name":"How to Design a Killer Website Header","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg","datePublished":"2019-06-27T17:19:59+00:00","dateModified":"2023-07-11T23:43:00+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415"},"description":"If you're not familiar with the website design strategy of \"above the fold\" than it's important to understand why your website header design means","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/how-to-build-a-personal-brand-in-three-steps.jpg","width":960,"height":640},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2019\/design-killer-website-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Design a Killer Website Header"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","description":"Design Inspiration &amp; Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415","name":"Andy Sowards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","caption":"Andy Sowards"},"description":"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards","sameAs":["https:\/\/www.andysowards.com"],"url":"https:\/\/www.andysowards.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/34841"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=34841"}],"version-history":[{"count":2,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/34841\/revisions"}],"predecessor-version":[{"id":46669,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/34841\/revisions\/46669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/34843"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=34841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=34841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=34841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}