Byzantine Blog

Good web design basically means three things: functional, practical and accessible. It doesn't simply mean “pretty”, but it does end up being pleasing to the eye, like everything that is orderly, clean, well organized and neat. In other words, think of visual appeal as a consequence of solid structure and order, rather than as a result of chaotic and unrestrained imagination. These are some of the basic rules of good web design that apply to large corporate web sites as well as to personal pages -- regardless how big or small, these ten simple principles will assure your site is useful, efficient and visually appealing.

1. Four Colors
   Black and white, as every artist will tell you, are not colors. Well, they are in web design. And they are your most important, basic colors, used primarily for background (white) and text (black). You have two more colors to add for just about everything you would like to highlight on your site: logo, links, headings... Rule number one is the bullet-proof insurance you will never go overboard and create a migraine-inducing mess of a page.
2. Center Nothing
   We have all tried it at some point - struggling to make the collection of various elements on the page ‘come together’ by centering them. We thought it looks nice and orderly if it's neatly grouped in the middle. Well, it doesn't work. It makes the site look amateurish, it is difficult to follow through and very difficult to read. Left to right and top to bottom is how we read, it is how we scan the page and it is the way it should be, if you want people to stay and get interested in the content of your site that you worked so hard to make available.
3. White Space
   Leaving enough room for each element on your page to breathe is essential. You must have seen the sites where images and text are crammed in like potatoes in a sack, struggling for space and attention. Images that are too big, heavy blocks of text without breaks, links bunched up so close it takes a sharp-shooter to click on the right one... Finding the back-button after landing on such site becomes a matter of urgency. White space is web designer's prime assistant: it helps her organize the content and make it visually appealing and pleasant.
4. Subtlety
   Once we get our hands on any better graphic program, we tend to go crazy over effects we can now, finally, create. So we start adding shadows on just about everything and buttonizing even the pictures of our pets. At some point, the fact I couldn't make a big round button (with shadow!) for every page that would be a link to my homepage was absolutely killing me. I think I spent a week on that "project" and discarded it about a month later when I learned it might not be as cool as I thought it was. Subtlety is a hard thing to achieve, but it is the main reason why well designed web sites are beautiful. It doesn't mean nothing should be bold and bright, it just means that if some part of the web page is bold and bright everything else has to be subtle.
5. Separate Apples and Oranges
   Text should always be text, never an image. Logo is the only exception, since it is usually graphic that includes textual part. Transforming blocks of text into images and pasting them on web pages makes search engines think you have no content - there is nothing to index except images. And images cannot give you any decent placement in search engines, because none of your keywords are legible to search engine spiders. Worse, though, is the fact that people with visual disabilities who rely on screen readers (software that reads text on the screen and outputs the information to a speech) to use Internet, are virtually barred from sites where text is converted to images. Such sites are violating the most basic principles of web usability and, apart from being a sure sign of poor design, are discriminatory.
6. Group
   Think of all the things you want to put on web site in groups. This is like cleaning up: plates should go in the kitchen, towels belong in the bathroom, jeans, socks and t-shirts in the closet or, more likely, in the washer, and so on. You have to have a separate place for each group of items you would like to publish. These transform to sections or pages of your site. Each separate page then needs to be further organized to allow for easy access to the main content and to other pages and sections. On a single page, you need to have a place for logo, a place for links, a place for the main content and a place for your copyright and personal information. Keep these sections in the same location throughout the site and your visitors will enjoy a pleasant and easy stroll through your portion of the cyberspace.
7. Prioritize
   Is the picture of your pet really the most important message of your entire web site? If not, then it shouldn't be the largest image you have and at the very top of your home page. Think of your home page as of your window display: the most important things to be found on your site should be there. That doesn't mean that EVERYTHING you have on your site should be crammed in your window display, just the most important parts. When a visitor gets in he’ll find more good stuff, but don't chase him away with the entrance that looks like a marketplace after the flood, because most surfers won't waste their time digging through the pile in order to find something interesting. Invite your visitors with few well chosen, nicely displayed items, and let them find the rest.
8. Mind Your Fonts
   Two fonts are all you need for the entire site. Actually, one is more then enough, but some people like to use a different font for their links or headings and that cannot hurt. More then that, though, is too much. There is a flood of painfully designed web sites with itsy-bitsy tiny fonts most people can hardly read. The idea that small is beautiful is fine, only beauty isn't the sole purpose of web sites - they usually have some information to convey. And if the information is barely legible, regardless how beautiful, the site fails. So, keep your fonts to a healthy, medium size, allow some space between text lines and choose one easy-to-read font for all your text. For web sites these are usually sans-serif fonts, like Georgia, Verdana or the most popular, Arial font.
9. Be Square
   Making people scroll horizontally rather then vertically, leading them through a labyrinth of "rooms" instead of pages, unusually shaped weird objects in place of list of links and, generally, trying to re-invent the wheel doesn't add anything but frustration to surfer's experience. In this sense, web site is very much like a book or magazine and it should comply with certain rules in order to be fully accessible and re-visited. Granted, there are some books in rather weird formats that were published, but how many of those do you keep on your shelves? At some point, we all thought white background is boring and black text is dull as dull can be, but when you visit the web sites featured on Best of the Web, CSS Zen Garden etc, guess what -- over ninety percent of those amazing, gorgeous sites have the boring white background and super-dull black text! So, don't boldly go into the unknown with your site, or most people will never find it.
10. Simplify
    Learning to discard the non-essentials is probably the hardest rule of all. Over time we tend to create collections of cute little icons, buttons, arrows, borders, animated gifs that are just perfect for our stuff and hundreds of megabytes of images - flowers, kittens, pink bunnies, white puppies, purple hearts - you name it! None of it is necessary, none of it serves to promote our message, most of it has nothing to do with our message to begin with, but IT'S SO CUTE and irresistible that we have to paste it somewhere. Don't. And if you did, start removing all the non-essentials, today. Essential to your web site are only those things that work hand-in-hand with your content, where connection is obvious and doesn't need to be explained to anyone. Ask yourself if it's absolutely necessary to have certain parts of text blue, or purple or yellow. Would it be just fine if it was simply black? Will your page lose the clarity and importance if the bear-smelling-flower animated gif wasn't there? Would we know what your site is about if you didn't have those 45 smileys there? Would we, perchance, enjoy visiting your site more often if you didn't stop to greet us on five welcome-enter-hello-thanks-for-visiting-pages before we finally hit the home page? So, get rid of the clutter, dust your site off and make it useful.

Finally, some people might be less then thrilled to discover the 11th rule added to the ‘Ten Golden Rules’ but this one is the most important and above all:

Learn (X)HTML and CSS
There is a flood of WYSIWYG (What You See Is What You Get) software that allows everyone to create web pages in an instant, but most of the pages produced this way are loaded with excess, junk code, impossible to validate and therefore practically inaccessible. The blog service providers also enable creating entries through WYSIWYG text formatting, but nothing gives you as much freedom and flexibility as the basic knowledge of XHTML/CSS. It takes less then an afternoon to learn the essential HTML markup and, combined with the endless possibilities style sheets offer, those few hours will be the best investment you could have made.