Developer wanting to learn UI Design? Start with a Design System!

Quite possibly one of the best ways for Developers to learn UI Design fast. No really.


Are you a Developer struggling to improve your UI Design skills? Then call 0800-IMPROVE-MY-UI-SKILLS-NOW

Woops! Sorry. Wrong intro.

We now return to our regular broadcast…

Now, there’s an abundance of Text/Video Courses & Tutorials out there ready and waiting to help Developers improve their UI Design skills, including the quite recent, and very popular Refactoring UI guide by the talented Adam Wathan & Steve Schoger. Awesome job guys!

So this got me thinking. What’s another method that Developers could try to help improve their Design skills, and with minimal effort on their part?

Design Systems.

And in particular, one that I created called Cabana (Oops let me just pick that up there).


Can a Design System help Developers improve their Design skills?

Like I just mentioned, a Video Tutorial here, and a Blog Post there can help Developers a great deal on their design learning journey, no doubt about that, but a Design System can help accelerate that learning greatly, as I began to discover.

When I launched the Cabana Design System back in November 2017 it had predominantly been pitched towards UI & UX Designers. Makes sense right?

Now, don’t get me wrong, Developers do have a relationship with Design Systems, it’s there as a single source of truth for the whole Design/Development/Engineering team. That’s its main role, of course it is. But the majority of the time, Developers are interacting with the System at a later stage in the process when it comes to handover time, if at all.

In all this time I’d never stopped to think that something like a Design System could serve a slightly different purpose and help Developers learn design fundamentals, best practices, and also improve their skills at the same time, all from one easy point of reference.

Ok. Yeah an all-singing, all-dancing UI Kit that you’ve checked out on UI8 (or any other design marketplace) can inspire you but it’s pretty much one persons style that you have to adhere to unless you customise the shit out of it. With something like a Design System, a Developer wanting to improve their Design Skills has more of a blank canvas to play with. It may not look as retina-searingly gorgeous out of the box as Designer Dave’s 150 screen UI Kit, but they do enable you to get your design knowledge, and skills up to speed much faster than being mildly inspired by a UI Kit you picked up.

Remember, you only have traces of the authors DNA stamped on a Design System, it’s there for you to put your own mark on, learn design best practices, and begin crafting your own style very quickly.

With a Design System, you as a Developer have access to ready-made Components such as Forms, Buttons, Modals, Cards, Menus and so much more, all adhering to design best practices, and enabling you to start off on your UI Design learning journey in the quickest possible way.


“Developers shouldn’t always need a Designer to create projects, and many of us are into learning UI Design for this reason”.

Recently I had the chance to chat with the amazingly talented Sara Soueidan. A well respected Front-End Developer, and Author (C’mon you must have seen some of her awesome work on CoDrops).

Sara mentioned about how, as a Front-End Developer, she was, in her own words “Still learning my way around Sketch, and UI Design in general”. This is where I brought up in conversation about the Cabana Design System for Sketch that I’d created, and Sara mentioned, that as a Developer something like Cabana could be very useful and that she “Could use something to kickstart my design work every once in a while”.

Coming at it from my angle; A Designer first and foremost, something like Sketch had been my tried and trusted Tool for many years, and been second nature to me, and so I naively asked Sara “Do Front-End Developers use Design Tools much?”

To my surprise Sara’s response was “Many do, and I’m getting into them now as well”. Who knew right?

Now, I was always under this vague assumption (Golden Rule: Never make assumptions) that Developers rarely picked up a tool such as Sketch, Figma, Adobe XD, and the like. They were too deeply embedded in their Sublime Text, Atom and Visual Studio Codes of this world, and that was how it went.

I’ve now heard from quite a few Developers who always wished that they could make their Design ideas look great without relying on a Designer, but always felt that that either their designs looked pretty ‘Urrggh’, got frustrated and gave up, or they just did not have the time to learn a new skill alongside their main role.

Chatting further with Sara she mentioned about the appeal to Developers a Design System like Cabana could bring to them…

“Developers shouldn’t always need a Designer to create projects, and many of us are into learning UI Design for this reason”.
“Cabana Design System is incredibly useful for a Dev like me getting into the design side of things with Sketch. Many thanks for this time-saving goodness”.

Closing thoughts

Even if you feel that Design is not an absolute priority for you, you don’t have to discount it completely. You don’t have to aim for becoming an expert in what you may class as a ‘Secondary Role’, but more than competent enough to create something that looks and works great, to not always be reliant on a Designer to create the artwork for you, and to help strengthen your skills and value.

Remember. We don’t need to achieve Zen-like Mastery in every single thing that we do, you can be the best you can be in your Primary role ie; Development/Engineering, and be competent enough in a Secondary role à la UI Design.

With a Design System at the ready, You, as a Developer have a Boilerplate of sorts, where most of the work has been done for you. You can use it in its plain ol’ Vanilla form and produce great looking results, or you can learn from it, improve your design skills, and eventually adapt it into your own visual style.

And all without watching another YouTube Tutorial. Hurrah!

If you would like to improve your Design skills you can pick up a copy of my Design System; Cabana below...

https://cabanadesignsystem.com

Use the offer code MEDIUM25 to receive 25% OFF.

Thanks for reading the article,

Marc

Designer, Developer, Father and Lover of my new Amazon Echo Dot!