- Prepare to Plan to Prepare for a Development Plan
- Visual Site Design
- How to Structure Your Site
This chapter is from the book
This chapter is from the book
This chapter is from the book
Visual Site Design
When you put pencil to paper to plan your site, you should make your designs as detailed as possible. But most important, you need to decide two things. First, you need to choose your overall navigation structure: how pages will link together, how sections will be organized, what content should go on which page, and how visitors will move throughout the site. Second, you need to decide on a design layout for the individual pages: the look and feel, the content layout, and what you want appearing on each page.
When embarking on planning a site, I like to get away (far away) from the computer and find a quite place where I can think clearly, a place without the distractions of phones, e-mail, or Beverly Hillbillies marathons. I go for bell towers, hunting lodges, or the crow’s nest of a clipper ship. You might want to do the same.
Geek’s Delight
Ever wondered how to register your own domain name? Go to networksolutions.com. Registration is fast and easy.
Unwritten Web Design Conventions
Before actually getting into the down and dirty of site design, let’s get some tried-and-tested web conventions out of the way. In web design, nothing’s hard and fast, but there are some unwritten laws that surfers have come to expect web sites to obey. When things don’t work as expected, visitors tend to get frustrated and eventually surf somewhere else. I’ll bet you’ve come to expect most of these unwritten rules as you surf from site to site, too.
)
Most conventions are navigational, so let’s get those out of the way first. A standard on virtually all sites is a main menu, which should appear on every page either across the top or down the left side. Menu buttons link to the landmark pages of the site and then branch off from there. Try to keep your buttons simple and easy to follow. Some sites use indecipherable icons or text captions that don’t clearly indicate where links go. It may make perfect sense to you what “Mehta Meyhem” is, but no one else will understand your devotion to the Three Tenors (Didn’t get that gag ’cuz you don’t know the Three Tenors? Exactly the point. Now get going and look it up!)
The links in a main menu should also be repeated as text links across the bottom of the page, which I’m sure you’ve seen. These text links, and all text links on your page for that matter, should be underlined so visitors know that they’re clickable. Another navigation convention is a site’s logo that appears in the upper-left corner. This logo should always link back to the site’s home page. Finally, whenever a long page is used, perhaps a directory page or a glossary, always include back-to-top links so visitors can easily make their way back to where they started. It’s just a convenience for them.
Two more conventions: First, if you’re providing files that visitors can download, maybe MP3 or PDF files, always include the file size in brackets so they know what they’re in for. Last but not least, if you have a page that visitors may want to print, provide a printer-friendly version of the page—that is, a clean page without a colored background, a lot of superfluous graphics, and so on. Even better, provide a PDF version of the page for printing purposes. That way, you can be sure your visitors will get a perfect printout.
How to Dress Like a Designer
So now that you’re getting into Dreamweaver, it’s time to look the part. Find out exactly what it takes to look like a designer, even if you can’t draw stick-men to save lives. So grab Daddy’s credit card and hit the mall—here’s how to dress like a designer!
)
(1) Funky hairdo (consider color)
(2) Facial hair (men only)
(3) Graphic design magazines
(4) 2006 Ikea catalog (to furnish the loft apartment)
(5) Notebook computer (operating system of choice)
(6) Markers, HB and 2B mechanical pencils
(7) 100-page wirebound sketchbook
(8) Brand cargo pants
(9) Oxford shoes
(10) Cellphone
(11) USB keychain drive
(12) Car keys (something compact and imported)
(13) MP3 player
(14) Brushed-aluminum coffee mug
(15) Brand golf shirt
(16) MP3 player headphones (connected to MP3 player)
Navigation 101
So you know the essential conventions. Now it’s time to sit down and work out your navigational structure on paper. The key idea here, when you begin thinking about navigation is that you want to build a site that’s easy to get around in. This means being sensitive to the needs of both novice and experienced users. Good sites don’t rely on the web browser’s Back button for navigation. Instead, they provide several methods to move through the site, and the best sites keep each of these methods simple and easy to follow.
A main menu is a must, and think seriously about including text links at the bottom of the page. Another way to employ text links is to use something called breadcrumbs. Breadcrumbs usually appear toward the top of the page and provide a trail of links leading back to where the visitor started.
)
Another element to consider including is a site map. A site map gives a structural list of all of the pages within a site, providing a very fast way for visitors to find the information they’re after. In addition to being an alternative navigation system, site maps are great for search engines, which love all the text links within a site map, which can improve your rankings in search results.
Whatever navigation systems you choose, keep them consistent throughout each page and simple to use, and also make sure they allow visitors to get back to previous levels easily. As you start your planning, consider storyboarding or flowcharting your site to help stay organized. Sort of like filmmakers do for movies, literally draw out your pages on paper. Figure out what text, images, and other content you’ll need, and start thinking about how the pages in your site will connect to one another. This whole process is called information architecture. It’s a nice, fat, 50-cent term that’ll get you in good with the boss.
Web Page Types
Here’s an overview of required and optional pages for your site. Use these icons and descriptions with the nav models described in “Get the Glue—We’ve Gotta Build a Navigation Model” earlier in this chapter.
Splash page: You can use an optional splash page to introduce your site. More often than not, splash pages contain Flash intro movies that
are, quite frankly, useless. Often, all a Flash intro does is give the designer a chance to show off his or her skill and
cause an unwanted download for the viewer. If you do use a splash page, it should be to give visitors an idea of what to expect
inside the site, and also to provide site requirements, such as monitor resolution, plug-ins, or other settings. The intro
page for robzombie.com is an example of a well-used splash page.
Home page: A site’s home is its main opening page. If you don’t use a splash page, you must give the home page a default name such as
index.htm for the site to function (see “What’s the Deal with Index Files” in this chapter). The home page serves as the main point where landmark pages link from, and it usually has a unique design
to distinguish it from the rest of the site. Also, make sure to provide a way to link back to the home page from all other
pages.
Landmark page: You could also call these category pages. Landmark pages are the main pages for the predominant sections of a site, which
are normally linked to from the site’s main menu. A landmark page links to content pages within its specific category.
Content page: Content pages branch off from landmark pages. This is where information is most specific for the visitor. If you like the
analogy of a tree structure, you can think of a these as leaf pages, the pages farthest from the home page.
Contact page: Every site should include a contact page, and it should be accessible from every other page. Give your visitors multiple ways
to contact you. Unless you’re a business, phone numbers aren’t such a good idea. But you could include your e-mail address,
a form for visitors to fill in, or even a way to contact you via instant messenger.
Other page types: There are all sorts of other optional pages you can include in your site. If you’ve been surfing the web for a number of years,
you may have noticed trends that come and go. For example, guestbooks and chatrooms used to be all the rage. They’re still
around, but they’ve given way to online forums and blogs (short for web logs). If you’d like to add a blog or forum to your
site, one option is to use a free online service like bravenet.com. Only bummer is that endless pop-up ads will appear on your site unless you pay for the full service.
Imminent Doom
You are not the user of your site, and the user is not you. The users of your site don’t think like you do; they think like they do. Remember that you’re building an interface, an environment, for others to use, not for you to use. Any navigation structure that digs deeper than three levels before actually getting to the content is too difficult to navigate.
Geek’s Delight
Blogs have really risen in popularity. They’re basically like an online journal where people can post their rants and opinions. Some are really well written, while others are just soapboxes. Check out guerrillanews.com for an example, or blogger.com to create your own.
But Isn’t Content King?
There’s an unfortunate fact in web design. Because the web is a visual medium like film or TV, your site’s design is the first thing visitors will see and begin evaluating you by. If you’re not a designer or visual person, this may not make a lot of sense. Some people think that if they have really well-written content, the masses will come, that the visual design doesn’t matter.
Geek’s Delight
Consider adding a counter, site search, or even local news and weather to your site. Things like shopping carts or a wish list for returning customers are pretty heavy duty, but anything’s possible. Check out htmlgear.com to get started, or better yet, when you’re signing up for web hosting, make sure your package includes a Cpanel interface. Check out cpanel.net/features-cpanel.html to get the scoop.
Well, there’s actually a bit of psychology here. Get this: If you’ve got killer content in a really badly designed site, the perception in people’s minds is that the content has no value. And the opposite is true. If you have really bad content in really, really nicely designed packaging, people immediately think it’s of high value. Want a real-world example of this? Watch any top-10 music video countdown.
)
Branding: Your Consistent Message
Remember that building a site is all about communication, and I don’t mean through text. Design, color, and images speak. The best-designed sites are those that embody the overall look and message of the organization they represent. In design circles, this is called branding. Branding encompasses everything from the overall look, colors, and fonts of the organization, to more abstract things like attitude and environment. It is the story that an organization is telling.
A site that totally misses its mark in this regard is Ikea.com—sad times, because they’re one of my favorite companies. They’re all about design and innovation. Everything—from their store, to their catalog, to their products—reflects this. They’re consistent in everything they do—except in their web site. Knowing Ikea, I’d expect a site that’s as innovative as their products and store layout, something that really makes you go, “Wow, what a cool site.” Ikea.com is pretty plain and doesn’t even contain the company’s entire catalog. Ikea, you’re such a cool company. Please build us a site that’s as cool as everything else you do!
Just drying my eyes... Okay.
Other times, an organization provides a single page just to establish some kind of web presence. If Bob’s Antique Market has an online brochure, it doesn’t necessarily mean Bob’s on the cutting edge. Can I search his stock, ask him a question, or get some tips on fixing my mother-in-law’s nineteenth-century coffee table after playing rugby in her living room? Ultimately, here’s what it comes down to: Does the page serve Bob, so he can say his company is online, or does it serve the needs of his clientele? Getting heavy, huh?
)
We talked about unwritten rules earlier. Here’s another: If a company doesn’t have a web site, it isn’t considered professional. This is like a business not having an answering machine attached to its telephone. If a company does have a site, but the design is very amateur, then people won’t take the company seriously. A site has to look good and function perfectly, but also deliver the information that people are after.
Planning Page Layout
When beginning the design of that first page, keep this in mind: On the web there’s no fixed page size. This means that you can make your pages as long and wide as you like, but be careful. Surfers don’t like to do a whole lot of scrolling, especially horizontal scrolling. So make sure that the size of your page is appropriate for the content it’s going to hold.
What I find easiest is to design an initial page template to use for the main pages of my site. I decide where I want the main menu, contact information, common links, and so on to appear. This process isn’t just about deciding where to put elements on my page, but also how they’ll look and what colors to use. As you begin roughing out your designs on paper, think about what you like and dislike about sites that you visit. Are there particular elements that you’d like to incorporate?
)
Imminent Doom
Keep contrast high between page elements. If you want to use a dark background, don’t plan to use dark text.
Metric? Imperial? It’s All about Pixels and Browsers Now
In the land of web design, everything’s measured in pixels. Why? Because that’s how computer monitor resolution is measured. If you’re not familiar with monitor resolution, it’s the number of pixels horizontally and vertically that are displayed onscreen.
Color on the Web
One thing that can be tricky when designing your pages is matching colors—knowing what colors go nicely together. Women, I think, have a sort of sixth sense for this kind of thing. They just seem to know what colors go with what. My mom’s a killing machine at this. For the rest of us, there’s a neat utility called Color Wheel Expert (Windows only) at abitom.com.
)
You pick a color to start, and then Color Wheel Expert gives you a huge range of color combinations to use, all based on correct color theory, so you know all the combinations are right. To really make use of this tool, you have to understand how color wheels work, so go out to your local arts and crafts store and get one for a few bucks; then visit webwhirlers.com/colors/index.asp to get a handle on how it all works.
Changing Monitor Resolution
Have you never changed your monitor resolution before? It’s easy. Just follow these steps for your particular operating system.
Windows XP:
- Minimize all your programs so that all you see is your desktop.
- On the desktop, right-click and choose Properties from the menu that appears.
- In the Properties dialog box, click the Settings tab.
- At the bottom of the tab, drag the Monitor Resolution slider left or right to increase or decrease the screen resolution (Figure 3.9).
)
Mac OS X:
- Open the Apple menu and choose System Preferences.
- In the Hardware category, click Displays.
- Choose a setting from the Resolutions list (Figure 3.10).
)
The lowest resolution, and really used only on older computers, is 640×480. One notch up is 800 × 600, which is a good worst-case scenario for web design. The most popular resolution is 1024 × 768. From there, resolutions get pretty high—up to 1152 × 864, 1600 × 1200, 1280 × 1024, and even 1600 × 1280.
When you begin designing your pages (remember, on paper first!), you should keep monitor size in mind. There are a few sharp stabbing pains here. First, you have no idea what resolutions your visitors’ computers will be running. Second, you have no idea what web browsers your visitors will be using; different web browsers take up different amounts of screen space with their toolbars, menus, and so on (called the browser’s chrome).
First, let’s talk about monitor resolution. As I mentioned, there’s really no way to know what resolution your visitors will use. However, there are a few workarounds. For example, you can use a bit of JavaScript to detect the resolution being used and then redirect the visitor to a page built specifically for that monitor type. More commonly though, most web designers assume a worst-case scenario: that your visitor will be running the lowest of the common resolutions, 800×600. With this approach, you build your pages to target the 800×600 setting—and your pages will also look good on anything higher. This is a much better way to go. That’s why you see something like “This site best viewed running 800×600 or higher” on so many sites.
)
Now the issue of browser chrome. This’ll drive you nuts. First, what browser will people be running? Next, what version of that specific browser will they be running? Finally, what toolbars and extras might they use (like a Google searchbar added in, for example)? It’s impossible to know all the variables, and trying to compensate for all the combinations will surely land you in the loony bin. I won’t even bring up different operating systems, or Blackberries and cellphones...
“So what do I do?” you plea. “I thought web design was supposed to be fun!” Soothing breath...you are a hollow reed. Here’s what you do: You find some kind of lowest-common denominator that tells you what browsers are most popular. Then you test the heck out of your site against those browsers. How do you find out what the popular browsers are? You probably already have a fairly good idea, but for specifics, go to echoecho.com. When the page loads into your browser, scroll down a bit, and on the right side you’ll see Surfer Stats. The first box gives some stats for the most popular browsers.
)
As you download, install, and test your pages in the various browsers available, keep one important thing in mind: Most web surfers are not interested in web browsers—they’re everyday folks who just want to surf (many don’t even know what a browser is!). Most will opt to use whatever browser came with their computer (Internet Explorer 6 in Windows XP, and Safari 2 in the latest release of Mac OS X), and unless they’re web savvy, they won’t want to download and install anything because that’s too “technical.”
This makes a web designer’s job tough, because a browser like Explorer 6 is becoming sadly outdated, while browsers like Firefox and Opera have risen up to support most (if not all) current web standards. So even though these newer browsers will render your pages better, most surfers will be using the outdated Internet Explorer.
Go with the Site Design Workflow
At this point, you should have a solid idea of the site you want to build. You should know exactly how your site will be structured, how pages will connect to one another, what content you’ll need, and how your pages will actually look. Once you’ve ironed all this out on paper, you can finally sit down with Dreamweaver and create your grand vision. I know we haven’t really even gotten into Dreamweaver, but now’s as good a time as any to get a quick idea of what’s involved in actually constructing your monumental first site.
First, Develop the Mock Site
Some designers also call the mock site the alpha site. This is like the first draft of the site. The important thing here is to get the necessary pages built and linked together, so don’t worry about filling in any content at this point. All you’re after is a workable site with basic navigation that your client or boss can green-light.
Second, Build a Beta Site
Once the alpha site receives a passing grade, then you can start putting real content into the pages. You can also start adding things like JavaScript rollovers, a site map, and Flash elements. At the end of this stage, you should have a finished site that’s ready to roll off the production line and enter the crushing intensity of site testing.
Third, Get Testing
Now the part everyone skips. You’ve worked so hard planning, designing, and building that I’m sure you’re ready to just wash your hands of this thing and be done with it. Hold up. You’ve gotta test the heck out of your site to make sure it actually works under a variety of conditions. Most designers take a quick look at the site in a browser or two, click a few links, and call it a day. You’ve gotta be thorough. Punch every link and test every page in a variety of browsers. It may seem tedious, but keep testing and fixing. Upload your site to a testing area and get friends or your dorky kid sister to try it out.
Noteworthy
While in the testing phase, try running your site on an older machine with a much slower connection. If your site runs okay on an older machine, it’ll blaze on the latest and greatest. This has given a second life to Huxley, my rusty old PI 133 with his 32k modem.
)
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
Fourth, the Great Unveiling
Okay, you’re ready to publish your site live. In the next chapter, we’ll go into all kinds of detail about how this is done. But once everything’s uploaded, the main bulk of the work is done but there’ll be ongoing maintenance and updating. A big deal with sites these days is keeping content fresh and updated. So really, web design is an ongoing job, but if it’s a site that you love, it’ll never seem like work.
Imminent Doom
There’s little deadlier to a site than a line that tells your visitors “last site update Sept. 26, 1998.” Update your site regularly.
After the release of your site, testing is an ongoing thing, too. Whenever you find yourself in front of a computer (at a friend’s, in the jailhouse, wherever), hop onto your site to see how it looks.