Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
Site Planning & Structure
22-3375 Web Design I // Columbia College Chicago
Quiz Review
Yes, you can use your notes.
Anatomy of a Web Page
Understanding Conventions & Expectations

Users have certain expectations when they visit a website,
expectations that, if not met, could result in them having trouble
understanding how it works. Therefore, it's important that
websites are designed so that users can predict how things will
work and where certain elements will be.
Conventions in Life
Web Design Process
Web Design Process
Web Design Process
Some ways that conventions have developed

cultural conventions
limits of technology
familiarity from other media
ease of use
advertising
common platforms
trends/follow-the-leader
The First Web Page (1992)
Cultural conventions
Limits of technology
Limits of technology
Limits of technology
Limits of technology
Limits of technology
Familiarity from other media
Familiarity from other media
Familiarity from other media
Familiarity from other media
Ease of use
Advertising
Advertising
Common platforms
Trends
Trends
Trends
Trends
Trends
Trends
Trends
Trends
Trends
Trends
Trends
Basic Components of Most Sites


Header
Feature Area
Body/Content
Sidebar
Footer
Background
Header
Web Design Process
Web Design Process
Web Design Process
Web Design Process
Web Design Process
Feature Area
Web Design Process
Web Design Process
Web Design Process
Web Design Process
Body/Content
Web Design Process
Web Design Process
Web Design Process
Web Design Process
Sidebar
Web Design Process
Web Design Process
Footer
Web Design Process
Web Design Process
Background
Web Design Process
Web Design Process
Web Design Process
Student Presentations



How does the design use white space to create
hierarchy and rhythm?

Give an example of how the site uses one or more
gestalt principles

Give a simple breakdown of how the site is divided,
how many types of containment areas are used?

Does the site clearly use a grid system?

Is there a clear logic to the spacing between elements,
type size, and line-height?

What aspects of this design would you like to carry over
to your own work?
Discuss Project 1
Site Planning
Standard Web Development Process



1     Planning

2     Design

3     Production & QA

4     Launch +
Web Design Process
Where does the
web designer fit in?
Graphic/Communication Design
Referred to as the “look & feel” of the site, but it is more than
that. The skill of using type, imagery and layout to convey literal
and emotional messages.

+
UI (user interface) Design
The skill of creating consistent, intuitive and engaging
interactive systems. Include usability issues: is the user able to
effectively complete their goals?

+
UX (user experience) Design
An umbrella skillset that asks the question: was the interaction
positive? How could it be better?
Standard Web Development Process



1     Planning

2     Design

3     Production & QA

4     Launch +
Planning

This stage might include:

1. Statement of Work (SOW)

2. Creative Brief

3. Research and analysis: site goals, competitive
research, defining the user, defining the shape and
scope of the site.

4. Technical requirements

5. Schedules

6. Budget
Web Design Process
Web Design Process
Research and Analysis: Defining the user

Before you can start figuring out the shape and structure, you
need to have some idea of who you users are, and why they
would come to your site. Unless your role is strictly on visual
design, this is usually the first stage that a UI/UX designer is
engaged.

This analysis can take the form of

use cases,

personas,

and/or user/task flowcharts.
Use Case
Personas
User/Task Flows
Research and Analysis: Defining the shape and scope

The sitemap is the start of the IA phase of a project (information
architecture). It is a schematic showing the pages and their
relationships. It provides an overview of the site and navigation
needs. This document and any user flow outlines are closely
related.
Standard Web Development Process



1     Planning

2     Design

3     Production & QA

4     Launch +
Design

This stage might include:

1. Wireframes

2. Moodboard/conceptual design

3. Static mockups

4. Asset production

5. Styleguide
Wireframes
Moodboards
Moodboards
Class Exercise



   Define goals
 Define user tasks
Competitive analysis
Positioning Exercises

More Related Content

Web Design Process