How To Make A Great Looking Website Even If You Can't Design

Does this sound familiar - you have a great idea, you build that idea, you start looking at the final outcome and think... This looks terrible.

And the worst part, you don’t know how to fix it. We are developers after all, not designers.

Luckily, you don’t have to be an amazing designer. You just have to be resourceful and understand a couple of simple design tips. The internet is full of free tools and resources to supplement your lack of design skills.

I’m going to show you how to take advantage of those resources to create something that you can be proud of.

This guide will cover the tools, techniques, and resources I use for designing websites. It is not the end all be all but it is a great guideline for people who struggle with design. We are going to build an application called DesignDo. It will be a collection of design tips and resources (so meta!). Everything we use will be 100% free. To keep our focus on the point of this post, we won’t be using a front-end framework. Just static HTML.

Planning

Use a CSS Framework

Have you ever been bowling with someone who is terrible at it? They put those bumpers in the lane so they can't throw a gutter ball? The CSS framework is your bumper. It’s almost impossible to throw a “gutter ball” with them. They will give you a great starting point and also provide constraints that a dev who struggles with design needs.

I would recommend Tailwind CSS. It uses classes that are abstractions of CSS properties. It serves as training wheels to learn CSS plus it’s easy to make great-looking sites with it. Read the docs here.

Also, if you are not using a front-end framework like React or Vue, I would suggest using alpine js. It’s great for simple UI changes like turning your nav into a hamburger menu when on mobile devices.

Colors

Keep it simple.

Use a white background and black or dark gray text. If you have black text in an area with a darker background color, like a button, change it to white.

1 primary color for your logo and call to action buttons. Use it sparingly for things you want to “stand out” in your design.

Secondary colors should be a light color to make cards stand out from the white background. The simplest way is to just use various light grays for this. They go with everything.

Determine the personality of your site

Every site has a personality. They can be serious and business-like. They can also be fun and light-hearted. Figure out what you want the personality of your site to be. This will determine a couple of CSS properties you will be using. Figure it out? Good.

Now, if you chose serious, I suggest using:

• Font: Use the default tailwind CSS font. You won’t have to configure anything.
• Border Radius: Do not use border radius. Square buttons and boxes give off serious vibes.
• Color: For your primary color, dark blues, greens, grays, and purples are all great choices.

If you chose fun, I suggest using:

• Font: Tailwind Default or Outfit
• Border Radius: Use a medium to large border radius. Pick 1 though. Do not mix different border-radius sizes. Keep it consistent.
• Color: For your primary color, you have a lot of options. I would suggest a lighter vibrant color though.

Find Inspiration

Alright, so you have an idea of what personality your site will take on. Now go find some inspiration to spark your creativity. DO NOT COPY someone's design to the T or their code. Use it as your north star.

Web Design Inspiration Sites

• https://land-book.com/
• https://www.awwwards.com
• https://www.siteinspire.com/
• https://dribbble.com/

My choices

DesignDo will be a fun/creative site. I’ll be using the default tailwind font and a large border radius on buttons and cards. I’ll also be using light violet as my primary color.

I'll be using this website template as my inspiration...

It has a nice hero section where I can put some copy about what my site is and a vertical list, which I’ll need to list my design tips and resources.

Work Smarter, Not Harder

Part of getting better at development and design is swallowing your ego. You aren’t a better developer because you build everything from scratch. You are just a slow developer. The same goes for building your site.

Find free components or themes

I never start my HTML from scratch. I always start with some pre-built components and go from there.

Were going to use a great free option, Wicked Blocks.

Using my inspiration site to guide me, I picked out the following blocks to use.

My Header

Hero

Below is the fold content:

Footer

Put your blocks together in HTML

Before we start customizing our site, let’s put our blocks together in HTML.

It’s a good start but we have some work left before DesignDo is where we want it.

Logo

Again, keep it simple!

I usually go with a text-based logo for my sites. The name of my site is DesignDo, so that is what my logo will be. I’ll typically use the primary color as a background and use white or black text. The text color is all about readability. So if the white text is hard to read on top of your primary color, use black text and vice versa.

You can create your logo by either writing HTML or using an image editor.

If you decide to use an image editor, I recommend Photopea.

It’s a knock-off of photoshop, it’s free, and it’s amazing! You can also upload your own fonts for text.

For the DesignDo logo, I’m just going to use the name as the text with extra bold font. The background will be my primary color.

I’m also adding a slight rotation to the logo to give it a little more character. (Do not do this if you're going for a more serious design.

Nav Links

There shouldn’t be much to do with nav links. Make sure the text is gray or black. If you want to add icons along with the text you can. Heroicons is a great free icon library that I use all of the time. I would suggest using this if you're making a more serious site.

You can also use Heroicons for a fun/creative site. I also like to use emojis for icons if my site's personality is fun and creative.

For DesignDo I only have 1 nav link and I’ll be using the fire emoji to bring some more attention to it.

Hero

Because we used Wickedblocks to give us a headstart, the hero section doesn’t have a lot for us to do.

We just need to update some text. When dealing with large headline tags like ours, structure it in a way where the first line is longer than the second. It’s more appealing to the eye.

We also need to update the color of our Notify me button to our primary color

Content

Once again, we're not far off on how we want our below-the-fold content to look.

I’m not feeling the icons. They don’t go with the personality of the site. So I’m going to reach out for Heroicons to get something more in line with our theme.

That’s better! I’ll leave the background of the icons alone since it’s a light gray and is a nice contrast with our dark icon and white background. It also is rounded so it follows our theme of large border-radiuses.

The “Short Length Headline” is an H2 but it’s using the same styles as its description below it. We want the headline of the tip to stand out and get the reader's attention. I’m going to increase its size and font-weight slightly (we don’t want it larger than the H1 tag above it).

Finally, we will update the cookie-cutter text that came from wicked blocks with our own design tips!

Summary

A lot of people champion using their own handmade CSS and using design tools like Figma to create mockups. I agree, they are both great things. But the truth is, as a developer, I don’t have the time to become an expert in Figma or to write my own custom CSS library that I can carry from project to project.

But I can be resourceful and use free tools and resources on the internet to create good-looking designs at a fast pace.

If you want to check out the project I created in this post, follow these links:

You can find DesignDo here.

The repo for this project is here.

If you enjoyed this article, feel free to join my newsletter @ https://thefreelancedev.com

Also published here.