Note: For those of you who don’t want to read the article, you can skip down to the bottom and read the summary.
Design Basics
by Jim Frew 2 Jul 1997
Jim Frew is Webmonkey's Tonga bureau chief. He currently teaches Web design at the Royal School of Science in Nuku'alofa, and spends his free time playing jai alai and drinking iced mochas.
Let's pretend. Let's pretend you asked me to design a Web site for you. Then we also need to pretend, of course, that I said yes, which I would almost never do because freelance clients are usually nuttier than an Almond Joy and about as smart as a bag of hair. I'm speaking generally, of course.
Now pretend I said, "I quit. You can design this site by yourself." Which I'd most likely do, because in this scenario you're the client, and I've already expressed my views about the client.
"Don't worry, though. I'll talk you through it," I say. "Why? Because that's the kind of guy I am."
The first thing you need to do is ask yourself a few questions. What is the point of the site? What are your goals? Do you want to show the world pictures of your cat? Are you trying to sell worms through the mail? Are you promoting your new major motion picture? The answer will help you begin to focus your page. As you edit your material, you will quickly see that the picture of your cat has no business on the homepage of your new blockbuster.
Next question: Who are you, and who's your audience? Are you a 12-year-old girl trying to communicate with other 12-year-old girls? The president of a start-up company trying to get some cash from an investment bank?
Hint: Purple and unicorns will work really well for one of these situations.
Then you've got to answer technology questions. You might have to guess on this one, but you still need to think about it. How will your audience view your page? Will your content appeal to a business crowd accessing the Net on a T1, or is it for the folks at home with 14.4 modems? While considering speed, you should also think about browsers and plug-ins as well. What makes more sense for the purpose of your page? You don't need Shockwave, RealAudio, or Java if you only want to post a picture of your cat. On the other hand, they might be necessary if you want to impress people with fancy-shmancy smoke and mirrors. Remember, Manhattan was purchased for US$24 and some beads.
Now that you've figured out what your site is about, who the viewers are, and what kind of technologies you want to use, it's time to think about hierarchies. Not everyone has a huge monitor, so your most important elements need to be at the top of the page, where viewers will see it immediately. The smallest monitor out there is 640 by 480 pixels, so your design should work on a basic level within those parameters. If one of your goals is to get people to call your 800 number, you better make sure they can see it without scrolling. (Advertisers don't want their banners placed three clicks down for a reason.) Think of that first screen as the front page of a newspaper. Really important stuff goes on the front page, and the most important stuff goes on the top or "above the fold," as newspaper folks say.
Another thing to remember is that people read left to right and top to bottom. They almost always look at the upper-left corner first, which is a good place to put something really important. None of this holds true, of course, if you're Japanese and read top to bottom, right to left, but the point is that it's good to be aware of how your audience's eyes will travel across the page.
When deciding which colors (your palette) you'll use on the site, you need to ask (again with the questions):
· Do the colors you pick work well with the goals of your site?
· Do the colors exist on the 216 universal-color palette?
· In an old browser, will you be able to read black type on the background color you picked?
Colors are to Web pages what fonts were to desktop publishing in the '80s. People think that just because they have 216 colors, they should use them all. Use a limited palette: A few colors can go a really long way. Be smart about the colors you pick. Don't think in terms of your favorite or least favorite colors. Just make sure they support your message and tell your story.
The other big question with color is readability. The type should sit comfortably on the background color. It's more than an issue of high contrast. White type on a black background is readable, but if you try light grey type on black, the end result is more comfortable to the eye. If you go for a lot of contrast and then back off a bit, you'll probably end up with something subtle that's a little more complex and interesting. Of course, you can never go wrong with black type on a white background. It might not be the flashiest way to go, but it's bulletproof.
Readability part two: The bigger the type, the easier it is to read; the longer the line length, the more difficult it is to read. As a basic rule of thumb, use the <blockquote> tag or a table to shorten your line length. I'd also think twice about setting body copy in anything smaller than <font size=+1>. After all, you want people to read your writing. Also avoid making entire sentences links. It's cleaner and simpler to link off one word or a short phrase.
Why I love blockquotes, part two: White space is your friend. White space doesn't necessarily need to be white - it can be any color you want, but it should be blank. Eye relief is the concept here. Don't be afraid to leave some space around a GIF. Fat margins around body copy work nicely as well. White space helps the reader's eyes rest on what's important - whether that's an image or words. It helps unclutter your design and focus your concept.
I'll close with another idea that isn't new or mine. My former boss once said to me, "Keep it simple, stupid." (Hopefully, this wasn't directed at me.) Focus your ideas. Make sure everything on your page has a really good reason for being there. Make sure you spend as much time picking out your images and colors as you spend on your copy. Make sure the level of technology you decide to use works with the overall goals of your page. Keep it simple. Keep it smart.
This whole article is copied verbatim from a site (webmonkey – my hero J)
Available online at http://hotwired.lycos.com/webmonkey/html/97/05/index2a.html?tw=design
Cited on 08 December 2002
For those of you who have absolutely NO clue as to what is going on in the above article, have no fear – the article was written with techies in mind. Here’s the low-down.
SUMMARY
By Y.M. Sing Min Dec 2002
Step One: Decide on what your site is about. In our case, it’s pretty simple. It’s about our subjects.
Step Two: Decide on your target audience, i.e. who is going to be using your site. In our case, it’s our students. But everyone’s students are different. You know your learners best. Decide on what will
a) Catch their eye & get their attention (colour schemes, pictures)
b) Be useful to them (exercises, assignments, etc)
The technology question is not much to worry about. All our students will have access to the labs, which have the necessary technology for frames, flash, etc. If you have part-time students, however, don’t put too many fancy things onto your page. There are two reasons for this and both are practical reasons. The first is browser wars. Web browsers are NOT created equal – there’s quite a debate about this but essentially, some browsers can see something called “frames” and others can’t. Some can do all sorts of funky stuff and other browsers are more basic. So keep your web page simple. The second reason is a purely South African problem: download time. The more stuff (especially pictures, animation and other energetic matter) you have on your web page, the longer it will take to download – it’s that simple. So consider this your warning, Mark! Don’t go overboard on all that fancy stuff J
For a “tongue-in-cheek” look at web design, check the following site: www.webpagesthatsuck.com
Step Three: Decide on how you are going to structure your stuff. I.e. what is important and what can be grouped together. E.g. all your assignments can be grouped together, perhaps under a heading like ASSIGNMENTS. Sounds silly, but your headings must be obvious. FrontPage uses headings for navigation. The easier your site, the more user-friendly, the more your students will use it. You should try to structure your design as follows (and those of you who have used FrontPage will understand why…)
FIGURE 1: Site Structure
Yes, there are rules to this as well. First, is the one mentioned above; choose headings that will reflect the contents of the page. The second rule is the 3-clicks rule. Research suggests that if users have to use more than 3 clicks to get to a place, they won’t go there. So try to make your site structure (e.g. Figure 1) a maximum of 3 levels. Figure 1 has 3 levels: the first level is the home page, the second level consists of schedule, assignments and lecture stuff and the third level or layer consists of lecture slides and lecture notes. You can make it four levels at a push – but just keep the 3-clicks rule in mind. So try to “flatten” the hierarchical structure. Don’t bury information.
Step Four Layout is important. Don’t put too much information on one page. Rather try to put less in, or break it up into two or more pages. What should be the correct amount of information? About one typed page worth is the recommendation. Remember, you are asking students to read the stuff you’ve typed, so cut to the chase! White space is important – remember to put line spacing in, and make sure that your content has a good layout. Colour schemes, it’s one thing I cannot overemphasise to my students. Sorry, Mark, but that neon green background just HAS to go. J Please, please be tasteful. There’s nothing worse than a bad colour scheme on a site. It’s just something that puts users off before they even start reading the content. And make sure that the font you choose is readable. Don’t choose some fancy script font that only you are able to decipher. Clean neat fonts are the safest as well as the ones that are always found on ALL machines. Arial is good. Times New Roman is Rossouw’s favourite.
You don’t need to make a sketch of your page. But you do need to make a note of all the things that you want to go on your general layout, e.g. colour scheme, font, etc. Or you can be lazy and choose a Microsoft theme (I chose one – I like the blue and grey mixture – the pink was an added bonus).
Bottom line: KEEP IT SIMPLE
Step Five Switch the kettle on – time for tea/coffee/cocoa/wine/brandy (anyone got cake?). If you don’t need a nice strong cup (or glass) of good old fashioned “pick-me-up” liquid refreshment – I certainly do (by now at least).
For you “hardcore” designers out there:
A good site to learn HTML and other web languages (e.g. VBScript, JavaScript, ASP.NET):
www.w3schools.com
For the rest of us sissies, we’ll stick to FrontPage – thanks.