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:
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.
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.)
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.
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.
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.
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.
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.
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.