A few months ago, I decided to learn UI and UX design. I've always been impressed at stunning mockups I saw on Dribbble. So, I thought it would be great to get a glimpse of what you need to do to achieve great designs. I made this decision with pure curiosity. Along the way, I learned about colors, spacing, typography, and more!

By reflecting on what I learned, I realized something: learning design is essential for front-end developers. In the end, it's our task to give life to mockups, to make them interactive. Thus, why not learning how to design the user interface itself?

Let's see what learning design can bring you in terms of benefits.

Better value in your team

There's a standard workflow you can find across tech companies (especially start-ups). They have product owners and managers, a design team, a development team (both front-end and back-end). The product owners think of the new features with the team. The designer produces mockups. The back-end developers provide the endpoints to call. You, front-end developers, are responsible for making the mockups alive.

In an ideal world, you have a design team, and they think of all the edge cases you can encounter:

• When you have no data to display (empty state)
• When you have an error
• When an input gets really long.
• Etc.

In real life, you don't necessarily have a design team, and when you have one, they're not always available because they have a lot of work. In this case, you can sometimes be blocked. It may be because the mockups are missing or because you want the opinion of one of your fellow designers that are not available at the moment.

Knowing design is a considerable value for your team. It doesn't mean you have to replace the designer's work. On the contrary, it can even be complementary. You can build a basic design if you need to do a proof of concept for something your company wants to test. Or, if your designer forgets an edge case, you can also handle it without waiting for their input.

It also means you're more efficient when building UIs. You are quicker and more detailed. I often see developers who blindly copy-paste the values they get from Zeplin or InVision mockups. The thing is, these values can be incorrect, and it results in inconsistencies in your app. When you know how it's actually made off, you don't fall into these traps.

Furthermore, knowing to design can be a great asset in case of negotiation. You can bring up the fact that you can cover the technical part of a project and the design part, which, ultimately, results in fewer costs for the company and higher benefits for you. It's what we call a win-win.

Better side-projects design

That's the most important thing for me: designing for side-projects. Whether it's an app, a blog post, open-source work, videos, or whatever I can think of, there's always a time when you need to do design work.

For example, I was able to do all the design of this blog by myself. It's not incredibly beautiful, but I think it looks good and does the work. Without design in my toolbelt, I'm not sure it would have been the same.

Knowing how to code and how to design also makes you more independent. You can basically handle your whole website/app in terms of how it looks. It's like unlocking new powers because not only can you build something useful and interactive, but you can also make it look great!

Better communication with designers

Communication in a team is vital. I've already written about it in a previous blog post about soft skills. A front-end developer will have to communicate with its colleagues, back-end developers, product owners, managers, and designers! When you go along with a designer and that you truly work together, it can do wonders in your team.

Indeed, I'm sure you already got a stunning mockup that was really complex to build. If it ever happens, please, don't complain. Don't shout out loud that the designer is dumb, is not realistic, and knows nothing about code. Instead, cooperate and think of an alternative solution.

Once, I told a designer an alternative solution to a feature, and his reaction was, "Oh, it's actually possible to do this? I didn't go with this in the first place because I thought it was too hard for you". Being proactive and using your design skills in these situations can save time and, consequently, money (and companies like you when you're saving money for them).

Another case when you can use both your communication and design skills is when you have to build a design system. You can work hand-in-hand with a designer and create something consistent with your brand, powerful, and easy to use.

What to learn

Ok, so now you're sold on the fact that you need to learn design. What should you learn then? Here is a non-exhaustive list of topics to explore:

• Learn a design tool: Sketch, Figma or Adobe XD
• Whitespace
• Alignment
• Shadows
• Typography
• Colors
• Typography
• Icons
• Base components: buttons, inputs, headers, cards, and more.
• Etc.