Look around you. What do you see? If you are work or at home maybe walls, a desk, your bed, wooden floors, carpets, or if you are outside maybe you are lucky to be looking at sand, trees, all kinds of building. Now look closer. What do all these things have in common? Texture. Texture is on everything and everywhere around us in the “real world” and helps give things a new dimension, a feeling and life. Why should the online world be any different? Just because your screen is flat and smooth it doesn’t mean everything you look at on it should be as well.
Despite current trends in flat design, texture is still very much a key element of web design and it’s come a long way in a short time. It doesn’t take much more than a quick online search to find hundreds, if not thousands, of amazing looking textures to use on your design projects – a lot of them free!
Without textures web design would be a boring flatland full clean lines and one dimensional, missing out on personality and stimulating visual experiences. But what exactly are textures?
Defining “Texture”
According to the dictionary, texture refers to the feel, appearance or consistency of a surface or substance. As when it comes to the web we can’t actually feel the feel or consistency, we rely on the feelings of texture that the appearance of something gives us. Now, textures are not patterns or background images. Patterns are for the most part simple and small repetitive images (think polka dots and stripes). Background images on the other hand are the complete opposite – they are not repetitive and usually come as large detailed photos or illustrations. They might convey a feeling just the way textures might and include textures within them, but for the sake of clarity, they are not textures in themselves.
In order for something to be a texture, its appearance has to be complex and random, yet relatively subtle – textures add to a website’s design, they are not THE design. Different websites might use texture in different ways to achieve whichever effects they are looking for – from the barely there minimal textures, to all out life-like textures. Let’s look at the possibilities of textures.
Texture Types
Textures can be divided into 2 main categories: life-like and noise.
Life-like textures
As the name implies, life-like textures create the illusion of real life objects within the digital world. This could be in the form of concrete wall textures, metallic-like textures, wool, paper, skin and anything else you can imagine that you can physically touch in your life. Life-like textures are a great way to convey a brand’s personality and give power to a message by giving it context.
Image may be NSFW.
Clik here to view.
The example below belongs to Le Café des Stagiaires, an extremely popular French cafe and bar among the Shanghai expat community. With a young, unpretentious personality, using a chalkboard-like texture for their locations, reflects the laid-back attitude and homely atmosphere they want their customers to enjoy every time they visit them.
Clik here to view.
Le Café des Stagiaires Location Footer with a Chalkboard Texture
Noise
Noise is the most popular use of texture. Think of grainy textures or abstract non-pattern like backgrounds where one color is texturized through using light and dark variations of it. It’s subtle enough to not distract from the main message, concept or design, but meaningful enough to add depth and interest to something that might have ended up looking rather flat, boring or – at the other end of the spectrum – overwhelming. Despite its name, noise should be pretty much undistinguishable within the overall look of the website’s design. It should be that X factor that makes a difference without people being able to fully point out what it is.
Image may be NSFW.
Clik here to view.
You might have trouble seeing it, but the image below from Villebois‘ online shop has a very subtle, abstract “faded fabric” background that gives what would be have been a plain grey background, a more interesting, visually appealing look and feel without overwhelming the design with any life-like features. At the same time, it reflects the company’s brand message of high quality pure materials in their shoe production.
Clik here to view.
Villebois’ Noise Texture Background
Why Use Textures
Done right, textures can accomplish lots of things for the overall website’s design concept. The key though, is in “done right”. Textures are pointless and a waste of time without a purpose. Like with any element of web design, “looking pretty” isn’t a good enough reason to use them. What is it that you are trying to achieve with textures? What message/feeling/atmosphere are you trying to create and convey? All of this has to be defined before you start playing around with texture options.
So what purpose do textures have?
Add visual interest
Looking at the design, Urban Thai‘s website could easily be done in solid colors only, but the textures that were added to the navigation menu and header definitely give it a more polished and lively look, while playing a nice supporting role in the overall visual identity of the restaurant.
Clik here to view.
Urban Thai Textured Homepage Header
Create contrast and highlights
The landing page for The Farmer & The Chef, a fundraising event series, showcases beautifully how textures can be used to highlight important elements within a design – specially in cases like this with busy or colorful backgrounds. The Farmer & The Chef used brushed paint textures for their buttons with chalk writing for the arrow buttons. Great combination of textures that highlight their call to actions.
Clik here to view.
The Farmer & The Chef Textured Buttons
To make a statement
The YSL site below shows a much more striking, in-your-face use of life-like textures and makes use of the “substance appearance” aspect of textures. It makes a great statement and perfectly sets the atmosphere for the launch of their new lipstick collection, making the design look luxurious and highlighting the white content on its bright background.
Clik here to view.
YSL Liquid Textured Background
Enhance the theme and personality of a website
Jarritos is a naturally flavoured Mexican soda company, whose website couldn’t reflect their Mexican roots any better! The painted concrete background that runs along the entire website, covered on Mexican-themed “graffiti” gives the brand a very “barrio” (neighborhood) kind of feeling. Imagine the same website with a wool texture background…it doesn’t work does it? That’s the power a texture can have on a brand’s identity.
Clik here to view.
Jarritos Concrete Textured Background
Doing it right
As with most things in life, when it comes to using textures, it is crucial to finding the right balance. Here are our 5 commandments for proper texture use:
- Make it legible – texture should enhance your message, not make it harder to read. Content comes first.
- Less is more – as we’ve seen, textures are best used subtly and with a purpose. There’s no need for every element in your design to be texturized, or to have a ton of different textures all at once.
- Keep your purpose in mind – what do you want texture for? “To make it look prettier” is not the answer you are looking for. Texture should highlight the right parts and tone down less important ones.
- Quality above all – If you are going to use life-like textures or have a design where texture is front and center, make sure that the quality of it is as high as possible. It might make your website heavier, but you should never sacrifice quality for a couple of milliseconds of loading time.
- Keep the harmony - If you are going to use multiple textures in your web design, it is a good idea to ensure they complement each other. By keeping geometric shapes, angles and scale similar, the result will turn out to be harmonious and non-overwhelming while adding a little extra wow to your website. If you only use one texture, contrast helps balance elements and allow them to stand out.
Creating Textures
Now that you’ve seen what textures can do, you are probably wondering how you can get your hands on some textures for your own website. Well, there are a couple of ways.
If you are a design enthusiast or don’t mind playing around with tutorial until you get it right, then Photoshop is your first stop. With all its features, you can create endless combinations of textures to bring any website to live! Some might be easier to do than others but we found some pretty cool tutorials by Tuts+ on how to create different types of textures for your projects.
Now, if you aren’t quite as tech inclined, you could always go the photography way. As we stated right at the beginning of this article, textures are everywhere around us. Need a cork board background for your website? Take a close-up picture of one. Need a cool granite texture? Go to your kitchen and take a photo of your counter. It’s that simple! Just make sure you have a good quality camera, nice lighting and the right combination of colors and textures within your image. You will most likely still need to make little tweaks here and there, but at least you won’t be starting on Photoshop from scratch.
This might sound a little weird but your scanner is also a great source of textures. All you need to do is grab a real life object whose texture you like and scan it. It could be a crumpled piece of paper, tree leaves, even skin or hair (We are in no way saying you should kill anyone to do this, so please use your own!). Once the scan is done, you can manipulate the image in any way you want and turn it into a cool unique texture.
The last option in case you don’t want to make your own, is to search websites such as Smashing Magazine, ONEXTRAPIXEL or Pinterest for tons of high quality free textures available for download. Doing it this way, you can be sure you will get a great variety and good quality, although it might now be as exclusive as some would want.
Conclusion
Whichever option you choose, please make sure there is a purpose for your texture, that it adds just enough to your design to make it better but not overwhelm it and that your message and brand are reflected in it. If you keep this in mind, your results will be stunning!