Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Process and Deliverables

5de3c2d79028140c51f5ca352aa8b4ee?s=47 JH
October 31, 2016

Design Process and Deliverables

Designer Chris Bailey's talk on the design process we use here at JH. Chris spoke to students at New College Nottingham.

5de3c2d79028140c51f5ca352aa8b4ee?s=128

JH

October 31, 2016
Tweet

Transcript

  1. Design Process & Deliverables. @chris3ailey 1

  2. Designer. @chris3ailey @chris3ailey

  3. Drawing Writing Presenting Mood boards Style Tiles Style Guides Visual

    identity UI Design Blogging Marketing @chris3ailey Skills.
  4. Tools. Sketch Illustrator Photoshop Mail Slack Keynote InVision Pencils Paper

    Post-it Notes @chris3ailey
  5. Learning. @chris3ailey @chris3ailey

  6. Read Write Blog Tutorials Newsletters Mentors …everyday! @chris3ailey How? How?

  7. Process. @chris3ailey @chris3ailey

  8. The Design Process. • Who uses it? • What do

    they deliver? • Why is it important? @chris3ailey
  9. Who? @chris3ailey @chris3ailey

  10. @chris3ailey

  11. @chris3ailey

  12. @chris3ailey

  13. @chris3ailey Web. Architecture. Print.

  14. What? Depending on your design discipline will depend on the

    deliverables. @chris3ailey
  15. Brief. @chris3ailey @chris3ailey

  16. Who writes the brief? @chris3ailey The client, you or both?

    Both. Don’t have one? Write one.
  17. AARON DRAPLIN. FIELD NOTES.

  18. Why is a brief important? • Project outline • Protection

    • Important tool @chris3ailey @chris3ailey
  19. @chris3ailey When? Before During After

  20. @chris3ailey Search. Business Brand Product / Service Competitors

  21. Meeting. @chris3ailey

  22. @chris3ailey Ask. History Ambitions Role Responsibilities Working practice Customers Product

    / Service Competitors Design Technical Features Budget
  23. @chris3ailey Actions. Actions plan What’s next? Update brief Logins Brand

    Guidelines Brand Assets Deadlines Set targets @chris3ailey
  24. Mood board. @chris3ailey @chris3ailey

  25. What is a mood board? @chris3ailey An arrangement of images,

    materials, pieces of text, etc. intended to evoke or project a particular style or concept.
  26. Typography Photography Colour Illustration Iconography Spacing Alignment Patterns Textures @chris3ailey

  27. @chris3ailey

  28. @chris3ailey Elegant Fashion Spacious Clean Neutral Simple Modern

  29. Style Tile. @chris3ailey @chris3ailey

  30. What is a style tile? @chris3ailey Style Tiles are a

    design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web.
  31. None
  32. None
  33. None
  34. None
  35. Wireframes. @chris3ailey @chris3ailey

  36. What are wireframes? @chris3ailey A website wireframe, also known as

    a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.
  37. @chris3ailey

  38. Web Designs. @chris3ailey @chris3ailey

  39. Brief Research Mood board Style Title Wireframes @chris3ailey

  40. @chris3ailey Header Hero Filters *states Category block Pagination Recently viewed

    footer Social Copyright Always Present!
  41. None
  42. None
  43. None
  44. None
  45. None
  46. Style Guide. @chris3ailey @chris3ailey

  47. None
  48. Why? @chris3ailey @chris3ailey

  49. @chris3ailey Explore ideas creatively Explore multiple directions Impress early Shows

    progress Protection Gains trust & confidence Breaks the project up Sign off each stage Low risk Cost effective Good for business
  50. Thank you. @chris3ailey

  51. Any questions? @chris3ailey