{"id":270,"date":"2013-02-14T15:14:34","date_gmt":"2013-02-14T15:14:34","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=270"},"modified":"2013-02-14T15:16:15","modified_gmt":"2013-02-14T15:16:15","slug":"transparency-web-design","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/transparency-web-design\/","title":{"rendered":"Using Transparency in Web Design"},"content":{"rendered":"

\"Using<\/p>\n

Creating a web design using transparency can be both beautiful and tricky. Transparency is the effect created when a color block, text or image is \u201cmade thinner\u201d or desaturated so that the color is diluted and what is behind it shows through.<\/p>\n

The effect can be quite stunning when executed properly \u2013 creating a great place for text or as a way to bring focus to a certain part of an image.<\/p>\n

Designers must be careful though when using transparency. The effect can be tricky to do well, as readability is often a concern. Transparent boxes and text at the wrong levels can also be distracting and take away from the overall design.<\/p>\n

Following is a set of dos and don\u2019ts \u2013 with examples of sites executing transparency beautifully.<\/p>\n

Do Use Transparency to Create Contrast<\/h3>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

The No. 1 benefit to using transparency as a design technique is to create contrast. The effect allows designers to establish a focal point with a clock of color, big text over an image or as a varying color screen with dimension.<\/p>\n

Transparency can also be used to help text pop off a background that may not showcase it as well.<\/p>\n

It is especially important to consider contrast when working with transparencies. A transparency will only work with both the image (or background) and text are readable. When considering a transparency effect, ask yourself: Will this make the text\/image easier for users to understand?<\/p>\n

Don\u2019t Cover Essential Parts of an Image<\/h3>\n

Transparencies should not cover parts of the background or image beneath it that is important to the message. Be aware of what is \u201clost\u201d when determining placement of transparent frames.<\/p>\n

Do Use Transparency in Varying Levels<\/h3>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

There is no perfect level of transparency. For some projects an 80 percent transparency is ideal; for others 15 percent may be best. Play with varying levels of transparencies for each project.<\/p>\n

Do Use Transparency in Small Spaces<\/h3>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Transparencies are not just for the main part of your site. This effect can work great in small spaces as well.<\/p>\n

Think about using a transparency to show off navigational tools or as a hover effect for buttons and clickable elements. Just try to not go too crazy with multiple transparencies. Pick an element and transparency style and stick to it throughout the site design.<\/p>\n

Don\u2019t Place Transparency Over Images with Sharp Contrast<\/h3>\n

Because of readability concerns, it is best to avoid using transparencies over items that already contain elements containing sharply contrasting elements \u2013 think pockets of black and white or colors that are opposites on the color wheel.<\/p>\n

Using a transparency over these types of elements, unless really saturated can have a negative impact on your design because it can be difficult to create the correct effect across all parts of the background. Consider a tint box instead.<\/p>\n

Do Use Transparency as Art<\/h3>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Transparencies are not just secondary effects. Consider creating a dominant image for your site using this effect.<\/p>\n

A large transparency can be a striking way to create contrast, emphasis and visual intrigue.<\/p>\n

Don\u2019t Use Transparency as a Decoration<\/h3>\n

Transparency is not an effect to add as an afterthought because you are bored with the design. Using this effect as a decoration is a surefire way to get into a design pickle.<\/p>\n

The use of transparencies should be planned and thought out in advance. Transparency is not a simple effect such as bolding and can look sloppy and unprofessional if not done well.<\/p>\n

Do Use Transparency in the Background<\/h3>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Transparent effects are not just for elements at the forefront of your design, this effect can be used on background images as well. Some of the best transparent elements are subtle.<\/p>\n

Other transparencies may fall in between image layers. Tony Chester\u2019s site for example uses a brilliant set of layering techniques with transparency to create a multi-dimensional design.<\/p>\n

Don\u2019t Use Too Many Transparent Effects Simultaneously<\/h3>\n

Limit use of different type of transparent effects to one per project. Transparencies should create distinction, contrast and visual interest. Using too much of a distinctive effect such as this one can be distracting for users.<\/p>\n

Do Use Transparency with Still and\/or Rotating Images<\/h3>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

The use of transparencies is not limited to a single-page or still design. They can also work with varying images and backgrounds. Use transparencies in both ways.<\/p>\n","protected":false},"excerpt":{"rendered":"

Creating a web design using transparency can be both beautiful and tricky. Transparency is the effect created when a color block, text or image is \u201cmade thinner\u201d or desaturated so that the color is diluted and what is behind it shows through. The effect can be quite stunning when executed properly \u2013 creating a great […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[3,10,6,7],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/270"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=270"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/270\/revisions"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}