Web design is a complicated beast. Design trends are always in flux, carrying web design along with fashion, interior, brand, product and packaging design. At the same time, web technology is changing – new languages and new specifications. User behaviour and expectations also develop over time.
Some web trends are important to keep up with. For example, the growth in mobile browsers means that Google can reward sites that are mobile responsive with better rankings. Similarly, if you don’t optimise the user experience like button sizes or click paths for mobile users, you might be losing valuable leads and sales.
Other web trends are more subjective, particularly style, layout and colour. You need to assess whether these things are important to your users. Evaluate the other websites that your customers visit – in comparison, does your site look fresh or dated?
For this post, I’ve tried to shortlist some of the trends that I think can make the most difference in 2017. I’ve also aimed to present a selection that is fairly actionable. If you think I missed an important trend, please let me know!
- Trend 1: Simplicity
- Trend 2: Better Prototyping
- Trend 3: Duotones and Gradients
- Trend 4: Custom and Broken grids
- Trend 5: Geometric Shapes
- Trend 6: Natural Colours
Trend 1: Simplicity
As desktop monitors grew larger, the amount of stuff that you can cram into a webpage also grew. To use wordpress blogs as an example, you could have 1, then 2 (even 3) sidebars filled with widgets.
The growth of a mobile-first approach has simplified web design. If design that focusses on your content, rather than clutter, works for mobile, then why not use it everywhere?
Which of these websites would you prefer to browse on a phone?
The change as also been driven by more rigorous measurement of audience engagement. As leading publishers pare down their sites to only include elements that are driving clicks or are improving the user experience, smaller publishers take a similar approach visually, and the design trend spreads. Compare Medium and Linkedin Articles to older content sites with their widgets and tag clouds and calendars and recent tweets etc etc etc.
We’ll see more scrolling and less clicking – with more news sites moving to infinite scroll layouts. On a mobile phone, clicking ‘next’ because an article has been split into 3 pages is very annoying.
Don’t be one of those companies that does website design once, and then forgets about it until the website is next replaced. Make it an ongoing activity.
On a regular basis, take a look at each design element in your website using analytics. Keep asking: How is this element improving the user experience and/or contributing to business goals? See if you can simplify or streamline the layout.
I like using screen recording software like Mouseflow to capture user sessions – seeing how real users interact with the website will force you to question your assumptions about your website.
Trend 2: Better Prototyping
The agency design and approval process for web design hasn’t changed in a long time. A designer makes a static image in photoshop which is shown to the client. All the dynamic UX/UI elements are discussed verbally, or with an additional series of static images. The image is approved and goes to a developer, who is also briefed verbally on all the UX/UI elements. The developer tries to marry the approved image and the verbal instructions, adding their own interpretations.
Invariably, something isn’t the way the designer, the client, and the developer understood it to be, and a solution is found.
Modern prototyping software helps to solve this problem. Rather than designing in photoshop, the design happens in software that incorporates the UX/UI elements, such as transitions, hovers, click effects, scroll effects, web fonts, form behaviour. You can also design the desktop and responsive versions side by side.
Trend 3: Duotones and Gradients
Most websites need images. Original photo shoots can be incredibly expensive. Stock photos are cheap, but if you aren’t very selective, you end up with the same images that others are already using. A further problem is that it is difficult to match stock imagery to your brand’s visual identity. Two trends (that have already started picking up in 2016) are duotones and gradients.
Duotone is “a halftone reproduction of an image that brings out its middle tones and highlights”. In simpler terms, you take a regular colour image and convert it into shades of a single colour (or several colours). It looks like:
Duotones are a fantastic way to take basic stock images and convert them into unique images that can’t be found elsewhere on the web. These also let you use your own images (that might not be fantastic quality). You can also incorporate your corporate branding and visual identity throughout the website.
Gradients (merging one colour into another) pretty much disappeared with the flat design trend of the last few years. 2016 saw a big comeback which will continue into 2017. Gradients can be fun while allowing you to integrate multiple branding colours throughout your images. As with duotones, adding a gradient effect to a stock image results in an original image!
Incorporating duotones, gradients, or both into your website can freshen up the appearance for 2017. You may be able to update your existing images, or swap in new images with your current layout. Talk to your agency or a designer. For the adventurous or time-rich, there are lots of photoshop tutorials.
Trend 4: Custom and Broken grids
Web layouts are about to take a big jump in a crazy direction. Until now, web layouts worked really nicely on a simple grid – vertical and horizontal lines that are relatively fixed throughout the site. The developer specified the location of items on the page using tables, floats, and clears. Since mobile browsers become ubiquitous, and responsive design became necessary, the old techniques have struggled. Even for desktop views, creating custom grids is difficult and unpredictable.
Think of a newspaper page – there is a grid, however each article takes up a different number of grid cells according to the amount of content and the importance of the article. Creating this flexible grid in a website is tricky, requiring lots of code and nested elements.
Two new CSS modules are on the horizon! While these both offer new ways to layout pages, the most exciting thing for me is that they offer new ways to think about web design. Rather than just specify the location of elements, you can specify the relationship between elements. The order of items in your code doesn’t need to be the order of items on the screen. Different elements of your grid can behave differently on different screen sizes.
If you haven’t started using Flexbox yet, get started. This CSS module is now supported by all modern browsers and lets you create varied modular layouts quickly and easily. No need for floats and positioning hacks. Learn more here, or here.
This was a sample site created with CSS Grid:
Your Steps – take a look through the links, and keep these in mind for your next web project. Maybe start with something small like a landing page so that you get comfortable. As I mentioned, these are not just new code but require a new thought process.
Trend 5: Geometric Shapes
This is showing up in all areas of design, including interiors and packaging. Look for circles, hexagrams, triangles and more. These can be section dividers, grid structure, or highlights. With the development of CSS and the increased use of SVG images, we’ll also be seeing more animation using these geometric forms.
These shapes can add a very modern look to your next design. Use them with lots of white space for dramatic effect, or create colour highlights over images to accentuate details. Use the shapes behind big title fonts to complement your font choice.
Trend 6: Natural Colours
The big colour movement in 2017 will be away from pastels (like Dusky Rose or anything on a cupcake) and gemstone colours like turquoise, and towards rich natural earthy tones.
In the fashion shows, khaki is making a big comeback, and we are seeing extensions in graphic design. Pantone’s colour for 2017 is Greenery: “fresh and zesty yellow-green shade that evokes the first days of spring”. This colour movement will be about getting back to nature. Think about greens and other earthy colours like grey, beige, maroon and clay.
If you want to brighten up the palette throw in some primaries in strong, happy, natural tones – bright blue sky, yellow sunshine, flowers in brilliant pink and orange:
Pantone’s colour of the year is Greenery:
Looking at paint companies they generally went with earthy shades of grey:
Dulux picked Demin Drift, a stormy blue-grey
Benjamin Moore picked Shadow, a dark purple-grey
Sherwin Williams picked Poised Taupe, a mushroom brown-grey
There is no need to frantically follow colour fashion trends. If you have a corporate palette that you believe represents your company, then, by all means, stick with it.
What you need to keep an eye on are the extra details that a designer might have added to your website – button colours, hover highlights, background tints. These can often make use of the trending colours of the time, but make a site look dated a few years later.
Review your current sites with a fresh eye – are there plastic or pastel shades? Consider transitioning to a more natural palette.
There were lots more trends that I wanted to add in… I think custom illustrations, SVG graphics, and bold typography will keep growing from 2016 into 2017… However, I wanted to keep this list compact. Let me know if you disagree with any if these, or if I missed a trend that you think will be important.