Do you have a rulebook when it comes to website design? There are some rules that apply to pretty much every web design project—let’s call them the “web design commandments”.

No matter how large or small the website, these rules are the foundation for good design. If you follow along with these basic guidelines, and make them part of your thinking for every project you start, you’ll avoid many of the pitfalls that designers can stumble into!

1. Thou Shall Be Consistent

Consistent design is easy to use and understand design. User engagements and actions, as well as visuals, should be similar in look and use throughout a single design.

This means that buttons are the same color and use the same hover states to help users know how to interact, headlines are the same size and use the same typeface throughout the design, and elements such as colors follow a palette that is identifiable and associated with the brand.

Other visual elements should also follow a consistent style as well with a style and usage plan for elements such as icons or photography, video or illustrations. The design should have a voice that is used for copy blocks that matches the overall aesthetic.

All of these elements of consistency contribute to overall usability, making the design as easy as possible for users to interact with.

2. Thou Shall Use Whitespace

There’s no need to cram every single element into space above the scroll. Use whitespace to establish rhythm and flow, create visual hierarchy and help users move through the design.

If the content is good, they will scroll.

And whitespace can actually help encourage that user action by pulling the eye down the screen.

Whitespace is even more important as screen sizes get smaller. Additional space around elements can help create separation and make them easier to read. (Think about how beneficial a little extra space can be when it comes to tapping buttons with ease.)

Not sure where to include whitespace in the design? Start here:

• Around buttons or other interactive elements
• As linespacing between lines of type to make reading easier
• Between elements so tings are east to tell apart, such as wrapping on photos embedded in text blocks
• In form fields so they are easy to tap on mobile screens
• Around any element that you want users to focus on

3. Thou Shall Use a Grid

A grid is the foundation of user experience. When you design with a grid, the final website is more precise, consistent and elements are placed in an order that makes visual sense.

Grids are both horizontal and vertical, although the most well-known web design grid might be the 12 column vertical grid of columns for aligning elements.

The grid is something only you see in the design process and if you have trouble finding placements for elements or creating an organized outline, a grid can be a total lifesaver.

4. Thou Shall Not Forget User Patterns

Users do things in a certain way and expect specific things from your design. In order to have as much success as possible, the design should use commonly accepted user patterns (recurring solutions to design problems) so that people know exactly how the design functions.

Common user patterns include:

• Order of information in forms, starting with a name or email and ending with “submit”
• Placement of navigation menus
• Location and clickable nature of the shopping cart icon for ecommerce
• How notifications work
• Icons for search and chat, among other things

UI Design Patterns has a long list of user patterns for all types of design situations.

5. Thou Shall Use Similarity in UI Actions

Every element in a website design should work like every other element of the same type. These elements should also have a visual identity so that users know what they are and what they do at a glance.

There are so many user interface actions that can be built into a design that abiding by the Gestalt principle of similarity is a must. Grouping of visual elements and actions so that they are visually identifiable will help create a better overall experience for users.

6. Thou Shall Use Typography Well

You don’t have to be a master typographer, but it definitely helps.

So much of what constitutes good design is rooted in readability and legibility. And those concepts depend on how you choose and use typefaces.

When in doubt, opt for simple typeface pairs such as a serif and sans serif. Step back from the design and see if the lettering is easy to read from a distance. Then look at the lettering on a small canvas, such as a phone screen to ensure it is easy to read at a glance there as well.

Try to use type in a high-contrast environment, such as light type on a dark background or dark type on a light background, so that every word is easy to read.

7. Thou Shall Not Forget Retina Screens

Even the smallest screens can render elements and images with near pixel-perfection.

You need to consider how you will handle images, icons, and other elements so that everything renders beautifully regardless of screen size. When possible, using a vector format can be the ideal solution, which is one reason SVG is growing in popularity all the time.

If you don’t have an image that has the resolution to fit common screen sizes, don’t use it. No picture at all is better than a bad or pixelated image.

8. Thou Shall Be Honest

Your design should be true to your small business, information or brand and transparent in what you do. Don’t steal a design or image, don’t stuff with false keywords to drive traffic and be true to who and what your content is about.

With so much web clutter, users want to interact with designs that are authentic. Tricking users into doing something or signing up for a product or service or just misleading them about a topic or information should be against your personal code of ethics. Don’t take on projects that expect this from the design.

9. Thou Shall Not Ignore Accessibility

The web should be usable by as many people as possible. And while it might sound difficult to ensure the design is accessible, it isn’t as complicated as you might think.

Google has a great guide to website accessibility, which it defines like this:

Broadly speaking, when we say a site is accessible, we mean that the site’s content is available, and its functionality can be operated, by literally anyone. As developers, it’s easy to assume that all users can see and use a keyboard, mouse, or touchscreen, and can interact with your page content the same way you do. This can lead to an experience that works well for some people but creates issues that range from simple annoyances to show-stoppers for others.

Accessibility, then, refers to the experience of users who might be outside the narrow range of the ‘typical’ user, who might access or interact with things differently than you expect. Specifically, it concerns users who are experiencing some type of impairment or disability – and bear in mind that that experience might be non-physical or temporary.

Many of the principles of good design, such as size, contrast, and space, contribute to overall accessibility.

WebAIM has a checklist, as well as other tools, to help you determine if your design is accessible. The checklist covers four areas as they pertain to accessibility: Is the design perceivable, operable, understandable and robust?

10. Thou Shall Be Responsive

It should pretty much go without saying in 2018, but your website must be responsive. That includes every element, from text to images to buttons to the overall framework.

Every design must work on every device. Period.

Conclusion

A solid set of rules can help you get into a design project faster and work more consistently. Note that none of these commandments tell you how a project should look; they are rooted in the theory of how you outline and create each website.

Do you have additional web design rules to add to these commandments? Let us know what they are on social media. Just make sure to tag Design Shack!