1. T2L3
Conceptual Design
Introduction
Web design often becomes a quite extensive task. Combining text, graphics, and
navigation into a web page is a challenge not to be taken lightly. Designer must be aware
that pages incorporating these elements must also be quick to load, present useful info,
and be easy to use. Navigation schemes must incorporate feelings of where you are,
where you are going, and where you can go next.
When you finish this lesson, you should be able to:
• Define the Site Architecture
• Develop a Client Profile
• Determine Content Priorities
• Utilize Storyboards and Site Plans
• Discuss the RAD Process
• Determine a Development Team Composition
Conceptual Design
• Planning Before Designing
• Navigation Design Considerations
• Determining Content Priorities
• Using Storyboards and Site Plans
The dynamic nature of web development projects requires a manager who has the right
blend of managerial and technical skills to keep it all under control. The following
sequence is followed for media production today:
1.Pre-production
2.Production
3.Publication
4.Post-publication
Each of these steps is essential to the success of a media project. In the pre-production or
planning phase, brainstorming is followed by the development of a plan of action that
carries the production through to fruition. The planning phase is followed by hands-in-
the-dirt production work: the task-by-task process of producing the media in question.
Publication is the process by which the media is made public, and post-publication is the
cleanup, review, and examination of the project to determine its future positioning, or
filing it away as a job well done. The following design guidelines will help you
understand these concepts.
1
2. T2L3
Production Management
• RAD Methodology
• Development Techniques
• Development Team Composition
• Tips for Web Project Managers
Additional Resources
Storyboards
http://www.clat.psu.edu/ist/ist250/design/storybrd.htm
Designing the Structure of Your Web Site
http://whs.wsd.wednet.edu/CHP/Planning_your_Web_site.html - 7293
General Design Considerations
http://www.clat.psu.edu/ist/ist250/design/design.htm
Webmonkey - Design
http://www.hotwired.com/webmonkey/design/?tw=frontdoor
Webreview.com - Web Design
http://webreview.com/wr/pub/Web_Design
Poorly-Designed Sites
http://www.clat.psu.edu/ist/ist250/design/poorweb.htm
2
3. T2L3
Planning Before Designing
You should always define the site architecture and its proposed function before even
opening your design software. Determine which type of site you are designing.
Entertainment or Artistic Sites
- Cool content, thought provoking, fun or educational
- Encourages exploration
Examples of entertainment or artistic Web sites include Superbad
http://www.superbad.com/, SoulFlare http://www.soulflare.com/ , and Atlas.
http://www.atlas.com/
Informational Sites
- Deliver useful information.
- Users of these sites want information fast, and in an easy-to-digest format.
- Don't distract your users with unnecessary GIFs. It's important to arrange the elements
in a logical order by importance, using size, color, and contrast to make it clear what's
available. Consistent layout, navigation, and design will help keep readers from getting
confused.
Here is a set of Client Profiling Questions derived from http://www.secretsites.com/:
1.) Background and Goals
Please provide corporate and industry descriptions, including competitors,
along with a brief critique of their sites. Include:
a. Contact information
b. A description of the group who will be working on the project
c. Who are the decision makers?
d. Who else would be contracting?
e. Who's responsible for what?
f. What human resources do you have for various stages of the process?
2.) Understanding the Project
a. What is the mission statement or summary of your project?
b. What are the basic goals of this project? (e.g., branding/identity
reinforcement, improved access to information, direct sales, corporate
communication, etc.)
c. What outcome will make this project successful?
d. How will you measure success?
e. What are your schedule requirements?
f. What is the budget for this project? Is there an acceptable budget range,
depending on the level and comprehensiveness of services provided?
Please explain.
g. Describe any work that has been done toward designing/redesigning a new
web site.
h. Will the web site reinforce an existing branding or marketing strategy?
How will the web site reinforce an existing branding or marketing
strategy?
3
4. T2L3
i. Discuss any identity/branding assets (logos, other artwork, and fonts) or
issues.
3.) Understanding the Audience
a. What types of visitors do you want to attract?
b. What are your goals for each type of visitor?
c. What are the products/services involved?
d. What are your goals for these products/services?
4.) Understanding Content
a. Where will content come?
b. Will it be new, re-purposed, or both?
c. How often will you add new content?
d. Who will update the content?
5.) Understanding Functionality
a. What functional requirements do you believe to be necessary? (e.g.,
download areas, database-driven web pages, commerce, catalog,
applications, etc.)
b. Who will update these functionalities?
c. Are there extraordinary security issues?
d. Are there other technical issues or limitations?
e. Have you budgeted for hosting and maintenance of the site?
f. If so, what is your budget?
g. Who will maintain the site contents?
h. How will the site be served/hosted?
i. What types of legacy systems/databases are in place?
j. What is your long-term plan for the site?
Before finalizing your research it is best to understand who else is out there doing what
your client wishes to do. Doing a form of competitive analysis is also a very crucial step
in formulating the overall design considerations. Take a tour of the web by attempting to
locate, at a minimum three (3), web sites that relate to the project you are about to
undertake. Use these categories to help define them.
6.) Determine the following when attempting to find comparative sites:
a. Branding in a similar situation to yours (new company, new brand,
established brand, etc.).
b. Appeal to same target group of customers.
c. Whether or not you would build the site if you were in a different industry.
d. Colors, look-and-feel, user interface, layout.
e. Size of site.
f. Size of project.
g. Publishing model (frequency, novelty of content, etc.).
h. Attracting new people to the site (newsworthiness, giveaways, impact,
etc.).
i. Your competitors' sites.
j. Quality of content.
k. Quality of graphics.
4
5. T2L3
l. Functionality (things sites do for people).
m. Community, special features, responsiveness, other categories important to
your project.
n. Overall favorite sites (for whatever reasons)
Also, see the sample Web Site Development Plan. This document contains nearly all the
steps one should go through when developing a web site.
5
6. T2L3
Navigation Design Considerations
Offer Multiple Navigation Approaches
Nobody has figured out the ultimate user interface, so offer multiple approaches to
getting at the same data. For example, offer on-screen buttons as well as hypertext links
for moving about through the site. Offer a table of contents as well as a "you are here"
site map.
Write Good Text Links
When creating navigation links, be brief and to-the-point. Avoid wordiness. Choose
words that convey what the reader can expect on the other end of the hyperlink. The link
language should entice the reader to click, and the link itself should deliver on the
promise. For example, avoid the phrase "To see a close-up picture of this item, click
here." People see "click here" so often they will just ignore it. Instead, write something
like "See a close-up picture of this item."
Design Navigation Buttons Wisely
Complex graphics for navigation - little icons or photographs that link users to particular
pages - are often unnecessary. In most cases, this is overkill. The link will be just as
prominent, and the page will load faster, without using the image at all. On the web,
sometimes less is more.
Example: if you want to design a phone book, use an A as a design element to start the
alphabetical list, not a smiley face or something meaningless.
6
7. T2L3
Determining Content Priorities
Use the site's visual design to establish a hierarchy of content. Lots of sites seem
cluttered and confusing because the site designer failed to identify what was most
important.
You (possibly in consultation with your client, whether internal or external) need
to figure out what's important: make that big and make what's less important
small. Once you determine the priorities, it will be much easier to figure out
where the pieces are supposed to go.
Example: GameCenter's Front Door http://www.gamecenter.com/ targets
specific areas of content. The newest, biggest stories are promoted with images
and blurbs at the top of the page. Animated images promote the popular software
download area.
Depending on your client's needs, one of the following organizational schemes
may work:
Exact Organizational Schemes
This type of organization is straightforward. A table of contents or alphabetical
order is used. Chronological order may be appropriate.
Ambiguous Organizational Schemes
In these sites, information is divided into categories that defy exact definition, and
multiple ways of organizing the information may exist. Consider the library. You
can arrange books by author, by title, by type, and so on. If you have a site where
people might not know exactly what they are looking for, consider using several
techniques for finding the needed information. Some of these techniques include
topical, task oriented, or audience specific (where you store information on the
user and over time build up a user profile.) Another technique to consider is the
metaphor. Just as current desktop computers use a filing/folder desktop metaphor
as an interface, perhaps there is something about your anticipated audience that
lends itself to a metaphor approach.
Many sites today use hybrid schemes for navigation. This makes sense, for it
allows you to reach potentially unknown users. If this approach is used, be careful
to keep your different schemes separated. Mixing them together will only cause
confusion.
7
8. T2L3
Using Storyboards and Site Plans
Storyboards are usually pencil and paper mockups of a site. Storyboards are helpful at
understanding the layout of a particular and the site. It’s an essential tool for helping to
design consistency across the site. It is far cheaper to experiment with designs on the
drawing board and change them at this stage then it is to develop a site without a clear
plan. The first way is intelligent, the second courts disaster.
Storyboarding a perspective web site provides an overall rough outline of what the site
will look like. You should include in the storyboard:
• the overall design concept,
• the style of the site,
• the name of each page (file name and header name),
• which topics go where,
• the links,
• a conceptual idea of where your images go,
• what type, size (on screen and file size) you need for graphics,
• what the layout will look like,
• notes to the programmers,
• and many other things, depending on your unique situation.
Developing a storyboard is easy. First, make thumbnails for each section of the site that
you are designing. Each paper page is a rough sketch of what goes on the web page.
At the same time, you can develop a feel for the relationships between pages and thus a
feel for the structure of the site. The easiest way to do this is grab an empty whiteboard or
chalkboard and start taping your pages on it. Draw the links between the pages.
Then step back and imagine yourself as a user of this site. Does what you did make
sense? There’s a lot to consider here! Review the other lessons on this topic at this time if
you think you forgot something.
A well-developed storyboard also allows you to show your client what you have in mind
before any actual coding begins. If you have a storyboard that both you and your client
agree on, fewer "surprises" will occur duringthe development phase. With a well-
developed storyboard, you can develop each page in turn without "missing" something,
making testing and debugging a site that much easier.
You don't have to be able to draw to produce a storyboard. You need only sketch in the
outlines. 'This image goes in the top right hand corner, this heading is level 2 and
centered, this paragraph goes here' etc. You can draw all this in simple shapes with a few
notes. 'This page is a white background, the navigation links go here and point to' and so
on. The usual purpose of the storyboard is to communicate your perspective development
8
9. T2L3
intentions, not to win an art prize. However, if you are attempting to sell the idea of the
web site to a customer, you may want a storyboard that would win a prize!
Ideally, someone should be able to look at your storyboard, no matter how crude, and
using the right material, put together the same site you would have done. If you have a
large site to develop this can be very useful, allowing you to distribute work to others.
From the storyboard they should be able to develop the pages as you want them. When
you assemble the project you should have consistently designed pages despite having
several different authors.
Here is an example of a storyboard for a simple site. It does not follow all the suggestions
listed above, for in this case (one author who was also the subject matter expert), these
things were not needed. This illustrates the point that each storyboard will be unique,
reflecting the uniqueness of the particular project.
Revise the storyboard and site design as many times as you feel necessary. It's only paper
at this point, and changes are cheap.
9
10. T2L3
RAD Methodology
In many software development circles a technique for rapidly producing software
is employed. Rapid Application Development (RAD) methodology is a technique
employed during various stages of the media development steps.
Significant principles in the RAD process include:
• One project manager manages the project throughout its lifetime.
• Working closely with focus greatly enhances the refining of the final
product.
• Effective communication keeps the development process relatively stress
free and maintains a positive tone.
• Personal conflicts are resolved in a timely manner.
• The practice of using “reusable” technologies and existing materials
reduces the workload and time to delivery.
• Keeping the schedule clear and uncluttered allows for more control over
the workflow.
• All risks that can impede the process are examined and evaluated on an
impact analysis basis.
• Using current management and group software helps keep the
organization informed.
10
11. T2L3
Development Techniques
These methods can serve Web developers by providing techniques to increase
productivity, optimize time spent on the project, and output a quality site.
SOFTWARE CORRESPONDING WEB
DEVELOPMENT DEVELOPMENT TECHNIQUE
TECHNIQUE
Feedback and focus groups are Employees of the Web shop can be
organized and queried. organized into groups and asked to
provide feedback about what their
management and organization
needs are. Focus groups should
also comprise people from outside
of the organization. These groups
can be reconvened throughout the
process to check on the site's
efficacy.
Existing technology should be An inventory of all existing content
reused wherever sensible and (brochures, photos, and interactive
possible. media) will help developers
instantly see what they can recycle
or update. This step will be
especially useful for those
managing a site redesign, helping
determine which information can
be used in the new version.
Scheduling and risk Development and adherence to a
management are imperative for schedule is critical to deploy a
quick yet efficient application quality Web site in step with the
development. evolution of the project and
company goals.
The project is managed by a Assigning a single individual to
project manager. manage a team for the lifetime of
the project ensures that milestone
goals are met. For projects
spearheaded by a single individual,
using management software is
routine.
11
12. T2L3
Development Team Composition
A web development project is centrally managed by a project manager with the following
responsibilities:
• Supervises the logistical aspects of the project.
• Ensure timely completion of all tasks.
A Web Project Manager must have a diverse background in order to successfully act as a
liaison among all diverse technology and business specialists. Being well versed in these
areas will allow them to understand the dynamics of the projects since they must manage
issues from marketing to server administration.
Having a broad knowledge of all these technologies will be very helpful but it is also hard
to find. Many times web project managers come from an area that provides them with
depth in a particular specialty. Over time their depth will increase in other areas.
A Web Project Manager’s responsibilities include:
• Assigns project tasks.
• Runs project meetings.
• Sets the tone and course of a project.
• Capable of envisioning both logistical details and long-term results.
• A familiarity of web design technology and development in order to make
appropriate decisions regarding a given project.
• Delegate responsibilities and trusts team members to get the job done.
• At times, responsible for aspects of client relations, legal issues, and fiscal
concerns.
• Diplomatic and understands corporate and organizational politics.
Additional roles include experts from the following areas:
• Content developers
• Graphic designers
• HTML developers
-Programmers (client and server side)
-Database administrators
12
14. T2L3
Tips for Web Project Managers
Web projects run efficiently when managed by experienced leaders. However, you have
to learn and start somewhere. These following tips will help you out. But also remember
to always seek out other resources to enhance your project leader characteristics and
traits.
• Be aware of your team members concerns.
• Know them and their limitations.
• Create respectful relationships.
• Schedule milestone goals.
• Be aware that natural problems occur ( you are not working in a vacuum).
• Maintain good communication between teams.
• Maintain a cool head and clear thoughts during crisis.
• Motivate through acknowledgment rather than through threats or inducement of
fear.
• Be honest and upright with your team members.
• Recognize team members for their work.
14
15. T2L3
Conceptual Design Summary
This lesson is designed for you to gather information about conceptual design issues in
web site development. When you are finished with the lesson, you should be able to
conceptualize the following:
Conceptual Design
• Planning Before Designing
• Navigation Design Considerations
• Determining Content Priorities
• Using Storyboards and Site Plans
Production Management
• RAD Methodology
• Development Techniques
• Development Team Composition
• Tips for Web Project Managers
A short summary of these topics are listed below. If you do not understand these things,
you should review the lesson at least once. If you are still having difficulty, you should
consider other sources of information that compliment this lesson, such as textbooks,
tutors, and instructors.
The following sequence is followed for media production today:
1.Pre-production
2.Production
3.Publication
4.Post-publication
Planning Before Designing
You should always define the site architecture and its proposed function before even
opening your design software. Determine which type of site you are designing. Use a set
of Client Profiling Questions to assist your efforts:
• Background and Goals
• Understanding the Audience
• Understanding Content
• Understanding Competitive Sites
15
16. T2L3
Navigation Design Considerations
• Offer Multiple Navigation Approaches
• Write Good Text Links
• Design Navigation Buttons Wisely
Determining Content Priorities
• Exact Organizational Schemes
• Ambiguous Organizational Schemes
Using Storyboards and Site Plans
Storyboarding a perspective web site provides an overall rough outline of what the site
will look like. You should include in the storyboard:
• the overall design concept ,
• the style of the site,
• the name of each page (file name and header name),
• which topics go where,
• the links,
• a conceptual idea of where your images go,
• what type, size (on screen and file size) you need for graphics,
• what the layout will look like,
• notes to the programmers,
• and many other things, depending on your unique situation.
RAD Methodology
Rapid Application Development (RAD) methodology is a technique employed
during various stages of the media development steps.
Significant principles in the RAD process include:
• One project manager manages the project throughout its lifetime.
16
17. T2L3
• Working closely with focus greatly enhances the refining of the final
product.
• Effective communication keeps the development process relatively stress
free and maintains a positive tone.
• Personal conflicts are resolved in a timely manner.
• The practice of using “reusable” technologies and existing materials
reduces the workload and time to delivery.
• Keeping the schedule clear and uncluttered allows for more control over
the workflow.
• All risks that can impede the process are examined and evaluated on an
impact analysis basis.
• Using current management and group software helps keep the
organization informed.
Development Techniques
• Feedback and focus groups are organized and queried.
• Existing technology should be reused wherever sensible and possible.
• Scheduling and risk management are imperative for quick yet efficient
application development.
• The project is managed by a project manager.
Development Team Composition
A web development project is centrally managed by a project manager with the following
responsibilities:
• Supervises the logistical aspects of the project.
• Ensure timely completion of all tasks.
A Web project manager responsibilities include:
• Assigns project tasks.
• Runs project meetings.
17
18. T2L3
• Sets the tone and course of a project.
• Capable of envisioning both logistical details and long-term results.
• A familiarity of web design technology and development in order to make
appropriate decisions regarding a given project.
• Delegate responsibilities and trusts team members to get the job done.
• At times, responsible for aspects of client relations, legal issues, and fiscal
concerns.
• Diplomatic and understands corporate and organizational politics.
Additional roles include experts from the following areas:
• Content developers
• Graphic designers
• HTML developers
-Programmers (client and server side)
-Database administrators
-Systems administrators
-Marketing experts
Tips for Web Project Managers
• Be aware of your team members concerns.
• Know them and their limitations.
• Create respectful relationships.
• Schedule milestone goals.
• Be aware that natural problems occur ( you are not working in a vacuum).
• Maintain good communication between teams.
• Maintain a cool head and clear thoughts during crisis.
• Motivate through acknowledgment rather than through threats or inducement of
fear.
18
19. T2L3
• Be honest and upright with your team members.
• Recognize team members for their work.
19
