Web Design
- From Concept to Execution
- Building an Outline
- Converting your Outline into a Site Map
- Navigation Design
- Click-Through Prototype
From Concept to Execution
- Concept
- Architecture
- Design
- Execution
- Testing
Concept
- Define the audience of the site (scope)
- Determine what the site is supposed to do (goals)
- Define how big the site needs to be (size)
Architecture
- Map the site out on a piece of paper
- Define the navigation structure of the web site
- Determine what technologies to use
Design
- With a good idea of the site's goals and structure, put a "face" on the site
- Assemble user interface and navigation ideas
Execution
- Begin production (up to this point you are only allowed to do a mock-up)
- Includes graphics, HTML, media, and content
Testing
- No web site should go "live" without being thoroughly tested
- Check for things like:
- Bugs in your code
- Links that go to the wrong pages
- Spelling errors
- Also make sure the web site works on different browsers
People Involved in Building a Web Site
- Besides you, the programmer, many players are involved:
- Marketing (big picture)
- Producers (funding)
- Designers (navigation and user interface)
- Media specialists (logos, animations, and such)
- HTML coders (HTML)
- Programmers make the web site dynamic (that is, automated)
- Web pages are created dynamically by populating templates from a database
- Programmers are responsible for scripts, databases, etc.
Building an Outline
- Make a wish list
- Brainstorm on the content that the site will include
- Gives you an idea of its size and scope
- Group content
- Organize the wish list into logical groups
- For example, all content related to the company, and to products
- Create categories
- Some groups will be similar
- Group these groups into categories
- Aim for few categories (5-7)
- Build an outline
- Categories become main ideas
- Within groups are lists of their content (no more than 2 sublevels)
Outline Example
- An outline is the basis for creating a diagram of your site
![]()
Five-to-Seven Rule
- The outline is the foundation of your site structure
- To ensure that the site is easily navigable, keep the number of categories (and items in groups as well) to between five and seven, or less
- Categories often become navigation links
- People will have difficulty navigating, if offered too many choices
![]()
Using an Outline for Navigation
- On many web sites you will find an outline of the site called a "site map"
- Although not a visual representation of a site map, as we will use the term below, it helps the user navigate the site (it provides more of an index)
![]()
Converting your Outline into a Site Map
- Draw a box to represent each page of your site
- One box to represent the home page
- Below this box, one box for each category on your outline
- Stack subsections (groups) below each category
- As you add detail and navigation information, this diagram turns into a site map
Site Map
- A site map is a diagram that helps you visualize each page of a web site before you build it, and its location with respect to other web sites
![]()
Sketch Out Page Content
- A site map should also specify the technology used on each page
- Ask yourself if the page will:
- use frames or tables?
- contain media that need a plug-in (such as Flash)?
- be populated from a database?
Naming Conventions
- As you add more detail, your site map should establish the name of each page
- Naming conventions are important, because the people working on the site must agree on how to call the pages (e.g. when they link to them)
- On a large site indicate a naming scheme rather than naming each page
![]()
Designing a Site Map
- Showing how pages link to each other
- Showing the structure of each page
- Indicating special user interface elements
- Representing interactions with databases
Showing How Pages Link to Each Other
- Show direct links as one-way arrows between pages
![]()
- Show cross-navigation as two-way arrows between pages at the same level
![]()
- Show links to shared pages -- that most pages link to -- as symbols
![]()
- Show redirection as dashed arrows (e.g. an animation flowing into the home page)
![]()
Showing the Structure of Each Page
- Indicate a page that uses frames by using lines to segment the page
![]()
- Show that a page is built with tables by drawing boxes inside the page
![]()
- Label tools on a page (such as search boxes, and login fields) using symbols, or by drawing a small box on the link connecting two pages
![]()
![]()
Indicating Special User Interface Elements
- Draw a box and place a symbol (e.g. icon for QuickTime movie) inside it
- Complex embedded applications should be documented separately elsewhere
![]()
Representing Interactions with Databases
- Indicate pages that are populated from a database by drawing a dotted line from the page to the database; may show templates as a stack of pages
![]()