Design Fundamentals for Developers - 5 Tips that Help You Pretend You Know What You're Doing

I am not a designer myself, but for the better part of the last decade, I've been involved in a lot of frontend projects and worked closely with design. Having picked up some design fundamentals really helped me in my career and I want to share some of that with you now.

TLDR: A designers brain is wired differently, and as a logical thinker you will never be able to comprehend their deep state of being.

As a developer, it's not necessary to adapt this state. After all — designers and developers are completely different roles. But it sure helps if you know at least some basics. So here are 5 tips that I use to avoid building crappy apps and make something usable.

1. Features first

No matter what you do, functionality, readability, and accessibility are always the highest priority.

A crappy design, that works will always beat a beautiful design, that is unusable.

The second layer is to keep confusion to a minimum and help your users get the job done as fast as possible.

2. Layout

Don't think about designing a whole app or whole website. Each app or website consists of smaller parts.

There is the page frame or layout, which usually consists of the header, the footer, the main content, and maybe some elements that are repeated on each page.

Then there are the individual pages, which consist of several page sections like the hero, a list of benefits, a logos row, etc.

And if we zoom in even further, we can break down each section, which consists of different components: headlines, buttons, cards, images, sliders...

Don't try to design the whole thing in one go.

Start with the layout, then zoom in one section at a time. It helps to deploy whenever a section is ready. Hero section done? Deploy!

3. One primary action

One — and only one — primary action per page, section, or component.

Make these primary actions a big button that stands out. Everything else goes behind a menu. Or if it’s just two actions, a secondary button with less visual weight.

It helps if you have tracking data on how often a particular function is used by users. Track that if you have the resources — if not, make your best guess.

4. Steal from your competitors

Everything has been solved already — you just don't know about it yet. Designing something from scratch is hard work. I can tell you, you can spend weeks and months designing. There is no end to it! And it's easy to get trapped and end up redesigning the same thing 100 times just to end up with the same or even worse result.

Instead: look left and right and steal known components from competitors. This not only saves time, but your users will thank you, since similar or existing components will be easier for them to understand and use.

5. Don't be fancy

There are some incredible designs out there. And usually what makes them incredible is that they look different than what we’re used to seeing. The best of the best break with conventions and design rules that are taught to beginners.

BUT: they do this with intention. They’ve already gone through all the beginner rules and mastered them first — until they were able to understand when a break makes sense! They do this on purpose because they know why.

Don’t do this if you haven’t mastered the basics. Try to stick with the basics first. Make boring layouts — but make them good. Only then it's time to get fancy.

Summary

You don’t have to be a designer, but knowing some design fundamentals helps a lot.

Keep it functional, break it down into parts, stick to one primary action per section, copy what works, and don’t try to be fancy too soon.

That’s what I do.