So what UX and UI trends have we seen so far in 2020, and what more are we headed for this year? Our experts pick seven trends to watch.<\/p>\n\n\n\n
Subtle motion can be a simple way to lift an otherwise tired web page, and recently we\u2019re seeing it more and more in designs for typically dry subject matter (think finance, healthcare, or resourcing services). Of course, it\u2019s important to achieve balance and ensure movement doesn\u2019t dominate or distract on the page.<\/p>\n\n\n\n
\u201cIn 2019 animation may have been a little overused,\u201d says Stephen Cronin, Envato\u2019s Content Specialist for websites and themes. \u201cHopefully 2020 will see it used more cleverly, with more subtle animation used to support user engagement and more obvious animation used to draw attention to just one or two calls to action.\u201d<\/p>\n\n\n\n
SEEK\u2019s career advice page shows subtle animation in action\u2014using a simple, straightforward idea to add fun and dynamism to an otherwise predictable navigation page.<\/p>\n\n\n\n
With a customizable HTML template like Lums by Layerdrops, which includes landing pages, inner pages, a carousel slider, and CSS3 animation, you can start testing out what works.<\/p>\n\n\n\n
It\u2019s arrived in a big way in the first few months of 2020, and it continues to get plenty of hype. But what is neumorphism?<\/p>\n\n\n\n
First, the word itself: it\u2019s a play on \u2018new\u2019 and \u2018skeuomorphism\u2019, the latter a term used in UI design to describe design elements that look like their real-life counterparts\u2014for example, your computer\u2019s calculator interface or a floppy disk to represent \u2018save\u2019. It was Apple that first championed skeuomorphic designs under the reign of Steve Jobs, before heralding the decline of skeuomorphism as its post-2013 mobile software became progressively more simplified.<\/p>\n\n\n\n
\u201cNeumorphism combines the best of flat design and skeuomorphism; we\u2019re talking about clean interfaces, given a big hit of solidity through clever use of highlights and shadows,\u201d writes Jim McCauley on Creative Bloq.<\/a><\/p>\n\n\n\n The trend\u2019s heavy use of soft shadow makes for design that is both futuristic and realistic, and it\u2019s bringing a new feel to familiar interfaces. However, the challenge to designers embracing this trend will be in its practicality\u2014as Uyen Vicky Vo writes on UX Collective, neumorphism and accessibility don\u2019t inherently go together.<\/p>\n\n\n\n Experiment with 26 elements included in the Neumorphic UI Kit by cerpow or the super-flexible Neumorphic UI for Smart House by merkulove<\/a>, both available on Envato Elements.<\/p>\n\n\n\n Bigger is better and getting better in 2020. While illustration is also still at the fore of website design, where illustration isn\u2019t used, it\u2019s images that are showing up as the main attraction. And they\u2019re being used cleverly\u2014whether as full, subtle backgrounds or as striking centerpieces.<\/p>\n\n\n\n \u201cIn 2020, having some sort of image (or background video) on your website is a must, and it\u2019s a case of the larger the better,\u201d says Stephen.<\/p>\n\n\n\n For backgrounds, think minimal design like the tranquil Lana template for \u2018coming soon\u2019 pages by Erilisdesign.<\/a> Or test out something more dynamic, like Rideo by codecarnival, a mountain-biking eCommerce template.<\/p>\n\n\n\n Good news for the anarchists among us: 2020 might be the time to throw the rules out the window.<\/p>\n\n\n\n \u201cLet\u2019s break that grid and go with an asymmetrical layout. Let\u2019s use a wild font that is not as readable. Let\u2019s include hand drawn elements. Let\u2019s put some elements over the top of other ones, obscuring them,\u201d suggests Stephen (wherever it doesn\u2019t significantly affect usability).<\/p>\n\n\n\n This trend is mixed in with emerging design trends like the street art aesthetic and the resurgence of the anti-design Brutalist style (seen in things like Brutalist Bootstrap HTML Template by mp-web on ThemeForest).<\/p>\n\n\n\n \u201cI think this is an important trend,\u201d says Tahlia Giannopoulas, Envato User Experience Designer, \u201cbecause it challenges beautiful design and pushes people to make something engaging which isn\u2019t conventional.\u201d<\/p>\n\n\n\n Typographists will rejoice at this tip: never underestimate the right font in your UX design. A variable font is one file that gives you many options\u2014achieving different appearances with options for spacing, weights, and widths, and leading to improved performance and smoother transitions between styles.<\/p>\n\n\n\n \u201cWith browser support improving, 2020 could be the year that variable fonts break out and become commonplace in themes and templates,\u201d predicts Stephen.<\/p>\n\n\n\n Unsure where to start or want to go back to the basics first? Variable fonts are explained in more detail, with example fonts and step-by-step instructions on adding variable fonts to a web page, in this how-to guide.<\/a><\/p>\n\n\n\n Ultimately, UI and UX designers are experts in bringing various elements\u2014imagery, text, color, interaction\u2014together as a cohesive design to break down the distance between screen and customer. And increasingly, these skills don\u2019t necessarily come from those with tech backgrounds.<\/p>\n\n\n\n3. Large Images<\/h4>\n\n\n\n
4. Breaking Design Rules<\/h4>\n\n\n\n
5. Variable Fonts<\/h4>\n\n\n\n
6. Branding and Art Direction in UX\/UI Design<\/h4>\n\n\n\n