Design for Non-Designers

This was a presentation I put together for my Skillshare class to give a high level overview of what design really means, and how the most important thing is to have a well articulated and clear design process for approaching problems.

Transcript

1. How to Think Like a Designer (for Non-Designers)
2. Plan: 1.  What is design? 2. Mock design process (Nom Nom Factory). 3. Later stages of web design. 4. Where do you go from here.
3. (for Non-Designers) Design is a way of thinking (of solving problems), along with a set of skills.
4. Non-Designer turned Designer Learn by doing.
5. Non-Designer turned Designer Learn by doing. Piece by piece.
6. Non-Designer turned Designer Learn by doing. Piece by piece. Design is fun, infinite possibilities.
7. Non-Designer turned Designer Learn by doing. Piece by piece. Design is fun, infinite possibilities. Design is challenging, infinite possibilities.
8. Non-Designer turned Designer Learn by doing. Piece by piece. Design is fun, infinite possibilities. Design is challenging, infinite possibilities. Need a process!
9. Designs have a purpose.
10. Art != Design Hammer
11. Designs have a purpose. Allow Users to Perform a Function Faster Easier Cheaper
12. Designs have a purpose. Deliver a Message Allow Users to Perform a Function Faster Easier Cheaper
13. Designs have a purpose. Communicate a Mood Deliver a Message Allow Users to Perform a Function Faster Easier Cheaper
14. Designs have a purpose. Communicate a Mood Deliver a Message Allow Users to Perform a Function Sell More Faster Easier Cheaper
15. Designs have a purpose. Communicate a Mood Deliver a Message Allow Users to Perform a Function Sell More Faster Easier Entertain Cheaper
16. Design has a process. Goal-Oriented Design Process:! 1. Explore the Problem: Figure out what the goals/ purpose is. Understand the assumptions, constraints, and context. 2. Find the Best Solution: given the constraints and context.
17. Design is BIG. Divide it into parts. Different jobs specialize on different parts of it. Art Psychology Engineering
18. FORM CONTENT Design is big. How something looks and feels. Communicates the mood. Veneer. Stuff these people say: That color is ugly. Those fonts don’t match.
19. FORM CONTENT Design is big. Skills + Tools Visual Design, Typography, Color, Spacing, Lighting, Textures, Psychology In Software: Photoshop, CSS, HTML Jobs Graphic Designers, Typographers, Visual Artists
20. FORM CONTENT Design is big. How something works. Can have something with minimal form – very functional: e.g. Google Stuff these people say: You can combine those pages into a single page.
21. FORM CONTENT Design is big. Form follows function? ….. Sort of. What’s the goal?
22. FORM CONTENT Design is big. Skills + Tools Usability, User Experience Research, Flow Diagrams, Prototyping, Wireframes, Jobs Interaction Designers, Front-End Developers, Product Managers, Usability Researchers In Software: HTML, Clickable Prototypes (Flash, Javascript),
23. FORM CONTENT Design is big. The actual content you’re designing around. In web design: it’s the text, the copy of the site. Stuff these people say: You should make the message clearer on your front page of what you do.
24. FORM CONTENT Design is big. Skills + Tools Writing, Psychology, Logic Jobs Information Architect, Copywriter
25. Important to separate conceptually. Easier to talk about. Easier to learn. Form + Function + Content = Experience. Design experiences.
26. The Goal-Oriented Design Process NOM NOM FACTORY A recipe site.
27. The Goal-Oriented Design Process 1.  Understand and Explore the Problem What are the goals? Success criteria? 2. Model the problem. 3. Explore Possible Solutions – on Paper 3a. Test out interaction. 4. Explore Form and Digital Interaction (Photoshop or HTML?) 4a. Test it out. 5. Implement into proper HTML/CSS/Javascript A recipe for design
28. Understand the Problem Ask the right questions. Who? What? When? Where? Why?
29. Understand the Problem Who are the stakeholders? Professional  Chefs  at  High-­‐end  Restaurants?   Professional  Chefs  at  Low-­‐end  Restaurants?   Foodies?   Women  who  cook  for  their  family?   College  Students?   NOM NOM FACTORY A recipe site.
30. Understand the Problem Who are the stakeholders? Tools: User Interviews, User Personas Model Your Users. Age, Wealth, Professional Level, What are they doing? What are their goals? Which goals are more important? What are the activities they need to be able to do? How do they do this right now?
31. Iris Daniella Descrip(on   Goals   Ac(vi(es   Iris  is  the  head  chef  at  a  local  restaurant  that     serves  Spanish-­‐Vietnamese  fusion  cuisine,  that   uses  local  ingredients.  She’s  32,  has  studied     cooking  …     Sample User Persona Like  other  head  chefs,  Iris  has  to  design  and  select   new  recipes  for  her  restaurant  to  prepare  on  a     bi-­‐weekly  basis.  ….  
32. Understand the Problem What are the constraints? •  Technological •  Specific requirements (e.g. security for bank software, response time for an Emergency Response software) •  Where it’s used. (example of iPad for surgeons) •  Project Time •  Cost
33. Understand the Problem : Form Look and Feel Questions: How should users feel when using the site? What words would you use to describe the site? (e.g. the Aqua interface lick it example) Tool: Mood Board, Collect Similar Sites You Like
34. Understand the Problem : Form Look and Feel Tools: For inspiration: Kuler (www.kuler.adobe.com) - color themes Dribbble, Forrst, FFFFound, Pinterest Magazines, Photos Others sites Think about colors, about typography you like (before you know how these works, better to just find things you like as references).
35. Understand the Problem : Differentiation Why do users use this site rather than something else? Speed Beauty Ease of Use Ease of Learning Integrates Well With Existing Flow Powerful Advanced Features
36. Understand the Problem: Tips •  You are most likely not the user you’re designing for. •  Be honest about your users’ goals. •  Feedback is tricky, but can be helpful •  If you have multiple stakeholders – prioritize the goals.
37. What is considered success?
38. Leaving the Understand Problem Stage Assumptions User Interviews User Personas + Use Cases Constraints Articulated Differentiation Mood Boards (maybe choice of fonts + color)
39. Model the Problem Model all the objects, pages and actions that you will have in the site.
40. Model the Problem Recipe: -  Description of dish -  Photos of Food -  Ingredients -  Instructions User -  Profile Info -  Favorite Dishes Ingredient? ….etc.. NOM NOM FACTORY A recipe site. Objects: Pages/Actions: What goes on each page? What are the core navigation pages? Browse Recipes -  By ingredient -  By food type -  Search for recipes User Profile -  Favorite recipes -  Profile Picture + Info ….etc..
41. Model the Problem Mark what is essential, and what is non-essential.  
42. Model the Problem Mark what is essential, and what is non-essential. Try to simplify – play in this space.
43. Model the Problem Mark what is essential, and what is non-essential. Try to simplify – play in this space. Alternatives, Alternatives, Alternatives (Stanford Research, Scott Kemler – more alternatives = better results)  
44. Model the Problem Mark what is essential, and what is non-essential. Try to simplify – play in this space. Alternatives, Alternatives, Alternatives (Stanford Research, Scott Kemler – more alternatives = better results) Evaluate tradeoffs.  
45. Model the Problem Mark what is essential, and what is non-essential. Try to simplify – play in this space. Alternatives, Alternatives, Alternatives (Stanford Research, Scott Kemler – more alternatives = better results) Evaluate tradeoffs. Better to work in the problem space, than in the solution space  
46. Leaving the Model Problem Stage •  List of Pages and their Flow •  Idea of the Core Navigation Pages •  List of Objects and their Attributes •  What Objects are on Each Page.
47. Wireframe Stage ALL ON PAPER! Spend lots of time here: -  Explore many alternatives! Think Crazy! -  Cheap! -  Don’t need to be a masterful artist – anyone can prototype! -  Low Cost – test function without detailed form!
48. Wireframe Stage Other Tools Adobe Illustrator/Balsamiq etc vs. Paper Higher Fidelity = More Time. Higher Fidelity = Deeper in the Solution space
49. Wireframe Stage Recipe: -  Description of dish -  Photos of Food -  Ingredients -  Instructions Come up with 3 alternative layouts for the View Recipe page.   A recipe site. NOM NOM FACTORY Remember: Who are you designing for? Play with shapes, hiding/showing elements? What is most important on the page? What are the tradeoffs in each version?
50. Wireframe Stage Rank the pages and items in order of importance, and work in that order (e.g. navigation, recipe page, browse page, user profile).. Several paper layouts for each page, nav elements, etc. Think about the tradeoffs for each layout. Piece them together.
51. Leaving the Model Problem Stage •  Several options for each page/item. •  Select the layouts you want for each page on paper and put them together as a whole •  Identify reusable elements (e.g. buttons etc.) You’re pretty much done! … Now it’s just about adding the look and feel!
52. Next Stage: Form Photoshop or HTML?   (matter of preference)
53. Next Stage: Form Photoshop or HTML?   (matter of preference) Pros of HTML + CSS first: •  Can see the interaction. •  “Feel the site”. •  Can do things roughly, and then fill in details after. •  Browsers will look different, more challenges
54. Next Stage: Form Photoshop or HTML?   (matter of preference) Pros of Photoshop: •  Can separate the work if you don’t know HTML/CSS •  The details (textures etc.) affect the mood substantially. •  Don’t worry about the fixes yet, just worry about how you want it to look (not that easy)
55. Next Stage: Form Either way it’s a back and forth CSS 3 makes it possible to do some things: Lighting, More Typography, Textures Still in Photoshop.
56. Next Stage: Form Lots to learn here – too much for this class. Typography, Lighting, Spacing + Balance, Color Theory, Texture Effects Another class perhaps? But they’re all learnable!
57. Next Stage: Form Fitting the look and feel with the layout. This is also a back and forth puzzle. Takes practice to get right! Subjective! But valuable!
58. Final Stage Implement Polished HTML + CSS Win.
59. Takeaways Design is everywhere. Approach it with a goal-oriented process. Care about, and understand your users. Understand the limitations. Explore many options. Question assumptions.
60. Thanks. Useful Resources to come.