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.



October 31, 2016


  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.

  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