This article will help you to learn some fundamental principles in web design and to design your own nice-looking, functional website
Over the past eight years (ever since I've owned a Macintosh), I've designed many different websites. I've dabbled in different web programming languages and done many, many technical tasks (some of which I don't remember how to do). But does this make me a good web designer? Not necessarily. I've learned through experience and research only so much about web design. It's more of an art than a science really; but it takes a lot more than an artist's mind to design a functional and eye-catching website.
The Home Page
The ABSOLUTE most important part of a website to 'get right' is the home page. And before even working on making the web page in some web-editing program, you should first think of what kind of audience you're catering to, what colors would go together well, and what kind of style you're going for (elegant, industrial, playful, business-like, etc.). The home page is often the first impression of your organization that a person will see, and if the person doesn't like it, I wouldn't expect the person to like your organization either!
Tips for home page design:
- KISS: As in most fields, the 'Keep It Simple, Stupid' principle applies here. You don't want to present people with a dizzying array of options, complex pictures, or tons of information right away. Instead, keep the amount of main links on your homepage to a minimum (10 at MOST!), and try to leave some 'negative space' (where there is no content) in well-placed areas so it's not too busy.
- Offload Information: Instead of putting a whole page's worth of text on a front page, introducing yourself or your organization, put it in an 'About' section on another page, and put a link on the front page to that page. You'll notice that most corporate web designs includes a minimal amount of text describing the company; focus on your product, or something else more important.
- Keep it Updated: People won't re-visit your site if there's never anything new on it (unless it's loaded with tons of important and library-worthy information...). Make sure you have some part of your home page that changes periodically; I usually try to have a 'news' section on the front page so people can see that things are happening within the website. This will keep people coming back.
- Use Minimal, Complementary Colors: If you don't know what complementary colors are, it would be a good idea to find out; it is a very rare occasion when someone should ever use green and purple as main colors on any web page. Ever. Blue and white, black and white, and other colors with white look best. White is easy on the eyes, and doesn't interfere with text or images. I have almost never put background images on my websites; only once or twice have I changed the color from white. White is an 'expected' color; if you put hot pink as your background, people may not be as receptive towards the rest of your site.
- Experiment, Experiment, Experiment: On every home page I design, I first work from a template I create for a normal content page, and modify things a little here, a little there (always simplifying) until I find a layout that's pleasing to the eye; I always try to remember the design principles my high school art teachers taught me. Always leave some 'negative space' so the eye is not bewildered by all the information, but also make sure you don't leave the negative spaces in areas where it would be better to have content. I usually spend a few hours simply laying out the home page, moving things from one place to another and back again.
The Content Pages
Throughout your website, you should have as unified a design as possible; the most important part of this is a uniform way to navigate your website. The best websites are those in which you can be on any section on the website and get to any other section. If you want people to explore your website, make sure that every page they go to has some way to get to more than just one other page (or 'back' one page). All the sites I design have links to at least all the main website sections on them either at the top, on the side or on the bottom.
Tips for content page design:
- Navigation: Make sure you have a unified and easy-to-use system of navigation. You can use software such as Macromedia Fireworks or Adobe ImageReady (along with Photoshop) to design great-looking button bars and images to use for a main links section, or you could also opt for CSS-styled buttons (like I have on this website) for faster page loading and more minimalistic style. You should limit the amount of main links to 10 or less (with the emphasis on less).
- Not Too Much, Not Too Little: Some web pages would be better off split into three or four separate pages because of their length. Other web pages have little or no useful information on them, and would be better removed from the site. Make sure you don't have too much, or too little information on a web page.
- Design Still Matters: Some people like to type really, really long blocks of information and stick them up on web pages. Little do they know; nobody reads them. When reading things on computer screens, it is best if they are split up into smaller paragraphs. Books are a good medium for long blocks of text without space; web pages are not. As you notice on this page, I have split all the information into many paragraphs and bullet points, with bold headings to separate everything.
- Don't Overdo, or 'Underdo,' Pictures: Pictures are great on a website, and the JPEG picture format (and now PNG, which is also gaining some popularity) makes sure that pictures look great, while being small enough for people to download quickly. But you need to make sure you don't have too many pictures. It's a good idea to stay away from the millions of 'tacky' animated GIFs floating around the web. If you can, use only high-quality pictures that you are legally able to use. I usually use my own photos for almost every picture on my websites. If you ever need to put many pictures on one page, make sure the 'picture' page is a separate page, and not clumsily tacked on the bottom of the text-filled content page.
General tips for building a website:
- It would probably be a good thing for anyone seriously interested in building websites to read a book on the topic of web design. The best way to learn, though, is by experimenting.
- Using a program such as Adobe GoLive or Macromedia Dreamweaver may be bewildering at first, but these programs allow you to experiment to your heart's desire and find new ways of doing the same thing. Try to learn as much as you can about the program you use. I do not recommend using a program such as Microsoft FrontPage or Word for building websites unless you are not as interested in building a nice website as in printing something out.
- Look at other companies' and organizations' websites. In your web browser, if you see something that's really neat, you can 'view source' (the source code is what makes a web page 'tick') and learn how it is done. It would be a good idea to at least familiarize yourself with HTML, CSS and maybe even Javascript, as most sites nowadays require some 'hand-tweaking' that can't be done in the normal WYSIWYG interface of web page editors.
By no means is this an exhaustive guide on designing a website. Use Google to search for more guides, and try to learn from many different perspectives. I am an independent web designer, and I manage about 10 different websites at any one time; I have grown fond of some design layouts and techniques and I don't like others. I could never be as proficient in CSS, HTML or other programming languages as I want to be, but I try to learn as I go and make every new website better than the last.
More Resources
Here are other websites and pages that have more great information for site design:
- Top Ten Mistakes in Web Design (check out some of the other pages on this website too!)
- Web Page Design Flaws
- Biggest Web Design Mistakes in 2004
- A List Apart (a great resource for web design)