13 Design Trends For 2013

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.


The Cheapest NBN 50 Plans

It’s the most popular NBN speed in Australia for a reason. Here are the cheapest plans available.

At Gizmodo, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.