17 Web & Graphic Design Trends To Watch In 2017
In 2016, I published a Medium post that proved to be incredibly popular — to my surprise! There, I highlighted what my team and I believed would be the most prominent trends of graphic and web design of the year.
This year, I’ve been closely watching the way online design evolved, because I wanted to do it again. Keep in mind this is not a prediction post. I’m no Nostradamus — but I know the industry I’m in.
My goal is to highlight the 17 most noticeable trends and changes happening right now. If you’re a marketer, webmaster or blogger, you need to be on the know — before they explode and get huge.
So, let’s see, Medium, do you think I can I do it again? Here’s what we think will be the defining design trends of 2017:
1. Web design becomes mobile design
2016 was the year of mobile-first. 2017 will be the year of mobile-only.
Am I being too radical? In 2015, mobile accounted for 56% of all traffic to top sites. The percentage has only gone up. While we still don’t have data for 2016, experts think mobile traffic may well surpass 60% of total (mobile is in the fact the only device that continues to grow in traffic).
Long gone are the days of designing a web experience for desktop users, and then adapting that to tablet and smartphone screens. As a designer, you’ll be expected to design for mobile, period. That will cover most of your users.
If there’s anything to adapt, it will be on the desktop version of your site. Mobile is the new gold standard for web design. Which means that mobile features, such as the hamburger/hidden menu or full-width screen, will soon be common on desktop sites too.
This trend will be a common theme to most of the items in this list.
2. Progressive web apps — Bye bye to the app store?
What is a Progressive Web App? It’s like a normal (native) app, but living on our browsers. Which means that you don’t need to download anything to your device. They’re served from the web, just like a webpage.
Like native app store apps, they can be launched from the user’s desktop or home screen — but they don’t need the app store to exist.
How is this relevant to online design? Two ways:
First, as I wrote in 2016, web design was becoming more like app design. Now, this will be true even at developing level. Web experiences will feel like apps, and they’ll be coded like apps.
The second consequence is that more and more designers will move from designing app store native apps, to progressive web apps. By the end of 2017, a big part of the web will look and feel like an app. And the other part will look, well, outdated.
Now, I don’t mean that app stores will completely disappear. At least not in 2017. But this is the year where “apps” and “app store” become two independent concepts. For good.
If you want to know more about PWAs, check what Google has to say about them, as well as the awesome infographic on this post.
3. Skeleton screens — Bye bye to the spinner!
Last year I said everything was about usability. The trend lives on.
Skeleton screens aren’t about the way a website or app look. They’re about the way they load. Say hello to the latest trend in user experience (UX).
Image source: https://disciullodesign.wordpress.com/2015/03/13/animation-and-the-user-experience/
Skeleton loading screens are a system to ensure that your web or app experience are as fast as possible, and this is achieved by loading the page in stages: from the most simple elements to the most complex — but always providing at least the bare bones of what the screen you’re browsing is.
This way, users can predict or anticipate what is about to load (think about the now ever-present image placeholders), making the short waiting time more fluid. This is the opposite of what the dreadful status bars or spinners tried to accomplish (mostly with no success). Skeleton screens will take over the web in 2017, and with good reason.
4. Microinteractions can mean a lot
A microinteraction is a small visual cue that’s triggered when a user performs a certain action.
Microinteractions are the building blocks of user interaction. On every device, every time you change a setting, you’re using a microinteraction. Ie, when you hover over a button, its color changes. Whenever you favorite or ‘like’ something, that’s a microinteraction too.
Creating good microinteractions is not easy. Good microinteractions separate successful products from the crowd. The Hamburger Menu, Facebook’s Like, Autocorrect and Autocomplete have earned a reputation as classic examples of great microinteractions.
We will see more and more microinteractions around the web, but not just because they’re cool. Well used, they add a function to the site or app, as well as feedback for the users. Microinteractions let the user know his action has triggered a change, and he doesn’t need to do it again.
To work properly, they need to have a single purpose, relevant and necessary for your site or app. If the user doesn’t get anything out of the interaction your usability will suffer, rather than improve.
Microinteraction can also easily substitute longer processes or interactions. Asking for the user’s opinion is such a case, where a choosing between three or four emoticons may suppress the need for filling a boring online form.
5. Get out of the Grid!
2017 will be the year that we’ll finally have a CSS based grid working on almost all browsers.
Which means that building a flawless, responsive grid for your website layout will be easier than ever. Ironically enough, a lot of designers have grown tired of adapting to a geometric grid when arranging their content. It’s time to get out of the grid!
Elements that break the limits of traditional straight grids will almost become be the new standard. Even corporate sites in more traditional industries will start to adopt them — effectively making websites that still adhere to the old grid look a bit worn.
Image source: http://hometowntrolley.com/
6. Vertical and Split Layouts
After quite a few years where horizontal modules were the norm, especially on landing pages, vertical and split layout have finally emerged as a strong alternative.
They work well both on home and landing pages. The reason is they offer two or more different choices to the user, without the need of presenting one as more important than the other. You’ll often see this site layout paired with lots of negative space and bold typography (see below).
You can even use more than two vertical modules. This divides your content in several facets, which are perfect for site navigation, besides being a better content showcase solution than the old sliders.
For a quite similar concept, keep an eye on big photo-centric menus, soon to be widely adopted by ecommerce sites.
Image source: https://d3ui957tjb5bqd.cloudfront.net/uploads/2016/12/Screen-Shot-2016-12-23-at-10.23.jpeg
7. SVGs
Scalable Vector Graphics (SVG) files are a vector image format that’s been around from 1999. Then how are they an important trend in 2017?
Two big reasons: resolution and page load speed.
Since SVGs are scalable, that means they’re resolution independent and will look perfect on any screen, no matter what device or size. This solves the problem where you sometimes had to prepare two different image files for every object, one for normal resolution screens and another one for retina screens.This is huge for logos and any branding elements. Create your logo once, just the way you want it, and it’ll always look great, no matter on what size.
An example: the new TNW’s logo is an SVG file, as you can see going here and zooming in your browser as much as you like — the logo still won’t pixelate.
As far as page-speed goes, SVGs don’t make any http requests. This is because the entire content of an SVG file is just text — making it blazing fast for browsers to read. And as you know, in an increasingly mobile web, page-speed matters. A lot.
But there’s even more reasons for their recent popularity: they can be animated, and they are perfect for creating geometric backgrounds (another big trend, btw) without adding burden to your loading time. What’s not to like about SVGs?
8. Scroll triggered animations and cinemagraphs
Elements that animate as you scroll down aren’t exactly new. But instead of just a flashy gimmick (hey, I’m an animation, look at me!), they’ve become a key element for storytelling. Well done, every animation we discover as we scroll down the page should tell a part of our story. Apple led the way with its amazing Mac Pro site.
If all this sound to hard to implement, just check Spark — the Adobe visual storytelling tool, free and easy enough for everyone to use. You can build some gorgeous pages and graphics, at the same time you’re telling your story.
But that’s not all about animations. You know the GIF has also returned to our screens, thanks to the meme craze. But now, GIFs come in a new form: the cinemagraph.
Cinemagraphs are still images where a small part has a repeating movement, creating an animated loop. The human eye is immediately dragged to the contrasting, moving part, as the background stays still.
Due to its ability to stand out, they go viral very easily, and they’ll soon be widely used by ecommerce sites and banner ads.
9. Animated Call-To-Action buttons
And we’re not done with animations yet. Once you’ve tried everything to make your CTA buttons stand out (3d styles, contrasting colors…) what’s the logical next step? Animate the hell out of them!This is not the same as a pop-up or a fly-in. Animated CTA buttons means that the movement is inside the button, enticing you to click on it. But be careful; when not done right, animated CTAs will be annoying.
Would you like some inspiration to animate your buttons? Here’s plenty (and it’s all done with CSS).
10. Gradients / Duo Tone
In graphic design, 2017 will see two big comebacks: the gradient and the duotone.
Photoshop veterans will instantly recognize these two words, as they featured among the most popular effects for years — until minimalism and flat design killed the vibe.
Gradient and duotone are in fact the same effect, which consists of “printing” an image in two shades of the same color, or black and a color tint. It’s usually called when you apply it to a flat background, following a set pattern (horizontally, circular, etc). Whereas duotone is frequently used to describe the effect of applying only two colors to any given image.
The two color overlay technique comes from the printing press industry. Now, as part of a general trend where all non-digital things are resurfacing, it’s time to embrace the gradient and two-color overlays once again.
It’s fair to say that Spotify was the biggest player leading the way for duotones, back in 2016. Pantone choosing a pair of colors as 2016’s color of the year didn’t hurt, either.
As Spotify campaigns show, duotones are perfect for branding — and that’s why they’re being so quickly embraced by brands and editors everywhere.
(But not quite everyone saw it that way when Instagram redesigned their logo using a 4 color gradient, lol)
11. Retro / Brutalism
Retro design will never fade away. As our dependency for online tools and devices grows, a whole generation longs for things their parents or big brothers ‘played’ with, whether it’s Polaroid pictures, vinyl players or 90s video games.
A whole movement called Retro Wave has brought back the 80s graphic style: neon colors, palm tree backgrounds and everything that reminds you of the Miami Vice era.
There’s even a free online tool for generating 80s text effects and backgrounds — the beyond-awesome Retro Wave Generator.
The extremists in this web design trend are the Brutalists: they long for a web without any concessions to design — just like the text and link websites of the early 90s. Craigslist anyone?
Go here for the biggest compilation of Brutalist websites.
12. Textile design
Material Design was the big winner of 2016 web design trends. But it’s the nature of things to not stay the same for long. After Google and it’s material way of understanding online design has taken over the world — what’s next? Textile.
Texture and depth were something that Material Design brought to the table, after they had been sort of ‘banned’ by flat design. But Material Design let loose a dangerous beast.
Textile design brings a mix of different design metaphores, mostly 3d features. The goal is to communicate how the objects would ‘feel’ if we could touch them rather than just see them.
Think about it as a bridge between Material design and skeuomorphic design (a style where everything looks like its counterpart in the real world). Which could mean almost full circle to the way the web looked around 15 years ago. Come to think of it, brutalists won’t like that!
13. Minimalism in Branding and Logos
Minimalism has reigned for a few years in all fields of graphic design. We may now be witnessing the last days of that supremacy — at least for web design. But there’s one specific use where minimal style is not fading away, but getting stronger: logos and branding.
Among other reasons, this can be explained again by the fact that the whole web will soon look like an app. In an app’s interface, logo and other branding elements shouldn’t be competing for attention at the expense of important functions for the user. This is why minimalism for brands makes sense and you’re going to see more and more of it in the future.
For a more technical explanation of why sometimes ‘less is more’ when it comes to logos, check this study on some of the biggest tech companies logos’ visual saliency (engagement to the human eye).
14. Bold colors and typography
This is yet another trend we started seeing in 2016 — fueled by the bold color palettes advocated by Google’s Material Design. While still not widely adopted, it will only get stronger in 2017. Expect to see a lot of home and landing pages where bold color and typography are the main elements.
White space doesn’t have to be so white anymore. It will still be used as a way of letting elements shine and give them space to breathe, but now it may well be filled with rich, beautiful colors.
A word of caution, though. Not every design can or should use bold color palettes. In fact, as it’s the case with everything that goes mainstream, there will be a reaction to the trend: quite a few outliers will stay true to soft and pastel colors. Which, in fact, will play better with other big trends of the year, such as Hand Lettering and Textures.
15. Hand lettering
Not everything can be right angles and rational patterns. Take it as a necessary reaction to the geometric style of Material Design: hand lettering will be more popular than ever, and it will come in more shapes and sizes than ever before. That’s the beauty of going for a handwriting font: it’s easier to convey a unique, personal style.
Just don’t use the ones you’ve seen featured dozens of times so far (Brush Script comes to mind) and you’ll be fine.
16. AI For Design
Automated web design? Certainly an option for the future, but isn’t 2017 a bit too early for this? Actually, no. AI-based web design already exists, and it doesn’t suck — much to the dismay of many freelancers!
The Grid (created by an ex Googler) is perhaps the best known example of an AI web design platform, but there are more (web-based, app-based and for all budgets). Enough choice so that you ponder for hours whether you should hire a human designer or a bot.
17. Designing for gesture & voice interaction
I know, gesture & voice interfaces are not new. But they’re about to become massive. 2017 will be the year that most users cease to feel ‘weird’ about talking to Google, Alexa, Siri or any other app. Similarly, gestures for user interaction will become less of a rarity.
This is obvious, but how do you design for this? Where should your voice icon be, or how do you let the user know that he can control your app doing certain gestures — without overwhelming her with info that may be unwanted at that time?
Yet another challenge for designers and usability experts. The bottom line is: from this point on, graphic interfaces won’t be everything a UX designer must battle with.
So now, it’s your turn. Are you ready to welcome these trends into your site or blog? Do you also think these will be the dominant trends on web mobile design in 2017? Let’s hear it in the comments!
Originally published at ernestoolivares.com on February 3, 2017.
