web design: day 1
DESCRIPTION
More Information: http://stevenpautz.com/portfolio/presentations/web-design-overview/day-1.phpTRANSCRIPT
![Page 1: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/1.jpg)
Web Design in Two Days?!
Main Goals
Generally-Applicable Overview
Cover the Key Elements
Avoid Major Pitfalls
Steven Pautz
![Page 2: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/2.jpg)
Overview
Today: Making Websites
The Big Picture (déjà vu!)
A new ingredient: The Client
Teamwork is Job #1
Thursday: Making Webpages
Places to go: an Itinerary
Where’s the starting line?
Crash course in visual design and/orweb usability (time permitting)
![Page 3: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/3.jpg)
Making Websites: Overview
The Big Picture
Same process of work, different details
Design Process for Websites
Design Process for Everything Else
![Page 4: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/4.jpg)
Making Websites: Overview
General Design Process
So, what’s special about web design?
Strategy
Design
Construction
Evaluation
Launch
Overlapping stages,with lots of iteration,
(Iteration based on,user feedback,progress, etc,.)
![Page 5: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/5.jpg)
Making Websites: The Client
Interacting With The Client
Very similar to interacting with users
Aim for frequent contact
Listen/observe carefully, but don’t blindly obey
Identify the root cause of their problem/request
Don’t blame them or consider them stupid
It’s about them, not you
![Page 6: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/6.jpg)
Making Websites: The Client
Client vs. Users?
Things could get complicated…
Client has own needs/goals/desires/values
These might conflict with the users’
User needs/goals/ desires/values/
Client needs/goals/desires/values
We’d like to be here
![Page 7: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/7.jpg)
Making Websites: The Client
The Middle Ground
Hopefully this won’t happen
If it does, choose your battles carefully
Tailor to userw/o neglecting client
Tailor to clientw/o neglecting user
![Page 8: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/8.jpg)
Making Websites: The Website Development Process
Website Design Process
This is still overly general, though…
Strategy
Design
Construction
Evaluation
Launch
Overlapping stages,with lots of iteration,
(Iteration based on,user feedback,
client feedback,progress, etc,.)
![Page 9: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/9.jpg)
Making Websites: The Website Development Process
A More Detailed Example
(with Lego characters in place of diagrams)
source: pingmag.jp
![Page 10: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/10.jpg)
Making Websites: The Website Development Process
Discussion
Establish the project scope early
What to do, when to do it, who’s responsible, etc.
![Page 11: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/11.jpg)
Making Websites: The Website Development Process
Brainstorming
Formalize the concept
What matters? What doesn’t matter?
![Page 12: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/12.jpg)
Making Websites: The Website Development Process
Wireframe
High-level design artifacts(sketches, site maps, interaction flowcharts,(scenarios, personas, prototypes, etc.)
![Page 13: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/13.jpg)
Making Websites: The Website Development Process
Planning the Content
Ask for text, images, and other content early on(clients might need time to gather them)
![Page 14: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/14.jpg)
Making Websites: The Website Development Process
Initial Design
Create one or more basic designs for the site
![Page 15: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/15.jpg)
Making Websites: The Website Development Process
Client Feedback
Get feedback early and often
![Page 16: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/16.jpg)
Making Websites: The Website Development Process
Design Rework
Iterate, iterate, iterate
![Page 17: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/17.jpg)
Making Websites: The Website Development Process
Client Approval
Keep iterating until everyone is happy
![Page 18: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/18.jpg)
Making Websites: The Website Development Process
Confirmation
The contract should record everything discussed(so make sure to discuss everything)
![Page 19: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/19.jpg)
Making Websites: The Website Development Process
More on Contracts
Some things to discuss with the client:
Project schedule
Ownership of website (design, images, text/data)
Number of pages, forms, and images produced
Delivery of content from client (formats, dates)
Browser support and accessibility
Search engine optimization
Non-design services(proofreading, web hosting, data entry)
Contract changes (amendment, early termination)
Site maintenance
![Page 20: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/20.jpg)
Making Websites: The Website Development Process
Build the Site
![Page 21: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/21.jpg)
Making Websites: The Website Development Process
Build the Site
Make sure the implementation matches the design
![Page 22: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/22.jpg)
Making Websites: The Website Development Process
Present to Client
Get more feedback
If necessary, iterate some more
![Page 23: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/23.jpg)
Making Websites: The Website Development Process
Test, then Launch
Make sure to schedule adequate time at the end
![Page 24: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/24.jpg)
Making Websites: The Website Development Process
Yet Another Review
Is this burned into your brain yet?
Strategy
Design
Construction
Evaluation
Launch
Overlapping stages,with lots of iteration,
(Iteration based on,user feedback,
client feedback,progress, etc,.)
![Page 25: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/25.jpg)
Making Websites: Class Activity
Bored? It’s Activity Time
Today: Designer-Client Communication
Each group will work with a “client” (fromanother group) to redesign ISU’s homepage
Each group interviews their client, then creates and revises design sketches to meet client’s needs
Client must select and present the final sketch
Objectives:
Become more familiar with client-designer meetings
Practice iterative design based on client feedback
Balance user needs and client needs
![Page 26: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/26.jpg)
Making Websites: Class Activity
Activity Startup
Form into groups
Select one group member to be a client
Clients:Come up here to meet with us
Designers:Think up some interview questions for the clients
Your goal in the interview:Learn as much as you can about the client’s needs, goals, desires, etc.
![Page 27: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/27.jpg)
Making Websites: Class Activity
Client Interview
Designers: Interview the visiting client
Gather as much information as you can:The client can’t stay for long
After the Interview:
Designers: Create at least three redesign sketchesto meet the client’s needs
Clients: You may look at other groups’ sketches,but don’t say anything to them
![Page 28: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/28.jpg)
Making Websites: Class Activity
ISU’s Current Homepage
![Page 29: Web Design: Day 1](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7e1d94a7959c17c8b4598/html5/thumbnails/29.jpg)
Making Websites: Class Activity
Design Iteration
A Second Designer-Client Meeting
Designers should show and explain their sketches
Client should give feedback on the sketches
Have your needs been met?
What do you like? What do you dislike?
After the Meeting:
Designers: Create one final sketch for the clientto present to the class
Clients: You may look at other groups’ sketches,but don’t say anything to them