Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Site maps, Storyboards, and Specifications: A Sketch of Web Site Design Practice

CIS 122

Stephanie Alexis

on 25 February 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Site maps, Storyboards, and Specifications: A Sketch of Web Site Design Practice

Web Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific purpose. Web design is a similar process of creation, with the intention of presenting the content on electronic web pages, which the end-users can access through the internet with the help of a web browser.
Tuesday, February 25, 2014
By: Stephanie Alexis & Josh Westbrook
What is Web Design?
Story Boards
Possible solutions are generated and explored

Information design, navigation design, rough graphic design

Emphasis on structure

Multiple designs are generated so that one can be chosen
The design is refined and detailed

Images, icons, and typography, and color are added

example of each class of page is created
Production refers to the creation of artifacts that will be delivered to the client to embody and represent the design
Mock Ups
Determine and clarify the scope of the project, the desires of the clients, and the characteristics/needs of the intended audience.

clarify what is expected
A storyboard is a representation of a particular interaction sequence.

reflect only the navigation links required to accomplish the task represented.

Used to show how many steps a task will take
Site maps, Storyboards, and Specifications:
A Sketch of Web Site Design Practice

Design Exploration
Design Refinement
Site Maps
• How is that topic relevant to web programming?
• Why is the topic important (or not)?
• Why is the topic considered interesting to the presenter?
• What research is being done regarding the topic?
Shows exactly what the site should look like but is not interactive

Look almost exactly like the finished product will look like

often made in graphic editing software like Photoshop
Uses the site map, mock up, schematics and story board to create a working version of a mock up

first draft of the website

Diagram showing the structure of a site
Show Navigation Structure
Helps organize subsections of website
Shows how the page layout could affect the content
Shows the content that should be on each page

Has more detail that goes in to the prototype
Full transcript