The Importance of Texture in Mobile Design

Implied textural designs are not new to the interwebs. Most of the time texture is used as a design device to add depth, dimension, or just used to spice up a bland design. But as mobile touch devices take over the world, texture will play a key role in how users interact with the mobile internet.

On a standard display a user must use a device to interact with the screen – like the mouse – but touch screens don’t need mice, just fingers. This means that there is no hover state to make users aware that an element can be clicked or manipulated. Also, touch devices can do more than just link, you can move, scroll, expand and pinch elements. This means that creating implied textures on elements that can be manipulated by the user is becoming more important. As users of real world, physical devices, we interact with tactile textures everyday. By replicating these tactile textures in mobile websites, the user will instantly know what sections and/or elements are able to be touched and manipulated.

The classic mobile texture is the glossy button, but there are plenty of other textures that can be used – from the dotted grips on an image gallery indicating a pull, to the indented horizontal rule that separates list elements from each other.

I put together a small sample gallery of mobile websites that have incorporated textures to make the user experience better. All images are being borrowed from mobileawesomeness.com. There are many, many more methods and mobile designs that use textures in really creative ways, but here is just a few for your inspirational pleasure.

takemefishing.org

Takemefishing.org incorporates a subtle wood texture around its navigation icons. This texture not only replicates the iPhone icon look, but it also creates a nice complimentary feel with the implied wood texture of the footer image. The wood trim on the icons creates a feel that the user recognizes as a touchable surface.

bungie.net

This mobile website uses the gloss technique well, but does not replicate the typical iPhone or Android gloss buttons. It uses light effects and highlights on the buttons imply a hard surface like a glass or plastic button. Also, Bungie.net is great example of using gradients to not only divide list elements, but make them stand out to user as touchable surfaces.

bluemountain.ca

Truly an awesome, well designed mobile web site. This site combines a few different textural techniques to allow the buttons to be pushed. They use just a standard gradient to create a hard, rounded, backlit surface with a few indented grip dots in the upper right corners to give the buttons just a bit of extra texture. Great mixture of gloss and gradient to create a real unique effect.

kennysaunders.com

The texture effect here doesn’t come from the adding texture to buttons, but rather the opposite. KennySaunders.com uses a detailed background texture with flat buttons and text links on top to create a separation between static and interactive elements. The user can easily scan the display and quickly recognize what can be touched and manipulated.

denongraphic.com

The main navigation uses lighting effects and gradients to create a smooth, surface that stands out against the rough textures header. The navigation bar also includes indented separators that reinforce the button feel. Once the buttons are pressed they also texturally react to the user by indenting into the bar, this effect achieved though gradients and simulated shadows.

racinelblacklabel.com

Instead of using a textured button for the navigation, RacenelBlackLabel uses texture to enhance the background and flat, texture-less buttons. The textural contrast is reversed, but the effect is the same. The user still gets the idea and they know what can be dynamically manipulated and what is just a static image.

vitosport.co.uk

Another great example of using textural backgrounds to enhance the design but also to create contrast from user manipulated elements. Another aspect I like about this site is the use of ripped paper edges and ink splotches. The ink splotch under the the main shiny logo creates a really unique contrast of the hard metallic shield to a softer, wet ink spot.

lapse.org

The thing I like about this site is the indented lines that separate list items. Most list items are large glossy gradient laden rectangles, but Lapse uses a depression effect to create division while also contributing to the clean, simple design. Users still get the idea that the web site will react just like a list element, but doesn’t slam the user over the head with some large list-like button.

Related Articles

What Gestures do People Use? – Luke W

Common Elements Used in Wooden UI Design – Webdesigner Depot

Textures in Modern Web Design – SpyreStudios