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.

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.
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!
46. Style Guide. @chris3ailey @chris3ailey
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