How to make good designs (with code)

Few days ago, when I was scrolling through my Twitter bookmarks, I found this tweet by Guillermo Rauch which says:

Now, I very much agree with Guillermo and believe that having a good design can instantly make your product feel more valuable and set it apart from the monotonous machine-made interfaces which you see these days very often.

So I thought to write a simple blog on the learnings I got by making some good designs over the past few months.

Good design is something that makes the other person feel that you care for your product. Now let's begin with first knowing the reason behind those bad designs.

Problem with Bad designs

• Machine-made UI designs: Having ample AI-generated designs which are not only monotonous but exhibit a deep state of emotionless design.
• Lack of attention to detail: There are many designs in the market that lack attention to detail, like not having consistency throughout the design, which introduces roadblocks in the UX and takes away all of the user's attention.
• Lack of design taste: People often neglect the fact that those without good design taste can only make the structure of the UI they are told to make, as they can't bring many new ideas. New ideas require a foundation of brain intellect trained over thousands of good designs.

Making good designs with code

I believe good design is the experience you give to your users in exchange for their precious time.

Here are a few pointers which might help you:

1. Understanding of basic UI/UX principles

   To understand these, you need to focus on a few important parameters which play a crucial role in any design you make in the future.

   • Colors: Colors are one of the first things users notice. They set the mood, brand identity, and help with readability.
   • Fonts: Font affects how information is read and perceived. It can either make or break your website. I mean, you wouldn't want Comic Sans to be your primary font in your Million Dollar SaaS application.
   • Spacing: Whitespace (or negative space) makes your design feel clean and organized. It helps in grouping or separating UI elements clearly.
   • Hierarchy: Hierarchy guides the user's eye to what matters most. A clear hierarchy improves scannability and user flow.
   • Consistency: Consistency ensures users feel comfortable and understand how things work.

   Read more about them and experience them in some of the designs out there.

2. Taking inspiration

   The best thing before jumping into designing anything is to take some sort of inspiration from platforms like Dribbble, Behance, Pinterest, and Figma Community. Try to recognize the patterns and extract the learnings you see now and then, and then try to implement them your way without copying straight away.

3. Implementing it into code

   First of all, just try to conquer pixel perfection for any design you're trying to do. Once you have seen many designs, you'll start to get a sense of new ideas. Experiment with them, code them, and just keep practicing this again and again.

My process of designing something via code

1. Take some inspiration from the above-mentioned platforms and some designs from people on Twitter.
2. Structure my project with shadcn as the foundation and then figure out the color theme for the project. For this, I heavily use tweakcn a lot nowadays.
3. Choose a suitable font as per the vibe of the project. Btw, my favourite fonts are Geist, Inter, Manrope, Plus Jakarta Sans, Britti Sans, and Satoshi.
4. If it is a landing page, then I quickly structure the sections I need to make, like features, hero, etc.
5. I always try to ensure the user gets the details of the entire page or a section with the least possible effort, with the help of some illustrations or good content (thanks to AI).

And as a result, I could make the following designs from the learnings I discussed above:

Conclusion

Making good design isn't hard. You just need to get the taste of it by continuously looking for some good designs and bringing them to life in your way.