Website design best practices: from A to Z

Looking for website design best practices? You’ve come to the right place!

The key to good website design is to start with a solid foundation. Below are some tips and tricks to help you get started.

30 website design best practices

• Begin with the basics
• Navigation
• Color
• Text
• Calls to action
• Design systems
• Optimization

Begin with the basics

Let’s start with a quick overview of simple best practices that can significantly improve your website design if you implement them from the start.

• Start with a wireframe whenever possible. Even if it’s only a pencil sketch, prioritize putting your ideas on paper — or screen. If you have the resources, we recommend dedicating some actual UX time to the structure of the page. This will save you a ton of time when doing the UI work later. Trust us!
• Always work with real copy. Lorem ipsum can be handy for many things, but it’s always better to conceptualize website design with the actual content that will live inside it. If you don’t have any finalized content, try writing some sample copy and use it to build your page.
• Use a grid layout. A grid layout uses a column system that helps you keep your design structured and your elements tidy. It’s also much easier for developers to implement than other, less organized designs. Bootstrap’s Grid System is a great example of this.
• Build for different resolutions and screen sizes from the get-go. Though having multiple resolutions in mind isn’t mandatory, it’ll make your devs’ lives easier, as well as make for a better user experience. Here at Sketch, we design for 360w, 768w, 1024w, 1440w, and 1920w as a minimum requirement.
• Work with multiples of 4 or 8. Using multiples of 4 or 8 for your designs — be it spacings, sizes, typography, etc. — is becoming an industry standard. It’s also a good rule of thumb to follow because it helps with consistency and simplifies your design process. And, you guessed it, your devs are also going to love you for this.
• Maximize the power of ‘above the fold’. The upper half of your page is the first thing visitors see. Make sure your primary CTA is there — and easy to find. Be clear about what your product or service is so people know how you can help them within seconds of landing on your page.

Now that you’ve got the basics down, let’s move on to more in-depth website design best practices.

Navigation

Good navigation is one of the most important aspects of website design. Think about it — if your visitors can’t find what they’re looking for or understand what they can do on your site, how are these visits going to convert?

But don’t worry. Designing a navigation journey isn’t rocket science. Here are some simple yet infallible tips and best practices to take your website navigation design to the next level.

• Less is more. If there are too many menus and submenus, people may be confused and flee your site. Focus on your priorities!
• Choose menus wisely. Different types of menus serve different audiences and products, so think carefully about those goals and needs we talked about earlier. For starters, avoid going for a different one just because it’s cool or new.
• Rely on top menu bars. While it’s great to be creative with your designs, keep your visitors’ expectations in mind. By now, most of us are used to top menu bars and expect to find important information here. In the same way, we expect footers to hold contact forms or company info.
• Make important options easy to find. Keep in mind both your priorities and those of the user when designing the menu hierarchy.
• Add sub-menus where they make sense. Submenus are a great way to house other important pages or sources that would otherwise clutter your menu. It also makes your page’s internal logic clearer.

Color

You should use color in website design like a highlighter on paper. It can help guide visitors, pointing them in the direction of the most important information. But, if you overdo it, it can easily overwhelm people. Here are some simple tricks to use color effectively in web design.

• Use color to indicate function. Color is often used to indicate if something is clickable, such as a button or link. You might even use a different color to indicate if people have clicked on the button or link before. Since your user is already expecting this kind of design language, it’s best to stick with it.
• Use brand colors for accents. When it comes to choosing colors, it’s good practice to go for neutrals for body text and backgrounds. Then, use brand colors for buttons, links and imagery to help boost your brand’s visual identity and generate some good ol’ brand awareness right from the get-go.
• Check for readability and accessibility. The color palette you choose can have a great impact on the user’s eye — for better or worse. You can check your color palettes against the WCAG rules to make sure your design is using the best color contrast for readability.
• Find inspiration. Video games tend to have great use of color. For example, you can study their use of signifiers, which designers use to indicate what an element or object can be used for.

Text

Offering your visitors the information they need is important, but body copy needs to be engaging and easy to follow if you want them to read all the way through. Here are some key website design best practices for when using text.

• Embrace white space. Use short paragraphs and break up sections with headlines, images and other visual elements. Think of these breaks in text as a chance to breathe between ideas.
• Look out for rags and widows. These aren’t people or frayed clothes, but rather text that is poorly displayed. Rags happen when text alignment is off and starts forming weird shapes. Widows are leftover words that hang around at the end of your paragraphs. These might sound like small details, but they can really elevate your website design.
• Respect dynamic duo: Design and Content. Jury’s always out about whether content should inform design or the other way around. Whichever you choose, make sure neither is competing with the other. Keep text succinct but informative and design appealing but simple.
• Set parameters. Though you might already be mindful of padding and margins, make sure horizontal text lines never go past 70 characters. It’s an easy one to miss.
• Don’t forget hierarchy. Text hierarchy can make or break a design. Make sure you get it right from the start. Don’t know where to start? Check out Apple’s Guidelines and Google’s Material Design for reference.
• SEO. Consider an SEO-friendly text and page structure. That means adding keywords in headers and body copy, and thinking about alt-text for images when you share them with your development team.

Calls to action

Easily the most important element in web design, a call to action (CTA) is the link or button that gets your website’s visitors to do something. That something should be clear, easy to find, and aligned with your goals for the landing page or website.

• Consider all CTA levels. You can have more than one CTA depending on the page’s objectives, but it’s important to categorize them as primary, secondary, and tertiary — and to make that evident in your design. Make sure you give your primary goal the most space and attention.
• Keep it short. Effective CTA copy should be short, friendly and informative for the user. Common examples include “Learn more”, “Buy now”, and “Subscribe for free”.
• Placement is key. We mentioned above the fold earlier. While this is where your primary CTA should live, you can add secondary and tertiary CTAs below the fold (the bottom half of your page). Identifying where you want your CTAs to go can also help you sort out how to better organize your copy overall.

Design systems

If there’s one constant in life — and website design — it’s change. Design systems can be a great asset if you’re creating a website built to last. With them, you can create a set of rules that everyone who designs for your brand can use to make sure they’re using the right colors, images, layouts and more.

• Build for the future. You’ll always need to make changes, so make sure you have a design system in place — and its dev counterpart — so you can hit the ground running.
• Create reusable styles and assets. You can create text styles, spacing rules, color tokens, and reusable elements — such as Symbols in Sketch — to make your design consistent and easier to tweak or update later.

Optimization

No website design is complete without some proper optimization. King amongst best practices, making sure your site is Google-friendly is vital for Internet success.

• Be mobile-first. People will most likely find your site through mobile even if they only interact with it later, on their computers. So, it’s better to keep your website design pristine so we never butcher a first impression.
• Don’t forget images. Design work doesn’t end when the website is all sketched out! Work closely with your dev to make sure your images are optimized to keep them looking crisp without slowing down your site. You can use tools like ImageOptim to verify.
• Build a prototype. This will help you and everyone else get a real feel for the design. If you’re working with a client, it can also get you some bonus points. Last but not least, prototypes are also great for user testing.

Have fun

What? Yes! Having fun is the most important part. If you’re not enjoying the process of website design, following all these best practices will be daunting. There are many moving parts, but you should embrace it and enjoy watching your vision come together piece by piece.

A quick way to make sure you’re having fun? Dedicate some time to designing the little details. We have a few on your website and web app — do you know what they are? 👀 (If you want a hint, there’s one on our Downloads page.)