Using Textures to Enhance Your Design

There is no more frightening combination of words that could be uttered to a designer:

Make it pop.

Most people know when something is beautiful because there is an inherent sense of order and design that is hard wired into us. Yet those same people have a very hard time quantifying what exactly makes something beautiful.

One reason is that it takes many parts combined in a specific way to make something unique and beautiful. And typically those many parts will not be readily visible because a good design will combine them in a way to create one cohesive work of art.

Good Web Design Needs Something More

Now good web design is pretty easy to come by. There is beauty in simplicity and there are tried and true formulas with layout that just work. And if you stick to these you’ll more often than not come out of your Photoshop session with something that looks pretty good.

But if that is all you do you’ll never have a truly great design. Nobody will retweet you and it won’t be something you’ll be really proud to put at the beginning of your portfolio.

You need that one last thing, the holy grail of design, the thing that makes it pop.

Textures Can Turn Your Design Into Something Special

While I believe there are many techniques to achieve this one of the best items in my arsenal is textures. The proper and subtle use of a texture takes a design from being flat and dead to noticeable and alive.

Nowhere is this more clearly demonstrated then with Apple’s designs.

I recently upgraded my iPhone 3Gs to the 4s and its beautiful retina display. One of the first things that stood out was the beauty and detail of the icons and apps. With more pixels there can be more details and literally more parts of the whole could be included to create a better piece of art.

Compare the icons on the left with Apple’s own on the right. While the icons on the left are still good icons, the subtle use of texture takes a good design and makes it great.

Apple Alt Icons

Applying Texture to Your Design

Be sensible and subtle about it. Too much of a good thing will spoil the whole design. Below you will see 6 examples of texture being used well. Use it for inspiration for your own designs!

Dribbble Credits

Dribbble #1 | Dribbble #2 | Dribbble #3 | Dribbble #4 | Dribbble #5 | Dribbble #6

Free Texture Resources

Subtle Patterns | Texture King | Zen Textures | Lost and Taken

(I think that the Subtle Patterns site is quite possibly the best site for textures in the world.)

Comments

  1. Michael Hutchison :

    Very helpful post I just checked out subtle patterns and they have some pretty killer textures. Every time I hear “make it pop” part of me dies a little.

  2. Speaking of “making it pop” if you’re a designer and haven’t read this you’ll love the next few minutes of your life.

    http://theoatmeal.com/comics/design_hell

    • ROFL!!!

      Thanks Josh! I needed a good laugh LOL
      Cheers,
      Gil

    • Michael Hutchison :

      That cartoon is too funny, but also very true. Designers should definitely read it.

    • Are you kidding me? Isn’t this what every job is like? As an Interior Designer working with ‘couples’ after tax dollars, I have learned how to design and interpret ‘feelings’ but I have also learned to ‘just say no’. Most Interior Designers should have a 25 page long contract and read it aloud line by line to their clients, have them sign it, then get paid 150% up front and perhaps then they would only run into these situations 80% of the time.
      Cheers

    • I just read that and cracked up! I just had a client EXACTLY like that!!! I gotta share that on my Facebook page!!

  3. Fantastic post! I agree that texture enhances any design (as long as it is used correctly)

    Thank you for the link to various texture sights! What a great find!

  4. (isn’t the 4G beautiful??!! :)

    thanks for the links too.

  5. Great post. Question, if I wanted to have a background image, not a tiled texture, what dimension are recommended?

    • Well if you’re wanting a single background image for one of our designs typically you would want something probably wider than 960px so it would show past the edges of the content area.

      After that its really up to you – there are no “recommended dimensions” because you can have a small image that repeats both horizontally and vertically (like a tiled texture) or a larger image that only repeats horizontally or vertically.

      One of the reasons we use tiled repeating images is because it keeps the file size down and loads the page quicker for users.

  6. Could you give me insight in how to use the textures? I checked them out and the look great but when I went to download it was a small tile?

    Thanks

    Cove145

    • Hey Kris, generally speaking textures are supposed to “tile”, for use as backgrounds or in Photoshop.

      This is so they can be adapted to any size, rather than coming in a predefined size or layout.

      For instance, on a WordPress them that allows you to upload a background, you can upload the small tile and set it to “repeat” or “tile background” and you’ll see it take up full screen on your site.

  7. @Josh – The Subtle Texture website ROCKS!!!. It’s almost an addiction to review all the different submissions. I’m going to try the PSD Pattern file they include as a download.

    Thanks for posting the links. Another site I came across with some textures to work with is: http://www.freebiepixels.com/category/resources/textures/

  8. @Cove145 – If you are familiar with CSS, you can apply the small tile as a repeatable background image to a HTML element in your webpage. You could also use it as a pattern in Photoshop or most other graphic design apps.

  9. Thanks for the links, I was already familiar with SubtlePatterns but the rest are great too!

  10. Haha! I’m one of those ppl, I didn’t realize my designers must cringe when I say that – Make it pop! lol I know in my gut when something doesn’t hit the mark, but providing guidance for that almost never works… I think it really depends on the professionalism and/or talent of the designer if they can “do it” or not. If we (PMs / Clients) provide too much direction we almost hurt the design more than help it.

    Thanks for verbalizing what I’ve been thinking! Great examples!

  11. Thanks for a good article, and the nice subtle patterns link. Another great resource for backgrounds/textures is bgpatterns.com

  12. Wow, this open my eyes. Thanks for Your sharing. :)

  13. These patterns just blew me away. Thanks for sharing. I spend hours searching for good patterns. This is a helpful link to keep handy. :)