The Beginner’s Field Guide to Web Design Best Practices
It might appear that the vast array of internet pages have very little in common. You might not be able to see the similarities between the best web pages, even though they are all focused on different topics.
This is due to a set of web design best practices. These are the stylistic choices that web designers make to make their pages appealing and useful to as many people as possible.
These design principles are essential to capturing the attention of your readers and keeping them there.
Today, I want to share 9 web design best practices that have been gathered from professional web designers and converted into real-world examples.
Your website should…
Navigate with ease and intuition
Consider first why someone would visit your website.
Apart from designers and artists, the most important thing to people is not how beautiful your site looks (though this can be a plus). Your website is there to solve a problem. Your webpage should be easy to navigate and provide access to all these resources. Web design is all about usability and accessibility.
This is the foundation of all web design best practices. It also encompasses the rest. My main point is to not feel that you have to reinvent the wheel when designing your website. Copy the general layout of pages that feel right for you. It’s possible that a successful web design will work for you if it has worked for big names on the internet.
Who does it well: Wirecutter is a highly successful product review website with an easy-to-use web design.
Keep it simple and consistent.
Adding too much is the most common mistake that I see when building websites. Too many colors, too few typefaces and too many graphics (even excessive white space!) are all mistakes that beginners make when building a website. Your reader will quickly see the result: Confusion.
Let’s take a closer view at each element and see how we can do it effectively and efficiently.
- Colors – Use as many colors as you need to make navigation easy and intuitive. For most websites, three to five colors are sufficient. More than that and your images will clash. (Here’s How to Make a Web Design Color Palette.
- Graphics – Any images or moving graphics you use should have a clear purpose. Drop-down menus, chat boxes and other visuals should be used to direct the reader to the next step. They should not distract from your main message.
- Typefaces – Save your flourishing, decorated typography for another project. Websites should be simple and easily read. Arial, Times New Roman and Helvetica stand out as the best web fonts. Pick one font size and limit the number of fonts you use on any page to three.
Who Does it Well: Le Creuset is a French brand of cookware. Their design choices are simple and minimalist. They are able to highlight their main point: the beautiful colors of ceramic-coated cookware.
You should not be focusing on text but images.
A wall of text may be the fastest way to get your reader to leave your site. Research shows that the human attention span is rapidly decreasing, at least when it comes to looking at websites. This is particularly true in light of the growth of mobile browsing. More on that later.
The old saying “A picture is worth a thousand pictures” is applicable here. You can hold your readers’ attention for longer by balancing images and text on the website. This will allow you to convey your message more effectively.
What if you don’t have images to post on your website? That’s no problem, you can use any of the search engines for images free for commercial use and find the best pictures.
Who Does it Well: GearMoose is a men’s lifestyle site that features images prominently on its homepage. This encourages readers to spend more time browsing, then choose what catches their attention, and then read the text-focused review on page 2.
Every page should have a purpose
The best websites ensure that each page serves a purpose, no matter how small or simple they may be. It helps to ask some basic questions when designing every page on your website.
- What is the “big idea?” for this page?
- What are you looking to communicate?
- Who would you like to see on this page? What should they learn from it?
- What are you expecting the reader to do when they see your page?
Don’t get too involved. Many times, the answers to these questions are quite straightforward. Let’s take, for example, a contact us page to help a business.
- What is the “big idea?” for this page? People need to be able to contact you via your website.
- What are you looking to communicate? We are always available to you for a quick and convenient conversation.
- Who would you like to see on this page? What should they learn from this page? Customers or potential clients who need to know how to contact you.
- What would you like the reader to do once they have looked at your page? Get in touch with you and begin to communicate about how you can work together.
You’ll be able to map out the basic minimally viable website by going through this process with your homepage and about page. If you choose to go ecommerce, you will have a solid foundation to create your product pages and thank-you pages.
Who does it well: The website of Spotify is simple and direct with five main pages that cover 90% of the needs.
Mobile users are your friends
The shift away from desktop-based browsing has been happening year by year with the rise of smartphones. According to Perficient, 68.1% all website visits in 2020 were from mobile devices . This means that your website must look as good on a smartphone screen as on a desktop computer.
responsive design is a way to make a website seamlessly switch between desktop, mobile and tablet viewing. This means that a website’s structure can be viewed in many different ways, instead of being locked down to one way.
For most web designers, hobbyists and beginners, major content management systems, such as WordPress, which we use for ShivarWeb, can handle responsive design. WordPress will adjust the layout and position of text and images automatically to suit desktop and mobile browsers.
However, it is important that any person creating a website check it on mobile, tablet, and desktop. You can even try different browsers. Not everyone will use Chrome or Firefox and you want to ensure that every reader has the best possible experience.
Who Does it Well: NPR displays perfectly on desktop and mobile, without compromising their unique, clean aesthetic.
Prioritize the most important things
What is the first thing a visitor should see when they click through to your website? It will be the most important if you follow website design best practices. You want to grab their attention in the first few seconds of a visitor scanning your homepage.
This principle is often referred to as “visual hierarchy” in the design world. It’s also used in real life all the time.
- Restaurant menus often feature the names and descriptions rather than the price of the food.
- Street signs and billboards are the best places to put your main message.
- You will find the most sought-after items in department stores near the front door.
What is the most important thing about each page on your website? This will be related to the purpose of each page as mentioned above. When you have decided what your primary goal is for the page, make sure it is prominently displayed on the page from the moment it loads.
Who Does it Well: Netflix if you don’t have one, directs your attention to signing up for their service.
Stay True to a Proven Layout
AKA conventionality, design standards
In the early days of the internet, the expectation of what readers should expect was set. This is similar to the architecture of a building. If the door isn’t where it should be, you’ll feel disoriented and confused.
These conventions are just a few examples of some of the precedences:
- The main navigation menu should appear at the top of your page. A drop-down menu listing should also be available.
- The logo will appear at the top left or center of the page.
- Clicking on the logo will bring you back to the homepage
- Colors will be changed for buttons and links that you have previously clicked
- An icon for a shopping cart located in the upper right corner of all ecommerce pages
To get an idea of the layout, aesthetics and functionality that are unique to your niche, you should look at similar websites when building your blog or website. You can also consult our website layout guidelines for more information.
Who Does it Well? The Associated Press News site is as traditional as they come.
Load quickly
Did you remember how we talked about the attention spans of web users? This doesn’t only apply to pages that are already loaded. Your website takes a long time to load. That’s one second of your readers’ attention that has already been consumed. It’s obvious that pages that load quickly are always an advantage.
Your choice of hosting provider is a major factor in the speed of your website’s initial load. This is a much larger topic than I can address here, so I recommend that you visit our hub page for web host provider reviews. You’ll find the complete list of pros and cons, as well as costs for maintaining your website.
Other than that, your site will run smoothly if you stick to the guidelines we have already established — simplicity, consistency and conventionality.
Who Does it Well: Adobe loads fast, even with the most graphically-rich pages, and is easy to navigate.
SEO is important
Search engine optimization or SEO is perhaps the best way to improve website content. Although SEO can be a full-time job, there are a few tricks that will help you make your website visible to Google and more accessible to readers.
Learn the basics of writing meta descriptions for SEO. These are kind of like the blurb at the back of a book: While not the most important piece of information, they can make a difference in whether you buy the book or click on your website.
Next, you need to be familiar with how SEO titles are created. Search engines use the title tag to determine what your site is about. It’s the most important element that you have on your page. When they bookmark your page to return later, the custom-title tag that you have created will be the title that they see in their favorites.
Next, you will need to decide on keywords and map out a content strategy. While that is a little beyond the scope of this article has a lot of links about SEO which will help you get started.
Who Does it Well: Ahrefs, an all-in-one search engine optimization tool, is their website and a fine example of how they use the advice.
Next steps
Although it might seem difficult to build a website that looks good, it is actually easy if you pay attention to the details. As a user , you should pay attention to elements you enjoy. These elements don’t have to be fancy or complicated. They just make it so simple that you don’t even think about them.
Check out our other resources, including hiring web designers and finding a logo maker.
Similar Articles
- How to Create a Minimally Viable website
- 404 Page Best practices, Ideas, and Examples
- Contact Us Page: Best Practices, Ideas and Examples
- Ecommerce Product Pages Best Practices, Ideas, and Examples
- About Us Page Design: Best Practices and Examples
- FAQ Page: Best Practices, Ideas and Examples
- Best Practices, Ideas, and Examples
- Designing a Website Layout with Best Practices and Examples
- Thank You Page: Best Practices, Ideas and Examples
- What is a Web Design Color Palette? How do I make one?
- What Is A Website Worth?
- 59+ Methods to Find Free Images for Commercial Use
- How to Enhance Your Website Content
- How to Write a Meta Description for SEO
- How to Write a Title Tag for SEO
- Best Practices for Landing Pages w/ Ideas and Examples
