The background for any site can vary from massive photos with a layer over top to beautiful textured website designs. Knowing how to add texture to a look without letting it overwhelm the aesthetics of the page is a skill worth learning. One of the best ways to learn how to incorporate texture into design is to look at texture on a variety of site types.
Although a big number of sites use texture in their designs, not all of them are worth learning from. Texture can be done really well or it can obscure the text on the page. There must be a balance between the background and elements on top.
Learn From These Examples of Textured Website Designs
There are around 1.1 billion websites around the globe. While a mere 18% are active at any given time, or around 202.9 million, there are still tons to choose from and study to see how to best incorporate texture.
The best examples tend to come from a wide variety of industries. While some niches tend to utilize similar designs with minimalistic design or similar product page layouts, texture can give each business a unique look.
After studying dozens of sites in a variety of industries, a few specific designs stood out. Check out these textured website design favorites and why they work so well. See what ideas to incorporate on a business page.
1. Mad River
Source: https://www.madriver.co.uk
Mad River uses an illustration to add some texture to the web design. The effect is rather subtle but note the texture on the mountains and in the clouds. Even the trees have lines indicating the texture of tree bark. Although the background has the effect of a sketch, it also takes on a more realistic, three-dimensional look thanks to the strokes on the snow-covered mountains and the clouds that almost look real.
The background for this site proves designers can add texture to any type of image. The elements can be slight and still make a noticeable impact. Illustrations can sometimes come off as flat, but the strokes in this one give it a custom look.
2. Creative Materials Corporation
Source: https://www.creativematerialscorp.com
Creative Materials Corporation utilizes textured web design through the images on the site. By sharing the elements from their spring and summer collections, users see wood grain, wallpaper, tiles and wallpaper patterns.
Don’t be afraid to utilize more than one type of texture through product images. It’s also okay to incorporate more than one type of texture in a design. Consider how each image works with the next in a design. Do they play on one another and keep the user moving through the buyer’s journey to the next point on the path?
3. Boudin Bakery
Source: https://boudinbakery.com
Boudin Bakery uses the slightest subtle textured background on their homepage. If you zoom in, you can see that it looks almost like a plaster wall behind the sandwiches. Most people won’t notice the texture. However, it does make the food selections pop on the page as well as the call to action (CTA) button.
There are other areas on the site where the designer pulled in some texture. For example, the wood background in the rewards area, the texture of the bread on the sandwiches and the horizontal line at the top of the footer.
It’s okay to mix and match styles on a page. Have some areas with a flat, solid color and some with textures and different tones and variations. The human eye will naturally go to the textured sections, so consider which information is most crucial to the buyer’s journey and where to place it for maximum impact.
4. Fundo Los Paltos
Source: http://www.fundolospaltos.com.pe/es
Fundo Los Paltos uses an antiqued paper look for their textured website design. Using a paper looking texture gives sites a rather vintage look and works particularly well for websites selling journals, some types of books, educational sites and vintage looks in clothes and household goods.
The look of old papyrus tends to be a tan color. Still, put a distinct personality to it by tinting it with blue or pink. Think about what users will respond to. Don’t be afraid to tap into the emotional side of the color wheel and select textured tones based on the feelings the brand wants to evoke.
Around 85% of shoppers use color to help make buying decisions. One color of the CTA button over another can increase conversions.
5. The License Lab
Source: https://blog.licenselab.com
The License Lab uses a bit of texture in the header to set the tone and imitate the look of black leather. The result is a strong, bold look that speaks of established music and a company made to stand the test of time.
Adding texture to a design can be as simple as using a bit of texture on an image or two or in the header of the site.
6. Zevia
Source: https://www.zevia.com
Zevia uses texture and three dimensional effects in the photos included on the site. However, they also add a bit of texture as a paint stroke across the bottom of the top fold. See the white texture overlapping part of the headline and the image of sodas to the left? The texture also moves the eye toward that area and on to the CTA button titled “Start Sippin’.”
7. Ripe Planet
Source: https://ripeplanet.com
Ripe Planet uses a texture that is almost like a terrain map design. The effect is subtle and one doesn’t notice it at first glance. However, it gives the impression of people interested in investing in the planet and matches the mission of the organization.
Companies should consider what types of background textures best match the mission of the brand and incorporate those into the background image design.
8. The Exchange Pub + Kitchen
Source: https://exchangeforfood.com
The Exchange Pub + Kitchen uses texture for their page title. Note the font and how it allows bits of the building in the image to peek through the title. A few other places on the homepage pull in texture, such as in the transitions between one section and the next. A swipe of texture across the page and lack of straight lines shows the restaurant is fun and informal.
9. Visit Humboldt
Source: https://visithumboldt.com
Humboldt County, California is home to the redwood forests. The design of the site hones in on the textures related to the trees. The hero image is of the forest and one can see the grain of the wood on the trunks of the trees in the photo.
As one scrolls down the page, they see the hero image transition into a white background. A bit more texture is added with the dabbed look of fern outlines. In the footer, the background has some texture that looks like the inner rings of a tree.
Add a Little Texture and Then Expand
The best way to incorporate texture into a website design is to start small and expand. Add a bit of texture here and there and see how users react. If something in the design isn’t working, pull the texture back out and do some testing to see if the CTA button pops more or users like the look better. Texture can be used to draw consumers in and actively engage them. Design, test and repeat until the conversion rate improves.
Eleanor Hecks is editor-in-chief at Designerly Magazine. Eleanor was the creative director and occasional blog writer at a prominent digital marketing agency before becoming her own boss in 2018. She lives in Philadelphia with her husband and dog, Bear.
