Top design trends and best user interface tricks of 2013: 10 UI/UX design application elements to keep your eyes on…

Posted by | · · · · · | Design | No Comments on Top design trends and best user interface tricks of 2013: 10 UI/UX design application elements to keep your eyes on…

1.  Give a good first impression with large, simple logins using sign up through social media.

Your mom always told you to make sure your front door looks presentable.  The same is true with design.  Make sure that your front door with the login and sign up is well designed and easy to understand.  I have to admit that my front door still needs to be painted but nonetheless I recognize this to be a top priority of 2013!  The applications that people most trust often have simple, clean, and well animated logins that implement social media routes such as signing up through facebook.  It leaves a lasting impression on the user that the rest of the site is in order.  Never forget the basics: logging in, browsing and purchasing.  You get those three elements right and you are halfway there.  At the end of the day, customers still appreciate an application that have the basics down.   What are some applications that achieve excellent logins?  Check out Mail chimp,  Airbnb, and Odesk.  Each is unique, user friendly, and welcoming in it’s own way.

Airbnb screenshot

 

2.  Design flat one or two color icons (and if you haven’t already, lose those drop shadows).  

Watch out Apple! Microsoft is back in the game.  With the release of Windows 8, I believe there will be a new found appreciation for Microsoft.  Windows 8 is going flat, way flat, and that is where design has come to in 2013.  Make your icons simple, flat, and one or two colors.  Always design your icons with 16×16 in mind as a preliminary concept.  If you can easily read the icon at that size, then it will be even more effective at 512×512.  And while drop shadows were out in 2011, they are still out in 2013.  For examples of simple icons, check Windows 8.

image

3.  Branding is less about simply having a logo and more about consistently grouping colors to associate products, categories, and ideas: know when to use colors or when to lose them.

Often clients only care about logos and will pay big bucks for a symbol.  But the reality is that logos are only a slice of the branding puzzle.  Powerful brands use color consistently and across their entire brand – not just within their logo.  Make your brand important by implementing powerful colors that are consistently used to associate ideas.   An application that did a powerful job of using colors includes Labbler.  They effectively group colors in a way that associate with categories, making the entire site easier to use. Read more about branding and colors by going to the Usability Post.

Labbler effective branding

4.  Less is always, always more… so remove the frame, drop shadow, and anything else distracting in that table.

At the end of the day the most important thing you want to read is the data and not the design surrounding it.  Make your tables simple to use and without too many elements.  Make sure that you aren’t distracting the user with too many shadows, outlines, and colors.  In this case, less is honest and to the point. An application that does a good job of this is Harvest.  I believe 2013 will continue to strip away excess design elements.

image

 

5. The buzz about responsive design and if it is worth it.

Take a look at the power of responsive design by changing the size of your browser screen when checking out this website: CSS tricks.  You’ll see that the design responds as you make your screen larger and smaller.  According to Kayla Knight of Smashing Magazine,

“Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.”

I have to admit that I’m not an expert on responsive design so I can’t honestly speak from a place of true knowledge.  I have only tried to research it’s use in several instances to determine it’s value for clients and whether or not we can easily implement or if making a mobile site is more affordable.  In a few cases, I was advised that a separate mobile site would be quicker and more affordable than recreating the site for responsive design.  While I believe responsive design is the best solution when starting from scratch on a brand new website, it could be more time consuming and not necessarily worth it if you are trying to convert an existing site with many features.  Most everyone touts responsive techniques except a few pioneering revolters such as Tom Ewer of “5 Reasons Why Responsive Design Is Not Worth It”.    Just because responsive is a trend does not mean it will last. Do you remember some common trends that didn’t last?  Remember minidiscs?  Minidiscs seemed so practical that everyone would want to use minidiscs instead of a large regular cd, but it just didn’t get quite that popular and an even newer solution came about: online music.  I think responsive design is the forefront of mobile design but I’m torn on if it is the best solution for ALL cases.

css tricks

6.  Everything is a button, so design accordingly.

The reality is that people have become desensitized to advertising and have become accustomed to avoiding ads.  Sometimes the most simple links can often be more effective than a button simply because people are so used to avoiding image based advertising.  In fact, in 2013 assume that everything on the screen will be a button.  I believe the days of saying ‘click here’ are unnecessary. Everything will be clickable – everying is a button.  One app that does a killer job of using buttons is Allrecipes.  Check it out if you didn’t yet use it this Thanksgiving.

image

7.  Horizontal scrolling and zooming is here, alive and well.

The use of horizontal scrolling has come about with the use of mobile phones.  Many of our parents may not be used to this horizontal motion, but get used to it. It’s here to stay!  Design of 2013 will implement horizontal scrolling, zooming, rotating and everything else interactive.  Just don’t go overboard with it.  Eventually people may get tired of the motion sickness and revolt the back to the basics.  Here are three websites that use some really effective scrolling and zooming:
Buero-Buero
The Horizontal Way
Marc Rosella

image

8.  It’s only there when you need it, otherwise you don’t need to see it.  Don’t add anything that you don’t NEED to see.

This one is a tricky but I think it is definitely where things are moving in terms of design.  I still believe that design comes down to a golden of ‘three’.  You want to communicate three things at once in order to not overwhelm the user.  Therefore anything that surpasses this three element rule should be hidden or not be there at all.  Break up your page by a communication of three and only show the items that are absolutely necessary at that point in time.  Otherwise, hide it.  In some of the most effective applications, unnecessary elements are hidden. Take a look at Netflix for Windows 8.  They’ve striped away any elements that are complicated and give the user three main options: 1. browse 2. read 3. play.  Keep it simple stupid: remove the excess.

image

9.  Location based browsing and ‘the cloud’ is EVERYWHERE.

Two things that are truly taking over applications these days are location based mapping and cloud computing.  While I have worked on cloud software before, I still think that ‘the cloud’ is in some ways a coveted word in 2013 for ‘the internet’.  The reality is that the cloud is everywhere and it seems that if you are not keeping those two elements in mind when creating your application – think again.   Here are two applications to look out for that use mapping Grabio and cloud technology Dropbox.

image

10. Need a photograph?  Use a video instead.  Need search engine optimization?  Use a video instead.

Photographs are cool but videos are better.  Let me rephrase, videos are to photographs as color is to black and white: this is 2013 – make it happen with a video instead!  Also, videos are one of the best ways to improve your search rankings as there are less videos so this helps to bump your rankings when you search for associated words.  One application that does a great job of using videos to explain it’s product is Iomega Personal Cloud.  If you are looking for a videographer, I can suggest a few, but the winner of this year’s Denver RAW videography rewards is Diego Rodriguez so check out his company website at Icon Film and Video.

image

These are the trends and patterns that are here, now and coming on stronger in January. I hope 2013 will be a year for design and new found positivity.

Post by Ashley Johnson


No Comments

Leave a comment