Denis' Micro Blog

Welcome! 👋


Design | Development | General
Guides | Life | Tips

Superchargin' everything...

August 17, 2023 | Design

Hey hey everybody.

Hope you're doing well on this beautiful day.

So for today, I wanted to talk about a little design trick, which I first learned from the book "Refactoring UI".

This is a basic list... Looks fine, I guess...
It's just a list. Nothing really out of the ordinary.

A simple example of a minimally modified HTML-list

Now look at this masterpiece. A gem of a list. Fabulous. Magnificient.

A basic example of supercharged list icons with emoji and icon-based checkmarks instead of classic bulletpoints.

Okay, I may have over-dramatized this by quite a bit... But you get the point. It looks a bit better.

Why is that so? Look at the bullet points of the lists.
They are customized. They have a modernized look in a distinct style.
They got supercharged.

You can even turn this completely over the top and make these customizations specific to a topic and theme.
Look at this example of a security context.

An example for a "security context" where we replaced the bullet points of a list with locks.

Way more fitting than the standard, supercharged ones...

The cool thing is that you can not only do this with lists... Let's ramp up our fantasy a bit...

Think about...

And so on...

I think you get the point. The possibilities are only limited by your creativity.
So be a bit more creative, when it comes to those visual aspects and supercharge them a bit more than usual. 😉

See ya.