17 Web Design Trends That Will Take Over 2017

wrote this on in , . Share this Post

Designers working on web projects in 2017, in some ways, face more challenges than ever before. They have to create engaging websites, apps, and services that work seamlessly across all devices and work for a global audience at a pace that seems to speed up every year. That audience too is more tech savvy, have higher expectations and are more design literate than ever before and expect near perfection. Faced with these challenges, it's more important than ever for designers to be aware of emerging trends, solutions and patterns that can help them solve common issues, capture the full attention of their audiences, and deliver amazing experiences.

Here at ZURB, we've helped hundreds of companies surface the best solutions and take advantage of new patterns in their websites and products. We've created this list of 17 design and development trends we think every designer should be familiar with to shape their 2017 and well beyond.

(In no particular order...)

1. Brutalism

Taking its name from the architecture style of the 60's and 70's, Brutalism in design consists of bold, in-your-face collages of text and images, where anything goes. Echoing the web from yesteryear, Brutalist sites often employ simple markup, inline styles, and harsh colors and gradients. Some even argue that Instagram's new(er) gradient logo could be classified as Brutalist, with it's 90's esque neon colors and gradient design.

Example of a Brutalist Sitetheoutline.com

Pascal Deville, an authority on the Brutalism trend, and founder of brutalistwebsites.com defines the movement as this:

'In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design.'

But not all Brutalist websites are an all out attack on the eyes. A few sites like Bloomberg News and TheOutline.com borrow from the aesthetic while adding a level of polish not typically seen in most sites.

We think designers can use Brutalism to set their site apart from the rest with bold color choices, large typography, and layouts that break away from the common hero-image-then-3-up pattern.

2. Large Screen Design

When most people think of responsive web design, they think of shrinking a website down from a desktop to something that looks great on a tablet or mobile phone. But this is ignoring a growing segment of users, those that have large scale monitors. Yes, while mobile has certain exploded in popularity over the last ten years, so has extra large monitors with ever increasing pixel densities. The problem is that most focus has seemed to be on the smaller side of the spectrum with, few sites truly catering to their large screen users. By looking at your data, you may find that the majority of your users, or at least you're converting users are on displays of 1920x1080 or higher. There are a lot of cool and creative ways to use that kind of screen real estate and clever designers are not afraid to go big.

Apple is great example of large screen designapple.com

We think designers should be well acquainted with the data and know exactly who their audience is and what equipment they're on. By using techniques like resolution independent SVG's, bold typography, and serving up either high or low resolution photos with JavaScript, they can deliver a rich experience for everyone, even those with massive screens.

  • SVG’s are perfect for large screen design because they are scalable, resolution independent, have small file sizes and are supported by most browsers. Here are 10 resources to learn more about them.
  • Targeting SVGs with CSS allows you to do cool things like using media queries to hide and reveal parts of an image by screen size. Check out our lesson to learn the basics.
  • The Interchange component in Foundation uses media queries to load the images that are appropriate for a user's browser, making responsive images a snap. It decreases the load times for mobile users while still serving the bigger content to your visitors with higher screen resolutions. Learn how to use it.

3. Responsive Components

It's been nearly 8 years since Ethan Marcotte introduced the concept of responsive web design to the world, and we've seen it develop at an incredible pace. There are new techniques and technologies on the horizon though, that are going to dramatically simplify the write of responsive elements and make today's responsive sites look simplistic and naive. Some examples are element queries and the upcoming CSS-grid spec. These two technologies will enable web designers and developers to create experiences that are truly tuned to every device size. Element queries will allow creating components that are responsive based on the space allotted to them rather than the full screen size, while CSS-grid allows us to dramatically change layouts based on media queries.

Between the two, we believe we will see dramatic increase in the diversity of responsive patterns easily available to designers and front-end developers.

4. Device Specific Microinteractions

Up until now, the mobile-first method has meant building a slick and usable experience for small screens, and then layering in more complex interactions and animations for the desktop. But as mobile web tooling mature and mobile traffic eclipses that on desktop, we think there is a ton of opportunity to take advantage of the native paradigms of different devices for mobile-focused interactions. With the rise of touch and gesture related JavaScript libraries, there is a ton of opportunity for subtle animations in response to gestures (e.g. the Twitter mobile app's tweet refresh interaction) to make their way into more and more web applications.

As Nick Babich pointed out in a recent post on Medium, microinteractions provide users acknowledgement they crave. Popular apps like Slack have skillfully weaved them throughout the entire experience, delighting users and making the app feel more intuitive.

By taking advantage of whatever is available to them, device specific microinteractions will only serve to make microinteractions more compelling and personal.

  • Learn the basics of microinteractions, why they’re important, and how to use them.
  • Playing around CSS animations and transitions can help you build and test some neat microinteractions. Here’s a few techniques.

5. Split-screen Design

A simple way to highlight a contrast, balance text with images, or share two different products, split-screen design has grown in popularity with many designers. Easy to implement, split-screen design is a great way to present content in a way that feels fresh and balanced. For products or sites that require a comparison, split-screen design is a no brainer.

Example of split screen designtheoceanfortlauderdale.com

We've seen some really creative uses of split-screen design, and we think people are only beginning to scratch the surface. We're looking forward to new ways this pattern can be used to tell a unique story and guide users.

6. Reactive Animations

The explosion of native mobile apps this decade put a spotlight on human centered design. Apple's iPhone and iOS were breakthroughs in part because of the way they used design to mimic humans and appeal to emotion. How good a design looks now plays second fiddle to the way it feels. While mobile apps have been the driver of these breakthroughs, desktop experiences have still felt clunky and unintuitive. But advances in desktop browsers, JavaScript, and CSS variables, have made it possible to add those human focused interactions in really compelling ways.

We think we'll soon see more technologies that push what's possible in the browser, led by animation heavy interactions.

  • Our Reactive Listener playground piece is a great example of how reactive animation can be used to highlight content to users even before they take action.
  • By harnessing the power of JS and a little CSS, combined with the capabilities of modern browsers, we can deliver experiences that are responsive, fluid, react to user input and give native mobile apps a run for their money. Here are 10 resources to start with.

7. Refreshing Card Based Interfaces

While cards have been around for years, they are a solution that is not going away anytime soon. A pattern tailor made for responsive web design, they make it easy to display large amounts of information in a way that is easy to browse and simple to implement. In recent months, we've seen them used for more than text and links, becoming hubs of all kinds of rich media. Designers are playing around with rich microinteractions within cards themselves, and are finding ways to make this old pattern new again.

Google cards examplegoogle.com

We see no reason to abandon tried and true patterns that solve common problems, and are excited about the new experimentation we're seeing with cards.

Download the PDF for 10 More Trends, Exclusive Resources and Tutorials

The world of the web moves at light speed. It requires designers and developers working in it to constantly soak up new information, techniques and strategies to stay effective and impactful. To help them stay up to date and on top of new trends and solutions, we publish Responsive Reading, an email magazine covering new developments in responsive web design each month. It's free to sign up, and if you join now you'll get a free copy of our 17 Responsive Trends PDF that contains all 17 trends along with links to resources, tutorials and articles that will help you implement these trends in your own projects today.


Cantelope img
What's Underneath Matters: How MeUndies Increased Mobile Conversion by 40%
Container queries 2
,
Foundation & CSS Grid: Think Beyond the Page
Building blocks graphic
,
Foundation Building Blocks: Over 100 Components to Jump Start Your Projects