Your website’s homepage design and layout is essential to your site’s success, so this means including all of the key elements from the start. But do you actually know what you need to include in the web design of your homepage?
If you take a look at the homepage of our client websites, you’ll notice most of them look relatively similar in terms of the elements they include – which isn’t a coincidence.
There are key elements that go into crafting and creating the perfect website homepage to keep the Google Gods and your website users happy.
The reality is, from a homepage web design perspective, people do judge a book by its cover.
The reason that we are talking about home pages specifically is because it is typically the most trafficked page on a website.
One of the critical things to realise is that it takes your brain a 20th of a second to form an impression of a website, whether that’s right or wrong.
Sam is our Head Designer and has been with us for more than nine glorious years and shared his insight and infinite homepage design wisdom with us.
Web Design Conventions That Actually Need To Be Followed
After using the internet for roughly the last 20 years, it is important that we follow simple and familiar design cues that have woven their way into web design so as not to confuse the user.
Make sure that commonly found web design conventions like clicking on the company’s logo takes the user back to the home page or having a contact navigation item up in the top right-hand corner.
Poor design is ultimately going to create mistrust with your users and with the events of the last 18 months, digital has become more and more important. First impressions are 94% design related, so your website really is your new shop front.
The six website sections that draw the most interest from viewers are:
- Your company’s logo – which is why we put such emphasis on branding. When we engage with you as a client, we first want to make sure that your brand is rock solid. That’s the foundation that we’re building everything on.
- Your main navigation menu – This allows the end user to be able to navigate through your website search depending on the style of your website.
- Your search box – Obviously in e-commerce it’s even more critical that you’ve got your search in a very prominent position on your homepage.
- Your website’s main image – Interestingly, people will spend up to five seconds just looking at your first image which is usually above the fold of your site.
- Your written content – Your website visitors will also spend about 5 seconds analysing and evaluating your copywriting, tone of voice and what you choose to talk about.
- Your footer – That’s right, people even judge the very bottom of your site when deciding how they feel about you!
How To Plan A Web Design Project
The first step of planning your web design project, whether it be a new homepage or a new internal page, should be a wireframe.
Designing a wireframe is like putting together all the pieces of the puzzle. It is a basic outline of each of those key pieces for your project that need to be included and it should be done from the infancy of a project.
The wireframe is similar to an architectural blueprint and defines all the fundamental elements that will make up your webpage, the hierarchy of these, and gives a clear overview of the page structure, the layout information architecture, user flow, functionality and intended behaviours.
Each web design project is going to have its own primary conversion, whether that be users filling out a quote or contact form, hitting the phone number, or buying a product.
There’s lots of different ways to do wireframing as it’s a two-dimensional, black and white, skeletal outline. You could literally go and get a pad and a pen and start sketching away. Here at Five by Five, we use a digital tool called Balsamiq to crank these out!
Below is an example of a homepage wireframe we put together for a flooring supplier based here on the Gold Coast. There are two things that we want an end user to do on this website, either call a phone number or to fill out a quote form.
We featured the primary and secondary headline, and a strong call to action above the fold. We displayed the different categories of the products they offer, a photo gallery and a feed of their blog posts. We also included an email opt in and footer elements such as their physical address and links to their social media which is important for SEO.
How Web Designing Is Actually Done
Now that you have a wireframe, you know exactly what content, blocks, and information that needs to be arranged and presented on screen. And it’s important to remember that your website is not just there to look pretty.
Things like SEO, content creation, and conversion from a sales and a psychological perspective are all important web design components of a homepage… or any webpage for that matter!
As a web designer, you must first understand the brand itself, its rules, the logo and colour scheme and work out what font families are going to work on the web, but also compliment the actual brand itself.
But most importantly, you need to understand your consumer at the end of the day and source images that are going to sell to the company’s ideal customer avatar. Even when it comes to typography, if your target market is over a certain age, you must make sure that your standard fundamental paragraph styling has enough contrast within the page for legibility of content.
Colour pallet creation is something that needs to link the company’s logo and branding to the site so the user subconsciously makes the subtle connection. The use of iconography plays an important role in providing critical information to the user without overwhelming them.
Creating clear visual paths within the design leads the user to the conversion which may be a phone number of form or button while correctly assigning the written content so that the site can actually be found and ranked by Google.
Remember, there is such a thing as too much white space, and also not enough because then the content can’t be easily consumed by the viewer.
We use the software programs Sketch for homepage web design, and Invision to share it to our clients for their feedback.
What's The Difference Between A Web Developer And Web Designer?
Once you have the completed static design of your webpage it is time to move it into development. Web designers and web developers are actually two very different roles.
Web designers plan how the homepage will look and web developers build it to make it fully functional and responsive, adding in all the components and visual features the designer has prepared.
While the web developers are coding the new homepage to bring it to life, you can utilise additional pieces that add to the actual design of the site and keep the user engaged.
Directional cues such as colour change or motion when hovering over a button, can help prompt micro user experience interactions. It comes down to them feeling like they’re actually a part of a product when they get recognition from your site.
Other homepage web design features to consider include:
- “Sticky Call to Action”
- Years of experience style “badge”
- Client logos
- Up to 6 key “USP’s”
- Certifications
- Associations
- Testimonials
- Privacy Policy / Terms & Conditions
Developers also factor in load time when building out a web page design. For example, if you want to include a film clip to really engage the user and tell the story of your company, there is no point if it is going to take too long to load it! Your web user has moved on to greener pastures.
A solution might be compiling several shots into a short 10 – 15 second film that plays on loop.
You can also have different layers that slide in at different speeds as you scroll down the page which adds a subtle degree of sophistication to your website.
As a web designer, these are the things you need to keep front of mind and collaborate closely with your developers to create a functional design that will convert.
Why You Should Hire A Web Designer And How To Choose The Best Web Design Company
There are so many factors that go into homepage web design and if all of this just seems like a difficult and completely insurmountable task and it is stopping you from getting your digital presence out to the world, then leave it to the experts.
Our diverse team here at Five By Five covers everything from your logo and branding, photo and video, copywriting and web design through to development and ongoing SEO to give you a complete digital solution that brings in quality leads and enquiries.
Your website should not just be a pretty face! The first impression you make on your audience can either keep them on your site to learn about your business or make them your website and turn to your competitors.
Good homepage web design helps keep your leads on your website and takes them on a journey.
Your website should be designed with your target audience in mind and you should ensure it provides a great user experience and has the SEO juice behind it to rank highly in Google!
If you’re struggling to balance the beauty and the brains of your web design, then contact us and we can help you create the functional and gorgeous website of your dreams!
To be guided through the process, you are welcome to also view the recording of the Five By Five Lunch and Learn Webinar based on this topic. Feel free to click on the link below.
Lunch & Learn
Learn how to share your business magic online. Monthly, our team of digital masterminds walk you through the latest digital marketing tips and tricks.
Unmissable strategies. All for free
