What will be the biggest web design trends of 2016?

1. Devices
Actually, Google Glass has turned out to be a mistake on Google’s part. It sounded great on paper, but once put on the market, those who could afford it found it to be rather annoying. Sales of Google Glass were initially slower than expected and dropped off, rather than increasing over time.

I predict the iWatch will sell fairly well at first, owing to all the fanboys and fangirls who have too much money to blow and feel the need to own all things Apple. After the first few days, in other words, once the Applephiles have spent their time waiting in line and have bought the iWatch, sales will drop off dramatically. People will begin to realize that the watch is too big as a wearable and that the viewport is too small for anything more than telling time. The initial start screen will be too crowded with icons for it to work well as a touch screen device, but does not lend itself to using a mouse and keyboard like non-touch devices.

2. Accessibility
At the same time, UX Design and Web Design will remain at odds on accessibility issues. Many cutting edge Web Designers will continue the shift towards adding more eye candy as the majority of content, making websites and apps even less friendly towards blind, deaf, and elderly users. Gesture only sites and apps will make UI elements even less friendly towards physically disabled users, especially those missing fingers or an arm (or the ability to fully control finger and arm movements, like in the case of Stephen Hawking). Devices controlled through eye tracking and apps designed for those devices will add another obstacle for blind users. Web Designers will continue to ignore accessibility (beyond forced giant fonts for everyone) and will leave the brunt of the work to the engineers creating new prosthetics and implants for the disabled.

At the same time, the best of UX Designers, especially UX Designers that have worked with or lived will disabled people, will continue to push for simple design fixes for the disabled. We will continue to recommend use of text for menus, whether the text is visible on the screen or it is ‘visible’ to screen readers for the blind as alt-text added as an attribute to the img element for menu icons.

3. Parallax and animations
Parallax and heavy video-based animations will likely win out over CSS transitions and minimal JS/SVG solutions. This will continue to increase load times for the purpose of eye-candy instead of decreasing load times for the purpose of keeping up with our fast-paced, modern lifestyles. In rural areas, many of these parallax and video-animation apps and websites coupled with low bandwidth will cause an increasing number of sites and apps to simply time out, meaning the user will not be able to access the sites and apps at all. Even parallax scrolling adds little to the user’s experience relative to the unpleasantness of slower load times and heavily scripted code spaghetti. Using a HTML and CSS solution involving the use of fixed and relative positioning, scrolling overflow, calc() height and width, and @media queries and/or @viewport for viewport size adds to the user’s experience just as much as parallax scrolling, while making the layout more responsive, keeping the code elegant, and adding little or nothing to load times. The only real reason to stick with parallax scrolling is the code-illiteracy of drag-and-drop CMS-only designers.

4. Flexbox
Flexbox has been predicted to become a thing for quite some time, but has yet to gain the traction in the market that it needs to actually get much of anywhere. I think part of the reason flexbox is not taking off as hoped, is the fact that it began as an Adobe project. The W3C initially blew it off, knowing what flexbox could become. Flexbox still has the potential of becoming a fully Adobe owned bunch of proprietary markup which Adobe could charge high usage and licencing fees for. At the same time, it was created and is still used for the purpose of making HTML and XML related sites look and function the same as PDF files. We have done the printed magazine before. Those who look for long term trends want to find ways to surpass current Print Design. Those who are fixated on short term trends continue to look to digitally reinvent the printing press (invented in 1436, revolutionizing printing technology by the early 1500's).

5. Grid layouts
While useful for some content, grids tend to be over-used. Not all content lends itself to a grid. On the other hand, when a grid layout does benefit users, many grid designs make heavy use of massive scrips and bad semantics (div.column3row5text for example). Often JS, PHP, and other programming languages end up being used to create the design, while CSS is ignored or used to create function, which is completely backwards from how these coding languages are meant to be used. The thing is, grids are a bit like tables in that they can arrange content in a grid pattern using three elements. In the case of tables, table, tr, and td are three elements. In the case of a responsive grid, the three elements may be anything.

Using [div, section, article] or [menu, ul, li] are both perfectly valid examples of using three elements to create a grid layout. The trick is in using positioning and display attributes to your advantage and using @media queries for responsiveness and calc() for the height and width of the actual tiles. Simplifying the markup and styling this way makes it that much simpler to design a grid that does not absolutely have to mimic the Metro design of Windows 8 (aka flat design).

6. Flat design vs. so-called skeuomorphic design
Once upon a time, textures and shading were all the rage. Then high resolution photography and parallax scrolling became a thing. Now, flat design (rather late considering the inspiration, Windows sort-of-newish Metro design) is the new trend and design is becoming increasingly ‘anti-skeuomorph’. Modern design is more visual and anti-visual, all in one. ‘Skeuomorphic design’ is the new devil with an oh-so-intellectual sounding name. Big words, people, big words.

But are these trends really all that helpful? First we began adding to load times and creating unnecessary code-spaghetti to make our designs more visually appealing. Then we decided box-shadows, text-shadows, and very subtle background textures confused users and sought to strip out much of what many users found visually appealing while finding new ways to bloat our code even more. Yes, flat design is in, but how long will it be before we have to completely redesign everything all over again when the next visual style becomes the new in-thing for the new designers club? Personally, I hope that we start looking at what the purpose of the site or app is and create designs which complement that purpose. Blend old styles with new styles. Create completely new styles which have never been seen before. Whatever — just make it fit the purpose and content of what you are styling.