The Whys And The Hows Of Textures In Web Design


Texture is apropos constituent to design. It’s left over being a trend — it’s now a elementary and effective approach to supplement abyss to a website. Wielding a energy of hardness is a good responsibility. It increases a efficacy of websites and is a peculiarity apparatus in a arsenal of designers. It can beam a user’s eye and stress a significance of pivotal elements. However, hardness has prolonged been synonymous with “dirty” or “grungy” design. Its overuse can be seen via a universe of song organisation websites and has left a bad ambience in a mouths of designers. Due to a visit misuse, a benefits have prolonged been overlooked. Texture can pierce a website together, though should not be a categorical focus.

Textures vs. Patterns

Before we get into textures in depth, let’s heed between patterns and textures. These disproportion are mostly used synonymously. Patterns are typically small, repeating, tileable elements, since textures tend to be many bigger images that don’t repeat. Imagine a Venn diagram, with textures on a left and patterns on a right, with a small overlie in a middle. So, some textures are also patterns. Several of a tileable hardness packs found on Tileables are good examples.

The Function Of Textures

We adore hardness on a Web for a crowd of reasons. Design decisions shouldn’t be finished simply on a basement of, “Oh, well. It looks good”. Design should offer a purpose, and any preference about hardness should be finished by weighing a pros and cons. Let’s start by going over some of a pivotal benefits.

Grabbing Attention With a Call to Action

Texture can highlight elements such as titles, headings, icons and buttons. It draws a eye to calls to movement and categorical headings. This is maybe a clearest approach that a trend towards textures is throwing on.

When used minimally, hardness separates a calm from a rest of a website. It guides a user’s eye directly to a dictated element. It can be a good approach to apart pivotal branding elements.

You can squeeze courtesy in opposite ways, though dual common ways can be simply demonstrated with branding: a textured trademark opposite a purify background, and a purify trademark opposite a textured background.

The header from Poco People demonstrates use of a textured code on a purify background.
Notice how Poco People’s grunge trademark is accentuated opposite a purify background.

A proof of purify code opposite a textured background.
Cultural Solutions UK’s branding is a opposite: a purify trademark opposite a textured background.

Enhancing Information Architecture

Texture can be used to beam a eye. And like lines, boxes and contrast, it can be used to apart calm into judicious divisions. Using it effectively in and with other methods is vital. The thought is not to desert other methods of information architecture, though to raise their effectiveness.

A Modern Edens website provides a good instance of calm subdivision by use of texture.
By environment off a shifting ensign with a texture, A Modern Eden highlights a calm within.

See how we can use textures though violating best practices? High contrariety and legibility are clear and work in tandem with a texture.

This site ideally divides calm with textured elements.
Sky’s Guide Service ideally separates a calm with textured elements.

Above, any component is divided textured for a sold purpose. Sky’s Guide Service divides a calm into judicious sections, and a user sees where they start and end. Texture enhances a information pattern by formulating judicious calm areas that assistance a user routine a information accurately.

Also, a hardness ideally suits a character and theme of a website. All of a elements are custom-tailored to fit a judicious theme, so enhancing a website’s altogether message.

Building an Atmosphere and Bolstering Identity

More and more, clients wish website designs that do some-more than arrangement their calm in a user-friendly way. They wish websites that enhance their identity and capacitate users to code with a brand. Texture can be used to grasp this in many ways.

Dedas website builds a persona by use of textured personality
While hardness is sufficient on Deda, it is peaceful and never over-bearing.

Deidre “Deda” Bain does accurately this for her personal brand. Her use of hardness helps to put a face — almost literally — to a service. Without a texture, a website would be rather tasteless and would miss a celebrity of a creator. With legibility and a correct information architecture, a pattern would still be nice, though that additional something would be missing.

Texture adds to a “intangibles” of Web design: that wow cause and sexiness of a noted website.

Tips And General Advice

All of this is excellent and dandy, though you’ll wish to equivocate common traps while enlightening certain techniques and modes of thought.

Maintain Legibility

Never (ever!) scapegoat legibility for texture. Many of us make this mistake, and will continue to for a while to come. Legibility on a Web is peerless in importance. If a user can’t even review a message, afterwards what’s a indicate in component it, let alone texturing it?

Avoid doing this to your type:

Sometimes, we take it a bit overboard. We only get vehement about texture.
Sometimes, we go a bit overboard. This poster shows what happens when we get too vehement about texture.

Don’t Beat a Dead Horse

In print, hardness is tough to overdo — depending on a genre, of course. On a Web, however, hardness can be intensely distracting when used in “bulk.”

Hinders Website
On Hinder’s website, legibility gets mislaid in a menu, and a hardness is distracting. (And watch out for a auto-playing music.) Oops!

Practice Means Improvement

Experiment with your designs. Try new things. Apply textures in places where we wouldn’t routinely put them. Use textures that you’ve never used before. You never know what you’ll learn until we try it.

If It Serves No Purpose, Take It Out

Refine your technique before regulating it on a client’s website. Always make certain that your use of hardness is formed on a sound plan, as would be a box with any website we create. If we can’t clear something that you’ve finished as being an improvement, take it out.

There’s no indicate in overdoing texture. The whole purpose of a Web is to disseminate information. How can we accomplish this if your calm is unreadable? Besides, refinement and shade are a improved approach to denote poise of a subject.

Consider a Effect You Are Trying to Achieve

As we know from experience, removing carried divided with hardness is all too easy. Keeping in mind a final outcome we are perplexing to grasp is a best approach to equivocate this. If we wish a pointed textured background, only do it and afterwards pierce on to a subsequent object on your list. Otherwise, you’ll never get it done.

Collect Resources So That You Don’t Have to Search Later

You can save a outrageous volume of time by downloading and archiving resources that seem useful to you. Keeping your files orderly is a good fill-in plan. Trust us: zero is some-more frustrating than entrance opposite a ideal brush container and not being means to remember where we found it. Our list of brushes is prolonged and diverse. We’ve been collecting a brushes over a years from websites such as deviantART and Brusheezy, from a freebie sections of several pattern blogs, and by making a own.

Learn Masks

Learning to work with covering masks will save we a lot of time in a prolonged run and will be a clever apparatus in your arsenal. Masks are also a illusory approach to non-destructively examination with your designs. A lot of good tutorials are out there; a discerning Google hunt led me to “Understanding Layer Masks in Photoshop.”

Don’t Sacrifice Quality for Loading Time

There are copiousness of engaging ways to keep textures from murdering loading times. But don’t scapegoat a peculiarity of a hardness too much, since rather than appearing finished and professional, a website will demeanour old-fashioned right out of a gate. Repeating hardness patterns are a good approach to save on a loading times of backgrounds and incomparable elements.

Of course, we wish to pattern with a Web’s fundamental constraints in mind, though as Internet tie speeds arise globally, loading time shouldn’t be your primary concern. Nevertheless, use hardness within reason: a website with a lot of textures will fundamentally have a prolonged loading time. A elementary routine to get around record distance is to use repeating textures, generally for backgrounds. Tileables is a illusory apparatus to get started. And we’re always training about CSS Sprites and regulating to serve restrict a files.

An instance of hardness peculiarity differences
The disproportion in hardness peculiarity here is major. The hardness on a left is compressed. The one on a right is, too, though not as much.

Choose Textures Logically

Lastly, and maybe as critical as progressing legibility, select textures that are judicious for your design. If you’re building a website for a seat store, afterwards rusty textures wouldn’t make a whole lot of sense. Textures are meant to build identity, not to upset a visitor, regardless of either they demeanour good. Usability should always take precedence.

Textures: A D.I.Y. Attitude

One of a many ways to get textures is to emanate them yourself. We are vast proponents of this since it can save we time and give a accurate outcome you’re looking for. And don’t worry: it’s not as formidable as it looks.

Snap Some Photos

The simplest routine is to grab your reliable digital camera and snap shots of textures that are around you, generally ones that you’ve never deliberate to be “textures.” Unique textures can allege your style. For example, would we cruise a tip of a cake or froth in a penetrate as applicable textures? They’re all around you.

An surprising instance of a imitation that can be used for texture
This imitation from Lost and Taken demonstrates that a sold sketch can be used for a special-purpose texture.

If we demeanour around yourself, we will see copiousness of grunge: worn-down buildings, petrify walls, rusted metal, tree bark, weathered wood. These are all illusory specimens. In fact, a decent point-and-shoot camera is adequate to start. We started sharpened a possess textures with an aged Nikon Coolpix 4200, that worked flawlessly.

When we shoot, we could use full automobile mode. But don’t use flash, since it will “flatten” a picture and mislay many of a fact in a texture, generally in close-up shots. Let a camera do a work, and always take mixed shots of a hardness to get a best probable result. You can always rest on post-processing in your favorite picture editor.

Scanners Work, Too

Another good apparatus is a good ol’ flatbed scanner. Old paper, cardboard, rodent pads (shout out to Trent Walton for this idea), paper bags, skin — the list of what we can indicate goes on. Scan during a really high resolution, 600 to 1200 DPI, so that a hardness is of high peculiarity and can be consistent to any project, including vast imitation pieces. High-resolution scans also concede we to besiege sold spots in an picture to use as a texture.

Once you’re gentle with that, we can start formulating elements regulating normal art techniques. For example, request a bit of colourless to some pleasing complicated paper, that could be a finishing hold for that grunge credentials you’ve been after. What about acrylic paint splatters to supplement abyss to your UI? Or coffee stains on paper? The possibilities are endless!

Icing on a Cake

You can always piquancy adult a routine by combining textures. Using a covering consistent modes in Photoshop, we can mix several textures into one. Caleb of Lost and Taken has posted an in-depth walkthrough of a process that he follows to emanate his packs.

Believe it or not, Photoshop’s rather gimmicky filters can also be used to emanate textures. Noise textures are a snap with a Noise filter. Playing with a values and levels of a filter, we can obtain formula for a far-reaching operation of needs. There’s also a Texturize filter, nonetheless it’s rather gimmicky and frequency useful. Still, it could assistance we grasp partial of a outcome you’re going for.

Noise Filter - Before and After
A brief examination with sound filters. Light sound is better, though make certain we can still see a effect.

Noise Filter Settings
If we wish a hardness to be seamless, afterwards a uniform placement is easier to work with. “Monochromatic” ensures that a hardness has no tone sound that could dispute with other colors in your design.

If you’re meddlesome in training a simple techniques of requesting hardness to elements, we’ve constructed several videos to get we started. More modernized users competence already know these techniques though competence wish to brush adult on them anyway. Either way, we wish we find them useful.
A proof of regulating brushes, levels and layers to emanate texture.
A proof of regulating hardness files, packs, levels and layers to emanate texture.
A multiple of a dual techniques above, with an overview of some-more modernized ideas.

Articles and Resources

Articles and Tutorials

  • “Adding Texture in Photoshop,” Method Craft
  • “Creating Tileable Textures,” Method Craft
  • “Vintage Effects Within Illustrator,” Method Craft
  • “Design a Vintage Poster With Vector Pack 16, Part 1,” GoMediaZine
  • “Design a Vintage Poster, Part 2,” GoMediaZine

Free Resources

  • Smashing Magazine’s Free Textures (2000 giveaway textures)
  • Lost and Taken
  • Subtle Patterns
  • Projectdd
  • Valleys in a Vinyl
  • deviantART
  • Flickr
  • Tileables

Premium Resources

  • Arsenal, Go Media
  • WeGraphics
  • GraphicRiver
  • Vandelay Premier
  • Premium Textures
  • Zen Textures
  • 48 Pixel Patterns