ansub-profile-picture

Ansub Khan

Engineer & Designer

How to Design Clean UI as an Engineer

August 23, 2024 (1mo ago)

100 views

Most engineers I know don't care much about design. They think it's superficial, a coat of paint you slap on after the real work is done. They're wrong.

Good design isn't about making things pretty. It's about making things work better. It's about solving problems. And isn't that what engineering is all about?

The best designers I know think like just like engineers. They're constantly looking for solutions to complex problems. They're not satisfied with the status quo. They're always asking, "How can this be better?”

But here's the thing: you don't need to be a designer to think like one. You just need to train your eye. Here's how:

Look at Good Design

The first step is simple: look at stuff. Not just any stuff, but stuff that's well-designed. This could be websites, apps, physical products, anything. Personally, I'm drawn to products like Apple devices, Linear, Raycast, and Superhuman. They're clean, intuitive, and just work.

When you look at these things, ask yourself: Why do I like this? What makes it work? How does it make me feel? You're not just admiring; you're analysing.

Copy, Then Create

Once you've found something you like try to recreate it. When you try to build something from scratch you start to understand the decisions that went into it.

Say you like a button on a website, Try to code it yourself. Get it pixel-perfect then start playing around. What happens if you change the padding, shadow or color.

Also remember that you have to get inspired not steal from people!

Learn from the Open Source Community

Some of the best design work happening right now is in open source. Check out projects like Sonner by Emil or Syntax UI.

Don't just use these libraries. Study them. How do they structure their components? How do they handle different states? How do they scale? There's a wealth of knowledge here, free for the taking.

Put Your Work Out There

This is the hard part for many engineers. We like to work in isolation, perfecting our code before anyone sees it. But design doesn't work like that. Design is iterative. It gets better with feedback.

Share your work even if it's not perfect. Ask for feedback. Listen to it. Iterate. Repeat.

This does two things: First, it makes your work better. Second, it builds your reputation. You'd be surprised how many opportunities come from simply putting your work out there.

The Bigger Picture

A well-designed product works better than a poorly designed one. It's more intuitive. It's more efficient. It solves problems more elegantly.

That's why it's worth investing time in design. Because at the end of the day, we're all trying to solve problems. And design is just another tool in our problem-solving toolkit.

So next time you're working on a project don't think of design as something you add at the end. Think of it as an integral part of the development process. Because that's what it is.

Start paying attention to design. Start thinking like a designer. You might be surprised at how much it improves your work as a developer. And who knows? You might even start to enjoy it.

Also check out this video where I talk about how to design clean UI:

Subscribe To My Newsletter

Stay ahead of the curve with my monthly newsletter called Luminary. Receive valuable insights on the latest trends, techniques, and tools in web development and design.

© 2024 - Ansub Khan