1 of 12

Slide Notes

Understanding great design principles is not reserved for Monet level artists! As marketers, we need to think about the exact response we want to elicit from a visitor, then use tools designed to get their attention.

You don't have to be a design school graduate. Just follow some simple principles with your website designs.

Beginner's Guide To Website Aesthetics & Design Principles

Published on Nov 18, 2015

No Description

PRESENTATION OUTLINE

A BEGINNER'S GUIDE

TO WEBSITE AESTHETICS & DESIGN PRINCIPLES
Understanding great design principles is not reserved for Monet level artists! As marketers, we need to think about the exact response we want to elicit from a visitor, then use tools designed to get their attention.

You don't have to be a design school graduate. Just follow some simple principles with your website designs.
Photo by djaquay

CONTENT WITH PURPOSE

  • Why are we creating this content?
  • Who are we creating it for?
  • What need or desire will it fulfill?
  • When are we creating it?
  • Where will this content be published?
Hubspot's ebook, "Design It Yourself: The Marketer's Crash Course in Visual Content Creation" outlines principles necessary to create great aesthetic experiences.

Following these principles ensures your design supports your overall brand goals.

ESTABLISH HIERARCHY

FIND THE KEY MESSAGES YOU WANT TO CONVEY
List your key messages and determine their order of priority.

Check to make sure both text and visuals follow the established order of importance.
Photo by Rami ™

RESPECT SIMPLICITY

LET YOUR MESSAGE SHINE
Don't make your design overly ornate or flashy. Design should never take focus off your message.

Eliminate graphics, images and features that don't support the content's purpose.

Look at your finished product carefully. Is your content easy to consume?

Test your message. Ask someone who isn't familiar with your content's message to review. If they understand your message, you're good to go.
Photo by -Reji

KEEP IT LEGIBLE

MAKE SURE ELEMENTS DONT FIGHT EACH OTHER
Check your text is legible - not too dark or too light.

Is every element clear? Make sure images don't obscure text.

Respect the whitespace! Don't cram too much text into a small space.
Photo by bdebaca

STRIKE A BALANCE

VISUAL BALANCE MAKES FOR EASY READING
Check for equal margins. Make sure elements aren't too close to each other.

Again, use whitespace wisely! Whitespace draws attention to your important content elements.

ACHIEVE ALIGNMENT

BALANCE ELEMENTS CAREFULLY
Position content elements harmoniously in relationship to each other.

If elements sit side by side, make sure they line up accurately.

Limit deliberate disruption of alignment to drawing attention to a key piece of information. Use sparingly.

COORDINATE COLOUR

USE COLOUR TO EVOKE FEELINGS
Colour is an amazing stimulant. Use it to evoke feelings that support your message.

Consider how you want a person to feel when they read your content.

Be mindful of the connotations associated with colour. Should you evoke peacefulness or stimulate energy?

Coordinate colour elements with the photos you used to illustrate your key points.

LIMIT ACCENTUATORS

USE EFFECTS WITH PURPOSE AND RESTRAINT
Use effects like drop shadows, blurs, etc., only where called for - where elements deserve to be given depth and distinction.

BE CONSISTENT

STICK TO YOUR PLAN
Carry your colour scheme throughout your entire design.

Visual elements should follow an established plan. All titles should be the same font and colour. Keep your look and feel consistent.

Margins, headers, titles, calls to action, images should have consistent treatment and formatting.
Photo by mikecogh

ORCHESTRATE HARMONY

VISUAL AND TEXTUAL SHOULD CO-EXIST HAPPILY
Images should complement words . . . and vice versa!

Consider (where appropriate) illustrating a concept to eliminate a text description.

90% of information transmitted to the brain is visual, and visuals are processed 60,000X faster in the brain than text. (Sources: 3M Corporation and Zabisco)



Whitespace

Please visit us on the web to read the full article and to download from our selection of free ebooks.

http://www.whitespace.on.ca/Blog/bid/100896/A-Beginners-Guide-to-Website-Ae...