June 5, 1997
Web Page Makeovers
The Rules of Web Design
So... You have a web page. Take a good look at it. Pop your browser over to that address and pretend that you've never seen it before. How long does it take to load? Does it look good? If you said, 'Well, sort of,' then take a look at http://www.suck.com , http://www.word.com , or http://www.smug.com. Does your site look anything near this good? (If you say yes, just show me your page--I'll find something wrong with it) By now, you should feel that your page needs a change. With the fast-moving style of the web, most sites need an overhaul every couple of months. So, what are you going to do? You may not have always-fresh content, but your page can look like it. There are just a couple of rules you need to follow.
Rule #1: Use tables (without borders) | Tables are a web designer's best friend. You should use them all the time, to line your text up, keep images in rows, and give your page eye appeal. Start out by putting pages with loads of text (writings, links, etc.) in tables. Put the content in one column, and put an empty width=75 td before it. This puts a band of pretty whitespace all the way down the left of the page. Just try it--your page suddenly looks more professional. Also apply a good dose of tables to any main page. Another popular technique is to divide the page into three columns instead of having it all go straight down. Put main sections in the left-hand column, the main graphic and the meat of the page in the middle, and any extras on the right side. Unless you have a good reason, all your tables should have a border of 0 - no table should have a border unless you really want to seperate the contents into little boxes. |
Rule #2: Small Graphics = Small Load Time
| Big graphics are not quite as cool as they seem. While they may light up your screen, they may slow other users load time down to a crawl. Large graphics can still be small, though. What I mean is this: even though a file can take up a large amount of the screen, you can still shrink it down kilobytes-wise--and that's what matters. See that Suck URL I gave you earlier? Look there: You'll see a lot of nice-lookin images, but they all load super-quick. The Secret? Fewer colors. Most of those drawings use only about four colors, so you can save them in GIF format with a small file size. For photographs, use JPEG compression, and use them sparingly. Smaller icons with fewer colors look better and load faster. As for icons, make sure they all look somewhat the same--haphazard graphics make for a confusing page. |
Rule #3 Ease and Content are Important
| People don't come to your page to visit your Yahoo link--they want content, information, and new things. Put links to all the important parts of your site on your main page, where users can access them easily. If an important part of your site is the Yahoo link, then you need to add some content. Content doesn't mean pictures stolen from someone else's page. Do something creative--write, draw, tell jokes, whatever, as long as it's new. Keep your content fresh and updated. If you can add something new every week or month, people will keep coming back. |
Above all, be original. No one wants to see a page that looks the same as everyone else's. Experiment with new forms of design, see what neat things you can do with HTML, and just have fun. If you keep your sense of humor and have fun, your page will be fun for others.
|
Webmonkey
Featuring lots of HTML and design tips and news from the Hotwired gang, this site scores with weekly articles and demos.
David Siegel's Home Page
David Siegel has been a leader in the typeface community for years, and is now one of the best web designers around. He's responsible for the famous Tekton font (used in McDonalds commercials and much more) plus great web pages from his design firm, Verso.
Razorfish
One of the leading web design studios around, Razorfish has a great site featuring tips for designers as well as its clients' pages, known for their use of cutting-edge technologies.
Web Page Design for Designers
A neat site that explains why we need good-looking sites, then tells you how to make them.
Yahoo - Page Design and Layout
Yes, I know it's lame to include a link to Yahoo on my page, but this is simply a great resource for design and graphics links.
|
Design and Graphics for Web Pages
