Tag Archives: Graphics

Is Your Web Design CRAP?

I want to discuss some of the key principles of design. When I teach design to school kids I use the acronym CRAP for them to remember, which stand for: Contrast, Repetition, Alignment and Proximity. These terms come from the book The Non Designers Design Book. If you evaluate a design using these terms, you can see how they are almost always present in well designed sites and print.

Contrast – the difference in visual properties that makes an object distinguishable from other objects and the background. – Source: Wiki

Skelliewag Screenshot

Original theme used at Skelliewag Grid Focus

Skelliewag makes very good use of contrast. The dark text and page elements make them easily distinguishable from the background, and there is also a contrast in size used in the logo where the .org font is much smaller than that rest of the letters.

Repetition – repeat styles down the page for a cohesive feel. Source: Vitamin Features

Mosaiko Screenshot

Among other good design features Mosaiko makes good use of repetition. There is a button section in the side panel where the color of all the logos have been altered to keep the color scheme repetitive. The color scheme is consistent throughout. The article image header shape and size is repeated throughout. Font sizes and design are repeated also. Overall, a very effective site design.

Alignment – Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements. Source: Vitamin Features

Brian Gardner Screenshot

A strength in Brian Gardner WordPress themes is that they all seem to have very good alignment. Have a look at his homepage and any of his themes to see good use of alignment.

Proximity – Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different. Source: Vitamin Features

John Chow Screenshot

One of the main strengths of John Chow’s new theme is the effective placement of page elements, which gives the site good proximity. The four blocks visible in the screenshot show related objects grouped together effectively.

Final Thoughts

Evaluating your design work using the CRAP design principles is good way to double-check your work. If you constantly question the details of your design work, good habits will develop.


Social Media + Google to Find Free Blog Resources Easily

Using Google with some basic knowledge on advanced searching techniques you can find some high quality free resources which have typically been set up as digg bait on social media sites. The results of using Google over searching through the sites individually are much better, try for yourself by typing some of the following terms.

To search popular posts on digg type the following into Google:

  • site:Digg.com Free Icons
  • site:Digg.com Free Vectors
  • site:Digg.com Free Clipart
  • site:Digg.com Free graphics

This also works for other social media sites:

  • site:stumbleupon.com Free graphics
  • site:del.icio.us free icons
  • site:reddit.com free icons

The “site:” part of the search term specifies the site that you are asking Google to search and the rest is the specific search you want it to look for. Good Luck.


Free Stock Image Sites

It’s quite a difficult task to find clean, crisp, relevant, yet legal images to use on a Website. If you understand what copyright is you will know that you can’t just grab any old image you see on the web and place it on your own site. So where do you get images from? Stock photography is the answer for many web designers – well those that aren’t the sort that carry around a digital SLR in their bag anyway. The problem here for most small sites is that a good stock image doesn’t come cheap, and I hear you saying…”why pay when I can just download free images from the net”. Good question. To get to the point, your main concern here should be legality. I am certainly not going to trust any old “Free Clip-art download site” where you don’t so much as even see a legal notice or licence for the image you are getting. However I have found a few sources of free legal downloads of stock images where the licensing of the images is very clear. These photos are sometimes referred to as public domain images.
Free Stock Image sites:
SXC <- Has many free images, with some extra sharp premium paid images which cost.
Morgue File <- All free, a good source for images.
Dreamstime <- Has some free images, mostly pay images.
Image After <- All free images.
Vecteezy <- Very cool site with some free vector images, and sorted by licence type (source of bikini image above).

Good luck pic hunting.