UiGathering Talk - Masters of visualization / by Allen Chan

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 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 Worked on the Details

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

http://deathhell1121.blogspot.com	177
http://uxkid.tumblr.com	135
http://deathhell1121.blogspot.tw	37
http://deathhell1121.blogspot.jp	16
http://flavors.me	1
http://deathhell1121.blogspot.hk	1

UiGathering Talk - Masters of visualization / by Allen Chan

by UiGathering on Jul 21, 2011

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 367

Statistics

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