Just like the spectators at the theatre are waiting for their favorite actors to play their parts in the performance, web designers and developers meet every New Year looking forward to the new trends that will appear on the stage very soon.
We have just celebrated the New Year, so it’s time to talk about latest website design trends that are likely to spread in the course of 2016. Only lazy bloggers don’t talk about trends now and we are not from their cohort. We have even found an infographic on the topic. You may click here to view it, if interested.
There is only one problem with the trends and we will try to solve it for you. There is always too much information on them on the net. We have read nearly 70 articles, which took us nearly 3 days to go into the heart of the matter.
However, you will be able to get the whole collection of 2016 trends in web design without any tedious research. We guess our version of this useful reading will take you not more than half an hour or maybe even less. Moreover, you can skip the trends you are not interested in at the moment and look through the information that is crucial for the time being. We made up a kind of article plan for the purpose. Each item is an anchor leading you to the relevant information. We want to be a one-stop-shop for you, hopefully this will work out.
When people meet the New Year, they always recollect the best moments of the previous year and the best things that had happened to them. We observed a lot of great trends in 2015. Some of the trends listed below reached or have almost reached the top of their popularity, so we are waiting for their further development and improvement in 2016. In other words, please don’t be surprised to meet your good old 2015 buddies on the list.
We tried to summarize, systemize and put into order all the available material for you, hopefully this will help and you will start to feel perfectly comfortable speaking about web design trends of 2016.
2016 web design trends digest contents (click to jump):
- Layout >>
- Imagery >>
- Animation >>
- Scrolling >>
- Usability >>
- Loading >>
- Designer's Toolkit >>
- Coding >>
- Futuristic Forecast >>
- Final Ideas >>
* * *
This layout type was one of the dominating trends we've observed in 2015. Split Screen is basically a layout where the site is split in half: 2 different images with 2 different intentions and CTA.
Bolder use of colors
Web apps and sites have tended to stick with "web-safe" colors. Blues, muted colors, red for alerts and notifications. In 2016, we expect to see a lot more variation in brand colors, leaning towards saturated and vibrant ones. Maybe they will look even neon or fluorescent.
Typography is the art and technique of arranging type to make written words become more attractive. As designers are improving all aspects of design, typography must be included in. Flat design and minimalism already harness the power of big, dramatic typefaces to make a strong statement. The forthcoming year will bring more adventurous use of artistic fonts and creative type treatments on websites.
Blocks grid is especially good for eCommerce sites. It is very effective in displaying products. The page doesn't look messy at all. Besides, you can play around with the size of the blocks to emphasize the importance (the bigger - the more important).
Though you may not be able to catch the realistic view of grids, the fact remains that grids are very much existent on every mobile’s interface. No wonder, these grids are considered to be the elementary design path from where you can kick-start your mobile apps design task.
What’s more, 2016 will see more playful web layouts that deviate from a rigid grid design. Certainly, storytelling and high interactivity encourage this kind of soft rebellion against the classic grid.
There is an opinion that grids on demand will replace Bootstrap, Foundation, and UI Kit.
Maybe it's time to read up on Susy 2? What do you think? Bootstrap and Foundation have done wonderful things for rapid prototyping, but as of now, they're feeling pretty rigid as design platforms. If you've spent much time using them, then you know that it's very difficult to go outside of the grid blocks in an elegant way. You also know that the JS and CSS files generated by the base level framework are nasty. UI kit was a big step in the right direction, but it's still a grid system that you need to trim to fit your project. Susy 2 takes a bit of time to wrap your head around, but once you get it, you are able to invoke grids on demand for elements that need them while sticking to your own lightweight design the rest of the time.
Flexbox will redefine responsive grid systems
Flexbox is now supported by all modern browsers, which means cleaner CSS, faster websites, and fewer layout hacks just to get something to be vertically aligned. Flexbox responds to browser window changes naturally, so rendering the popular responsive grid systems become unnecessary.
Pioneered by Pinterest, cards (which are very close to grids) are everywhere on the web because they present information in bite-sized chunks perfect for scanning. Each card represents one unified concept. Since they act as “content containers”, their rectangular shape makes them easier to re-arrange for different device breakpoints.
The website looks unusual without menu and tabs (to be more accurate, when they are hidden). This gives a wonderful clean effect. The users are focused only on the things that are important.
The rise of Material Design
Material Design is a design language developed by Google. It has been announced on June 25, 2014, at the 2014 Google I/O conference. Many apps have been utilizing this new design language and we’ll be seeing more websites utilizing material design in 2016.
This trend will be disrupting industries where websites are not that fun to use like airlines, banks, health care, finances and more. Think of funny images, expressions, hidden functionality, smart personalized data and more.
Flat Design never gets old
No matter how many years have gone, flat websites still look fresh and current. Flat style is continuously evolving to the new levels. Actually it is now in its true form. This form is containing both expansion of devices and screen sizes. Thanks to this new form, the principles of flat design will never get away soon. Users will never miss an important piece of content a flat website wants to show.
This technique has been around for years but gained popularity only since the last few years. It became popular in very short span of time because it’s quicker and easier for users to comprehend and is able to load more quickly on websites. Flat design trend can be seen everywhere, from blogs of small businesses to the websites of the most iconic brands in the world. It is quite easy to create and manage flat designs. But with the ever-changing trends, designers are likely to add a little extra to the icons, the menus, the illustrations in order to breathe life into the site elements.
Removing non-essential design elements in favor of simplicity
There is an idea/concept in design that a design is complete when all of the non-essential elements have been removed. In 2016 we could be seeing more of this idea come into fruition as sites look to find ways to simplify their designs by removing non-essential design elements.
Simplicity seems to share an eternal camaraderie with graphic design. It was in the early 1960s that we witnessed the initial wave of simplicity or minimalism and although there have been huge works with ornamental details in between- yet simplicity is once again back to the fore with full glory today. Talk about one of the most sought-after latest design trends now and you have most of the designers voicing for “simplicity”. So, what is the buzz about simplicity that has led it to dominate over the long-ruling elaborate ornamental presentations? Five points below effectively summarize the importance of simplicity –
Less distraction- A simple design eliminates chances of getting distracted by unnecessary additional features such as sudden clip arts or iffy bevels that otherwise can make the design overwhelming & complicated.
Clear processing of information- Don’t you think that it’s easier for your brain to process data from simple graph rather than from some design with complicated 3D perspective? The answer is definitely yes and here you have simplicity as the winner.
Simple coding- Simple designs do not ask for too much of unnecessary extra work from the development team & your developers would love you more for it.
Speedy loading- A simplistic web design means fewer details which assure faster loading and you will have happy visitors for you.
Aesthetically pleasing- When you can keep things short & simple, you have already mastered the art of sophistication which guarantees an aesthetically pleasing work, loved by all.
The contemporary graphic design scene has got the designers more & more shifting away from the decorative ornate patterns to vouch for sleek simple minimalist patterns. It’s a busy age today where we want everything streamlined so that we can have a faster grasp at the presentations before us and “simplicity” with its minimalist essence & a balanced expression between form & function, fits the bill like a dream.
The following infographic below speaks about the importance and need of simplicity in design as well as reveals the prime laws to achieve simplicity at its best in your presentations.
If less is more these days, so using a one page design or a simplified multi-page design will attract more users to your website. Visitors often shy away from page heavy sites.
Nobody wants to click multiple pages anymore. With an increasing number of people accessing the internet through their mobile devices these days, one page designs are easy and more convenient for them. And when you’re designing a one-page website, it makes sense to ensure innovative scrolling to make things easier and interesting for visitors.
Fix width centered site layout
Most websites over the last few years have used the “banding” or width: 100 percent design element so that things like images and sections visually stretch the full width of a browser’s viewport. Before this trend became popular, most sites were fix-width and centered in the page. You could tell where the site ended on either side.
Vintage Style inspired by ‘80s
The colorful era of bulky computers and massive cell phones of the early ‘80s and ‘90s is the main source of inspiration for the latest flavor of the vintage trend on the web. Pixelated icons and text, galactic backgrounds and interactive moving stars and planets will be around a lot in 2016 web design.
Custom homepages are going to stay for 2016
A custom homepage is an interesting invention. Basically, it’s meant to take the main purpose of the site – its main goal – and put it on steroids by introducing a highly optimized look. That look is meant to grab the visitor’s attention and don’t let go until they’re led to a specific action.
Custom homepages are basically a kind of a landing page. To some extent they differ from the rest of the website design and are often more visual too.
A good custom homepage provides a better way of welcoming a first-time visitor and is more effective at telling a story.
Using different geometric shapes
This was a winner trend for the last couple of years. It’s expected to make waves in web design industry this year too. For long rectangle page layouts have been the first choice of website designers. But we’re likely to see more and more designers put in conscious efforts to come up shapes other than a rectangle in the year 2016.
There are so many other shapes of geometry that can be and are being used for designing websites. It’s something that yields the power to enhance the overall voice of the website design. Apart from helping users navigate the site easily, it catches the eyes easily too.
The fashion of using loud and flashy buttons is gone. Usage of ghost buttons, also called transparent/hollow buttons, is another trend that will rule the roost in 2016. Ghost buttons include only the outline of a button along with a word or two in simple typography in the center. And this is what makes them look attractive and immediately grabs people’s attention. Due to their nature of being less obtrusive, ghost buttons help sites highlight more of the content they want audiences to actually see.
An emphasis on originality
The biggest problem with the current design trend is that it's very difficult to be original. This is a side effect of mass adoption. We guess that originality is going to come in the form of an increase in custom drawn elements combined with carefully produced animations. With the passing from grace of flash, a dearth of HTML5/JS/CSS3 animation libraries have sprung up to help with this. There is no one-size-fits-all technique for achieving originality, so most of the well done executions will involve a good deal of effort and planning.
This is a great trend - a big image smacking right into your face. It is captivating and focuses attention on the content. No distraction, everything is just clean and neat. Increased bandwidth, wide browser support of HTML5 video, and ways to serve high resolution graphical assets selectively to devices with retina screens, all add to the popularity of gorgeous HD background images and videos on websites growing even stronger in 2016. This will be especially true in industries like real estate.
The most interesting thing about a full screen layout is that it makes it easy for users to find, understand and comprehend the information they’re looking for. You can easily use a video or image of the product or service that you are providing that helps in engaging the customer.
Want to differ from the competitors? Then, just don’t embrace the large-header-background-image trend.
Full screen background video
Full screen background video is a rising trend of web design. This perfect automatic background video will definitely catch the visitor’s attention. Background video also elevates the value of the website. But it doesn’t distract anyone from the content; in contrast, it supports audience to get attention in the Call to action button. As far as we can know, a video background is really making impact to design.
The next step of gamification and design is emerging with a blurred line between what’s real and what’s created or imaginary in web design projects. And the results are pretty stunning.
From virtual reality to websites that let you make choices to find new content, this type of customization is personal and users seem to really like it. This trend also includes creating imagery that looks real, but you know that it is not.
Natural stock photography
Designers will start to pay even more attention to imagery as natural looking stock photos connect with people on a whole different emotional level. In 2016, we’ll be seeing more amazing photos implemented in websites.
Some websites are opting for using their own photography on their home pages or blog posts instead of picking a stock photo. Other websites are ditching stock photography for videos, infographics, or even GIFs to help convey their message.
Icon sets are another stock element that’s being dropped in favor of something more custom. There are thousands of sets out there, so it’s easy just to pick one and run with it, but that little extra touch of creating custom icons can help set a site apart from others.
Vibrant custom illustrations and iconography
High pixel density monitors have revealed that standard image formats don't always work as expected on the modern web. Using .jpg and .png files can result in a pixelated look on retina displays, which spoils the aesthetics of a website. Today, wider browser support for Scalable Vector Graphics (SVG) and easily implemented icon fonts are a fantastic answer to this problem. As a result, we’ll see more web designs showcasing colorful custom illustrations, as well as stylish hand-drawn icon fonts and SVG icons that remain crisp and beautiful at any screen resolution.
SVG has been in use for many years. And it still holds extreme importance. With SVG, images maintain their clarity and sharpness on all devices. It packs all essential web elements together with design elements to fit well to all screen sizes. W3techs.com reveals that currently only 1.3% of all websites use SVG. But we’re sure to see it prevailing the world of creative web design in the year 2016.
While having amazing content, it is always crucial for a website to be able to tell a story through this content. Web design in 2016 will likely focus around helping tell a story for users because animated storytelling is really awesome. Users like stories. Websites telling stories immediately capture visitors’ attention. It’s cool when you scroll further down the page and the website tells you the story about the company.
Dynamic background could be anything from using a powerful image to a 3D background or even a video. Adding a video at the background is perfect for drawing immediate attention of people because the human eye is drawn to movement.
We’re sure to see more of dynamic backgrounds on the web design arena in 2016 because they make visitors want to see more and know the story behind the moving images.
More Static Content / Less moving parts
Many professionals believe that the slider is the first thing to be eliminated in the realm of having elements slide, fade and scroll on the page. We will see more static designs with less moving parts. Users want quick and digestible content and designers and developers alike must work to deliver content that is direct without distraction. However, galleries and slideshows are still an effective way to showcase multiple images without overburdening the users on photography sites, product showcases, and portfolios.
By the way, websites with slides can become an alternative to websites with sliders. They are a kind of sliders evolution. Sliders were aimed on allowing websites to move images within a frame to showcase content. Full-screen slides, where each slide refreshes the entire screen with new content can work with a click, scroll or timed effect. Users can navigate forward and backward for an experience that is almost physical. Expect to see plenty of sites using this concept in the coming months.
Cinemagraphs are also enjoying widespread favor. These are still images with a selected animated portion, usually a subtle detail that aptly draws the attention of website visitors. They’re not new, but the success of “live photos” on the latest iPhones, which look quite close to cinemagraphs, and robust browser support for HTML5 canvas, play a key role in cinemagraphs being listed as a design trend of 2016.
What we are envisioning here are self-contained workflows that grow as they are interacted with. For example, a homepage may have 3 or 4 call out areas that have an obvious intention like registration, a tour, product offerings, etc. Initially they will have a small amount of content geared toward the begging of interaction. Once you trigger a workflow it will launch a mini application that will complete its intended purpose. Clicking on a registration element will alter that area into a registration wizard either directly in that area, optionally changing its location and size, or in a modal window.
These experiences may be simple or complex, but they'll have the goal of simplifying the initial navigation paths while still presenting a variety of choices without being overwhelming. They'll also have the side effect of reducing page changes and scrolling for tasks which can be completed in a few clicks. Instead of the ubiquitous scrolling header image, these micro experience cells or cards can be self-contained showcases for a particular area of business.
This technique could be particularly useful in web applications where, instead of transferring to a new screen to enter some data or complete a task, the cell simply adapts to allow the task to be completed right there on the spot.
Long scroll is very engaging indeed. This layout kinda tells a story to the visitor, without having to click anything at all. Apple is one of the sites that do this very well. Most of new site designs today tend to be longer when scrolling through the page. As mobile devices become more popular, it’s becoming more commonplace for sites to opt for scrolling instead of linking as a means to display content, especially on their home pages.
According to recent study by UX Movement, most visitors prefer up and down scroll design than the usual click navigation of one page to another. It can be vertical or horizontal, swiping or animation scrolling. We’re likely to see more of innovative scrolling in 2016. So, don’t forget to incorporate the innovative scrolling feature to attract more visitors to your website in the year to come. It will also ensure that visitors spend a longer time on your website. Remember, the idea is to make things more fun and convenient for your visitors. NASA Prospect is a perfect example of such innovative scrolling. This amazing scroll site never fails to keep its visitor engaged and entertained.
Parallax scrolling effects are really cool if you ask us. In short, they’re all about creating an illusion of 3D motion and depth by altering the speeds at which both the background and the foreground scroll.
When done right, it gives the website this unique feel and makes everything very pleasing to the eye. Not to mention dynamic.
The most common application of the parallax effect is to use either one image in the background, two images (one “closer” to the screen than the other), or even a video, and then to put a block of text in the foreground.
Although scrolljacking has received mixed reactions, many websites are at least trying out this feature. In fact, there are HTML5 templates like Flappster for product demos which include scrolljacking. If you use these templates, make sure you have thoroughly tested them for every element that could break your site.
One thing that web developers must keep in mind is that if you implement scrolljacking, try not to mix them with other plugins to your page, like horizontal infinite scroll, for instance.
Another feature is to add anchors, with proper title texts so that screen readers can read them out when they are focused. From the point of accessibility, implementing scrolljacking could be analogous to tabs, especially in defining anchors and their ARIA roles.
Scrolljacking is a difficult technique to implement itself and making it accessible is easier said than done. As we’ve seen, many netizens have voiced their concerns about the matter and we believe you should listen to them and stay away from it.
We suspect that as soon as Apple moves away from this feature, its fans will follow suit.
Page height reduction
This is more of a hope than a prediction. The common belief out there at the moment is that this trend of more vertical scrolling and less clicking will continue to grow. Sometimes, endless scroll ends in a lousy user experience. People like the use of scrolling as a way to phase in small portions of content or trigger animations, but scrolling or swiping 50 times to view the primary site content is going too far.
If sites were to consider their content and the goals of the interaction a little more, clicking to trigger a drill down into the site wouldn't be such a bad thing. Combined with micro experiences and modern front end programming, a mouse click or screen tap doesn't have to mean a jarring page refresh any longer. We believe that sense will prevail in the next iteration.
Accessible data for making data-driven design decisions
Web design is a profitable business, so it needs to start speaking the language of business. That means metrics, click-through-rates, conversions, channels, in short, analytics. If you are a freelancer, you likely will have hands-on access to these business intelligence tools. If you are not, companies like Apropose are working to make big data accessible to designers. The current iteration of Apropose is not there yet, but they are one of the leading teams founded with that goal in mind.
It becomes obvious that design is becoming less about aesthetics and more about the overall user experience. A fast loading site that gets the user to their intended destination first wins.
We are already starting to see this with many of the more performance focused brands.
Considering how fast the UI responds will be just as important as how it looks.
Immediate response UI
The days of save buttons and secondary action UI elements are on their way out. This is evident in most modern web apps. As we move closer to enabling web apps to perform like desktop applications we will see this adopted across the board. The technology is here, design will follow right behind. Some examples include anything in the Google Suite as well as other apps such as Airbnb.
Responsive web design is becoming less of a trend and more of a best practice. That happened thanks to the rise of mobile internet usage. It’s safe to say that responsive design isn’t going anywhere soon, as it represents a relatively simple and cheap way for businesses to build a fully-functional mobile-friendly site. There’s no doubt that responsive design is highly useful and versatile, but it also should be lightning fast in order to deliver a great UX.
The proliferation of UI patterns
Modern web is often blamed for sites similarity. But having a similar look isn’t necessarily a bad thing. There’s no real reason to reinvent the wheel. UI patterns must guide users through a smooth experience. While some criticize patterns use, there’s no doubt that their widespread use makes the function easily recognizable for users.
For example you’ll find an account registration pattern whenever you try to register for a site. There might be a form to fill out or a button that’ll allow you to use a social account to sign up. Multi-step form wizards are also effective since they “chunk out” the required fields, reducing friction and encouraging users to flow through the process.
Designing in modules and components instead of entire pages
Web design is moving toward modular and component design instead of mocking up entire layouts and comps for a particular web page. These components often involve designing how the search function will work, how the navigation will be laid out, etc.
We’ve matured into knowing that we have repeated elements on different screens, and that these elements need to be designed both so that they work independently but can still work with the rest of the site.
Not only are we more concerned about how these components look in terms of design, but they all carry their individual functionalities with it too. Designing with components and modules allows the same functionality to be replicated no matter where it appears on the site.
Forms and inputs go full-screen
This trend has come from the wide-spread adaptation of responsive website design. This happened for several reasons: keeps another screen from being loaded, gives more screen space for easier touch by fingers on touch screens, and encourages users to complete the form (for those forms that present one input at a time).
More sites and apps are going with the full-screen forms and input screens (such as signups and logins). Click on “login” and or “contact” and you may be greeted with a full-screen overlay with the form needed instead of being sent to a different page. A great example of this is Eighty East’s contact form.
Passive aggressive pop-ups
Web community believes that there are two serious UX crimes at play nowadays. The first is house ads. They are terrible. Pop-ups used to be bought by brands in the name of content marketing. Presumably this is because they generate lots of newsletter sign-ups, but this is a boorish ad format, and it just comes across as desperate.
The second crime is one of messaging. Depending on where you draw the line, you might not consider this web design, unless you think that content and user experience are fundamental. So what is the message here, apart from ‘Sign up yo our newsletter’ or ‘Download our ebook? The message is, if you don’t sign up, you (the user) are … we’ll leave the ending to your imagination.
Live product previews
Landing page design has seen incredible growth stemming from greater Internet speeds and browser capabilities. One major trend we’ve noticed is the addition of live product previews on homepages or custom landing pages. These product previews are meant to give potential users a glimpse into how the product operates. 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.
But you don’t always need to rely on animations for product previews. Some landings use a simple PNG screenshot to show what the product is and how it works.
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.
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).
These tools basically run JS code that will automate parts of your workflow, either custom JS or scripts written by others.
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 we were barely familiar with UX or how it applied to interface design. Now we have resources like UX Stack Exchange and free UX e-books. 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.
The “blur up” method
Blur up is a very interesting concept. It helps load large images by doing a rather clever trick. Facebook actually reports that it speeds up their pages by as much as 30 percent.
The whole idea is to take a really small version of a large image, apply some Gaussian blur to it, display it in place of the original, and then gradually load the large image in the background. This looks much better than having no image at all or looking at the image loading in the background the traditional way.
A really cool trick that we’re likely to see more of in 2016. After all, copying Facebook’s design choices has become somewhat of a standard.
Facebook also applies subtle loading states to newsfeed items, to bridge the user experience gap between ‘nothing’ and ‘something’.
“Loading” animations / preloaders
Loading animations are making a strange comeback. We thought that we done with them somewhere mid 2000s. It was at that point that we finally had the hardware that was able to load any application we might have on our computer without the need to display a loading icon. You don’t see those on your smartphones or tablets either.
Yet, surprisingly, loading animations or icons are back on the web.
Though, keeping in mind the thing about the average size of a web page being constantly on the rise since 2010, the need for loading animations is maybe not that strange.
Their purpose is simple - to entertain the visitor while the page is being loaded.
Not a particularly nice trend, but with growing weight of web pages it’s probably here to stay, although if your website doesn’t load in under eight seconds then something is very, very wrong.
On websites that feed content continuously, Lazy Loading aids in viewing immediate website content without waiting for the entire page to load.
This is especially helpful for websites that are highly visual, such as Facebook, Instagram, or Pinterest. In a society where information is constantly being fed into our lives, lazy loading helps to simplify viewing of said content by loading only small chunks at a time.
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.
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.
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.
Designers will prototype in the browser in order to focus on interactions instead of layout
The limitations of prototyping tools have always been a pain-in-the-ass to test with real, dynamic content. There are countless Sketch/Adobe plugins to address this. It is becoming the norm for designers to have coding skills, making it more natural to open up inspector to overwrite live pages or throw together a quick jQuery prototype from scratch.
Allowing designers to focus on interactions rather than moving around content and information will allow them think about web in a fundamentally different way. We'll start seeing many more ways to interact at a micro-level on what we have traditionally expected to be static web pages.
Touch-supported website features
Smartphone browsers have always supported touch features for all websites to maintain backwards compatibility. Yet recently we’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.
The growth of web components
Web components are trying to solve problems of complexity for developers. The WebComponents website (http://webcomponents.org/) has great resources and materials to give developers a jump start into this topic.
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.
CSS3 will finally impact layouts
Browser support for CSS3 has been growing over the past couple of years, and we're finally reaching a stage where some of the fancy new CSS3 layout modules can be safely used in the wild. Of course there's still a place for polyfills and fallbacks, but the likes of CSS3 Flexbox (Flexible Box Layout) can be handled by the latest releases of all the popular browsers.
It is safe to say that the likes of Flexbox wont be revolutionizing the aesthetics of layout in any dramatic sense – Flexbox offers an easier solution to a layout paradigm that's been in use on the web for a long time now – but it will make for faster-rendering pages that are easier to maintain, and a lot fewer hacks, so it is quite possible that we'll see more creativity in layout as a result.
The trend may not substantially alter the layouts, but the code underpinning them will become simpler and more reliable.
CSS shapes allow a designer to flow his/her layout into shapes like a circle. The outcome looks really cool, but as of yet, it is not supported by all browsers.
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.
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 we 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.
Native JS Mobile Apps
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.
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.
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.
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?
We 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.
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.
We 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 alongside newer sites like Bitfountain and Learn-Verified.
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.
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 we are 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.
Mobile apps design
With the dominant of both mobile apps and social media, most of the traffic comes to website from mobile phones. Building content in mobile apps is necessary because of this reason. It’s quite sensible as just only 14% of time spending on a mobile device is from browser, while the rest of 86% is from mobile apps.
Since Internet and Technology is allowing Semantic Web to become a reality, we believe this is to be the next thing designers and engineers will do for 2016 and beyond. In our opinion, they will be focused on improving UX with Wearables, Augmented Reality and Virtual Reality. Who knows how your next monitor / TV set will look in the near future…
Wearables are popping out everywhere and the market is waiting for the "iPod magic" to happen. Sooner or later in 2016 web designers and engineers will find themselves developing for this category. It might not be "mobile first" anymore and will be "wear it first" trend.
Wove is the example of gadgets we are talking of. Everybody is expecting more products of this kind to be developed soon.
Augmented Reality and VR
Same as wearables but this is where all of us are most excited at. Augmented vision gadgets and solutions are getting much more advanced, consumer friendly and available.
HoloLens from Microsoft
and a future product of Facebook, we mean OculusVRacquired by them might make designing for Augmented and Virtual Reality happen in 2016.
From "Retina Ready" to "Augmented Virtual Reality Ready"
Imagine designing for a very interactive environment, where you design the website making visitors extract pieces of data from your site, place it in memory to be viewed and placed anywhere the hardware limits them. Structured data / Micro data will make it happen, just like how Google was able to take bits of information from a well-structured site and present it to SERP.
Artificial intelligence will visibly penetrate the web on our communication platforms. Designers will supply them with human features. The site will automatically adjust depending on each user or viewer.
Surfacing contextual information has made great progress over the past few years. Now, artificial intelligence will help you take action. This is a design challenge because we want our AI to feel so much like you're talking to a human that you won't even notice the difference. We're seeing it on mobile already, but the real leverage is happening in one of the most traditional web mediums - email.
Click these links to get a clearer notion of what we are talking of:
A personal assistant who schedules meetings for you.
Introducing Smart Reply in Inbox by Gmail.
Facebook’s boldest experiment.
Your 24/7 Concierge Whatever you need, 24/7 on demand.
Microsoft’s Xiaoice virtual companion.
To make things short, you have just read our vision of web design trends that will become (or continue to be) popular in the current year. Some of them sound futuristic and some are more down to earth. IMO, 2016 web design trends will still be moving towards designing for Physical / Virtual / Hardware Interaction in Semantic philosophy. And what do you think? What trends are going to thrive in the current year? Please feel free to make your amendments to our list at the comment section. And please don’t forget to like and share the article if you consider it worthy.