Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Pixl is a user experience design
shop creating user-centered
designs for the modern web.
JONATHAN SPEH
VISUAL DESIGN
FUNDAMENTALS
AGENDA
INTRODUCTION
VISUAL HIERARCHY
UI ELEMENTS
VISUAL ELEMENTS
Q&A
DESIGN IS NOT SIMPLY SHAPES AND COLORS,
IT’S ABOUT BUILDING A CONNECTION WITH
YOUR USERS. IT’S OFTEN THE FIRST AND ONLY
CH...
A BALANCE BETWEEN CAPTIVATING AESTHETICS
AND EFFORTLESS INTERACTIVITY
DESIGN IS HUMAN
“IT TAKES MONUMENTAL IMPROVEMENT FOR US
TO CHANGE HOW WE LIVE OUR LIVES. DESIGN IS
THE WAY WE ACCESS THAT IMPROVEMENT.”
TH...
CONSTRUCTING
YOUR DESIGN
INTERFACE DESIGN
A WEBSITE IS THE SCIENCE OF AESTHETICS
COMBINED WITH THE PRINCIPALS OF BUSINESS
SHAPING THE UX
Maintaining consistency from page-to-
page will lend to a more intuitive design.
CONSISTENCY
Backgrounds, t...
VISUAL HIERARCHY
LAYOUT
COMMUNICATE
IMPACT
INFORM
A LOGICAL PROGRESSION THAT GUIDES
USERS FROM ONE ACTION TO THE NEXT
COMMUNICATION
CLEARLY COMMUNICATE CONTENT BY
PRIORITIZING IT WITHIN YOUR DESIGN
IMPACT
MEMORABLE DESIGNS INVOKE A
POSITIVE EMOTIONAL RESPONSE
VIRGIN AMERICA
SCANNING PATTERNS
Z-PATTERN
1 2
3
4
F-PATTERN
SPACE
SPACE
EXPLOIT COLOR TO DRAW ATTENTION
TO SPECIFIC AREAS OF YOUR DESIGN
COLOR
COOLORS
ADOBE KULER
UIGRADIENTS
MATERIALPALETTE
FLATUICOLORS
TEXT SIZE, TYPOGRAPHY, AND
CONTRAST, USED FOR EMPHASIS
SIZE
SO WHERE ARE WE HEADED?
THE NEW PARADIGM OF DESIGN WILL BE WHEN WE THINK
BEYOND THE CONSTRAINTS OF A SCREEN. TURNING TO
HAPTIC, AUTOMATED, AND AMB...
29
UI ELEMENTS
PRINCIPALS + PATTERNS
INTERFACE DESIGN
HOW THE USER INTERACTS WITH A SITE
AESTHETIC DESIGN
THE OVERALL LOOK AND
FEEL OF THE SITE
INFORMATION DESIGN
HOW INFORMATION IS PRESENTED
AND ORGANIZED ON THE SITE
AN INTERFACE IS A COLLECTION OF JOBS AND
EACH JOB HAS A BEGINNING, MIDDLE, AND END
POSTING A STATUS
UPDATE ON FACEBOOK
COMPONENTS
INPUT CONTROLS
PROVIDE INTERACTION AND FUNCTIONALITY
GIVING THE USER ADDITIONAL OPTIONS
INPUT TRANSITION
NAVIGATION
PROVIDES ORIENTATION FOR THE USER AND
STREAMLINES HOW MOVE ABOUT THE SITE
ANIMATIONS + TRANSITIONS
DRAW ATTENTION AND SIGNAL CHANGE IN
A MORE SEAMLESS MANNER
ESTABLISHING CONNECTIONS THROUGH
TRANSITIONS MAKE YOUR SITE COHERENT
TRANSITIONS
THE MAYA PRINCIPAL
DESIGNERS MUST PAVE THE WAY TOWARD THE FUTURE, BUT IN
GRADUAL STEPS—DELIVERING EXPERIENCES THAT BREAK NEW
GROUND, BUT STIL...
45
TAKAWAYS
Add an additional layer of interactivity to your design. An often overlooked element that
can enhance your interface and c...
VISUAL ELEMENTS
DESIGN + STYLE
CONTRAST, COLOR, AND TYPOGRAPHY ARE THE MOST
IMPORTANT VISUAL ELEMENTS WHEN IT COMES TO HOW
AN INTERFACE IS PERCEIVED AND ...
CONTRAST SPECIFICALLY AS IT RELATES TO
COLOR HELPS CREATES DRAMA AND INTRIGUE
COLOR CONTRAST DETERMINES
YOUR ENTIRE COLOR PALETTE
COLOR CONTRAST
COLOR SCHEMES
TRIADIC
SIMPLE TO USE, BALANCED,
COMPLEMENTARY, AND VIBRANT
TRIADIC
COMPOUND
USES BOTH CONTRASTING AND
COMPLEMENTARY COLORS
COMPOUND
ANALOGOUS
FOCUSES ON COMPLEMENTARY
COLORS RATHER THAN CONTRASTING
ANALOGOUS
TYPOGRAPHY
Modern and dynamic, they are simple and easy to read on a screen, even at smaller sizes–
perfect for body text, or headlin...
CREATIVE
CLEAN
FUN
BOLD
Q&A
THANK YOU!
Visual Interface Design
Visual Interface Design
Próxima SlideShare
Cargando en…5
×

Visual Interface Design

The fundamentals of visual design, interface design, and UX design.

  • Sé el primero en comentar

Visual Interface Design

  1. 1. Pixl is a user experience design shop creating user-centered designs for the modern web.
  2. 2. JONATHAN SPEH VISUAL DESIGN FUNDAMENTALS
  3. 3. AGENDA INTRODUCTION VISUAL HIERARCHY UI ELEMENTS VISUAL ELEMENTS Q&A
  4. 4. DESIGN IS NOT SIMPLY SHAPES AND COLORS, IT’S ABOUT BUILDING A CONNECTION WITH YOUR USERS. IT’S OFTEN THE FIRST AND ONLY CHANCE TO LEAVE A LASTING IMPRESSION.
  5. 5. A BALANCE BETWEEN CAPTIVATING AESTHETICS AND EFFORTLESS INTERACTIVITY
  6. 6. DESIGN IS HUMAN
  7. 7. “IT TAKES MONUMENTAL IMPROVEMENT FOR US TO CHANGE HOW WE LIVE OUR LIVES. DESIGN IS THE WAY WE ACCESS THAT IMPROVEMENT.” THE IMPACT OF DESIGN MIKE DAVIDSON, TWITTER — VICE PRESIDENT, DESIGN
  8. 8. CONSTRUCTING YOUR DESIGN
  9. 9. INTERFACE DESIGN A WEBSITE IS THE SCIENCE OF AESTHETICS COMBINED WITH THE PRINCIPALS OF BUSINESS
  10. 10. SHAPING THE UX Maintaining consistency from page-to- page will lend to a more intuitive design. CONSISTENCY Backgrounds, text, icons, and graphic elements should all be considered when selecting a color palette. COLOR Ensure that your design contains visuals that are not only aesthetically pleasing, but are easily recognizable. VISUAL CUES Allowing users to customize certain features, upload a profile photo, change the settings, etc. lends to a personal feel. CUSTOMIZATION
  11. 11. VISUAL HIERARCHY LAYOUT COMMUNICATE IMPACT
  12. 12. INFORM A LOGICAL PROGRESSION THAT GUIDES USERS FROM ONE ACTION TO THE NEXT
  13. 13. COMMUNICATION CLEARLY COMMUNICATE CONTENT BY PRIORITIZING IT WITHIN YOUR DESIGN
  14. 14. IMPACT MEMORABLE DESIGNS INVOKE A POSITIVE EMOTIONAL RESPONSE
  15. 15. VIRGIN AMERICA
  16. 16. SCANNING PATTERNS
  17. 17. Z-PATTERN
  18. 18. 1 2 3 4
  19. 19. F-PATTERN
  20. 20. SPACE
  21. 21. SPACE
  22. 22. EXPLOIT COLOR TO DRAW ATTENTION TO SPECIFIC AREAS OF YOUR DESIGN COLOR
  23. 23. COOLORS ADOBE KULER UIGRADIENTS MATERIALPALETTE FLATUICOLORS
  24. 24. TEXT SIZE, TYPOGRAPHY, AND CONTRAST, USED FOR EMPHASIS SIZE
  25. 25. SO WHERE ARE WE HEADED?
  26. 26. THE NEW PARADIGM OF DESIGN WILL BE WHEN WE THINK BEYOND THE CONSTRAINTS OF A SCREEN. TURNING TO HAPTIC, AUTOMATED, AND AMBIENT INTERFACES. ZERO UI
  27. 27. 29
  28. 28. UI ELEMENTS PRINCIPALS + PATTERNS
  29. 29. INTERFACE DESIGN HOW THE USER INTERACTS WITH A SITE
  30. 30. AESTHETIC DESIGN THE OVERALL LOOK AND FEEL OF THE SITE
  31. 31. INFORMATION DESIGN HOW INFORMATION IS PRESENTED AND ORGANIZED ON THE SITE
  32. 32. AN INTERFACE IS A COLLECTION OF JOBS AND EACH JOB HAS A BEGINNING, MIDDLE, AND END
  33. 33. POSTING A STATUS UPDATE ON FACEBOOK COMPONENTS
  34. 34. INPUT CONTROLS PROVIDE INTERACTION AND FUNCTIONALITY GIVING THE USER ADDITIONAL OPTIONS
  35. 35. INPUT TRANSITION
  36. 36. NAVIGATION PROVIDES ORIENTATION FOR THE USER AND STREAMLINES HOW MOVE ABOUT THE SITE
  37. 37. ANIMATIONS + TRANSITIONS
  38. 38. DRAW ATTENTION AND SIGNAL CHANGE IN A MORE SEAMLESS MANNER
  39. 39. ESTABLISHING CONNECTIONS THROUGH TRANSITIONS MAKE YOUR SITE COHERENT
  40. 40. TRANSITIONS
  41. 41. THE MAYA PRINCIPAL
  42. 42. DESIGNERS MUST PAVE THE WAY TOWARD THE FUTURE, BUT IN GRADUAL STEPS—DELIVERING EXPERIENCES THAT BREAK NEW GROUND, BUT STILL CONTAIN ENOUGH OF THE FAMILIAR TO BE “ACCEPTABLE” TO THE PEOPLE FOR WHOM THEY’RE DESIGNED. MAYA
  43. 43. 45
  44. 44. TAKAWAYS
  45. 45. Add an additional layer of interactivity to your design. An often overlooked element that can enhance your interface and create a more seamless experience INPUT CONTROLS Add an additional layer of interactivity to your design. An often overlooked element that can enhance your interface and create a more seamless experience ANIMATIONS Establish the overall look and feel of the site; consider how the user will interact with the design, and how information and content is presented OBJECTIVE Provides orientation telling the user where they are within the site while streamlining how they move about the site NAVIGATION
  46. 46. VISUAL ELEMENTS DESIGN + STYLE
  47. 47. CONTRAST, COLOR, AND TYPOGRAPHY ARE THE MOST IMPORTANT VISUAL ELEMENTS WHEN IT COMES TO HOW AN INTERFACE IS PERCEIVED AND UNDERSTOOD VISUAL PRINCIPALS
  48. 48. CONTRAST SPECIFICALLY AS IT RELATES TO COLOR HELPS CREATES DRAMA AND INTRIGUE
  49. 49. COLOR CONTRAST DETERMINES YOUR ENTIRE COLOR PALETTE COLOR CONTRAST
  50. 50. COLOR SCHEMES
  51. 51. TRIADIC SIMPLE TO USE, BALANCED, COMPLEMENTARY, AND VIBRANT
  52. 52. TRIADIC
  53. 53. COMPOUND USES BOTH CONTRASTING AND COMPLEMENTARY COLORS
  54. 54. COMPOUND
  55. 55. ANALOGOUS FOCUSES ON COMPLEMENTARY COLORS RATHER THAN CONTRASTING
  56. 56. ANALOGOUS
  57. 57. TYPOGRAPHY
  58. 58. Modern and dynamic, they are simple and easy to read on a screen, even at smaller sizes– perfect for body text, or headlines SANS-SERIF Serif typefaces are characterized by tiny lines (serifs) trailing from the edges of the strokes and stems SERIF Often used to display lines of code and plain text on webpages to enhance their readability, monospace typefaces consist of characters with the same width MONOSPACE
  59. 59. CREATIVE
  60. 60. CLEAN
  61. 61. FUN
  62. 62. BOLD
  63. 63. Q&A
  64. 64. THANK YOU!

×