Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Design Process


Published on
Web Design 1
Columbia College Chicago

Published in: Education
  • Be the first to comment

Web Design Process

  1. 1. Site Planning & Structure22-3375 Web Design I // Columbia College Chicago
  2. 2. Quiz ReviewYes, you can use your notes.
  3. 3. Anatomy of a Web Page
  4. 4. 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.
  5. 5. Conventions in Life
  6. 6. Some ways that conventions have developedcultural conventionslimits of technologyfamiliarity from other mediaease of useadvertisingcommon platformstrends/follow-the-leader
  7. 7. The First Web Page (1992)
  8. 8. Cultural conventions
  9. 9. Limits of technology
  10. 10. Limits of technology
  11. 11. Limits of technology
  12. 12. Limits of technology
  13. 13. Limits of technology
  14. 14. Familiarity from other media
  15. 15. Familiarity from other media
  16. 16. Familiarity from other media
  17. 17. Familiarity from other media
  18. 18. Ease of use
  19. 19. Advertising
  20. 20. Advertising
  21. 21. Common platforms
  22. 22. Trends
  23. 23. Trends
  24. 24. Trends
  25. 25. Trends
  26. 26. Trends
  27. 27. Trends
  28. 28. Trends
  29. 29. Trends
  30. 30. Trends
  31. 31. Trends
  32. 32. Trends
  33. 33. Basic Components of Most SitesHeaderFeature AreaBody/ContentSidebarFooterBackground
  34. 34. Header
  35. 35. Feature Area
  36. 36. Body/Content
  37. 37. Sidebar
  38. 38. Footer
  39. 39. Background
  40. 40. 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?
  41. 41. Discuss Project 1
  42. 42. Site Planning
  43. 43. Standard Web Development Process1 Planning2 Design3 Production & QA4 Launch +
  44. 44. Where does theweb designer fit in?
  45. 45. 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?
  46. 46. Standard Web Development Process1 Planning2 Design3 Production & QA4 Launch +
  47. 47. 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
  48. 48. 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.
  49. 49. Use Case
  50. 50. Personas
  51. 51. User/Task Flows
  52. 52. 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.
  53. 53. Standard Web Development Process1 Planning2 Design3 Production & QA4 Launch +
  54. 54. DesignThis stage might include:1. Wireframes2. Moodboard/conceptual design3. Static mockups4. Asset production5. Styleguide
  55. 55. Wireframes
  56. 56. Moodboards
  57. 57. Moodboards
  58. 58. Class Exercise Define goals Define user tasksCompetitive analysis
  59. 59. Positioning Exercises