10 Activities That Will Get Kids Excited About Coding
August 8, 2016
Show all

11 Web Design Trends of 2016

How we consume the web changes how we design websites. Mobile devices and the trend towards responsive design push designers to find ways to maximize web experiences for everyone, no matter what device(s) they’re using.

These 10 trends — 16 for this year, plus 1 for the future — respond directly to the evolving ways we move through the web.

1. Microinteractions

From pressing an elevator button to liking a photo on Instagram, we all perform tons of single-action tasks every day, usually without much thought. We call these simple moments of engagement microinteractions. Well-designed microinteractions can be defining because, despite their simplicity, they’re often very powerful. Pinning an inspirational photo, liking a witty status, and retweeting a powerful message have become so common we don’t even need to name the websites that birthed them. When done right, microinteractions offer an intuitive way to interact with a website. When done wrong, they can cause frustration through unexpected functionality — or downright quirkiness. As we designers streamline our web experiences, we’ll see — and create — more microinteractions to help us simplify the actions we need to take.

2. Reliance on images over text

As web design evolves, the importance of high-quality images will only increase. Solid copy strengthens any website, but if it can be said with a photo, animation, or short video, it might be a really good idea to do so. Written content remains invaluable for SEO purposes, but with every piece of content you add to your site, always ask yourself: is there a more engaging, concise, and shareable way of conveying this idea? In general, text works best for removing the ambiguity that visual methods of communication are prone to. It’s also worth remembering that it’s not always a question of “one or the other.” If you want to design and publish in an accessible way that prioritizes every user’s experience, you’ll want to pair visual and written content. That way, everyone can experience your content in the best way for them. As we designers streamline our web experiences, we’ll see — and create — more microinteractions to help us simplify the actions we need to take.

3. Designing with real data (i.e., content)

As web design evolves, the importance of high-quality images will only increase. Solid copy strengthens any website, but if it can be said with a photo, animation, or short video, it might be a really good idea to do so. Sure, mockups look pretty. But with their lush images and precise lorem ipsum text placements, they represent an idealized reality. Like the appliances in a model home, mockups are about as functional as a cardboard television. Designing with real data gives us a deeper understanding of how a page will function. In part because it surfaces all the “problems” designers strive to avoid in their mockups, such as long headlines, low-quality images, etc. Designing with real content gives both writers and designers better insight into what they need to do. If you haven’t yet, check out “Why your design process should start with content.” Webflow’s CMS helps you design functional prototypes with real content, giving both designers and writers a better idea of just how a website will function.

4. Scrooooooooooooooooolling

With the multitude of screen sizes out there, the term “above the fold” has lost significance. Once dismissed as bad design, the long scroll’s intuitive functionality on mobile devices has brought it widespread acceptance. It makes navigation easier, eliminating the extra clicks necessary to reveal content. Eye-catching transitions and differentiated section designs transform what could be a monotonous trudge into a delightful process of discovery. Long scrolling changes UX design, opening the door for more narrative approaches and simpler interaction models.

5. Conversational/bot websites and apps

Many science fiction writers have envisioned a future dystopia where humanity has fallen under the rule of robot overlords. But here in reality, artificial intelligence has actually been pretty helpful in the development of websites and apps. Sorry, Isaac Asimov. Nobody wants to navigate a complex series of menus to get something done. Conversation makes for a much easier experience. Apps and other web services are using this more natural approach to make ordering goods, getting financial advice, or booking a hotel room as easy as sending a few text messages. Plus, various tools have popped up to help non-coders make their own bots, so we’re likely to see tons more of these over the coming years. One particularly interesting question arises from the ‘bots’ rise: how will the role of the web/UI/UX design transform as this new form of interface gains popularity? After all, in most cases, there’s already a well-built design wrapping the conversational experience. That means the words themselves become the core UI. Which leads naturally to the question: will 2017 be the year of the “content designer”?

6. The death of the hamburger menu

Hamburger menus are polarizing. Much like election-year politics, we don’t recommend discussing them after a few drinks in mixed company. Especially if said company includes UX designers. Sure, hamburger menus save precious real estate on tiny screens. But from a usability standpoint, hamburger menus have their problems. Few people even recognize the icon. And even those who do recognize it don’t know what to expect when the menu opens, given all the ways that interaction can unfold. They’re also inefficient, in that they add an extra step to the process of navigating a site. Finally, they also conceal a site’s breadth, thereby voiding individual page’s context and place within the larger whole. With navigation visible on-screen, people can easily get the lay of the land and see their options. Without it, that big-picture orientation gets much harder. Apps like Spotify have ditched their hamburger menus in favor of simplified navigation, and we expect we’ll see much more of that as the year continues.

7. Duotones

Duotone images are created by “printing” a grayscale image with a second, non-black color. The technique has its origins in printing and fits well within a minimalist web design aesthetic. Duotone images make great hero backgrounds because they add some life without unduly distracting from the content, or creating legibility issues. A simple duotone color scheme can also be a great way to create a clean, consistent-looking page — particularly when you’re trying to present several very-different images in the same place (such as logos or team member headshots).

8. Vibrant color schemes

As flat and minimalist design have gained popularity, bright colors have been on the rise too. As noted by sitepoint.com, these more vibrant color schemes aren’t limited to just web design, but can be found in fashion design, weathercast graphics, and interior design. Card or container layouts have become more popular and using vibrant colors in these blocks creates a bold layout. Bright colors also help UI elements like buttons and navigation jump out from a page. Finally, bright palettes can have a strong brand affect — you can’t really think of Huge without thinking “bright pink,” or Google without “primary colors.”

9. Full-screen sign up “modals”

Traditional popups are done. Will full-screen takeovers replace them? Instead of interrupting you right when you thought tip #3 was getting really good, these full-screen “modals” push the content down, filling your whole screen. The smooth scrolling action makes it less disruptive, and the full-screen layout offers more space to incorporate actually persuasive content. Plus, there’s no need to manually close out the modal — you just scroll to move on. With email marketing being such a huge deal, getting interested customers to sign up is more important than ever. And while they might not present a perfect-world solution where blogs just let us sign up if we want to, at least they’re a bit less annoying.

10. Custom illustration and iconography

Yes, you can find tons of well-designed stock visuals to use in your designs. But to really set yourself apart, you need to create something unique. Having someone create visuals and iconography customizes your website and projects your personality. Plus, it shows that you really put time and care into this design. Stock graphics are one of the hallmarks of the boring homogeneity many people perceive in the web design world. Creating custom visuals that speak directly with and to your content offers one way out of the fast food design trap. Here’s hoping we see much, much more of th

11. Looking to the future: virtual reality for the web

It may be in only its earliest stages of development, but virtual reality web browsing will one day be a ... uh ... reality. Mozilla’s WebVR team envisions a virtual reality web where every site can present people with an immersive, 3D reality utterly different from the web we’ve grown used to. Like most virtual reality technologies, WebVR still has a ways to go before it will easily accessible to most people. That said, there’s no better time to think about the future than right now.

Comments are closed.