Visual design

What

Visual design is present in everyone. It differs only in the degree of depth of incorporation.

  • Accsebility
  • Accessibility of all styles (typography, colors, shadows)
  • Accessible UX (sales point)
  • Database to support things that are accessible (sales point)

Top: At the beginning where there is no design system, its good to draw designs massy with no components. Drawing a visual design from the components view is limiting.

Why

Articles

Visual design of digital products

Visual design styles

Realism

https://dribbble.com/shots/15130265-Another-Guitar-Effects-Shot

https://dribbble.com/shots/15130265-Another-Guitar-Effects-Shot

https://dribbble.com/shots/15130265-Another-Guitar-Effects-Shot

Glassmorphism

Have you heard about the newest craze called glassmorphism? (that’s right, neuomorphism is no longer cool). It’s the newest trend in UI, which is mostly based on a effect called background blur, and it basically creates that “through the glass” look and feel on elements.

It was introduced in Windows Vista, then later in iOS7, but it seems it’s here to stay for a bit in the new, refreshed form! If you want to take a closer look at glassmorphism, try this Glassmorphism Generator online tool and see Mike’s article about it:

https://dribbble.com/shots/14944850-Wallet-App

https://dribbble.com/shots/14944850-Wallet-App

https://dribbble.com/shots/14944850-Wallet-App

Aesthetic minimalism

Probably a trend I personally love the most. There’s nothing more aesthetically pleasing, than a simple, minimal and readable UI.

Websites like Revolut (also simple 3D), Sketch and Qoals (also blurred background) are the perfect example that you don’t need a fancy UI, or “wow effects” for your product to look absolutely astounding (sadly, not many clients understand that).

https://dribbble.com/shots/10945826-Interior-Designer-App-VisualExploration

https://dribbble.com/shots/10945826-Interior-Designer-App-VisualExploration

https://dribbble.com/shots/10945826-Interior-Designer-App-VisualExploration

Geometric structure

I’m seeing more and more designs that have a very tidy, conservative visual structure. It makes the information looks really sorted out!

One of the most beautiful examples of geometric structure of the interface is Rituals website. Such a pleasure to use and look at (also, love the simple but enjoyable animations).

Untitled

Brutalism

This is a trend that I have the most problem with (maybe not so much as with neuomorphism, to be honest). It’s called brutalism and it looks quite as the name suggests — strong contrasts, often unpleasant typography and many problems with the accessibility and readability. But I get the overall vibe — the main idea behind it is basically a deconstruction of what we perceive as beautiful and useful.

Surprisingly, I’m seeing many websites and apps actually pursuing this trend! (one of it being a polish radio station called Newonce).

I really tried but I am not a fan of it when it comes to UI. I would prefer it to stay on posters and in magazines.

https://dribbble.com/shots/13984650-A-Archive-Artist

https://dribbble.com/shots/13984650-A-Archive-Artist

https://dribbble.com/shots/13984650-A-Archive-Artist

Skeuomorphic

Generally speaking Skeuomorphic design refers to the design elements that are created in a realistic style/way to match the real life objects. The growth of VR/AR technology and latest design trends shown on the most popular design platforms (Dribbble, Behance etc.) might make skeuomorphic design comeback in 2020 — but this time with a lot modern fashion and slightly modified name: “New skeuomorphism” (also called Neumorphism).

https://dribbble.com/shots/8801556-Skeuomorph-Banking-App

Untitled

Features in visual design

Real-life pictures

I strongly predict that soon everybody will be tired of illustrations and 3D graphics in product design, so real-life photos will make a huge comeback.

As I wrote in one of my previous articles, illustrations might not be for everybody. And sometimes real people and real items can make a bigger impact on users. Ekokubki’s website is based on a real-life photography and it looks great!

3D Illustrations

3D imagery is here to stay — especially when it’s getting easier and easier for regular UI designers to actually create something in 3D! (try the 3D tool called Spline — currently in beta, but so amazing and easy to use!).

3D is also being widely used in full screen animations, as main key visuals — take a look at Superlist or see an amazing 3D tutorial by Minh Pham on how to create a stunning 3D background for your website.

Vivid colors

Everywhere I look, I can see colorful splashes on websites and mobile designs.

Take a look at Designcode.io, Sleepiest and Design Talks! I love how colors create a magical, ethereal vibe there. And when we use vivid colors, it’s easier for us to differentiate and remember a product. Instagram knew that a long time ago (and that’s why the unforgettable change of their icon took place).

Untitled

Blurred, colorful backgrounds

Similar to the one above, but mixed with glassmorphism a bit… Thanks to the delicacy of this effect, I think it makes the UI look just pleasurable to look at. The designs that use blurred backgrounds look incredibly organic, warm and welcoming.

Take a look at Stripe (also some glassmorphism there) and My Mind (an amazing, simple tool for self-organization).

Big, sophisticated typography

There’s a lot of examples of a big, sophisticated typography playing the main role in a design of a product. Some of them are even entirely based on a typography — and the result is often interesting. The choice of a typeface is often quite extravagant.

Take a look at Whirly Birdie, Dovetail+Afterpay (also vivid colors) and Synchronized (also brutalism).