{"id":20361,"date":"2020-06-04T16:00:34","date_gmt":"2020-06-04T15:00:34","guid":{"rendered":"https:\/\/blog.marvelapp.com\/?p=20361"},"modified":"2020-09-03T11:19:03","modified_gmt":"2020-09-03T10:19:03","slug":"using-transparency-in-visual-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/using-transparency-in-visual-design\/","title":{"rendered":"8 reasons for using transparency in visual design"},"content":{"rendered":"

In 1890 the Milton Bradley Company published a historically significant manual on teaching color to children called Color in the School-room: A Manual for Teachers<\/em><\/a>. It was exceedingly scientific for a textbook on kindergarten-level education, tackling topics like color blindness and having an entire chapter dedicated to \u201cThe Demand for a Definite Color Nomenclature.\u201d<\/p>\n

Somewhere early in chapter 4\u2014 \u201cThe Theory of Light and Color\u201d\u2014one can find the following passage: \u201cIt should be remembered that no substance is wholly transparent, and no material absolutely opaque.\u201d<\/p>\n

\"Transparency<\/p>\n

In design, we often refer to transparency and opacity as similar things. Opacity is measured by how much light passes through an object. Objects with lower opacity allow more light to pass through them, therefore becoming more \u201csee-through.\u201d The more solid an object is\u2014the less light that can pass through it\u2014translates to a higher opacity.<\/p>\n

\"\"\"\"New Belgium Side Trip by Helms Workshop<\/a><\/p>\n

To establish a direct connection: The level of opacity is directly related to how transparent an object is<\/strong>.<\/p>\n

Designers often use opacity to create a sense of depth in design by translating the effects of physical transparency into layers of line, shape, image, texture, and color to achieve a graphic transparency, with the intended outcome of making two or more surfaces or objects simultaneously visible.<\/p>\n

\"\"\"\"Photo by cosasvisuales<\/a> on flickr<\/p>\n

There are an indefinite number of reasons we design with transparency: To create visual interest, to contrast elements, to create depth. Let\u2019s take a look at 8 reasons in action:<\/p>\n

1. Blend color and image<\/h2>\n

Starting off with inspiration from Milton Bradley\u2019s textbook: Experimenting with transparency channels is one of the easiest ways to introduce color into your imagery. Want to punch up a black and white photo? Add a color overlay. Need to standardize the visual branding of a product? Ditto.<\/p>\n

Compared to solid backgrounds, transparent color overlays can look softer while also adding depth. In the below example, a red color overlay was added to a series of photos to retain the product\u2019s (ESPN) branding colors, rather than let the teams\u2019 brand colors compete for attention.<\/p>\n

\"\"\"\"by Nathan Riley<\/a> for green chameleon<\/a><\/p>\n

2. Tell a story<\/h2>\n

Playing with color channels to produce monotone\/duotone images, holograms, glitches, and image distortions was identified as a design trend for 2019, in addition to double exposures. Using transparency to overlay multiple exposures of the same subject allows designers to explore alternate expressions, build a multi-level story, and create movement.\"transparency<\/p>\n

\"transparency<\/p>\n

Additionally, placing the subject facing right is a classic visual storytelling technique for creating forward movement.<\/p>\n

3. Create depth<\/h2>\n

The obvious benefit to using multiple layers of transparency is to stack elements to create depth. Layering different colors, photos, and shapes not only creates interesting visual effects, but allows you to create a sense of foreground and background in an otherwise flat medium.<\/p>\n

\"Transparency<\/p>\n

This sense of space is intensified when digital motion is involved, allowing designers<\/a> to push and pull content in different directions from the viewer.<\/p>\n

\"\"\"\"by Dannniel<\/a> for Marcato<\/a><\/p>\n

4. Define space<\/h2>\n

Sometimes, we only have so much space to work with. Transparency can be used to add additional layers to a design, create additional contrast between image and text, or both: Allowing multiple elements to occupy the same space through contrasting levels of opaqueness. Is your background or image too busy for text? Overlay a second, semi-transparent layer on top to create the contrast you need.<\/p>\n

\"Transparency<\/p>\n

5. Communicate states<\/h2>\n

The more you can see through an element, the more its tangibility decreases. Pairing \u201cbarely-there\u201d buttons, for example, with full opacity ones in a UI design can easily communicate the difference between on\/off or selected\/deselected states for a feature.<\/p>\n

\"\"\"\"by Oleg Frolov<\/a> in Interaction design<\/a><\/p>\n

With the rise of neuromorphic design trends to create clean, simple appearances in UI designs, adjusting transparency is a simple\u2014and minimalist\u2014way to communicate transitions.<\/p>\n

\"\"\"\"by Vadim Demenko<\/a><\/p>\n

6. Show off the goods<\/h2>\n

In consumer packaging design, utilizing materials with varying levels of opaqueness is a great way to showcase what\u2019s inside the package, giving the product a chance to sell itself. What better way to align with FDA efforts for ingredient label transparency than providing \u201ctransparency\u201d related to the package\u2019s physical contents. This is a technique that\u2019s also traditionally applied to print design. For example, layering transparent sheets of substrate to enhance the depth of a design and showcase content on the next page.
\n\"ShowingDesign by <\/em>Freddy Taylor<\/em><\/a><\/p>\n

7. Create a focal point<\/h2>\n

This is a pretty obvious\u2014and likely most important\u2014reason to utilize transparency (or any design principle, for that matter): To create a point of visual focus. Guide the viewer\u2019s eye by creating cutouts or windows for them to look at\/through, or use transparency to create contrast on an area of your design to draw attention to it. This is like adding a big pointing arrow that says, \u201cLook at me! I\u2019m important.\u201d<\/p>\n

\"transparency<\/p>\n

8. Overprint text and image<\/h2>\n

This one\u2019s my favorite, so I saved it for last. The ability to overprint colors on multiple passes is one of the most exciting features of the screen printing process that digital designers often utilize transparency to recreate.<\/p>\n

\"using<\/p>\n

\"using<\/p>\n

The interplay of line, shape, color, and texture is really on exhibition in these examples, and the equal focus of image and text adds a depth that comes through in the instability of the background\/foreground relationships.<\/p>\n

So before you use transparency in a design project, consider why<\/em> you are using it. And keep in mind that \u201cno substance is wholly transparent, and no material absolutely opaque.\u201d<\/p>\n

Originally posted on Jon's Medium<\/a> page.<\/p>\n","protected":false},"excerpt":{"rendered":"

Experimenting with transparency is a great way to add depth, create focus, and guide the viewer\u2019s eye.<\/p>\n","protected":false},"author":304,"featured_media":20390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-20361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n