UX design trends for 2017
February 11, 2017
2016 was filled with many website design and development trends related to user experience (UX Design) and optimising for mobile-friendly display. Some trends were more popular than others and got implemented more often.
Here are our selection of the five top trends to look out for in 2017:
1.Video is Big
Video content is making an impact on the Web. Moving visuals always attract more attention from viewers and are more likely to get them to interact with your website. It’s a great way to keep visitors on your site by watching your video and clicking through to featured content on your site. This creates a more dynamic user experience and gets your message across faster and easier.
Most Social Media platforms now include short videos and live streaming of embedded video content.
NOTE: If you do decide to use static images, avoid the typical Stock Images wherever possible. Hire a professional photographer to capture real images with a unique look & feel that relates to your brand or product.
2. Micro-interactions are Huge
We highlighted the popularity of the Micro-interaction website design trend in our Elegant Micro-Interactions to Enhance Your Website’s User Experience blog post from May 2016 but the trend is gaining popularity and 2017 is but an embryo! Interactions will evolve tremendously in the months to follow with new animations and gestures.
Animations will be used to attract user interaction from customised hover effects to interesting bespoke load icons. Look out for engaging interfaces with rich animations and gestures (not limited to force touch, scroll, double touch drag, rotate, two finger press or zoom). Creating fun experiences for users.
3. Dark Overlay on Featured Images
Adding a transparent layer of dark colour over your website images or videos will help to make any featured text on top of the image easier to read (more legibility).
Feel free to add more than just greys or black. Choose any dark colours including really dark blue, green or purple. Add a unique design twist that creates interest and draws your viewer in with unusual colour and typography combinations to brighten up your website.
Overlays also help as a camouflage to add a moody look & feel to old, soft and flat images. This makes text content and call to action buttons more prominent and grab viewer focus more.
Most images contain a variety of different colours from light to dark. Adding a dark colour overlay helps to create a clear contast and make text more ‘readable’ on all devices. We all know how images and text shift around on responsive displays to fit the device screen and the placement is not always the same. Dark colour overlays help to eliminate this issue on mobile displays.
We believe 2017 will include a lot more vivid colour palettes, duotones and bold gradients.
4. Accelerated Page Load Speeds
Mobile-first optimised responsive website design and development will focus on adapting displays across all mobile devices for increased website load speeds and best mobile user experience by adjusting content based on screen size.
Developers are encouraged to get highly skilled with the latest CSS, CSS3, Flexible Grids and Media Queries for optimised content display on mobile. Just search Google accelerated web pages guides for the best way to optimise your website mobile display.
5. Hollow Typography
The latest website design trend for featured header text is to include interesting fills and strokes or letter outlines (Hollow Lettering over an image or colour background).
Filled lettering works best with abstract images that users don’t need to make sense of for the design to work hard and be effective. Opt for thick block lettering that allows for more image content to show through. Use textures or landscapes where the viewer automatically fills in the blank spaces (Avoid using faces or objects that might not be instantly recognizable!).
Use interesting lettering filled with a plain background or image to create a fun visual impact that integrates into your design with perfect execution.
NOTE: Not all web safe fonts work for hollow lettering, so don’t get stuck using the same font as every other website designer.
In Conclusion
2017 is going to see a large shift towards integrating these website UX Design trends for ultimate user experience and mobile website content engagement (“If it ‘aint broke, don’t try fix it!”).
If you think you have something interesting to add or share with us, please feel free to tweet us or send us an email with your design feedback and any website visual references that you think are cutting edge and worth promoting.