C.R.A.P — haha

Jenn: Contrast & Repetition

Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative.

Good contrast can make sites appear crisp and organized, whereas poor contrast blends it all into an incoherent mass of RGB values. Contrasting elements allow for the user to figure out which page areas are related and which are totally separate, so make sure to differentiate your elements and page sections.


Repeat styles down the page for a cohesive feel — if you style related elements the same way in one area, continue that trend for other areas for consistency.

The repeating nature of weblog entries down a page lets you control how the user’s eye is guided down the layout of your site, and the correct spacing and design is crucial or else entries will cram into each other (poor Contrast), users won’t be able to find key elements (poor Repetition), or in the worst consequence, readers won’t be able to read and comprehend your writing as well as they should. The repetition of design elements down a page reinforces their meaning to the user, as well as letting the designer organize the layout in a cohesive manner.

The goals for having the same typographical choices for both body copy and headings are 1) reinforcing their meaning within their context (headings in blog entries vs. headings above link lists), and 2) it’s cleaner and more visually consistent with the rest of the site. By repeating styles with similar significance/meaning across various areas of the site, I’m allowing the user get acclimated to this meaning which lets them browse the site more easily.



1. Contrast
The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page.

  • Can you see the difference between your content, ads, headings, body copy and comments?

2. Repetition
Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develop the organization and strengthens the unity.

  • Do you have a consistent theme or brand throughout your site? Do you reuse the same colour, shapes, blockquotes, formatting for all of your articles?



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

Repetition – repeat styles down the page for a cohesive feel



Leave a Comment