One of the most compelling ways to give a website a warm, inviting atmosphere is to incorporate textures. There are a couple reasons to do this. First of all, it can be really helpful to disconnect from the technical nature of the web. Say you’re a web design agency and you find that one of the things you do best is engage non-technical clients. Using fabric textures in your site design can be a great way to reinforce this message. Or if the site’s focus or product is related to fabrics in some way—think fashion, lifestyle, home goods, crafting—the theme can help communicate the purpose.
As you’ll see here, the ways fabric textures can be implemented are endless, and the results can be sleek and elegant or fun and casual. Let’s dive into the examples and see how they work.
This site is for an agency that builds websites. I love that the fabric-based design makes the shop feel friendly, like it’s just a bunch of normal people you can talk to. They definitely don’t come off as ubersnobby designers obsessed with their design brilliance. Very effective, when you consider how simple and clear the message is.
The overall atmosphere is radically different here: This site immediately comes off as playful and fun. When you take a closer look, you realize the site is for a television production company. My first reaction is that type of work must be rather dull, but this stylish site goes a long way to quash my assumptions.
This website shows there’s plenty of room for variety when using fabric textures: They’ve got linen, leathers and ribbons. What I really love about this site, though, is how they use the style subtly. The fabrics are a prominent part of the design, but it doesn’t beat you over the head with them. Instead, the real focal points are the content and action items; the fabrics are there to provide a beautiful framework.
The web has gone crazy for ribbons lately. Give me a minute, and I could easily find a dozen more sites that use them. I’m not saying it’s overdone, but it’s a very popular visual element right now. I love them when they’re used to highlight something important—in this site, the 3D nature of the ribbon pops out of the page.
It might be hard to imagine fabric could be used to reinforce the style of a cupcake company, but that’s exactly what is happening in this example. The fabrics feel very much like a table cloth, and the colors convey that it’s a hip and fresh shop run by a younger generation. Always carefully consider your brand and the impression you make online.
This site is striking when compared to the softer feel of the other examples. The fabrics convey a lot of personality. You’ll be able to tell if you relate to the person simply based on the style and boldness of the patterns.
For a product that’s all about style, it’s obviously important to appear stylish and beauty-conscious. In this case the fabric textures are perfect for demonstrating such an eye for quality—it immediately connects the site to fashion. The theme echoes the core values and skills of the brand behind the site. A brilliant solution.
I tend to be attracted to the over-the-top demonstrations of a style, but it’s really important to keep in mind that these approaches can be effectively used in subtle ways as well. In this case, the subtle textures add to the style of the page; they don’t dominate the design.
I was pleased to find this website—it shows how fabric can be combined with color and patterns to create a fun but stylish look. The design is playful and effectively communicates its purpose. And again, the use of fabric is behind the scenes.
I just love this design. While websites around the world trend toward minimal, glossy designs, the richness of this one-page site stands out. The use of fabric adds to the organic and worn feel of the site. It would have been more obvious to go with leather instead of the cotton in the header and footer. But I think this was an excellent choice—it’s more stylish than just straight-up cowboy. Something about the balance just feels spot on.
This site is selling wedding related foods, but the ties to wedding dresses is obvious. The use of fabrics connects users with the product and helps them visualize the products in their own weddings. Imagine if the cakes were presented in a stark way that simply showed what they sold. The fabrics in the design give it an organic feel that makes the cakes more relatable.
The final example is this baking site from Pillsbury. I imagine it was probably tempting to go with a kitchen theme. But the fabric choice is brilliant. The site’s homey feel is warm and inviting, exactly like you want your cooking to be. It’s a well thought-out design that is beautifully implemented.
Fabric textures at Graphic River
You can find many sources of free textures, but one of my favorite places to pick up these kinds of assets is on Graphic River. You have to pay for them, but it’s well worth it. Not only are the elements super cheap ($2 to $4), there are so many of them that you could build an entire design around elements from these collections.
The latest trends in website design will be among the topics at HOW Design Live in San Francisco, June 22-26. The HOW Conference offers a dedicated Print to Web track just for you. Hear from speakers including Patrick McNeil, Chris Converse, Mario Garcia, David Sherwin, Jose Caballer, Terry Lee Stone and more.