How to not make your product look janky

I'm a fan of minimalist sites. But there's a difference between minimalist and just plain janky.

Your UI is the first thing potential customers will see, and few will purchase something that doesn't look trustworthy. But design can be a huge time-sink if you don't do it right, and indie hackers need to make the most of every second.

So I did a deep dive to get my head around how indie hackers can approach design, without overfocusing on it. Here's what I found. 👇

MVP Disclaimer

MVPs should be fugly, so this does not apply to them. This post is for products that are validated and growing beyond the MVP stage.

Design for indie hackers

Alright, let's start with the process that indie hackers can follow.

Before you begin designing

• Get inspired: Honestly the most important thing you can do is to examine other websites and get a feel for their aesthetics. You've already been doing this (at least subconsciously), but be intentional about it. What did they do? Why did they do it? Sites like @robhope's One Page Love, Dribbble, and Awwwards are great resources for this.
• Branding: You should have a basic idea of your branding. It's a pretty big topic so I won't get into this here, but a logo, brand font, and color(s) would be helpful. Don't get too precious about it. I had a client once who spent 6 months trying to hone his branding, and I don't think the end result was any better than the first logo. Keep it simple. You can buy it pretty cheaply on sites like Fiverr.
• Goals: Decide what your goal is for whatever you're designing. Is it conversions? Retention? Keep referring to that during the whole design process.
• Scope: The scope of what you're designing should be set before you get started too, for obvious reasons.

The design process

• Sitemap: Plan out your website's hierarchy.
• Layout: Figure out the layout of each type of page. If you're going to use some kind of website builder, this is just a question of looking at their templates. Otherwise, we're talking about wireframes, see below.
• Wireframes: It can be really helpful to draw out the basics of what you want. Wirefames do not need to be some fancy thing created via software (but it can be if you prefer — Sketch is a good one for that). Black and white, back-of-the-napkin drawings will save you time. Tip: Start with mobile (not desktop).
• Color palette: Once wireframing is done, it's time to think about aesthetics. Base the color palette on your branding. Choose 4 colors — the primary color, secondary color, an accent color, and your background color. You can really go down the rabbit hole with color theory… I personally wouldn't spend too much time on it, beyond the obvious stuff.
• Fonts: A font family will be your best bet, as this will ensure that the fonts you choose mesh well with each other. The idea is to create a typographic hierarchy (titles, subtitles, body) so that your site is easy to read and navigate.
• Content: Gather your content — images, videos, and copy. Avoid stock imagery if possible, as that gets cheesy really quickly.
• Design elements: Now comes the part where you actually design the thing. There are several ways to do it. You can tweak a template from a website builder or a template marketplace, you can use a UI kit, or you can build it from scratch… but don't build it from scratch. That goes way beyond what most indie hackers will need.
• Get feedback: The earlier you can run your design by people (preferably potential customers, but fellow indie hackers, friends, and family will do), the better. It's a lot easier to make changes before you write any code. And get homepage feedback before designing the rest of the product/site.
• Implement it: This will be the easiest part if you're a developer (or if you're using a web builder).
• Accessibility: Make sure it's accessible. This means you need to build your site hierarchically, make sure it can be operated fully from a keypad, add alt text to images, use heading tags, avoid color combinations that some people have trouble seeing, etc. There are tools for this below.
• Favicon: Don't forget the favicon.
• Test it: Once you've implemented your designs, it's super important to test them. UI can go awry, and nothing looks jankier. Testing on the most popular browsers for your demographic (generally Chrome, Safari, Edge, Firefox) on your computer and your phone will mostly do the trick. But it can be worth borrowing a friend's device for a few minutes to test different sizes and operating systems. There are some solid tools and services that I'll list below.
• Launch it
• Keep optimizing: Get feedback from customers, friends, and whoever you can. I'd suggest reading The Mom Test by @robfitz so that you can make the most of the feedback.

UX/UI tips

So that's the process. But how do you do it well? Here are a few things to keep in mind:

• Responsiveness: Let's start with the obvious. The best way to make a janky website is to not put a lot of focus on responsiveness. Optimize for it. Test for it.
• Consistency: Be consistent throughout your site, and with other sites as well. This is one place where you actually really want to be predictable. Predictability is king in UX.
• Clear copy: Make sure your copy is clear, concise, and it speaks the reader's (target market's) language.
• Alignment: Make sure elements are aligned horizontally/vertically whenever possible. Otherwise, it'll start to look messy in a hurry.
• Empty space: Don't be afraid of empty space. Minimalism is a good thing.
• Start small: I mentioned this briefly above, but start by wireframing and designing the mobile screen. It's way easier to scale up from a small screen than it is to try to compress a desktop screen into mobile.
• Start with what's important: Start with the most important feature of a page, then once that's done, move to the less important stuff.
• 2-click rule: You should be able to access any page on your website within 2 clicks, no matter which page you're on. Use menus and internal links to your advantage.
• Don't do it from scratch: Generally, doing it from scratch will be too time-intensive. I touched on this before, but either use a template or a UI kit.
• Consider outsourcing: If you've got some revenue and you want to put all your time into coding new features, contracting a designer can be a good idea. Here's a post I wrote on how to outsource effectively. When you're beginning, though, this probably isn't a good use of resources.
• Emulate: You obviously shouldn't copy a site, but emulating a site is a great idea. You can bet that the big competitors in your space have tested their design ad infinitum, so put that to work on your product, while adding your own touches.
• Put the time in, but don't waste your time: Making it not look janky is important. Creating the world's most beautiful website is not. Maintain a balance.

If you want to get into even more detail than I'll go into here, here's a really solid article with 7 super practical, easy tips that will uplevel your aesthetic.

Design for developers

And a couple of tips specifically for the developers among us:

• Design in the browser: You have the advantage of knowing HTML and CSS, so consider using these as your primary design tools and designing in the browser you can use that to your advantage.
• HSL vs hex: Use HSL values for colors. HSL values make more sense in relation to each other than hex values, and this will allow you to manipulate the color via the code more easily.

Tools

Design tools

• Illustrator: We all know it. It's solid. But it probably isn't necessary for our purposes.
• Photoshop: The almighty photoshop. Again, powerful and amazing, but probably not necessary.
• Figma: This is really robust and good for collaboration, but probably overkill for most indie hackers.
• Webflow: This is where it's at for developers (and I'd say indie hackers in general). Their visual design interface is great (and it's a web builder too). I know of several indie hackers who use this.
• Sketch: Often used for wireframes, but it's decent for design as well.
• Framer: Similar to Webflow, this is a design tool and web builder.

And a few convenient little tools that might help:

• Coolors: Generates color palettes.
• WebAIM Contrast Checker: Checks whether your colors are accessible.
• AccessibilityChecker: Checks your overall accessibility.
• Archetype: Generates typography systems

Wireframe tools

• Whiteboard: As I said above, a good, old-fashioned pen and paper or whiteboard will often do the trick for wireframing. That's my personal preference, though it does have its disadvantages (editing, for example).
• Sketch: This is the one I see talked about most for wireframing. I've worked with it before and it seemed solid.
• Moqups: Specifically designed for mockups and wireframes
• Mindnode: Mindmapping tool that can be good for web hierarchies and, to an extent, wireframes.

And, of course, all the design tools in the previous section can handle wireframes too.

Web builders

• Webflow: From what I've seen, this is the most recommended for (and used by) indie hacker types. One really helpful part for developers is that it exports really clean, semantic code.
• Squarespace: Solid platform with really beautiful templates
• Wix: This is the builder I've used most in the past. It's good, though I've banged my head against the wall many a time.
• Zyro: Cheap
• Weebly: Good for simple sites
• Bluehost: Good for WordPress sites

QA tools

As I said above, it's important to test on multiple screen sizes, browsers, operating systems, etc. Simulators are okay, but they can be problematic, so always go for real devices when you can. Here are a few tools that allow you to test on real devices remotely:

• Browserstack: I've used this before and it's solid. Probably the biggest player in this space.
• LambdaTest: This is probably Browserstack's biggest competitor.
• Kobiton: Similar to the above and seems to have some really solid automation to make testing faster.
• QA for hire: You can always contract a QA person on Upwork, Fiverr, etc. if you want that personal touch.

And here's a list of browser extensions for web design

Resources

While digging around for this post, I came across some books that came highly recommended:

• Don’t Make Me Think
• Refactoring UI
• Design for Hackers
• Thinking with Type
• Hello Web Design by @limedaring

There are free (and paid) courses out there too:

• WebFlow University: Ultimate Web Design Course
• Design for Hackers email course
• Web Design for Web Developers: Build Beautiful Websites
• UI design for developers Note: This one is paid but it's fairly cheap ($19) and it came highly recommended. Looks solid.

And here are a few other resources you can peruse if you feel so inclined:

• Gestalt principles
• Niels Norman Group's usability heuristics
• Basic design principles

What did I miss?

Subscribe for more tips, how-tos, and case studies 👇

The Boot's Trap 🪤

Learn from indie hackers who are in the thick of it

Subscribe