20 Hottest Trends That Will Shape Web Design Come 2016

By Jake Rocheleau. in Web Design. Updated on December 30, 2020.

As time inches forward with each passing year, many new design trends loom on the horizon. The field of web design is always changing with new tools, workflows, and best practices for constructing usable layouts.

It’s tough to predict which exact trends will draw the greatest attention. Yet recent history shows a pattern of trends that have been growing like wildfire. I’ve organized 20 unique trends that have gained traction over 2015 and will likely continue well into 2016.

Web Design Trends for 2017

Another year has passed and designers are looking ahead towards the future. Many promising design trends are bound... Read more

1. Sketch App for UI Design

Sketch is quickly replacing Photoshop for all UI design tasks ranging from low-fidelity wireframes to high-fidelity mockups & icon design.

Sketch App is a Mac-only application made specifically for web and mobile designers. It offers a smoother work environment to craft vector elements for any interface, yet it also retains many features you’d expect from Photoshop like text effects and layer styles.

While there’s no evidence that Sketch will ever be released for Windows, it has still become a valued choice by OS X users. The simplified workflow and cheaper price tag is giving Adobe a run for its money. If Sketch continues to provide the best UI design experience then it’ll surely continue growing well into 2016 and beyond.

2. Browser-Based IDEs

Desktop IDEs have been around for decades with options ranging from Notepad++ to Xcode and Visual Studio. An IDE makes it easier to write code with suggestions and syntax highlighting(among other features).

But traditionally IDEs have been released as desktop applications. Over the past few years we’ve seen a dramatic rise in browser-based cloud IDEs. These don’t require any software other than a web browser, which allows devs to write code from any computer with Internet access.

Cloud IDEs function more like web applications where you can save code snippets to your account for sharing or personal storage. CodePen is one of the most popular IDEs with support for HTML/CSS/JS along with custom preprocessing like Jade/Haml and LESS/SCSS.

Mozilla Thimble is another IDE for beginning developers who want to learn as they code. Also Codeply is great for testing specific responsive frameworks like Bootstrap or Zurb’s Foundation without needing to download any files.

3. Free Sass/SCSS Mixins

Preprocessors have been trendy for years but only recently became mainstream enough to feel ubiquitous across the entire field of web design/development. Nowadays it seems odd to write vanilla CSS when Sass/SCSS can provide so much more.

One benefit is a growing supply of Sass mixin libraries. Simple mixins are like code snippets or basic functions to generate repeatable code in CSS. While you can always write your own, many developers have been kind enough to release free mixins online.

Some mixins come in libraries like Bourbon while others can be standalone items. Try doing a search in GitHub for Sass/SCSS mixins to see what you can find.

4. Card Layouts

Website card layouts were first popularized by Pinterest a few years back and have since become a trend for content-heavy webpages. Free plugins like jQuery Masonry can be used to mimic this layout style with animated cards for various heights & widths.

A card layout is best used on pages with lots of data that should be scannable. The landing page for Google Now uses a card layout to advertise optional cards for the Google Now app.

You can think of card layouts as more dynamic grids with a focus on minimizing content to the bare essentials to list more items together. Online magazines like UGSMAG and The Next Web are both perfect examples of card layouts used to showcase recent post content.

5. Custom Explainer Videos

Big and small companies alike have taken to the trend of custom explainer videos.

The purpose of an explainer video is to demonstrate how a product or service works. Visitors may skim a list of features and still have no idea how the product operates. Videos clarify everything visually and cover the important stuff in just a few minutes.

If you want to try your hand at making a custom explainer video check out this Udemy course. It’s an in-depth study focusing on videos for landing page design.

6. Live Product Previews

Landing page design has seen incredible growth stemming from greater Internet speeds and browser capabilities. One major trend I’ve noticed is the addition of live product previews on homepages or custom landing pages.

Take for example Slack’s product page. It features a video tour and vector graphics covering the Slack interface. These product previews are meant to give potential users a glimpse into how the product operates.

Webydo is another brilliant example with a live animation playing on the homepage. This allows visitors to see Webydo in action without having to manually demo the product. But you don’t always need to rely on animations for product previews. Iconjar uses a simple PNG screenshot to show what the product is and how it works.

7. Automated Task Runners

The world of frontend development has changed so much with a handful of new best practices for website creation. Task runners/build systems like Gulp and Grunt are being used much more frequently for a slew of tasks that previously required manual effort.

Automation is the lifeblood of quick turnaround and churning out quality code. Machines don’t make mistakes, so the more you can automate with confidence the fewer issues you’ll have (in theory).

To learn more check out this Reddit post explaining how task runners operate. These tools basically run JS code that will automate parts of your workflow, either custom JS or scripts written by others.

8. Native JS Mobile Apps

I’m a big advocate of using the right tools for the job. In the case of mobile app development this means Java for Android, Objective-C/Swift for iOS.

But not everyone wants to learn a new language just to build a mobile app. Thankfully it’s becoming easier for native apps to be created & compiled with alternate libraries such as NativeScript or React Native.

The gap for becoming a mobile app programmer is shortening with the ability to create mobile apps via JavaScript. PhoneGap is yet another option based on HTML/CSS/JS code.

While the creation process does vary greatly, JS is quickly becoming a solution for coders who want to build mobile apps without learning a new language.

9. Collaboration Tools for Design

Instant messaging and group chat has been around for well over a decade. However these resources have traditionally relied on plaintext with some capability to attach files.

A new emerging trend is the ability to share live design documents within chat applications. Notable is one example where annotations and comments can be layered right on top of a document. This gives designers a clean way to share work directly with everyone on a team.

Slack is the most popular chat application at the moment which supports many similar features. The growing Slack userbase has been adamant about creating extensions that greatly improve Slack’s capabilities & tie into other products like Hangouts, MailChimp, and even WordPress.

10. Responsive Frontend Frameworks

Frontend frameworks like Bootstrap have been around for years and continue to prove useful on projects both personal and professional. Responsive design has forced its way into frameworks and created a demand for frontend code instead of just backend (Django, Laravel, etc).

Moving into 2016 I think we’ll be reading a lot more about responsive frontend frameworks & their value in web projects. Many devs are eagerly awaiting the release of Foundation 6 and the public v1 release of Bootstrap 4.

Other lesser-known framework you might check out includes Pure CSS.

11. Greater Focus on UX Design

The field of user experience design will continue to grow rapidly with more designers and developers taking notice. UI design is part of UX design but it’s not the final goal. UI is a means to an end, with the end being a fantastic user experience.

Just 5 years ago I was barely familiar with UX or how it applied to interface design. Now we have resources like UX Stack Exchange and free UX ebooks. If you don’t know much about user experience then now is the best time to study & learn how UX principles can be applied to all forms of digital interfaces.

12. Package Managers

Digital package managers have risen so quickly that they’re practically a requirement for modern web development. Solutions like Bower and NPM can save a lot of time starting new projects.

Mastering any new technology will take time and comes with a learning curve. But if there’s one thing that every frontend (or backend) developer should know, it’s a package manager. They require some knowledge of terminal commands but once you get used to the process you’ll never want to go back.

13. Advanced UI Animations

CSS3 transitions were only the beginning of a long-term trend of animation on the web. Now we have dozens of CSS and JavaScript libraries dedicated to animation. Things I never dreamed possible are now built & available for free if you know where to look.

Animation isn’t a requirement for good design. But it can make a good design into a great design when used properly.

Keep an eye on animated trends for interfaces and see what you can take away from various websites. Remember that web animation isn’t a Disney movie and should be treated with respect. Use animation gently so that it enhances an interface without becoming a nuisance or distracting element of the design.

14. Designers Learning to Code

A hot button topic this year has been the case for designers learning to code. Some designers feel it’s not their job to write code, while others feel it’s becoming the norm & should be embraced.

I’ve read heated discussions and fascinating posts about this subject which only seems to draw emotional responses. A good design is just a pretty picture without code. Yet to focus on both requires a designer to spend less time practicing the craft.

So is there a definitive answer? Some would argue that job viability increases for designers who know frontend coding. Yet what if someone doesn’t want to write code? Is it worth learning just to compete?

I feel the clearest answer is to do whatever you want. But it seems this topic is still on the table for many designers who will likely continue the discussion into 2016.

15. Free Online Tools & Webapps

It used to be that all programs were run from the desktop no matter what you needed to do. But nowadays I’m consistently amazed with how many webapps are available for free online.

You’ll find everything from URL encoding/decoding to a completely free Markdown editor. Even Google Drive has taken Microsoft Office products into the browser (again, completely free).

The current level of computing power and homogenous standards from web browsers offer a seemingly limitless amount of opportunities. Complex tasks like resume creation to image compression can be handled right from a browser window.

16. The Growth of Web Components

Web components are trying to solve problems of complexity for developers. The WebComponents website has great resources and materials to give developers a jump start into this topic.

If you’re not sure how to understand modular web components then check out this post to learn more.

While components haven’t particularly blown up to mainstream status, they are being discussed by professional developers around the world. Google has released Polymer which is a framework used for adding web components via JS and HTML.

This may not be practical to use in major client projects just yet. However the technology is available and with a little practice you can master the concepts with ease. To learn more and see a few code samples you can read through this CSS-Tricks post on modular web components.

17. Online Learning Resources

We all know that now is the easiest time to learn any skill from the comfort of your computer. It seems the online learning marketplace is growing exponentially with new courses and websites popping up every year.

I feel more confident than ever before that we’ll see a rise of online learning. Well-known sites like Treehouse and CodeSchool offer incredible courses.

If there’s a subject you want to learn, there’s likely a course online – especially if you want to learn digital techniques like UI design or app development.

18. Server-Side JavaScript

While there have been past options for server-side JS, none have permeated as quickly as Node.js. JavaScript devs have fallen in love with this library and watched it rise into direct competition with other backend languages such as Python or PHP.

Node allows developers to build websites using a single language for both frontend + backend code. And resources like Node Package Manager give even more value to Node.js.

From what I can tell, Node is still on the upswing and continues to gain traction from industry enthusiasts. Whether you plan to learn Node or not, there’s no doubt it’ll continue to grow as a major trend in 2016.

19. Touch-Supported Website Features

Smartphone browsers have always supported touch features for all websites to maintain backwards compatibility. Yet recently I’ve noticed more plugins and custom features appended onto websites with the specific goal of handling touch events.

Plugins like Photoswipe and Dragend.js are built to handle swiping and tapping on touchscreen displays. It seems web developers are not only building responsive websites, but touch-enabled websites too.

If you search around you’ll find some really impressive features built for the web that rely solely on touch events.

20. Material Design on the Web

Google’s release of material design was an enormous success for Android designers. Material design is considered a design language meant to simplify the process of crafting user interfaces for Android smartphones.

Over time web designers have taken this to heart and built entire websites based on Google’s new design language. It seems the material design trend has moved beyond just mobile apps into the world of web design.

Folks who want to build material websites don’t even have to reinvent the wheel. Free libraries like Material UI and Materialize offer custom codes for structuring a new layout on top of the material design foundation.

Closing

Looking over these trends it should be clear that we’re seeing a real concerted effort from the web community to make the process of building websites easier. We all want to save time in our day-to-day workflow.

Since the web’s inception we’ve seen many technologies rise, only to be replaced by better alternatives. These 2016 trends are pushing for a more uniform set of design techniques that will make building websites easier and much less complex.