{"id":1114,"date":"2023-01-20T04:57:53","date_gmt":"2023-01-20T04:57:53","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=1114"},"modified":"2023-01-26T21:03:51","modified_gmt":"2023-01-26T21:03:51","slug":"microcontrast","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/microcontrast\/","title":{"rendered":"Microcontrast"},"content":{"rendered":"\n

In art and design, the levels of details is closely related to the amount of visual interest in a piece. Rich details can help us transform something bland and banal into something amazing, and one way to add details is through what I call microcontrast<\/em>, which is the contrast within existing elements of your design.<\/p>\n\n\n\n\n\n\n\n

Break It down and Make It Quirky<\/h3>\n\n\n\n

If your artwork or design is lacking excitement, maybe it\u2019s due to the absence of microcontrast. Select a prominent element in your piece and see if you can break it down. Let\u2019s say that element is a word. Then we can break it down into letters. Next, add some quirks to the first or last letter, or any other letter you see fit, to make it more interesting. These quirks will add contrast and variation, and make the letter standout, thereby drawing the viewer\u2019s eyes. For our selected letter, we can make it larger, bolder, or modify its shape to add surprise. Viewers\u2019 eyes will stay on the piece longer because there\u2019s more information to pay attention to.<\/p>\n\n\n\n

Microcontrast in Handlettering<\/h3>\n\n\n\n

The idea of microcontrast can often be seen in handlettering. Take a look at the following piece by Chandra Larsson<\/a>. Notice how the initials B, R, and L all have exaggerated tails that make them unique and special. These tails even expand into nearby letters to integrate tightly with them and connect the whole piece. They are creating microcontrasts at the word level between letters. Without them, this art work would be a lot less interesting.<\/p>\n\n\n

\n
\"\"\/
A handlettering piece by Chandra Larsson<\/a>. Credit: https:\/\/www.behance.net\/gallery\/9491765\/The-Seventh-Letter-Summer-2013<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

Microcontrast in Windows Task Bar<\/h3>\n\n\n\n

Another good example that illustrates the use of microcontrast is the task bar designs in Windows Vista and XP.<\/p>\n\n\n\n

In Windows Vista, microcontrast is created through size and shape. The Start button is bigger than the other elements and sticks out from the task bar. Its circular shape makes it stand out from the flat, rectangular shape of the bar, creating a lot of visual interest.<\/p>\n\n\n\n

In Windows XP, microcontrast is created through color and shape. The green Start button contrasts it with the blue task bar, and its curved contour on the right makes it special compared with the flat and straight task bar.<\/p>\n\n\n\n

Though these designs may look a bit out of fashion nowadays as modern UIs tend to be flat without much textures, the principle remains the same: If we want more visual interest, introduce contrast in various forms at the appropriate level.<\/p>\n\n\n

\n
\"\"\/
The task bar in Windows Vista. Credit: https:\/\/forums.elementalgame.com\/374057\/windows-7-superbar-stomps-the-old-taskbar-part-1<\/a><\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"\/
The task bar in Windows XP. Credit: https:\/\/www.youtube.com\/watch?v=DZf1Kk6mqIs<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

Final Thoughts<\/h3>\n\n\n\n

Years ago, we discussed how to leverage contrast to create nice typeface combinations<\/a>. Microcontrast is the extension of that idea to visual design in general. Learning how to take advantage of it can help us increase the amount of details and visual interest in our design work, and make us a better designer.<\/p>\n","protected":false},"excerpt":{"rendered":"

In art and design, the levels of details is closely related to the amount of visual interest in a piece. Rich details can help us transform something bland and banal into something amazing, and one way to add details is through what I call microcontrast, which is the contrast within existing…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87],"tags":[],"class_list":["post-1114","post","type-post","status-publish","format-standard","hentry","category-visual-design"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/1114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=1114"}],"version-history":[{"count":5,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/1114\/revisions"}],"predecessor-version":[{"id":1123,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/1114\/revisions\/1123"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=1114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=1114"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=1114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}