Recently, I was asked what is the main principle in my design work. After some thought, I compiled a list of 9 elements that I think are important in any design, web or otherwise. Just remember, rules are made to be broken, different types of design work differently, and I don’t always follow my own advice, so please read these as they are intended–just some observations I am sharing…
Good Web design is about information. One of the biggest tools in your arsenal to do this is precedence. When navigating a good design, the user should be led around the screen by the designer. It’s about how much visual weight different parts of your design have.
You should direct the user’s eyes through a sequence of steps. For example, you might want your user to go from logo/brand to a primary positioning statement, next to a punchy image (to give the site personality), then to the main body text, with navigation and a sidebar taking a secondary position in the sequence.
What your user should be looking at is up to you.
To achieve precedence, you have many tools at your disposal:
- Position — Where something is on a page clearly influences in what order the user sees it.
- Color — Using bold and subtle colors is a simple way to tell your user where to look.
- Contrast — Being different makes things stand out, while being the same makes them secondary.
- Size — Big takes precedence over little.
- Design Elements — If there is a gigantic arrow pointing at something, guess where the user will look?
When I first started designing I wanted to fill every available space up with stuff. Empty space seemed wasteful. In fact the opposite is true.
Spacing makes things clearer. In Web design there are three aspects of space that you should be considering:
- Line Spacing
When you lay text out, the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. Find a happy medium. You can control line spacing in CSS with the ‘line-height’ selector. Line Spacing is technically called leading (pronounced ledding), which derives from the process that printers used to use to separate lines of text in ye olde days — by placing bars of lead between the lines.
Generally speaking text should never touch other elements. Images, for example, should not be touching text, neither should borders or tables.
Padding is the space between elements and text. The simple rule here is that you should always have space there. As a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant.
- White Space
First of all, white space doesn’t need to be white. The term simply refers to empty space on a page (or negative space as it’s sometimes called). White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive web site, you’ll almost always see a lot of space. If you want to learn to use white space effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty space used as an element of design.
One of the most frustrating experiences you can have on a Web site is being unable to figure out where to go or where you are. I’d like to think that for most Web designers, navigation is a concept we’ve managed to master, but I still find some pretty bad examples out there. There are two aspects of navigation to keep in mind:
Navigation — Where can you go?
There are a few commonsense rules to remember here. Buttons to travel around a site should be easy to find – towards the top of the page and easy to identify. They should look like navigation buttons and be well described. The text of a button should be pretty clear as to where it’s taking you. Aside from the commonsense, it’s also important to make navigation usable.
Orientation — Where are you now?
There are lots of ways you can orient a user so there is no excuse not to. In small sites, it might be just a matter of a big heading or a ‘down’ version of the appropriate button in your menu. In a larger site, you might make use of bread crumb trails, sub-headings and a site map for the truly lost.
Life has gotten a lot easier since Web designers transitioned to CSS layouts, but even now it’s still important to think about how you are going to build a site when you’re still in Photoshop. Consider:
- Can it actually be done?
You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in a horizontal scroller for the majority of users. It’s important to know what can and can’t be done.
Text is the most common element of design, so it’s not surprising that a lot of thought has gone into it. The best site I have found for a wide range of fonts is Dafont. It’s important to consider things like:
- Font Choices — Different types of fonts say different things about a design. Some look modern, some look retro. Make sure you are using the right tool for the job.
- Font sizes —Years ago it was trendy to have really small text. Happily, these days people have started to realize that text is meant to be read, not just looked at. Make sure your text sizes are consistent, large enough to be read, and proportioned so that headings and sub-headings stand out appropriately.
- Spacing — As discussed above, spacing between lines and away from other objects is important to consider. You should also be thinking about spacing between letters, though on the Web this is of less importance, as you don’t have that much control.
- Line Length — There is no hard and fast rule, but generally your lines of text shouldn’t be too long. The longer they are, the harder they are to read. Small columns of text work much better (think about how a newspaper lays out text).
- Paragraphing — Before I started designing, I loved to justify the text in everything. It made for nice edges on either side of my paragraphs. Unfortunately, justified text tends to create weird gaps between words where they have been auto-spaced. This isn’t nice for your eye when reading, so stick to left-aligned unless you happen to have a magic body of text that happens to space out perfectly.
Web design ain’t just about pretty pictures. With so much information and interaction to be effected on a Web site, it’s important that you, the designer, provide for it all. That means making your Web site design usable.
We’ve already discussed some aspects of usability – navigation, precedence, and text. Here are three more important ones:
- Adhering to Standards
There are certain things people expect, and not giving them causes confusion. For example, if text has an underline, you expect it to be a link. Doing otherwise is not good usability practice. Sure, you can break some conventions, but most of your Web site should do exactly what people expect it to do!
- What users will actually do
Prototyping is a common tool used in design to actually ‘try’ out a design. This is done because often when you actually use a design, you notice little things that make a big difference.
- Think about user tasks
When a user comes to your site, what are they actually trying to do? List out the different types of tasks people might do on a site, how they will achieve them, and how easy you want to make it for them. This might mean having really common tasks on your homepage or it might mean ensuring something like having a search box easily accessible. At the end of the day, your Web design is a tool for people to use, and people don’t like using annoying tools!
Keeping things lined up is as important in Web design as it is in print design. That’s not to say that everything should be in a straight line, but rather that you should go through and try to keep things consistently placed on a page. Aligning makes your design more ordered and digestible, as well as making it seem more polished.
Keeping your design crisp and sharp is super important in Web design. And when it comes to clarity, it’s all about the pixels.
In your CSS, everything will be pixel perfect so there’s nothing to worry about, but in Photoshop it is not so. To achieve a sharp design you have to:
- Keep shape edges snapped to pixels. This might involve manually cleaning up shapes, lines, and boxes if you’re creating them in Photoshop.
- Make sure any text is created using the appropriate anti-aliasing setting. I use ‘Sharp’ a lot.
- Ensuring that contrast is high so that borders are clearly defined.
- Over-emphasizing borders just slightly to exaggerate the contrast.
Consistency means making everything match. Heading sizes, font choices, coloring, button styles, spacing, design elements, illustration styles, photo choices, etc. Everything should be themed to make your design coherent between pages and on the same page.
Keeping your design consistent is about being professional. Inconsistencies in a design are like spelling mistakes in an essay. They just lower the perception of quality. Whatever your design looks like, keeping it consistent will always bring it up a notch. Even if it’s a bad design, at least make it a consistent, bad design.
I hope this overview of design elements helps you with your design and ultimately, makes the web a more beautiful place to visit.