Twelve months ago we posted some predictions about what we would see (and not see) in 2014. It struck a cord with all of you, so we’ve decided to do the same thing this year!
Last year, we predicted the continued rise of the SVG, the decline of PSD-slicing, and an overload of video-oriented design, amongst plenty of other things. This coming year, we’re going to see more of the same. Here’s what we think you’ll see in web design in 2015!
Prototyping isn’t just a fad–it’s a major part of the future of web design.
As the web becomes more and more advanced and complicated, we will continue to move further away from static mockups and more towards fully interactive experiences that require much more than a still visual to describe. Prototyping tools allow a designer to show not only what a particular digital experience looks like, but also what it can do.
Prototyping tools are used for many different specific interactions, including simple animation design, transitions, and multiple device support considerations. But prototypes can do much more than just show the visual aesthetics, they can work as high-resolution wireframing solutions. Designers and information architects will begin to cross-train in each others’ territory a bit more as the application architecture will continue to be integrated with the design process.
Tools You Might use to Prototype
- Framer - Sketch-integrated, Coffeescript-powered prototyping tool built for high resolution interaction prototyping.
- Origami - built by the folks at Facebook, Origami works with Quartz Composer to build interactive prototypes.
- InVision - InVision is a great way to get started with prototyping. Taking static screenshots and making them interactive at a very simple level, users can link between views, comment on specific spots of the design, and utilize a versioned view of the prototype itself.
Further Reading, Listening and Watching:
- What a Prototype Is (and is not)
- Prototyping: A Practitioner’s Guide (Book) by Todd Zaki Warfel
- Prototyping ( @ Facebook ) | Origami | Quartz Composer | Framer
- Introduction to Prototyping
What You Won’t See: Tools to Take Prototyping Straight to Production
Prototyping tools haven’t been perfected enough yet to take them straight into the browser (unless, of course, they start in the browser, like Codepen). Some will try to accomplish this, but ultimately the conversion of prototypes to production-ready coded digital products will still be accomplished by human developers. Having the skills to convert prototypes into production-ready code will continue to be a highly valued skillset for otherwise strictly-visual designers to possess.
More Sketch Adoption
Sketch has risen in popularity since its release by Bohemian Coding. Sketch is specifically designed to create digital designs. You may never have heard of Sketch, but we think that will change and this year you will see it continue to grow.
The previous leader of the pack, Photoshop, was never actually intended to specifically be used for web design. Adobe has continued to release products such as Muse and Edge to address some of the web-specific design challenges where Photoshop falls short. Nevertheless, Sketch and other alternatives built by smaller development companies are on the rise.
What You Won’t See: Death of Adobe
Even though Sketch and similar tools are being adopted, Adobe is still a powerful force in the design community. Adobe has continued to publicly respond to the voices of designers. For example, Adobe has created a site to recognize the topic of Photoshop for Design.
Adobe is also a very large company, which gives them the advantage of faster release cycles and more resources to launch large scale features. Because of the existing userbase, collaboration features are more easily adopted. Adobe’s persistent presence in the design community will continue to keep their application suite in the list of essentials for designers.
Over-use and Abuse of “Material Design”
Material design is Google’s long overdue conceptual framework for how digital products should be laid out and rationalized. As a part of material design, Google has released practical guides for how to implement its concepts.
Material design is admittedly largely inspired by the aesthetics of “flat” design. Because Google’s aesthetic follows this trend, mass adoption has already begun. Material design is being integrated into Wordpress themes and reusable widgets/downloadable libraries, plugins, and even Polymer, a powerful web component library that brings in not only plug-and-play functionality, but also component-specific styling.
While Google’s Material Design definitely provides a great baseline and direction for the web, we can also expect the following of the trend to the detriment of the products being created. Material design aesthetic isn’t a “one size fits all” solution for the web at large. Just as we are seeing both great and horrific implementations of video backgrounds and parallax effects across the web, we will also see great (and incredibly terrible) implementations of Material Design.
What You Won’t See: Fewer Design Paradigms
When the web was in its infancy, web design was relatively similar across a given random selection of sites. Neither technology nor culture had pushed the medium to be an avenue of expression.
This has been true for most media. For instance, many of the earliest books likely were very similar, sporting similar layouts and relying primarily on the content for the expressive differences.
As technology advanced, internet speed increased, and CSS was adopted, new aesthetics were introduced to the web. This advancement wasn’t small, either; aesthetic techniques on the web exploded. However, even in the early 2000’s, many websites exhibited similar styles.
Fast forward to the proverbial death of Flash and the introduction of smart phones and mobile applications. This was a period when design matured on the web. Powerful new advancements took us past the business-driven “Web 2.0” era, and into an era where the web became a blank canvas. Today, any random selection of web sites may look vastly different, and this isn’t going to change.
The power and versatility of the browser and the variety of devices accessing the Internet will only continue to encourage new and different design solutions to new and different problems. Material Design is not a signal of a convergence, but rather a signal of a collective recognition of the importance of thoughtful design.
Growing Pattern: Collections as a Shareable Interaction
Of course the Internet has provided anyone with access a stage for creating content. A significant portion of the world’s population regularly accesses Facebook, and on a given day the human race creates well over 2.5 billion gigabytes of data.
Of course, the kinds of things we create change as time goes on and new avenues for creation are opened up. For instance, five years ago we might have only created Facebook posts on walls and uploaded pictures, but now we create entire branded stores on Etsy and sell handmade and digital items online with ease.
In 2015, we will likely see a continued trend towards tastemaking as a form of expression. Tastemakers are individuals who curate and post items or a collection of items for others to see and potentially adopt as part of their own tastes. This pattern has existed for the longest time with music playlist creation; we express ourselves through the curation of songs, and then share those playlists via Spotify (or, in the 80s and 90s, mixtapes).
But it goes further than music.
Today, we share Pinterest boards, Amazon lists, YouTube playlists, and infinitely more collections. The opportunities in this space have not dwindled, but are only continuing to grow. We appreciate these kinds of interactions because they are human, and much more personal than “suggestions” provided by an algorithm.
A great explanation of why this is so powerful can be found on ASongADay.co:
“No fancy algorithms (yet), no automation (yet). I will personally send you a song I think you’ll like every day, entirely determined by your musical preferences indicated below and my own musical opinion. I’m not an expert, I just listen to a lot of music, and people seem to trust me. Each song will come as a surprise, probably not at the same time every day. Because I am human, not a robot (yet).”
Shannon’s service is so in demand that she had to start asking for volunteers to help her simply send a customized song selected based on that person’s musical tastes.
We can expect things such as movie curations (such as Netflix playlists/collections–we can hope, right?), celebrity product curation, and even application preferences and settings being shared.
Business Demand for Mobile Will Become Universal
We’ve known the future of the web will continue diversifying and moving more into the mobile space. But until this year, we have still seen resistance to full-on mobile considerations as a common requirement for any serious business.
A critical mass of users will be accessing the Internet primarily via mobile devices this year. This necessitates a business response, to go where the customers are spending their time and their money.
For web designers, that means today is the time to start thinking about how to design for a multi-device world.
Clients Will Ask for a Premium Handcrafted User Experience (Though They Might Not Know What That Means)
Because of the continued saturation of startup design culture, the language of a “handcrafted user experience” has continued to permeate discussions about what makes a great product. They might not know what that means, but you should.
A great product isn’t necessarily about following the trends. “Premium handcrafted user experiences” aren’t easy to achieve; they require very intentional, focused, and complete experiences that are highly relevant to the user and what the user is trying to accomplish. “Handcrafted”, specifically, refers to the sense of character and “soul” that you might find in a handmade table or pair of boots. The sense of craftsmanship and attention to detail is more and more important to clients. World class web developers will be the ones who develop the skillset necessary to add that sense of craftsmanship and soul into what otherwise might feel like a cold, lifeless array of pixels.
Cards, “Micro-Experiences” and Composable Portable Embeds
You might see this prediction in other year-end roundups elsewhere, but it’s so prominent that we couldn’t help but agree: portable card design is a huge component of the present and future of web design. Twitter has been doing this for quite a while, but other sites are catching on. Online content continues to be referenced throughout the web in a variety of ways that go well beyond simple hyperlinks. YouTube and other video sharing sites have been doing this basically since their inception as well.
The pattern is simple: create a contained, embeddable interface that provides the user with a cohesive set of interactions and displays relevant content for the referenced remote content.
These embeddable cards don’t necessarily have to live remotely from their host sites, either. These cards exhibit another pattern called “micro-experiences”. A great example of a micro-experience is the Like button. As a Facebook user, the “Like” action is a single click that holds a significant amount of meaning. First, it allows Facebook to continue collecting your preferences and tastes. It also allows other users to see these preferences and tastes. This kind of micro-experience allows a user to interact with a given brand or site without having to leave their current context. It also allows a user to interact at different levels of resolution. In other words, the user doesn’t have to go through a series of steps and use your entire application or experience all at once; they can interact at different levels of input requirement.
There are many reasons why micro-experiences are important, but the main reason is the different resolutions of different devices. A given user who is walking down a sidewalk versus a user who is sitting on their couch with their laptop have very different interaction abilities and goals. Micro-experiences allow for a progressive approach to interaction requirements for users.
Wearables: Not Yet a Big Deal, but Get Ready Anyway
The Apple Watch signals the beginning of the wearable revolution, but don’t expect it to skyrocket too quickly. For Apple, other large device companies, and application developers, cultivating application pipelines for wearables will take some time. As web developers, we should prepare for this expansion into a new class of devices, but it won’t happen immediately. The safest bet is to put your money on mobile devices with touch screens, especially “phablets” (large phones and smaller tablets).
There’s a common theme in many of the predictions for 2015. If 2014 was a year for mobile, 2015 is the year of more of the same kind of change. The world will continue moving further towards mobility and a multi-device landscape. Web aesthetics will continue to diversify, and web designers will need to shift their focus away from “page” design and towards adaptable, flexible, handcrafted digital design that relies on strong prototyping skills and an awareness of interaction in a variety of environments.
What do you see happening within the next year? Let us know in the comments!