Blog
the flutter author num is: SELECT post_id FROM wp_postmeta where meta_key = 'wp_user_id' AND meta_value = '12'

Web Design Subtleties: Texture

Design Web Design Subtleties By Adam Kopec Nov 12th |

The subtleties of web design often go unnoticed by the average user. From single pixel lines to nearly indiscernible color gradients and texture patterns: every detail in website design ultimately affects how the user perceives the quality of the site, and sometimes without the user even realizing it! In the end, it’s those subtleties in web design that separate the “good” from the “great.” (Check out Andrew’s article at MyInkBlog.com)

Below are some examples of websites that effectively use textures that you may not have noticed.

Snook.ca

Can you see the subtle noise in the tan background? This effect brings additional depth and life into his design.

Snook.ca

Thisisgrow.com

You have to look closely, but do you notice the hatch pattern separating the main content from the secondary content? This subtlety divides content and creates a platform to display content.

thisisgrow.com

VersionApp

You have to scroll down a bit on this one. Check out the texture on the gray surface – notice how nicely it compliments the large graphic? The texture helps keep a correlation between the hyper-real forefront graphic and the rest of the content.

versionsapp.com

Culinary Culture

This subtle background texture correlates nicely with it’s dining-theme.

culinaryculture.com

Ate Bits

This one is a bit more obvious. It helps make the website look more “real” – creating the illusion of being able to reach out and touch it.

atebits.com

Now these examples are not to say that adding a textured background is the answer to every great website’s design (see: Vimeo), but maybe the next time you visit a well-designed site, you’ll notice some of the subtleties of its design and even see elements you hadn’t before.

Do you know of any other sites that quietly use textures to enhance their design?

Love to hear you thoughts below!

Author: Adam Kopec

Before working as the tallest Graphic/Web Designer at VaynerMedia, Adam graduated Boston University with a degree in Art Direction and Psychology. A native New Jersian (exit 135), Adam spent most of youth playing music in crappy metal bands before he realized being a rockstar wasn’t his calling. When he’s not making internet things, Adam likes to spend his time wooing the ladies with his guitar and snowboarding out west.
  • http://www.online-guitar-tuition.com/ The Guitar God

    Just a little texture makes things really pop. Nice examples.

  • Sky

    Couldn’t have said it better myself, Texture is one of those small subtlities on a website that determines whether or not a user likes the site, without the user evening realizing it. It’s also one of those elements that some designers often overlook and forget to play with when trying to pull a design, web or otherwise, together.

    Sometimes a designer may like the color palette and the general look of his/her design, but will feel like it’s “just not complete”, like there is something missing. In those instances, it’s often beneficial for a designer to begin to play with texture, either in the foreground or the background of the design, to see if that’s the missing link to pull it all together. A lot of times, texture is exactly what’s needed to add the subtle touch that makes a design “just feel right.”

    The real bottom line, I think Adam’s saying, don’t underrate the subtle elements of design, they can have the biggest impact.

  • http://vaynermedia.com Adam Kopec

    Thanks for the kind words Sky. Very well said- great summary.

  • http://vaynermedia.com Adam Kopec

    Thanks!

  • http://mrgeesbigcircus.posterous.com/ Paul Gordon

    Great article! I think the watch-word is in the title: subtleties.

    Textures, gradients, rounded corners, blah blah blah. To some it’s essential to use (and over-use) these techniques to make a website truly “2.0″, but it takes a good eye for design to know when and when not to apply these styles.

    Tres bon!

  • http://www.facebook.com/people/Adam-Kopec/923240 <fb:name linked="false" useyou="false" uid="923240">Adam Kopec</fb:name>

    Thank you very much Paul! Totally agreed.

    With every project, I learn something new! I always try to be as particular as possible with my textures/gradients. Because while they look great, as you said, its very easy to over do it. Properly using texture is something that takes lots of practice to perfect.

  • http://www.facebook.com/people/Shaun-Chapman/72400389 <fb:name linked="false" useyou="false" uid="72400389">Shaun Chapman</fb:name>

    I totally agree that adding textures can change the perceived quality of a site.

    I used your tip in the redesign of my blog. What do you think? http://shaunchapmanblog.com/

  • http://vaynermedia.com/2010/05/anti-aliasing-your-best-and-worst-enemy/ Anti-Aliasing: Your Best and Worst Enemy

    [...] post was more or less a reverberation of one of my previous articles, Web Design Subtleties, where the attention to detail is major play in making a design really [...]

blog comments powered by Disqus

Copyright 2009 - 2012 VaynerMedia