1. 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? A CSS framework is your bumpers. 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 → https://tailwindcss.com/
2. Keep your color scheme 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.
3. Pick a personality for 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. It will determine a couple of CSS properties you will use.
For a serious site, I suggest using:
Font: Use the default tailwind CSS fonts. 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.
For a fun site, I suggest using:
Font: Tailwind Default or Outfit → https://fonts.google.com/specimen/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.
PS: Use 1 font for your application. It’s too hard to find multiple fonts that complement each other, especially if you suck at design.
4. Find Inspiration
find some inspiration to spark your creativity. DO NOT COPY someone's design to the T or their code. Use it as your north start.
Web Design Inspiration Sites
5. 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. If you enjoy building everything from scratch, go for it. Otherwise, I suggest using pre-built components to give yourself a head start.
If your using Tailwind CSS, Wicked blocks has some great free components. You can quickly piece them together and then customize them as you see fit.
Wicked Blocks → https://wickedblocks.dev/
Again, keep it simple!
Text-based logos are a great choice. They are easy to make and hard to screw up. 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 white text is hard to read on top of your primary color, use black text and vice versa.
You can create your text logo by either writing HTML or using an image editor.
If you decide to use an image editor, I recommend → https://www.photopea.com/
It’s a knock-off of photoshop, is free, and it’s amazing! You can also upload your own fonts for text.
There are a million free icon libraries out on the web. I enjoy using Heroicons. https://heroicons.com/
I also like to use emojis for icons if my site's personality is fun and creative.
If you enjoyed these tips, I wrote a post showing how I build/design a site utilizing them → Here