9 Web Design Tips You don't want to Forget

1. Precedence (The Art of Controlling the Eye)

Good Web design, perhaps even more than other type of design, is all about information. One of the main 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. I call this precedence, and it’s about how much visual weight different parts of your design have.

A simple example of precedence is that in most sites, the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left). This is a good thing since you probably want a user to immediately know what site it is they are viewing.

But precedence should go much further. 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, the Web designer, to figure out.

To achieve what I call precedence you have many tools at your disposal:

1.       Position — where something is on a page clearly influences in what order the user sees it.

2.       Color — using bold and subtle colors is a simple way to tell your user where to look.

3.       Contrast — being different makes things stand out, while being the same makes them secondary.

4.       Size — big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)

5.       Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?

2. Spacing

When I first started designing, I wanted to fill every available space up with stuff. I thought empty space seemed wasteful. However, I found 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. So you need to find a happy medium between the two. You can control line spacing in CSS with the ‘line-height’ selector. Generally I find the default value is usually too little spacing for my tastes. Line Spacing is technically called leading, which derives from the process that printers used to use to separate lines of text in the old days — by placing bars of lead between the lines.

Padding: 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. There are exceptions of course, in particular if the text is some sort of heading/grapic. But 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 architect site, you’ll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars, they tend to have a lot of empty space used as an element of design.

3. Navigation

One of the most frustrating experiences you can have on any Website 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, however, there is always one that proves me wrong.  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 common sense, it’s also important to make navigation usable. For example, if you have a rollover sub-menu, ensuring a person can get to the sub-menu items without losing the rollover is important. Similarly changing the color or image on rollover is excellent feedback for a user.

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.

4. Design to Build

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 things like:

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 scrollng for the majority of internet users. It’s important to know what can and can’t be done, which is why I believe all Web designers should also build sites, at least sometimes.

What happens when a screen is resizes?

Do you need repeating backgrounds? How will they work? Is the design centered or left-aligned?

Are you doing anything that is technically difficult?

Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided entirely.

Could small changes in your design greatly simplify how you build it?

Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular, when elements of a design cross over each other, it adds a little complexity to the build. So if your design has, say four elements and each element is completely separate from each other, it would be really easy to build. On the other hand if all four overlap each other, it might still be easy, but will probably be a bit more complicated. You should find a balance between what looks good and small changes that can simplify your build.

For large sites, particularly, can you simplify things?

There was a time when I used to make image buttons for my sites. So if there was a download button, for example, I would make a little download image. In the last year or so, I’ve switched to using CSS to make my buttons and have never looked back. Sure, it means my buttons don’t always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge.

5. Typography

Text is the most common element of design, so it’s not surprising that a lot of thought has gone into it. 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).

Color: One of my worst habits is making low-contrast text. It looks good but doesn’t read so well, unfortunately.

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.

SkyTip Media is a creative design group that specializes in Video Marketing, Website Design, Search Engine Optimization, Graphic Design, and Social Media Marketing. Our Goal is to help you fully utilize the power of your market for traditional and non-traditional marketing techniques that work. For additional information regarding the various services we offer please refer to our website http://skytipmedia.com/#/services/