Let’s be clear: web design is an involved discipline that can take a lifetime to master. As if that weren’t hard enough, it’s also a field that’s evolving every second as technology keeps advancing—imagine da Vinci’s frustration if people complained the Mona Lisa “looked old” after just five years. Check your inbox Weve just sent you your first lesson. Sign up for our free, 7-day email course and learn to build your digital brand! Well also send you creative tips, trends, resources and the occasional promo (which you can opt-out of anytime). Zionks! Looks like something went wrong.
Web design is something that pretty much everyone on the managerial end of a business has to deal with, but only design professionals truly understand. If you want a great web design, you have to learn the basics, so you can communicate want you want. Even if you’re hiring a professional to design your page for you, you still need some background information to discern a talented web designer from a mediocre one and explain what you need them to do.
We know how hard it is for non-designers to get the hang of this whole web design thing, so we created this handy guide to walk you through the basics. Here are the top ten web design tips you need to know about (plus some useful dos and don’ts), divided into three categories: Composition, Aesthetics and Functionality. Whether you’re hiring a designer or DIY-ing, check your final web design for these ten fundamentals.
3 Principles for better Web Design: Navigation, Hierarchy & Color
Why is website layout important?
A website with a good layout can allow visitors to navigate the site easily and find the content they seek. Establishing a clear structure with simple navigation between pages and sections can be just as important as creating engaging content. Its helpful if your site is visually appealing and instinctive to use to help persuade visitors to stay when they visit and come back often.
29 website layout tips
Here are tips to help you design a well-structured website that can boost traffic and encourage visitors to return:
1. Think about your sites purpose
Before you design a website, consider what you want your site to do, such as inform, entertain, advertise or sell. The sites purpose dictates the best type of design for it. For example, a site made to sell products requires a different layout than a blog. Try to make every decision based on the purpose of your site.
2. Sketch out a framework
Sketch out a framework for your website before you build it and consider what the most useful layout would be for your visitors. Some sites organize content into categories and subcategories, allowing users to work through a site logically based on its theme, while others structure it into a sequence, such as chronological or alphabetical, to let users proceed in a specific order. Some sites include multiple links to internal pages on every page to encourage users to stay on the site. Choose a structure that suits users needs and allows you to add content or pages easily.
3. Design a simple homepage
Designing an effective, visually appealing homepage is essential for retaining visitors and encouraging a higher click-through rate. It is the first page people visit, so make sure it conveys the right message by welcoming them to your site and telling them a little about it while also making sure its easy to navigate and find links.
4. Keep key content above the fold
“The fold” is a phrase that refers to all content visible on a webpage before a user scrolls down. Try to keep important content above the fold to show your audience your site has the information they are looking for without them having to search too hard for it.
5. Include white space
Try to include enough white space (gaps between each element on the page) on every webpage to avoid a cluttered appearance. This can make your content look cleaner and more professional and help make the content you have stand out even more.
6. Add images
Include images where appropriate to illustrate your content and make your site more visually appealing to visitors. Ensure all images you use are relevant to the rest of the content on the page and are reasonably sized.
7. Use high-quality photos
Wherever possible, use high-quality photos that relate directly to your topic. These photos can complement your service or good and better engage visitors. If you want to use images of people, consider taking the photos yourself rather than using stock photos, or hire a professional to take some to ensure theyre high quality.
8. Break up the text
Make your website is easy to read by avoiding long blocks of text to prevent users from simply skimming your content. Write in shorter paragraphs and use images, bulleted lists and subheadings to split up the text. This makes your content easier to read quickly, allowing visitors to find exactly what they want.
9. Highlight important content
Another way to break up text on a page is to highlight important content, such using as quotations for the main point you want to make. Do this by using bold or italics or by featuring text in a different color. This allows readers to find the main takeaway of a page easily.
10. Add “back to top” buttons
If you have any pages with lengthy content, consider adding a “back to top” button to give visitors quicker and easier access to the navigation bar. This is a simple way to make your site more user-friendly.
11. Format all webpages properly
Format all the text on every page of your site properly. Remember to mark all headings and subheadings clearly with a larger font to aid reader comprehension, and try to write in well-structured paragraphs. This can give your content a more professional appearance.
12. Choose the right fonts
For best engagement with your content, try to choose easily legible fonts for your website. Opt for sans-serif fonts for text because they can be easier for users to read. Arial, Calibri and Helvetica are all common sans-serif fonts.
13. Use fonts consistently
Once you have chosen a few fonts, remember to use them consistently across your website. You can use different fonts for unique elements, such as headings, paragraphs and image captions, but make sure each element uses the same font everywhere on your site.
14. Select a color scheme
Choose a color scheme and use it consistently across your site. Websites that have complementary tones or a site-wide color scheme can be more visually appealing to visitors and encourage them to spend more time on your site.
15. Consider a visual hierarchy
Think about the visual hierarchy of each page on your site. Place the most important content at the top in an accessible location and guide your users toward what you want them to look at next by using attention-grabbing headlines or images.
16. Include calls to action
A call to action is a sentence or phrase that tells a sites visitor what they should do, like buy a product or sign up for a newsletter. Try to include a clear call to action on every page that aims to persuade the readers to do something.
17. Give every page one goal
Try to design each webpage on your site with a clear goal in mind. Think about whether you are trying to inform, convince, advertise or sell something to your visitors, then build the page while considering that goal. One goal per page can make it simple to direct users to complete the wanted action.
18. Choose the right layout for each page
Design each page on your site with the best layout for its goal or purpose. There are multiple layout options to choose from, including single column, split screen, multiple columns, featured image and grid of cards. Each page layout serves a different purpose, and you can use multiple page layouts across your site to suit the different goals of each page.
19. Include visual clues
A great way to guide readers around your page layout is to include visual clues. Even something simple, like a graphic arrow pointing to the content you want to draw attention to, can be effective at drawing your visitors eyes to something you want them to notice.
20. Design an eye-catching logo
Every website should have a simple, eye-catching logo. This gives your brand an identity people can remember. There are many free design tools available online, so you can create an effective logo for your website on your own. Try to place your logo in the top-left corner of your site so it is clearly visible on every page.
21. Link your logo to the homepage
You should add a hyperlink to your logo on every webpage that links back to your homepage to make site navigation easier for your users. A lot of websites have this feature, and it has become a standard practice that visitors expect while browsing a site.
22. Create a user-friendly navigation menu
The navigation menu is the primary way users get around a website, so design it carefully based on the site structure you have chosen. If you organize your pages into categories and subcategories, use these same groupings to arrange your menu.
23. Include a site map
To make navigation of your site even easier, consider including a site map. Site maps allow visitors to view the structure of a website and provide links to every page on the site. They are also a good way to increase links to pages on your site, which is important for search engine optimization.
24. Incorporate a footer
The footer of a website usually includes links to the most important pages on the site. It is a more concise navigation menu to help users find their way around your site. You also can provide contact information here to make you more accessible to visitors and a link to your site map to make navigation even easier.
25. Optimize content for mobile use
Each time you add a page to your site, optimize the content for use on desktop, tablet and smartphone screens. The mobile versions of your site should be less cluttered than the desktop version, and mobile content can look cleaner if you use a single-column page layout. Having a mobile-friendly site also can impact your SEO, so optimization is crucial for boosting traffic.
26. Prioritize site speed
Every element you add to your site, such as videos, images, advertisements and plugins, can slow down the loading time of that page. Internet users can be more likely to return to a site with a fast loading time, so check the speed of each page on your website and remove any unnecessary features.
27. Use social icons sparingly
Anytime you encourage your sites visitors to visit your social media page, youll also be tempting them to look at their own social media feeds instead of your content. To keep visitors on your website, link to your social media only where necessary. Include linked social icons only in the footer of your site, for example.
28. Fix all 404s
404s are the error messages that appear when a developer changes the URL of the website but doesnt redirect it. Set up a proper redirect any time you remove or rename a page, or when you change its URL. This can make it easier for visitors to find what theyre looking for and could keep them on your site for longer.
29. Keep it simple
A good way to boost traffic to your website is to keep the site simple. Look at your favorite websites for inspiration—you may notice many of them use similar layouts. For maximum visitor engagement, opt for a standard layout and focus on creating unique content.
What makes a good site layout?
How can I improve my website layout?
- Freshen the Content Regularly. …
- Make Sure It Has a Call to Action. …
- Add Contact Information Prominently. …
- Add Images and/or Video. …
- Update Your Design to Current Standards. …
- Improve Page Speed. …
- Make it Mobile Responsive.
How do you plan a layout for a website?
- Header & menu. The header is the uppermost part of a website. …
- Images. Immediately below the header is some form of image, series of images or sometimes a video. …
- Website content. All sites contain content. …