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