Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UiGathering Talk - Masters of visualization / by Allen Chan


Published on

UiGathering 2011 July

Published in: Design, Technology, Art & Photos
  • Be the first to comment

UiGathering Talk - Masters of visualization / by Allen Chan

  1. 1. Masters of Visualization <ul><li>1 Pixel 1 Pixel 的改變世界 </li></ul>
  2. 2. <ul><li>10 years in visual design </li></ul><ul><li>Will argue over 1 pixel </li></ul><ul><li>Thinks visual should have as much impact as music </li></ul><ul><li>Loves bubble tea </li></ul>Allen Chan - 詹智堯
  3. 3. <ul><li>A Bit About Us </li></ul><ul><li>Our Story </li></ul><ul><li>Inspire & Be Inspired </li></ul>On the Agenda
  4. 4. A Bit About Us
  5. 5. <ul><li>Fully visualize what others can’t </li></ul><ul><li>Breathe life into ideas and lifeless wireframes </li></ul>What We Do
  6. 6. <ul><li>Create emotional connections with the audience </li></ul>What We Do
  7. 7. But Also...
  8. 8. <ul><li>Provide pretty intense visual specs </li></ul>But Also...
  9. 9. More...
  10. 10. And More...
  11. 11. And More...
  12. 12. And a Bit More...
  13. 13. And a Bit More...
  14. 14. And a Bit More...
  15. 15. And then...
  16. 16. What Usually Happens
  17. 17. <ul><li>Have strong personal preferences </li></ul><ul><li>Often too idealistic / perfectionists </li></ul>We Also
  18. 18. <ul><li>Maek typos </li></ul><ul><li>Always ask for your opinion (doesn’t mean we will accept them) </li></ul>We Also
  19. 19. <ul><li>Pretty weird and expressive people </li></ul><ul><li>Fun and terrible to be with </li></ul>We Also Always fun with visual designers...but be prepared for the worst!
  20. 20. Our Story
  21. 21. <ul><li>No standard to “beauty” </li></ul><ul><li>Everyone is a designer, and wants to be one (verbally) </li></ul>Design is Subjective
  22. 22. <ul><li>Occasional “strong opinions” from above </li></ul><ul><li>Never a priority for RDs </li></ul><ul><li>So what can we do? </li></ul>Design is Subjective
  23. 23. We Lead & I n s p i r e
  24. 24. <ul><li>Align everyone to a common goal </li></ul>Set the Direction “ There is gold at the end of the rainbow.”
  25. 25. <ul><li>Show something they’ve never seen </li></ul>Create Excitement By Manabu Ikeda
  26. 26. <ul><li>Fascinate people with details </li></ul>Create Excitement By Manabu Ikeda
  27. 27. <ul><li>Draw the audience, make them feel a part of it </li></ul>Create Emotions
  28. 28. The “Titanium Story”
  29. 29. <ul><li>Boring </li></ul><ul><li>Gets in your way </li></ul><ul><li>Causes trouble </li></ul><ul><li>Boring </li></ul><ul><li>Scary </li></ul><ul><li>Not fun </li></ul><ul><li>Boring </li></ul><ul><li>Clueless </li></ul>Security Software is...
  30. 30. <ul><li>Traditionally it looked like.... </li></ul>Some Samples
  31. 31. <ul><li>Clean </li></ul><ul><li>Informational </li></ul><ul><li>Carries the brand </li></ul><ul><li>Traditional </li></ul><ul><li>Not exciting </li></ul>Trend Micro Internet Security 2010 But...
  32. 32. <ul><li>“ Smarter, lighter, easier” </li></ul><ul><li>PM: </li></ul><ul><li>“ Something small and black” </li></ul><ul><li>We think: </li></ul><ul><li>“ A design that’s cool, refreshing, and different” </li></ul>Trend Micro Titanium Concept
  33. 33. <ul><li>Can we use flash?Can we use PNG?Can we create “shadows” on the console?Can we do animations?Can we have transparency?How do we make it skinnable? </li></ul><ul><li>Is black a good color?Localization issues on a small UI? </li></ul>Concerns
  34. 34. <ul><li>We looked for other securities </li></ul>What Can We Reference?
  35. 35. Boring.
  36. 36. <ul><li>Other consumer software </li></ul>What Can We Reference?
  37. 37. <ul><li>Engaging </li></ul><ul><li>Less cluttered information </li></ul><ul><li>Clear UI elements (buttons, icons, minimal labels) </li></ul><ul><li>Colorful, stylish </li></ul><ul><li>Trending to the “darker” side </li></ul><ul><li>Ready for Touch? </li></ul>What Can We Pickup?
  38. 38. So we did some exploring...
  39. 39. <ul><li>Style exploration -- light weight, smart </li></ul><ul><li>Animations, visual cues </li></ul>Early Concept
  40. 40. <ul><li>Then we get “The Brick” </li></ul>If We Cannot Achieve It...
  41. 41. We Wanted it to Say
  42. 42. 1st Official Mockup (Internally)
  43. 43. <ul><li>Too much controls </li></ul><ul><li>Button not apparent </li></ul><ul><li>Too dark </li></ul><ul><li>Doesn’t carry the “brand” </li></ul><ul><li>Unclear status </li></ul>Issues
  44. 44. <ul><li>Color variations, transparency for lighter feel </li></ul><ul><li>Carry the Trend Micro brand </li></ul>So We Explored More
  45. 45. <ul><li>Different materials & finishes </li></ul><ul><li>More high-tech / smarter feel </li></ul>And More...
  46. 46. Then requirements changed... (And lots of opinions) ((As always))
  47. 47. So We Changed
  48. 48. <ul><li>Localization issues </li></ul><ul><li>Not “clean” enough </li></ul><ul><li>Button clarity </li></ul><ul><li>Still too dark </li></ul><ul><li>UI & Visual designer back to the drawing board </li></ul>And We Thought Again
  49. 49. We Evolved...
  50. 50. <ul><li>Reduced & shortened wording </li></ul><ul><li>Clearer controls </li></ul><ul><li>Cleaner, smoother colors </li></ul><ul><li>Lighter, simpler, smarter </li></ul><ul><li>And... </li></ul>The Result
  51. 51. The Team was Excited !
  52. 52. Now to Make it Happen
  53. 53. We Looked for Solutions
  54. 54. We Looked for Solutions
  55. 55. We Worked on the Details
  56. 56. We Breathed Life
  57. 57. We Breathed Life
  58. 58. We Gave it Personality
  59. 59. We Optimized PNG crunching reduces 30~70% file size <ul><li>Before (rough #) 4 Folders6MB250 files </li></ul><ul><ul><li>4 Folders6MB250 files </li></ul></ul><ul><li>After 1 Folder179 Kb8 files </li></ul><ul><ul><li>1 Folder179 Kb8 files </li></ul></ul>
  60. 60. Achieved By Turning this Into These (Image Sprites)
  61. 61. <ul><li>We had fun in and out </li></ul><ul><li>We raised the visibility </li></ul>On the Side
  62. 64. <ul><li>Internal posters </li></ul>We Had More Fun
  63. 65. <ul><li>Shirts, mail, booths </li></ul>We Had More Fun
  64. 66. <ul><li>Designed the Retail version & imagined the box </li></ul>We Reached Out
  65. 67. We Made a Video!
  66. 68. It Matters <ul><ul><li>Good designs are: </li></ul></ul><ul><ul><ul><li>Technically feasible </li></ul></ul></ul><ul><ul><ul><li>Have business value </li></ul></ul></ul><ul><ul><ul><li>Sustainable / lasting </li></ul></ul></ul><ul><ul><ul><li>Echoing to the audience </li></ul></ul></ul><ul><ul><ul><li>Tells a story </li></ul></ul></ul>
  67. 69. <ul><ul><ul><li>Characters = Functions </li></ul></ul></ul><ul><ul><ul><li>Storyline = Flows </li></ul></ul></ul><ul><ul><ul><li>Audience = Users </li></ul></ul></ul>Telling the Story
  68. 70. <ul><ul><ul><li>UI Designers = Script writer </li></ul></ul></ul><ul><ul><ul><li>Visual Designers = The director </li></ul></ul></ul>Telling the Story
  69. 71. <ul><ul><li>Animation is no longer a luxury </li></ul></ul><ul><ul><li>Builds mental model in user’s heads </li></ul></ul>Telling the Story
  70. 72. Make the Story Believable
  71. 73. <ul><ul><li>How would you like the audience to enjoy the movie? </li></ul></ul>It’s Like... <ul><ul><ul><li>= </li></ul></ul></ul><ul><ul><ul><li>= </li></ul></ul></ul>
  72. 74. Inspire & Be Inspired
  73. 75. Draw From Everyday Life
  74. 76. Step Closer, Feel Everything
  75. 77. <ul><li>It’s better to be a guy </li></ul>Look Where Least Expected
  76. 78. <ul><li>Know your foundations </li></ul>Make It Part of You
  77. 79. Lastly...
  78. 80. <ul><li>Every color, pixel, shape makes a difference </li></ul>People Are Visual
  79. 81. <ul><li>Always have a reason for what you’re doing </li></ul>Believe in Yourself