Top 10 Web Visual Trends
2019 – Part II
In our previous post, we dug into the 10 website design trends for 2019. That’s just the tip of the iceberg - in this post we’ll dig into more specific visual trends happening on the web right now. We hope you enjoy our look at the Top 10 Website Visual Trends for 2019.
Surrealism has always been difficult to characterize. Unlike other creative movements, which can be characterized by themes of imagery, color choices, or techniques, Surrealism seeks to explore the unconscious mind as a way of creating art. Artists such as Joan Miró, Salvador Dalí, Pablo Picasso, or Michael Cheval, focus on illustrating the mind’s thoughts without regard for structure or limitations of what we know of as ‘real’. This results in dreamlike, sometimes bizarre imagery.
With web design, the effectiveness of these techniques ties in with the goal of creating an emotional connection that we mentioned in our last post. Surreal designs can provide a subconscious connection for users that those users interpret and relate to on their own terms. This can be attributed to surreal and abstract elements allowing users to picture themselves from within the design.
Where surreal imagery tends to be more of the focal point of a design, abstract elements fill in a similar emotional connection as background or secondary elements. Colorful patterns and fluid forms that still aren’t ‘real’ can have a profound visual and emotional effect on your designs.
It’s undeniable that mobile users are the largest market for web users now. In 2018 alone, 58% of all web traffic came from mobile users. (See ‘Mobile vs. Desktop Usage in 2019’ by Proficient Digital for more info.)
With this rise in mobile use over the years, one thing started to drastically decline… Animations. One of the greatest factors in this was that, during the infancy of the mobile boom, Adobe Flash was the go-to tool for creating captivating interactive web experiences. But, the Flash animations quickly became incompatible with mobile users, specifically Apple’s iPhone. (See ‘Thoughts on Flash’ an open letter by Steve Jobs: April, 2010.) Therefore, designers shied away from incorporating animation on mobile versions of websites for years since then. However, thanks to emerging web technologies, including HTML5 and CSS3, there’s now a movement to bring back animations for mobile users.
Currently, timed animations are growing steadily in popularity, as are animations triggered by users scrolling on their devices. As the shift to mobile-first thinking has firmly taken hold, these add an additional layer of connectivity between the user and the content on your pages.
Video content on the web is nothing new. It diversifies a page and caters to an on-the-go audience who may not have the time or desire to read a lot of text.
When Google made its change to mixed search page results, it featured video content above standard web pages. This shift led to a prioritization of video content and higher video production quality in order to increase businesses search ranking results.
Thanks to increased internet speeds and search engines like Google prioritizing video content, there’s more video being user on the web than ever. With the increase in video content available, designers and developers are finding more creative ways to incorporate video as an actual design element rather than just an afterthought to set their clients websites apart from the crowd.
Countries all over the planet are becoming more and more interconnected as access to technology continues to increase throughout the world, this is a good time to remind your users that the ‘www’ before the domain name of your website stands for ‘World Wide Web.’
There are billions of people around the world, hailing from various cultures and ethnicities and who speak different languages. Your visitors may have different abilities, are of different ages, and assume different gender and sexual identities. With all these differences, one thing is the same: your users look to see themselves represented and reflected in the content being delivered to them… especially when you’re advertising to them!
Small considerations, like Apple’s varying skin tones for emojis, can have a profound impact in making all people feel more welcome and represented in a brand’s digital space.
Designers continue to make larger strides towards inclusiveness. Improved accessibility standards and socially conscious and diverse imagery are among the most prominent, as well as utilizing more socially conscious language within the context of websites. While we know the world still has a long way to go in this arena, it’s wonderful to see designers using their skills to demonstrate that the web is supposed to be about real people making real connections all over the world.
Virtual reality isn’t truly a reality just yet, however its influence on design as an emerging and cutting-edge technology is already evident. Designers are adding more depth, as well as dimensional éléments, into websites that have a real or tactical feel to them. Flat or animated illustrations with a more three-dimensional look to them, as well as 360-degree photography (we’ll get into more depth with that later in the post) provide users with an experience they can seemingly reach out and touch, or reach in and be a part of.
As designers use these techniques more and more, we expect them to become more of the norm - an almost expected part of the user experience. As technologies continue to advance, these ‘virtual reality’ elements will also look even more realistic.
We mentioned earlier that mobile animations are returning, and many websites and apps are already packed with animation. But just because you can, doesn’t always mean that you should . . . and when you should is when those animations are there for a reason.
Animation draws a user’s focus to certain parts of the design at specifically intended times. It can drive user engagement and interest and tell a story.
Using animation in web projects can provide a greater depth of understanding to users who engage with the design. Click through both examples below to see this animation in action and think about how the animation compels you to interact.
It seems that every year, there is some type of retro design that makes a comeback. In the case of glitch art, it’s more like ‘retro gone wrong.’ Old movies where crinkled film creates unintended artifacts on screen, or how a slow dial-up connection often led to an unintentionally distorted, yet visually striking, image are two examples of glitches that happened unintentionally. Now that imagery is being intentionally recreated to create similar effects!
This breakdown of technology within your subject matter, both as an idea and in its design execution, can expose a distinctly uncomfortable, yet intriguing feeling because of the pervasiveness and dependency of computers and technology in our everyday life.
Glitches draw the viewer’s eye to those parts of the site that are warped, double exposed or broken. They can amplify a feeling of disorientation by giving websites a distinctly psychedelic look.
Three-dimensional renderings and photography within two-dimensional spaces are creating a unique update to flat design. The result is a pervasive mash-up of 3D realistic and flat interfaces that are complex and visually interesting.
Looking deeper into this trend, what we see in the best examples are subtle complexities between layers of varying depth and animation. This is yet another example of how multiple design trends impact one another.
The phrase “deep flat.” is being used by some to describe this trend, however at its core it seems a natural evolution of flat design.
It seems like everywhere you look, companies have infographics as part of their designs.
Visualizing data helps make information more appealing and easily digestible, especially when presenting complex information to users. Designers are now creating visualizations for everything from numbers to maps to understanding complex algorithms. The results are universally loved by users everywhere. Whether as a still image, in scrolling panels, or as an animation or interactive element, data visualization is a powerful tool to help your users understand large quantities of data and content.
From a design standpoint, it is always best to make any of your infographics or other data visualizations conform to your branding and overall design to continue a cohesive feel. As for the actual data within your visualizations, the most effective way to engage your users is to tell a story with the information.
Create a beginning, middle and end so your users follow the journey of information to complete understanding. This storytelling with data can result in longer time spent on your site, as well as higher conversion rates for your visitors, because those users are now more interested and invested in your content.
Authentic web experiences are in high demand by the users of the Internet. With that, comes a growing focus on writing as a part of the User Experience referred to as ‘UX Writing’.
All design has some element of messaging in the form of text. With UX text, all of this content is specifically designed to engage and connect with the user. On average, people will be on and off of a web page in under 30 seconds… with the first 10-20 seconds being the most critical. (See ‘How Long do Users Stay on the Web’ by NN/g.) Therefore, paragraphs of superfluous or irrelevant text is out the window! Keep only the text that serves as useful and engaging to the user. You’ll keep them on your website longer.
Ultimately, your copy can literally make or break the user experience. It doesn’t matter how well designed your site is; if it is confusing, misleading, or uninteresting copy, the user will be left distinctly unimpressed. You can read more about ‘The Rise of the UX Writer’ from uxplanet.org.
Whether you’re a small business or a large corporation, keeping your online presence up-to-date with the latest trends can give you a decided edge in the visibility of your brand and your company. Contact us if you’d like to see how we can help your website remain on the cutting edge!