Close

Let’s talk business

We are
please select
  • an idea stage startup
  • a seed funded startup
  • a well-run business
  • an agency
  • a software company
interested in
please select
  • design services
  • development
  • product strategy
  • multiple services
for
please select
  • mobile app
  • web project
  • apple watch
  • multiple projects
My name is
and please reply to

10 UX and Visual Design Trends for 2017

Published February 8, 2017 by PLATFORM

The Year 2017 is off to a fast start and it is time to set the tone for what we will be seeing featured in designs this year. We believe that the the following 10 trends will continue to be important: minimalism, material design, white space, duotones and gradients, geometric shapes, videos, micro interactions and SVGs, and lastly customization and personalization.


Minimalism

“Simplicity is the ultimate form of sophistication.” - Leonardo Da Vinci

Minimalism is not a new concept, we have seen a move towards minimalism in the past few years. However, it is still difficult for some people to think of minimalism as a powerful and purposeful way of designing websites and applications. Some of our clients have the desire to create more complex websites and tell us to put more elements on their page as minimalistic design somehow feels empty for them compared to the crowded pages they have used before.


sapie-dribbble

sapie.sk redesign by PLATFORM


Material design


dribbble-trips

Google uses material design in its new functions in Gmail that help you organize your trips in one place


Material design is an important new trend that we will see included in designs this year. It comes at the intersection of art and technology. Material becomes the metaphor, surfaces and edges of the material provide additional visual cues for the design. The use of familiar attributes from the real world helps users understand affordances in the websites and especially applications without the need for a lengthy description or a manual. These cues are specifically important for communicating motion and interaction, the use of light, surface and movement helps us define relationship between objects. When material design is used properly, it not only creates beautiful looking designs but it also improves app usability and flow.


White space


White space is intentional. White color signifies goodness, innocence, purity and means safety and cleanliness. White space is not to be regarded as lack of imagination in design, it is quite the opposite, an impossibly difficult balancing act of leaving everything unimportant out to highlight the most important elements.

platform-gif

This productivity web app shows a nice use of white space.
“White space is to be regarded as an active element, not a passive background.”

Use whitespace to draw attention. By surrounding an element with white space, you are pointing out the element. The natural reaction is: “Why is that thing the only one in that part of the screen? It must be important!”


Duotones


We have all heard that a picture says a thousand words. Our minds are drawn to them and when used well, they can increase conversion rates, create trust in a brand, communicate with your customers on a subconscious level. However, it is not easy to keep producing high quality pictures and sometimes even the best pictures do not properly fit with a specific brand identity. There are two approaches you may find helpful for your designs, duotones and gradients.


duotones

Stink Studios created a special end of the year website for Spotify using Duotones.
“Duotone is a halftone reproduction of an image that brings out its middle tones and highlights”

Duotones can be a very powerful way of using stock images and creating something unique that nobody else will be using on the web.


Gradients


elev.io_landing_page

PLATFORM used gradients in the homepage redesign for Elev.io


Gradients (merging one color into another) are another visual element that can be used in the background or to dress up a stock image to create a unique feel to it. If your brand uses multiple complementary colors, this may be one way for you to highlight all of them in a herobanner or even in a newly redesigned logo.


Geometric shapes


geometry

Invision LABS by Invision combined white space and clean design with geometric shapes to create their vibrant design.


Geometric shapes can create depth in your design and create a unique futuristic look. Especially the use of irregular shapes (hexagons, triangles) can draw attention and break the symmetry in your design in a very positive way.


Background videos

bigscoot-gif

PLATFORM used a video in the testimonial video in the background of the hero section for the homepage of BigScoots.


The only thing that tops a beautiful image is a catchy video. We are seeing a move towards short, funny, catchy, high quality videos in designs. We will see videos playing in the background (perhaps even using dotone to tone the look of it), we will see video tutorials, we are seeing carefully crafted video ads.

video

Claudio Guglieri designed a concept for a SKILLSHARE class called Re:Designing Travel.


Micro interactions, animations and SVGs


Microinteractions can add a playful feel to your website or app and can also serve as a visual cue of what is happening. They can signal status of your action (upload, download) or draw your attention to something that is important (animated message bubble). Overall, they are purposeful animations that improve the experience for the user while helping conversions.


thrilia-app-part1-gif

A little preview of useful micro-interactions for rating screens.


Scalable Vector Graphics (SVG) are the perfect file type for basic icons and vector web graphics. Along with their low filesize, they can also be quickly manipulated and updated with ease. Controllable SVG animation only increases the value of this modern image filetype.


Customization

Personalization and customization are often used interchangeably, however there is a big difference in the terms. Customization requires you to actually actively engage in some action to get the result you want. You may tell the Starbucks barista to give you 2 pumps of flavored syrup instead of the 4 that are customary for the drink. Or you may ask a web portal to only show you news from a particular part of the world.


customzation

Medium.com allows you to customize your experience and allows you to choose your interests as part of their onboarding.


Personalization

Personalization on the other hand happens without your active input, it is the magic of algorithms that happens behind the scenes. Pandora just magically plays the next song that you also like without you ever asking for it. Your Facebook feed offers ads for products you actually need to buy.


personalization

Spotify algorithms personalize user experience by offering related artists.


User will want to customize your offerings, it is something they expect, you should design keeping this in mind. However if you can offer personalization, you have hit the jackpot. People are overwhelmed and anything you can do for them without their active involvement creates value.


We hope you found these insights helpful. We are looking forward to seeing everyone’s beautiful designs created in 2017. If you need help with yours, do not hesitate to let us know ;)

Anna McNab is a product strategist at PLATFORM and an associate professor at Niagara University

Suggested articles