13 Design Trends For 2013

What better way to start the year than to make predictions — some obvious, some not so obvious — as to what trends will become more widely used in the design community. Each year seems to bring new ideas to the community and once they gain enough traction, they eventually become the norm (we're looking at you, "pull to refresh").

In honour of the year, we have 13 design trends that we're either hoping or expecting to see reign in throughout the year. Feel free to quote me on these in late December, as well. I won't be offended.

1. Flat Design

This seems to be the most obvious choice for upcoming trends. Flat design is essentially the polar opposite of the realistic-riddled issue that many people have with skeumorphism. While they definitely weren't the first to implement it, there's one company that took it to an entirely new level. Microsoft.

Windows 8 seems to have built its entirely new OS around the idea of a completely flat UI, most of which revolves around the Windows 8 UI (previously known as Metro) and Live Tiles. It started a while ago with the XBOX dashboard, but seeing an entire OS revolve around the flat design was a bit unexpected at the time. It has its pros and cons, but thats the basics of trade-offs.

A more recent application that utilises flat design is an alarm clock app that goes by the name, Rise. The entire UI is lacking any sort of three-dimensional elements with clean type prevailing throughout. When you combine that with their gradients, you get a beautiful looking alarm clock. Granted, the utility of an alarm clock doesn't need a lot of depth as far as the navigation and UX goes, it still proves it's worth, making for a simple and visually appealing app.

Flat design isn't for every application. However, there will without a doubt be an uprising of designers and developers alike who are going to strive for a very simplistic approach to the UI of apps to arrive and be updated in 2013.

2. Fewer Buttons (More Gestures)

I've been over this before. I also placed this right after "Flat Design" for a reason. When you're trying to make an application that isn't cluttered with buttons (and lacks visual dimensionality), you're naturally going to resort to actions we call gestures. Google went for both #1 and #2 in their recently released Google Maps. Now, not everybody agrees that gestures are the best bet, but that's where I see applications going in 2013.

3. Animation as Affordance

This is also placed strategically after the previous trends. When you don't have a button to press or an icon to select, you can be lost as to what needs to happen to achieve the task you're trying to accomplish. While there isn't a lot of this in applications right now (that I know of), little animations can be used to guide the user as to what needs to happen to achieve a certain task.

The best example I have found yet is the camera icon on the iOS lock screen. Many people unfamiliar with iOS would more than likely resort to just clicking on it instead of dragging it up. Instead of not doing anything when pressed, it does a little bounce up and down; revealing the camera feature underneath. This gives a visual hint to unknowing users as to how to properly use it in the future. By offering this hint, users are able to pick up on things rather quickly.

In fact, over Christmas, my grandmother learned it on her iPhone after just one try. She came to me and bragged that she found a new feature. She knew I'd appreciate her new discovery. In fact, she reads some of my articles on here, despite not having a clue as to what I'm talking about. I love that woman.

Apart from my above ADD moment, by offering little animations as affordance, you can guide people around the UI without cluttering it with buttons. It's a solution to one of the trade-offs of minimising more prominent visual cues.

Besides affordance, there's another aspect of animations and transitions that's significant. Subtlety and fluidity. Animations within applications can make or break the experience for users and when they feel natural, not glitchy it makes that experience that much more valuable. With development getting more and more precise and mobile processors being able to handle much more, this should be made a priority for upcoming designs.

4. "Hamburger" Menu Drawer

Plenty of apps already use this as the icon choice for menus, but I think it's going to become much more universal. It's a simple way to show that there's a list of options and it can be done with nothing more than three parallel lines.

One application does add a bit of fun to this, though. In Marco Arment's The Magazine, if you hold the button for around three seconds, the hamburger menu button sincerely turns into a hamburger. A delicious easter egg from one of the best in the business.

Although not so much of a trend, per se, it's a visual representation that will more than likely become universal, more so than it already is.

5. Native Over Web

This one has been rather consistent throughout the past few years, but as native platforms continue to get narrowed down and prove (or disprove) their value, native seems to be the appropriate choice more often than not.

I won't go into too much detail as I don't want to pretend to know all of the advantages and disadvantages of native over web, but it does seem that more and more applications will be developed with a specific platform in mind.

6. Responsive if not Native

This trend is in complete contrast with the above, but one that also deserves to be observed as designers will without a doubt choose both paths throughout the year. When new publications come to be and the creators want to reach a wider audience, sometimes a proprietary platform may not be the way to go.

The best example to date is Quartz. Quartz is far from native, but it is designed very responsively in the sense that it will work on every device almost effortlessly. I can open it up on my iPhone, iMac, or a Surface Tablet and it will work essentially the same way, presenting me with the exact same information in an aesthetically appealing manner.

Responsive design is becoming the go-to way to present web-based content. Designing specifically for every device in the world is nothing short of impossible and this alternative proves to be a very reliable option to allow content to be consistent across platforms.

7. Wider Websites

This trend is one that I've actually been seeing the opposite of lately. Some of the latest blogs that I've started to visit lately have a very thin width. This makes sense in some regards, but when you have the option for creating a responsive site, a 700px wide website leaves too much white space when viewing it on a "Retina" screen or a 27″ iMac.

By offering wider websites, it also allows for visual media to be more prominently displayed alongside the text. A picture can speak way more than a thousand words in some cases and having a beautiful photograph at 700 pixels doesn't do it justice.

It will be interesting to see if this trend does start to take hold in 2013.

8. Larger Fonts

This is yet another one I've started to notice. It seemed that for the longest of times, 12-14px fonts were the standard across the web for body text. More recently though, I've seen many websites opt instead for much larger fonts in the range of 16-18px for just their body text. Here is one by Trent Walton.

This is significant in the fact that with responsive web design, typography plays an important role in the readability of your content. When 18px font is displayed on an iPhone, it's much easier to read than having to read 12px text. However, the trade-off on this is that when longer articles are written with such a large font, it becomes rather obnoxious when viewing it on a larger, less pixel-dense screen.

9. Larger Search Inputs

This is one that I hadn't noticed until fellow Industry writer, Jordan pointed out to me. Search is becoming more and more of a significant factor in every aspect of design. From a social network UX to a publication UX, a search function is almost a must to separate what we need/want from what we don't.

Both The Noun Project and the new Myspace take advantage of an extremely large search function. This past year was the first time Google search had hit a plateau and I believe it's due to more proprietary forms of search instead of an over-generalised method.

Although this doesn't refer to the large search field, Path has made a big dive into a unique search function that is custom-made for their services. Expect much of this too.

10. GIFs as Design Elements

This is one which both Twitter replies and fellow Industry writers wanted to see on the list. GIFs seem to be making an uprising online and the next logical step is to use them in design. PNGs tend to be the current standard and GIFs will allow for a code-less way to add change or motion to specific elements.

I'm not quite sure of the technical capacity of this, as a lot of times GIFs can render weird on mobile devices, but I must agree with everyone who said that many will attempt to implement this in the coming year.

11. Designing For Humans

This isn't so much as a trend as it is a philosophy. Too often we are caught up in looking over every single detail that we fail to take a step back and look at the overall reason for designing the way we do.

It's well known that people value good design, but in that regard, most of the items that hold such value also have the touch of humanism that enables them to connect with the design, product, etc. on a deeper level.

I feel as though this will begin to take more shape throughout this year. We've gotten to a point where we know the true capabilities of the devices we hold and use each and every day. It needs to be the goal of designers to make applications, publications, and the like that are made with not only the UX in mind, but the overall philosophy and connection that is made with their creation.

Marco Arment does an incredible job with this in The Magazine. While its tailored for tech-oriented people, he also curates the articles in such a manner that even someone with a lack of tech knowledge can appreciate the articles that are within it. He didn't come up with the idea of The Magazine to be beautiful (although it is), he designed it to be a publication that held values, potential, a connection, and on a deeper level, a philosophy. Humans crave objects — be them physical or on a screen — that they can connect with.

As important as technical detail is, it's the experience with the design that is going to make an impact with humans. After all, we're not here to make products just for the design community; we're designing to improve the world, as cheesy as it may sound. If you can change how humans interact with their daily devices in such a significant manner, you will begin to affect their overall productivity and/or state of mind, which directly correlates with their input into the world.

I want to see this as a trend. Will it be? I'm not sure. It would definitely be nice though. There's no point in having a pixel-perfect design if it doesn't help me simplify or improve my life in some regard. It's something that is overlooked a bit too much.

12. New colours (we're looking at you, #00A0D1)

If there's one thing that's been stagnant in the design community, it's the originality with colours. 60 per cent of the applications on my homescreen are one colour. Blue. I understand the colour theory behind blue, but come on, guys. We're half of a decade into having an app store with icons to represent apps, yet one colour has consistently ruled them all.

It's not just icons, though. Websites from Tumblr to Pandora are lathered generously with an absurd amount of blue. Colour theory is interesting as all get out. So get out there and change it up a bit. Not every colour is going to work; that's a fact. But there's no harm in experimenting and stepping out of the norm.

This isn't so much a trend as it is a plea, but maybe with a bit of wishful thinking, things will change.

13. Vector

With better tools at hand, designer's lives are being made much easier with the advancements with vector. I'm just getting into design, but I can honestly say Sketch is one of the most well thought out applications available for designers.

Being able to come up with one design and scale for different screen resolutions has truly never been simpler. If there's one thing anyone wants in their life it's a more streamlined workflow and vector does just that.

Expect even more designers to jump onto this ship in 2013 as there is little reason not to.

Conclusion

2013 should be a wonderful year for designers and developers alike. More opportunities are presenting themselves each day and with those opportunities, risks are taken and trends are set. We'll see which of these trends survive and which ones may not come to fruition. Are there any other ones you feel will take 2013 by storm? If so, leave them in the comments.


This article was reproduced with kind permission from The Industry. You can follow them on Twitter here.


Comments

    So pretty much everything to help out those who have a touchscreen :\

    What's a "Hamburger Menu Drawer"?

      It's a drawer that contains menus at a restaurant where you buy and consume hamburgers.

      Took me a while to work out too, but I think it's referring to the appearance of the button.
      ie three parallel, horizontal lines (kinda like a basic hamburger.

      Rather than having a menu or settings button, the "hamburger" icon can be used for a more visual clue as to where to find the menu.

    I like a lot of these things, but noooo to gifs as design elements.

      Agreed. It seems unrecognized that SVG graphics can be animated with JS. Perfect at any scale, smaller file sizes, and with the potential for a much greater range of interactive possibilities than a GIF could ever achieve.

        But at the expense of processing. It requires pretty much nothing to play a gif animation but playing an SVG animation will use your CPU/GPU, maybe too much.

          IE9/10 and Firefox both handle it like a champ.. full hardware acceleration with ease. Chrome fares much worse, but even animated GIFs will bring Chrome to it's knees.

    "The best example I have found yet is the camera icon on the iOS lock screen. Many people unfamiliar with iOS would more than likely resort to just clicking on it instead of dragging it up. Instead of not doing anything when pressed, it does a little bounce up and down; revealing the camera feature underneath. This gives a visual hint to unknowing users as to how to properly use it in the future. By offering this hint, users are able to pick up on things rather quickly."

    Seriously? The WP7 lockscreens been doing that since 2010...

      HTC's Sense unlocker ring has done that for a few years too.

        Oh, we should know though, Its a brand new feature that Apple has invented in their new design, they came up with the idea first, no one else has ever done it before them they are the world leaders that can do anything they want and everyone will support.
        /end of sarcasm/rant

          It doesn't say anywhere in the article that Apple invented the design. It's just an example, one which people may be familiar with, to explain his point. It also helps that he had an anecdote to go with it.

            Author of post, here: Exactly. And even then, I was using that as an example of affordance. When you tap the camera button, it bounces to show you what's underneath. So for new individuals who try to press it, it will give a hint as what to do; affordance. It's a neat way to make people familiar with gestures.

            Yeah I know it was just a rant, and over exaggeration, it just annoys me how whenever they release something that other users have had for ages it such a big hype, like the pull-down notifications, say at a school, all the "popular" kids with iPhones, you would hear them talking about it, "oh my god, this notification bar thing is awesome I can see all of my notifications simply by sliding my finger from the top of the screen!!"
            Then there is the "normal kids" some with Android and other devices that have been able to do it for ages.

            I personally just don't agree with it. If Apple copys Google, it's okay
            But if Google copys Apple, there is a massive uproar, and stuff gets patented, lawsuits.etc etc
            This is my point of view, if no one agrees with it, I respect that.

              Also there's a degree of double standards going, given Apple has a patent on the horizontally-slide-an-image-to-unlock yet here they are using exactly one of the alternatives, right to the bounce to inform people what to do.

    How about 'the era of stupid overuse of landscape for icons'. Seriously. I mean, Im not a mac guy, I do prefer Android and Im running Win7, but the Windows 8 'metro', there's so much realestate taken up there by stupidly designed tiles, large, large, large tiles that could be so much smaller that...

    Yeah you get my point :\ Stupid design is stupid.

      Completely agree with you. The design is incredibly wasteful. There is also the issue of "Live Tiles". Read any article and you get the impression that all tiles are live. The reality is quite different. Very few tiles are live, with most simply being static tiles similar to any other OS. And why wouldn't that be the case! The is no need for Word, PPT, Excel, a PDF reader and so many other tiles to be live. The basic install has only a few live tiles. The rest as simply overly large static tiles that take-up valuable screen real estate for no good reason. W8 UI really is quite a disaster!

        Live tiles should be restricted to things that make sense with them. Weather, clocks etc. But that's just Win7 widgets and gadgets ffs. If everything was just a square that would be one thing, but certain things are GIANT rectangles, other are tiny tiny squares, others are medium, others are HUGE... it's a designing nightmare.

    Flat design hasn't exactly been a winner for MS:
    Zune - discontinued due to poor sales
    Windows Phone - less than 3% market share
    Windows 8 - adoption rate lower than Vista

      I think I lost a few brain cells reading that

      You forgot about the Kin.

    Wider websites? I don't think so, we have the 700px wide because 1024x7xx is what the majority of computers in the world run on. Having a few big screens and a very, very, very, very, very small segmentation of a higher than the already higher resoltion screens we have been using for years, but were not using for width, is not going to change that. If anything I think they will stay small, or get smaller to adapt to mobile phone internet use, the majority share of which is cruddy old androids, so don't expect most websites to shift to a higher res anytime soon.

    Besides, you can zoom in if you really want, if the site is primarily text/vector stuff (like this one) it won't look pixelated anyway.

    Last edited 12/01/13 1:19 am

    Native over web? That's a step backwards from things I've been reading about.

    People seem to be pretty pissed they have to rebuy their crap if they change phone manufacturers. Not to mention technologies like WebGL and HTML5 slowly but surely turning everything into a website. Wasn't Dune advertised on here/Kotaku a little while ago? Granted it's not exactly Crysis, but really, how far off do you think that really is?

      No he has a point. 2012 saw a big movement towards HTML5, however , in my view as an app developer, I'm finding a lot of clients just don't *like* HTML5 apps. The responsiveness is rarely as good as the real thing, and in truth I'm not convinced it saves much time at all with development once you factor in all the time required to engineer whole new user experiences to get these things to match the host operating system. Truth be told coding from scratch rarely takes much longer, and the end result is always going to feel much more natural.

        Porting from iOS to Android to Windows Phone to PC to Mac to Linux to Kindle to Whatever-the-hell-else can not be an easy, non-time-consuming task. Detecting what OS/Browser is running and displaying an HTML template designed for that OS/Browser by contrast, is a lot easier. The only real issue is the responsiveness of Javascript, which seemingly gets better every update (I think the companies have caught on to this, and work diligently on their JS Engines to improve overall response time).

        Native will always be faster, but then you have say FirefoxOS which, from what I've read, supports Javascript natively and allows you access to the phones inner workings with an API (exactly what I've wanted for a long time). This alone should improve the overall responsive times for web-apps (and removes a lot of difficulty). Ubuntu for Mobile (whatever they're calling it) will also be supporting this, IIRC.

        The problem then is simply, Apple and Windows will probably never do this, which means web-apps will always be less responsive than native apps on those systems. This is however a reasonable (actually, the more I think about it, the more I think it's a dick move -- but I still get it) design mechanism for any company that wants to run an app-store. If I can save (example - does not exist) calculator.tiberath.com to my home-screen, and load a calculator app that's just-as or close-to the responsiveness of a native app bought from an app store, I have no real reason to build apps for or buy apps from those particular stores.

        (Make FirefoxOS look hipster and UbuntuOS look friendly, functional and easy. Then a mass Social Network campaign... Ahh a man can dream.)

Join the discussion!

Trending Stories Right Now