Website Design Guide

This is a basic explanation of how I typically design websites. While every case can have unique circumstances, I generally start with some common guidelines and try to adhere to a set of design principles.

I recommend using a format and structure that visitors are used to. You can make unique and creative designs where design elements are in different places, but that comes at the expense of usability. The harder you make it for visitors to find what they’re looking for, the quicker you’ll lose them.

You may also be interested in my Website Content Guide, which discusses what pages you might want on your website.

Style

I prefer the “flat design” style, which is becoming increasingly common, especially for apps and cutting-edge tech. Flat design, as its name suggests, looks flattened or two-dimensional as opposed to a three-dimensional look (buttons with drop shadows that look like they’re popping out from the screen, color gradients, thick borders, overlapping elements).

Flat design is also typically characterized as minimalist, using strong colors and simple elements, and judiciously using empty space. Using empty space instead of cramming everything “above the fold” or in a single section allows elements to “breathe” and makes it easier for the visitor to digest the information and focus on one element at a time.

Here are a couple of articles that explain flat design: The Ultimate Guide to Flat Design and Principles of Flat Design.

Structure

You can have a fixed or fluid structure. A fixed structure keeps all of your content in a box with a maximum width, and everything outside of that box is typically a background color or background image. The background could extend on all 4 sides, or maybe just on the left and right. A fluid structure has each row extend fully to the left and right. There are no lines or borders to make the content look like it’s in a box.

Typically, I design sites with a fluid structure. The sections are “full width” and extend infinitely to the left and right, but they all have a fixed “content width” (typically 1200 pixels wide). Whether you’re viewing the site on a 1440px wide screen or a 2560px screen, content such as lines of text will not stretch any wider. However, the backgrounds of each section will keep extending to the left and right, making the design look less “boxy”.

Color

Typography

  • Font size. The text should be easy to read at a distance.
  • Font weight. There’s more than just normal and bold.
  • Letter spacing. Can make a big difference, sometimes used for headings.
  • Line height. Recommended ratio: 1.6. (Golden Ratio: 1.618)
  • Paragraph spacing. Recommended: at least one line of text.

Fonts

I prefer Google Fonts to standard web fonts. There are many options, and they are free to use. However, the more external fonts you use, the slower your site will be. So I try to use no more than 3 different external fonts on a site (and preferably just 1 or 2).

  • Readability. Check how the font looks for all characters, in bold, all caps, etc. Some have strange styling for certain letters. Some fonts have limited ranges of font weight.
  • Contrast. Headings and body text should be distinct from each other, either with size or font (serif and sans-serif pairings are common).
  • Contrast between font color and background color. Another factor in readability.
  • Contrast Ratio Tool: A contrast of 80% is great (8.6 on tool = 86%).

Paragraph Styling

  • Avoid centering paragraphs (and sometimes multi-line headlines too).
  • Avoid using justified text alignment.
  • Add variations to your long form text with headings, bulleted lists, bold, links, images, highlighted boxes, etc.
  • Don’t have too many words per line, which can be hard to read across the screen. This depends on font size and width of content area.
    • Limit line length — 45 to 75 characters (about 10 words per line)
    • Type Set With Me

Spacing

  • Use white space and padding around elements for breathing room.
  • The old “above the fold” rule is dead. Don’t stuff too much content in the header area.

Contrast and Consistency

  • Use contrast in shape, size, and color for distinct elements.
  • Use consistency in shape, size, and color for related elements.
  • Group and align related elements.
  • Don’t use too many different colors, fonts, and font sizes.
  • Good article on UI

Calls to Action

  • These are the buttons and links that are most important for visitors to click on.
  • They need to stand out from the rest of the content.
  • Use high contrast color(s).
  • Buttons should be large enough to easily touch on a cell phone and surrounded with enough white space.

Themes and Plugins

I use the Genesis Framework (parent theme) and Dynamik (child theme). I also use the Beaver Builder plugin. I have developer licenses for all of these, which allow me to use them on unlimited client websites. If you’re a client, you will get upgrades for as long as I renew my license. However, if you require direct access to the products’ support, you will need your own license.