A WAY
WITH WORLDS:
WEBBING YOUR WORLD 4: THE REVENGE OF WHOEVER
By Steven
Savage
Archives available at The Way With Worlds Home Page
Wait, weren't we talking about something else a moment ago? Wasn't the subject religion?
Yes, Webbing Your World won't go away quite yet. I got email suggesting that I'd missed one vital element in my column - good design. I'd stopped at site workflow, figuring that good design was instinctive. Besides, though I may be a professional, I'm not the ultimate layout/design guru.
However, let's be honest - doing a good looking site is part of making a site useful, and as I've mentioned, your site first and foremost is a utility. If the looks make it hard to use, if the appearance drives people away, if it doesnt make people want to stay and explore, then the site isn't working. The site is not a utility.
To make this easier, I'm going to create an imaginary site along with you. In this case, it'll be for Sword and Sorcery tales with a kind of retro Errol Flynn/Jack Kirby feel. Let's call it "SECRET LEGENDS." Throughout this column, I'll apply the design tips to this imaginary site.
So, once more into the breach - how to make your site look and feel right.
COME UP TO THE
TABLE:
Some people are going to debate this with me, but in my
opinion, if you want to do a good site layout you MUST learn how
to use tables. They're indispensable.
For those of you new to HTML, tables are ways to create grids that contain various contents, colored cells, etc. They help with arranging data, and a large (page-sized one) can act as a layout guide for an entire page. You can perform various effects with tables, ones that can make pages smaller as they substitute for graphics.
Some people swear by more advanced technologies like Cascading Style Sheets, or prefer to use graphics for control. But I stand by tables.
You can start designing without a knowledge of tables, but I'll be honest - the use of tables is when you really start to do some funky stuff. Don’t let learning tables stop you from experimenting with HTML, but do make an effort to learn them, you will need them.
GOOD TABLE ADVICE
FROM BIGNOSEBIRD:
Alignment
Layout and colors
Alignment and numbers
Graphic dividers
Pretty boxes
NOT CONVINCED?
If you don't think tables are worth it, check this out,
a periodic table done ENTIRELY with tables and Javascript:
http://expert.cc.purdue.edu/~helvey/javapert.html
Or, how about giving a page a windows look? No graphics involved, just text and tables:
|
|||||||||||||||||||||
That's all done with text and tables. Now, imagine good tables combined with graphics and you've got an idea of what you can do.
STARTING OUT:
GETTING YOUR SITES THEME/FEEL:
Once your skills are up to site building, its time to not use
your skills in HTML and graphics, and instead do the work of
coming up with a theme and a feel for the site. Yes, its terribly
abstract and hard to describe, which won't stop me from trying to
describe it, but bear with me.
The first thing you need to do is get a handle on how the site should look, what impression it should give, what themes and feelings it should evoke. Is it for a gothic storyline and should thus be dreary and dark, or a slick-science fiction tale of a hopeful future, or do you want a crisp and clean archive that promotes content over appearance? What is your site about?
This may seem silly - but as I've said, a site is a utility, and setting the tone for a site is just as much part of the experience as reading stories. No one is going to believe a site with sunny day pictures and cute kittens contains vampire stories (unless you're deliberately being contrary), and an archive site with 50 KB graphics isn't going to give people the impression of an organized, quick-to-use service. A darkly themed site will require careful design to make it understandable, a bright and colorful site can't be overwhelmingly so or it will be confusing.
SECRET LEGENDS: Well, for Secret Legends, we've got flashing swords, daring heroes and heroines, and weird magic. So the theme must be grand and colorful, but also not pretentious. Fun's the word. It'll probably have lots of graphics, but we don't want to do it since long downloads are NOT fun. The feel should almost be like a fantasy video game.
YOUR SCHEME:
OK, you have your feel, you know the impression you're supposed
to give. Now how does this translate into a general
"look" for the site? How should it appear, how should
it be laid out?
This, I fully admit, is darned difficult. Some sites look like things, others are just information reference, etc. You're basically trying to take an abstract idea and turn it into something that is real.
That's how I usually end up designing sites - I ask, essentially, what they're like, what real-world item can I relate them too; a newspaper, a building, a poster, etc. What can I do to conceive of the site in a way that gives me a handle on how it should look? An archive is essentially a filing system or a library, a gothic page can be like a mausoleum or forbidden book, a science-fiction page can be like a futuristic timeline or a computer display (sort of self-referential, I know).
Of course you can keep a page abstract, but even then you'll need to figure out basic arrangements and such - like a book, like a newspaper, like spreadsheet, etc. However, I find plumbing a theme will give you good ideas, and prepare you to handle abstract designs. Eventually you'll learn good general layout concepts you can apply anywhere.
SECRET LEGENDS: Well, with secret legends we want, well, a legendary feel. We could make it like scrolls of ancient legends, but the idea of dry parchments and such is too dull. In this case, let's go for the feel of a secret, magical library, and title the page "THE LIBRARY OF THE SECRET LEGENDS." It brings to mind mysterious bookshelves and strange crystal balls and a mysterious librarian.
YOUR LAYOUT AND
NAVIGATION:
Now that you have a feel for your site, you need to figure out
how its going to look, and how the elements of the site will be
laid out in a usable way. Once you determine the pages in your
site (covered in Webbing Your World #3 two weeks ago), you need
to figure out how they are laid out and how people navigate
between them. These issues go hand in hand.
Layout requires you to figure out, essentially, where what goes on a page. This is far more important than fancy graphics - it affects usability. If its hard to find important links, the page is hard to use. If information is presented in a confusing manner, it won't make sense and won't be worth the time to decipher. In short, what is important must be easy to find by a quick look - be it a link or information about a story.
So, ask yourself what must be prominent and easy to find, look at the theme/feel you've gotten, and ask how things can be presented properly. An archive site should have major areas of the archive and help pages clearly visible and accessible, and text must be readable, clear, and prominent - no huge buttons or intrusive graphics. A site following a specific adventurer in a complex and original world should have the stories and FAQ easy to visit, the theme should help draw users into the world, and the layout should be crisp but have the right mood. A gothic site needs its moodiness, but the links and important information must stand out (perhaps with red text and colorful blood-red backgrounds for important messages)
This part is a mixture of architecture, intuition, and artistry. I've seen webmasters create a "system" for good design, but it seems that they have to arrive at it on their own (or sometimes create a standard template they can apply to a variety of situations). It's an art using science that becomes a kind of scientific art.
A FEW NAVIGATION
TIPS:
http://bignosebird.com/navig.shtml
SECRET LEGENDS: Since the "fantasy video game" feel is also a part of Secret Legends, The page should have navigation and layout reminiscent of one. So we'll have a two-column main display with a page header and footer.
The left column will have colorful buttons to go to the different parts of the library: The Librarian (about your imaginary librarian and the real author), the Archives (stories), the History Stacks (FAQ), the Artisan's Chamber (art), and the Map Room (links externally).
The majority of the page will contain content. Your actual stories probably wont have all the fancy formatting, but your lists of links, story summaries, etc. will be in there.
The top of the page, the header, will have "adventure style" information about what you see and so forth; a description of the setting, etc.
The bottom of the page, the footer, will have copyright and other information.
COLOR SCHEME:
You know what its like, you know how it should look, now
you have to actually make your page look like something.
First of all, you're going to need a color scheme. In highly abstract designs, it may be a handful of specific colors that define most everything. In a design with a specific theme/appearance, it may be much broader.
In some extreme cases, I find you have not so much a color scheme but a lack-of-color scheme; you will use all colors but a certain set. So a vampire fiction site may avoid blues, yellows, and greens, and a slick high-tech sight uses a wide range of metallics, but only metallics.
In determining your color scheme or lack-of-color scheme, I find you need to keep the following in mind:
Is this important? Yes. Sure, you may not find the Four Perfect Colors, but at least you'll realize purple, bright yellow, and neon green aren't quite the colors that'll make your serious fiction site look dignified.
SECRET LEGENDS: This page is going to be colorful, so the main approach is going to be lack-of-color scheme. It's got to be big and bright and bold, so we're going to avoid browns, grays, and pastels, and stick with bright, vivid colors, with some black to offset things.
ELEMENTS OF THE
PAGE:
Finally, you know where things go, you know how they
should look color wise, you know how the page comes together. Now
its time to put the individual elements together - dividers and
buttons, links and images, logos and bullets. Its time to figure
out what they look like.
Dobutlessly, you've already had plenty of ideas - the above process of design may be described linearly, but I'm sure your mind has jumped ahead. So lets take a look at what you have to design.
Overall the basic questions are the same - how big, what color, abstract or not.
Don't add elements you do not need. If you don't need dividers, don't make them. If a link will do instead of a button, don't make a button. Don't clutter your page unless you are deliberately making it cluttered.
SECRET LEGENDS: We're going to give an "icon" for each part of the website - a book for the archives, etc. The Navigation bar on the left side will have that icon next to each link that leads to that part of the site. The icon will also appear in the header, on the right, next to the descriptive text for each page.
Each page itself will have a unique look to it, with appropriate dividers and bullets for the theme.
SUMMARY:
The appearance of your site affects how the site is
used, how it is perceived, and the mood it sets. Its just as much
a part of design as the content and the workflow. Take the time
to make it work and do it right.
It doesn’t have to be perfect at first, or ever. My friend Alicia (whose Pokemon: Evolution stories are stored on this site) put it simply "Put stuff there. Make it easy to find. Make it easy to read and pick an appropriate color scheme. Anything else can be added on when you have nothing better to do."
Now, As mentioned above - send me links to your pages! Show me what you've done on your own or with the advice here. At some point in the future, I'll show off the best as examples of how to do things right! In fact, any one up for designing Secret Legends to check their skills?