Basic, practical web design guides and tutorials
March 2, 2021 7:51 AM Subscribe
Please recommend basic guides for making a website look good, so I can make my hobby sites look less terrible - ideally something like, "do these five steps to make your site look better than plain Bootstrap."
I build a lot of hobby sites, and I do not have strong design skills.
I would like my sites to look better.
The obvious answer would be to use pre-built themes, but often I have trouble finding a theme that's a good fit. Also, although most of my sites are in Drupal, my latest project uses Django, and I don't see a lot of pre-built themes for Django.
I would love something that lays out a handful of steps I can take to make my sites look better, like
* first, add x amount of padding to the body tag
* next, create header, content, and footer divs, and add x amount of padding to those
* decide how many major areas you have on your page and put x space between them
* make your headings x times as big as your regular text
I am comfortable editing CSS and HTML and building template files for Drupal and Django.
I am not looking for a months-long design course. A two or four hour course covering actionable basics would be great.
I am NOT attempting to become a brilliant designer in half an hour; I have tremendous respect for actual design professionals, and I know they bring extensive thought and study to what they do.
This is more like a person who cooks for themself wanting to know a few plating and presentation tips so my meals don't just look like they were dumped onto the plate.
Thank you for any recommendations you can offer!
I build a lot of hobby sites, and I do not have strong design skills.
I would like my sites to look better.
The obvious answer would be to use pre-built themes, but often I have trouble finding a theme that's a good fit. Also, although most of my sites are in Drupal, my latest project uses Django, and I don't see a lot of pre-built themes for Django.
I would love something that lays out a handful of steps I can take to make my sites look better, like
* first, add x amount of padding to the body tag
* next, create header, content, and footer divs, and add x amount of padding to those
* decide how many major areas you have on your page and put x space between them
* make your headings x times as big as your regular text
I am comfortable editing CSS and HTML and building template files for Drupal and Django.
I am not looking for a months-long design course. A two or four hour course covering actionable basics would be great.
I am NOT attempting to become a brilliant designer in half an hour; I have tremendous respect for actual design professionals, and I know they bring extensive thought and study to what they do.
This is more like a person who cooks for themself wanting to know a few plating and presentation tips so my meals don't just look like they were dumped onto the plate.
Thank you for any recommendations you can offer!
Best answer: One easy change to try is to use a Bootstrap color palette generator, which will at least get you away from the Bootstrap defaults, which I find to be a bit reminiscent of Windows XP.
posted by jedicus at 8:47 AM on March 2, 2021 [1 favorite]
posted by jedicus at 8:47 AM on March 2, 2021 [1 favorite]
Best answer: I’m not sure how app-like your sites are, but Refactoring UI is an amazing resource for this kind of practical “how to make it look better” strategy. The authors have released a ton of free info in blog posts and on Twitter if you’re not interested in the book itself.
posted by Ryon at 9:05 AM on March 2, 2021 [2 favorites]
posted by Ryon at 9:05 AM on March 2, 2021 [2 favorites]
Best answer: Can you use django-bootstrap-themes along with Bootswatch themes?
posted by RobotVoodooPower at 9:57 AM on March 2, 2021
posted by RobotVoodooPower at 9:57 AM on March 2, 2021
I am an old school hand-coder. I don't even know what Bootstrap, Drupal, or Django are; I assume relatives of WordPress. I have found this site very helpful to advance my skills at my own pace - https://www.w3schools.com
posted by Grok Lobster at 10:03 AM on March 2, 2021 [1 favorite]
posted by Grok Lobster at 10:03 AM on March 2, 2021 [1 favorite]
Response by poster: These are great answers so far - thank you all!
Just to clarify: I am especially looking for help with the design aspect - knowing what, specifically, will make something look better (more white space, better fonts, whatever), with specific info on how to implement them. So - it's a fine line, I know - I'm more interested in "we add padding here because it helps the eye focus on what's important" or "this ratio of header font size to body copy font size works well and here's why", and less "here's how to increase font size". I'm pretty well covered for the bare mechanics of CSS; I am really hoping to learn what will make the sites look better.
Again, thanks for these - looking forward to further suggestions!
posted by kristi at 10:50 AM on March 2, 2021
Just to clarify: I am especially looking for help with the design aspect - knowing what, specifically, will make something look better (more white space, better fonts, whatever), with specific info on how to implement them. So - it's a fine line, I know - I'm more interested in "we add padding here because it helps the eye focus on what's important" or "this ratio of header font size to body copy font size works well and here's why", and less "here's how to increase font size". I'm pretty well covered for the bare mechanics of CSS; I am really hoping to learn what will make the sites look better.
Again, thanks for these - looking forward to further suggestions!
posted by kristi at 10:50 AM on March 2, 2021
Best answer: In web design in particular, starting with a typographic scale often does the most to inform all the rest of the design work. It defines your visual hierarchy, which is what makes a page easy to scan and read, and also gives you a unit to build padding and margins around to establish vertical rhythm and make everything feel cohesive.
Past that, I'd consider just taking an introductory graphic design course that covers things like composition and whitespace, color theory, etc. This article gives a pretty decent overview of the basics. That will help establish some guidelines of "how do I decide what fonts to use" and "what colors do I pick for these things," because hard-and-fast rules about what type size to pick or what padding to put where are really hard to come by.
posted by fifthpocket at 11:48 AM on March 2, 2021 [1 favorite]
Past that, I'd consider just taking an introductory graphic design course that covers things like composition and whitespace, color theory, etc. This article gives a pretty decent overview of the basics. That will help establish some guidelines of "how do I decide what fonts to use" and "what colors do I pick for these things," because hard-and-fast rules about what type size to pick or what padding to put where are really hard to come by.
posted by fifthpocket at 11:48 AM on March 2, 2021 [1 favorite]
Best answer: How to Make Your Site Look Half-Decent in Half an Hour By Anna Powell-Smith is a few years old now (2013) so the particular choices may look a little dated the general framework still applies I think (it’s specifically about bootstrap).
posted by tomp at 1:58 PM on March 2, 2021
posted by tomp at 1:58 PM on March 2, 2021
Best answer: Hello Web Design seems like it has what you want. (Disclaimer: the author is a friend.)
posted by jacobian at 5:34 PM on March 2, 2021
posted by jacobian at 5:34 PM on March 2, 2021
Seconding the Refactoring UI recommendation. It's very good at explaining how to tell when you've got too much or not enough padding, etc and has some nice colour palettes along with how to choose colours, heading sizes, etc. The blog posts will be a good starting point, and if you find those useful it's worth buying the package.
posted by harriet vane at 3:26 AM on March 3, 2021
posted by harriet vane at 3:26 AM on March 3, 2021
Response by poster: These are all TERRIFIC.
Extra triple-best-answer points to you, tomp, for How to Make Your Site Look Half-Decent in Half an Hour, which seems like the precise answer to my question.
Thank you ALL!
posted by kristi at 6:18 PM on March 5, 2021 [1 favorite]
Extra triple-best-answer points to you, tomp, for How to Make Your Site Look Half-Decent in Half an Hour, which seems like the precise answer to my question.
Thank you ALL!
posted by kristi at 6:18 PM on March 5, 2021 [1 favorite]
This thread is closed to new comments.
posted by kevinbelt at 7:56 AM on March 2, 2021