web design process
DESCRIPTION
http://shawncalvert.com/webdesign-1 Web Design 1 Columbia College ChicagoTRANSCRIPT
![Page 1: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/1.jpg)
22-3375 Web Design I // Columbia College Chicago
Site Planning & Structure
![Page 2: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/2.jpg)
Quiz ReviewYes, you can use your notes.
![Page 3: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/3.jpg)
Anatomy of a Web Page
![Page 4: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/4.jpg)
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.
![Page 5: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/5.jpg)
Conventions in Life
![Page 6: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/6.jpg)
![Page 7: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/7.jpg)
![Page 8: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/8.jpg)
![Page 9: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/9.jpg)
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
![Page 10: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/10.jpg)
The First Web Page (1992)
![Page 11: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/11.jpg)
Cultural conventions
![Page 12: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/12.jpg)
Limits of technology
![Page 13: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/13.jpg)
Limits of technology
![Page 14: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/14.jpg)
Limits of technology
![Page 15: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/15.jpg)
Limits of technology
![Page 16: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/16.jpg)
Limits of technology
![Page 17: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/17.jpg)
Familiarity from other media
![Page 18: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/18.jpg)
Familiarity from other media
![Page 19: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/19.jpg)
Familiarity from other media
![Page 20: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/20.jpg)
Familiarity from other media
![Page 21: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/21.jpg)
Ease of use
![Page 22: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/22.jpg)
Advertising
![Page 23: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/23.jpg)
Advertising
![Page 24: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/24.jpg)
Common platforms
![Page 25: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/25.jpg)
Trends
![Page 26: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/26.jpg)
Trends
![Page 27: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/27.jpg)
Trends
![Page 28: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/28.jpg)
Trends
![Page 29: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/29.jpg)
Trends
![Page 30: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/30.jpg)
Trends
![Page 31: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/31.jpg)
Trends
![Page 32: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/32.jpg)
Trends
![Page 33: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/33.jpg)
Trends
![Page 34: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/34.jpg)
Trends
![Page 35: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/35.jpg)
Trends
![Page 36: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/36.jpg)
Header
Feature Area
Body/Content
Sidebar
Footer
Background
Basic Components of Most Sites
![Page 37: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/37.jpg)
Header
![Page 38: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/38.jpg)
![Page 39: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/39.jpg)
![Page 40: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/40.jpg)
![Page 41: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/41.jpg)
![Page 42: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/42.jpg)
![Page 43: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/43.jpg)
Feature Area
![Page 44: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/44.jpg)
![Page 45: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/45.jpg)
![Page 46: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/46.jpg)
![Page 47: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/47.jpg)
![Page 48: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/48.jpg)
Body/Content
![Page 49: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/49.jpg)
![Page 50: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/50.jpg)
![Page 51: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/51.jpg)
![Page 52: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/52.jpg)
![Page 53: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/53.jpg)
Sidebar
![Page 54: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/54.jpg)
![Page 55: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/55.jpg)
![Page 56: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/56.jpg)
Footer
![Page 57: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/57.jpg)
![Page 58: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/58.jpg)
![Page 59: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/59.jpg)
Background
![Page 60: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/60.jpg)
![Page 61: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/61.jpg)
![Page 62: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/62.jpg)
![Page 63: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/63.jpg)
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?
![Page 64: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/64.jpg)
Discuss Project 1
![Page 65: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/65.jpg)
Site Planning
![Page 66: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/66.jpg)
Planning1
Design2
Production & QA3
Launch +4
Standard Web Development Process
![Page 67: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/67.jpg)
![Page 68: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/68.jpg)
Where does the web designer !t in?
![Page 69: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/69.jpg)
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?
![Page 70: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/70.jpg)
Standard Web Development Process
Planning1
Design2
Production & QA3
Launch +4
![Page 71: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/71.jpg)
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
![Page 72: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/72.jpg)
![Page 73: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/73.jpg)
![Page 74: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/74.jpg)
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.
![Page 75: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/75.jpg)
Use Case
![Page 76: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/76.jpg)
Personas
![Page 77: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/77.jpg)
User/Task Flows
![Page 78: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/78.jpg)
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.
![Page 79: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/79.jpg)
Standard Web Development Process
Planning1
Design2
Production & QA3
Launch +4
![Page 80: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/80.jpg)
Design
This stage might include:
1. Wireframes
2. Moodboard/conceptual design
3. Static mockups
4. Asset production
5. Styleguide
![Page 81: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/81.jpg)
Wireframes
![Page 82: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/82.jpg)
Moodboards
![Page 83: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/83.jpg)
Moodboards
![Page 84: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/84.jpg)
Class Exercise
De!ne goals
De!ne user tasks
Competitive analysis
![Page 85: Web Design Process](https://reader033.vdocuments.site/reader033/viewer/2022051819/54c7fce44a7959d93f8b462c/html5/thumbnails/85.jpg)
Positioning Exercises