As 2016 comes to a near close, our creative team here at Dock9 reflected on what we consider the rising web design trends of 2017. Like any trend, these go in and out of fashion and may not necessarily suit all our users. However, we like to think of each trend as an “additional tool” to our designer tool box, where we pick the right ones for the job at hand. This week we’ve compiled a list of 9 key trends we believe have been prominent in Web design this year, and we predict, likely to continue into 2017.
Animation is now an expected feature, rather than an added feature and this year we saw it grow even more. Since the release of Google Material Design, interface animations returned to the designer’s toolset. Not as over the top flash animations, but as a way to give more meaning to mundane interactions, making the interface feel more real, fun and even enabling designers to spin something negative into a potentially positive experience. Loading and 404 animations being the most obvious examples.
The Google Material Design subtle shadows effects and concepts of movement and depth, is becoming an increasingly popular alternative to flat design for designers. We expect to see a lot more of it next year.
2. Custom illustrations & Photography
Stock photography and iconography library websites are available to millions of designers all over the world, making it harder to be original and risking ending up like a competitor.
Custom illustration or photography can bring something completely unique and communicate the brand message in a more impactful way. It can create a personality, set the appropriate tone and help convey the key information with your audience. For example, our latest project, the redesign of our company website, we chose to take all our own photographs and hand draw our own icon library set so that we could show our users who we truly are and communicate what it’s really like to work at Dock9.
Shopify.com have also been busy this year developing their own unique illustration guide - there is a snap shot below and you can read more about it here.
There is a lot of ‘same same’ evident on the web, thanks to template offering services such as WordPress, Squarespace, WIX and more companies are starting to feel that their websites look similar to each other. Many are slowly catching on that the bespoke design can actually go a long way for a brand and we expect to see a significant change here.
On the topic of illustration/icons, we also feel that SVG’s are one of our favoured formats for web assets right now, with their ability to scale with full quality. If we can use them, we generally do and feel this will be an area of adoption in 2017.
3. Conversational Interfaces
With the advent of robo-advisers such as Habito, chatbots will become an increasingly important part of the online user experience in the next few years, which presents challenges to designers. Not all designers are able to switch to being content designers, this seems to sit better with those who have been in performing arts or literature previously (Howdy - a chatbot within Slack - and X.ai - a personal assistant who schedules meetings - both hired writers with performing-art experience to assist with defining their products’ UX.) Here the micro-copy writer becomes king. We all know only 5% of language is conveyed through words so it is easy to accidentally come across as rude or offend someone. Designers who have the ability to insert personality (and sometimes humour) into chatbots will be in higher demand. (Interesting article on this here: https://www.fastcodesign.com/3054934/the-next-phase-of-ux-designing-chatbot-personalities)
4. Hero Photography and Video
Farewell to carousels - these are bad for SEO, have slow download times and can run the risk of looking like an advertisement.
In recent years the popularity of photography and videos have grown as much the territory they occupy on a page. While a full-screen photograph has always been popular on a photography portfolio website, it was not common to appear in other segments, not to mention financial websites. Both the images and video options have to allow readability and enhance the message written over them. To make it work on all screen sizes can be a challenge for both the photographer/videographer and the designer. An added part of the complexity with full-screen videos is to let full-screen videos play without causing frustration to the user. To overcome this problem the size has to be reduced which comes at the price of losing quality and the visible signs of low quality have to be covered.
As a solution, a trend of overlay options occurred which allows photography and videos to get the most of the messages for the users. Colour overlay is a very handy technique that can really change the feel of photograph or video.
Other techniques we have seen on the hero image include:
- Gradient overlay (the Pride NYC website a prime example)
- Image Blur
- Shape overlay
- Text with background colour
- Large Text
5. Typography variety
Typography has come a long way since the introduction of Typekit and Google fonts. It is easier to have access to different types of fonts, and as a result creating more interesting designs typographically. We are seeing less plain sans serifs and designers are finally bringing in serifs for really big type and even small type. It is refreshing and actually readable. The modern typefaces traditionally used in print, are now infiltrating their way into web products - the Ink + Volt website below being a good example.
We all use microinteractions both in the physical and online world on a regular basis, from pressing the button at traffic lights to liking a friend’s status on Facebook. They are not new, however they are becoming more important in terms of design. Done correctly, microinteractions make users feel in control, like they know how to use your site. Done badly and impacts can range from irritating your user to them closing the site completely. It will be interesting to see who gets them right, and wrong, in 2017.
Photo courtesy of Diane Spengel
7. Minimalistic Design
Minimalistic design is popping up more and more on the web. With less ‘cramming’ of content above the fold, companies are choosing their copy and imagery carefully, to create beautiful aesthetic experiences. Not only does it look great on all devices but it loads quickly and is no fuss. Designers are cutting down on the number of elements in order to create hierarchy and a fresh, uncluttered UI. Flat icons, flat navigation bars, flat buttons and a general loving for everything minimal is pretty much everywhere. Some examples below:
8. Continued growth of long scrolling
Once upon a time scrolling through lots of content meant moving your arrow to the side of the screen and pulling a bar down repeatedly to reach the bottom - it was a horrible experience. Now with a simple swipe of the finger (including on my touchscreen laptop) it is easy to sweep through long content. Long scrolling requires less clicks and allows for more narrative approaches.
What improves the UX is the use of fun and/or eye-catching transitions and differentiated section designs, making what could be a lengthy schlepp into a voyage of discovery. If you have time to waste (let's call it 'research') this is a great use of the effects mentioned:
9. Virtual Reality
This one may be a bit further in the future than next year but this list would be meaningless without mentioning VR. Both designing a site that uses it and designing using VR itself will happen more frequently in the future. This will require a whole new set of practices and tools that most designers have yet to discover.
10. Over to you...
What would you put as number 10? We'd love to know your thoughts, let us know if we missed any at firstname.lastname@example.org