Contrast Section
graphic by Beverly Singleton

Similarity

There are many ways you can apply similarity to your website in order to create unity and to move towards a brand that's recognizable. In order for branding to be branding, it needs consistent elements that will immediately tell your audience or consumers ``Hey I know that design it’s__'' Consistent elements include and definitely aren’t limited to things like color, shapes, font-families, and even the spacing between these elements. When done successfully, if any of these things are off your audience will feel that for better or for worse.[2]

Consistency

So, if you're designing a website with lots of labels and headers accompanied with bodies of texts that go into more depth, it might serve you good to keep stylistic elements consistent. If you've made a navigation button 3 px in height, they should all be 3px in height. If you Headers are helvetica bold in a light blue, then that should stay the same whenever a new header is introduced. Not keeping these elements consistent can be confusing or maybe just distracting to the viewer. Instead of your amazing article about 3D design being absorbed by the reader, suddening they are concerned with unnecessary things. Like the image below (fig.1), just because it's interesting to add an element you may favor, doesn't necessarily mean it makes sense to. Just because you can, doesn't always mean you should.

fig. 1, graphic by Beverly Singleton
Contrast

This rule can obviously be broken if it serves a purpose that doesn't hinder your branding or distract your audience. When you've established a consistent branding, it actually becomes much easier to create contrast and emphasis. For instance, if there's a sale on your website or maybe you want to distinguish between old and new website content, perhaps you could use pink rather than the usual green to border an image. Maybe your typical serif font is replaced with a more scriptive one to show that this content is more gentle or whimsical. Due to the fact that you established a solid branding foundation you can break and bend that where you wish to sway your viewers' attention.[1]

fig. 2, graphic by Beverly Singleton
When to Use

However, it's important to know the difference of incorporating contrast for effective emphasis and changing your brand's style. I personally believe it comes down to how many elements you change at once and how drastic the change is. Maybe you only change color, but the color of what you change is very dramatic and instead of being effective, it's now distracting or confusing as to how it fits into your web design and its purpose. So rather than adding an effective use of contrast to draw you viewer in, you’ve gone outside your branding and have become less recognizable.

Here's more general ways to incorperate similarity and contrast:

graphic by Beverly Singleton
Consider angles/negative space
graphic by Beverly Singleton
Consider abundancy/alignment
Back To Top


Refrences

1. Jones, Henry. “The Principle of Contrast in Web Design.” Web Design Ledger, 3 Feb. 2010,https://webdesignledger.com/the-principle-of-contrast-in-web-design/.
2. Cao, Jerry. “5 Brilliant Examples of Effective Contrast in Web Design.” Vandelay Design, 14 Jan. 2016, https://www.vandelaydesign.com/contrast-in-web-design/

© Copyright 2020 Beverly Singleton| New Media Design