The document outlines the typical stages of a web design process, including creating a sitemap, wireframes, design comps, and setting up the site in Dreamweaver. It discusses creating a sitemap to define the site structure, using wireframes to visualize layouts, developing design comps with visual elements, and setting up templates and styles in Dreamweaver for a consistent design. The goal is to plan the information architecture and design before development to ensure everything is properly structured and presented.

1. BEGINNING SITE
DESIGN
DREAMWEAVER 2.1
Sitemaps Wireframes Comps Storyboards

2. BUILDING
YOUR
DESIGN
Brief
The typical web design process may be
comprised of several stages, including any of
the following:
• Provides a statement of technical, design, and idea goals for the web project
Research
• Research involves a range of activities including a review of related web designs,
analysis of competitor sites, user flows, personas, market analysis, use cases, and
more.
Brainstorm
• Conceptualizing stage based on the brief and research stages in which many ideas
are generated in a short amount of time.
Creative
Solution
• Briefs, research, and ideas are combined to create a clear design direction.
Technical specifications, information architecture diagrams, functioning
wireframes, and design comps. Presented to clients for feedback, website
functionality is developed and tested, and revisions are made.
Production
• Production fully realizes the web project. Design comps are finalized and
integrated into the wireframe prototype, and the web project is scaled up to full
production.

3. Sitemaps: Building Your
Foundation
A sitemap defines the structure and outline of pages your site is
going to contain.
Home
Updates
Info Sales Design Contact
A sitemap is
the FIRST
STEP in Site
Design, after
you have
gathered
your
information.
Allows for you to plan, collaborate, and communicate the idea for the
presentation of your site.
Client Goals + User Needs + Content (Old and Needed)
Start with a blank slate. Do not depend on norms/expectations of old sites,
or other sites. For example, every site does not require an “about” page.

4. Wireframes: Are a visual guide to outline the basic
components of a website.
Key Elements in Wireframes: 1. Interface Design 2. Navigation System 3. Main Content
 Wireframes let you
experiment with
layouts.
 Hand-drawn, or
digital.
 Outline guide when
code developing
 Prepare for changes
by client, they provide
an easy re-do.
When creating a
wireframe, specify
your Design
Elements:
• Graphics
• Text
• Navigation
• Color
• Visual hierarchy
• Design limitations
• Multiple Screens
Remember your Design Elements: Balance + Consistency
= Unity

5. Design Comps
(Comprehensive Artwork)
A design comp is a design proposal that
provides a rough visual draft of the
completed interface.
 Comps include:
 Graphics
 Design Elements
 Navigation
 Content Areas
 Discussion
 Models should be built using Fireworks,
Photoshop, or Illustrator.
 Two designs are submitted for review with
home page and one internal page.
 Explore the possibility of purchasing
professionally available designs and
customizing them.
When Creating the Design:
 Build composition in layers.
 Place all page elements in the
composition at the actual size.
 Use the right fonts and color you have
determined in the initial site plan.
 Include a Fixed or Fluid (expands or
contracts) model.
 Identify a Responsive design (width
changes based on media/device) if planned.

6. Converting Into Web Pages
HTML is used to structure the
page layouts and content.
CSS is used to create page
styles and appearance
(presentation).
JavaScript is generally used for
interactivity.
 The HTML/CSS code
exported from Photoshop or
Fireworks should generally be
avoided for full-page layouts:
 Not very efficient
 Dreamweaver should be used
instead
Structure and presentation should be separate and independent.

7. Site Setup – Starting with
Dreamweaver
What is
Dreamweaver?
Dreamweaver is a professional software
used to create and manage an entire site
including all links and assets.
Dreamweaver builds standards-compliant
HTML and CSS and allows access to
JavaScript.
Dreamweaver features for design include:
Add-ons
Widgets
Page
layouts
Extensio
ns
Template
s

8. Setting Design Basics in
Dreamweaver
Layouts: Pre-designed layouts for easy
use.
1. Fixed and Liquid width
2. Includes: CSS and HTML
Fluid Grid Layout: Used for
“Responsive Projects”, that
changes with devices
Templates:
Maintains overall consistent layout and
creates related pages for you.
Templates ensure consistency
within sites.

9. MAINTAIN
CONSISTENCY
Colors Fonts
 Build
custom
color
swatches
 Store in
“Favorites”
for
consistent
outline
 Use the built in web-safe
fonts in Dreamweaver
 Add sets when needed.

10. Vocabulary
1) HTML is used to structure the page layouts and content
2) CSS is used to create page styles and appearance (presentation).
3) JavaScript is generally used for interactivity.
4) Wireframes: Are a visual guide to outline the basic components of a
website.
5) A sitemap defines the structure and outline of pages your site is going
to contain.
6) Comp is a design proposal that provides a rough visual draft of the
completed interface.
7) Fixed or Fluid (expands or contracts) model.
8) Responsive design – width and design changes based on
media/device.