2016 Web Design Trends: Image Use vs Performance

Imagery has been a dominant feature of web browsers since 1993. While we’ve seen forays into sound (notably via streaming audio, videos and games), the modalities of smell, touch and taste remain, rightfully (and perhaps thankfully), elusive. I don’t know about you, but I’ve never really wanted to taste a website (mm, cookies). Exploring 2016 web design trends, it’s a pretty easy bet that the conflict between images and performance will continue to play a pivotal role.

Though Internet connection speeds have consistently improved over time, designers and developers still have to keep a sharp eye on page load time to avoid frightening away search engines and human beings. To balance design against performance and engagement features, smart designers and developers must be one part engineer, one part artist and one part UX expert. They must strive to deliver the best possible experience to the largest possible audience.

We expect 2016 website design trends to continue to build bigger, more bloated pages.

The challenge is real. As you can see from this chart, the average size of a webpage has increased steadily since 2011. This is largely driven by multimedia like video and images, but also scripts and dynamic features such as sliders and accordions, as well as caching tricks such as lazy-loading and background pre-loading for page elements.

The central conflict — visual impact vs. performance — has driven web design trends (and application design in general) as much as the imaginations of designers themselves, and for a good reason. In most cases, a smart web designer now works on websites inspired by — not railing against — the technological limitations of the medium. When a web designer creates with technological constraints (such as performance) in mind, they’re arguably better informed and more apt to create more usable websites. This is because websites (even today) are limited by their users’ internet speed, the viewing browser, the device and the Internet infrastructure itself.

1. Flat design is here to stay

You can see this in the continuing design trend favoring flat design (vector-based, infinitely-scalable design that is simpler and more symbolic) favoured by Apple designer Jonathon Ive, versus the previous design trend of skeuomorphism (texture-rich, reality-mimicking design) advocated and preferred by Steve Jobs (largely to show off the iPhone).

flat-vs-skeuomorphic1

(Source: Haley Marketing) Guess which loads faster.

 

While skeuomorphism looked ‘real,’it was bloaty to present on memory and CPU constrained devices and more difficult still to present in web form (though many tried). Flat design, in contrast, is driven by the needs of smaller mobile screens and limited bandwidth for mobile browsers (not to mention battery savings!). Characterized by simple vector elements, fewer detailed images, CSS driven techniques and a more symbolic approach to iconography, flat design is not going away anytime soon.

Why? Because when web designers introduce complicated graphic elements, they do so at the expense of site speed. You can check it out yourself — visit http://webbyawards.com/ or http://www.awwwards.com/ and click through some of the winners. While many are visually exciting, most are just a little bit slower than you’d want for day-to-day use.

Outside of the design awards sphere, slow and beautiful won’t cut it for utility. Consider the needs of an online shopper. Sure, a beautiful site is going to help convince shoppers to make a purchase, but 40% of users abandon a site that takes more than 3 seconds to load. 40%. I am not a math genius, but 40%  sounds a bit too close to half for comfort. If your web designer has built a media-intensive site with no thought for performance, nearly half of all potential users will click away before they even see your beautiful design.

Functional sites for your business need to be designed to be fast, functional and beautiful. And as a web design agency, we have to keep on top of these trends.

2. Changing technology will drive new web design trends

Flat design may maintain its popularity, but that doesn’t mean that web design will come to a standstill. We have every reason to believe that 2016 is going to be an exciting year. Here are the major forces driving change:

Browsers

What’s the major difference between web design and other design disciplines? Web design relies heavily on what users are using to access web pages: the browser. Different browsers — including different versions of the same browser — render websites slightly differently. When you create a print design, you can expect to have (some) control over how the final product is printed. You certainly don’t need to fear if text will randomly start wrapping, or disappearing, or slipping under other elements.

When you’re designing for the web, you lose that control. A beautiful, state-of-the-art website using the newest technology might look like mangled garbage (or an error message) on a 10-year-old browser.

Now, most browsers have relatively similar support and are auto-updating by default. This means that websites will have smaller percentages of visits coming from older browsers that won’t support modern, performant and trendy design techniques. As more and more people get on platforms that auto-update their browsers, web design will be freer to explore new techniques.

The catch, though, is that many web users — even in the developed world — use out-of-date browsers and won’t or can’t update them. This is especially common in educational and government institutions and in poorer countries. Web designers and developers constantly have to weigh the importance of this waning but still important source of traffic. Usually, this means developing sites that will degrade gracefully to a usable, if not beautiful, design.

The benefit of newer browsers, as we’ll show below, is that they allow web designers to use newer, more resource-efficient techniques such as SVG animation and image sets.

Mobile

Mobile usage has been higher than desktop usage since 2014. The question of whether or not you should have a site that functions on mobile has given way to “how can I make my site work on mobile.” Responsive design — that is, web design that responds to screen size and resizes/re-orders elements accordingly — is the most popular response, though some businesses are focusing on mobile apps or alternative mobile web design patterns.

HTTP/2

One unknown in the performance-vs-graphics war is the adoption of HTTP/2. HTTP/2 is an updated standard for transferring information over the Internet. It allows, among other things, more efficient loading of resources by greatly reducing the number of back and forth requests to the server. The result will be websites that perform more like desktop applications. If the protocol is as good as it promises, there could ultimately be less resistance towards texture-rich aesthetics like skeuomorphism, and the (careful) use of video and imagery might suddenly make a resurgence.

3. Hero photos continue to overcome top-of-page sliders…

In 2014 or so, sliders became ubiquitous. They covered the default section on every major WordPress theme, and were used for all sorts of strange purposes. In fact, we’ve overused it ourselves. Such is the cost of staying de rigueur. Eventually, styles change and a redesign is required.

Though sliders can be used for good (to take users on a narrative journey, for instance, or showing off ap photo series) the trend got out of hand and slider quickly became the default way to cram MORE onto a page. This was often driven by multiple voices in an organization wanting their message to appear on the top. Thus, sliders became the way to make everyone happy.

Everyone, that is, except for the actual user, who’d have to download a whole bunch of extra images and JavaScript that they’ll probably never see. Also, it turns out that sliders in some cases can be a pretty bad way to get users to a goal. Now used to their ubiquity, who actually goes to a website and watches a slider through to the final slide before continuing on? Not many people. They CERTAINLY stopped being an impressive technical/design achievement after a user sees 500 of them.

In 2016, we’re starting to see more sites and themes using the much more decisive (and potentially performance-friendly) “hero image.” Even many of the WordPress themes that were guilty of saddling users with elaborate sliders have updated to focus on a feature image with a type headline.

Let’s not throw it all away, though. Auto-scrolling sliders remain very useful for a few select purposes. They still feature prominently on sites that include frequent content updates – news sites for instance – and sites that feature an array products. But remember, when you use a slider, you risk banner blindness. So use them sensibly.

For a nice take on the hero image, check out http://www.macastudio.ca/biography.html! (Photography by our good friend, Barry Calhoun.)

hero-image-trend-2016-website-design

 

 

4. …while hero photos are replaced with creative type, iconography and cartoons…

In 2016, web design trends continue to turn from sliders to still hero images, but that’s not the end of this story. Large hero images can be slow unless they’re properly optimized and delivered via a CDN or fast server. A full-color, high-quality JPEG at 2000×1200 resolution can still push 400kb. This has a significant performance impact for slower connections served from underpowered hosting.

One effective solution has been the adoption of simpler layouts using a solid/ gradient background color, attractive type and a small PNG with limited colors.

Not only can this be much cleaner, it can also be much faster to download and run.

World’s Easiest Decision uses flat design and an interesting ‘choose your own adventure’ narrative style that loads at a reasonable speed. Had the same site been built with videos, high-resolution photos and (heaven-forbid) Flash, the experience, by today’s standards would be grueling.

 

World's Easiest Decision makes good use of trendy cartoon/vector PNGs.

5. …and animated SVG…

Another big trend in web design for 2016 is SVG. SVG, short for “scalable vector graphics” is very different from the raster images that you’re probably used to. Unlike JPEG and PNG images, which are stored as a series of pixels, SVGs are stored as a series of mathematical values that specify where to draw curves and lines, what to color fill in, etc. SVGs are, in general, a much cleaner, more performant way to display simple images like icons – and they’re infinitely scalable!

 

circle-raster

A raster circle.


circle-vector

A vector circle.

This means that the same SVG image will look clean and crisp on a small iPhone screen and on a massive desktop – or even on a wall-sized projection. How’s that for future proof?

We fully expect SVG graphics to begin replacing PNGs for icons and similar images; however, they are inefficient for high-detail images like photographs.

SVGs are also animatable using a few lines of simple code rather than a whole set of images (as a GIF), meaning a magnificent performance boost for flat animations.

Here’s an example of a handy SVG animation from CodePen. Note how smooth it is compared to the GIF animations you see more often:

See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kyleHenwood) on CodePen.0

6. …video headers won’t become too widespread…

Some sites have been experimenting with videos as a core design element. When used well, this can be striking. They do put sites at risk for an immense resource load, though, so, like sliders, you’ve got to decide whether a potentially slower load is worth having a shiny video. And, due to byte size, bandwidth and resolution, full video sites remain a poor design choice for mobile websites.

A beautiful use of video that works with, not against, the site design: http://uncharted.sunbrella.com/

7. …but we may see impressive cinemagraphs.

Some things don’t change. Motion evokes emotion. It has ever since humans huddled in caves, bathed in the fragile flickering of a cooking fire, watching for movement in the darkness outside.

Some things don’t change, but technology does. Cinemagraphs may (or may not) be the next big trend for moving images, even though they first appeared in 2011. Cinemagraphs are images in which some elements are frozen, and others move. Think of a beach scene where the water moves but beach-goers are frozen. This striking technique hasn’t seen huge adoption yet, but on hosted services, cinemagraphs can give a video feel without the bandwidth cost.

Cool free cinemagraph for web design

(Source: http://www.freecinemagraphs.com/)

While some tutorials on the web make cinemagraphs look a little labor intensive, we’ve found some free apps that make the process much easier if you want to try it for yourself:

To create a free cinemagraph on a Mac, you can use Cinemagraph Pro.

Windows users can get cinemagraph effects with Cliplets. (Also free!)

Pro tip: when you create a cinemagraph gif, it’s worth size optimizing either via your design tool of choice or via a site like EZGif.

8. Other CSS patterns will step in to solve issues previously solved by images

In the mid-2000s, the web design trend for fancy sites was to slice up large, complicated images, then to place them painstakingly into a rigid, non-responsive web design. The demands of mobile users, improvements in CSS (the web’s visual style language), the rise of the “coding designer” and shifts in aesthetics have made this process generally obsolete.

Now, many effects that once needed separate images to be uploaded can be accomplished with a line or two of CSS code. CSS can now reliably create shadows, gradients, patterned backgrounds, fancy borders, simple shapes and more. As browsers catch up, CSS will allow us to experiment with many more exciting layouts. Better yet, it will keep those layouts fast and memory-efficient.

9. Image-set will give web developers more control over mobile design performance

One final point on image use and performance: newer browsers are accepting a CSS property called “image-set” which allows the web designer to specify which resolution of image to load based on screen resolution. So, rather than forcing a mobile user to download a 2000×1800 image (400kb) and scaling it down to 640×576, the mobile browser will simply load a 640×576 image (100kb maybe) and ignore downloading the other non-relevant sizes.

Right now, each size still has to be generated or at least initiated by the designer. We can envision a day where either the browser, the CMS (like WordPress), a service or a specific plugin facilitates automatic image generation. This would mean that you would only need to build a site with desktop-sized images, and all other sizes would be dynamically-generated and cached and presented as needed.

What do YOU think is coming in 2016?

Leave a comment below!

Feature photo by WavebreakMediaMicro via DollarPhotoClub.

Like what you see? Click to read more from and