How do you stay ahead of the most current, essential and best app and website design trends for 2020? Design trends are constantly changing and app and website design is an evolving discipline.
Since the inception of the internet in 1991, we have experienced many different trends and user interface frameworks – some good, some not so good (we’ll leave that for you to decide on).
We have been riding the wave of flat design in technology since early 2012. Although many different trends have been integrated within the minimalist design style, it has largely remained unchanged since we moved away from Skeuomorphic design.
2020 is no different when it comes to adding to the flat design language, with plenty of new ideas coming onto the scene to spice up those app and website design trends.
In this article we’ll take a look at some of our own suggestions for top app and website design trends for 2020.
- Dark Mode
- 3D Graphics
- Floating Elements and Shadows
- Micro Interactions
1. Dark Mode
First up in our app and website design trends to look out for in 2020 is Dark Mode.
Although not new to 2020, it’s safe to say that Dark Mode is starting to make a splash within the design world. App and website designers have already started to incorporate this stylistic method into their design language, and with the amount of users requesting this feature in their favourite site or software, it’s easy to see why companies are moving towards … the dark side.
Dark Mode has largely been more common in mobile applications, however, we’re starting to see this trend move into website design. Facebook is notably one of the larger names that are looking at adopting this trend by currently testing and providing early access for some users to a Dark Mode desktop site with optional light mode toggle.
Plenty of websites over the years have adopted dark colour schemes – so how do you distinguish dark colours from Dark Mode? Well, the key is that users can toggle between Dark and Light Mode schemes at their own choosing. Variations of Dark Mode are also very popular, with Twitter providing a prime example of having no set user interface colours. Twitter offer a dark blues ‘dim version’ and a black ‘lights out’ variation, whilst YouTube provide dark greys.
Dark Mode also seems the most obvious next addition in app and website design trends when it comes to user based design. Just like the day goes from light to dark, it makes sense that your device should do the same.
Netflix, both on its desktop site and multiple app platforms, is an interesting case. Netflix have opted for a dark user interface from the outset, assuming they know their viewers are likely to be watching in dim environments when consuming content. YouTube on the other hand added this to their desktop user interface framework in 2017, and introduced it to devices a year later. One of YouTube’s highest usage is between 7pm-10pm each evening, so Dark Mode in this instance makes a lot of sense.
Since the introduction of Android 10 and IOS 13 we have seen system-wide Dark Mode baked in from the outset on users devices, allowing scheduling either by time or by automatic sunrise/sunset detection, to allow for easier viewing in darker environments.
Apps and websites that don’t have this feature can be an unwelcome surprise at night when it burns your retinas and you’re left blinded by the light. That said, there are plenty of browsers extensions and some internet browsers that can force Dark Mode environments for websites although some sites can behave differently using this method.
Aside from the aesthetic changes, in some devices using OLED screen technology there can also be some battery benefits with Dark Mode demanding significantly less pixels to light up a screen than that of Light Mode. It can also provide some accessibility benefits to users, though more research is needed over time to explore just how much benefit it can provide.
Dark Mode is definitely shaping up to be something that is here to stay in most design languages. The app use case is a no brainer, with all of us glued to our smartphones more and more the ability to shift not only brightness with sensors but also to dark based ui’s seems logical, however websites are a harder positioning piece for Dark Mode and it is definitely a case of knowing your users and their habits.
2. 3D Graphics
Next on our list in the top 2020 app and website designs trends is the use of 3D graphics.
In recent years, financial and technological restrictions have start to lift in the 3D space, and as a result we have seen a new wave of designers and companies adopting 3D graphics into their websites as either supporting assets, highly detailed renders of the product on offer or campaign theming.
Whether it’s static graphics or more complex 3D interactive works, the web is becoming ever increasingly able to handle these higher loads of performance and memory. One barrier which does remain is the skill to entry for 3D design.
Although any new software can be hard to pick up, 3D in particular requires a lot of thought about ways to go about your designs. You’re going to see much more of your creative from every angle and will need to design for this. Incorporating accurate scene lighting and use of textures. You will also have to define the style of your piece, be it centred around realism or more of a cartoony-stylised look.
This is one of the growing app and website design trends for 2020, and it offers higher brand recognition, a boost to brand perception and creativity, and can assist with more consistent messaging – if it’s delivered right!
3. Floating Elements and Shadows
Next on our list for app and website design trends is the use of floating elements and shadows.
When flat design took its hold it was all about being… well, flat. Flat design meant no use of shadows, no gradients, and no depth.
2020 will welcome a resurge of shadows and all that lurks within them (ok, maybe a little creepy). But before you have flashbacks to thick black shadows drifting aimlessly under your designs, we’re not talking drop-shadow Microsoft WordArt circa 1995 – no, these shadows have a little more subtlety and finesse.
Previously shadows were used to elevate the asset from its background and assist with gaining clarity. We’re now seeing designers shift from the ultra flat look to find new ground, and strike a balance between what had gone before and what we have now. We’re now talking subtle shadows, floating elements, and creating that look of infinite depth.
Shadows and floating elements are key to our app and website design trends for 2020 simply because they’re reviving dull, bland pages. This powerful and effective style can see plain pages gain interesting elements, from providing visual interest to text and static images, to subtle usage in user signposting and navigation, to aiding with storytelling, to crossing the realistic and non-realistic boundaries.
How do we achieve these soft shadows? Easy really, unlike the hard shadows we used to see, soft shadows move away from primarily using a black colour with a varying level of opacity.
Soft shadows are typically coloured, either a similar colour to the object that it’s being applied to, or that of the background behind. For the latter, using a background such as an image is where this technique falls away and won’t be as effective, if at all, so keeping your design more minimal and using some of the other trends mentioned in this blog post will achieve the best possible outcome.
It is also common for shadows to be layered up, applying multiple shadows with different parameters to achieve a more realistic and natural look. Lastly, as mentioned before, opacity is everything. Anything more than around 30% opacity and the aesthetic appeal will likely be lost.
Adding some parallax animation to floating/shadow assets can also give them a real sense of depth, fluidity and add some smooth interaction between all your elements on an app or website. Our word of warning is to use this in moderation … unless you’re aiming to build some kind of crazy vortex, in which case, eat your heart out!
4. Micro Interactions
Again, although not new to 2020 per say, micro interactions are going from strength to strength as a popular trend, so we thought to include them in our best website and app design trends for 2020.
In its simplest form, micro interactions are “events” that takes place on either your website or application, with the aim of delivering a unique and engaging experience to the user. They serve only to delight, feedback and inform users.
Chances are you have already had many experiences with micro interactions over the years. Ever turned your iPhone on flight mode and then watched as the plane takes off out of sight to signal flight mode is off, or have you pulled down to refresh for the 1000th time on Snapchat and watched the ghost wink and shoot off into a rainbow?
Although only a tiny part of the overall experience, these little micro interactions add another level of depth to a design and delight the user. Taking Snapchat as an example, scrolling down to refresh could have seen the standard loading icon in use, yet instead they chose to use it as an area to add additional, recognisable branding and engaging animation.
So, what’s the benefit of using micro interactions and why do they make the app and website design trends list?
- They provide visual cues and feedback to users. We have all uploaded a large file before or submitted some information. Now, imagine that process with no use of loading graphic or visual feedback, or any description at all – most users would be concerned the process hasn’t happened or their system has frozen, which would lead to frustration and disrupting restarts of the action.
- They can provide hints or guidance to direct users in what actions to take
- They can simply bring pure delight to users
- Improve navigation and user journeys
- They can be used to turn long processes, like form submissions, into more enjoyable experiences
We’re not saying that every and all interactions you have on an app or website should be nothing but endless interactions. With over 1 billion websites on the internet, adding this extra layer of interaction can help you stand out from your competition and show users that you pay attention to detail and that you are dedicated to them receiving the best experience possible.
E-Commerce apps and websites are a great example where these types of interaction are a welcome change for users. Let’s look at the brick and mortar experience; whilst in a shop or supermarket you’ll browse, purchase your goods, and then place it in your shopping bag and leave.
This is expected process and behaviour, so why is it that on e-commerce online stores, this same behaviour doesn’t happen in the same way? A user adds their digital goods to their basket and we show this by just adding a number onto their basket icon. That’s a bit unimaginative if you ask me.
Instead, look at these two examples below that provide a similar experience to that of their real life counterparts but include a creative twist. They make it a rewarding experience for the customer. After all, they have gone through the effort of visiting your site and signalling their intent to purchase from or engage with you – it’s the least you can do!
Check out this great example where you’re literally feeding your snack items into the checkout!
To understand Micro Interactions even further we can break down the process to 4 stages.
What triggers the interaction? is it user-based, a person has initiated it by perhaps tapping on the trigger? Or more system-based e.g a like notification on social media. The system detected this event and carried out the interaction from that.
What happens now the trigger has been activated?
This is where the action takes place and what the users sees, this could be the action of the submit button morphing into a loading icon and showing the progress.
- Loops & Modes
What happens if or when the rules change? Using the loading icon example this could be when the final has been submitted, the interaction could loop back round to allow the user to upload another file.
A personal favourite is on http://freepik.com/ when downloading an asset. This is their creative take on credit attributing. And this Bike Shop example gives you a few more ideas on how to incorporate this into your app and website designs
As more designers incorporate these interactions into their app or website, its exciting to see where user experiences will be in a few years time as we slowly chip away at the web being a less confusing place for users and making more enriching environments.
5. Neumorphism Design
Neumorphism is a website and app design trend worth keeping your eye on in 2020. It’s an interesting concept in user interface design, and has become a bit of a talking point over time.
Before we entered the world of flat design, we had Skeuomorphic. In its simplest user interface term, Skeuomorphic generally means that the design style mimicked its real life counterpart, taking design cues from real life.
The easiest way for anyone to remember this sort of design trend is by looking at an iPhone pre IOS 7. This involved making all interactive items highly realistic and responsive, as they would be in real life.
There is a huge debate between designs in regards to whether Skeumorphic is dead, and it’s true that the style has in the most part disappeared from a few designers toolkits. Many designers are now wondering whether the new Neumorphism concept could take its place.
Neumorphism takes what we know about Skeuomorphism and then incorporates many of the latest designs trends such as soft shadows, minimalism and interactive elements, creating a sort of hybrid new-world realness.
A large amount of concept designs have been produced using this trend, mostly in app form, though a few examples like the ones below have transferred across to websites.
With their sometimes ethereal, mostly clean and tactile qualities, Neumorphism is certainly pushing new boundaries. How this translates into practical usage, for example incorporating brand identity and set colour schemes, will take a little more consideration from designers.
What I am excited to see is how we as designers can take elements of this trend and utilise it into the work we’re currently producing, combining trends and seeing where that leads us.
Hopefully our list of app and website design trends for 2020 has provided you with some inspiration to spark a few ideas.
If Topodium Group can assist with any of your app and website design requirements, feel free to reach out!
To recap, Dark Mode will become increasingly more common and popular. We’ll see more traction in app user interface, but it’ll be worth seeing where websites can take this moving forwards. With big players like Facebook moving quickly on this design trend, we don’t see it being much longer for other websites to adapt and adopt.
2020 will say a small farewell to the flat design we saw in its infancy, as we move away towards a new middle ground using the trends listed above.
We’re now designing in an age where more people are online than ever before, with more user interface requirements and functionality desires than previously thought imaginable. To circle back to the start of this article, app and website design trends will forever be changing and evolving.
Design will play a significant part in ensuring users are carried along with technological advancements, providing usable, efficient, creative and provoking user experiences, and breathtaking digital interactions.