Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Interface Design

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

  • Login to see the comments

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!

×