Embed Size (px)
DESCRIPTION
http://shawncalvert.com/webdesign-1 Web Design 1 Columbia College Chicago
Citation preview
22-3375 Web Design I // Columbia College Chicago
Site Planning & Structure
Quiz ReviewYes, 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
cultural conventions
limits of technology
familiarity from other media
ease of use
advertising
common platforms
trends/follow-the-leader
Some ways that conventions have developed
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
Header
Feature Area
Body/Content
Sidebar
Footer
Background
Basic Components of Most Sites
Header
Feature Area
Body/Content
Sidebar
Footer
Background
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
Planning1
Design2
Production & QA3
Launch +4
Standard Web Development Process
Where does the web designer !t in?
Graphic/Communication DesignReferred 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) DesignThe skill of creating consistent, intuitive and engaging interactive systems. Include usability issues: is the user able to effectively complete their goals?
+UX (user experience) DesignAn umbrella skillset that asks the question: was the interaction positive? How could it be better?
Standard Web Development Process
Planning1
Design2
Production & QA3
Launch +4
Planning
This stage might include:
1. Statement of Work (SOW)
2. Creative Brief
3. Research and analysis: site goals, competitive research, de!ning the user, de!ning the shape and scope of the site.
4. Technical requirements
5. Schedules
6. Budget
Research and Analysis: De!ning the user
Before you can start !guring 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 !rst stage that a UI/UX designer is engaged.
This analysis can take the form of
use cases,
personas,
and/or user/task !owcharts.
Use Case
Personas
User/Task Flows
Research and Analysis: De!ning 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 "ow outlines are closely related.
Standard Web Development Process
Planning1
Design2
Production & QA3
Launch +4
Design
This stage might include:
1. Wireframes
2. Moodboard/conceptual design
3. Static mockups
4. Asset production
5. Styleguide
Wireframes
Moodboards
Moodboards
Class Exercise
De!ne goals
De!ne user tasks
Competitive analysis
Positioning Exercises
