A Beginners Guide to Website Aesthetics and Design Principles

Posted by Murray Sye

on Wed, Jan 15, 2014 @ 09:22 AM

Understanding great design principles is not reserved for Monet-level artists. As a marketer, think about the exact response you want from a visitor and use tools to elicit that response.



Even if you haven't been through design school, there are still some principles you can incorporate into your own website designs. In a HubSpot ebook "Design it Yourself: The Marketer's Crash Course in Visual Content Creation" , they include a list of the Ten Commandments of do-it-yourself design, which are adapted here to help you understand the first steps in addressing website visual design.

These principles are the first step to every great aesthetic experience. Following them will ensure that your design supports your overall brand goals, rather than confuse your visitors with contradictory site elements and colours.

Here's a Do-It-Yourself Evaluation Checklist:

1) Understand your content's purpose

  • Why are we creating this?

  • Who are we creating this for?

  • What need will this fulfill?

  • When are we creating this?

  • Where will we publish this?

Establish hierarchy

  • I made a list of all the key messages this piece of content should convey to the viewer.

  • I prioritized them based on importance by assigning them values (1–10).

  • Once the design was complete, I determined the final product visually conveyed the same order of importance.

3) Respect simplicity

  • My design is not too ornate or flashy.

  • I've eliminated all images and graphics that do not support the content's purpose.

  • My design makes the content easier to consume.

4) Keep it legible

  • The colour of text is not too light or too dark on top of the background color I chose.

  • I can read everything; no images or other objects in my design obscure the text in some way.

  • I don't have too much text crammed into a small space.

5) Provide adequate spacing

  • I have equal margins around my content.

  • All elements within my design are not too close to one another.

  • The negative (white) space in my design helps draw attention to the most important pieces of information I established in my hierarchy (e.g., titles or headings).

6) Align elements

  • All of the elements are positioned in a balanced relation to one another.

  • Any elements that sit side by side are placed on the same line.

  • If I've disrupted linear alignment, it's for the purpose of drawing attention to a key piece of information established in my hierarchy.

7) Coordinate colour

  • I considered what feeling I want the viewer to feel when choosing my colour scheme.

  • I was mindful of the connotations associated with the colours I chose.

  • I coordinated colours with any photos I included in my design.

8) Don't overuse drop shadows

  • I've applied a drop shadow effect sparingly.

  • I've applied a drop shadow only to pieces of information that deserve to be given depth and distinction.

  • Every drop shadow applied was done with purpose.

9) Strive for consistency

  • My colour scheme is consistent throughout the entire piece of content.

  • All visual or written elements that serve the same function have the same look and feel.

  • Margins, titles, headers, links, calls-to-action, photos, and images are formatted the same as their counterparts.

10) Harmonize visual and verbal

  • My images complement my words and vice versa.

  • I've considered illustrating a concept to eliminate the need for words.

  • My words and visuals do a better job telling a story when used together than either could do alone.

ScoopIt logoFollow our content curation channel, Inbound Digital Marketing with WhiteSpace for daily breaking news!

inbound marketing for small business

Flickr Photo Credit: by Jaffy4k

Written by Murray Sye

Murray is the CEO and Creative Director with the award-winning
Toronto HubSpot agency partner, WhiteSpace. You can
connect with Murray on Twitter, Facebook or LinkedIn.

Follow WhiteSpace

Join Our Mailing List