Share:

Web design is always evolving. New technologies bring us exciting new possibilities every year. Plus, as we continually learn more about how people use the web, our design patterns are reshaped. And that’s a good thing – glossy buttons and Flash intros had their heyday, but we’ve moved on. At 352, we like to look ahead to the trends that will shape the web for the future. Whether you’re on the bleeding edge of web design or still in love with your Netscape browser, here are design trends to keep an eye on.

Flat Design Grows Up

Google introduced Android users to “Material Design”, where the myriad virtual windows and boxes we know and love are seen as though they were actually made of paper. The metaphor is simple, but it brings with it a host of subtle design patterns, including smooth touch transitions and a very slight sense of layered depth. As our digital design language becomes more sophisticated, we can expect to see even more twists on the flat design trend. Flat web sites will feel more real, more tactile and more interesting without losing any of their clarity and usability.

1404825741-YouTubeAndroidMaterialDesignRedesignConcept--pic1

Micro-interactions Make Moves

Micro-interactions are the delightful details of any user interface – the ones that give you instant feedback. Micro-interactions let you know immediately what the software is thinking, if you made a mistake, or what to expect next. These touch-points provide an abundance of context and information to any interface, reducing wait times and frustrations. They make the product make it feel alive, and snappier. But there’s a problem: they can be a real pain to build on the web! Fortunately, CSS3 animations and HTML5 features such as native validation and local storage will help designers execute their detail-oriented vision without the burden of building each feature from scratch. As these standards get better and become more widespread, you can expect to see many comatose websites spring to life.

Animation Arrives

When Adobe Flash faded away, the web lost a good segment of (often overused) sliding, fading, spinning elements, but animation has been making a comeback. And, it’s now wielded by designers who care enough to use it well. HTML5/CSS3 animation techniques have become more widely supported by web browsers and connected devices, even entering the world of 3D. At the same time, new design frameworks such as Famo.us are squeezing the most performance out of these devices for the smoothest, slickest animations ever seen on the web. It’s still a highly technical space right now, but as these tools become more abstracted and land in the hands of designers, we can expect to see some mind-blowing stuff.

Periodic table from famo.us
View the animation yourself.

Live Data Wakes Up the Web

Viewing data as it changes in real time is awesomely powerful, and it has tons of benefits. Users don’t need to spam the “refresh” button to see the most up-to-date information. For instance, an e-commerce customer could be notified when a product is about to run out of stock simply by watching the inventory number change on the web page, or a marketing team can perform real-time reputation management by tracking brand mentions. The technology to pipe information around the internet quickly can be leveraged for games, communication, risk monitoring, or virtually any aspect of business intelligence. There are a variety of libraries and services, like Firebase, growing up around this technology, and plugging it into your web site is becoming simpler month-by-month.

Ducksboard

SVG Smoothes Out the Wrinkles

SVG graphics looks great on every device, even retina displays. With typically smaller file sizes too, they also improve the performance and page load time of a page. As Internet Explorer 8 blessedly goes the way of the dodo, we can start using SVG as our go-to graphic format, making the web crisper, cleaner and faster. There’s another benefit to SVG: the elements inside the graphic can be manipulated live, by changing their size, rotation, or color. SnapSVG has used this to great effect to produce animated graphics that looks better and load faster than any format that has come before.

poor-quality-image

Things Get Personal

If you want to make your web site “social” it’s no longer sufficient to toss in a few Like buttons and a “log in with Facebook” form. Truly social web sites try to learn about their users’ interests, location and friends to help them get the most out of the software. Data engineers and designers working together can make useful connections out of the rich data available in social networks. Expect to be pleasantly surprised as web sites and apps begin to act more like personal concierge services.

Web Sites Become Web Apps

There are plenty of great, content-driven web sites that make sense as a collection of browsable pages, such as Wikipedia. But many other web sites make more sense as an app with a single, focused purpose. E-commerce web sites are a great example: help a customer find the product they want, and let them buy it. Anything that doesn’t serve that purpose is a distraction, and a cost to the business. Owners of these types of web sites are streamlining everything. Single-page-applications (SPAs) are becoming more widespread and will replace many, if not most, of the traditional web sites out there.

Predicting the future of web design is nearly impossible, but I’m confident that you’ll see many of these digital trends make advances across your online experience. What emerging techniques or technologies are you looking forward to the most?

Image credit: Crayonsman

Share:


Lincoln is the associate director of design at 352. With 17 years experience at the company, Lincoln has worked with some of the agency's top clients.