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 […]

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

Tagged with:

Patrick Cox

Patrick is a UX Designer and Researcher at Instructure (Canvas LMS).. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 14

Comments are closed.
  1. Designing for mobile is fun but also challenging because you have so much less space to work with. I totally love these textured sites. Nice and different post!

  2. Wow! Very nice examples of mobile websites.

    This is pretty interesting to design a website for mobiles.

    I am facing a big problem while design website for mobile.

    Actually I dont any trick for give the link for Full version when I am redirecting the website when get the navigator.userAgent is mobile. How to redirect for Full version of website in the same device..???

    Please help….

  3. Thanks for this writeup. I appreciate your viewpoint on these mobile websites.

    I work for a new social networking startup called Goba and built the mobile version of our website (http://m.goba.mobi). I’d love to get your input on the design if you have a few minutes. Thanks.

  4. Nice article! What are your thoughts on the approach that Microsoft is taking with Metro? They deliberately stay away from using textures because they wanted to make the UI “natively digital”. I find that I enjoy the Apple approach (a lot of texture) a lot more for the reasons you mention.

  5. Awesome article, thanks for the share. Been following this site for a while now and my loving it !