Simple Ways To Help Your Design Suck Less
11th of July, 2007
I often deal with people that have programming and website creation experience but lack any design experience or even common sense in design. Creating things visually pleasing comes naturally to me (I think), I also study the area at a tertiary level. Following some published theories as well as my own aesthetic sense there’s some simple things you can do to create better design.
Don’t Bold Headings
There are few common web fonts that look good big and bold. Use variation in size rather than weight to differentiate between heading levels. Also consider different kinds of variation - letter-spacing: 0.2em; text-transform: uppercase; works well for sub-level headings.
Mixing fonts is OK
As long as one is used for headings and the other for body type. Through my early education I was always told to never ever mix fonts within the same document. Today I’ve found mixing Georgia and Verdana always looks great when using one for headings and the other for body text. More commonly I will use Georgia for headings and Verdana for the body but the reverse also looks good.
It’s fine to use a special type embedded in a header image with another two (usually Verdana and Georgia) below, despite what your primary school teachers told you.
Fonts to use
Personally I think there’s only three fonts that look good on the web - Verdana, Georgia and Lucida Grande. All look good on their own, Verdana and Georgia look good together. Lucida Grande doesn’t look as good mixed with the other two. Stick to these three and it’s hard to go wrong. Never use Trebuchet or Century Gothic, they’re ugly.
Leading
Browser default line heights suck. Always specify a line height and it should always be at least 1.5 times the text size. Personally I prefer even more leading. You can’t go wrong if you specify line-height: 1.5em in your CSS, that will always be 1.5 times your chosen font size.
The more leading, as long as it’s not ridiculous, the more easy on-screen type is to read. It’s also more aesthetically pleasing. Remember to increase margins with line height so that paragraphs (and other elements) are proportionately spaced out.
Few Alignment Points
Untabbed code is a sin. Too many alignment points on a website are unnecessary and confusing. This is something I see over and over again on poorly designed websites. You do not need to indent body text below headings. The size variation between headings and body, as well as margins around headings are enough. Indenting should be used sparingly for elements we are used to seeing indented - blockquotes and lists are good examples.
If it’s a two column website, aim for two alignment points, the left side of the content and the left side of the sidebar. This isn’t including exceptions such as blockquotes and lists that may not always be part of the content. Every left aligned element should be lined up with these points - header type, the left side of vertical menus, second level headings, paragraphs, everything.
Again, it makes sense for things like nested lists to be indented.
Try Subtle Variations
Italicising or converting to uppercase with a little letter spacing make for nice highlights. As do backgrounds on inline text. At university they try to tell me to never use italics on screen, they don’t know what they’re talking about.
Use Similar Styling For Similar Elements
If you’re using uppercase Verdana for level three headings in your content, transfer it over to level three headings in your sidebar at a smaller size. If you’re italicising meta information on blog posts, also italicise meta information on comments. It creates a subtle learning pattern for users.
As with all other tips in this post, the aim is to make users realise what an element is without having to read. If they know meta information is italic, seeing more italic will trigger the “this is meta information” switch.
Padding
Use a lot of padding. It allows users to digest one chunk of information at a time. It improves readability and it’s generally less ugly. It’s more difficult to create good compact design than it is to create good spread out design. Ask anyone that’s had to stuff 100 products into an 8 page DL catalog.
Vertical Space, Grouping
Group headings with the text they represent. It’s easiest to represent this with a small diagram:
There should be much more vertical space between the end of a previous topic and the next heading than there is between a heading and the text it represents.
Colour Palettes
Monochromatic colour palettes are the easiest to get right. They can be easily chosen mathematically with RGB values. Choose a colour you like, say rgb(251, 160, 206). Then consistently minus or add a value from each colour value to create other colours for the palette.
With rgb(251, 160, 206) I might subtract 60 so my other two colours would be rgb(191, 100, 146) and rgb(131, 40, 86). Of course you can then convert them to hex values if you prefer, everyone seems to forget CSS supports values provided in RGB format.
It’s also difficult to go wrong picking or making palettes with a service like Adobe’s Kuler.
Links
Use a link colour that completely contrasts the other colours used in the design so that links can easily be picked out. Even when using a monochromatic colour scheme a contrasting link colour works well. Underlining looks bad, if you’re using a good amount of leading you’ll be able to safely use bottom-borders instead which both look better and are more functional.
Assigning different colours to bottom borders and link text colours looks great.
Further Reading
Dan Cederholm’s Interface Design Juggling is invaluable. You’ll find a couple of the tips mentioned here as well as a bunch more in his very visual presentation. Although it takes things to a more advanced level.
I hope this helps some non-designers create better looking websites.
Brilliant. Not that I need it, but should be a learning tool for those who do.
Made by Joey Brooks who has a website — http://milkcartondesigns.com
Many thanks jim, yet more design tips for me to digest & hopefully regurgitate it into a beautiful design for one of my websites!
Made by Caius Durling who has a website — http://caius.name/
Yup, nice tips. But wouldn’t it have been easier to just write: “Simple Ways To Help Your Design Suck Less: Hire Jim Whimpey”? :P
Two things I want to mention however: (1) I don’t think neither Trebuchet or Century Gothic are ugly and (2) how about mentioning the non-use of Comic Sans?
Made by rotaris
Very nicely done! I’ll definitely take into account the “similar styling for similar elements,” since I’ve somehow forgotten to do that.
Made by Ranjani who has a website — http://www.biscuitrat.trap17.com
Nice article. Definitely going to take this into consideration when I’ll design my new website.
Made by DeathAxe who has a website — http://justincomparable.com
Good writeup. Real helpful for new designers, and a good refresher for the more experienced. My personal favorite font is Lucida, and you’re completely right on stressing line height. I styled up my blog and thought everything looked good, except something was wrong with the text. A friend suggested line-height, and that really fixed it. I use that trick now, and it changes a decent design to a great design.
Made by Dustin Bachrach who has a website — http://dbachrach.com/blog
Speaking of comic sans…
I’m a tech type who likes to do web stuff but needs help with design, so thanks for the article.
Ok. I have a client who has an established design, logo, look and feel, whatever. The client is the very happy and whimsical type and she chose comic sans on her stuff to reflect this. So I’m tasked with incorporating this into the site (she wants the header and the navigational sidebar to be in comic sans). Ok, so that’s what she wants, so that’s what I’m doing (I showed her alternatives, but she was set on comic sans). So, what I’d like a little advice about is choosing which font to use for body text - or how to mesh the two so they don’t clash so much. Any thoughts or advice? Thanks!
Made by Sean
how can you say there are only three fonts that look good and go out and say that ’such and such’ a font looks ugly? well that’s all a bit subjective isn’t it?
it seems closed minded not to realise that good design is not about choosing the most readable and fashionable font and is about using the write elements in the right CONTEXT.
telling people what good design is and isn’t in the form of some kind of nauseating “how to” list is completely counter-productive and only serves to encourage cliche work that is the same as everything else.
Made by patrick
by write i mean right obviously.
some advice for those who have commented on this article: forget what you know about design and do something you like. if everyone was to take this advice then the web would be a pretty boring place!
Made by patrick
i’m with patrick. forget this garbage.
get a design degree if you want to learn theory. you can’t learn it from a ‘top 10 tips’ list. junk like this only hurts design in general.
‘don’t use bold’ … ‘century gothic is ugly’ … ‘use lots of padding’ … Filth!
anyone seen dead poet’s society? it’s time to rip this book of rules up.
Made by scott
I think there’s plenty of value in this article as a reminder of good standards to either follow or consciously deviate from for effect. The leading and line-spacing in particular are excellent points that more designers should take on board.
Made by Brian who has a website — http://www.thecookblog.com
Now I have to agree with Patrick and Scott. Design is much more subjective than what this post mentions. Bold headings are sometimes good, and which font to use depends on the occasion.
I’ve found several color palette generators out there that help a lot. Then again, I’m nowhere near a professional designer to comment on my choices.
Made by Yian who has a website — http://www.arbitraryian.com/
Trebuchet is ugly? Only use three fonts? Interesting advice. I agree that increasing padding and line height help, but I also agree with some of the other people who have commented with regard to consciously choosing to ignore the rules.
BTW - the CSS property line-height does not need units e.g. px or em.
Made by Scott who has a website — http://adjustafresh.com/blog
Nice article and some good points. I just forwarded on to other members of my design department. The use of two fonts hit home. Whenever I’ve tried this I’ve been shot down. Nice to know others feel differently.
Made by Paul Was who has a website — http://bigtechnical.com
You hit on a lot of web design conventions but…
I definitely don’t agree with you about Trebuchet. Looks great when used as big headings.
Made by bill
I agree with most of the article–and disagree 100% with the comments stating that we should pay no attention to basic rules of layout, because that makes everything boring.
I keep thinking of the early web era, when red backgrounds and black print reigned, with animated whoziwhatsis, little space between words and six different serif fonts that were impossible to read… and different link colors for every link. (I’ve redesigned clients’ sites that had all these problems and more, and they thought the sites looked cool and different, not illegible and unprofessional.)
It’s the same as learning grammar. If you understand sentence structure and the difference between “your” and “you’re,” and you’re purposefully breaking the rules for an effect your audience will understand, that’s miles away from saying, “Psh. I dont Need nO gram-ar becuz itz BORRRRING!” Study the guidelines, understand why people advise them, try them out a few times, and then break them if they’re too inflexible for your work.
Made by Jody
I agree with a lot, but definitely not the bit about Trebuchet. Century Gothic is a bit too round for me, but so is Verdana…
Made by Stephy
Jody, that’s a brilliant analogy! Thanks.
Made by Jim who has a website — http://jimwhimpey.com
Guidelines are one thing, personal preference is another, I for one think the sidebar of this very page looks ugly, and I’m sure you like it, who’s right? both! :D
Also, I wasn’t aware that Century Gothic was a web safe font, is it really? I don’t see any sites using it…
Made by Javier who has a website — http://www.jodriozola.com/blog
I think a good understanding of typography helps a lot and can really make a page shine. I also think that some layouts just suck and that you have to think about the target market of your website and take that into account.
Made by local lover gordon who has a website — http://www.buythatlocally.com
I’ll have to agree with many comments posted here. This is not a great contribution to the web but is just one perspective about design. I’m guessing you are young and still learning. Many of the things you rally against can be used to striking effect or can be misused.
For example you’ve wasted nearly all the page with an over sized; and to me, unattractive; banner. Hardly a good use of available screen resources.
For the person with the Comic Sans client, you might correctly point out, that font is simply not available on many computers so the client isn’t going to get much out of that except a site which looks wrong on many people’s browsers.
Made by Rod who has a website — http://www.rodsdot.com/
Some good tips. I particularly like the leading, padding and vertical space blurbs. And Verdana and Georgia are great for the web because they were designed for screen reading, not print such as Arial.
Designers I’ve worked with often fall in love with their designs and forget that real people need to use the designs. Designing for the web is as much about design things in a usable manner as it is design things to be unusual and aesthetically pleasing.
Made by Ryan who has a website — http://www.ryanroberts.us
I see all the commentors who didnt like the advice either have no website in their profile, OR their site looks like its built by frontpage.
Maybe hes onto something guys!
Made by Ben
Learn the rules.
Then break them. Break all of them. The best designs in the world break every rule. They do it flagrantly and with abandon. They do it with a style that makes others weep and they do it with out a care in the world. Rules are good… they get beginners going and get a base level of quality.
But we want to be better than a base level don’t we? Study, then tear it up like you have never done before.
Simple.
Nice starting point. Not a bible.
Made by Michael
Hmm, I really like several of these ideas. I’ve been needing to fix my layout but haven’t been able to come up with anything I liked. Thanks for the ideas!
Made by Shelby who has a website — http://dielikedisco.net
I think you have some good tips, but I have to disagree with your mixing font statements.
Personally I don’t like your mixture of the Georgia/Verdana.
Made by Bob who has a website — http://blog.alltheinfo.org
Instead of Kuler better use colourlovers.com, which is the original. (Kuler is a baaaaad Adobe ripoff).
Made by Nikita who has a website — http://raquo.org
I love line-height:1.3; I hate verdana.
Made by Yahia who has a website — http://yahia.ma/antiblog/
Very good tips…
I agree so much about your simply yet very effective typography tips. Agree with your three fonts of choice, would simply it to even the top two: Verdana and Georgia.
Any graphic/ web designer who has to create websites need to read this and follow it…
(white) space also makes a nice design into a beautiful design.
Made by Jermayn Parker who has a website — http://germworks.net
One question about using border-bottoms with links… I hate the way it looks with images that are linked. Any tips on getting around that so that the border-bottom isn’t applied to the image?
Thanks!
Made by engtech @ internet duct tape who has a website — http://InternetDuctTape.com
Good Text! but… Trebuchet is great!! ;)
Made by Dom
Since my sites use Georgia and Verdana, I happen to agree totally with the recommendation of them as great fonts. I think your blog looks great, and the list of tips should produce an equally clean-looking page where the star of the show is the content.
Made by Genevieve Netz who has a website — http://prairiebluestem.blogspot.com/
“You do not need to indent body text below headings”
Completely agree with you on this.
Nice article BTW.
Made by Sudar who has a website — http://sudarmuthu.com/blog/
Google article… I will refer to this when I sit again for CSS modification for my blog.
Made by Jalaj P. Jha who has a website — http://jalaj.net/
Just wanted to say, “Thanks.” I read this when you first wrote it, and when doing a redesign, I remembered it and revisited. Even better than the first time through.
Made by Brian
The three second lag on the title was a poor first impression given the bold statement in the title. The tiny font and grey on black is so hard to read and difficult to scan. So guess what? I’m busy! I didn’t read your content! You might have keys of the kingdom in there. I’ll never know! Haven’t you heard of paper? Or headings? Screensavers are eye-candy. And er… what’s the random editbox below the trailer for? Communication is your responsibility! You lose! Your site sucks more than most! Bye!
Made by l0stb0y who has a website — http://None
How about don’t use light gray text on a dark gray background, it’s not that easy to read.
Made by Ramon
Great article. But a lot of designers seem to forget that Lucida Grande is only available on Mac OS X. And on Windows, Lucida Sans Unicode is ugly.
Made by Ced who has a website — http://64k.be
The title and subheading of this page visually annoying but I read the article anyway. I dont like Georgia and Verdana in the ordinary heading/body scenario. I do use Verdana alot. I tend towards verdana, arial, and tahoma for alot of stuff. I seem to pick BankGothic for alot of header graphics but I think that has to do with the context of the content more than it looking better of worse. I have a coworker who also designs on my website and she uses comic sans and italics and timesRoman and its almost an embarassment to be associated with it sometimes. The funny thing is she was a full time “web designer” and I was just an SEO shark.
Made by nunya
I hate the fact that there is no indentation on anything in this page.
Made by I Do Not
thanks for the GREAT post! Very useful…
Made by Whatever-ishere who has a website — http://www.whateverishere.com