Ask HN: What's your secret for making pretty website designs?
27 comments
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/
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/
[2] is really good. Thank you. Baby steps to being a better designer.
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).
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).
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.
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.
> 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.
That is exactly what I'm dealing with right now. I'll probably find someone to "consult" my final design and fix the jankiness.
That is exactly what I'm dealing with right now. I'll probably find someone to "consult" my final design and fix the jankiness.
You might also just accept that it’s probably not the most important thing to work on. If you have any sort of scale, I would recommend split testing a new design - if it doesn’t convert better, you learned a valuable lesson :)
Wanted to follow up - what I meant to say is that it might be worth a couple days’ worth of pay to learn that you don’t need to worry about this, it will likely not impact your key metrics as much as putting that time and money elsewhere.
I'm not getting any interest because its so jarring how ugly it is right now. The presentation/marketing has been lackluster at best too. I'm hoping a feel good atmosphere when entering the site will enhance the first impression.
My suggestion then is to scale down the surface area so it is a single landing page, hire someone to code that page up, and split test that against your "ugly" equivalent. I would bet that it's not the aesthetics, it might be the messaging or targeting or value prop - but all you see are the aesthetics and WYSIATI.
Well, my competitors got actual users with much less features. I got zero. Haha.
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.
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.
You might like hyperplexed on YouTube. He redesigns popular websites while explaining his thought process and reasoning behind every decision.
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.
WordPress templates. Watch some videos on YouTube for setting them up.
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)
same. i also use daisyui with tailwind too. iirc, its a plugin for tailwind that provides extra components
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.
But other than that... kiss is always the method to follow.
Also might be worth a try to watch some design YouTubers, it's interesting to see their process, what they focus on, etc.
ChatGPT 4 can code tailwind very well especially if you start with a good template.
1. Margin: auto; max-width: 60em;
2. For all else use flexbox
Copy other peoples design.
Hire a designer?
Well, if I had the budget, I would. Shops like Fiverr might be the way to go, but it could easily go up to thousands of dollars if you don't like the design given, with only 1-3 revisions.
So you're willing to spend thousands of dollars on hosting infrastructure, and much more than that on the engineering, but not the website design?
I spend only $60/mo on one server. I do all the engineering myself.
buy a theme from bootstrap, is like 50 bucks
buy from themeforest.net and modify
My programmer art is very subpar =(