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.
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.
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.
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.
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.
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.
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.
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".
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!