Visual design trends for 2018: top takeaways for learning
Lead Solutions Designer at Kineo
Visuals don’t just add intrigue and excitement to learning, they also serve a valuable role in terms of memory and retention of content, as well as aiding navigation. Designers use layouts, typography and font changes to emphasis key points and draw out important messages. By demonstrating the hierarchy of content, visuals can be used to create a sense of order and establish links between ideas.
If you’re tackling a particularly complex or technical subject matter, presenting this information in a graph or chart can explain the concepts much more succinctly.
With the trends we’re discussing here it’s important to note that the visual design should assist the usability of the course, it can never replace it. By encompassing both the visuals and the usability you’ll give your digital learning the best chance of being understood and remembered.
Trend 1: Bold colours
Bold colours can really make learning stand out from the crowd, either when used as a background gradient or over the top of an image. Duo-tone was originally a printing term and is achieved by using two contrasting colours. The rebrand of Spotify brought this technique into the mainstream and it’s set to go from strength to strength in 2018.
When using bold colours pay attention to any accessibility requirements (particularly regarding fonts). You shouldn’t over-use this technique but instead implement it to give emphasis to certain areas over others.
Remember that it’s only a stylistic effect and shouldn’t take away from a sense of realism or showing technical data if these are the core learning objectives of the course.
Trend 2: Double exposure
Double exposure is achieved by doubling and slightly offsetting the image or by using two different overlapping images. It’s often demonstrated by using one large image (such as the stylist shown in this example) and then creating a story within this (e.g. showing the clothes on the shop floor). If you have access to Photoshop, use the colour channels to play with the colour of the images, or see how it looks in monochrome.
It’s best used on larger images like posters, banners or cover images. Where you have smaller, detailed images or blurred photography this technique is far less successful. Don’t over-use colour combinations.
Remember that people looking at an online learning course will be spending far more time viewing it than a quick glance at a poster. This technique will not cover up bad photography, you need to have good images to work with.
Trend 3: Movements/transitions
Movement and transition styles - https://www.duroc.ma/en/
Cinemagraph examples - http://cinemagraphs.com/travel/
Animation will be key over the coming year but a key differentiator within this is audio. Whether this is music, sounds effects or voiceover it all helps to create an atmosphere.
Scroll-based interactions can be powerful in learning to demonstrate 360 degree rotations of objects (such as this Red Bull Racing Car) or to led the learner through a contextualised story.
Cinemagraphs add a sense of depth to an image by having a moving element; these use a combination of video and authentic imagery.
An over-use of movement, or one that has no relevance to the learning outcomes, can become tiresome and repetitive for learners. Transitions should lead to something new. They can also be expensive to create and at times slow the learner down from getting to the information that they need which can be frustrating. It’s all about balance!
Trend 4: Bespoke illustrations
Bespoke illustrations allow an individual or company to move away from stock imagery and create something entirely unique. As well as being used in the learning, the illustrations can also be employed in campaign assets to drive traffic to the course, such as posters or stand-alone animations. Many illustrations are now also incorporating 3D, and using a combination of the colour techniques mentioned earlier to ensure they stand out.
The downside to this is that as that they can be time-consuming (and therefore costly) to create. Illustrators often have their own style, which cannot be easily replicated by someone else. So while one person’s talents might be suited perfectly to a particular brand, they might not fit as well with some of your other clients.
Trend 5: Intersecting blocks
Intersecting blocks change a page from having a two-column layout, to add more depth and perspective. It could be objects, images, videos, typography or coloured blocks that intersect. These layers can be moved at different speeds to create a 3D effect as the learner scrolls through the course.
In designs using this style, simplicity and a clean brand palette are key. It doesn’t have to be complex to be impressive, in fact the more understated your design the more impact these subtle enhancements will have.
Consider bandwidth and loading times as this could slow down the experience and create a barrier to the learning. Repeat visits can make what was once impressive frustrating for the learner. Remember the importance of usability and how this should be your first consideration (above the visual design).
Keep an eye on big corporations, such as Adidas or Spotify, as they set the trends, whether it’s a logo redesign, animation techniques used or imagery on their website. Don’t forget about print media either as the visual designs used in this medium are being incorporated into digital design more and more.
Engaging with clients and end users to get an understanding of what works for them is incredibly important and will dictate what shape the design will take. Here at Kineo we like to do that in what we call our discovery phase at the outset of a project. We often lead brainstorming sessions with our clients to play around with some different concepts in the initial stages.
Don't just do something for the sake of it. Visual design has a purpose in this context to add value to learning. The viewer needs to get some information from each image or interaction made.
- 20 most important visual design principles illustrated
- A handy link for applying colours to images via CSS
- Great examples of intersecting blocks
- Find all kinds of inspiration here