Uploaded byShervin Mashayekh
UI DESIGN - Art of creating perfect products ( Part 1 )
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
More Related Content
![[TechTalks] Effects of UI/ UX Designs on Customer Satisfaction & Loyalty](https://cdn.slidesharecdn.com/ss_thumbnails/effectsofuiuxdesignsoncustomersatisfactionandloyalty-151105071458-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to UI DESIGN - Art of creating perfect products ( Part 1 )
UI DESIGN - Art of creating perfect products ( Part 1 )
- 1. UI Design Art ofcreating perfect products
- 2. Design “When an elevatorfails, 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 principlesbring to light the grey areas of human vision.”
- 5. Pillars of Gestaltfor 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 WebDesign : Emergence “it doesn’t matter how fascinating a clickable button looks if your user don’t know it’s a button.”
- 7. Pillars of Gestaltfor Design : reification “our brains are wired to “fill in the gaps” when information is missing.”
- 8. Application to WebDesign : 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 Gestaltfor 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 WebDesign : 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 Gestaltfor Design : invariance “we recognize outlines and patterns of objects despite differences in perspective, rotation, scale, or even slight deformation.”
- 12. Application to WebDesign : invariance “it is often applied to captcha tests, as invariance is one advantage humans seem to still have over robots.”
- 13. 5 Most UsefulGestalt Principles #1: Similarity “objects that look similar are perceived as similar.”
- 15. 5 Most UsefulGestalt 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 UsefulGestalt Principles #3: Grouping “items that are dissimilar can still be grouped together to appear similar.” ProximityEnclosure
- 19. 5 Most UsefulGestalt Principles #3: Enclosure “enclosing dissimilar objects together within a perceptible boundary will unify them in the viewer’s mind.”
- 20. 5 Most UsefulGestalt Principles #3: Proximity “objects grouped closely together will be perceived as similar..”
- 22. 5 Most UsefulGestalt Principles #4: Closure “humans will provide their own closure to incomplete objects by filling in the gaps themselves.”
- 24. 5 Most UsefulGestalt 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 useof space in ui design requires an understanding of aesthetics, functionality, and human behavior.”
- 27. Negative Space IsNot 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 IsNot Negative 1. Improving Comprehension 2. Clarifying Relationships 3. Attracting Attention
- 30. Negative Space IsNot 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 IsNot 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 IsNot 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 IsNot Negative #3: Attracting Attention “the lack of other elements will only make existing elements stand out more.”
- 38. Negative Space IsNot 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’tmake 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 “chunkingis the practice of grouping relevant information together to make it easier to process and remember”
- 42. • When yourproduct 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 forCreating Gorgeous UI
- 45. 7 Rules forCreating 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 inputfields • 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 forCreating Gorgeous UI #1: Light comes from the sky flat design
- 53. 7 Rules forCreating 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 forCreating 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 forCreating Gorgeous UI #3: Double your whitespace “add a lot of breathing room.”
- 62. 7 Rules forCreating 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 forCreating Gorgeous UI #4: Learn the methods of overlaying text on images Method 0: Apply text directly to image
- 65. 7 Rules forCreating Gorgeous UI #4: Learn the methods of overlaying text on images Method 1: Overlay the whole image
- 68. 7 Rules forCreating Gorgeous UI #4: Learn the methods of overlaying text on images Method 2: Text-in-a-box
- 70. 7 Rules forCreating Gorgeous UI #4: Learn the methods of overlaying text on images Method 3: Blur the image
- 72. 7 Rules forCreating Gorgeous UI #4: Learn the methods of overlaying text on images Method 4: Floor fade
- 74. 7 Rules forCreating 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 forCreating Gorgeous UI #6: Use Good Fonts
- 77. 7 Rules forCreating Gorgeous UI #7: Steal like an artist
- 78.