Four Principals of Graphic Design – Lifehacker.com Evaluation

This week, I am reviewing the very useful software and productivity-related site lifehacker.com under the 4 pricipals of graphic design.

Lifehacker logo

Proximity

“Proximity refers to the distance between elements on a Web page and how the elements relate to one another”.

Lifehacker Homepage

By grouping related items together on the homepage, Lifehacker have managed to create a visually appealing page that uses the prinicipal of proximity well. Note the top links at the top of the page being grouped together, and note the individual articles being laid out after one another in logical fashion, with each article having a picture on the left, a description in the middle, and miscellaneous information on the right. A user can navigate through new articles every day in this consistent, logical page layout.

Alignment

Lifehacker Alignment

As we can see here from this screenshot, Lifehacker does a good job of aligning the different elements on one of it’s articles webpages. The different elements of the page, outlines in red above, line up nicely creating a nice, pleasant layout for the reader. The images in the ‘related articles’  on the right are nicely lined up also. The one element of the page that is not lined upto anything is the search box on the top right, this is alingned to the extreme right, which is consistent with most web users expectation of where to look for a search box.


Repetition

“The principle of repetition states that you repeat some aspect of the design throughout the entire piece”.

Lifehacker Repetition

As I’ve noted in the image above, some of the design elements that are kept consistent are the use of the dull green backround colour for highlighting white text in labels and titles, keeping the same sans-serif font throughout the whole website and keeping the article link layout the same for each article – note for example, the same timestamp, number of hits for the article and number of comments for the article are all in the same place and use the same logos in each article link. Again, I feel Lifehacker scores highly for consistency.

Contrast

“The principle of contrast states that if two items are not exactly the same, then make them different”.

Lifehacker Contrast

To highlight one aspect of where contrast is used, I’ve highlighted the different types of text above. Things to note:

  1. The big, bold article title
  2. The smaller, bold subheading
  3. The smaller, unbold text for the article content.
  4. The grey-coloured text for the heading on the right hand side.
  5. The grey box which makes the “#googlereader” tag stand out and differnetiates it.
  6. The slightly bigger text in black for the related article description.
  7. The tag cloud uses green text to differentiate the tage from other text on the page.

For more on the four pricipals of graphic design, see this article on C.R.A.P.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s