Website / Blog Design Basics

What is Good Design?

  • There is balance between all of the elements.
  • Fads come and go, but good design is timeless.
  • Navigation is clear and easy to use.
  • All pages in your site look, feel and act similarly

 

 

Design Layout Basics

Rule of Thirds

The rule of thirds is a compositional rule of thumb in visual arts such as painting, photography and design. The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would. Wikipedia

Photo Example

rule of thirds

 

 

 

 

 

 

 

 

This photograph demonstrates the principles of the rule of thirds. Source: Wikipedia

Here is a Rule of Thirds worksheet that you can download to begin sketching your design ideas on.

 

  Right Click and Select "Save Link As"

 

Try to keep the Rule of Thirds in mind when you start on any design project.

 

 

Typical Layouts

Elements of a typical website or blog

 

 

 

 

 

 

 

 

 

 

2-Column Layout – Roofer’s Marketing uses a 2-Column Layout

 

 

 

 

 

 

 

 

 

3-Column Layout
The NRCA website uses a 3-Column Layout

 

 

 

 

 

 

 

 

 

 

Fixed Width vs. Liquid Width Layout

Fixed Width
Fixed width pages are exactly like they sound. The width is fixed at a specific number and doesn’t change no matter how big or small the browser is. This can be good if you need your design to look exactly the same no matter how wide or narrow your readers’ browsers are. But this method doesn’t take into account your readers. People with browsers narrower than your design will have to scroll horizontally, and people with really wide browsers will have large amounts of empty space on the screen.

To create fixed width pages, simply use specific pixel numbers for the widths of your page divisions.

Flexible Width
Flexible width pages vary in width depending upon how wide the browser window is. This allows you to design pages that focus more on your customers. But the problem with fixed width pages is that they can be difficult to read. If the scan length of a line of text is longer than 10-12 words or shorter than 4-5 words, it can be very difficult to read. This means that readers with large or small browser windows will have trouble.

To create flexible width pages, simply use percentages or ems for the widths of your page divisions. About.com

Fixed width of popular sites

  • Facebook – 980 pixels
  • Yahoo – 990 pixels
  • MSN – 970 pixels
  • New York Times – 970 pixels
  • Apple – 985 pixels
  • Roofer’s Marketing – 960 pixels

 

 

Consider what your site looks like "Above the Fold" for your average user.

 

If you design your site or blog on a very large monitor you may not realize that the majority of your site visitors may see something totally different than you do.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Colors

Choosing the right colors for your website or blog is very important. Color makes a strong subconscious statement to your visitors. Give some thought to the message you want to send when you choose your color scheme.

Here are some of the common psychological reactions to colors to keep in mind.

Red

- Exciting
– Dramatic
– Rich
– Passion

 

Orange

- Creativity
– Energy
– Informal
– Happy

 

Yellow

- Energy
– Caution
– Visibility
– Summer

 

Green

- Nature
– Growth
– Freshness
– Money

 

Blue

- Calm
– Trustworthy
– Water
– Sky

 

Purple

- Royalty
– Power
– Extravagance
– Expensive

 

White

- Clean
– Light
– Technology
– Simple

 

Black

– Power
– Elegance
– Strength
– Darkness

 

Here is an interesting website that lets you look at websites by color. Click Here

 

 

Fonts

Fonts are the style of type that you choose for your text. There are two primary styles of fonts. Serif and Sans Serif. What is the difference?

In typography, a sans-serif, sans serif or san serif typeface is one that does not have the small projecting features called "serifs" at the end of strokes. The term comes from the French word sans, meaning "without".

In print, sans-serif fonts are used more for headlines than for body text. The conventional wisdom holds that serifs help guide the eye along the lines in large blocks of text.

Sans-serif fonts have become the standard for body text on-screen, especially online. This is partly because interlaced displays may show twittering on the fine details of the horizontal serifs. Additionally, the low resolution of digital displays in general can make fine details like serifs disappear or appear too large. Wikipedia

Serif Fonts

This is a sample of a Serif font

Sans Serif Fonts

This is a sample of a Sans Serif font

 

You should choose your font carefully as it can really change the feel of your message!

 

Where to find fonts online

- Free Fonts

- Paid Fonts

What are Web-Safe fonts?

Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution defined in the visitor’s operating system. Wikipedia

Common Sans-Serif Web-Safe Fonts

  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana

Common Serif Web-Safe Fonts

  • Courier
  • Courier New
  • Georgia
  • Times
  • Times New Roman

 

 

Images / Pictures

What should you keep in mind when selecting photos for your website or blog?

  • Should be relevant to the topic
  • Need to be interesting
  • Need to be appealing

Where to get images

- Free images online

- Paid images online

 

Cropping images for impact

By simply cropping an image you can dramatically change it’s usefulness. Make sure you experiment with this prior to inserting the final image.

Original Image

 

 

 

 

 

 

 

 

 

Cropped Image

 

 

 

 

 

 

 

 

 

Image formats

Images can be saved in the following formats, each with their own strengths depending on they type of image it is and where you plan on using the image.

  • .jpg – best for photos and high resolution images
  • .gif – best for solid colors and images that need transparancy, can also be animated
  • .png – successor to the .gif – has transparency capability
  • .bmp – windows image format, not commonly used anymore
  • .tiff – usually used for documents
  • .pdf – usually used for documents

To convert images from one format to another see the tutorials on GIMP graphics editing.

 

 

Conclusion

Make sure that whenever you are designing anything you keep in mind the feeling you are trying to convey to the customer.

One of the biggest mistakes I see new designers make is what is called a "Message-to-Market Mismatch" You should always be thinking about creating a "Message-to-Market" match.

Here is an example:

Message-to-Market Mismatch

 

 

 

 

Message-to-Market Match

 

 

 

Notice that the only change in the above logos is the font style. Do you "Feel" the difference when you read the tagline? Your potential customers will.

 

 

Additional Resources

Hex Color Code Page:

Free CSS Tutorials:

Free HTML Guides and reference tools:

WordPress Forums, Plugins & Themes:

If you have any questions about design or if there are additional tutorials that you would like to see us create or expand on please let us know!