July 25, 2024

Designing As A Non-Designer: My 80/20 Approach To Design

Hey there,

How do you feel about design?

Design can be tough, especially if you don’t have a design background. When I first started building projects, I found design harder than the technical stuff. There’s only so much you can do wrong when setting up a Make.com workflow, but design shows your taste—and people notice. If it looks messy, it can leave the wrong impression, no matter how well your platform works.

I know a lot of my colleagues think design doesn’t matter, but let’s be honest—it does. It's your first impression, so it counts big time.However, I also don’t think complex design systems are the answer (not that I would know what I was doing anyway).

For me, it's about finding the balance between no design and over-the-top design.

So in today's newsletter, I’m sharing my 80/20 approach to design as a non-designer. Let's get started:

How To Get Your Design To 80% Done

Rule 1: Choose Simple Layouts

If you have never designed before, it’s best to stick with what works. When building layouts in Webflow, don’t reinvent the wheel. I use Relume because it's fast, mobile responsive, and made by real designers who know their stuff. Relume is my go-to hack for building and designing in Webflow.

Rule 2: Don’t Go Crazy with Colors

What I find makes sites look "meh" is overdoing it with colors. Why use a bright red background? (Maybe we do need it, but I doubt it.) My color rule: pick one primary color, two complementary colors, and neutral backgrounds. It’s that simple. If you style the Relume style guide, you can get your site looking good quickly.

Rule 3: Pick 2 Fonts

Fonts are another area where people go overboard. Simple scales, fancy fails. I pick one font for headings and one for the body. I use Google Fonts because they are readable. My go-to fonts are Bricolage Grotesque for headings and Inter for the body.

Rule 4: Use High-Quality Images

Good images make your site look great fast. I use Unsplash and Pexels for photos. Avoid overused stock images—we all know the ones. Take your time, browse, and choose photos that represent your brand. Bonus: try AI image generators if you want to experiment.

Rule 5: Use one Icon Set

Find an icon library (I use Phosphor Icons in Figma) and stick to it. Using different icon libraries makes your site feel disconnected. Stick with one library to move fast. Hack: import Phosphor Icons as SVGs into your Webflow projects.

Rule 6: UX is King

All these points don’t matter if your UX is bad. Make it easy for visitors to do what you want. If you want them to watch a webinar, don’t make them click 30 times. Keep it simple.

What About The Extra 20%?

Okay, let’s say you nail the basics and want to go beyond 80%—what next? For me, the extra 20% includes things like designing different backgrounds, making sure form borders look good, ensuring button states are consistent, and adding animations.This is beyond my skill set. When I want to make my site look better, I hire a designer. If you find someone whose style you like, ask them to improve your designs. You can usually get this done for $300-$500. I’ve done this on Unicorn Factory, and it’s always worth it.

TLDR

One of my philosophies is "Simple scales and fancy fails." Design is no different. Focus on getting to 80%—a functional, appealing design that serves your users well. Don’t worry about the final 20%; that’s where it becomes a craft. By focusing on the basics and getting professional help for the final touches, you can create a platform that looks great and works even better.

I would love to hear your thoughts on this. Even you have anything I should add, lemme know.

Connor

Subscribe to the Newsletter

Every week, I share new tricks and insights that will allow you to design and build your first online business.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.