Web and Mobile Design Trends

Web Design & Development Trends

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:

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:

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:

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:

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:

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:

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 CSSlibraries that do the heavy lifting for you.

Examples:

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:

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:

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:

By Nathan Huening on January 14, 2015

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s