Ask HN: What's your secret for making pretty website designs?

Hire a designer?

There's no one single thing, except internalizing a bunch of small ones.

My favorite guide is by Tania Rascia [1]. It walks through each of the "rules" and applies them to a simple example. My second favorite is by Anthony Hobday [2] and each "rule" gets its own, simple example to demonstrate.

[1] https://www.taniarascia.com/design-for-developers/

[2] https://anthonyhobday.com/sideprojects/saferules/

I've had mixed success using a template. I can modify the content, but it always looks a little janky - not quite as slick as I want.

My strategy for the next project is to take a template that I like, and hire a designer to customize it. A lot of the "janky" feel is because I don't select graphics that match the theme, and/or the copy doesn't fit quite right. That final polish is a result of expertise and effort.

buy from themeforest.net and modify

As an engineering type lacking in design skills, I feel you. For my own side project, I paid for the TailwindUI library, which contains all sorts of premade components for web apps, stores, and marketing pages. It was a godsend, really helped to put together a clean UI while giving me flexibility to stray off the path via Tailwind CSS.

One thing that I'm looking for, that might be available but I can't seem to find it is actually before and after versions of designs. Meaning a janky/template edited and then shown the key differences and why.

I saw this with "marketing examples" but then most of the are made up/faked. As in the good is example is made bad. But I want to actually see actually "okay" designs made better with a touch of thought.

But I do find that most "design" is subjective. And just need to fill your life with well thought out designs, and designers and live like a well designed life and then by osmosis or some kind of divine intervention that design style rubs off on me.

TailwindCSS helped a lot on my website, using their preset classes reduces the burden of decision (I don't need to think to choose between 15px or 17px, which exact hex code of gray), and it is easy to make a design system (heading font, paragraph font etc)

buy a theme from bootstrap, is like 50 bucks

Also might be worth a try to watch some design YouTubers, it's interesting to see their process, what they focus on, etc.

Design is more objective than most people think. Forget about "pretty" designs for a moment and think of design as utility. It's about visual communication. There are principles that you can familiarize yourself with that, when followed, will create a great looking end-product.

Emphasis - Every mark on a page has visual weight. Adjust the size, lightness/darkness, shape, texture, etc. to control emphasis.

Visual hierarchy - What are the most important elements and in what order? Use emphasis to guide a person's eyes through those elements.

Unity - All the elements on a page should look like they belong to the same "unit" (think military or corporate uniform). Simply applying consistent margins, padding, font sizes can go a long way in enhancing a design.

These are a few to start with but if you search "principles of [web] design" you can learn a few more and see some examples. Start to look critically at the websites you like through the lens of these principles.

Once you're comfortable with the principles you can begin to decorate, make them pretty, and even start to break the rules (see brutalism).

Copy other peoples design.

ChatGPT 4 can code tailwind very well especially if you start with a good template.

I search cdnjs.com for frameworks or other css frameworks, find their homepage, or another page they created, and often just make a copy of a page I like and design around that page.

But other than that... kiss is always the method to follow.

1. Margin: auto; max-width: 60em; 2. For all else use flexbox

WordPress templates. Watch some videos on YouTube for setting them up.