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

UiGathering Talk - Masters of visualization / by Allen Chan

on

  • 2,975 views

UiGathering 2011 July

UiGathering 2011 July

Statistics

Views

Total Views
2,975
Views on SlideShare
2,497
Embed Views
478

Actions

Likes
12
Downloads
0
Comments
0

8 Embeds 478

http://uxkid.tumblr.com 215
http://deathhell1121.blogspot.com 177
http://deathhell1121.blogspot.tw 56
http://deathhell1121.blogspot.jp 22
http://deathhell1121.blogspot.hk 3
http://blog.wingzero.tw 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 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