Advertisement
Industry

Web Design 2014: What to Watch Out For

by

This year has been a brilliant year in web design. More than any other year perhaps, huge strides have been made towards the maturing of the field. Let's have a look at some of what we can expect for the future of web design as an industry.


Solutions to the Slicing Problem

Anyone who has been doing web design for longer than a few years has undoubtedly faced the problem of the gap between design and front-end development. Designers live in tools similar to Photoshop or Sketch, and developers live in their text editors.

This common workflow has seen many attempts at a solution, including things like SiteGrinder, Dreamweaver, and more recently Adobe Muse. All of these solutions come with their problems, and haven't been widely adopted. For the most part, front end developers have either stuck to their old ways, or designers are moving more into the browser to work, closing the gap. However, tools are emerging to close this gap even further. With tools like Macaw on the verge of being released, the path to an end of the painstaking gap between design and front end development is being shortened.

Screenshot from Macaw's interface
Screenshot from Macaw's interface

These tools will greatly benefit from the fact that web design trends have adopted flat colors with very little texture and predictably repeated elements. These elements are far less complex than the heavily image-reliant ui elements of a few years ago, so it is a prime stage to introduce tools to automatically generate well-organized, semantic code.

What you won't see yet: automatic JavaScript

You won't see a good "WYSIWYG"-ish JavaScript implementation for anything beyond basic configurable widgets. The primary reason for this is that HTML and CSS are both declarative languages, while JavaScript is a programming language. The "canvas" for JavaScript is inherently the text editor. The canvas for HTML is inherently the document.


Significantly Fewer Graphic PNGs

As browsers adopt the newest standards, phones get faster, screens get more unpredictable, and designs continue to flatten out, we will see a significant reduction in the number of graphic images used in a given site. Complex UI elements will continue to rely more and more on CSS, and for things that can't be accomplished purely with CSS, SVG will be adopted. The primary exception is photography. Large photos will continue to claim more design space as designers rely more on content-oriented transparent imagery to define experience and narrative.

Visual presentation by Exposure.io
Visual presentation by Exposure.io

But seriously, SVG

With beautiful examples popping up everywhere, SVG is hitting its prime. We can expect to see more accessible tools for creating basic infovis without much of a hassle (think ChartJS), as well as more educational tools exposing the potential and power of SVG to people who haven't had incentive to explore SVG previously.

SVG decoration courtesy of fixate.it
SVG decoration courtesy of fixate.it

Adoption of Flexbox

Although the flexbox spec is still sitting in a non-standardised no-man's land, there's relatively good support across browsers. There hasn't been a wide adoption of flexbox (for unknown reasons), but we believe this year there will be a push towards adoption.

Philip Walton explains what can be solved with flexbox
Philip Walton explains what can be solved with flexbox

We're excited enough about flexbox here at Tuts+ that we'll be posting a guide explaining how to create layouts with flexbox soon, so watch out for that!

What you won't see yet: full adoption of srcset

You won't see full adoption of a retina image solution yet. Although Webkit has implemented srcset, developers are already solving this problem in slightly less efficient or robust way. While srcset will eventually be necessary, for most developers will continue to solve the problems by saving larger images at lower qualities.


An Overload of Video-Oriented Design

Remember when parallax became the next hot thing? Everyone started using it in new and exciting (as well as worn out and frightening) ways to tell stories and enhance user experience. You can expect that people are going to widely adopt video as a design element (for instance, as a background) rather than just as a focal "theatre" experience as we've seen with YouTube.

Ja, dat klopt. Ze krijgen een baby.
Ja, dat klopt. Ze krijgen een baby.

This has been around for a long time (there were even incarnations built in Flash), but hasn't gained popularity with commercial ventures until recently. With this will come interesting challenges, particularly related to video size and compression.


Animated and Responsive Icons

While animations certainly aren't a new thing, animated logo and icon elements are rising in popularity. SVG animation can be done with CSS, and projects like Iconic, which raised over 6 times their target on Kickstarter, as well as open source efforts like Climacons, show promise of a new trend in user experience design based on vector path animations.

SVG Icons Animated with CSS by Noah Blon (@noahblon) on CodePen


Adoption of Second Screen

This past year, TV shows like Breaking Bad offered a second screen experience, giving watchers a deeper way to interact with the content.

Breaking Bad's second screen experience
Breaking Bad's second screen experience

In the 2014, as adoption of mobile continues to reach lower end markets and connectivity increases in ubiquity, the adoption of second screen will extend to more shows and more formats. This could even include things such as syncing your phone to your computer while watching a show on Hulu, or connecting your tablet with your gaming console to offer secondary information about what you're seeing or doing on screen.

This is a very different design area than basic content design. Designers will need to consider even further the concept of secondary attention, fulfilling the role of "accompaniment" instead of "main stage."


Easier Mobile Optimization

"Responsive" is clearly the dominating methodology in web design. Despite how you are handling the rising need for technology-agnostic designs and code, users are continuing to move to more devices in more environments. Up until now, mobile optimization has been a non-trivial undertaking; making your code deliverables as small as possible, building media queries, achieving high framerates, utilizing caching, and many other considerations take significant investment.

In 2014, many frameworks will fully adopt the mobile-first methodology entirely, and the barrier to creating highly performant sites for any technology will lower. Code libraries like Hammer.js, Zepto.js, Animate.css, and many others have led the charge. As we previously experienced with the industry adoption of HTML5, we hope to also see an industry-wide adoption of best practices for mobile optimization that goes beyond simply writing CSS queries.

You can touch this, thanks to hammer.js
You can touch this, thanks to hammer.js

Published Content Without the Fluff

Medium, Svbtle, Editorially, exposure.so, Ghost, and plenty of other tools and platforms have ushered in a new era of web content that focus purely on presenting writing in a highly accessible format, without any design crutches. This shift will continue, influencing theme development, new web services, and the "collective design aesthetic".

Medium
Medium

Further Reading

You might also want to check out Collis' recent thoughts on web design trends for the coming year: 2014 Predictions for Web Design.


What Do You See Happening?

Think cross-browser testing is on its way out? Have an idea about a new rising trend? Share it in the comments!

Related Posts
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Web Design
    eCommerce
    E-commerce for Mobile: Making the Most of Your SiteMobile thumb
    In this article we’re going to address some mobile e-commerce hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.Read More…
  • Web Design
    Case Studies
    How They Did It: CrowdpilotCrowdpilot thumb
    Crowdpilot's landing page shows off just how simple and awesome SVG is in combination with JavaScript and CSS animations. In this tutorial, you'll learn how to recreate Crowdpilot's diagonal message rotator and curtain, plus we'll talk a bit about "flat" design and what it means to design digitally native elements.Read More…
  • Web Design
    Case Studies
    How They Did It: Apple’s “Elevating the Expedition”Ipad thumb
    We're tackling a big one today: Apple’s "Elevating the expedition" iPad marketing page. Apple have taken the concept of target audience very seriously in their decisions with this site. Let's dive in!Read More…
  • Design & Illustration
    Web Design
    SVG Files: From Illustrator to the WebSvg thumb retina
    Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser.Read More…
  • Web Design
    Design Theory
    CSS3, Web Fonts and IconsDsfd webfonts retina
    We’re really lucky to be working in an industry like the web industry. Nowadays, we have so many new tips and techniques and ways of working all of the time. We’re also really lucky that we’re in an age where, as these new technologies are introduced, our browsers can (for the most part) be pretty quick to catch up, so we get to put these new technologies into our designs (and gasp, even into client work!) more than ever before.Read More…