0
Visualizing User
Experience
Prasanna Revan, Y!Design, Yahoo! Bangalore
Saturday, July 13, 13
Hi, I am Prasanna Revan.
My passion is design. My distractions
are, Motorcycling, Arduino, Farming, Kinect,
Indology, Vamp...
Me
You
I need to make a confession!
Aarthi Ramamurthy http://www.flickr.com/photos/aarthi/437923767/sizes/o/in/photostream/...
To visualize user
experiences you
need no
training.
experience.
special skills.
fancy tools.
by vill3r http://www.flickr.co...
Well, all you
need is
a warm heart.
passion for users.
a keen sense.
eye for details.
&
courage to fail!
By muscolinos www...
I have two broad questions for
you...
What is Art?
and What is Design?
Saturday, July 13, 13
This is
Art.
Saturday, July 13, 13
Philips Livingcolors - 16 Million Color LED
This is Design
Saturday, July 13, 13
Today’s topics
How it connects with User Experience?
What is to Visualize?
Saturday, July 13, 13
The answer lies in one word.
“Interface”
Saturday, July 13, 13
Interface is everywhere!
David.Asch - http://www.flickr.com/photos/trinity-of-one/20562069/sizes/o/i
Saturday, July 13, 13
Graphical user interfaces
Web user interfaces
Touchscreens (Display)
Command line interfaces
Touch user interface (Touch p...
Saturday, July 13, 13
Important elements of visualizing
Imagine / new possibilities
Empathize / emotions
Synthesize / blend seamlessly
Create / ...
Imagine the impossible.
MIT'S ORBS
From MIT’s Media
Lab, a series of
levitating orbs can
be rearranged--
placed right in
m...
Empathizing with scrap-bookers.
Saturday, July 13, 13
Empathizing with independent artists.
Saturday, July 13, 13
Synthesize everything!
Saturday, July 13, 13
Fine-tune and re-invent.
Saturday, July 13, 13
Creating with simple interactions
Saturday, July 13, 13
Surprise!
Saturday, July 13, 13
Visual Elements
Type / Typography
Layout / Composition
Contrast / Intensity
Visual Story / Theme
Palette / Clarity
Saturda...
Create Your Story
Saturday, July 13, 13
Create Your Story
FORD KEYFREE
Ford’s Keyfree has
nothing to do with cars.
Instead, this promotional
app stores all of you...
Build a Visual Design Strategy
http://www.behance.net/gallery/Google-Visual-Assets-
Guidelines-Part-2/9084309
Saturday, Ju...
Know Your Composition Basics
The Fibonacci sequence starts
like this: 0, 1, 1, 2, 3, 5, 8, 13, 21,
34, 55 and so on foreve...
Composition and Golden Ratio
Saturday, July 13, 13
Define your Grid
Saturday, July 13, 13
Examples of Responsive Grid Design
Saturday, July 13, 13
Create simple Navigation
Saturday, July 13, 13
Define Key Page-types
Login CRUD Dashboard
And identify patterns...
Saturday, July 13, 13
Contrast is key
Saturday, July 13, 13
Know Your Typography
Saturday, July 13, 13
Type can evoke powerful feelings.
Saturday, July 13, 13
Play with the Palette
Saturday, July 13, 13
Key steps for visual thinking
Artifacts Model Refine
Saturday, July 13, 13
Visual experience is beyond
front-end.
It has to be a part of your
product strategy.
Saturday, July 13, 13
The goal is not to create a deliverable,
it’s to change something in the world
—to create an outcome.
Saturday, July 13, 13
Thank you!
The goal is not to create a deliverable,
it’s to change something in the world
—to create an outcome.
Saturday,...
Upcoming SlideShare
Loading in...5
×

Yahoo! Hack India: Hyderabad | Visualizing User Experience

673

Published on

Prasanna Kumar talking about 'Visualizing User Experience'

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
673
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Yahoo! Hack India: Hyderabad | Visualizing User Experience"

  1. 1. Visualizing User Experience Prasanna Revan, Y!Design, Yahoo! Bangalore Saturday, July 13, 13
  2. 2. Hi, I am Prasanna Revan. My passion is design. My distractions are, Motorcycling, Arduino, Farming, Kinect, Indology, Vampires, Comic Books, Spaceships, Nature, Birds, Steampunk, Stories, Pigments, Nibs, Calligraphy, Typoholics, Startrek, Adele, Country Music, 1930s Talk Radio, Mridangam, Breaking Bad, Craftwerk, Alan Moore, Renaissance Art, Post Modernism, Green Tea, Red Wine and Blues Music. Saturday, July 13, 13
  3. 3. Me You I need to make a confession! Aarthi Ramamurthy http://www.flickr.com/photos/aarthi/437923767/sizes/o/in/photostream/ Saturday, July 13, 13
  4. 4. To visualize user experiences you need no training. experience. special skills. fancy tools. by vill3r http://www.flickr.com/photos/viller/8925872014/sizes/h/in/ Saturday, July 13, 13
  5. 5. Well, all you need is a warm heart. passion for users. a keen sense. eye for details. & courage to fail! By muscolinos www.flickr.com/photos/muscolinos/2435217016/sizes/l/in/photostream/ Saturday, July 13, 13
  6. 6. I have two broad questions for you... What is Art? and What is Design? Saturday, July 13, 13
  7. 7. This is Art. Saturday, July 13, 13
  8. 8. Philips Livingcolors - 16 Million Color LED This is Design Saturday, July 13, 13
  9. 9. Today’s topics How it connects with User Experience? What is to Visualize? Saturday, July 13, 13
  10. 10. The answer lies in one word. “Interface” Saturday, July 13, 13
  11. 11. Interface is everywhere! David.Asch - http://www.flickr.com/photos/trinity-of-one/20562069/sizes/o/i Saturday, July 13, 13
  12. 12. Graphical user interfaces Web user interfaces Touchscreens (Display) Command line interfaces Touch user interface (Touch pads) Attentive user interfaces (Present warnings) Conversational Interface Agents (Robots, Etc) Gesture interfaces (Kinect) Intelligent user interfaces (Combination of many) Motion tracking interfaces (body motions to cmd) Multi-screen interfaces (one UI many screens) Tangible user interfaces (Touch and environmental) Task-Focused Interfaces (tasks, not files, as primary) Voice user interfaces Natural-language interfaces (Search) Zero-Input interfaces (Sensors) Zooming user interfaces (Cubes, data) Yes, Everywhere! http://en.wikipedia.org/wiki/User_interface_design Saturday, July 13, 13
  13. 13. Saturday, July 13, 13
  14. 14. Important elements of visualizing Imagine / new possibilities Empathize / emotions Synthesize / blend seamlessly Create / new methods Reduce / Finetune Saturday, July 13, 13
  15. 15. Imagine the impossible. MIT'S ORBS From MIT’s Media Lab, a series of levitating orbs can be rearranged-- placed right in midair--to interface with any computer simulation you can imagine. It’s a 3-D user interface that you can touch. Saturday, July 13, 13
  16. 16. Empathizing with scrap-bookers. Saturday, July 13, 13
  17. 17. Empathizing with independent artists. Saturday, July 13, 13
  18. 18. Synthesize everything! Saturday, July 13, 13
  19. 19. Fine-tune and re-invent. Saturday, July 13, 13
  20. 20. Creating with simple interactions Saturday, July 13, 13
  21. 21. Surprise! Saturday, July 13, 13
  22. 22. Visual Elements Type / Typography Layout / Composition Contrast / Intensity Visual Story / Theme Palette / Clarity Saturday, July 13, 13
  23. 23. Create Your Story Saturday, July 13, 13
  24. 24. Create Your Story FORD KEYFREE Ford’s Keyfree has nothing to do with cars. Instead, this promotional app stores all of your passwords on your iPhone, AIRBNB Airbnb redesigned this year with a focus on social. Airbnb switched the interaction, from clicking a star to clicking a heart. Engagement grew by 30%. Why? Stars mean nothing. Hearts (or love?) are aspirational. TWINE Twine, a puck filled with sensors detects anything from moisture to magnetism. Stick it anywhere and it’ll tweet status updates at your command and there is no coding skill required. Saturday, July 13, 13
  25. 25. Build a Visual Design Strategy http://www.behance.net/gallery/Google-Visual-Assets- Guidelines-Part-2/9084309 Saturday, July 13, 13
  26. 26. Know Your Composition Basics The Fibonacci sequence starts like this: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 and so on forever. Each number is the sum of the two numbers that precede it. It's a simple pattern, but it appears to be a kind of built-in numbering system to the cosmos. Saturday, July 13, 13
  27. 27. Composition and Golden Ratio Saturday, July 13, 13
  28. 28. Define your Grid Saturday, July 13, 13
  29. 29. Examples of Responsive Grid Design Saturday, July 13, 13
  30. 30. Create simple Navigation Saturday, July 13, 13
  31. 31. Define Key Page-types Login CRUD Dashboard And identify patterns... Saturday, July 13, 13
  32. 32. Contrast is key Saturday, July 13, 13
  33. 33. Know Your Typography Saturday, July 13, 13
  34. 34. Type can evoke powerful feelings. Saturday, July 13, 13
  35. 35. Play with the Palette Saturday, July 13, 13
  36. 36. Key steps for visual thinking Artifacts Model Refine Saturday, July 13, 13
  37. 37. Visual experience is beyond front-end. It has to be a part of your product strategy. Saturday, July 13, 13
  38. 38. The goal is not to create a deliverable, it’s to change something in the world —to create an outcome. Saturday, July 13, 13
  39. 39. Thank you! The goal is not to create a deliverable, it’s to change something in the world —to create an outcome. Saturday, July 13, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×