WELCOME

Seven Steps to Great Page Design

Introduction

Are there only seven steps to great Web page design? Are there really any steps at all? Are my steps the only way to approach the process? The answers are no, no, and no.

Many would say that turning design into a number of steps defeats the creative process. For accomplished designers who have developed their own internal steps and processes, this probably true. But for anyone without extensive design training and practice, seeing how someone wlse approaches a design problem and appliew steps can be of great help.

You'll find that my seven steps don't precisely follow the sequence of chapters. This is because, at any given point in the design process, you'll probably have to be concerned with issues that apply across the entire project. Plus, this process is decidedly non-linear. You'll have to circle back many times to coordinate various page elements and resources.

Step One: ANALYZE Your Audience and Yourself

You must also analyze your own interests and abilities. Do you have the design abilities to deliver effective and visually pleasing pages? Do you have the technical expertise to deliver media-rich pages that rely on scripts and server-side resources?

Here are several techniques that are available to aid this analysis process:

1. Write out a problem statement. In one short paragraph, define exactly what the page is supposed to accomplish. Refine this statement until is't an unambiguous description of the problem.
2. From the problem statement, develop a product description. This describes what will be created to solve the problem.
3. Define the customer. Using a parameter list, define every vaeiable around which the customer can be defined - such as age, occupation, sex, marital status, income, education, geographic location, hardware, and software, just to start the list.
4. List the resources. What do you have available to accomplish the task, in terms of both equipment and expertise? What can you do yourself, and what will you have to outsource?
5. Create a development schedule. How much time is availble to create a product that solves the problem with the resources available? A restricted time schedule might necessitate securing outside resources. Limited technical skills might mean a totally different design.

Step Two: Establish Your FUNCTION and Structure

Consider the following suggestions on the design process:

1. Work in a design medium that makes sense. If you're comfortable with markers, make sketches. If you prefer diagrams, create boxes and flow lines. A tactile designer might choose to pin 3x5 cards up on a wall. A computer-savvy designer might decide to work in a site-building application.

   Note It would be unfair to discourage someone who feels comfortable designing directly with computer tools from doing so. Still, when using computer tools, a designer is automatically limited by the tool set available in that application. For example, rather then thinking frames right away, you might be better off thinking about the types of information the need to be presented simultaneously. Then, after the functional relationships have been established, choose the most efficient and effective tools to deliver the design. It might be frames, but then again it might not.

2. Design first with function in mind, avoiding specific content. Content almost always gets ion the way of function and structure. For example, if you start thinking about a map right away rather than the function of choosing a geographical location, you have limited your design options.
3. Work from a big picture to individual information. Don't sweat the details at the beginning. Let individual items naturally fit into the structure.

Step Three: Create an Effective VISUAL DESIGN

How can you identify sources of erffective design? Here are seven ways:

1. Subscribe to as many design publications as you can, such as ITC's U&lc. Always be on the lookout for collections of award-winning designs such as the Art Director's League Annual Competition.
2. Create "swipe files" of designs that catch your interest. You might use manila folders of three-ring binders with document protectors. To be efficient, organize the clipping sby subject - page design, typography, illustrations, charts and graphs, and so on.
3. Spend several hours each week critically looking at pages on the Web. When you see something you really like, screen-grab the image and make a print.
4. Stay up-to-date with Web developments. You should always have the latest HTML specification handy, as well as a compendium of plug-ins and file formats.
5. Be a book collector, and not just a collector of Internet books. Collect books on nature, architecture, industrial design, history - just about everything. Good design is timeless, so don't worry about something being obsolete.
6. Design for your target audience and not for yourself.
7. Try as many solutions as possible, and get feedback from productively critical associates. Execute a final solution in a drawing application, and bring it in to test browsers as a full-size page.

   Note Don't design the look of your Web page while totally divorced from considering the content. Let the function determine the look and feel of the page, but keep in mind the content that will eventually fill the page. It would be a shame to design highly visual pages only to learn later that the content is almost totally textual.

Step Four: Assemble the CONTENT

Because content generation usually can't wait for the design to be formalized, you can take the following steps to ensure that the content and your design are compatible:

1. Modify content elements that already exist and that you have rights to.
2. Use a subject matter expert (SME) for any content that's outside your field of expertise. Don't feel self-conscious about asking for help.
3. Set up continuing lines of communication between you (the designer) and others who might be generating content. Establish specifications for content (such as application, file format, compression, file naming conventions, and so on).
4. Start proofing text and graphics early in the process. Consider reading level and vocabulary along with spelling and grammar. Keep in mind visual-spatial abilities when analyzing images.
5. Secure media with as much information as possible. For example, start with 24-bit TIF or JPG images even though you might be reducing everything to 8-bit GIF format. Record the best audio and video you can.
6. Create a logical directory structure for the content and be sure to back up the files.

Step Five: Design and Test a Functional SHELL

If you have been paying attention, you have noticed that so far, we haven't concerned ourselves with the actual software tools used to deliver the pages. That's because if you design the pages with specific tools in mind, the pages will be predestined to look a certain way.

When building a functional shell, you translate the functional structure ofyour pages into a working prototype. THis prototype doesn't have content yet. To develop a functional shell, follow these steps:

1. Contact the administrator for the server you'll be using. Find out how the administrator wants you files organized and what scripts are already available. Let the administrator know which unsupported file types you might be using and their associated MIME types.
2. Develop the functional shell using realtive directory structure and links. Do the initial development locally, using the same directory structure you'll be using eventually on the server.
3. If you're using a design for which you already have an HTML template, use this template and substitute placeholder graphics and text.
4. Translate the structure into Web pages tith sufficient test to make it easy ot tell where you are. Test, Test, Test!
5. Keep a logn of this images used in the normal accessing of the pages. This way, you can adjust images to build on pieces that are already cached.
6. If you're linking to other Web pages, create these links as simple jump lists. Link to the exact spot of interest rather than the opening page or index.
7. Load the functional shell on the serer and test it. When it works as designed, you'll already have the site structure in place when you finish the final version.

Step Six: Fill In the CONTENT

For one thing, initial image decisions might turn out to not fit within the page design. Also, text might not "copy fit" as anticipated. You always have to do some fiddling to make it all fit.

If you're the content expert and the designer, you might be able to head off major compatibility problems. Other wise, smooth implementation is related to good communications - among the designer, illustrator, writer, editor, and server administrator. Pouring the content into pages that work is actually a minor part of the entire process. Follow these steps to bring content into the functional shell:

1. Get the pages running locally and individually first.
2. Work in a modular fashion. That is, get a group of related pages running smoothly. Use the natural structure to group the pages.
3. Don't be afraid to change an early design decision. You might have made an incorrect assumption. Or, the technology might have changed in the time it took to assemble the content and create the functional shell.

Step Seven: Test and EVALUATE the Publication

Not only does the current design project profit from careful testing and evaluation, but the lessons learned here can be applied to subsequent pages. Follow these steps when evaluating:

1. Test the functionality of all internal links and resources. It's easy to save an image in Photoshop format and cal it .GIF, or put an HTML file in the wrong directory. Make sure that if you're using .html as your page file extension, your operating system hasn't truncated it to .htm.
2. Check the accuracy of all external links. Nothing is more aggravating than linking to external pages that no longer exist, that have been moved, or that have changed to the point that they aren't relevant.
3. Test the pages on a variety of browsers. From you customer research, you should know th target equipment. What about others? Have you used browser-specific client recources? If so, how does this work on other browsers? Does the whole thing blow up? What about colors, fonts, and browser window sizes?
4. Test the pages ona variety of connections. You think your customers will be on a high-speed T1 line, but what if they want to work at home on their slower 28.8 dial-up modem? How till this impact the performance of your pages?
5. Test the pages under high-traffic conditions. The best time to test Web page response is at 10:00 a.m. California time. By then, all the serious and casual Web surfres on the coast are up and jamming the Internet. If your server and pages respond adequately during peak traffic, all other times should be more than acceptable.
6. Test the pages on a variety of users. If your pages are of general interest, enlist co-workers, friends, and children to test the pages. Keep notes and observations. You might not be able to make the changes on this version of the page, but you'll want this information as the pages are constantly updated.

When You are blessed, please...

Sign My Guestbook

View My Guestbook

You are visitor to be blessed in Wisin's HomePage since April 1^st, 1998.
Thanks for visiting. God bless you.

Don't hesitate to send me your oppinions and suggestions at wisinss@hotmail.com

Please come back soon and visit me.

This page was updated on April 1^st, 1998

English: [Computer|Healing|Index|Internet|Leadership|Religion|Nature|Personal|Salvation]
Indonesian: [Celaka|Jodoh|Berlin|Istilah]
Computer: [Tips|HTML|Links]
Personal: [Indonesia|Identity|Conversion|Fellowship]

---

This page hosted by Get your own Free Homepage