Web Design & Development Trends You'll See in 2015

Another year in the books and the web industry marches ever forward: browsers become more sophisticated, new technologies emerge, and mobile devices become more and more common. 2014 saw many new trends start to emerge; not just obvious, visual web design trends for site visitors but production & workflow trends for web developers, as well. We predict many of them to become mainstream in 2015. Trends like:

Ambient Background Video

We’ve Got All This Footage, Why Not Use it?

Used to be that to play a video in a browser, you had to have a Flash plugin. With the rise of browsers that support both the HTML5 <video> tag and H.264 format, they’ll run on their own and can be manipulated like any other page element. What to do with this new-found ability? Why, auto-play video in the background! Who needs a big static hero image when you can have a big attention-grabbing one?

Examples:

• airbnb
• Whiteboard
• PayPal
• Fleet Feet Sports
• Beyond the Beltway Insights

Online Style Guides

Not Just for PDFs that No One Looks at Any More

Professional companies take good care of their brand. They want any communication, be it email newsletter, business card, trade show booth, and of course website, to communicate with the same visual language. Since it’s a hassle to dig up the PDF that your designer sent you to know which color to use or which font goes for headlines or whether you can include the tagline with the logo or not, we’re seeing the rise of online style guides. They are easy to bookmark and accessible to an entire company. Since websites become more complex as time goes on, it makes more sense for the guide itself to demonstrate in place how web pages should look and behave.

Examples:

• Lonely Planet
• Atlassian
• Code for America
• Mail Chimp
• BBC

Web Site as Apps

Design that Ditches the Traditional “Page” Metaphor

The shift toward responsive design has pushed the boundaries of what we mean by web 'pages.' When designing for a screen, fixed widths are arbitrary. As websites act more like web apps, integrating lots of technologies like 3rd party CRM software, marketing automation, email newsletters, donations, and e-commerce, the mental model of discrete, individual pages becomes less accurate. And so the way that designers think conceptually about what they make has to change. Brad Frost calls this "atomic design" since rather than designing page templates, we're designing systems of components.

The result: no need to treat web design as print design for a display. Why not push the boundaries of the viewport and use as much screen real estate as you have, the way a web app would? In 2015, we’re going to be seeing more and more websites go interactive and full-width, using AJAX to update individual content sections, and taking advantage of HTML5’s pushState to abandon the “page” metaphor and embrace websites as apps.

Examples:

• Second Story
• Good Magazine
• New Zealand Tourism
• Snowbird
• 20 Things I Learned About the Web

Card Design

Pages Schmages, How About Cards?

When data and content are embedded and piped to and from many different sources, it helps to encapsulate the information in a small, self-contained unit. A lot of media sites have figured out that people respond and share easy to scan, “snackable” content. The visual metaphor of a card is a perfect choice for this approach and it’s gaining momentum. Twitter helped popularize it, in particular, since tweets containing links and photos are embedded all over the place. But they’re not alone in thinking it’s the future of the web.

Examples:

• Vox Media
• Pinterest
• SilkTricky
• Trello
• Google Now

Actual Usability Testing

Get Cheap & Fast Enough and Traction Will Follow

The cardinal rule of UX: “Know thy user and she is not you.” Traditionally, user testing has been an afterthought since it's usually tedious, expensive, and reserved only for complex sites with long timelines. But the insight you get from watching people use your website or app can be as dramatic and valuable as it is painful to watch, sitting helpless as they stumble over what you thought was obvious to anybody.

As the tools and services to perform user testing become easier to use and less expensive, web makers can avail themselves more often — in less time — and with better results. No need to round up your reluctant friends and colleagues! Now, you can pay peanuts to see perfect strangers tear your precious design apart. We predict user testing will go mainstream in 2015.

Examples:

• Applause
• User Testing
• CrazyEgg
• User Brain
• Loop11

CSS Pre-processing

Vendor Prefixes & Manual Compressing: Ain’t Nobody Got Time fo’ That

All right web developers, it’s 2015. There’s no more excuse to:

1. Write out vendor prefixes by hand
2. Repeat your CSS over and over
3. Manually concatenate and compress files for production

Maybe, just maybe, if Grunt and Gulp were the only tools for this, you’d get a pass: some folks are just allergic to the command line. But not only is it not really that tough to learn, there’s a plethora of GUI tools that will do it all for you. When you can stitch and compress your files for production automatically every time you save a change, you’ll never forget to do it in production! Still, there are plenty of folks who haven’t yet adopted this formally in their workflow. That’ll change in 2015.

Examples:

• Grunt / Gulp
• CodeKit
• LiveReload
• Scout
• CSS Crush

Animation: Flash is Dead

This is the big one. The web is awash in animation tutorials and introductions about not only the craft of animation but technical walkthroughs. With Adobe’s Flash having gone the way of the dodo (good riddance, I say), one would think that interactive animation would take a backseat but the era of web animation is just getting started. If 2014 was the year web designers and developers started getting familiar with it, 2015 is the year they get really good at it. Few aspects of a design can have as big an impact on user delight as a really lovely animation.

The main challenge is mocking them up: a static PSD or Sketch design doesn’t do a great job showing what happens when a user clicks or scrolls. Naturally, software developers rose to the challenge, and in 2014 we saw a number of impressive interactive prototyping tools emerged which make it much easier to experiment and demonstrate. (Though if you’re low-fi like me, you can even do it Keynote.) Want help implementing it? There are plenty of great CSS libraries that do the heavy lifting for you.

Examples:

• Basically Every Codrops Ever
• The Art of UI Animations
• Pixate
• Framer
• Motion Experiments
• Form

Parallax Scrolling: Somewhat Less Dead

Or, “The Reports of My Death Have Been Greatly Exaggerated”

Parallax scrolling — in which background elements move or scroll at different rate the way they do in nature, mimicking depth on screen — is the bane (or boon) of any web developer’s existence. Few web design topics inspire as much strong feelings. When you get a new toy, you just want to play with it all the time, even when you shouldn’t. Web observers have been calling it dead since at least 2013 yet it soldiers on, implacable and zombie-like. The overall NMC consensus is that, like any technique, it’s useful when implemented well and appropriately but runs the risk of sloppy over-use. Our guess: parallax is here to stay in 2015 and beyond. Below, some well-conceived and impressive examples.

Examples:

• B&O Play
• Burning of Columbia
• Bioagilytix
• Seattle Space Needle
• Inception Explained

Better Web Forms

They Don’t Have to Be Awful Even Though They Mostly Are

When it comes to actual interactivity on the web — that is, capturing and responding to user input — forms are essentially all there is. Sure, menus can fly out and buttons can glow, but that's mostly interactive icing on the cake of moving data around. So it's puzzling strange that most online web contact, login, and checkout web forms still look and behave like the '90s called and would like their tired cliché back. Animation especially turns dull data entry tasks into delightful experiences; expect to see lots more of the examples below in 2015.

Examples:

• Teehan+Lax
• Text Input Effects
• Stripe Checkout
• Fleet Feet Search
• Minimal Form

Mobile-First & Responsive Design

Or, Why “Flat” Design Will Continue to be Popular

If we’re not already past the 50% mark of all website visitor traffic on a mobile device, we will be soon. Whether casual reading or actual online shopping, more and more people use tablets and smartphones to access the web — most notably in developing countries, where it’s the only means of doing so. Pretty soon there won’t be “mobile websites” or “desktop web design”; it will all just be “web design”.

The rise of mobile devices — and developers who are conscientious about targeting many different device sizes and viewports — is in large part responsible for the current trend of “flat” design. If you don’t know what size screen a visitor is using and the content has to flow and adapt, then it becomes more challenging to create graphic assets that are texture- and image-heavy. In addition, each image file that needs to be downloaded over mobile slows down already slow data connections, so any visual element that can be reproduced in code (like shadows, gradients, & rounded corners) speed up the experience. Of all the 2015 trends in web design, this will be the most signficant and obvious.

Examples:

• Every New NMC Project
• Media Queri.es
• Literally Bazillions More

Bonus Trend: Sketch

It's no secret the NMC designers are big fans of the UI drawing software, Sketch, for all our design work. But we're not alone! All of a sudden, Sketch is everywhere and 2014 witnessed a huge surge in interest for the app. Both designers and developers started using it more and more to design efficiently and export assets quickly for the screen. Design firm UsTwo maintains the most comprehensive list of all the blog tutorials, video screencasts, free icon sets, and even paid courses that have sprung up in the last year (we even contributed by compiling a list of our favorite Sketch plugins). Our guess for 2015 is that the momentum carries even farther in the new year.

2014 Was a Busy Year

A busy and eventful year for web design and development in general and for NMC in particular. Any new approach or technology takes time for practitioners to adopt and master and this year it seemed like designers and developers really embraced it as part of their normal workflow, not just as something novel or extra. (We're proud that every NMC client project has been delivered fully responsive, at no extra cost, since 2011!)

More mobile devices mean using the web will look less and less like sitting still at a desk in front of a large screen and more and more like browsing headlines at the bus stop. But the potential of responsive design is just beginning to be unlocked so we're super excited to see what 2015 brings. After all, it's not until a technology becomes boring that it becomes interesting. What will you come up with?

Need Help with Any of These Trends?

NMC is for hire! If you're curious about doing things a little differently with your website and want to take it into 2015, NMC is happy to oblige. We know a thing or two about the trends mentioned above and would love to help your business or nonprofit succeed online. Get in touch and maybe your site will be featured on a "Best of 2015" list next January. Here are a few links to get you going:

• Need help getting started? We wrote a guide to help you write a great website RFP.
• Still not convinced? Check out the 10 best reasons to hire NMC for your next web project.