Web Design Subtleties: Texture
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.
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.
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.
Culinary Culture
This subtle background texture correlates nicely with it’s dining-theme.
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.
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
Add your comment!
Just a little texture makes things really pop. Nice examples.
Thanks!
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.
Thanks for the kind words Sky. Very well said- great summary.
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!
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.
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/