Let me guess – you’re not a skilled website designer, and you’re building a website and you want to make it awesome. You’ve come to the right place, my friend! Today’s Free PSD Website Template is called ‘Organic’ – a clean and crisp home page website PSD template. This PSD website home page design would suit a clean. Today's Free PSD Website Template is called 'Organic' – a clean and crisp home page website PSD template. This PSD website home page design would suit a clean cut corporate site or even some kind of quirky photo blog! Great image with a great pastel colour scheme and this little gem will make your. We are a Norco based website design company that specializes in affordable and easy to use websites. Building a website that looks great doesn’t have to be. It can be systematic and logical (not as much “fluff” as you’d imagine) – anyone can do it! In this guide, we’ll show you the anatomy to awesome, well-designed home pages. ![]() ![]() I’ll lay them out in simple diagrams and show you live examples so that even non-designers can understand – and copy! Why Should I Focus On My Home Page? Your home page is arguably the most important page on your website. — Because it’s most likely to be the first page that your website visitors will see when they land on your website. I think we can all agree that the first impression matters a lot – right? Your home page sets the tone for your business like a first impression – so makes a lot of sense to ensure your home page works effectively. Imagine this: You go into a shop or an office, and you are immediately greeted by a customer service representative. The customer service rep acted as a guide by helping you navigate the store/office and direct you to the person or product that can solve your problem. The customer service rep did the leg work for you by showing you where you should be looking to find what you need. The process and experience were enjoyable for you — you didn’t need to waste time and struggle to find what you’re looking for. When a customer visits your website, he/she is “walking” into your store or office. Wouldn’t you want to give them the same level of experience as they would receive if they walked into your physical store or office? Don’t you just hate it if you had to struggle to look for where a product or information is located? BUT — there is ONE problem — there is no live person to greet your visitors when they land on your website! So the question is: “How can I direct my visitors to the information they need without physically guiding them?” The answer, my friend, is an effective home page layout design. Your home page layout acts as your customer service rep who diligently guides your visitors around your website. How does it do that? What is an Effective Home Page Layout Design? Page layout planning helps you figure out what content to place on your page, where to place it and which content should go first. Building an awesome home page is not just randomly placing any information you can think of onto the page. It’s also not based on abstract concepts, or how you feel that particular morning. It’s actually very methodical and logical – so everybody can replicate a good layout. There needs to be a flow so you can guide your visitors to discover your website the way you want them to. This enables you to craft a very targeted website experience that works best for the specific customers you want to attract. When done correctly (I’ll show you how below), you can help visitors who land on your website: • Easily identify what your website is about, what you do and how you can provide your visitors with solutions to their problems; and • Engage with your business by figuring out where to take the next step. If your visitors don’t know what the next step is, they’ll probably leave without taking any actions. Next steps could be to visit a product / service offering page, download a guide, watch an informational video, sign up to a newsletter series, submit contact details, etc. Effective home page layout is all about making your website easy to use and navigate. It allows you to steer your visitors’ focus to things you want them to pay extra attention to. Let’s get started on what to include in an effective home page, and we’ll dive into some specific examples and layouts! What Content Should I Include on My Home Page Design? Let’s be honest — How many times have you landed on a website, and ended up clicking the “back” button because you couldn’t find what you’re looking for in a few seconds? The fact is that most of us are conditioned to expect to find what we’re looking for in a few seconds. People are becoming more and more demanding (and impatient) nowadays. Your visitors will make a very simple, split second choice when they arrive on your home page – stay or leave. How you choose to lay out your home page will affect that decision — and will impact the fate of your business. Simplistically, the layout of your home page is divided into two parts. Also, pay attention to Shopify’s headline and sub-headline. Very effective! – Source: Shopify.com Think of a call-to-action as a direction indicator. We all know how to take direction because we do this every day in the real world. This sign lets you know you are heading eastbound, and you can get to Redlands by turning right on Exit 40A. We find these signs and arrows very helpful in our daily life, so why not use it on your website to guide your audience on what to do or where to go? This is especially true if they want to make a commitment because they resonate with what you have to offer (your headline and sub-headline). Don’t expect your visitors to know what to do next — they don’t. You want your visitors to visually see that there is a next step that they can take, so never be shy about telling them what to do in a helpful way. Imagine this: You find a random restaurant and see a menu by the door. You step inside and you see the host standing there, but he doesn’t say anything. He doesn’t proactively ask you how many people you have in your party, nor does he attempt to lead you to the seating area. You end up just standing there, wondering – “what’s next?” Does that make you feel good and confident about the business? Does it make the business feel personable and likable? The key is to actively engage with your visitors — tell them what to do, and guide them to taking action so you can start building a relationship with them. This can significantly increase your chances of winning new customers. Use Images or a Video to Illustrate Your Message: People are naturally drawn to visuals like images and videos, so it is a great way to create a mood or show your audience what you are all about. It is important to remember to use images and videos that are relevant to your website. If they don’t serve any purpose or don’t do a good job in enhancing your overall branding or messages, don’t use them. It is better to keep your website clean rather than including things that are not useful. – see our guide on how to pick the right pictures, and where to find professional images without paying through your nose (a lot of professional quality images are actually free!) – have you considered using a video background to “wow” your visitors, make your website look more professional and improve your branding? See this guide on how to use a video background the right way, and the do’s and don’ts. Logo: Your logo needs to do a good job of subtly communicating what your company is about. It hints at the DNA of your business — whether you are professional, creative, aggressive, or laid back. – If you’re not sure how to create a good looking logo, here is our guide and some tools that can help you (even if you’re not a designer). Navigation Bar: This is the roadmap you use to show your visitors what’s important and where they can go to get the specific information they need. Rule-of-thumb: • Only include necessary pages and don’t confuse users with too many unnecessary options. Your visitors will not be interested (initially) in pages about copyright, privacy, and terms of services. So insert them elsewhere — like in your footer. • Create logical groups of related links, with the most important links organized from left to right. • Keep page titles short and descriptive. • Place your navigation bar in a prominent location so it is easy to find. Put yourself in the shoes of your visitors and ask yourself this. “ What is the least number of steps I need to take before I can make an informed decision to buy your service or product?“ 2. TYPE OF Content TO INSERT Below-the-Fold As mentioned above, not everyone will scroll down your home page to view more of the page. Your visitors who will actually scroll down your home page to see more are those who are interested in what you have to offer after reading your headline and sub-headline (your Above-The-Fold content). Otherwise, they would have left your site already. So, the type of content you want to insert Below-The-Fold is to support your Above-The-Fold content (what you offer and how you can solve your customers’ problems). Here are the 2 types of content you should display Below-The-Fold. Let’s dig into more specific details about these Below-The-Fold content. Afterward, we’ll show you 5 effective home page layouts that you can imitate. #1) Secondary Content Breakdown: Secondary content reinforces your Primary Content (Above-The-Fold). The goal is to convince and educate your visitors on what exactly they’ll get out of using your service or buying your products. Benefits List: Here’s a common mistake – most websites are focused on listing out a lot of features and don’t focus enough on describing the benefits to potential customers/readers. There is an insightful saying in marketing – “Features tell, benefits sell.” The main question your visitors will ask is, “so what’s in it for me?” — “Why should I eat at your restaurant?” — “Why should I hire you as my photographer?” If you landed on a website and all you see is a big list of features, like “ we have 20 sandwiches, 15 salads & 5 kinds of soups.“, or “ we provide you with 100 pictures on a DVD & a physical album.“ You’ll end up just being another restaurant or photography business website. Nothing makes your website visitor want to find out more about you. Focus on how your visitors will benefit from you – For instance, “organic, farm to table ingredients so you feel healthier and live longer”, or “kids grow up way too fast – we’ll help you capture those precious moments and memories with your first child.” Notice that benefits tap into the emotional side of people – because it works. Here is a good example of describing benefits from Basecamp’s home page (Basecamp is a project management software that helps teams manage a lot of back & forth communications). Source: Basecamp.com They first list out all the headaches and pain points that their potential customer might have (to relate on an emotional level). Then they make the promise (benefits) that with their software can make all those problems go away. Outlining benefits don’t always have to be solving a specific problem. It can also be inspirational like how great it will be to take a road trip with your family in a brand new car! The key here is to show your audience how their life will change for the better with what you are providing them. Pro Tip: Listing out features are only helpful after you convince your visitors that you can benefit them tremendously. Don’t unload a boring list of features on your visitors. Focus on communicating how your visitors can truly benefit from you. Trust Indicators: Trust indicators can be customer success stories, customer testimonials or quotes, professional accreditation (industry association affiliations, Better Business Bureau score), media quotes, the number of social network shares, and display personalized blurbs about your team members to create trust. People buy from people or businesses they like and trust. So by showing other people like you and your brand, you can boost your credibility and trustworthiness. The key is here is to positively associate your business with external parties and show that your business is operated by people, not robots. Trust indicators are very powerful to help bring your visitors one step closer to becoming customers — especially when they are close to crossing that line, but they just need a gentle nudge. Remember – people like to follow other people. So when they see others (just like them) do business with you, they are more likely to follow. Why do you think we constantly look up reviews on different services or products? Features List: Features list helps your potential customers know what EXACTLY they are getting when they make a purchase. List out your most compelling features that your visitors will want to have. One of the biggest mistakes I see people make is that they list out a long laundry list of features that don’t relate to me as a customer. Even when the features may sound interesting, I could care less if the features don’t solve my problem or answer my needs. For example: When I go on to Volkswagen’s website to research for a new car, I don’t get a mind-numbing list of features like electro-mechanical power steering with variable assistance. While this is an important feature, it is not something most car buyers cares about. Instead, you get sold on features like infinity moonroof and 10-speakers surround sound audio system. These are the features that people care about and are what will eventually sell the car. Pro Tip: If you have a lot of features to list, instead of listing them all, pick the top 10 to insert into your home page. For the other features, create a separate, dedicated features page where your visitors can view the entire list of features there. #2) Additional Content Breakdown: These are the “nice-to-have” information but are not critical in making your website effective for making a strong first impression. For example, blog articles, company announcements, event schedules, industry updates, location map (if you are not in the restaurant business). Such content does have a place on your website, and if placed in the appropriate location, can help complete the overall picture what your business is about. But if they are used incorrectly, they can create clutter and confusion. Now that you know what you should include in your homepage, let’s see how you can position your content to create an awesome experience for your visitors! Anatomy of 5 Effective Home Page Layouts & Example Templates You Can Use Today I’m going to share 5 very effective home page layouts with you below. The diagrams break down each Above-The-Fold and Below-The-Fold component. You can follow these layouts to optimize your home page. If you are using a, you will be able to easily drag your content around to imitate the layouts as shown in the diagrams below. I’ve also listed out some example templates below, where the home pages are already effectively configured. You can click through to take a look at the actual templates and you can sign up and start using one right away. In a way, using one of these templates is a short cut, as it allows you to get a head start since the templates already embody some of the best practices I’ve discussed above! Layout #1 This layout is pretty universal so it can be applied to pretty much most industries. Conclusion & Take Away Effective home page design is not just about looking “pretty” — it’s about how easy it is for your visitors to understand what you do, what problems you solve, and how they can benefit from your services or products. NEVER leave it up to your visitors to guess or figure out what to do next. Instead, create a very clear Call-To-Action on your home page that directs your visitors to take the next step (such as to go to your product / service page, sign up to your newsletter, download a guide, contact you, etc). Constantly ask yourself if your visitors fully understand what you do and what benefits you bring to the table. Focus on outlining benefits of how you can help your visitors – avoid dumping a list of features that can’t quite connect to your visitors on an emotional level. Don’t use complicated vocabulary or vague descriptions — be concise, be straight forward. Keep in mind that you won’t get the “perfect” home page design on your first attempt. It’s okay to keep working on improving upon it. Collect feedback from people to see how you can improve. Lastly, take a look at the template examples I shared above — instead of designing your own home page, those template examples can give you a head start to crafting a great looking and effective layout! Hi Chris, Thank you for reading and for the kind feedback, always great to hear that our content has proven useful! If you’re looking for more web design focused articles, I’ll point you in the direction of our, which should give you a few more ideas. Otherwise, the best advice I can give is to research some websites similar to the one you want to create as well as some websites that you enjoy the look and feel of, then make a note of which features and elements are included on each, then work on a design incorporating your favourite elements from both type of site. Hope that helps! Hello Penn, You’re right. In a lot of cases, a lot of people will find your website through an “inner” page rather than the home page. However, if your visitor enjoyed reading your webpage, he/she just might go to your home page to find out more about your website and/or to find other interesting discussions on your website. So from that perspective, it’s also important to design a good home page layout so you can guide your visitors to other parts of your website! Further, if people find your website helpful, they’ll generally pass along the home page website address to others. Sure, if they email / share your webpages, they’ll share the exact webpage. But when I (personally) talk about certain websites with my friends, I generally pass on the home page webpage address. As for optimizing your webpages, you’re doing the right thing! Breaking down your text into smaller paragraphs is a very effective way to make your webpages more readable. Also, using titles and sub-titles breaks up the content neatly so it’s easier for your visitors to consume. I’d suggest no more than 5 lines per short paragraph, if possible. You can also use images to break up your text a bit more, so it’s easier for your visitors’ eyes. Also, consider bolding certain phrases to highlight key ideas. A lot of your visitors will be scanners instead of readers. So having good title / sub-title structure, shorter paragraphs and bolded content to highlight important ideas will be very helpful! You’re on the right track! Thanks Wendy! It was extremely challenging for us when we first started out. Information overload – for sure. Should we place content here? What are other websites doing? This is just a guide that we “wished” we found when we started out 6 years ago. These diagrams would have helped us outline layouts while removing all the noise (images, text, etc). It would have saved us a lot of time. So we thought it would be helpful to compile our experiences to share them with all our readers! Glad you liked it! Connie and Jeremy.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2018
Categories |