How To Use Contrast in Web Design: Tips and Examples

How To Use Contrast in Web Design: Tips and Examples 3

Illo is a small, eclectic design studio based in Turin, Italy. Their About Us page combines many contrasting elements and media-types: illustrations, wide photographs, rows of texts, square portraits with colored backgrounds, and an all-encompassing combination of rounded black text on a solid white background. 

What caught our eye among the rich variety of page content is the body of text at the very top, which includes a short paragraph of three sentences. Three contrasting relationship exist within six lines alone, the most unique being the animated word “diverse”. These letters are in color, as opposed to the rest of the black text. Not only are the color-changing letters animated (juxtaposed with static text), but there is a contrast between the letter colors themselves. 

The choice of which word to highlight within the paragraph is also no coincidence, as the color-changing effect happening within the word illustrates the diversity of colors, akin to the studio’s diverse team. 

Tip: Identify your target audience. Which types of media or elements will they be most comfortable with? Will your message be better conveyed through modern illustrations, or are real photographs the most effective route?

This article was originally published here.


Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
Critical Vulnerability Patched in WooCommerce Upload Files×536.jpg On December 29, 2020, the Wordfence Threat Intelligence team was alerted to a potential 0-day vulnerability in the WooCommerce Upload Files plugin, an add-on

Read More »