10. Unique layouts
The year 2016 — much like the last several years preceding it — featured an ongoing debate about web design either dying, or losing its soul.
Overdramatic as the web-design-is-dead argument may be, you can’t blame any creative for seeking innovative ways to present content to readers. And one of the most enticing methods for breaking out of the box-centric layouts many blame responsive design for is the broken grid.
This approach seeks a way out of the meticulously aligned and “boxy” layouts we’ve been seeing a lot of lately with a variety of what might seem like visually jarring techniques. These include:
Overlapping typographical and graphical elements, as seen on…
Seemingly random image and text placements, as seen on …
Next up, Nelson Abalos, Jr., customer support hero and host of the Webflow Workshops
If you haven’t dived into flexbox yet, you’re in for a treat. This relatively “new” CSS layout module offers both incredible responsive-friendliness in its functionality, but also makes a lot of sense to visual designers used to manipulating objects on the canvas with the align and distribute tools offered in the likes of Sketch and Illustrator.
And with every modern browser (and no, I’m not counting IE11) now fully supporting flexbox, there’s no reason not to dive in — as long as your audience isn’t full of IE diehards.
Of course, flexbox can take some getting used to if you’re super comfortable with the other, very different layout modules. So if you need some help wrapping your head around flexible boxes, check out Flexbox Game.
Okay, what do you think, Waldo Broodryk, customer happiness hero?
12. Complex CSS grid layouts
Coming up hot on the heels of flexbox in the race for newer, better layout modules is CSS grid. As Chris House, creator of “A Complete Guide to Grid” puts it:
Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.
While flexbox helps us solve some seriously aggravating and long-standing web design problems like vertical centering, it really wasn’t intended for use in full-page layouts. (Though it’s certainly capable of them.) Grid, on the other hand, was built for full-page layouts. And like flexbox, it allows you to easily rearrange content order for different media queries.
Grid isn’t yet ready for use in the wild, but that just gives you some time to familiarize yourself with the spec. Which is great, because it’s going to be big.
If you want to start playing with CSS grid today, here’s how:
- In Chrome, go to chrome://flags and enable "experimental web platform features”
- In Opera, go to opera://flags and enable "experimental web platform features”
- In Firefox, enable the layout.css.grid.enabled (or install Firefox Nightly)
13. A focus on designing for content delivery, personalization, and conversion
One consequence of an increased focus on design as a means of effectively delivering content will be a stress on delivering said content to the right person at the right time — all with an eye to increasing desired actions, naturally. (All good news for you content strategists out there!)
Personalization of content has been an extremely hot topic in content circles for quite some time now, but no one seems to have perfectly cracked that nut yet. Essentially, the goal is to serve up content based on characteristics like:
- Demographics: Who is the visitor (professionally and/or personally) and where are they coming from?
- Behavior: What is the visitor doing now? What have they done on your site in the past?
- Context: What device and browser is the visitor using? How did they arrive at your site? Are they logged in or logged out?
We’ve seen some interesting experiments in this direction across the web, many of which revolve around a manual personalization of content recommendations by the user, recommendation of “related” reads, and some algorithmic solutions more akin to what Facebook is capable of doing.
Fubiz features manual personalization through its “Creativity Finder,” a conversational-style form that lets you pick from a range of predetermined options about you, your location, and what you’re looking for. It’s a bit “low tech,” but it does offer a feeling of agency most content platforms don’t really offer.
A step up from that is Autodesk’s new Redshift blog, which deepens the level of user agency by offering a range of manual customization options like:
- Following topics and authors
- Customizable feed
- Highlighting for comments and sharing
It’s mostly stuff a savvy reader can achieve on their own, but Redshift dramatically simplifies those functions. And more importantly, it represents a shift away from a paradigm that views blog posts as the content version of vaporware, turning it into more of an evergreen learning resource.
If a lot of Redshift’s functionality sounds familiar, it might be because it’s largely replicated from Medium. Unlike Redshift, though, Medium has the advantage of a much larger base of readers and writers, not to mention tight integration with Twitter — all of which boost its ability to algorithmically recommend content to you.
All of these content personalization methods epitomize a view of product design as a method of finding the intersection between user needs and business needs. Readers want to be able to save, share, and customize the content they see — and the company can use that data in a host of ways. So, win-win.
Of course, it’s worth remembering that conversions aren’t the only metric content personalization can drive. Personalization of help documentation can help lower support request volume. Educational materials can lower churn and improve lifetime value. But it’s not like conversions will ever not be valuable.
And now for my two cents:
14. More focus on conversation (yes, bots, but also...)
You might call 2016 the year of the bot — though whether it’s been the beginning of the bots’ triumph or just a somewhat underwhelming launch is very much open to debate.
That said, if the volume of bot-related launches on Product Hunt and Google’s deep integration of Assistant into Android are any indication, 2017’s going to see a lot more bots popping up across your life.
But bots are really just a specific instantiation of a more abstract, and thus more pervasive, idea: that conversation is an interface. And we’re likely to see that idea shape a lot of 2017’s top design work.
What this might mean, exactly, we’ll have to wait and see. But possible impacts include:
- An even greater interest in “human” language (more good news for content strategists!)
- Increased capacities for writers and content strategists to act as UX designers and bot developers
- Even more investment in so-called “user-generated content,” creative communities, fora, etc.
- More conversational/natural-language forms (at present, the form is the fundamental unit of product design — in 2017, we might see that paradigm shift from form to conversation)
- Attempts to transform the comment section from the internet’s sewer into fonts of “engagement” and new content — an effort already kicked off by the Coral Project
Hopefully, this continued interest in bots and AIs will help them better understand what the hell we’re talking about.
15. The fight against fake news
The 2016 U.S. presidential campaign taught us all a lot about how the web can influence sociopolitical realities, and one of the foremost lessons was:
Misinformation is fast, easy, and cheap to produce; super profitable; and capable of severely impacting public perception of candidates.
Obviously not something that (most of us) who create and distribute web content were excited to see revealed.
But every problem represents an opportunity. And true to form, web designers, product designers, and developers worldwide have jumped at the opportunity to fix this particular broken window. Here's just a small sampling:
- Facebook’s Mark Zuckerberg called the percentage of fake news “relatively small,” but went on to outline 7 steps Facebook is taking to help fight misinformation.
- A group of university students has built a Chrome plugin called FiB that labels news stories as “verified” or “unverified” right inside the Facebook UI.
- Google and Facebook have both stated that they’ll limit the flow of ad dollars to fake news sites via their advertising tools.
- Popular Twitter account Saved You A Click launched a spinoff called Saved You A Trick to identify fake news stories.
Ultimately, the more programmatic methods and monetary methods proposed by Facebook, Google, and the FiB team will prove the most scalable and effective. But more human methods like a stronger commitment to journalistic ethics and tools and resources designed to help people be better readers will undoubtedly be needed as well.
Because as with any attempt to control the flow of information, there’s always the possibility of control being exercised the wrong way. And that means it’s ultimately up to us to stop the creation and spread of misinformation.
16. More peeks inside design (and content)
Over the course of 2016, a number of design teams created and popularized their own blogs as a way to offer insights into process and, perhaps, humanize the brand to a certain extent.
Content like this used to be focused primarily on recruitment — attracting new hires by conveying a sense of what’s it like to design, or engineer, or write within a particular company.
But in 2016, the focus appeared to shift in 3 new directions:
These 3 strains can be pretty hard to untangle, and the most popular of these design blogs do all three with panache. They also tend to have a particular focus that sets them apart as more than “Brand X’s design team blog.” But again, it’s not always obvious.
With the success of the following design-and-content blogs, brace yourself for many more in 2017:
Foci: Process and tools
Several People Are Typing
Foci: Slack, workplace productivity, and content strategy
Foci: Google, process, tools
Foci: UX (i.e., design, content, dev, research)
17. A new designer deliverable — code — created in new ways
In his TechCrunch article “The future of front-end development is design,” Carson Miller writes:
Coding is going to look dramatically different in the future. In fact, the line between design and development may no longer exist.
A conversation about the article sprung up on Twitter, where Austin Knight noted:
Many designers and devs that I know would prefer to work visually, but work in code out of necessity.
There are many drivers behind this emerging reality, including
- The need for fast, iterative product development
- User need for more equivalency between outputs and inputs (i.e., most painters don’t paint with code)
- Increasing sophistication of code-free design tools
And since Webflow’s one of the last, we’re all in on this future.
18. Virtual reality … on the web
Given our already firmly founded tendency to think of the web as a kind of alternate reality, this is a bit inception-y. But there’s no denying that VR is going to affect the web in a big way in 2017 — even if browsers won’t be ready to support it. If you’re eager to try it, check out the Web VR site.
Ready to do your part to define web design in 2017?
Then start building websites with Webflow! It’s free to get started, and you’re going to love the creative freedom it gives you.