Visual Interface Design
2 likes1,598 views
This document provides a summary of a presentation on visual design fundamentals and user experience design. The presentation covers topics such as visual hierarchy, user interface elements, visual elements, constructing designs, and visual principles. It emphasizes designing for users and communicating information clearly through design. Key aspects of design discussed include contrast, color, typography, navigation, and animation to improve usability and create engaging experiences.
Visual Interface Design
- 1. Pixl is a user experience design shop creating user-centered designs for the modern web.
- 3. AGENDA INTRODUCTION VISUAL HIERARCHY UI ELEMENTS VISUAL ELEMENTS Q&A
- 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. A BALANCE BETWEEN CAPTIVATING AESTHETICS AND EFFORTLESS INTERACTIVITY
- 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
- 10. INTERFACE DESIGN A WEBSITE IS THE SCIENCE OF AESTHETICS COMBINED WITH THE PRINCIPALS OF BUSINESS
- 11. 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
- 13. INFORM A LOGICAL PROGRESSION THAT GUIDES USERS FROM ONE ACTION TO THE NEXT
- 14. COMMUNICATION CLEARLY COMMUNICATE CONTENT BY PRIORITIZING IT WITHIN YOUR DESIGN
- 15. IMPACT MEMORABLE DESIGNS INVOKE A POSITIVE EMOTIONAL RESPONSE
- 16. VIRGIN AMERICA
- 19. Z-PATTERN
- 20. 1 2 3 4
- 21. F-PATTERN
- 22. SPACE
- 23. SPACE
- 24. EXPLOIT COLOR TO DRAW ATTENTION TO SPECIFIC AREAS OF YOUR DESIGN COLOR
- 26. TEXT SIZE, TYPOGRAPHY, AND CONTRAST, USED FOR EMPHASIS SIZE
- 27. SO WHERE ARE WE HEADED?
- 28. 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
- 29. 29
- 30. UI ELEMENTS PRINCIPALS + PATTERNS
- 31. INTERFACE DESIGN HOW THE USER INTERACTS WITH A SITE
- 32. AESTHETIC DESIGN THE OVERALL LOOK AND FEEL OF THE SITE
- 33. INFORMATION DESIGN HOW INFORMATION IS PRESENTED AND ORGANIZED ON THE SITE
- 34. AN INTERFACE IS A COLLECTION OF JOBS AND EACH JOB HAS A BEGINNING, MIDDLE, AND END
- 35. POSTING A STATUS UPDATE ON FACEBOOK COMPONENTS
- 36. INPUT CONTROLS PROVIDE INTERACTION AND FUNCTIONALITY GIVING THE USER ADDITIONAL OPTIONS
- 37. INPUT TRANSITION
- 38. NAVIGATION PROVIDES ORIENTATION FOR THE USER AND STREAMLINES HOW MOVE ABOUT THE SITE
- 40. DRAW ATTENTION AND SIGNAL CHANGE IN A MORE SEAMLESS MANNER
- 41. ESTABLISHING CONNECTIONS THROUGH TRANSITIONS MAKE YOUR SITE COHERENT
- 42. TRANSITIONS
- 44. 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
- 45. 45
- 46. TAKAWAYS
- 47. 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
- 48. VISUAL ELEMENTS DESIGN + STYLE
- 49. CONTRAST, COLOR, AND TYPOGRAPHY ARE THE MOST IMPORTANT VISUAL ELEMENTS WHEN IT COMES TO HOW AN INTERFACE IS PERCEIVED AND UNDERSTOOD VISUAL PRINCIPALS
- 50. CONTRAST SPECIFICALLY AS IT RELATES TO COLOR HELPS CREATES DRAMA AND INTRIGUE
- 51. COLOR CONTRAST DETERMINES YOUR ENTIRE COLOR PALETTE COLOR CONTRAST
- 52. COLOR SCHEMES
- 53. TRIADIC SIMPLE TO USE, BALANCED, COMPLEMENTARY, AND VIBRANT
- 54. TRIADIC
- 55. COMPOUND USES BOTH CONTRASTING AND COMPLEMENTARY COLORS
- 56. COMPOUND
- 57. ANALOGOUS FOCUSES ON COMPLEMENTARY COLORS RATHER THAN CONTRASTING
- 58. ANALOGOUS
- 59. TYPOGRAPHY
- 60. 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
- 61. CREATIVE
- 62. CLEAN
- 63. FUN
- 64. BOLD
- 65. Q&A
- 66. THANK YOU!