UI DESIGN - Art of creating perfect products ( Part 1 )
9 likes1,251 views
The document discusses principles of user interface design, including Gestalt principles and how they can be applied. Some key points covered include: - Gestalt principles help explain how humans perceive visual elements and group objects. Principles like emergence, reification, and invariance are discussed. - The five most useful Gestalt principles for design are identified as similarity, figure-ground relationship, grouping, enclosure and proximity. - Negative space is an important design tool and can be used to improve comprehension, clarify relationships, and attract attention. - Content should be chunked or grouped to make it easier for users to process large amounts of information. - Seven rules for creating gorgeous user interfaces are outlined, including using light and
UI DESIGN - Art of creating perfect products ( Part 1 )
- 1. UI Design Art of creating perfect products
- 2. Design “When an elevator fails, it’s useless,When an escalator fails, it becomes stair. As a designer we should build escalators not elevators.”
- 3. Topics • Gestalt principles • Pillars of Gestalt for Design • 5 Most Useful Gestalt Principles • SPACE • Negative Space is not negative • Chunk Your Content • 7 Rules for Creating Gorgeous UI • Light comes from the sky • Black and white first • Double your whitespace • Learn the methods of overlaying text on images • Make text pop— and un-pop • Only use good fonts • Steal like an artist
- 4. Gestalt principles “Gestalt principles bring to light the grey areas of human vision.”
- 5. Pillars of Gestalt for Design : Emergence “When trying to identify an object, we first attempt to identify the object’s outline, and then match it to outlines we already know.”
- 6. Application to Web Design : Emergence “it doesn’t matter how fascinating a clickable button looks if your user don’t know it’s a button.”
- 7. Pillars of Gestalt for Design : reification “our brains are wired to “fill in the gaps” when information is missing.”
- 8. Application to Web Design : reification “as long as you have enough information to communicate an object, the user can fill in the rest. this means you’re allowed to be creative with your use of white space, treating it as another design tool instead of an empty canvas.”
- 9. Pillars of Gestalt for Design : multi stability “if an object has more than one interpretation, the mind will alternate between the different interpretations since it can’t see both simultaneously.”
- 10. Application to Web Design : multi stability “as avoid multiple interpretations ! double check that your designs can only be seen the way you want them to be seen.”
- 11. Pillars of Gestalt for Design : invariance “we recognize outlines and patterns of objects despite differences in perspective, rotation, scale, or even slight deformation.”
- 12. Application to Web Design : invariance “it is often applied to captcha tests, as invariance is one advantage humans seem to still have over robots.”
- 13. 5 Most Useful Gestalt Principles #1: Similarity “objects that look similar are perceived as similar.”
- 15. 5 Most Useful Gestalt Principles #2: The Figure-Ground Relationship y “elements are perceived as either figures (distinct elements of focus) or ground ( the background on which the figures lie).”
- 18. 5 Most Useful Gestalt Principles #3: Grouping “items that are dissimilar can still be grouped together to appear similar.” ProximityEnclosure
- 19. 5 Most Useful Gestalt Principles #3: Enclosure “enclosing dissimilar objects together within a perceptible boundary will unify them in the viewer’s mind.”
- 20. 5 Most Useful Gestalt Principles #3: Proximity “objects grouped closely together will be perceived as similar..”
- 22. 5 Most Useful Gestalt Principles #4: Closure “humans will provide their own closure to incomplete objects by filling in the gaps themselves.”
- 24. 5 Most Useful Gestalt Principles #5: Continuation “user’s eye creates momentum as it moves from object to object, giving lines a special power in layout design.”
- 26. Space “Ge effective use of space in ui design requires an understanding of aesthetics, functionality, and human behavior.”
- 27. Negative Space Is Not Negative “the designer’s job is to create the best interface and experience possible, and that means using white space as just another design tool.”
- 29. Negative Space Is Not Negative 1. Improving Comprehension 2. Clarifying Relationships 3. Attracting Attention
- 30. Negative Space Is Not Negative #1: Improving Comprehension “the skill of using white spaces lies in providing your users with a digestible amount of content, then stripping away extraneous details.” white space can be broken down into four elements: Visual White Space Layout White Space Text White Space Content White Space
- 31. Negative Space Is Not Negative #1: Improving Comprehension Space surrounding graphics, icons, and images. Visual white space Margins, paddings, and gutters. layout white space Spacing between lines and spacing between letters. text white space Space separating columns of text layout white space
- 34. Negative Space Is Not Negative #2: Clarifying Relationships “the law of proximity, which states that items near to each other appear similar.” •place labels closest to the relevant fields •Group related topics together
- 36. Negative Space Is Not Negative #3: Attracting Attention “the lack of other elements will only make existing elements stand out more.”
- 38. Negative Space Is Not Negative #3: Attracting Attention “the lack of other elements will only make existing elements stand out more.” “humans have a selective attention that leads to tunnel vision - like tuning out banner ads ( known as banner blindness )”
- 40. Chunk Your Content “Don’t make the user think” “it’s not that users are just lazy, it’s that they already have a lot on their mind, and cramming extra information just makes it harder.”
- 41. Chunk Your Content “chunking is the practice of grouping relevant information together to make it easier to process and remember”
- 42. • When your product naturally requires a great deal of information that must be memorized for later use. • The UI must must compete against external stimuli for your us- er’s attention (mobile apps, for example ). • E-learning applications (since users must later recall the information). Chunk is ideal for
- 44. 7 Rules for Creating Gorgeous UI
- 45. 7 Rules for Creating Gorgeous UI #1: Light comes from the sky “Shadows are invaluable cues in telling the human brain what user interface elements we’re looking at.”
- 47. • Text input fields • Pressed buttons • Slider tracks • Radio button (unselected) • Checkboxes Elements that are generally inset:
- 48. • Buttons (unpressed) • Slider buttons • Dropdown controls • The button part of a selected radio button • Popups Elements that are generally outset:
- 49. 7 Rules for Creating Gorgeous UI #1: Light comes from the sky flat design
- 53. 7 Rules for Creating Gorgeous UI #2: Black and White First “Designing in grayscale before adding color simplifies the most complex element of visual design– and forces you to focus on spacing and laying out elements.”
- 55. 7 Rules for Creating Gorgeous UI #2: Black and White First Step 2: add color • The simplest color to add is one color. • Grayscale + two colors • grayscale + multiple colors of a single hue.
- 59. 7 Rules for Creating Gorgeous UI #3: Double your whitespace “add a lot of breathing room.”
- 62. 7 Rules for Creating Gorgeous UI #4: Learn the methods of overlaying text on images Method 0: Apply text directly to image Method 1: Overlay the whole image Method 2: Text-in-a-box Method 3: Blur the image Method 4: Floor fade
- 63. 7 Rules for Creating Gorgeous UI #4: Learn the methods of overlaying text on images Method 0: Apply text directly to image
- 65. 7 Rules for Creating Gorgeous UI #4: Learn the methods of overlaying text on images Method 1: Overlay the whole image
- 68. 7 Rules for Creating Gorgeous UI #4: Learn the methods of overlaying text on images Method 2: Text-in-a-box
- 70. 7 Rules for Creating Gorgeous UI #4: Learn the methods of overlaying text on images Method 3: Blur the image
- 72. 7 Rules for Creating Gorgeous UI #4: Learn the methods of overlaying text on images Method 4: Floor fade
- 74. 7 Rules for Creating Gorgeous UI #5: Make text pop— and un-pop • Size (bigger or smaller) • Color (greater contrast or lesser; bright colors draw the eye) • Font weight (bolder or thinner) • Capitalization (lowercase, UPPERCASE, and Title Case) • Italicization • Letter spacing (or— fancy term alert— tracking!) • Margins (technically not a property of the text itself, but can be used to draw attention, so it makes the list)
- 76. 7 Rules for Creating Gorgeous UI #6: Use Good Fonts
- 77. 7 Rules for Creating Gorgeous UI #7: Steal like an artist
- 78. THANKS