O slideshow foi denunciado.

Mais Conteúdo rRelacionado

Purin's Guide to Visual Design and Keynote Wizardry

  1. 1. VISUAL DESIGN + KEYNOTE WIZARDRY PURIN'S SECRET RECIPE TO MAKE STUFF LOOK PRETTY I’m so pretty
  2. 2. GOAL: FOR YOU TO WALK AWAY FROM THIS WORKSHOP WITH TOOLS & TECHNIQUES TO MAKE YOUR DESIGNS LOOK PRETTY
  3. 3. VISUAL DESIGN IS A LEARNABLE SKILL, JUST LIKE BICYCLING. ONCE YOU KNOW HOW TO RIDE, IT WILL TAKE YOU FAR.
  4. 4. COPYING GOOD EXAMPLES USING PRACTICING KEYNOTE visual design secret recipe LEARNING BEING BASIC TIPS & CONFIDENT TRICKS (FAKING IT)
  5. 5. COPYING GOOD EXAMPLES
  6. 6. In order to design beautiful things, you have to surround yourself with beautiful things. Dan Boyarski CMU School of Design
  7. 7. ?
  8. 8. PRACTICING
  9. 9. AHA! I’M GOOD I’M AWESOME 2003 2004 2005 2006 2007 2008 2009 2010 2011
  10. 10. 2 minutes
  11. 11. LOTS OF PRACTICE AHA! I’M AWESOME ?
  12. 12. BEING CONFIDENT (FAKING IT)
  13. 13. I’m pretty good at visual design.
  14. 14. I’d love to do the visual design part
  15. 15. I’d love to do the visual design part OMG That looks like crap!!!
  16. 16. I’d love to do the visual design part
  17. 17. I’d love to do the visual design part It looks horrible. Please stop designing.
  18. 18. I’d love to do the visual design part + use good examples as your template
  19. 19. I’d love to do the visual design part + use good examples as your template I guess that looks cool. It looks like something I’ve seen before.
  20. 20. I’m pretty good at visual design.
  21. 21. When you think you’re in a safe environment, your level of creativity goes up by 10x. Brendan Boyle d.school / IDEO
  22. 22. I’m pretty good at visual design.
  23. 23. COPYING GOOD EXAMPLES USING PRACTICING KEYNOTE visual design secret recipe LEARNING BEING BASIC TIPS & CONFIDENT TRICKS (FAKING IT) ?
  24. 24. 7 SECRET TRICKS TO GREAT VISUAL DESIGN
  25. 25. 1. LINE THINGS UP
  26. 26. 1. LINE THINGS UP
  27. 27. “Let’s use PowerPoint’s template”
  28. 28. ! ! ! ! ! ! ! ! ! ! !
  29. 29. ! ! ! ! ! ! ! ! ! ! !
  30. 30. 2. BALANCE THE PAGE & LEAVE SOME WHITE SPACE
  31. 31. 2. BALANCE THE PAGE & LEAVE SOME WHITE SPACE
  32. 32. “Let’s be efficient with space”
  33. 33. ?
  34. 34. 3. USE DESIGNER FONTS
  35. 35. 3.5 DO NOT USE THESE STUPID FONTS (YOU WILL BE MADE FUN OF BY DESIGNERS)
  36. 36. 4. THINK OF TEXT AS THE BACK OF YOUR LEFT HAND
  37. 37. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  38. 38. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  39. 39. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  40. 40. 5. LEFT-ALIGN TEXT IN MOST CASES CENTER-ALIGN FOR UNITY
  41. 41. POINTS OF PARITY & DIFFERENTIATION POINT-OF-PARITY: Shared brand associations needed to be player, to neutralize ‘competition’ POINT-OF-DIFFERENCE: Unique brand associations needed to stand out BRANDS, EXPERIENCE & SOCIAL TECHNOLOGY SPRING 2011 Jennifer Aaker + Chris Flink Source: Keller 2003
  42. 42. In the next 10 minutes you and your partner will build a paper airplane.
  43. 43. ?
  44. 44. 6. USE COLORS TO COMMUNICATE & MAKE THINGS POP DON’T USE THEM FRIVOLOUSLY
  45. 45. 76
  46. 46. COLORS ATTRIBUTES Warm Fun Together Moving HAPPINESS Fresh Connected FEELING OR SHOWING PLEASURE OR CONTENTMENT Colorful Sweet Advanced IID A1:Mood Boards Purin Phanichphant 1/6
  47. 47. 7. TAKE ADVANTAGE OF GOOGLE IMAGE SEARCH & FLICKR BUT BE TASTEFUL WHEN SELECTING IMAGES
  48. 48. 7 SECRET 1. LINE THINGS UP TRICKS TO 2. BALANCE THE PAGE & LEAVE SOME WHITE SPACE GREAT VISUAL DESIGN 3. USE DESIGNER FONTS 4. THINK OF TEXT AS THE BACK OF YOUR LEFT HAND 5. LEFT-ALIGN TEXT IN MOST CASES (CENTER IS OK TOO) 6. USE COLORS TO COMMUNICATE & MAKE THINGS POP 7. TAKE ADVANTAGE OF GOOGLE IMAGE SEARCH & FLICKR SEARCH ?
  49. 49. BREAK next up: keynote
  50. 50. COPYING GOOD EXAMPLES USING PRACTICING KEYNOTE visual design secret recipe LEARNING BEING BASIC TIPS & CONFIDENT TRICKS (FAKING IT)
  51. 51. STUFF YOU CAN DO WITH KEYNOTE
  52. 52. BEST BEST Brands, Experience & Social Brands, Experience & Social Technology Technology BEST BRANDS, EXPERIENCE & SOCIAL TECHNOLOGY best BEST Brands, Experience & Social Technology BRANDS / EXPERIENCE / SOCIAL TECHNOLOGY BEST Brands, Experience & BEST Social Technology Brands, Experience & Social Technology
  53. 53. TABLE THE OFF featuring MFA DESIGN GRADUATES April 5th - April 17th JENNIFER LOPEZ Tues-Fri 10-5 Sat & Sun 1-5 PURIN PHANICHPHANT Reception April 14th 5pm-7pm CHRISTIN STAUBO Thomas Welton Art Gallery ABBY STURGES Stanford University OFF THE TABLE a civilized discourse on food in the 21st century
  54. 54. HELLO! CREATIVE / DESIGNER Farmgroup Design Studio, Bangkok August 2008 – May 2009 Joined a team of young & talented graphic, motion, and environmental designers in a journey to de ne, understand, and solve client PURIN PHANICHPHANT from problems. Projects included life-sized interactive Christmas tree and snow globe, product + interaction designer modular graphic cubes, children’s maze, kinetic sculptures, and many more! purincess@gmail.com 249 Ramona St. www.purincess.com Palo Alto, CA 94301 650.504.5640 STANFORD UNIVERSITY INTERACTION DESIGNER RECOGNITION ENJOYMENT Joint Program in Design O ce Design Group, Microso Corporation 2006 IDSA Student Merit Award Product conceptualization & sketching Candidate in Master of Fine Arts, Class of 2011 June 2005 – August 2005 (intern), ID Magazine Student Design Review 06 User experience storyboarding August 2006 – August 2007 Honorable Mention for CUBOT: Motion- CARNEGIE MELLON UNIVERSITY User interface design Collaborated with usability engineers, based Building Block System Interdisciplinary Program in Industrial Design Low- delity prototyping program managers, developers, product CHI 2006 & 2007 Presenter and Human-Computer Interaction planners, as well as other designers within the Building interactive prototypes with Flash/ Graduated May 2006 with College and 2003, 2005, and 2006 CMU School of Design Actionscript, Processing, and Arduino group to de ne front-end user experience for University Honors Merit Award current and future versions of O ce client and Visualizing concepts with SketchUp & Solidworks server applications 2005–06 CMU HCI Student Advisory Board Member Woodworking, TIG Welding CMU Student Representative, ADSL Bicycle building & riding Conference, Belgium, Jan’05 Settlers of Catan PRODUCT DESIGN INTERN My name is Purin Phanichphant. I am currently a graduate student in the CUT Daedalus Excel Product Development Joint Program in Design at Stanford University. January 2006 – May 2006 Worked on various aspects of medical With a thorough understanding of the design process, ability to sketch FOLD & GLUE equipment design projects, including and prototype rapidly in various media, and my love for experimentation, product form sketching, product modeling, CAD prototyping, competitive I want to leverage playfulness and create the next breakthrough products VOILA! analysis, and designing interactive user interface mock-ups and technologies that change human behavior for the be er. Ultimately, I wish to create a world that is happier, healthier, and full of laughter.
  55. 55. F* Illustrator & Photoshop. Keynote is your best friend. alp h o ns o l a b s / t o u c h me : d e sig ning fo r t o uch int er faces 4 / 6
  56. 56. DEMO 1 DRAG IMAGES TO CROP
  57. 57. DEMO 2 PASTE TEXT TO EXISTING FORMAT SHIFT OPTION COMMAND V Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  58. 58. DEMO 3 PICTURE FRAME + MULTITOUCH ZOOM & ROTATE
  59. 59. DEMO 4 COPY TO PHOTOSHOP & ILLUSTRATOR YOU ARE HERE
  60. 60. DEMO 5 OPTION-DRAG TO DUPLICATE + DISTRIBUTE
  61. 61. DEMO 5 OPTION-DRAG TO DUPLICATE + DISTRIBUTE
  62. 62. DEMO 6 EXPORT TO PDF
  63. 63. THINK-ALOUD DEMO REDESIGNING A POSTER
  64. 64. HACK FOR EGYPT Saturday May 14th. 10am-8pm You will help develop technology for free You will help develop technology for free and fair elections, public input on the and fair elections, public input on the constitution, and government constitution, and government accountability. You will be working accountability. You will be working alongside universities in Egypt, alongside universities in Egypt, international development experts, the international development experts, the makers of existing apps, and the activists makers of existing apps, and the activists that will use the technology. Your work will that will use the technology. Your work will be meaningful, relevant, and high-impact. be meaningful, relevant, and high-impact. There is no registration fee, with free food There is no registration fee, with free food and drinks as usual. and drinks as usual.
  65. 65. THINK-ALOUD DEMO REDESIGNING A SLIDE
  66. 66. KEY INSIGHTS ‘MARRIAGE’ TEMPLATE OVER-RATED. What is under-rated: understanding relationship types RELATIONSHIPS ARE IMPORTANT, BUT OFTEN MISUNDERSTOOD Need to list ‘dos and don’ts’ & apologies/recoveries UNDERSTANDING PSYCHOLOGY OF RELATIONSHIPS Pay particular attention first interactions Be happy when transgressions occur RETHINK BRAND Bank account

×