DEV Community

Cover image for Design Fundamentals for Developers - 5 Tips that Help You Pretend You Know What You're Doing
Lukas Mauser
Lukas Mauser Subscriber

Posted on • Originally published at sliplane.io

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

Image description

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

Image description

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

Image description

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

Image description

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

Image description

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.

Critique my work: sliplane.io

Top comments (15)

Collapse
 
code42cate profile image
Jonas Scholz

"good artists borrow, great artists steal"

Collapse
 
wimadev profile image
Lukas Mauser

Don't know how borrow works in this context but I guess there is some truth to that 😃

Collapse
 
chakewitz profile image
Maria

Great read!
One thing I’d add is the importance of design systems—even a lightweight one can help maintain consistency and reduce decision fatigue. I mean defining a collection of reusable components, guidelines, and standards that help teams build consistent, cohesive user interfaces

Collapse
 
wimadev profile image
Lukas Mauser

Yes! It sure helps to have some guidelines! The Germans say „if multiple chefs cook together the food will be too salty“

Collapse
 
yana_zahoruiko_ua profile image
Yana Zahoruiko

I remember reading a book, "Steal Like an Artist," which works for creative people and for devs as well. Observation is our everything; the more great designs you observe, the better taste you will have 😀.

Collapse
 
wimadev profile image
Lukas Mauser

Yeah that stealing thing is important - but equally important to be able to find the stolen stuff when you need it 😃

Collapse
 
codenamesol3nya profile image
CODENAMESOL3NYA

Wow, i really needed this. Don't reinvent the wheel just use it.😁

Collapse
 
wimadev profile image
Lukas Mauser

Yes, I need to remind myself constantly 😃

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

pretty cool seeing someone just say keep it boring-first tbh, makes me wonder - you ever feel torn between playing it safe or pushing your own twist even before you’re an expert?

Collapse
 
wimadev profile image
Lukas Mauser • Edited

The force is strong within me. But every now and then a non boring component catches me. These 3D animated globes are really tempting and hard to ignore

Image description

(Not mine, Source: reddit.com/r/threejs/comments/oydq...)

Collapse
 
dotallio profile image
Dotallio

Love these - breaking things down and choosing one main action per section has saved me so many headaches.
Curious, which design rule do you let yourself break first once you’re comfortable with the basics?

Collapse
 
wimadev profile image
Lukas Mauser

I'll leave that to the designers :-)

Collapse
 
nevodavid profile image
Nevo David

Pretty cool honestly, I always end up overthinking layouts way too much. Sometimes just sticking to the basics keeps me sane.

Collapse
 
wimadev profile image
Lukas Mauser

Trying new things is always tempting though 👀

Collapse
 
davidinchenko profile image
David Inchenko

cool visual