• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
UiGathering Talk - Masters of visualization / by Allen Chan
 

UiGathering Talk - Masters of visualization / by Allen Chan

on

  • 2,949 views

UiGathering 2011 July

UiGathering 2011 July

Statistics

Views

Total Views
2,949
Views on SlideShare
2,477
Embed Views
472

Actions

Likes
12
Downloads
0
Comments
0

8 Embeds 472

http://uxkid.tumblr.com 211
http://deathhell1121.blogspot.com 177
http://deathhell1121.blogspot.tw 56
http://deathhell1121.blogspot.jp 22
http://deathhell1121.blogspot.hk 3
http://flavors.me 1
http://deathhell1121.blogspot.kr 1
http://blog.wingzero.tw 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 UiGathering Talk - Masters of visualization / by Allen Chan Presentation Transcript

    • Masters of Visualization
      • 1 Pixel 1 Pixel 的改變世界
      • 10 years in visual design
      • Will argue over 1 pixel
      • Thinks visual should have as much impact as music
      • Loves bubble tea
      Allen Chan - 詹智堯
      • A Bit About Us
      • Our Story
      • Inspire & Be Inspired
      On the Agenda
    • A Bit About Us
      • Fully visualize what others can’t
      • Breathe life into ideas and lifeless wireframes
      What We Do
      • Create emotional connections with the audience
      What We Do
    • But Also...
      • Provide pretty intense visual specs
      But Also...
    • More...
    • And More...
    • And More...
    • And a Bit More...
    • And a Bit More...
    • And a Bit More...
    • And then...
    • What Usually Happens
      • Have strong personal preferences
      • Often too idealistic / perfectionists
      We Also
      • Maek typos
      • Always ask for your opinion (doesn’t mean we will accept them)
      We Also
      • Pretty weird and expressive people
      • Fun and terrible to be with
      We Also Always fun with visual designers...but be prepared for the worst!
    • Our Story
      • No standard to “beauty”
      • Everyone is a designer, and wants to be one (verbally)
      Design is Subjective
      • Occasional “strong opinions” from above
      • Never a priority for RDs
      • So what can we do?
      Design is Subjective
    • We Lead & I n s p i r e
      • Align everyone to a common goal
      Set the Direction “ There is gold at the end of the rainbow.”
      • Show something they’ve never seen
      Create Excitement By Manabu Ikeda
      • Fascinate people with details
      Create Excitement By Manabu Ikeda
      • Draw the audience, make them feel a part of it
      Create Emotions
    • The “Titanium Story”
      • Boring
      • Gets in your way
      • Causes trouble
      • Boring
      • Scary
      • Not fun
      • Boring
      • Clueless
      Security Software is...
      • Traditionally it looked like....
      Some Samples
      • Clean
      • Informational
      • Carries the brand
      • Traditional
      • Not exciting
      Trend Micro Internet Security 2010 But...
      • “ Smarter, lighter, easier”
      • PM:
      • “ Something small and black”
      • We think:
      • “ A design that’s cool, refreshing, and different”
      Trend Micro Titanium Concept
      • 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
      • We looked for other securities
      What Can We Reference?
    • Boring.
      • Other consumer software
      What Can We Reference?
      • 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?
    • So we did some exploring...
      • Style exploration -- light weight, smart
      • Animations, visual cues
      Early Concept
      • Then we get “The Brick”
      If We Cannot Achieve It...
    • We Wanted it to Say
    • 1st Official Mockup (Internally)
      • Too much controls
      • Button not apparent
      • Too dark
      • Doesn’t carry the “brand”
      • Unclear status
      Issues
      • Color variations, transparency for lighter feel
      • Carry the Trend Micro brand
      So We Explored More
      • Different materials & finishes
      • More high-tech / smarter feel
      And More...
    • Then requirements changed... (And lots of opinions) ((As always))
    • So We Changed
      • Localization issues
      • Not “clean” enough
      • Button clarity
      • Still too dark
      • UI & Visual designer back to the drawing board
      And We Thought Again
    • We Evolved...
      • Reduced & shortened wording
      • Clearer controls
      • Cleaner, smoother colors
      • Lighter, simpler, smarter
      • And...
      The Result
    • 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
      • Before (rough #) 4 Folders6MB250 files
        • 4 Folders6MB250 files
      • After 1 Folder179 Kb8 files
        • 1 Folder179 Kb8 files
    • Achieved By Turning this Into These (Image Sprites)
      • We had fun in and out
      • We raised the visibility
      On the Side
    •  
    •  
      • Internal posters
      We Had More Fun
      • Shirts, mail, booths
      We Had More Fun
      • Designed the Retail version & imagined the box
      We Reached Out
    • We Made a Video!
    • It Matters
        • Good designs are:
          • Technically feasible
          • Have business value
          • Sustainable / lasting
          • Echoing to the audience
          • Tells a story
          • Characters = Functions
          • Storyline = Flows
          • Audience = Users
      Telling the Story
          • UI Designers = Script writer
          • Visual Designers = The director
      Telling the Story
        • Animation is no longer a luxury
        • Builds mental model in user’s heads
      Telling the Story
    • Make the Story Believable
        • How would you like the audience to enjoy the movie?
      It’s Like...
          • =
          • =
    • Inspire & Be Inspired
    • Draw From Everyday Life
    • Step Closer, Feel Everything
      • It’s better to be a guy
      Look Where Least Expected
      • Know your foundations
      Make It Part of You
    • Lastly...
      • Every color, pixel, shape makes a difference
      People Are Visual
      • Always have a reason for what you’re doing
      Believe in Yourself