Design System Creation - Male

#websitedesign #design

Why do I need a design system?

To keep consistency and order in the product. That way you won’t spend time doing repetitive tasks over and over. You can focus on what’s truly important. 🍺

Also you don’t want to waste money on paying many times for fixing design miscommunications, do you? 💸

How to do user testing with a design system?

The good thing about user testing your UI is that you clearly see what works and what doesn’t. Make a plan, build the first iteration and then validate. 🧪 💥

If your initial idea fails and another idea turns out the be better, you can actually add both to the documentation of the design system and specify the new one as the “master”.

The old one can serve as an example for future design system updates to be taken into consideration. So you can use the old one as a warning basically.

Rush to market, harsh reality of inconsistencies

As most startups go rushing to market, the inconsistencies can yield false results — what it means is that your users can dislike a perfectly good product, because they feel it kind of sucks. That’s harsh, I know. Having a design system would create a level of consistency that’s completely apart from personal taste. 😳

Let me repeat that. Rules and consistency are generally apart from personal taste. People will appreciate consistency even if they dislike the colors or fonts you used.😖

This is an example how you can find inconsistencies and bad UI even in big banking apps. The photo is from my talk back in early 2018, and even though some of the apps got updated since then, they’re still not error free. This is what design systems and QA are for.

Design.

In this new agile world the word “design” has been tossed around quite a bit. At this point it may have lost it’s meaning, but generally a “design” means “according to plan”.

If you don’t have a plan, but “artistically” improvise as you go, you may have created art. 🎨🖼 But that’s not design and in nearly ALL the cases art doesn’t work for product interfaces. 🥵

So don’t be an artist painting pixels and creating vector paths on a canvas. Be a designer and plan around how objects are built and how they relate to one another.

On a side note I know that for some stupid reason the individual canvases in most tools are called ARTboards. Someone at Sketch probably had a sense of humor. 💎🤔

All the below projects were based on at least a very minimal design system. None were designed by “just painting pixels”.

Go generic if you have to. It’s always better than artsy.

If you’re really on a budget and need to test your MVP fast, it’s a way better route to use an existing design system. Not a perfect choice, but better than coming up with a half baked one. Even Material Design if followed precisely (that’s without bending the rules) can make more sense than randomly putting together some objects and shapes that you personally like.

The notion of designers being “artists” goes a long way back. I remember clients back in 2009 saying stuff like “I’ll let you paint the buttons your way, you’re the artist!”. 😡

It was frustrating back then as it is frustrating right now.

🤦‍

Art vs Design 🥊

Of course there’s a place for “art” in design. But only one.

Illustrations are “Art pieces” that can serve as part of the overall design of a product. Currently they’re quite popular and trendy too. But aside from some visual aid and look&feel they don’t have a functional purpose. They’re not “interface”. They’re the part that adds some personality to the interface. They’re also not necessary, but a nice to have.🎈

Don’t confuse the two and you’ll be fine.