APGR72 Week 1 Lecture (Page 1 of 3)

This week we are going to look at some fundamental aspects of screen design. First we will consider the "web medium" itself, examine how sites make effective use of it, and evaluate what characteristics make them effective. Next we will discuss the planning steps involved in designing a web site. Lastly, we will explore four basic design principles that can help to create clean, organized web designs.

The Web Medium

As a communication medium, the web is different from anything that has preceded it. By way of comparison, let's look at the relative advantages and disadvantages of print versus web. Take a moment to jot down some of the pros and cons of both media...

Finished?!! Here are some pros/cons I came up with:
Print vs. Web

It's true... you can't surf the web in the bath (yet)! On the other hand, how easily can you locate up-to-date airfares in print? Web data is easily updatable, but with print you can "feel" the paper! The web definitely has the upper hand when it comes to certain activities. For example: e-commerce (shopping carts, online payment, global distribution etc.), research (search engines), music (mp3 downloads) etc. Let's look at a web site that makes full use of the advantages the web medium has to offer:
http://www.amazon.com/
So how is Amazon.com making good use of the web? Here are some ideas to get you going... The site provides rapid search access to a wide variety of products. Not only that, but it also recommends other goods based on that search. Through the use of cookies, Amazon is able to personalize your shopping experience by remembering what you looked at last visit or by displaying a stored list of favorites (wish list). The site is highly interactive. Patrons can read reviews by other shoppers or write one themselves. An online shopping cart makes purchasing easy (too easy!).

So next time you're surfing web sites, take time to consider how they are using the web and how you might apply what you observe to designing web sites that make effective use of web features.

Characteristics of Effective Web Sites

Take a moment to consider what makes a web site effective. When you visit a particularly good web site, ask yourself "why does this site work?" Is it the screen design? The structure? The content? The features? Did you think of research and planning? No, probably not. But planning is a key factor in effective web site development. A well-planned web site will:

1. Be focused on its main purpose and goals
2. Be appropriate for its main topic and target audience
3. Meet client's needs
4. Make good use of the web medium
5. Have an understandable structure and interface
6. Be visually appealing
7. Have accessible, easy-to-read content
8. Work properly (links, scripts etc.)

Overview of Web Site Planning Steps

Before you dive straight into designing your home page, it's essential to do some background research and planning. Here is an overview of necessary planning steps:

1. Do background research (interview company, research business etc.)
2. Write a design plan with clear goals
3. Draw a organizational flowchart/storyboard for project
4. Develop a production timeline and set deadlines
5. Brainstorm the design elements (draw thumbnails/roughs of the screen design)

Sample of a very detailed site plan
     This site was developed by a team of SRJC web design students for a group project presentation. It is a great example of thorough planning. There is a design plan with clear goals and a detailed storyboard/flowchart for the site. (Please note: most web designers would not build an entire site for planning a web site!)

1. Do Background Research

The following are some important areas to consider. It helps to develop a checklist to make sure that key information is not overlooked:

TOPIC: Gain an understanding of the nature of the business for which you are creating a site. (This is important in print design too.) Read the company's print literature, interview the client.

PURPOSE: What is the primary goal(s) of the site (ask the client)?

TARGET AUDIENCE
1. Research the target audience (interview client and do independent research: read statistics or market research, view competitors' site, talk to potential users)
2. Consider the following aspects of your target audience:

Demographics (age, gender, educational level, profession, income bracket),
Culture (multinational, language, culturally appropriate icons, navigational metaphors, colors - taboo colors, formats - dates, names, symbols)
Disabilities (text size, color choices, sound levels - control, interaction speed, special input devices)
Interests - appropriate entertainment (level of detail, vocabulary, multiple pathways, games, trivia, humorous touches, jokes)

TARGET TECHNOLOGY
What kind of technology will be used to display this site? Primary platform, speed of computer, web access (DSL, modem), browser (IE, Netscape, AOL etc.). Are new technologies appropriate? (Try to avoid including fancy bells and whistles for the sake of it.)

CONTENT (subject matter, information, media in document)
Existing content: What format is it in? What condition is it in? How much is usable? Does it need updating or converting?
New content: Who will create content? Are there copyright/usage issues? (secure copyright permissions early)
What is the best way to organize the content to meet objectives/goals of project?

CLIENT NEEDS/PREFERENCES: Listen to your client and take good notes (use a checklist). Find out about their design preferences, colors, sites they like. What are their expectations? Make sure you establish a clear understanding of the scope of the project before starting it.

BUDGET (time and money): how much time do you anticipate spending on the project? What is the going rate for web development in your area? Who is responsible for decision making and payment? How will you structure payment?

DEVELOPMENT RESOURCES: What is needed for various aspects of the project?
Hardware, software - what is best for job?
Personnel (do you need people with certain skill sets, e.g. programmers)
Host - select a web hosting solution that is appropriate for the needs of site.

2. Write a Design Plan

Your design plan is a written guide to your project. If you take the time to write a careful, detailed plan you can avoid a lot of reworking further down the road. Your plan should include the following:

1. A written summary of the goals, topic, purpose, target audience, target technology, content, client preferences, budget/cost and development resources (listed above)
2. An written overview of the categories and pages to be built
3. A description of the features of the site (search engines, scripts, Javascript, input forms etc.)
4. A visual diagram of the site (flowchart/storyboard)

3. Draw an Organizational Flowchart/Storyboard

A flowchart is a visual outline of the navigational scheme. It shows how each page is positioned in the hierarchy and how a user might navigate through the interactive document. Flowcharts have several purposes:

To organize and plan a web development project
To demonstrate site navigation
To enable clients and team members to see structure

4. Develop a Production Timeline and Set Deadlines

It is essential to develop a timeline and set deadlines for a web design project both for you and your client. One thing to remember is: everything takes longer than you think. Try to anticipate problems that might affect a deadline and communicate your expectations to your client. For example, if they start adding extra pages, make sure they know the deadline will be put back. First and foremost, be sure to set realistic goals and timelines.

5. Brainstorm the Design Elements

Brainstorming is a great way to generate screen design ideas for a web project. Most designers will start off with a humble pencil and paper and draw small thumbnail sketches that explore various design ideas. (Thumbnail sketches are small!.) They might sketch different ideas for screen layouts and navigational controls, for example. After the thumbnail sketches, the design ideas are developed into rough sketches that contain more detail. These are later refined into onscreen comps which are shown to the client.

Please note! You should not skip the "thumbnail" phase of design. It is an essential part of the creative process.

Now click on the "next" button to access the next page to learn about the basics of screen design: