10 Web Design Rules for Remarkable Website Design
Mastering web design skills takes years of practice and dedication.
Becoming proficient at designing websites involves following a set of web design rules and techniques that determine a great web design from a website that is not so great.
There are certain web design rules that you must follow to a “T” and there are those that can be bent depending on the project.
However, bending web design rules is only advised for expert web designers or those who have been practicing the web design craft for over 10,000 hours.
Experience is Key
I have been designing websites professionally for over ten years, that’s conservatively 20,000 hours.
Although I would estimate my experience at closer to 42,000 hours, that’s 80 hours a week for 10 years (I love what I do and dedicate myself diligently to my craft).
A great web design is a perfect balance between design and usability.
1. Website Legibility
First, on our web design rules list is legibility. This is one of those rules that I recommend always abiding by. If your reader, customers, or clients have problems reading your message you will most certainly lose them.
A website with good legibility makes good use of several factors including, fonts, color, and spacing.
All of these items are covered separately in this article, but I thought I’d start with as number one on the list.
2. Font Usage
Using the correct fonts, also known as typography is important for user readability.
However, typography is so much more than your font type, it also includes
- Font sizes
- Text Decorations (eg. underline)
- Font Weight (eg bold, regular, or light fonts)
- Letter Spacing
- Line height (eg. the distance from one sentence to another)
Types of Fonts
Essentially, there are only two font categories, Serif and San Serif (or Serif and without Serif).
Example of a Serif font:
Example of a San Serif font:
A great place to research and download the perfect web font is Google Fonts.
Font sizes
Font size rules are broken into several factors.
Such as Titles, including:
- H1 (Main Webpage Heading or Title)
- H2 (Section Titles)
- H3 (Sub Titles)
- H4 (Sub Titles)
- H5 (Sub Titles)
- H6 (Sub Titles)
Each of the aforementioned titles should be different sizes as well as read well together.
Additional rules for website title. Choose an easily legible font, use all caps sparingly, and keep your titles short and sweet.
As well as paragraphs
Paragraphs or P tags are the main text font on your website. I would recommend a clean and lightweight (not too bold) font. Bold fonts are difficult to read in paragraph form.
3. Color Contrast
The basics of color contrast is using colors that complement each other, like yellow and black, or white and red as an example. This could also be referred to as color theory.
Using color theory as a guide you can come up with a color system that will attract, and not distract your readers.
Once you become proficient with color theory, you can utilize this system to produce a website that your visitors will love.
Another point to think of, when it comes to web color theory is the abundance of digital color referred to as hex colors. According to Stackoverflow, there are more than 16,777,216 of them.
For example, white is #ffffff and black is #000000. When put into code these two examples would produce white and black, however, there are hundreds of variations of each and thousands of each other color. Learn more about website color theory, here.
Below is an example of just a few green hex colors, and as you can see it is hard to choose from just these.
4. Element Spacing
Next on our web design rules list is element spacing or if you’ve ever taken an art class you may recognize the term negative spacing. This refers to the practice of creating or adding space between items to attract your eye to elements you want viewers to see.
So, in theory, the more space you create around an object the more your eye will be attracted to it.
This is practice can be utilized in one of the most effective web design rules to draw your reader’s eye to elements on a web page. Elements such as call-to-actions, which we’ll cover more in this article.
5. Navigation
Navigation on a website is one if not the most important part of a good web design flow. As a rule, you never want a visitor to not be able to find what they are looking for on your website.
This includes well-designed navigation and search functions on your website.
Your website navigation should be present in a number of places on your website.
Including, but not limited to the website header, the website footer, website sidebars, and website content. Follow these web design rules for navigation to get your readers where you want them to go.
6. Call to Actions
Call-to-actions can be defined as methods to reach important segments of a website.
These can be images, text or most notably buttons eg.
These website call-to-actions should be clear and concise, readable, with a sufficient amount of space from other leading elements.
Another item to add to your web design rules list for your call-to-actions is “utilize your negative space between other elements on your page and your important call-to-actions. This will draw in the reader’s eye and mean more conversions.
7. Clear Direction
Having a clear direction on your website is vital to great web design. A clear direction is also known as virtual hand-holding. Virtual hand-holding guides your readers, visitors, and customers on what you want them to do on your website.
A great website direction is a well-balanced use of call-to-actions, website legibility, and color usage. When used together, this can be a strong indication of a well-designed website.
8. Contact Information
Ensure your contact information is prevalent but unintrusive within your website content.
As a good rule of thumb, your website should utilize your name, address, and phone number or “NAP” in the footer, sidebar, and a dedicated web page.
9. Editing
There is no faster way to lose a reader’s interest than having a website riddled with grammar errors.
This includes general grammar, spelling, and writing flow. Are your sentences easy to read, are your paragraphs the optimal length, or are they too long?
Additional web design rules for website editing or content creation.
Get to your point in as few words as possible, try your best not keyword stuff to the point to where the content is difficult to consume and your message is lost.
10. Be Clear with Yor Messaging
Getting direct to the point is very important when it comes to websites.
Not only getting to your point but also keeping your verbiage clear and understandable to your reader. You never want a reader wandering off during a message and seeking answers elsewhere.
That is all on our 10 Web Design Rules for Remarkable Website Design
I hope this article has helped you on your web design journey and possibly cleared up some questions you may have had.
If you enjoyed this article, please consider subscribing to our newsletter for tips on web design, digital marketing, and branding. Subscribe here.
Have a question? Leave us a comment, here.
web design rulesweb design rules