Masters of Visualization <ul><li>1 Pixel 1 Pixel  的改變世界 </li></ul>
<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...
<ul><li>A Bit About Us </li></ul><ul><li>Our Story </li></ul><ul><li>Inspire & Be Inspired </li></ul>On the Agenda
A Bit About Us
<ul><li>Fully visualize what others can’t </li></ul><ul><li>Breathe life into ideas and lifeless wireframes </li></ul>What...
<ul><li>Create emotional connections with the audience </li></ul>What We Do
But Also...
<ul><li>Provide pretty intense visual specs </li></ul>But Also...
More...
And More...
And More...
And a Bit More...
And a Bit More...
And a Bit More...
And then...
What Usually Happens
<ul><li>Have strong personal preferences </li></ul><ul><li>Often too idealistic / perfectionists </li></ul>We Also
<ul><li>Maek typos </li></ul><ul><li>Always ask for your opinion  (doesn’t mean we will accept them) </li></ul>We Also
<ul><li>Pretty weird and expressive people </li></ul><ul><li>Fun and terrible to be with </li></ul>We Also Always fun with...
Our Story
<ul><li>No standard to “beauty” </li></ul><ul><li>Everyone is a designer, and wants to be one (verbally) </li></ul>Design ...
<ul><li>Occasional “strong opinions” from above </li></ul><ul><li>Never a priority for RDs </li></ul><ul><li>So what can w...
We Lead &  I n s p i r e
<ul><li>Align everyone to a common goal </li></ul>Set the  Direction “ There is gold at the end of the rainbow.”
<ul><li>Show something they’ve never seen </li></ul>Create  Excitement By Manabu Ikeda
<ul><li>Fascinate people with details </li></ul>Create  Excitement By Manabu Ikeda
<ul><li>Draw the audience, make them feel a part of it </li></ul>Create  Emotions
The “Titanium Story”
<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>...
<ul><li>Traditionally it looked like.... </li></ul>Some Samples
<ul><li>Clean </li></ul><ul><li>Informational </li></ul><ul><li>Carries the brand </li></ul><ul><li>Traditional </li></ul>...
<ul><li>“ Smarter, lighter, easier” </li></ul><ul><li>PM: </li></ul><ul><li>“ Something small and black” </li></ul><ul><li...
<ul><li>Can we use flash?Can we use PNG?Can we create “shadows” on the console?Can we do animations?Can we have transparen...
<ul><li>We looked for other securities </li></ul>What Can We Reference?
Boring.
<ul><li>Other consumer software </li></ul>What Can We Reference?
<ul><li>Engaging </li></ul><ul><li>Less cluttered information </li></ul><ul><li>Clear UI elements (buttons, icons, minimal...
So we did some exploring...
<ul><li>Style exploration -- light weight, smart </li></ul><ul><li>Animations, visual cues </li></ul>Early Concept
<ul><li>Then we get “The Brick” </li></ul>If We Cannot Achieve It...
We Wanted it to Say
1st Official Mockup  (Internally)
<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...
<ul><li>Color variations, transparency for lighter feel </li></ul><ul><li>Carry the Trend Micro brand </li></ul>So We Expl...
<ul><li>Different materials & finishes </li></ul><ul><li>More high-tech / smarter feel </li></ul>And More...
Then requirements changed... (And lots of opinions) ((As always))
So We Changed
<ul><li>Localization issues </li></ul><ul><li>Not “clean” enough </li></ul><ul><li>Button clarity </li></ul><ul><li>Still ...
We Evolved...
<ul><li>Reduced & shortened wording </li></ul><ul><li>Clearer controls </li></ul><ul><li>Cleaner, smoother colors </li></u...
The Team was  Excited !
Now to Make it Happen
We Looked for Solutions
We Looked for Solutions
We Worked on the Details
We Breathed Life
We Breathed Life
We Gave it Personality
We Optimized PNG crunching reduces 30~70% file size <ul><li>Before (rough #) 4 Folders6MB250 files </li></ul><ul><ul><li>4...
Achieved By Turning this Into These (Image Sprites)
<ul><li>We had fun in and out </li></ul><ul><li>We raised the visibility </li></ul>On the Side
 
 
<ul><li>Internal posters </li></ul>We Had More Fun
<ul><li>Shirts, mail, booths </li></ul>We Had More Fun
<ul><li>Designed the Retail version & imagined the box </li></ul>We Reached Out
We Made a Video!
It Matters <ul><ul><li>Good designs are: </li></ul></ul><ul><ul><ul><li>Technically feasible </li></ul></ul></ul><ul><ul><...
<ul><ul><ul><li>Characters =  Functions </li></ul></ul></ul><ul><ul><ul><li>Storyline =  Flows </li></ul></ul></ul><ul><ul...
<ul><ul><ul><li>UI Designers =  Script writer </li></ul></ul></ul><ul><ul><ul><li>Visual Designers =  The director </li></...
<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>...
Make the Story Believable
<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></...
Inspire & Be Inspired
Draw From Everyday Life
Step Closer, Feel Everything
<ul><li>It’s better to be a guy </li></ul>Look Where Least Expected
<ul><li>Know your foundations </li></ul>Make It Part of You
Lastly...
<ul><li>Every color, pixel, shape makes a difference </li></ul>People Are Visual
<ul><li>Always have a reason for what you’re doing </li></ul>Believe in Yourself
Upcoming SlideShare
Loading in...5
×

UiGathering Talk - Masters of visualization / by Allen Chan

2,978

Published on

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,978
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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

×