Web Design Process
Upcoming SlideShare
Loading in...5
×
 

Web Design Process

on

  • 1,429 views

http://shawncalvert.com/webdesign-1

http://shawncalvert.com/webdesign-1
Web Design 1
Columbia College Chicago

Statistics

Views

Total Views
1,429
Views on SlideShare
696
Embed Views
733

Actions

Likes
1
Downloads
41
Comments
0

1 Embed 733

http://www.shawncalvert.com 733

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Design Process Web Design Process Presentation Transcript

  • Site Planning & Structure22-3375 Web Design I // Columbia College Chicago
  • Quiz ReviewYes, you can use your notes.
  • Anatomy of a Web Page
  • Understanding Conventions & ExpectationsUsers have certain expectations when they visit a website,expectations that, if not met, could result in them having troubleunderstanding how it works. Therefore, its important thatwebsites are designed so that users can predict how things willwork and where certain elements will be.
  • Conventions in Life
  • Some ways that conventions have developedcultural conventionslimits of technologyfamiliarity from other mediaease of useadvertisingcommon platformstrends/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 SitesHeaderFeature AreaBody/ContentSidebarFooterBackground
  • Header
  • Feature Area
  • Body/Content
  • Sidebar
  • Footer
  • Background
  • Student PresentationsHow does the design use white space to createhierarchy and rhythm?Give an example of how the site uses one or moregestalt principlesGive 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 overto your own work?
  • Discuss Project 1
  • Site Planning
  • Standard Web Development Process1 Planning2 Design3 Production & QA4 Launch +
  • Where does theweb designer fit in?
  • Graphic/Communication DesignReferred to as the “look & feel” of the site, but it is more thanthat. The skill of using type, imagery and layout to convey literaland emotional messages.+UI (user interface) DesignThe skill of creating consistent, intuitive and engaginginteractive systems. Include usability issues: is the user able toeffectively complete their goals?+UX (user experience) DesignAn umbrella skillset that asks the question: was the interactionpositive? How could it be better?
  • Standard Web Development Process1 Planning2 Design3 Production & QA4 Launch +
  • PlanningThis stage might include:1. Statement of Work (SOW)2. Creative Brief3. Research and analysis: site goals, competitiveresearch, defining the user, defining the shape andscope of the site.4. Technical requirements5. Schedules6. Budget
  • Research and Analysis: Defining the userBefore you can start figuring out the shape and structure, youneed to have some idea of who you users are, and why theywould come to your site. Unless your role is strictly on visualdesign, this is usually the first stage that a UI/UX designer isengaged.This analysis can take the form ofuse cases,personas,and/or user/task flowcharts.
  • Use Case
  • Personas
  • User/Task Flows
  • Research and Analysis: Defining the shape and scopeThe sitemap is the start of the IA phase of a project (informationarchitecture). It is a schematic showing the pages and theirrelationships. It provides an overview of the site and navigationneeds. This document and any user flow outlines are closelyrelated.
  • Standard Web Development Process1 Planning2 Design3 Production & QA4 Launch +
  • DesignThis stage might include:1. Wireframes2. Moodboard/conceptual design3. Static mockups4. Asset production5. Styleguide
  • Wireframes
  • Moodboards
  • Moodboards
  • Class Exercise Define goals Define user tasksCompetitive analysis
  • Positioning Exercises