8 tips for a pretty page

MLAW — Mon, 27 Jul 2009 18:00:00 +0000

The old adage, “Build it and they will come” is likely true for a reason, just like “Eighty percent of success is just showing up” can be, but when it comes to websites, neither of these holds true. In the early days of the internet, this may have been the case, but no longer. Millions of webpages exist now, so the real challenge is to make your site both a useful and an enjoyable experience. Here are several tips for achieving this goal:

Use high-quality images. Studies have shown the people like to look at good quality photographs or illustrations on a page. Unless your design sensibility is based on a “low rez” aesthetic, you are better off using the sharpest clearest image you can take, hire or purchase—and, the bigger the better. Just think HDTV. People love those 50″ HD televisions, and people love IMAX. But, you are dealing with variable screen sizes, so you must compromise and think about who your viewers might be. Will they be looking at your site on an iPhone or a netbook? If so, you might want to rethink this strategy. If they will likely be using a larger screen, you will still need to consider download time, so you will need to become familiar with image optimization techniques.
Generous White Space. One of the simplest things you can do on a website to make it more pleasing to the eye is to make sure your boxes have a generous amount of white space around the text blocks. This makes it easier for the eye to rest on a particular image or passage. The opposite of this scenario is when you see type running almost to the edge of its containers. This makes the whole page look “gray” and the eye has no place to rest. When I see pages like this I automatically know the creator has had no design training. As you can see from the example below, with such tight margins and no hierarchy, the eye has no place to land and so just gives up.
Typography.What is the point of paying attention to typography? The same principle applies here, too. Your goal is to make the content as easily digestible as possible. This can be achieved with type. If you have two words together—for example, READ THIS—you may decide to make one of them bold to create interest: READ THIS. Good typography helps guide the reader to the important places on your page, and makes the words and letters pleasing to the eye. Knowing the difference between a hyphen, an “en-dash” (width of an “n”) and an “em-dash” (width of an “m”) will help your type look correct. A brief explanation is that hyphens are used to hyphenate words, en-dashes are used when you are defining “from” something “to” something else, like 9 a.m.–5 p.m., and em-dashes are used to set off a phrase in a sentence (see READ THIS example above).Some other tips: always use curly quotes (rather than inch marks) for quoting, an ellipsis rather than 3 periods, and utilize capitalization and small caps for titling.
Hierarchy. All the points I am making in this list are designed to help you create a hierarchy of information on your page. Think about it. Your reader has to start somewhere, and is relying on you to let them know what is most important to read first. Newspapers do this really well. The story that the editor feels is the most newsworthy will have the largest type size and be placed highest on the page. Whether you choose to read it is up to you, but it grabs your eye first. Where will your eye wander next? Likely to a large photographic image, or a bright color or the headline that is the next size down. Also, Western readers have been trained from a young age to read from left to right, and from top to bottom. Work with what the eye does naturally, and put items in the eye’s path that you want to receive attention.
Pull Quotes and Blockquotes. Two under-utilized tools available to draw attention to a line or paragraph of text are pull quotes and block quotes. Pull quotes are frequently used by magazine layout designers as a way of grabbing the reader’s attention quickly, as they only have a few seconds before people may close the magazine. If you can find a juicy phrase in your content and set it off in a box at a much larger size the chances of your page getting read go way up. Blockquotes serve a similar purpose but are more often used when quoting content from another source. If you don’t ever quote from other sources, you might come up with another use for your blockquote designation, and style it for the purposes of creating a small sidebar or a long pull quote.
Color. Color is an extremely powerful attention getter, and a page designer has to be careful not to go overboard. Certain colors, like bright red or green, are very effective in small doses, and off-putting if used over too broad an area. Think of it like house painting. What works in large areas on a house will likely do the same on a page. One of my own pet-peeves (but I’m sure there will be many people who disagree) is white text on a black page. There may be certain reasons why you would want to send a particular “rock-n-roll” message with this color scheme, but it is very difficult to read text like this, especially on a monitor. I find myself navigating away from all pages designed like this for this reason only. This does not mean that you cannot reverse type out on a dark background successfully. You just have to be careful about not using too much contrast. Both too much and too little contrast will make a page hard to read. Remember, the easier a page is to read, the more time people will spend reading, as long as you know how to craft a sentence.
Writing. Writing is perhaps the most overlooked aspect of creating a compelling website. Once you’ve designed everything so it will make people really want to read your content, you had better have something to say. Because of the large amount of effort required in building a site, people often run out of steam when it comes to assembling content, and they end up with the dreaded and entirely lame “this page is under construction” phrase. Fer cryin’ out loud, don’t let yourself do it. Don’t announce to the world you have a website, get people to come in and click on stuff and then present them with the “under construction” message. Doesn’t matter if you found a really cutesy blinking animation of a man with his trousers down, people aren’t going to like it any better, and likely they won’t be back.
Motion. Motion is similar to color as far as powers of seduction are concerned. Just think about those annoying mortgage banner ads with bad animations of 3D people dancing and gyrating. We can’t help but look no matter how hard we try not to. And—advertisers wouldn’t use motion if it didn’t work. The good news is that both you and I know better, and would only use it for good. So get people’s attention with motion and give them information relevent to what they are seeking. The bad news is that as of this writing the iPhone still won’t allow Flash, and if you want to appeal to the mobile market, you might as well use still imagery. That said, however, there are still all the people visiting your site from a computer, and they might find some animation appealing. Make sure that your site has the Flash degrade gracefully so that those that don’t have it are served up a nice static image instead. You may also want to utilize more subtle motion on your site, in the form of AJAX-powered sliding menus. If I’ve learned anything from working on the web, is that there is always more than one way to achieve your goal.

Wrayco Design » layout

8 tips for a pretty page