Someone in the Hack Club Slack recently asked me for advice on learning web design.
Here's what I said (edited).
The #1 thing, beyond any articles, is practice. I’ve made literally thousands of webpages, basically all from scratch. You just need to design a lot of things, & coding everything yourself, regardless of how it looks in the beginning, will be immensely more useful than using a template to pump out products that look better but you didn’t write all the code for. CSS is incredibly complicated, & the only real way to learn it is just using it long-term.
Try adding some constraints. I did a lot of these exercises & they genuinely helped me. Design a website with one font in one font weight—you’ll need to flex your white space & hierarchy muscles to make it communicate well. Design a website with just black & white, you’ll need a super clear hierarchy to draw attention. etc
I also would recommend staying away from designing in Figma/Sketch/Photoshop first. There, you’re designing a simulation of a webpage, & I think it’s totally different.1 Plus, once you’ve finished a mockup in Figma, you still haven’t shipped a real product—again, it’s a simulation—& you learn nothing about the code side. Design in the browser, with real code (CodePen & Glitch are great tools for this), & you’ll end up shipping real sites you can put in your portfolio, learn more, & I think make better results. There’s great uses for tools like Figma, like designing logos/assets/more complicated mockups, but for learning web design, write the code.
CSS frameworks/UI kits like Bulma & Bootstrap are totally valid for quickly building an app UI, but if you’re trying to learn web design, I suggest learning from them but not using them—since they make pre-packaged components, it’s easy to rely on them. Instead, make your own cards & buttons, & find out what you need to do that.
Two frameworks that I do suggest checking out/using are Tachyons & Basscss. They both have a very similar idea—one class, like
.bold, should do one thing, like make text bold. Combine
.h1 & you’ve got big, red, bold text. They empower you to iterate quickly on design, while leaving the specific design choices up to you.
I learned a ton from David Kadavy’s (now a bit old) Design for Hackers, which is about super-applicable design principles. He used to do a summer email course called “Summer of Design” that was great.
I highly suggest keeping tabs on some blogs like CSS-Tricks, too—you’ll learn small things you can do with CSS on a regular basis that you can add to your sites.
Read the spec. You’ll find out about a ton of tags, CSS properties, & uses for them you didn’t know existed.
@jxnblk is a personal hero in the world of web design for me. Two of his articles on typography really shifted how I think about it:
Basically all of Adam Morse's blog is a must-read, especially his early articles about CSS. (He built the Tachyons framework.)