The meaning changes from person to person. So I spent an entire day looking at various examples of apps that we commonly perceive as modern, young, and cool. Apps like Airbnb, Coinbase, Robinhood, Uber, Swiggy, Headspace, Cocoon, Eventbrite, Public, Wise, and Google pay. I used Mobbin to look at these apps, in case you all wondering if I downloaded each and every one of them .
Looking at all these apps, it became evident that not everyone adopted some fancy design style like Cred’s Neumorphism to look modern. The things that made them look modern were quite simple. So simple that I was able to put it into 5 short tips .
1. Space Space Space
Be generous with your spacing. Line height, padding, margins, especially the horizontal margins. I’ve noticed innate fear designers have against adding extra space. Most time’s, the goal is to fit as much content as possible on the user’s viewport
More than 87% of India’s population own a device
that is taller than 720px.
This means there is plenty of vertical space to add more space. If you think you need an 8px margin, try 12px. Start larger and reduce it if you feel it is too much.
Spaced out Vs Cramped up
2. Invisible headers
Solid headers are soo 2010’s. The quickest way to make your app look modern is to strip away those solid-colored headers (different from background color). Instead, headers can slide in only to provide context or quick actions once the user scrolls down the page. This automatically adds the much-needed white space into your design, making it feel more breathable and less cluttered.
Eventbrite: The Header slides in with the text ‘Singapore’ on scroll. This tells users which page they are on and provides users easy access to ‘change’ location.
3. Flaunt them curves
Google: Material you
From an evolutionary standpoint, we have learned to perceive sharp objects as dangerous or aggressive and rounded objects as friendly or safe. This distinction aided our effort to survive. That innate survival instinct is still intact within us, even today.
Avoid sharp corners unless aggressive is what you are going for. A good example for using sharp edges would be action games.
Call of Duty on mobile
If we love our dogs rounded, why not interfaces too?
Which one would you hug?
4. Use images
Humans are visual creatures. Images in UX design can be categorized into two, photographs and illustrations. If you think a message can be conveyed through an illustration, go ahead and do that. If you believe an image would help add more context, add it in. Try and break long scrolls of content with intervals of relevant images.
Research at 3M Corporation concluded that
we process visuals 60,000 times faster than text.
Airbnb splits its pages with photographs as well as illustrations
5. Motion
Motion is something I am personally still learning about. But doesn’t it just feel soo good when using an app that just moves around soo smoothly?
Honk app on iOS. One of my favorite app designs in the world. Buttery smooth animation
Google: Material you
The points mentioned above would immediately give you a considerably better-looking UI. But there are a lot of other factors like typography, colors, iconography, and shadows, which also play a significant role in how polished your end product looks. The only way to develop them is to develop your taste by looking at and re-creating designs from your favorite app.
Source: UX Collective
The Tech Platform