Your SlideShare is downloading. ×
0
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
UiGathering Talk - Masters of visualization / by Allen Chan
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

UiGathering Talk - Masters of visualization / by Allen Chan

2,937

Published on

UiGathering 2011 July

UiGathering 2011 July

Published in: Design, Technology, Art & Photos
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,937
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Masters of Visualization <ul><li>1 Pixel 1 Pixel 的改變世界 </li></ul>
  • 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. <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. A Bit About Us
  • 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. <ul><li>Create emotional connections with the audience </li></ul>What We Do
  • 7. But Also...
  • 8. <ul><li>Provide pretty intense visual specs </li></ul>But Also...
  • 9. More...
  • 10. And More...
  • 11. And More...
  • 12. And a Bit More...
  • 13. And a Bit More...
  • 14. And a Bit More...
  • 15. And then...
  • 16. What Usually Happens
  • 17. <ul><li>Have strong personal preferences </li></ul><ul><li>Often too idealistic / perfectionists </li></ul>We Also
  • 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. <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. Our Story
  • 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. <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. We Lead & I n s p i r e
  • 24. <ul><li>Align everyone to a common goal </li></ul>Set the Direction “ There is gold at the end of the rainbow.”
  • 25. <ul><li>Show something they’ve never seen </li></ul>Create Excitement By Manabu Ikeda
  • 26. <ul><li>Fascinate people with details </li></ul>Create Excitement By Manabu Ikeda
  • 27. <ul><li>Draw the audience, make them feel a part of it </li></ul>Create Emotions
  • 28. The “Titanium Story”
  • 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. <ul><li>Traditionally it looked like.... </li></ul>Some Samples
  • 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. <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. <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. <ul><li>We looked for other securities </li></ul>What Can We Reference?
  • 35. Boring.
  • 36. <ul><li>Other consumer software </li></ul>What Can We Reference?
  • 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. So we did some exploring...
  • 39. <ul><li>Style exploration -- light weight, smart </li></ul><ul><li>Animations, visual cues </li></ul>Early Concept
  • 40. <ul><li>Then we get “The Brick” </li></ul>If We Cannot Achieve It...
  • 41. We Wanted it to Say
  • 42. 1st Official Mockup (Internally)
  • 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. <ul><li>Color variations, transparency for lighter feel </li></ul><ul><li>Carry the Trend Micro brand </li></ul>So We Explored More
  • 45. <ul><li>Different materials & finishes </li></ul><ul><li>More high-tech / smarter feel </li></ul>And More...
  • 46. Then requirements changed... (And lots of opinions) ((As always))
  • 47. So We Changed
  • 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. We Evolved...
  • 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. The Team was Excited !
  • 52. Now to Make it Happen
  • 53. We Looked for Solutions
  • 54. We Looked for Solutions
  • 55. We Worked on the Details
  • 56. We Breathed Life
  • 57. We Breathed Life
  • 58. We Gave it Personality
  • 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. Achieved By Turning this Into These (Image Sprites)
  • 61. <ul><li>We had fun in and out </li></ul><ul><li>We raised the visibility </li></ul>On the Side
  • 62.  
  • 63.  
  • 64. <ul><li>Internal posters </li></ul>We Had More Fun
  • 65. <ul><li>Shirts, mail, booths </li></ul>We Had More Fun
  • 66. <ul><li>Designed the Retail version & imagined the box </li></ul>We Reached Out
  • 67. We Made a Video!
  • 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>
  • 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
  • 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
  • 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
  • 72. Make the Story Believable
  • 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>
  • 74. Inspire & Be Inspired
  • 75. Draw From Everyday Life
  • 76. Step Closer, Feel Everything
  • 77. <ul><li>It’s better to be a guy </li></ul>Look Where Least Expected
  • 78. <ul><li>Know your foundations </li></ul>Make It Part of You
  • 79. Lastly...
  • 80. <ul><li>Every color, pixel, shape makes a difference </li></ul>People Are Visual
  • 81. <ul><li>Always have a reason for what you’re doing </li></ul>Believe in Yourself

×