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

1. Site Planning & Structure
22-3375 Web Design I // Columbia College Chicago

2. Quiz Review
Yes, you can use your notes.

3. Anatomy of a Web Page

4. 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.

5. Conventions in Life

9. 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

10. The First Web Page (1992)

11. Cultural conventions

12. Limits of technology

13. Limits of technology

14. Limits of technology

15. Limits of technology

16. Limits of technology

17. Familiarity from other media

18. Familiarity from other media

19. Familiarity from other media

20. Familiarity from other media

21. Ease of use

22. Advertising

23. Advertising

24. Common platforms

25. Trends

26. Trends

27. Trends

28. Trends

29. Trends

30. Trends

31. Trends

32. Trends

33. Trends

34. Trends

35. Trends

36. Basic Components of Most Sites
Header
Feature Area
Body/Content
Sidebar
Footer
Background

37. Header

43. Feature Area

48. Body/Content

53. Sidebar

56. Footer

59. Background

63. 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?

64. Discuss Project 1

65. Site Planning

66. Standard Web Development Process
1 Planning
2 Design
3 Production & QA
4 Launch +

68. Where does the
web designer fit in?

69. 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?

70. Standard Web Development Process
1 Planning
2 Design
3 Production & QA
4 Launch +

71. 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

74. 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.

75. Use Case

76. Personas

77. User/Task Flows

78. 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.

79. Standard Web Development Process
1 Planning
2 Design
3 Production & QA
4 Launch +

80. Design
This stage might include:
1. Wireframes
2. Moodboard/conceptual design
3. Static mockups
4. Asset production
5. Styleguide

81. Wireframes

82. Moodboards

83. Moodboards

84. Class Exercise
Define goals
Define user tasks
Competitive analysis

85. Positioning Exercises