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

Design for Non-Designers

508cdde667137534cd7154a447e38e51?s=47 Nicolae Rusan
September 19, 2013

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.

508cdde667137534cd7154a447e38e51?s=128

Nicolae Rusan

September 19, 2013
Tweet

More Decks by Nicolae Rusan

Other Decks in Design

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.