Work table with various design tools.

9 web design trends unfolding in 2014

olympics

With 2014 well underway, I wanted to share with you some thoughts, predictions, theories and flat-out guesses as to what we have to look forward to in the world of web design in the coming months:

MOBILE-INSPIRED UI

More and more, desktop sites are resembling mobile experiences: “Below the fold” has little meaning these days, as most users are very comfortable sliding down to view content, and drawer-style, slide-down and burger navicons are everywhere on the desktop. These are just a few of the ways that mobile browsing is now dominating our design patterns, and desktop UI’s are playing catching up.

Slate-1

Slate’s desktop site eschews traditional navigation in favor of the burger navicon, freeing up more space for content

STORYTELLING

Take your site’s visitors on a journey. Tell them a story. Browsing experiences are making it easier for designers to create truly compelling experiences. Motion is everywhere. Video is integrated into designs. Parallax is practically mainstream. Designers are creating more and more engaging, cinematic websites that are giving their users a more narrative, cinematic experience when web browsing, and users are growing to expect it.

olympics_2

(NOT-SO) FLAT DESIGN

Of course “flat” design is here to stay: made official by Apple’s adoption of it for iOS7 this past fall, flat simply makes sense, especially in a multi-device browsing world. It allows the UI to be unobtrusive and lets the content really shine. However, I expect to be seeing more texture, detail & warmth creeping back into websites. Designers have embraced the look of “flat”, but are finding subtle ways, through photography, texture and illustrative elements, to add depth and character and make flat layouts feel, well, not-so-flat.

Harrys

Harry’s blends beautiful photography with subtile textures and patterns to make a very flat layout feel warm and authentic.

wegrowCherries

1-PAGE WEBSITES

1-page websites are becoming more rich and robust, and often carry as much weight and content as a more ‘traditional’, multi-page site. More and more often, we’re finding that a one-page website is a perfect solution for our clients needs. When the message is short, direct and clear, there’s often no better solution.

onePageLove

Visit One Page Love for a showcase of some amazing, navigationally-challenged websites.

26gems

ICONS & SCALABLE VECTORS

SVG have been around for awhile, but no support in older browsers (Hello, IE8) prevented many of us from using them. Now that we’re moving far enough away from those days, and icon fonts are making their way into designs, more resolution-independent images are populating websites in place of traditional bitmaps, meaning more and more sharp, scalable graphics are populating websites.

This is even more important now that Apple’s retina display offers pixel densities greater than 72 PPI (anywhere from 220 – 326 PPI currently); the concept of “web resolution” is going to need to be re-calibrated, and the use of resolution-independent vector graphics is going to continue increase in 2014.

FontAwesome

Font Awesome’s icon fonts are, well, awesome.

TILES & MASONRY

The rare trend that you can point back towards Microsoft, at least for helping to popularize it, tiles & masonry layouts let designers present a lot of content in efficient, flexible patterns & grids. This fits well with more content-rich sites where different content is bundled or “bucketed” and fit within either clean, orderly grids or the more interlocking patterns of masonry layouts.

Skype

RICH TYPOGRAPHY

Few elements can convey so much with so little in a layout as fonts do. Designers are really beginning to treat web typography with the same attention that print designers have in the past: CSS has given us the tools we need to really control & style fonts with precision & care, and web fonts have opened up thousands of fonts that were previously unavailable to web design.

CropTheBlock

AMBIENT VIDEO

The natural progression from full-screen photography that has dominated the past 3 or 4 years, full-screen videos, when done well, can create a beautiful, immersive effect that strengthens a narrative, creates a context, or deepens an experience. And it’s a really nifty effect. Expect to see video integrated directly into designs in more and more creative ways throughout ‘14.

houseEyewear

THE MATRIX

Well not quite yet, but 2014 will definitely see the “internet of things” really start to impact our day to day lives. No longer relegated to devices & browsers, the interwebs are in our pockets, on our wrists, cars, thermostats, appliances, toothbrushes, dog collars, etc. Designers and developers will be challenged with new places to create user experiences that have never been attempted before, and that’s an exciting (if not a bit scary) place for us to be.

matrix