Ten Simple Design Rules for Web Design

In my Web Fundamentals course (CSCI1450 at Saint Paul College), I primarily teach college students how to use HTML, CSS, and some common frameworks to make websites. The focus is less on design and more on learning how to code. Even so, I created this list of simple design rules for web design so they can make their websites look more professional.

Design Rule #1: Keep Text Under 5 Inches

Written text should not be wider than about 5 inches. Readers can’t find the next line easily if the text is too wider than about 5 inches, and less than that makes it easier for readers. That is why you see newspaper articles in narrow columns. 

Say you have the max-width of your main section centered with a max-width of 1000px. That works out to around 8-10 inches, depending on screen resolution. Obviously, we have a bit of a problem, because we have made the text too difficult to read for users

To keep text to a maximum of 5 inches across the page an easy solution is to place an image next to the text, like in the example below:

Example of a website row showing and image and text so that the text is less than 5 inches.
Example of a website row showing and image and text so that the text is less than 5 inches.

Design Rule #2: Use White Space

Emphasize important messages or images with white (negative) space. The example is from SoftwareForGood.com, a web development firm in the Twin Cities. Note how they have a lot of white space around a clear message, along with a large call to action button.

Large Text with White Space to Emphasize a Let's Talk Button
Large Text with White Space to Emphasize a Let’s Talk Button

Generally, more white space on your website is generally a good idea.

Design Rule #3: Contrast Header and Regular Text

Make headers clearly different than text. To make the headers stand out from text you can use font-weight, capitalization, font-size, and color. 

On the example below, note how there is a contrast between the appearance of the header and the regular text.  You can use font-size, font-weight, font-family and uppercase/default to make the contrast. (This example is from JMWforLife.com.)

 Website Showing A Large Contrast Between the Headers and the Text
Website Showing A Large Contrast Between the Headers and the Text

Design Rule #4: Image Consistency

Arrange your images thoughtfully on the page. As a general rule, make images the same size and aspect ratio with the same border radius.

The example below looks professional and organized because the three images are the same size and aspect ratio. 

Three images evenly sized with text
Three images evenly sized with text

Design Rule #5: Do What Users Expect

When designing website, place HTML elements where users expect them to be. The header <header>, navigation <nav>, and footer <footer> should be the same on every page. This is what the user expects. The main section is different on every page.

As you can see in the screenshot below, the main section starts after the navigation. That is the only section where there are changes on a page.

Website showing the header, navigation, main section, and footer on a web page
Website showing the header, navigation, main section, and footer on a web page

Design Rule #6: Do Not Distort Photos

Do not distort photos to fit the spot. Crop and position them instead. 

In the image below, you see can see what happens when you don’t treat photos with care. As you can imagine, it is even worse to stretch a photo of a human face.

The original and a stretched white puppy image.
The original and a stretched white puppy image. Image by Karen Warfel from Pixabay

If you are using an embedding image <img>, then be sure to set the size and width of the image to the actual size of the image.

For background images it is usually best to use the property:value background-size: cover. This property:value gives shows the most possible on the image given the space allotted for it on the web page. Avoid using background-size: 100% 100%, because that will stretch photos. 

Some abstract background textures may be stretched with 100% 100%. This is the same image, stretched in different directions to 100% width and 100% height. Since this isn’t a photo, the stretching can be ok.

A Background Image Stretched to fit with background-size: 100% 100%.
A Background Image Stretched to fit with background-size: 100% 100%.

Need a refresher on images? Check out Module 4 and Module 12 in the HTML/CSS Curriculum.

Design Rule #7: Do not place text on faces

Do not place text on faces or the primary subject of a photo.  Make sure the text is not on the faces at all screen widths, keeping in mind the text will shift as the width changes. The on the images below, the text is on top of the faces. On the image below, the text is below the faces. As a side note, you can also add a background color behind the text to make it easier to read text on top of an image. Use RGBA instead of HEX colors when you need to set transparency.

Design Rule #8: Use a consistent design

Be consistent with your design choices. Decide on fonts and colors for your website and use them consistently. Choose one border radius and aspect ratio for your images throughout the website. It generally works better to keep the design simple.

To make sure you are consistent, it may make sense to create a style guide for your website CSS. A style guide could look something like this:

Style Guide

Header font for Headings 1 and 2: Abril FatFace #551461

Text and smaller headings: Montserrat, #333333

Images: 4:3 Aspect Ratio, Border Radius of 5px, Box-shadow of 2px 2px 2px black

Dark Highlights: #551461

Light Highlights: #FBBC02

Text Boxes: #551461 for the background and #FFFFFF for the text

Design Rule #9: Keep the Header Area Short

The website header and navigation should be less than 2 inches or 200 pixels in height. It is important to keep key content “above the fold” by keeping your Header and Navigation short. For websites, it is critical that you have a logo that is rectangular landscape in shape, in order to keep the size of the header under 2 inches. 

The Apple header and navigation is 44 pixels in height. That is by design, so that there is more room to show product images.

Screenshot of the Apple website showing their short navigation of 44 pixels.
Screenshot of the Apple website showing their short navigation of 44 pixels.

Design Rule #10: Use Bright Colors as Accents

Use bright colors as accent colors. A white background is easy to manage and has a modern and clean design.

Look at the four websites below. Note how these websites have a white header and only use colors in photos or for smaller accent items. These websites were made by large companies that probably have design and development teams.

 


If you follow these 10 simple design rules, your website will look more professional. Of course, the exception proves the rule, and if you have a lot of design experience you may want to break these rules. Even so, if you generally follow these simple rules, you can avoid some design pitfalls.