Web Design Starter

13. Sameness & Difference

Transcript

This is perhaps one of the key and fundamental concepts that I use in all design that I do. I’m often thinking about it as I design. Great design has both sameness and difference. Another way of saying it, is great design has both consistency and contrast.

Too much sameness, something can be boring and plain. Too much difference we can have something that’s chaotic, unbalanced, and difficult to decipher.

1. Sameness or Consistency

Consistency provides a unifying feeling where you know things go together. It makes a design clean and easier to follow By uniting elements and always treating the design of certain things in the same way, we leads ourselves towards a style guide. It keeps our designs tied down so we aren’t all over the place.

The most important buttons are always this color.
Secondary buttons are always this color.
Success messages always look like this.
Error messages always look like this.
Links are always this color.
Body text is always this color and this size.
Header text is limited to these sizes and this font and is always this color.

You can see how, establishing this consistency is creating a style guide. This particular style guide that you are seeing, is pulled directly from what I’m using on the scottusrobus site.

2. Difference or Contrast

On the hand if consistency ties things together, contrast makes something stand apart. This can server the purpose of drawing one’s eye in. It can strongly communicate because it stands out. Break the sameness with difference. Bring highlights that can make an otherwise plain design more attractive or interesting.

Contrast is achieved by the juxtaposition of elements and there corresponding shapes, textures, colors, value, size etc. You create high contrast when there is more difference between these elements.

In particular, size and color play a strong role in creating strong contrasts. Lots of similar colors, with only one thing with a very different color. You are drawn in to that particular color that is different. Lots of similar sized text and white space, with only one line very large, you are drawn into that line of text.

You’ve already seen in both the hierarchy and color harmony lessons how I’m using size and color to create contrast on the Scottus Robus site. The blue buttons stand out in contrast to the whites and grays around it. The orange yellow flags stand out, both in contrast to the whites and grays and the blues (as a complimentary color). Large and bolder text stands out from surrounding text. Blue Links stand out from regular text.

Sameness, gives a basis of consistency. It establishes a unifying environment that leads us towards creating a style guide. From that, we can use splashes of color, contrasting shapes, large type, etc create difference and to thereby highlight and create interest to draw the user in.

As we mindfully use our understanding of sameness and difference we can create interfaces that are both easier to use and enjoyable to look at.