Top Website Layouts Examples That Never Grow Old
You’re creating a website layout for yourself or for someone else.
Perhaps you have even spent time looking through templates to find inspiration.
Wrong!
Website templates can be great but stock photos, brand assets and colors, fonts, fonts, and other elements can make them less appealing.
Before you can start browsing templates, it is important to understand the requirements of your site and what content you will have. Also, how to arrange everything for a user-friendly experience.
How can you do this? Great question! This is my step-by-step guide to creating a website layout using best practices.
Step One: Set Your Goals
Websites are more than just pages. It’s more than just a collection of pages. It allows them to find the information they need.
This means that before you look at designs and templates , it is important to understand your audience to start with.
What is the purpose of your website? Does it serve a purpose? Are you selling products? Are you looking for a job?
Before you can navigate somewhere, you need to know where you are going. This is also true for your website. Before you start to plan the layout of your website, determine the overall goal.
Here are some things to consider:
- Your website today does not have to be your website tomorrow. You can set your goals right now for the things you want.
- Each page and your website will each have a goal. The goal of each page is to help you understand the overall flow.
- Your website is all about the user. What are they trying to achieve?
Here are some things to avoid:
- You shouldn’t eat more than you can chew. You’ll either end up with a mess site or none at all if you try to do too much.
- It’s easy to get lost in the details. We are not yet talking about functionality.
What you should know:
- How can you create a minimally-viable website
Here are some examples to copy:
Sean Halpin
Sandy Springs Artsapalooza
Step 2: Map Your Main Content
Once you know the primary goal of your website, you can begin to plan what content you will need.
What information are your target audience looking for? How should this information be grouped together?
This will be the overall architecture and navigation of your website. Your site is about your audience’s journey.
It is important to make it as easy as possible for them to find the information they are looking for. No matter how beautiful your website design is, if nobody can find what they are looking for, it doesn’t matter!
Clarity is the key. Your users shouldn’t have a hard time finding information.
Before you move into design, define your site’s primary navigation.
What to consider:
- Consider how someone who arrives directly at a page without having navigated to your homepage would feel.
- Consider how someone who has accessibility needs or is in a hurry might feel.
- Remember, less is better. You don’t have to use multiple pages for the same thing.
What to Avoid?
- Important pages should be kept in a hierarchy. Prioritize important information
- Content is the death sentence. Your website does not have to be your final destination.
What You Need to Know:
- How to use keywords in your website
- Smashing Magazine resource for content planning
Copy
Au Lit Fine Linens
Lesley M.M. Blume
Step 3: Layout your page
It seems counterintuitive to think of a layout before you search for a template. This is organizing all your information.
You’ll be able to narrow down the number of templates you want faster if you know what type of page layout you need.
The goal is to provide the most useful information possible. Consider your browsing habits. It’s likely that you won’t read every word on the site.
What to consider:
- You can use size to differentiate between the most important info/details. The largest page should contain the most important information.
- Headers and subheads can be used to assist scanners in finding key sections + information
- Bold key phrases and information
- To break up text-heavy sections, use icons / bullets (see my example here?
What to Avoid?
- Clarity is not a sacrifice for creativity
- Do not hide key information below the fold (AKA don’t make people scroll endlessly and dig for it).
What You Need to Know:
For a page-by page breakdown, see our guides on…
- Homepage best practices
- Best Practices
- FAQ page best practices
- Contact Us page best practices
- Product page best practices
Copy
Trello
Grovemade
Fourth: Secure functionality
Once you have an overall layout in mind, it is time to start thinking about the functionality of each page.
Remember that less is often more when it comes to website design, especially if your goal is to get your site online.
A minimum viable website is more effective than a juggernaut that confuses people or costs you a fortune.
Consider the minimal functionality that each page requires.
For example, your services page probably doesn’t need social media icons / social sharing. If your site goals are to promote your Instagram account, you might want to link to it on your Contact Page.
It’s not about how sophisticated the functionality of a website is. It’s all about providing the information people need quickly and easily on a page.
What to consider:
- Consider the features that will actually improve your users’ experience.
- What functionality is essential right now and what functionality will be nice to have in the future?
- Functionality can’t be built in a template – it must be supported by your software (AKA your web builder).
What to Avoid?
- Functionality is not the only thing that matters. Your site shouldn’t be too complicated or overwhelming.
- You are eating more than you can chew. It’s great to be able to upload your YouTube video, but you must keep up with it.
What You Need to Know:
- Which web builder is best suited for your needs
- WordPress plugins
Copy
Dave Horak
Cumberland Community Church
Step 5: Choose Your Template
You’ve completed the planning and sketched your site. Now you know what the site should look like. Now it’s time for you to finally start searching for a template or creating one!
What to consider:
- Templates can be created almost anywhere using HTML and CSS. You can easily copy a Wix website template that you like but don’t want to use WordPress.
- Remember to keep in mind the layout requirements you have defined previously, and that templates can be modified.
- Take a look at more than the homepage. Take a look at the layout of subpages or unique pages.
What to Avoid?
- Functionality is not something that comes with templates.
- Do not judge a template solely on its logo and photography. A template may only look one way because of the mock-up creative assets.
What You Need to Know:
- How do you create your web design’s color palette
- How do you write website copy
Copy
Inherit clothing
Beautiful Destinations
Next steps
Now you’re ready! Follow the steps above to create a website layout that is clear, simple to navigate and gives your users the right information.
