Getting Touchy-Feely with Texture
It’s time to embrace your sensitive side and get to know ‘Texture’ a little better. In the Elements of Design, Texture is what gives your designs a sense of touch and feel. It’s one of the 7 Elements of Visual Design, but is unique in that it’s applicable across all design mediums.
What is ‘Texture’ in Design?
In UI and Web Design, textures are purely visual and suggest Texture via your sense of vision. But in physical Product Design, textures are physical, tactile, and also detectible through your sense of touch.
Put simply, ‘Texture’ is the quality of an object’s surface.[1] This surface texture can be simulated, like it is in 2D and web/digital design, or real and tangible like it is in physical product design.
Modern technology allows designers working in both 2D and 3D mediums a huge range of Texture options. And all these different textures can help support the goal look–and–feel you’re after.
Why Texture Matters
Depending on how you need your design to feel for your target audience(s), careful use of Texture can be a strong supporting indicator to your usage of other Design Elements.
Whether a Texture is smooth or rough — organic or geometric — these elicit very different emotions and associations in your users. Depending on the aesthetic you’re going for, choosing your textures intentionally, and judiciously, can result in designs that feel more complete and cohesive.
For example, when designing furniture, smooth and subtle textures will usually reinforce a midcentury modern aesthetic. In web design, and digital design as a whole, Texture is implied and suggested. So the approach becomes altogether different.
Using The Element of Texture in Web Design
You’ve seen bad textures online before. Think of the audacious web 1.0 cork board and ‘bark’ textures clearly generated by computer.
It’s difficult to create computer generated textures that aren’t distracting (just look at that example above again), so instead it’s best to go simple. Go subtle.
For one, textures don’t need to mimic real surfaces. A common and effective strategy in web design is to create a Texture consisting of graphic shapes that combine to make recognizable patterns. Plaid, dots, repeating shapes — these all give a design Texture.
Textures can also utilize actual photography in digital interfaces. While I would argue there is never a need to have a wood texture in your designs, a real picture of wood will always look better than a computer generated one.
Regardless, be judicious and be intentional.
Be subtle.
Texture ➡️ Design’s Subtle Reinforcement
When used with tact, Texture has the ability to really bring a design concept home. Texture plays a much more prominent role in 3D design mediums than it does in user interface design. But Texture still has its uses, and is a viable design element to employ if your target audience and aesthetic support it.
This should give you a broad idea of how Texture can be utilized in Web design. If you’re interested in learning more, check out the references listed below!
Texture is one of the 7 Elements of Visual Design, and part of the longer list of Elements and Principles of Visual Design. When it comes to UX, UI and web design, these are essential tools to have in your skillset.
References
- Lohr, Linda L. Creating Graphics for Learning and Performance: Lessons in Visual Literacy (2nd Edition), Pearson, 2008.
- Tomita, Kei. “Principles and elements of visual design: A review of the literature on visual design of instructional materials.” Research Gate. Educational Studies, IERS, International Christian University, 2015.
Cover photo: Sarah Pflug