We are used to adopting the hardware, the form factors, and the resources of the devices that manufacturers are giving us. In a lot of ways, mobile designers have mastered the craft of adding utility even to parts where there was no utility in the first place. Along the way, some of the practices used, shaped into the full-blown branches of design that are being thoroughly studied and applied meaningfully.
However, you can’t propel design into some sort of framework. New things emerge all the time in multiple places and with reference to the hardware capabilities, they huddle up into what we call trends. But how do they emerge? Is it all a universal random? Or a strategic choice designers make? My guess would be:
Trends emerge randomly, some are just a display of our natural disposition to visual aesthetics, some manage to blur the edge between the digital and real experiences better so it elicits an instantaneous response in users, and some are just a breath of fresh air where it seems to be no room left for anything new.
What’s weird is despite the rapidly changing mobile interfaces, we never let go of the past. There is some erotic awareness of the vintage and retro tones in UI design that for some reason never get forgotten though never really reused unless re-thought and re-established. I believe this accumulation of the past elements is what creates the reference point for the newest discoveries. Something that validates whatever we come up with.
With that validation in mind, let’s take a look at what this year’s trends might bring us in terms of mobile UI design.
The demise of the #bezel
For some reason, I’ve never called any part of my phone “a bezel” until late 2017. Have you? It’s the appearance of the all-screen phone that has suddenly put all its latest predecessors into a shameful bezel-attributed category. Do you really need that quarter-inch estate of your screen unoccupied? Or is it just a marketing pressure forcing you to hate your current assets and programming you to go for whatever is the newest?
Whatever it is, all-screen phones look cool and require certain changes in mobile UIs: more gestures, borderless display of information morphing from frames to continuous stories, and high-quality imagery appealing to emotions.
Buttonless UI is the first real and integral step towards the virtual interfaces which will rely completely on gestures.
Image credit: Dannniel
The grain of salt
Where all-screen bezel-free phones create a flowing experience without putting the content into logical blocks, is where they also force the content into their own form factors. Take a look at the newest smartphones.
The ones that provide a real all-screen experience have rounded edges, which considering ergonomics, are totally fine, but in terms of design, it puts certain limitations on UI designers in their ability to incorporate sharp-edged elements.
Less #grayscale, more color and burning gradients
Subtle colors have become a staple in the flat design paradigm that has infiltrated a lot of allied design disciplines. Flat minimalism has taught us to recognize and appreciate visual hierarchy and clean UX. That would have been impossible if the vibrancy of certain elements stood out. However, sometimes you need things to stand out. People no longer hide their opinions and are more outspoken than ever.
In a way, brutalism challenged flat design with arrogance, that in its disdain added validity to it. All of a sudden, the more you distance yourself from the common laws of design, the more appealing that design turns out to be.
Image credit: 建站知识
In mobile design, we may trace that in the return vivid colors are making to the mobile UIs of all kinds. This is where flat might become great again.
By adding vibrance to the functional mobile UIs, designers can reinvigorate the existing experiences and access new levels of rebellious empathy we have for vivid burning colors.
Image credit: Ｋｏｎｓｔ
The but
Even though colors are natural and accessible, they have to be used responsibly. There’s a brilliant story by Muditha Batagoda where he has it all broken down. There’s a ton of context color combinations bring to the table while staying deeply personal perceptually.
Image credit: Jarek Uspieński
Substandard #typography
With all the visuals, screen pixel densities, and screen vibrancy, the text remains the most instant and effort-free means of conveying a message. At the crossroads of imagery, visuals and text lies the typeface. The ability to combine multiple points of functionality and aesthetics in user interfaces is the key to a successful design. Headers and captions can be beautiful and can contribute to the design ensemble.
Image credit: Luke Hoban
Bold screen titles are Apple’s low key attempt to emphasize typography while staying in their lane. Minimal typography at the same time is intended to give a tone to the voice of your interface.
Font size and style can create a visual hierarchy without layering and cluttering the UIs with visual elements and similar captions.
The weight of the typefaces communicates meaning not only by what they say but also how they say it.
Image credit: crazybaby
Image credit: grrr.nl
With that said,
It’s not all about the size and the placement of a typeface that makes the difference. The copy has to be legible at first, and everything else, second. We’ve covered the impact of legibility in one of our older posts. All the aspects of an appropriate web typeface like expansion, spacing, aperture, stroke diversity, etc. must be taken into account when deciding on which fancy typeface to use.
#Animated #Smart and #3D
With all the new screens, hardware, and information delivery capabilities becoming more and more profound, it makes sense that the UIs will have to change as well. If you can personalize and customize the services you provide through your mobile digital product, you can count on the increase in conversion.
The largest realm that all new mobile technologies contribute to is amusement.
Unfortunately, utility is not what you can always rely on marketing-wise. Things that work, work. Things that sell might not really work. Producing things that work and sell is the sweet spot. This is where all your cool stuff comes into play.
Animation is a great way to engage users while letting the backend process do its thing. Meaningful animation is what this principle is called. The better the technology backing animation, the better the effect it produces. Animated microinteractions providing context to every process you are involved into, are the visual keys that trigger amusement.
Image credit: L.MYao
Smart interfaces are great to help users stay on the mission in our age of distractions. By implementing machine learning principles, deep analytics, and psychological approach to user research, designers might tap into a new level of interaction.
Image credit: Gleb Kuznetsov✈
For 3D UIs there is no technology so far, making them commercially available for multipurpose devices. However, constant attempts to finding one, lead us to the understanding that it will definitely be discovered granted enough time. True holographic displays are becoming simpler in production while motion input is making its way back as the most natural way of operating machines.
As of now, a good way to train users and gradually let them adjust to the 3D interfaces is using a faux-3D design in UIs. It does not carry too much crucial meaning, but it does carry a lot of amusement, which is again, not the last thing you’d consider trying to sell your app.
Image credit: Gleb Kuznetsov✈
The heads up
Animation can’t exist for the sake of animation. For every action, we are naturally used to receiving a response that is proportionate to the force and intensity of our input. If the output exceeds the input, we subconsciously feel the imbalance, resulting in the lack of relevance and further compromised delight that the animation was supposed to bring. Simply put, beware the overanimation of things that don’t have to be animated.
Another thing we risk doing while following the trends is outsmarting our users. By that, I don’t mean you have to dumb down your audience, but you have to accurately consider who is performing which task, the environment options, and all sorts of circumstances that might have that mental give on your users.
This applies to unrealistic 3D-Hollywood UIs that are totally unusable, but fun to look at. A bad idea would be trying to combine this sort of 3D animation with an important task. In terms of usability, we are yet far from making these interfaces work and even further from making them accessible.
Image credits: Pinterest, BINH
Design #systems
Last year, with the release of Abstract and some other design version control tools, a lot of teams started incorporating a systematic approach to designing UI and UX. We are used to having a small team or even one designer working on a specific project to ensure consistency.
This, however, does not ensure the full potential of a project is fulfilled. As a result, a team brings forth an extraordinary project followed by a mediocre one. Version control and integration tools can facilitate design systems that in return, can level out your design team’s performance and assure a steady flow of quality projects.
Designing within one system can reveal the best of the design team’s potential like animated UIs, intuitive UX, thought-out colorways, and navigation — whatever the specifics a lot of designers are particularly good at.
Design systems can become the dome for consistent, quality, and delightful design of various directions.
Image credit: Adam Zielonko
Probe deeper
If there is a considerable boost of stability in the components designed within one design system, what they might lack on a wider scale is variability. Reusing the same components in different combinations is good for scalability, speed, and functional aspects of mobile apps, but they don’t amuse.
Every now and then we need a comet to illuminate the sky and let everybody know what’s up. Now, it might not be the best option available, but there has to be an open door for a wild card in the mind of any design lead. Literally, thinking outside the box. Or a placeholder.
Image credit: Shourav Chowdhury
Trends doe
Being in trends has become more than just being aware of the latest findings. It’s a stamp of relevance for a lot of companies struggling to take their niche. In the changeable industry of design, if you stick to being trendy, you’ll end up not doing any work at all. So the best thing trends provide is they teach us to keep our mind open to whatever the fuck might pop up this season and mess up the entire course of nature.
On top of that, if we can recognize trends, tame them, and get the best out of them, we can count on creating one of those ourselves.
