Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
Perhaps you’re a bit of a design newbie, but you just want to make things look reasonable (and probably not exactly like a given template or framework that everyone else is using). Maybe you’re trying to understand the myriad factors behind great design, but for now, you just need to get something done.
Follow these few tips and you should be well on your way to having something that looks halfway-decent, and you’ll be simplifying enough that you are actually learning as you go, instead of flailing about in a sea of endless possibilities.
Let's get down to business..
#1 Don't Use Gimmicky Fonts
There are thousands of fonts out there. It is a fact that most of them are terrible. There are tons of great ones out there, but there are way more terrible ones.
Definitely avoid any font that has a "gimmick" to it: it's made to look handwritten, it's a script, it's made to look like swiss cheese. Not every gimmicky font is truly a no-go, but if you're a beginning designer, don't complicate matters by increasing the odds that you'll make the wrong font choice.
#2 Keep Your Font Choices Simple
Since there are so many bad typefaces out there, don’t complicate matters by risking picking the wrong ones. Stick to a few simple examples, and concentrate on learning how to recognize which typefaces are good for smaller sizes on-screen, which typefaces are good for larger sizes (or for print), and what moods typefaces convey. If you want a quick cheat sheet, try the “all of the fonts you’ll ever need” part of my Design for Hackers course.
#3 Never More Than Fifteen Words on a Line
The wide screens that you can use on the web, and the responsive design trend, have colluded so that many people make their blocks of body text way too wide. Never let your blocks of body text allow more than twelve–fifteen words per line, and never let them be shorter than about eight words per line.
#4 Use Only One Font
Yes, I’m really saying this. Yes, you can definitely make a great design, and even enrich a design, by using more than one typeface; but, if you’re just learning about design, don’t let yourself get distracted. You’ll learn much, much more about how to create good design if you just pick one good typeface that is right for your projects, and instead worry about size changes, alignment, and white space (more on this during tip #9).
#5 Use a Varied Scale to Pick Font Sizes
With digital typography, we have the unfortunate luxury of being able to make type whatever size we want. I say “unfortunate” because for most people this is a detriment as it complicates things. Do yourself a favor, and only use these target pixel sizes: 5, 7, 9, 12, 16, 21, 28, 37, 50, 67, 83. These sizes are based off of the proportion of 3:4, and you can read more on the technical details of arriving at these sizes in How to Establish a Modular Typographic Scale.
If one of these sizes isn’t quite achieving the effect you want, there are tons of other things you can do: use bold or italics, use all-caps (for titling and metadata), or use a different color. Stick with these sizes, and worry about something else.
#6 Never Justify Type
Justified type aligns a body of text to both the left and the right edges, spreading the words across the available space. Good-looking justified type can be achieved in print with quality desktop publishing software, if you really know your typography. On the web, it’s impossible to do right. Blocks of type need to have an even texture, and justifying them just makes unsightly gaps that interrupt the flow of reading. Don’t sacrifice your content for the false satisfaction of having a crisp edge on your blocks of type.
#7 Keep Ornamentation, Textures, and Effects to a Minimum
Challenge yourself to avoid ornamentation (rule lines, blocks of text, gradients, and textures) as much as possible. Simplify and worry about all of the other details (like those in #9), then maybe start adding a couple of things in, where needed.
#8 Pick One Color
Take a look at the most powerful brands that you usually engage with. Maybe it’s Google, Yelp, Duolingo, and Twitter, for example. Each of those brings to mind its own color, and that color dominates each of their products. Pick one color that is really appropriate for your design, then make everything else shades and tints of that color – or shades of gray. But, more than anything, simplify. Once again, concentrate on #9 first.
#9 Focus More on the "Invisible" Rather Than the "Visible"
All of the above is meant to help you simplify your decisions so that you can concentrate on the “invisible” things in design. We are cognitive misers, and are easily distracted by shiny things such as fonts and colors, when the things that really matter in making a design look clean and cohesive: the sizing of elements, the way that they align and relate to each other, and the amount of white space between them – are invisible to us.
These invisible forces are so powerful, that I developed an entire course about them, available via your email inbox.
Design is an endlessly complex discipline, and all of these rules can be broken by a very skilled designer. You may even try breaking them yourself after you get comfortable within this framework; but until then, follow these rules and you’ll be well on your way to being not only halfway-decent, but fully-decent!