Interesting Trends in UI Design

by on 25th April 2012 with 20 Comments

screenshot

I’m always on the lookout for new design trends. It’s fascinating to me how certain ideas get picked up by so many designers and implemented in countless different ways.

Today we’re going to specifically explore the world of user interface design and see if we can spot any currently popular trends. Almost more than any other area of design, interfaces are extremely subject to the ever changing whims of designers and if you’re not in the loop, you could find yourself creating UI that feels outdated. Read on to see what’s trending!

Are Trends Good Or Bad?

People typically read trends posts in one of two ways: as a list of examples of things to try or as a list of clichés to avoid. Which is the correct way? If something is a trend, does that mean it’s good or bad?

My answer is that trends in general are fairly neutral. They’re not necessarily intrinsically good or bad, they simply represent what lots of people think is cool at the moment. That being said, trends often reach the point where they’re so overused that they leave a bad taste in your mouth.

For this reason, I always recommend that every designer constantly look around and take note of what’s currently popular in design. Being familiar with these constructs will make it easier to do your job, whether you’re looking to fit in with the crowd or do something completely unique (you have to know what isn’t unique to create something that is).

With that in mind, let’s check out those trends!

iOS Inspired Everything

It’s difficult to say that Apple’s iOS platform “owns” a certain aesthetic, but generally the hard working developers behind the great iPhone and iPad apps we all know and love have carved out a pretty specific visual style, perhaps led by Apple, or perhaps Apple is following the third party guys.

Regardless, from rethought widescreen multi-column layouts to what some have deemed an overly skeuomorphic aesthetic, you can typically identify an iOS interface when you see one. At least that’s how it used to be. With Lion and the upcoming Mountain Lion, Apple has been integrating similar visual ideas into OS X, and they’re certainly not the only ones jumping on the idea of bringing this style to desktop UI design.

screenshot

The gorgeous Dribbble shot from Robert van Klinken above is a perfect example. Given the design of the buttons and the use of stitching, I would swear this was an iPad app. However, it’s actually a design for a web-based productivity app for desktop computers.

Even if we take a step back from the faux realism style, there are plenty of other examples of Apple-inspired web application UIs. The shot below from Pontus Johansson is similar to the increasingly subtle gradients in Finder windows and app chromes from OS X.

screenshot

Wooden Backgrounds

This one is by no means new, Garage Band showcased a sort of wooden texture ages ago and I’m sure there are plenty of other examples before that. However, this trend is definitely at the height of its popularity. In fact, it’s probably the closest thing 2012 has to the overused glossy web 2.0 look from a few years ago.

screenshot

Designers: Ix Techau, Pontus Johansson, Pavel Maček, Levi Wintering, and Max Schwartz.

The long and short of it: wood is the UI texture of choice at the moment (though linen/canvas textures are also extremely popular). You’ll see it in iOS apps, Mac apps, web apps, Android apps; everywhere. One of the things feeding this tendency is the widespread availability of really fantastic and free textures.

Much of this started with a Matthew Skiles shot that was uploaded to Dribbble way back in July of 2010. It was beautiful, detailed and free to use in any project without attribution.

screenshot

The result was quite a few apps picking this up for their interfaces, which led to others releasing similar free textures and those being picked up by interface designers, and the cycle is still continuing two years later! Do I think this trend is overused? You bet. Have I jumped on board myself? Of course!

Retro Interfaces

All the trends that we’ve pointed out so far seem to be taking the “realism” perspective of making software interfaces feel like real world physical interfaces. Within this tendency, there are sever sub-niches as well, the most drooled over of which tends to be anything retro.

screenshot

Designers: Callum Chapman, Mike | Creative Mints, Gökhan Kurt, and Gianluca Divisi

Designers absolutely love rebuilding the devices from decades past using pixels. There are definitely ups and downs within this area of UI. Some of the interfaces end up feeling rushed and clunky, with the retro aspect being more of an annoying hindrance than something that actually furthers the experience.

That being said, some retro interfaces are flat out delightful to use. Here the retro component is the key aspect to the enjoyable nature of the application. For instance, in the Mac app “Instant“, you drag your photos to an old Polaroid camera, which then spits out the photo while you wait for it to “develop” just like in the old days. It’s not ideal for normal photo processing but for making retro Polaroid shots, it’s super fun.

screenshot

Notification Boxes

I’m always fascinated when a basic shape suddenly takes off and becomes popular. In a post from last year, we looked at how ribbon shapes were taking over the web. These days, I’m seeing tons and tons of this shape, which I’ll refer to as a notification box for lack of a better term.

screenshot

As you can see, it’s basically just a box with a triangle popping out of it. The triangle helps tie the contents of the box to a form, button or other piece of content and can be located on any edge of the box. Don’t believe me that this shape is suddenly super popular? Here are a few examples that I found in about two minutes of searching.

screenshot

Designers: Morgan Allan Knutson , Jason Wu , Justalab and Mikael Eidenberg

I can’t seem to locate it now, but I even saw an little web app the other day that allows users to customize and generate this shape in pure HTML and CSS. It’s funny how little things like this catch on and suddenly you see them everywhere.

Update: The aforementioned site is CSSArrowPlease. Thanks to commenter Jack for pointing this out!

Snow White UI

The “minimal” movement is alive and well in the UI world, with many designers taking the route of going almost completely colorless and instead opting for a completely light gray or white color scheme.

screenshot

Designers: Matt Gentile, Daryl Ginn, Morgan Allan Knutson, Norm

As you can see in the examples above, buttons and form elements are prime territory for this trend. Subtle gradients, single pixel outlines and shadows that are often inset define the aesthetic. The result is a very light, airy experience that feels fairly formal.

It’s also interesting to note the ever increasing popularity of UI kits. I’m not sure who the first person was to toss a bunch of UI elements into a free download, but the idea has certainly caught on and continues to be a favorite of freebie finders everywhere.

What Trends Have You Seen In UI Design?

This collection is a completely random scattering of ideas that I’ve been seeing a lot lately. I’m sure I’ve missed a ton of other popular trends that UI designers are jumping onto and I’d love to hear your feedback.

What types of design have you been seeing a lot of recently? Do you also find that the minimalism of a few years ago (e.g., Google) has led to a dramatic response of realistic interfaces like those coming from the Apple iOS/OS X camp? Leave a comment and let us know!

Comments & Discussion

20 Comments

  • http://yummygum.com/ Leon

    Circular masked avatars

  • http://mustified.com Mustified

    Really nice article Joshua. We recently posted a round up on our blog. I hope it will help people getting some more inspiration on the topic.

    http://mustified.com/2012/04/02/inspiring-iphone-app-ui-designs/

  • http://kanompang.com 13ankster

    I very love Snow White UI

  • http://www.wpsquare.com/ Bharat Chowdary

    UI in wunderList is really nice

  • http://ip-systems.at Thomas

    I also recognized the usage of textures.

  • Gabriel Dubois

    I am glad you mentioned the wood texture/background problem. I don’t necessarily like it but a lot of people are using, or requesting it. You don’t happen to have a link to where you might give some free wooden textures? I would like to use them in a photography portfolio page, but the images should be free for commercial use. Thank you in advance.

  • http://www.wildtangomedia.com/ Zaccary Price

    Smashing put a similar article up a while ago on the growing “vintage” trend in web design: http://uxdesign.smashingmagazine.com/2012/03/15/symptoms-of-epidemic-web-design-trends/

    I’ve noticed this a whole lot myself, a lot of 50-60’s era design elements are making a comeback.

  • jack

    cssarrowplease.com is the site where you can customize your own notification box

  • Andrew Griesemer

    “Going Dark” (Opposite of snow white). It’s trendy and it’s been around for a few years now, and it’s definitely a modal that many popular desktop app designers have adapted – Adobe Creative Suite, Twitter for Mac, Quicksilver for mac, etc.

  • http://shinytoyrobots.com Robin Cannon

    Great article, and some pretty accurate assessments there.

    I’m not sure whether the iOS thing is more of a virtuous circle. My feeling is that Apple worked to perfect some of the early “Web 2.0″ trends in interface and UI, and their work is now being copied elsewhere.

    Personally I’m really loving the continued explosion in retro and vintage design. Technological capability has reached a stage where those kind of aesthetics can make a site both incredibly friendly to visit, and also easy to use.

  • http://www.inpixelitrust.fr Stéphanie

    Ho man, I already cryed against the “wooden background” thing I can’t stand anymore.
    The “polaroid” style for pictures is also a very vivid trend (thanks Instragram), a client of mine just asked me to give the images of the site a “polaroid look” with scotch on the top of it. Yeahy ^^
    There’s also the ribbon trend, and the “present your pictures in a disk” like comment pictures or profil pictures, that comes from the new Lion OSX login I think.

  • http://about.me/assbach sascha

    what Stéphanie says.
    ribbons and badges or badge-ribbon-ribbon-badges with stitches ;), circle masked images, zigzag patterns or dividers, dashed lines, diagonals, multi-colorbars like vimeo or gowalla used to have, mostly at the top of a page. ….
    I love collecting this stuff and screenshots for inspiration but sometimes you start getting tired of them.

  • http://www.speedstrip.com Jake Peters

    I noticed a trend of blog posts claiming to have their finger to the pulse of trending of seven million websites each day.

  • http://www.bigorangesoftware.com/ Tom @ Big Orange Software

    I think that there are always going to be trends. I don’t think anyone can deny being influenced by a trend in the web design world. The only problem is that trends come and go, and you don’t want to end up with a site like everyone else’s when that trend has passed.

    I think the best thing to do is take inspiration from the trends and do your own thing with it.

  • http://stucel.com Felix Widjaja

    Big center aligned text headers!

  • http://www.nanoant.com/ Adam Strzelecki

    My biggest complaint against Apple is that they bring more customized look to built-in apps on OSX platform, while the OSX API isn’t really prepared for such customization.

    In opposition to iOS API where it is pretty easy to lay custom backgrounds and use custom controls for built-in control, on Mac is requires heavy tinkering as windows & controls look customization API doesn’t really exists. So even Apple uses some private API and tricks to achieve fancy look of some apps.

    In long term this is no good and OSX will soon start to resemble Windows, where every app looks special. After all is anyone still following OSX HIG (including ones who created these guidelines)?

  • http://www.nucreativa.com Ary Wibowo

    metro style with font “Lato” and pastel color :)

  • http://www.iboxplus.com iBoxPlus

    Thank your for share trend in this year

  • AntoxaGray

    That style of notification boxes was used back in 2010.

  • http://www.centextech.com Reemo

    Its time to think the best thing to do is take inspiration from the trends and do your own thing with it.

Subscribe
Membership
About the Author