Web Design: Day 1

1,214 views

Published on

More Information: http://stevenpautz.com/portfolio/presentations/web-design-overview/day-1.php

Published in: Economy & Finance, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,214
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design: Day 1

  1. 1. Web Design in Two Days?! Main Goals  Generally-Applicable Overview  Cover the Key Elements  Avoid Major Pitfalls Steven Pautz
  2. 2. 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/or web usability (time permitting)
  3. 3. Making Websites: Overview The Big Picture Design Process for Websites  Design Process for Everything Else  Same process of work, different details
  4. 4. Making Websites: Overview General Design Process Strategy Overlapping stages, with lots of iteration, Design (Iteration based on, user feedback, Construction progress, etc,) . Evaluation Launch  So, what’s special about web design?
  5. 5. 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
  6. 6. 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/ Client needs/goals/ desires/values/ desires/values We’d like to be here
  7. 7. Making Websites: The Client The Middle Ground Tailor to client Tailor to user w/o neglecting user w/o neglecting client  Hopefully this won’t happen  If it does, choose your battles carefully
  8. 8. Making Websites: The Website Development Process Website Design Process Strategy Overlapping stages, with lots of iteration, Design (Iteration based on, user feedback, Construction client feedback, progress, etc,) . Evaluation Launch  This is still overly general, though…
  9. 9. Making Websites: The Website Development Process A More Detailed Example (with Lego characters in place of diagrams) source: pingmag.jp
  10. 10. Making Websites: The Website Development Process Discussion  Establish the project scope early  What to do, when to do it, who’s responsible, etc.
  11. 11. Making Websites: The Website Development Process Brainstorming  Formalize the concept  What matters? What doesn’t matter?
  12. 12. Making Websites: The Website Development Process Wireframe  High-level design artifacts (sketches, site maps, interaction flowcharts, (scenarios, personas, prototypes, etc.)
  13. 13. 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)
  14. 14. Making Websites: The Website Development Process Initial Design  Create one or more basic designs for the site
  15. 15. Making Websites: The Website Development Process Client Feedback  Get feedback early and often
  16. 16. Making Websites: The Website Development Process Design Rework  Iterate, iterate, iterate
  17. 17. Making Websites: The Website Development Process Client Approval  Keep iterating until everyone is happy
  18. 18. Making Websites: The Website Development Process Confirmation  The contract should record everything discussed (so make sure to discuss everything)
  19. 19. 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
  20. 20. Making Websites: The Website Development Process Build the Site
  21. 21. Making Websites: The Website Development Process Build the Site  Make sure the implementation matches the design
  22. 22. Making Websites: The Website Development Process Present to Client  Get more feedback  If necessary, iterate some more
  23. 23. Making Websites: The Website Development Process Test, then Launch  Make sure to schedule adequate time at the end
  24. 24. Making Websites: The Website Development Process Yet Another Review Strategy Overlapping stages, with lots of iteration, Design (Iteration based on, user feedback, Construction client feedback, progress, etc,) . Evaluation Launch  Is this burned into your brain yet?
  25. 25. Making Websites: Class Activity Bored? It’s Activity Time Today: Designer-Client Communication  Each group will work with a “client” (from another 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
  26. 26. 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.
  27. 27. 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 sketches to meet the client’s needs  Clients: You may look at other groups’ sketches, but don’t say anything to them
  28. 28. Making Websites: Class Activity ISU’s Current Homepage
  29. 29. 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 client to present to the class  Clients: You may look at other groups’ sketches, but don’t say anything to them

×