How to think about design in 2014
What started out as a small internal office presentation about design trends has now grown into a exploration of possible design strategies for 2014 and beyond. Here are some highlights:
FLAT USER INTERFACE [UI]
is creating trends for : Look and feel, overall design approach, colours
These days, if you own a smart mobile device of any sort, casually browse the Internet or even just look at a print ad every now and then, you cannot escape Flat design. Don’t just take our word for it. Current statistics say so.
After the elaborate details and obvious visual metaphors of skeuomorphic design, Flat UI has emerged as the rebel champion of web, graphic and interface design. Skeuomorphism had its uses of course. It saw us through the transition from „computers are scary“ to „my smartphone understands me“. Targeting a more tech savvy audience than 10 years ago, Flat UI simplifies, minimalises and puts function above comforting illustrative frills. Like Minimalism, Flat UI ruthlessly tosses out drop shadows, faux-realistic textures and even unnecessary text. But it has no problems adding the spice of bright, bold colours, inventive iconography/2D illustration and quirky micro-interaction.
The story of extreme Skeuomorphism vs extreme Flat UI is also the story of Steve Jobs-era Apple vs Microsoft’s Metro UI. While Apple and Microsoft have been pushing against each other, Google can be seen smartly working towards the sweet spot in between. „Flat but not quite“, is in our opinion the perfect goal to work towards right now. It can be seen applied by Google and by guenthergoach.at, one of our own recent creations.
Flat UI comes with a trending palette of bold colours seen in both mono- and multi-chromatic combinations. For a quick and dirty access to this palette, FlatUI Colours is as simple as a colour picker tool can get. A good place to start, but sticking to these colour trends too strongly can results in your website looking too similar to others out there. For example, „Emerald„, the Pantone colour of 2013 has already been extensively used. Several popular free Flat UI templates from Designmodo made heavy use of it. In 2014, some innovative diversion from these colours is required.
– MICRO UX [USER INTERACTION]
Microinteractions are something that can lend that extra polish and make a website memorable for a user. When used well, tiny quirky interactions can make a user’s experience more interesting while still keeping the focus on content.
is creating trends for : Hero text, emphasis on content, responsive design
With all this minimalization of content, the little that is left becomes even more important. Responsive typography isn’t just about having text shift around everytime the container size is changed. There is increasing focus on designing optimal font sizes, line heights, line lengths, font weights etc.
There are 2 main ways to achieve truly liquid responsiveness for type.
1- JQuery plugins : For full width statement headlines, slabText works pretty well. For all other text needs, something like FlowTypeJS comes in handy.
2- CSS Viewport Units : Font sizes can now be specified in viewport units rather than pixels, em, points etc. A viewport unit is basically a percentage of the viewport or browser size. For example, 1vw is 1% of the initial browser width. The browser support as you can imagine is not great yet. That and other problems don’t make viewport units a viable option at the moment. But we’re keeping our eye on this for future use.
If you’re ready to settle for adaptive rather than fluid responsiveness, there is the commonly used solution of Media queries. At manually defined breakpoints, font properties can be changed to match the specified screen size. This solution is effective for now but perhaps as screen sizes get more unpredictable and Flat UI grows into the superhero of responsive design, text solutions might have to get more complex too.
is creating trends for : Website elements, content loading, loading time, navigation
The focus on designing for mobile/responsive browsing is bending the use of website elements in a certain way. Here are a few observations:
1- Integration with social media : It’s no accident that your mobile web use keeps switching between browser and apps.
2- Making the most of one page : Lightboxes, overlays, expanding tiles, dynamic content loading etc. Navigating to new pages is so 2010. The idea is to give the user all the necessary information in one go but keeping it clutter-free like Flat UI demands.
This thinking is also leading to long scrolling sites as designers keep the effortless swipe action on mobile/tablet devices in mind. With the various kinds of scrolling available, it’s important to consider whether it is really necessary before implementing one. The Etsy.com case study on infinite scrolling warns us not to be too hasty in adopting trends if they don’t apply to our target audience.
3- Fixed position content: Fixed navigation bars seem to be all the rage right now and what better example than the Awwwards website? Even if it isn’t the navigation, to have some content in a fixed position makes a lot of functional sense. Keeping users oriented on long confusing pages all the way into 2014.
4- Dropping the sidebar
– LARGE HERO AREAS
A space that has so far been occupied mostly by sliders is now evolving to become a hero area. The intro or landing area of a website is becoming a way to convey the point or signature feature of your website/company as briefly as possible.
Used with caution, these tips, tricks and insights will make our 2014 more interesting. How about yours?