--- title: "DESIGNING ABOVE THE FOLD: A WEB DESIGN GUIDE" description: Is your website engaging? Is it designed to capture your users' attention in 3 seconds or less? Read more to see why you should care about the fold. image: https://www.eternalworks.com/hubfs/Copy%20of%20Untitled%20Design%20(44).png --- # DESIGNING ABOVE THE FOLD: A WEB DESIGN GUIDE [Web Design](https://www.eternalworks.com/blog/topic/web-design) | MIN READ ![Picture of Ashlie Jones](https://app.hubspot.com/settings/avatar/fd1f025d24790911e80d5231578aafa3) Written by [Ashlie Jones](https://www.eternalworks.com/blog/author/ashlie-jones) **Listen to this blog post:** DESIGNING ABOVE THE FOLD: A WEB DESIGN GUIDE 5:30 You may have heard the term Above the Fold and thought to yourself, what the heck are they talking about? If you have wondered why you should care what's above, below or on the fold, I've got you. So, what exactly is Above the Fold? For those of you that have never worked for a media company or newspaper or haven't had much insight into this world, above the fold is a term that is used to describe the information on a newspaper that's above the crease (the fold). This information, that is seen without having to unfold the newspaper is deemed to be the most important. Breaking news stories are typically placed here. Therefore the content that is front page AND above the fold is taking up the most valuable real estate of the entire newspaper. This idea of prime real estate has carried into web design. When you think of building a successful website you should be cognoscente of designing above the fold. The same principle of having the most important information above the fold is true. So, how do you determine what goes above the fold? Don't worry, the process of determining your most important information is easier than you think. What you need to do is prioritize. Ask yourself the following questions.   ## 1. WHO ARE MY TARGET PERSONAS?   HINT: The correct answer here is NEVER everybody. If you're focused on reaching everybody, you are focused on no one. It's impossible to develop any marketing tool without knowing who it is you are trying to reach/market to. Targeting should be the first step in the web development process or any sales or marketing process for that matter. If you know who you are marketing to, you can move to question 2. If not, let's get that sorted. Focus on developing your 3 top personas (fictional representation). The best way to determine your target personas is by doing research. Who are your current customers? Describe them in detail. The easiest indicator of who will buy from you is to look at who has bought from you. For help developing your personas [check out this article](https://www.eternalworks.com/blog/dont-market-to-the-masses-a-guide-to-persona-development).   ## 2. IF I ONLY HAVE 3 SECONDS, WHAT DO MY VISITORS NEED TO KNOW?   Think fast, because your site visitors do. In the first 3 seconds visitors are trying to determine who you are, what you do, and if you can help them. If they can't find those answers quickly, your site doesn't answer those questions, or you aren't what they are looking for they are leaving. So, can you address the top three questions in 3 seconds? Absolutely! Who are you? You address that with your company name, logo, relevant hero image above the fold. I'm sure you have your name and logo covered, but what do I mean by relevant image? The image should relate to the page they are on. If it's the home page it should be general for your company, if it's the about page, it should showcase your company or team, if it's the services page it should be an image relevant to the services you provide, and if it's the contact page, the image should be of your building and that page should also have a map. These things have become routine and they are what is expected. What you do? You address this with your verbiage and imagery. A picture is worth a thousand words. Where possible you should use imagery including pictures and icons to tell the story. An image of a hardhat says construction just as much as the word does. Can you help them? What better way to show someone you work with them then for them to read it or see themselves on your site. If you say something like "we help schools" and have an image of a school and I am a private school owner, I can self-identify as someone you may be able to help. This can be done with images, icons, and/or testimonials. The quickest and easiest way to do this is to include we help ____with ____. This statement should be... you guessed it -- Above the Fold.   ## 3. WHAT IF THEY DON'T SCROLL?   The last thing to consider when designing above the fold is what if they don't scroll. You should actually design your site as if they won't. Most first time site visitors don't. You need to be able to tell your company's story in the area above the fold. It can be done. Here are some great examples of it done well. ![ChickfilA-ezgif.com-optiwebp](https://www.eternalworks.com/hs-fs/hubfs/ChickfilA-ezgif.com-optiwebp.webp?width=650&height=316&name=ChickfilA-ezgif.com-optiwebp.webp) ![BodyLogic-ezgif.com-optiwebp](https://www.eternalworks.com/hs-fs/hubfs/BodyLogic-ezgif.com-optiwebp.webp?width=650&height=291&name=BodyLogic-ezgif.com-optiwebp.webp) ![ForThePeopleProjects-ezgif.com-optiwebp](https://www.eternalworks.com/hs-fs/hubfs/ForThePeopleProjects-ezgif.com-optiwebp.webp?width=650&height=315&name=ForThePeopleProjects-ezgif.com-optiwebp.webp) Do you see the common theme here? In every site, you can see who the company is, what they do, and who they help above the fold. Once you've made it past that test and survived the first 3 seconds, congratulations are in order. You've captivated your visitor. There is one more important thing to consider when designing above the fold. Should your site visitor want to move forward, you have to address the call-to-action/how they should contact you, where they can find you, or how they can get help with next steps. Look again at the example sites. These sites get extra credit because their contact/location information is also... ABOVE THE FOLD. Designing above the fold is all about capturing and captivating your audience while you have them. Now that you have that covered, click [Discover more about](http://info.eternalworks.com/blog/the-anatomy-of-successful-websites) to get information on how the rest of your website should be structured and the Anatomy of Successful Websites.   Looking to redesign your site? We can help. Click the button below to book a discovery and get the ball rolling or [start here](https://www.eternalworks.com/blog/web-design-made-simple-a-step-by-step-guide) by reading our blog Web Design Made Simple: everything you need to know about web design. [![Book a discovery](https://no-cache.hubspot.com/cta/default/623492/3f749011-74e7-489b-bf42-a2ec60d8669e.png)](https://cta-redirect.hubspot.com/cta/redirect/623492/3f749011-74e7-489b-bf42-a2ec60d8669e)   [Web Design](https://www.eternalworks.com/blog/topic/web-design) ## Read On 09 May 2022 ![Picture of Tim Jones, CEO + Founder](https://www.eternalworks.com/hs-fs/hubfs/Tim-Picture-Avatar.jpg?width=40&height=40&name=Tim-Picture-Avatar.jpg) By [Tim Jones, CEO + Founder](https://www.eternalworks.com/blog/author/tim-jones) 0 Comments ### [Growth-Driven Design vs Traditional Web Design](https://www.eternalworks.com/blog/growth-driven-design-vs-traditional-web-design) Before designing your business website, you should consider Growth-Driven Design (GDD) vs Traditiona... [Read more](https://www.eternalworks.com/blog/growth-driven-design-vs-traditional-web-design) 19 Aug 2021 ![Picture of Ashlie Jones](https://app.hubspot.com/settings/avatar/fd1f025d24790911e80d5231578aafa3) By [Ashlie Jones](https://www.eternalworks.com/blog/author/ashlie-jones) 0 Comments ### [Why Growth-Driven Design (GDD) is the Future of Web Design](https://www.eternalworks.com/blog/why-growth-driven-design-gdd-is-the-future-of-web-design) Growth-driven design or GDD is a method of web design for websites that are built for rapid change. ... [Read more](https://www.eternalworks.com/blog/why-growth-driven-design-gdd-is-the-future-of-web-design) #### Our Latest Blog ![Why Marketing Funnels Don't Work Anymore: Enter Loop Marketing](https://www.eternalworks.com/hs-fs/hubfs/Blog%20Images/Why%20Marketing%20Funnels%20Dont%20Work%20Anymore%20-%20Enter%20Loop%20Marketing/EW-Blog%20Header-Why%20Marketing%20Funnels%20Dont%20Work%20Anymore%20Enter%20Loop%20Marketing.jpg?width=345&height=237&name=EW-Blog%20Header-Why%20Marketing%20Funnels%20Dont%20Work%20Anymore%20Enter%20Loop%20Marketing.jpg) Tim Jones, CEO + Founder #### [Why Marketing Funnels Don't Work Anymore: Enter Loop Marketing](https://www.eternalworks.com/blog/why-marketing-funnels-dont-work-anymore-enter-loop-marketing) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "about" : "website layout tips", "articleBody" : "You may have heard the term Above the Fold and thought to yourself, what the heck are they talking about?...", "articleSection" : [ "Introduction to Above the Fold", "Understanding the Term 'Above the Fold'", "Importance of Above the Fold in Web Design", "Determining Key Information Above the Fold", "Target Personas and Their Importance", "Capturing Visitor Attention Quickly", "The Role of Imagery and Verbiage", "Addressing Visitor Needs Above the Fold", "Conclusion and Next Steps" ], "audio" : { "@type" : "AudioObject", "contentUrl" : "https://39666904.fs1.hubspotusercontent-na1.net/hubfs/39666904/raw_assets/media-default-modules/master/295/js_client_assets/assets/TrackPlayAnalytics-b0403829.mp3", "encodingFormat" : "audio/mpeg" }, "author" : { "@type" : "Person", "name" : "Ashlie Jones", "url" : "https://www.eternalworks.com/blog/author/ashlie-jones" }, "dateModified" : "2023-05-09T08:00:00-04:00", "datePublished" : "2023-05-09T08:00:00-04:00", "description" : "This blog post covers the concept of designing above the fold, which refers to the content visible on a webpage without scrolling. It explains the importance of prioritizing key information above the fold to capture and engage visitors effectively.", "headline" : "Designing Above the Fold: A Web Design Guide", "image" : "https://www.eternalworks.com/hubfs/Copy%20of%20Untitled%20Design%20%2844%29.png", "inLanguage" : "en-US", "keywords" : "Above the fold design, Web design best practices, Effective web design, Website user experience, Website layout tips, Designing for conversion, Web design guide, Key web design elements, Homepage design tips, Optimizing above the fold content", "mainEntityOfPage" : { "@id" : "https://www.eternalworks.com/blog/designing-above-the-fold", "@type" : "WebPage" }, "mentions" : [ { "@type" : "WebPage", "name" : "Don't Market to the Masses: A Guide to Persona Development", "url" : "https://www.eternalworks.com/blog/dont-market-to-the-masses-a-guide-to-persona-development" }, { "@type" : "WebPage", "name" : "Web Design Made Simple: A Step-by-Step Guide", "url" : "https://www.eternalworks.com/blog/web-design-made-simple-a-step-by-step-guide" } ], "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.eternalworks.com/hubfs/website-assets/white-Logo.png" }, "name" : "Eternal Works" }, "url" : "https://www.eternalworks.com/blog/designing-above-the-fold", "wordCount" : "1435" } ```