Class 02

The Week’s Topics

File Organization review
FTP review (File Transfer Protocol)
Design Process
Balanced Design
Web Design Critiques (Target audience)
Project Roles
What is an Information Architect?
Site Map (Site Diagram)
Communication Brief (Project Description, Project Brief)
Preparing Design comps
Image slicing

Assignment 2: Due Monday, March 5

1. Read & watch all the “important stuff” for this week.
2. Create a site map for a website of your choice.

Be sure that it’s 15-20 pages so you have both level 1 & 2 pages (and maybe even level 3). You may use the Monday May Design site map as a template, or create your own using Photoshop or Illustrator. Please be sure to indicate, not only the main sections (Landing pages/Level 1) but also, the sub-navigation (Level 2) and sub-sub navigation if necessary (Level 3). Refer the class notes below for more information on how to create a site map. Please post an image of your site map to your WP blog by our next class.

3. Study for Quiz 1

Quiz 1 will be on Monday, March 5. It will test your knowledge of basic HTML. Please know the HTML for the following:

  1. The four basic tags
  2. HTML code to insert an image into the body of an HTML page
  3. HTML code to add a link to text
  4. HTML code at add an email link to text
  5. Tags for inserting a paragraph, line breaks, unordered lists, ordered lists, navigation, bold text, italic text, headings.

Please study the Basic HTML tags from this article:

4. Read the following chapters from our textbook.

Chapter 6: Planning a Website
Chapter 7: Site Planning
Chapter 8: Content Analysis

Need help with WordPress?

Important Stuff

Review: Web File Naming Conventions

Review: File Organization (Website Directory Structure)

VIDEO: File Organization (Website Directory Structure)

FTP review (file transfer protocol)

Please review the FTP page on this website.

Design Process

Ask any successful web professional the path they take from “I need a website” to “The site you built for me is great!” (Figure 6.1) and you will discover a planning process that has the basic steps of any successful project:

  1. Define project requirements
  2. Conduct research and analysis
  3. Develop design
  4. Build
  5. Test
  6. Deploy
  7. Maintain
Balanced Design
Designing the site just for you

When the project definition is not clearly defined, you can end up making a number of assumptions based on your own preferences. Remember that you are unique and very few people think exactly like you. If you don’t clarify expectations, you are at high risk of disappointing your client. Dilemma:

  • Client does not like new site.
  • Customers do not use the site.
Designing the site just for the client

A more subtle danger can occur even when you take the time to listen closely to your client’s wants and needs. You document all the project requirements and have full support from your client. But you did not consider the goals and expectations of your client’s customers. Dilemma:

  • Client loves the new site.
  • Customers do not use the site.
Designing the site just for the customers

The customer is always right, right? You spend hours researching your client’s customers and you build the site to make the customers deliriously happy. But the customer’s goals and your client’s business goals are in conflict. Dilemma:

  • Client is not satisfied.
  • Customers are using the site and love it.
Web Design Critiques (Target audience)

Food Sense
Eight Hour Day
Washtenaw Community College

Project Roles

The website planning process requires a set of professional roles. Think of these roles as different hats. You can wear multiple hats.
1. Project manager
The project manager serves as point of contact for the client. Responsibilities include: lead the team, help the team be successful, develop a project definition, manage the task list and timeline, help keep the team on focus and facilitate communication.

2. Information architect
The information architect analyzes, organizes and labels information on the Web to be intuitive and usable.

3. Usability analyst
The usability analyst creates a usability testing plan, conducts tests and prioritizes and communicates usability issues to the team.

4. Writer/content manager
The writer/content manager writes and adapts content specifically for the Web.

5. Visual designer
The visual designer develops design options that meet project goals based on knowledge of design principles (balance, rhythm, proportion, dominance); design elements (point, line, shape, color, typography); and user-centered design (usability).

6. Developer
The developer builds the front-end (HTML, CSS, JavaScript) and the back-end (server-side scripting, database) of the website.

7. Quality tester
The quality tester creates a realistic testing plan, conducts tests and prioritizes and communicates quality issues to the team.

What is an Information Architect?

The Information Architecture Institute defines information architecture as:

  • The structural design of shared information environments.
  • The art and science of organizing and labeling websites, intranets, online communities and software to support usability and findability.
  • An emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

So, what does an information architect do? Analyze, organize and label information on websites so regular people (not involved in the design of the site) can actually find what they are looking for.

Listen to how users describe sites built on solid information architecture versus haphazard information architecture:

  • Solid information architecture—well organized, good navigation, intuitive, logical, easy to find answers and complete my task.
  • Haphazard information architecture—confusing, frustrating, cryptic, inconsistent, hard to use.
Information architecture deliverables

When an information architect is involved in the website planning process, she or he will develop the following documentation:

  • primary audience goals
  • persona(s)
  • current content inventory
  • competitive analysis
  • content strategy statement
  • content outline
  • content gap analysis
  • site diagram
  • page description diagrams
  • wireframes
Site Map (Site Diagram)

A high-level architectural blueprint of the site. Maps out the organization and labeling of major areas of the site. Figure 6.5 shows a simple site diagram for a university website. Here is a link to another example, Monday May Design site map, that you’re welcome to use as a template.

Creating a Site Map – How to draw a site map

Communication Brief (Project Description, Project Brief)
Interview the client

The best way to conduct a client interview is to have a prepared set of interview questions. Whenever possible, share these questions with the client in advance so they have a chance to think about them. Conducting the interview in person will give you the opportunity to adjust the questions based on the client’s answers. Let’s look at a set of client interview questions based on the five Ws and one H model (Where, When, Why, Who, What, and How).

Client interview—website planning
Project Name:
Contacts for this project: (name, email, phone)

1. Where?

  • Preferred/existing domain name (URL):
  • Domain name already registered: Yes/No
  • Preferred/existing web server:

2. When?

  • Preferred target date for launching the new site:
  • Any external factors that infl uence/affect the schedule:

3. Why?

  • Business problem(s) you hope to solve with this site:
  • Primary business objectives/goals for this site: (objectives should be measurable)

4. Who?

  • Primary customer/target audience:
  • Target audience description (age, gender, education, occupation, income, preferred browser, computer device, Internet skill level…)

5. What?

  • Why do your customers need you? What is the most important benefi t you offer (from your customers’ perspective)?
  • Who are your direct competitors? (include URLs)
  • What do you offer that is different from your competition?
  • How do (will) customers use your site? What are their goals?


  • Adjectives describing how you want visitors to perceive the new site.
  • Is this different than their current perception?
  • URLs of sites you like. What do you like about these sites?


  • Do you have existing content for the site or will you create new content? Who will write the new content?
  • Any visuals or content you want to use from your current site or marketing materials (logo, color scheme, navigation, naming conventions, etc.)?


  • Do you already have a content management system?
  • Do you already have content in a database? Database Type (Access, MySQL, Oracle…)?
  • List special features you would like to have on the site. For each intermediate or advanced technology, explain how this feature will solve the primary business objectives and benefit the target audience and their goals.

Basic: Search engine
1. Blog
2. Bulletin board
3. Login (for restricted areas)
4. Surveys/polls
5. Wikis

1. Customization/personalization for users
2. Database/dynamic content
3. Ecommerce
4. Rich Internet apps (AJAX, Flash, Java, Silverlight)
5. Security

Any additional programming/feature requirements?
6. How will you use resources to pay for, market, and maintain the site?

  • Budget: Pick Two:
    Low Cost, Fast Timeline, Full Featured
  • Marketing:
    Do you have a marketing strategy in mind to promote this project? If yes, could you describe it?
  • Maintenance:
    How do you plan to keep the content on the site current?
    How often should content change on your site?
    Who is responsible for providing and updating content?
Project brief—10,000-foot view

Now it is time to take what you have learned during the client interview and boil it down to a one-page project brief. The purpose of the project brief is twofold. First, you will use it to confi rm that you understood what the client said they wanted/needed. Second, you will use it to share the big picture with anyone who works on the project. The project brief reduces ambiguity and helps keep the project team focused on the big picture.

Here are the elements of a project brief:

  1. Project name:
  2. Big picture:
  3. Project summary: description of the project in a sentence or two. Imagine you have to explain your project quickly to a colleague in the elevator.
  4. Business objectives/goals: concise list of measurable objectives and goals discovered in the client interview.
  5. Preferred date for launch by client: ability to meet this target date is still subject to fi nal agreement on budget and features.
  6. Target audience:
    1. Audience description: age, gender, education, occupation, income, preferred operating system, browser, computer device, Internet skill level…
    2. Audience objectives/goals: what does the audience want and/or need?
  7. Perception strategy:
    1. Current perception: list three adjectives describing current audience perception.
    2. Desired perception: list three adjectives describing desired audience perception.
    3.  Strategy: briefly describe how the new site will produce the desired perception.
  8. Message Strategy:
    1. Primary message: what is the primary message you want to convey to the target audience (in a short sentence or phrase)?
    2. Strategy: briefl y describe how the new site will convey the primary message.
  9. Competitive Advantages: Short list of key business strengths that give an advantage over the competition.

Here a Sample Creative Brief compliments of Goto Media.

Preparing Design comps

Review: Image Slicing

Additional Resources
Suggested Reading

How to Make Slicing Suck Less

Working with Photoshop and Dreamweaver

Working with Fireworks and Dreamweaver

Adobe Fireworks CS5 software enables you to create expressive, highly optimized graphics for the web or virtually any device — from smartphones to kiosks to embedded displays. Produce websites, user interfaces, and rich prototypes that are editable in both vector and bitmap modes. If there is one other application I would encourage you to learn for Web it would be Fireworks. The video below give you an idea of one of the ways it can make the production process easier.

Quickly Transform Photoshop Layouts

Optimizing photos as JPEGs
Photoshop CS5 for the Web | by Jan Kabili

View this entire Photoshop course and more in the Online Training Library®.


  1. Minori Hosoyamada February 27th

  2. ernie sanchez March 3rd

    Comment Arrow

    ernie sanchez wordpress….sorry for the delay

  3. Drew Polk March 4th

    Comment Arrow

    Wow the Fireworks video just blew my mind. Would be such a time saver!

    Have you used this tactic? It shows clean code, but they also say that some tweaks need to happen manually. Are the tweaks big? Worth it?

  4. jamie March 4th

    Comment Arrow

    Hi Drew,

    I think Fireworks is great for quick and easy prototyping a website, but I would not exclusively use it to build a professional website.

  5. Hector Rodriguez March 4th

    Comment Arrow I am not sure that you received my prior commects with my wordpress blog

Add Yours

  • Author Avatar


Comment Arrow

About Author


Instructor for Graphic Design 66