2018 January UI design trends

Purposeful integration of unexpected elements from different realms of space time

Integrating a physical phenomenon into a new digital experience.

Portfolio Home Page by Andrej Radisic

The physical phenomenon of bleeding art is already in itself a pleasant human experience

Integration of a phenomenon from an older technology into a new digital experience. The kinds of phenomenon could be a glitch, a functionality of an older technology, and often times, they not considered as aesthetically pleasing during its time of prevalence.

Consider what purpose and functionality the phenomenon could serve in the new design system. A good integration will often present an element of surprise, familiarity, and nostalgia to the user because he/she would not expect to see the older phenomenon in the new design environment.

Lvl Supply Slider Animation by Zhenya Rynzhuk

Though image distortion of an older technology does not have an inherently pleasant association, but it does present an element of surprise in newer context

Here is another example. An animation emulating the visual effect of a lava lamp. Abstracting the lava lamp effect could help weaken the association of the present design from the old, thus making the design seem more “original”.

Portfolio dennyshess.ch Draft by Dennys Hess

Notice the animation as the curser move from one section to the next.

E-commerce UI interactions by Cuberto

Animation imitating physical interaction of gel-like substance

This is another example of what I saw from youtube the other day which applies the same principle.

Uses printing tool visual assets as aesthetic elements in digital layout

As an exercise, you can:

• Make a list of physical phenomenons what is already associated with pleasant interaction experience. The inspirations can be from nature or man-made.
• Ex. cellular division, crystallization, aurora, Triiodide…
• People are mesmerized by lava lamp. What else are people mesmerized by? Candy making process, cake decoration process, slime…
• Consider phenomenons from older technology, functional tool, manufacturing processes, screen printing, rewinding a video in slow motion, levitation, Magnetic thinking putty…
• SquareSpace made videos using this concept. There is great satisfaction in seeing things of chaos return to it’s original state. It’s magical because it doesn’t happen in the real world, and everyone inherently love the concept of redemption and restoration because everyone makes mistakes.
• Here are some inspirations. Here is some more. If you really have time to waste, click here.
• Ex. video glitches, photography process, Adobe visual cue when you highlight text and it inverses color, the blue line around selected text…
• Since these are micro animations, be observant of the details of the phenomenons.
• Consider the purpose and effect it serve in the new design environment.
• Incorporate them into the micro-interaction of your UI design to provide delightful interactions.

“A masterpiece is the union of juxtapositions of impossibilities.“— Kevin Lin

Yes, I just quoted myself.