Web Design Tips to Keep You Looking Good
One of the advantages of working with a team of designers is that you get to compare notes and trade ideas with other people who know as much, if not more, than you do.
If you're designing a Web site or other family project by yourself, you may not have the opportunity to compare notes with professional colleagues, so this section of the Digital Family Web site is filled with design tips from a variety of sources to help you stay inspired, consider new ways of approaching your designs, and create your own beautiful family projects.
Keep it simple
Creating a clear and intuitive navigational system is one of the most important elements in creating a Web site. Nothing is likely to frustrate your visitors more than not being able to find what they're looking for.
Make sure visitors can easily get to all the main sections of your site from every page in the site. You can do this best by placing at the top or side of every page a set of links to each main section. This set of links is called a navigation row or navigation bar, and it's a common feature on well-designed sites. If the pages are very long, consider including a navigation bar at the bottom of the page as well. The bottom of the page is also an ideal place to include basic contact information.
Your goal is to make sure viewers don't have to use the Back button in their browsers to move around your site. It's easy to get lost this way.
Work as a team
Although most commercial Web sites are created by teams of developers that include experienced programmers, designers, and editors, you can create a professional-looking Web site for your family, even if you don't have all the experience of the pros.
Who's on your own team of specialists? Do you have a teenager who learned programming in school? An aunt or an uncle who is a talented designer? Should mom or dad take on the role of project manager, or should they be the ones to test everyone else's work and let an older sibling manage the development process?
Even the youngest members of your family can contribute to your Web site design by creating artwork that you then scan to add color and fun to your Web pages.
If you start with the vision that everyone in your family can contribute something, you may find that building a family Web site is not only a great way to stay in touch with family and friends, it's a great way to bring your family together around a shared project.
Create consistent design elements
Most Web sites work best and are easiest to navigate when they follow a consistent design. Case in point: Most readers take for granted that books don't change their design from page to page and that newspapers don't change headline fonts and logos from day to day. Consistency is one of the primary tools used in books and newspapers to make it easy for readers to distinguish different elements and follow a story or theme.
As you lay out your Web page, keep related items close to one another and be consistent about how you design similar content elements. You want your viewers to understand instantly which pieces of information are related to each other. Distinguish different kinds of information by their
- Design
- Location
- Prominence
This type of organization makes following information visually much easier.
Make sure similar elements follow the same design parameters, such as type style, banner size, and page background color. Give elements of similar importance the same weight on a page. If you use too many different elements on a page or on the same Web site, you'll confuse your viewers.
To ensure a consistent style, define a set of colors, shapes, or other elements and use them throughout the site. Choose two or three fonts for your Web site and use those consistently as well. Using too many fonts makes your pages less appealing and harder to read.
Strive for consistency in your designs -- except when you're trying to be unpredictable. A little surprise here and there can keep your Web site alive.
White space is not wasted space
One of the best design features you can add to a page is nothing at all -- also known as white space. Understand that white space, in this case, is not always white; it's simply space that you haven't crammed full of text or images. It can be any color, but it's usually most effective if it's the color or pattern of your background.
White space gives the eye a rest -- something readers need when they're staring at a computer monitor. You can use white space to separate one type of information from another and to focus the viewer's attention where you want it most. Some of the most beautiful and compelling designs on the Web use only a few well-thought-out elements against lots of white space.
Back up your site
Make sure you have a system in place to back up your Web site. Even the best Internet service providers have technical problems, so you should keep a backup of your site where you have easy access to it and can get it back online quickly. Update the copy regularly to make sure you have the latest version of your site backed up.
Also keep a backup of your original source files. For example, when you develop images for the Web, you usually start in a program such as Photoshop, creating a high-resolution image that may include layers and other elements. Before the image goes on your Web site, those layers are flattened and the image is compressed or reduced and converted to a GIF or JPEG file. If you ever want to go back and alter that image, you'll want the original source file. Whether you create your own images or hire a professional designer, make sure you develop a system for saving the original text, images, and other content.
Stay small and fast
Despite promises about the arrival of unlimited bandwidth, the biggest problem on the Internet is still speed. If you make sure your pages download quickly, your viewers will be more likely to keep clicking. You may create the best design ever to grace the Web, but if it takes too long to appear on your viewers' screens, no one will wait around long enough to compliment you on your design talents.
If your page designs take a long time to download, here are a few likely reasons and some suggestions for making them load faster. First, take a look at multimedia elements and consider reducing the size or at least offering users the option to skip large multimedia files, such as Flash animations. You don't want to make users wait too long to see the first page of your site.
If you suspect that static images are the problem, consider reducing the size of the images or using optimization methods, such as compression or color reduction, which make file sizes smaller so images download faster. Adobe Photoshop Elements is an excellent program for reducing and optimizing images for the Web.
Follow the "three-clicks rule"
The three-clicks rule states that no important piece of information should ever be more than three clicks away from anywhere else on your Web site. The most important information should be even closer. Some information, such as contact information, should never be more than one click away.
You can make finding information easy for viewers by creating a site map (as explained in the next section) and a navigation bar (as explained in the "Keep It Simple" section).
Map it out
As your site gets larger, providing easy access to all the information on your Web site may get harder and harder. A great solution is to provide a site map, which is an outline or a diagram that illustrates the hierarchy and content of your site and includes links to the most important pages in the site.
The site map can get complicated and busy if you have a lot of pages and links, so it's usually best to create a site map in outline form. Don't put lots of graphics in your site map -- it should be functional above all else. A site map doesn't have to look pretty; it has to make it easy for your visitors to get to any page on the site.
Avoid distracting animations
A little motion brings the Web to life. Too much motion distracts viewers from what you want them to read and see.
When something is flashing in the corner of your eye, reading what's in front of you can be difficult. Animations are a great way to grab attention, but make sure you're not taking attention away from the rest of your site. Creating animations that repeat only a few times is a great compromise. Many animation programs enable you to set the number of loops (the number of times the animation repeats). I recommend that you let an animation run for three loops (or sequences) and then make it stop. Your visitors can always reload the page if they want to see the animation again.
Create animations that look great, attract attention, and then stop moving so your viewers can focus on the rest of the material on your pages.
Don't cram your pages
Don't overwhelm your pages (and readers) with graphics, banners, frames, or other gimmicks. Likewise, avoid large graphics that can take forever to download. Give readers a few broad choices on the front page and then let them narrow their quest for the information they need as they progress through your site. Many designers recommend no more than four to eight links and no more than three images on any page.
