• Save
UiGathering Talk - Masters of visualization / by Allen Chan
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

UiGathering Talk - Masters of visualization / by Allen Chan

on

  • 3,021 views

UiGathering 2011 July

UiGathering 2011 July

Statistics

Views

Total Views
3,021
Views on SlideShare
2,538
Embed Views
483

Actions

Likes
12
Downloads
0
Comments
0

8 Embeds 483

http://uxkid.tumblr.com 216
http://deathhell1121.blogspot.com 177
http://deathhell1121.blogspot.tw 56
http://deathhell1121.blogspot.jp 22
http://blog.wingzero.tw 7
http://deathhell1121.blogspot.hk 3
http://flavors.me 1
http://deathhell1121.blogspot.kr 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UiGathering Talk - Masters of visualization / by Allen Chan Presentation Transcript

  • 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...
  • 16. What Usually Happens
  • 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
  • 28. The “Titanium Story”
  • 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
  • 62.  
  • 63.  
  • 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