The second in our series of blog posts by members of the Raizlabs team of developers, designers and product managers on various aspects of the world of mobile development and design. 

Textures can be more than just the simple background of a design. Often, textures and patterns are a subtle way for designers to hint at gestures or actions within an app. Designers often utilize textures to provide more depth and dimension in their mobile designs. Adding a texture to a background or tappable element, reduces the inherent flatness of the glass touchscreen. Below are a few examples (from iOS and OSX) of the evolution of textures, the ways they can be used, and where our design team thinks they may be heading.

Let’s head back in time, back to the first OS X… to Apple’s introduction of brushed metal. This introduction of texture was a complete shift from the UI’s of the past. Something tactile and clean, like the trim you would find in a German automobile interior of the same era, or one of the tools found in the hands of a surgeon. Elegant clean designs born from a purpose.

Apple began to introduce new background designs into their UI with the launch of the iPhone. The now classic faded blue stripes are ubiquitous in almost every table-view screen. The stripes do their job well, breaking up the space around grouped tables. However, would linen work here now?

At some point during the age of skeuomorphism, the lumberjacks set in. Wood grain has overwhelmed us for years, designers cleared vast virtual forests to build websites and applications of pine, spruce, and fine mahogany. I’ll admit, even we jumped on board (who didn’t) but in our defense, we only used it where it applied… like a flooring company or a lumber mill (remember young designers form follows function), or our Mortgage Calculator app (hey, homes are made of wood).

The linen era started in iOS. It then spread rampantly, taking over the app switcher and Notification Center before jumping to Apple’s MobileMe/iCloud, then spreading to OSX Cougar (Mountain Lion) and its Desktops and Notification Center. As a background texture, it gives a tactile feel, a certain natural feel to the cold world of technology. This man made material is born from natural elements – and we believe it will haunt us longer than the voices in the Cotton: Fabric of Our Lives commercials. Linen acts as the perfect background texture – subtle and neutral enough that it doesn’t distract your eye from the foreground elements or content, but visually pleasing and comforting to those not comfortable with technology. How warm and inviting does Android or Windows look in comparison? It is a fine line, and for the masses, I believe Apple has done a great job with this background… not so much the Skeumorphism… but that is another story all together.

So what’s next in the world of patterns and textures? It will be tough to find a replacement, no doubt, but we believe we have some pretty good top level ideas for the “post-linen” era in software and web design.

Concrete… it’s a solid choice for a foundation pattern. It is manmade, but from natural elements found readily in nature. It has that tactile quality, with a “random without being random” pattern that is visually intriguing.It MAY be a bit cold visually to end users, but it does set a nice solid foundation without being visually overbearing. However, being a foundation material, it can bear the weight of nearly any UI you place over it. As a bonus, once we’re done with textured concrete… it can be polished OR painted for a whole new look and feel! Seems like a pretty solid solution?!
Textures and the illusion of depth on things like buttons are important parts of a touch-based interface.  While the screen of your iPhone or iPad is smooth and flat, smooth and flat does not suggest the kind of real world interactions we expect when we press a button or drag our fingers on a surface.  The visual design of an app should say, “I am something that you want to touch, and when you do, something good will happen!”
A lot of effort has been made to create more haptic (look it up) experiences on our mobile devices, but creating an engaging visual design is easier and improves the perceived quality of the app.  The funny thing is, texture is more often used as a background, precisely the part of a screen that you don’t want the user to touch because it doesn’t make anything happen.

And so I present Terry Cloth as a logical extension of the evolution from pinstripes to linen, to stainless steel, to wood grain.”

Linen, wood grain, leather. Why not take the background away altogether? Think about it:

  1. You’re tapping a glass screen that actually feels like glass. Not a cloth screen that…feels like glass.
  2. It’ll create a smoother transition between the smartphone and the next big thing (that device that will project screens onto your hand, yeah).
  3. Chick-magnet.
  4. If you have tattoos or draw notes on your hand, you’ll never miss them.
  5. In fact, you’ll never miss anything in front of you. (You’ll stop bumping into stuff. Great for driving!)
  6. It’ll make you want to lick your phone even more.
  7. It matches the expensive glass conference room doors of your office space.
  8. Hey, Apple could use a little more transparency, ya know.

 

Plaid is it. Ok, so this will never happen, but wouldn’t it be great if it did? Realistically, yes, WAY too much in terms of pattern to be visually appealing. Still, who doesn’t love plaid? It’s Autumn now, embrace your inner lumberjack or hipster or hipster lumberjack! Wear your favorite sweater, sip some espresso, and read your e-mail with a new and improved swanky plaid background. All the cool kids will be doing it. Say no to stripes, plaid is in.

——————————

Obviously, we are just having a bit of fun with this, our “angled screen shot on Dribbble” poke. But it does raise some very good questions… What will replace linen in the Apple sphere – will it be another material? With all of the skeumorphic design exploding/imploding at Apple, will we see a return to something simpler? We believe there will be room for something softer in software design for some time to come. In a time where technology is becoming so abundant in our daily lives, this breath of tactile cloth in our software is a warm breeze drying out the laundry. Warm and comforting. As designers, we are most probably over it – but for our end users, it is a comforting element in this technological world of glass and metal.