Hello Reader,
Last week I talked about getting ideas for personal projects that you’ll have the motivation to actually finish (or maintain long term).
The issue that comes next is making sure the design looks half-decent.
One thing a lot of beginners think is, because they are making designs in the browser when writing CSS, that they should also be a designer.
When everything they make looks bad, they get demotivated.
Creating a design and making said design in the browser are two very different skill sets.
Now, if you’re hoping to create a site that wins an awwward or something like that you might be setting your sights too high, but even if you have no design skills at all, there are some simple tips that can help something look half-decent:
- Keep it simple
- White space is your friend
- Consistency is key
- Steal like an artist
Keeping it simple
One of the tell-tell signs that a developer didn’t work with a designer on a project is there is often a lot going on, often with way too many effects at play, too many colors being used, and sometimes a bunch of fonts that don’t work well together.
Everything you add to a design, whether it’s another font, color, or something else, adds complexity to your design.
A good designer has the training and experience to understand that complexity and make decisions that can create the harmony to pull it off.
When you don’t have that experience and training, it often just makes a muddled mess.
Some general rules of thumb:
- Start with no animations or fancy effects. That means no transitions, @keyframes, or use of GSAP at all. You can add some in later, but if you do, you have to be able to answer the question “what is this animation adding?”. If it’s just to “look cool” don’t add it.
- Pick one font family for the entire project. This might sound boring, but just going with
system-ui and using the different weights is more than enough. If you need another font, go for two max. There are designs out there that use four, five, even six fonts and look good, but that’s very hard to do (plus then you have more fonts to load). Pick a nice font, and stick with that one.
- Keep your colors very simple… as in, pick one color, plus white and black. If you need colors for things like state (success, warning, etc) add those in as well, but for the general theming, white, black, plus one color can go a very long way. Again, there are amazing sites that use tons of colors, but the more you use, the harder it is to use them correctly. Keep it simple and use one color.
White space is your friend
White space is the empty space on a page, which we use margin and padding to create.
A lot of non-designers are way too conservative when it comes to adding white space, and everything feels smooshed together.
One of the best bits of advice I ever heard for setting white space is to make it absurdly big. Start with a number that’s 10x bigger than you think will look good, and then slowly reduce it.
Don’t start with 2x bigger than you would have set, because that might still be too small.
Go comically large and slowly reduce it.
If you start small and slowly increase, you’ll settle on something that’s still too small.
If you go the other way around, you’re much more likely to end up at a size that works well, and will be bigger than you’d have initially gone with.
Consistency is key
If you follow my first tip and keep things very simple, it becomes much easier to be consistent with your design.
When you have more colors, fonts, and effects, it becomes hard to be consistent because there are so many things to keep track of.
A simple color pallet, with some basic font choices, makes consistency so much easier, and being consistent, while it can feel boring, is what makes a design user friendly.
It helps create clear hierarchy, because you have consistent font sizes and weights.
Having consistent spacing helps with this too.
Sometimes when working on a design, we feel like we need to do different things, so we throw a random italic over here, or a new color over there, to help set something apart, but if those things don’t appear anywhere else, it just creates a disjointed experience for the user.
Steal like an artist
Getting inspired by others is always a great way to learn.
Find 4-5 designs that you like, and pay attention to the things I’ve talked about, like their font choices, how they are using spacing, and other things like that.
If they have an interesting component, try and make yours look the same.
Often when we do this, the original looks great, and our own looks terrible, even though you copied theirs… figure out why!
Maybe it’s the use of colors in the text, a subtle gradient, or it’s their use of spacing, their font size choices… figure out what they did differently and try to match theirs.
I’m not advocating for cloning someone else’s product, that’s not creating a personal project, that’s just making a clone (and you can learn a lot by doing that as well), but I do think you can learn a ton, and make much better looking sites, if you take heavy influence from other things that already look good.
This is how people learn design in the first place, and most designers do a round of research, looking at other designs to get inspired from before they start designing themselves. There is no shame in it at all 🙂.
🙋♂️ What I’ve been up to this week
The biggest news this week was that I launched channel memberships on my channel, and I want to say a huge thank you to everyone whose already signed up, as well as my new patrons as well!
Again, without the support of my Patrons over the years, I wouldn’t have an editor or a lot of my equipment, so thank you to everyone who’s supported me at one point or another over the years, and those who have recently signed up to do so.
A simple fix to an annoying z-index issue
If you’ve ever animated the scale of an element and had to change the z-index as well to ensure that it’s in front of the other content around it, you might have noticed an annoying glitch when it scales back down, so I look at how you can easily fix that in this video.
Responsive Layouts Workshop
On Friday, I did a free Responsive Layouts Workshop live on Youtube.
It’s a long one, but I think well worth it for anything who struggles with creating responsive layotus.
I covered working with, and not against the browser, the concept of intrinsic design, when to use media or container queries, doing a lot with flexbox and grid while keeping it very simple, and more.
🔗 Other awesome stuff around from the web
Speaking of designing stuff, Andy Bell is in the process of redesigning his site Piccalilli.
First, in case you don’t know of Piccalilli, it’s a fantastic CSS resource and you should definitely add it to your reading list!
But more on the topic at hand, he’s created a 3 part series of blog posts into the redesign, starting with a post exploring the first steps of the design process.
It’s a great read, as are the second and third posts in the series as well, and I highly recommend you check them out 🙂.
🏁 </newsletter>
As I mentioned off the top, design is it's own skill, and just like learning to be a developer takes a lot of work, learning to be a good designer does as well.
Just remember, it's easier to keep simple things looking good, so don't overdo it, and get a lot of inspiration from other things!
Have yourself a fantastic week,
Kevin
P.S. Another thing I’ve done this week was make a lot of progress in the final module of my course Beyond CSS.
The top tier for that course is over 20% off because it’s not finished yet.
I have a handful of videos left to record. Once they’re done and I get the lessons up in the course portal, the price will go up permanently.
If you have been thinking of getting that tier, a quick heads up that it’ll only be on sale for another 2-3 weeks.