CRAP Analysis of a Random Site

A commonly used acronym for basic elements of web design is CRAP:

Contrast
Repetition
Alignment
Proximity

The website up for analysis today is http://trafficsafetyteam.org/. This is a site that I formerly webmastered until about 4 years ago. I used a very basic WordPress theme. It looks like the new webmaster has really modernized the look and feel which is big improvement over my old basic design, though it is a bit busy as you’ll see in my analysis.

CRAP Analysis:

Contrast: The background is white, or very close to white. Not very original, but makes for good contrast, especially since they went with blue for many of the font colors. If recall correctly, I think blue was one of the colors that had some issues with being seen correctly by colorblind folks. The navigation bar at the top and icons are a soft gray color; these could be darker for better contract. I like the dark inner-body horizontal menu of icons; they stand out against the white with the prevalent use of black inside the icon. The 4th icon is especially noticeable, as the bottom is outlined in black. I would suggest for all these icons to be outlined in black. The logo of blue and brown against a light brown background for a header bar could have better contract. Perhaps a lighter brown background or some dark shadowing of the text portion.

Repetition: The logo, navigation menu and social media icons all remain in the same position across pages. This top navigation area does a neat squish up into the top and remains visible when you scroll down, which is very handy since there is A LOT of items listed on the main page. A footer with copyright information and a “back to the top” image is repeated on all pages.

Alignment: The main page has a lot of items listed with a long scrolling bar. I would not want to scroll across miscellaneous items trying to find something if I were actually interested in finding something on this page. At first glance these all run together, but upon closer inspection, there is a very faint light gray horizontal rule between each item. If you click on Safety Campaigns then Occupant Protection, things are left justified (same jumble of listed items), but then if you click on Safety Campaigns then Child Passenger Safety, it is more center justified instead of left. My suggestion would be to model all pages after the “About Us” page, with a clearer separation of items listed, and cleaner with less different heading colors and sizes, and less images.

Proximity: There does not seem to be a pattern for proximate; everything is fairly close together with no obvious separation of topic areas on a given page (other than the cleaner “About Us” page. Images are close to their given topic, but all topics are very close together so different topic beside each other are close enough to look like they go together when they don’t.

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s