Texture is one of the best ways to add depth and life to any web design. When used carefully, it can help create an expressive and organic experience, but when over-done, it can lead to tacky mess.
Itâ€™s not easy to strike the perfect balance, but when you do, something very natural and memorable surfaces. Thereâ€™s tons of variety in the way textures can be used by web designers, but overall the results tend to fall into 3 categories: photographic, pattern or simulation. Each type has its own purpose, and itâ€™s up to you to decide which one you like best for which project.
Check out this list featuring some of the best examples of texture in web design:
Poco Peopleâ€™s gigantic photo background serves a few different purposes, namely to introduce the team, set the mood and hint at where theyâ€™re from. Near the top and bottom of the design, the background functions more abstractly like a texture (instead of a clear photograph), as it blurs and fades to balance visual interest and distraction.
âž¤Â Â Poco People
As we said in our article on minimalism, Christopher Meeks, a freelance web designer from St. Louis, presents only the essential bits of information in stark white over a beautiful grainy photograph. While some details are hard to find due to the navigationâ€™s simplicity (try clicking the arrow on the right of his logo for more information), thereâ€™s never a frustrating moment of usability failure.
âž¤Â Christopher Meeks
Pablo Gonzalezâ€™s portfolio showcases the possibility of photographic textures. The subjects of a photo arenâ€™t the focus, but the aesthetic value is still there.
âž¤Â Â Pablo Gonzalez
As we said in our roundup of 9 gorgeous examples of black and white websites, Blissfully Aware is a cross between a collage and an appendix.Â Josh Laneâ€™s site showcases a perfect use of space, making it easy for the eyes to bounce around from heading to heading.
âž¤Â Blissfully Aware
âž¤Â Â Wearable Print
âž¤Â Amazee labs
Hugs for Monsters shares a similar appeal with Amazee Labs, but with a more modern feel. Itâ€™s very illustrative, with a texture pattern that carries on throughout the entire page.
âž¤Â Create Digital Media
BERG Cloud, of Little Printer fame, shows off itâ€™s minimalistic roots with a balance of subtle textures and solid colors.
âž¤Â BERG Cloud
Simulations & Illustrations
âž¤Â Â Kaleidoscope App
Pointless Corpâ€™s wood background is just right. Simulated textures with the intention of looking realistic can easily beÂ messed up, unless they are dead on.
Electric Peelâ€™s design (created by Ryan Scherf) has a perferated leather-like header background, with a neon-banana body background. Thatâ€™s right. Neon-banana.
âž¤Â Electric Peel
Bloom Healthâ€™s page (also by Ryan Scherf) follows a formular similar to Electric Peel, but with a calmer approach. The wood isnâ€™t hyper-realistic, but feels right behind the casual, cutÂ and pasted illustrations.
âž¤Â Bloom Health
Polargoldâ€™s subtle illustration falls right into the background, making it less about the objects and more about the mood it sets for the entire page.
Throughout all of these awesome examples, balance is key. Busy elements, like the animations onÂ Create Digital Mediaâ€˜s site, have to be met with calmer backgrounds, whileÂ Amazee labsâ€˜s letterpress inspired design creates visual interest with texture in the forefront. No matter what styles you embrace, itâ€™s important to use texture with restraint.
With these sites for inspiration, itâ€™s hard to deny that texture can be used to create an amazing design â€” so long as itâ€™s in the right hands.