13 Design Trends For 2013

13 Design Trends For 2013

Jan 07, 2013 Opinions

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 honor 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 utilizes 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 minimizing 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-generalized 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 Colors (we’re looking at you, #00A0D1)

If there’s one thing that’s been stagnant in the design community, it’s the originality with colors. Sixty percent of the applications on my homescreen are one color. Blue. I understand the color 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 color 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. Color theory is interesting as all get out. So get out there and change it up a bit. Not every color 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.

  • http://twitter.com/ChristianBundy Christian Bundy

    Hamburger? What are you talking about?

    • http://jarederondu.com Jared Erondu

      the menu drawer icon top-left in a lot of social apps like Facebook

    • Nick Mason

      Had this same question – had to think about it long and hard, finally figured it out. See here for an example: http://css-tricks.com/three-line-menu-navicon/ – i don’t know that I’d call it a hamburger, maybe more of a ‘sandwich’ :)

  • emtarte

    “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.” The move from buttons to pure, gestural interfaces has certainly increased as of late (Clear being a great example), but I’m not convinced that this is a product of “Flat” design trends. Instead, I wonder if skeumorphic apps that have invested more time into functioning like their inspirations (think Paper) rather than just looking like them (think Apple’s groan-worthy Podcast app) have helped familiarize a wider audience with gesture-based interaction.

    • http://www.gannonburgett.com Gannon Burgett

      I do agree very much so. Designers would rather sacrifice a bit of surface area on the display for a more realistic representation rather than the flat, more modern UI that I referred to. I should widened my outlook on that one.

  • first last

    “Less Buttons” should be “Fewer Buttons”

    Use “less” when measuring something and “fewer” when counting things.

    • http://www.gannonburgett.com Gannon Burgett

      Good catch. Thank you. It’s updated.

      • garethadams

        A nicer mnemonic is “fewer” for things you can have “a few” of, and “less” of things you can have “a little” of

        • http://sansink.org/ Adam Haworth

          Just picked up another mistake too: ” can render weird on” regarding GIFs on mobiles – surely this should be weirdly? Nice and interesting piece though.

  • Mike Antonic

    Regarding point 13 (Vectors), don’t forget about PaintCode (http://www.paintcodeapp.com). It’s basically a Sketch with Objective-C drawing code generator. The app makes it much easier to replace PNG with vector drawings in all kinds of apps.

    • http://www.gannonburgett.com Gannon Burgett

      That looks awesome. I’m not a developer by any means, so I’ve never had reason to use it, but it looks like a brilliant tool.

  • http://thisiscsr.com/ CSR

    neatly compiled post. i guess this will stand as a standard for this year ;) you should also make a post on How to Design for 2013 but I think this post itself solves that need :)

    • http://www.gannonburgett.com Gannon Burgett

      Thank you. I may have another post along these lines, maybe not. I’m trying to come up with a few more ideas.

  • Kevin Haggerty

    I’m hoping this will become the year that native web apps replace static photo editors as the tool of choice for web designers. The trend of prototyping in the browser is the real game changer.

    Photoshop is great for photos and other graphic elements. But please let’s make everyone’s lives easier and leave the layout and the typography to the browser.

    To that end, I’ve developed something that I call Edit Room:

    http://www.edit-room.com

    I truly believe it’s a better way to work, and i’ve been using it extensively for both the application design itself as well as client work and idea sketchpad.

    Go from content outlines to rough layouts, all the way to fully responsive, detailed, laid out work. All in the same app. Your design is always rendered in pure HTML and CSS, with easy workflow integrations to get you iterating quickly based on real-world feedback. Your webfonts from TypeKit and FontDeck. Quickly test your live prototypes across all the devices you can get your hands on with review URLs.

    I know this isn’t the only tool like this, but this one is mine. Do please leave links to others that you know of and use in the comments as well. I’m happy to answer any questions as well.

  • Julius

    Seems to me this article is not solely about App Design. Title of the article is a bit misleading.

    • http://www.gannonburgett.com Gannon Burgett

      We debated on that a bit, as yes, they could definitely go over all aspects of design, but overall these can all apply to app design. Only a few are going to be prominent outside of the app market-place.

  • Guest

    ‘…a 700px wide website leaves too much white space when viewing it on a “Retina” screen or a 27″ iMac.’

    What does a retina device have to do with anything in this statement? My understanding is that retina devices still have the “normal” number of “CSS pixels”…but the density is increased.

    • http://www.gannonburgett.com Gannon Burgett

      Honestly, I’m not sure of all the technical details due to the fact I’m just beginning to get into web design, but there’s a difference between fixed-width and responsive sites. Responsive sites can have the body text set at 700px wide and still scale down, whereas fixed-width sites will stay 700px wide regardless of screen size. Responsive coding (from my basic knowledge) is done instead by using a code of some sort to recognizing the display width and sets parameters in percentages instead of pixels. By setting it in percentages, it will do as you’re talking about, but if you design it with a specific pixel-width, it won’t show up the same with different densities/sizes.

      • http://www.facebook.com/pixelpp Steve Oh

        Original commenter was correct. Browsers render websites at the same actual size regardless of retina.

        • http://www.gannonburgett.com Gannon Burgett

          Thanks for the insight!

  • Sam
    1. Wider sites?? Ha! No. My first reaction coming here was how awful an experience it is on a mobile screen. If anyone does adopt that trend, they’ll die a slow irrelevant death as mobile takes over.
    • http://www.gannonburgett.com Gannon Burgett

      “This makes sense in some regards, but when you have the option for creating a responsive site…”

      That’s why I reiterated the significance of responsive web design. You can scale it down as the screen size goes down, but there’s no need for a 640px width body text column on a 27″ display just because you want it to work on mobile. Incorporating responsive webs design allows for it to scale across all screen sizes.

  • Rob Grainger

    I hope GIFs do not take off, as they are proprietary and open source browsers are not free to implement them, without paying a license to CompuServe (or whoever owns the license now)

    • http://www.gannonburgett.com Gannon Burgett

      After some more research, I’ve come to realize that .gifs may not be the best bet. I was told by another commenter on this post over on Gizmodo that A(nimated)PNGs are in existence and seem a bit more suitable than GIFs in a lot of situations. I’m going to do some research into APNGs and potentially write an article on how they might have potential in the future of design.

    • James

      Patents on GIFs (specifically the LZW algorithm) are dead now (since 2003/2004 depending on the country). They’re free to use/implement.

  • http://www.goodbytes.be/ Joris

    I’m usually quite skeptic when it comes to articles about web trends. You sum up quite nicely what will be an overused type of design in the next months and I understand why, it’s great! :)

    • http://www.gannonburgett.com Gannon Burgett

      Thank you! There are some I missed out on adding and some I should’ve/could’ve combined, but overall I feel it was a decent article that shows the potential for design in the coming months.

      • http://www.goodbytes.be/ Joris

        It sure does!

  • Kirk Wood

    I love that you place the “flat design” that Microsoft i pushing almost polar opposite of “Designing For Humans.” The interesting thing is that as buttons became prevalent, you regularly saw reference to research indicating this helped people. Now we just here, some designer who claims to know what looks good says so.

    • http://www.gannonburgett.com Gannon Burgett

      I hadn’t even noticed the contrast there. Maybe it was subconscious ambitions. I disagree with your last statement in the sense that we aren’t saying just what looks good. As designers, we aren’t bound merely to aesthetics. We need to take into account the overall UX which accounts for the psychology and even physiology behind users interacting with applications and content. Gestures provide a much quicker method of getting things done than trying to click a button; especially when there is a large selection of buttons and options to choose from. People won’t like it at first; we don’t like change by nature, but as gestures become more prevalent, they will become the norm and standards will be made; just in time for the next change.

  • Douglas Davidson

    Regarding “New Colours”, our enterprise application has gone through two colour redesigns during its 14 years life cycle. We provided a customiziable stylesheet which the client could then tailor the application display along their own corporate lines.
    We started with Subtle Green / Grey combination and found 75% of our clients wanted to change it.
    We changed to a Brown / muted yellow and found 90% of our clients wanted to change it.
    We changes to Blue and found on 5% ouf clients wanted to change it.

    History speaks for itself, the corporate markets wants Blue and that is what they are getting.

    • http://www.gannonburgett.com Gannon Burgett

      Definitely. You can’t change human psychology. Blue is without a doubt the most pleasing color to the eye, thus it looks natural in design. I don’t expect it to change, per se, but I do hope that people will venture out more with the idea of other colors. I have a feeling muted colors may be making their way into design as well. Bright and vibrant grabs attention, but if history tells us anything, obnoxious isn’t always way to go. Just think about the horrific over-glossy web 2.0 buttons. Heck, I usually don’t even like the glossy look on my iPhone’s app icons.

      • Studio2D

        I have had the same experience. When I use any color other than blue, I am likely to get push-back from my client. But no one ever has an argument with blue. My job as the designer is to keep presenting the right colors for the project. And the client’s job seems to be to keep asking for blue.

  • http://www.facebook.com/flaviomauri Flavio Mauri

    The reason for thin websites is readability, i cannot see how it can change. One thing is a portal, another a blog. Yes, there’s multi-column layout (and native CSS support) but if I want to read i want the content to be right in the middle of the screen… i already get furious for the left-aligned player in YT. I can imagine a slightly wider content-column, with text layed out in 2-3 cols, but nothing more.

  • John1161

    Quote from the author: “Honestly, I’m not sure of all the technical details due to the fact I’m just beginning to get into web design, but there’s a difference between fixed-width and responsive sites.”

    How can you forecast trends in the web design industry when you admit to being a beginner in web design? For example, #5 – Native Over Web. I’d venture to say that most in the industry are seeing the mobile web really take off. Users are getting tired of installing yet another app just to do something basic that a mobile website can do. So the trend seems to be just the opposite of what we’re told in this article.

    And #12 ends with, “This isn’t so much a trend as it is a plea…” This seems to confirm the fact that this is a list of personal preferences of the author instead of true trends we’ll see in 2013.

    Is Quartz the best example of responsive you’ve seen? It doesn’t do much beyond adjust basic layout based on width. If you want to see a site that’s a better example of responsive design, try Starbucks. It’s way more sophisticated than Quartz. And I’m not claiming Starbucks to the best–there are probably better ones out there. I’m just saying that Quartz is pretty basic.

    And #11: “This isn’t so much as a trend as it is a philosophy.” Once again, the article title seems to be for SEO more than anything else…what a sham!

  • Himanshu Vyas

    Good Article. One things I noticed that in trentwalton.com it’s not easy to read the content with 18-20px pixels on Desktop screens, The font sixeshould be less for 2-4 pixels.

  • http://twitter.com/ScottSawyer Scott Sawyer

    Good post, I like seeing what other people see as trends. Some of the comments are overly harsh for n opinion piece. Soft like getting snippy with the weather man. One trend I think you will see more of is icon fonts and typography design. Personally, I’d like to see less native apps. My phone is cluttered with all these limited function apps. Each wants permission to know my mother’s social security number and what time my movements take place just to perform a basic task.

  • Dimitris

    This paragraph about “Animation as Afordance”-does it related only for mobile devices, or also for the web?

  • rickysynnot

    Where you say “too much white space when viewing it on a “Retina” screen”… this should make no difference – RETINA only increases the pixel density, but represents the same phisical CSS pixel measurements. I understand that on a TV, Projector or a 27″ iMac it would be an issue, but this is not the case only because a device has a RETINA enabled display. Great list though! Well written :)

  • $umalika

    Had little confuse about what is Hamburger…But after reading the comments get an idea about it…Very useful website…
    :)

  • Welf Aaron

    art deco is seen already as a trend in flat design. “jugendstil” in it’s simpliest form could be the trend for 2014
    see my first blog ever for additional info please
    http://designtrends2013.blogspot.com.es/

  • Si

    Well looks like Facebook have dropped the hamburger menu : https://itunes.apple.com/us/app/facebook/id284882215

List Grid
Load More