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.

THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for

713 views

Published on

The presentation outlines the following items:
1. Collaboration between developers and designers, in other words – how to understand each other
2. Why hardware and technical constraints should be taken into account while creating an app
3. Key differences between iOS Human Interface and Material Design
4. How to follow simple rules and design interfaces for both platforms
5. Finally, a few examples of interfaces designed and developed with neglecting of guidelines.

Published in: Design
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/8g5wj ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you... ♥♥♥ http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Intimacy has never been so much fun! Buy the clinically proven men's natural supplement that helped guys increase satisfaction by 71.43%! ●●● https://tinyurl.com/yy3nfggr
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ➤➤ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for

  1. 1. Andriy Larchenko (UI/UX designer @ Perfectial) THE POWER OF GUIDELINES Or: How important is to know design guidelines of platform you design/develop for DESIGN TEAM
  2. 2. AGENDA What we fight for2 3 Key points 4 Pain Intro1
  3. 3. INTRO IBM Design Language iOS Human Interface Google Material Design Universal Windows Platform Design
  4. 4. WHAT WE FIGHT FOR Performance Understanding Collaboration Reputation Maturity
  5. 5. KEY POINTS A familiar, flowing experience keeps users engaged OS Philosophy Components & Patterns Structure Environment Motion Visuals
  6. 6. key points ENVIRONMENT Hardware Screen size Screen resolution Physical controls Software System Features Extensions Technologies
  7. 7. key points PHILOSOPHY Three primary themes differentiate iOS from other platforms: Material design synthesizes the classic principles of good design with the innovation and possibility of technology and science. Material is the metaphor Bold, graphic, intentional Motion provides meaning Clarity Deference Depth iOS Human Interface Material Design
  8. 8. key points STRUCTURE Status bar Side navs App bar/toolbar Content area Bottom bar Action button Status bar Nav bar Search bar Content area Tab bar Toolbar iOS Human Interface Material Design
  9. 9. key points VISUAL STYLE iOS Human Interface Material Design 1. Metrics & Keylines PT DP SP All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid. Points Density-Independent Pixels Scalable Pixels In looking closely at Apple's own UIs, they aren't as strict to the grid and baseline as Google Material Design is, instead opting for more of a modular approach.
  10. 10. 1x 2x 3x 1x 1.5x 2x 3x 4x key points VISUAL STYLE iOS Human Interface Material Design 1. Metrics & Keylines
  11. 11. key points VISUAL STYLE iOS Human Interface Material Design 1. Metrics & Keylines
  12. 12. key points VISUAL STYLE In iOS, color can indicate interactivity, impart vitality, and provide visual continuity. Look to the system’s color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds. Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. iOS Human Interface Material Design 2. Colors R 255 G 59 B 48 R 255 G 149 B 0 R 255 G 204 B 0 R 76 G 217 B 100 R 90 G 200 B 250 R 0 G 122 B 255 R 88 G 86 B 214 R 255 G 44 B 85
  13. 13. Key points VISUAL STYLE “Color should be unexpected and vibrant” - Google
  14. 14. key points VISUAL STYLE iOS Human Interface Material Design 3. Product icons App icon AppStore icon Spotlight Settings Play Store icon App icon * 8 sizes * 5 sizes
  15. 15. key points VISUAL STYLE iOS Human Interface Material Design 4. Interface icons Outline icons with almost no fill Soft corners Thin lines ~1 px Mostly line style Extremely simplified shapes Corner radius 2 px 2 px lines Flat style Filled
  16. 16. key points VISUAL STYLE iOS Human Interface Material Design 5. Typography San Francisco SF Text Display SF Compact Text Display Roboto is the standard typeface on Android. Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.
  17. 17. Key points MOTION
  18. 18. Key points MOTION
  19. 19. Key points GESTURES As a general rule, use standard gestures. Don’t block systemwide gestures. Avoid using standard gestures to perform nonstandard actions. Offer shortcut gestures to supplement, not replace, interface- based navigation and actions. Use multifinger gestures to enhance the experience of some apps.
  20. 20. Key points COMPONENTS & PATTERNS iOS Human Interface Material Design Title TitleNav bar App bar ActivityHome ProfileMessages Settings Tab bar Activity Home Profile Messages Settings Drawer menu
  21. 21. Key points COMPONENTS & PATTERNS iOS Human Interface Material Design Button Button BUTTON BUTTON Dolor Sit Amet Consectetur adipiscing elit. BUTTON Dolor Sit Amet Consectetur adipiscing elit. Button Floating action buttons Button BUTTON
  22. 22. Key points COMPONENTS & PATTERNS iOS Human Interface Material Design Cancel Flag Mark as Unread Move to Junk Flag Move to junk Mark as unread Android overlays have a solid colour with a slight drop shadow to indicate that it is a “paper” layer above. iOS overlays have no drop shadow, but have a slight transparency on the background. Action sheets Bottom sheets
  23. 23. Key points COMPONENTS & PATTERNS iOS Human Interface Material Design Segmented controls Tabs Option A Option B Option С Title Title OPTION A OPTION B OPTION С
  24. 24. Key points COMPONENTS & PATTERNS iOS Human Interface Material Design “This app” Would Like to Use Your Current Location Don’t Allow OK Allow this app to use your location? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. AGREEDISAGREE
  25. 25. Key points COMPONENTS & PATTERNS iOS Human Interface Material Design Radio buttons, check boxes, fields and switches are functional components that should be given a native feel. As with alerts and dialogues, these controls and inputs are an area of trust and familiarity for the user. Use the native components as much as possible for these, so that people (a) know how to use them, and (b) trust your app with their sensitive data or payment details.
  26. 26. Key points COMPONENTS & PATTERNS iOS Human Interface Material Design Default Email URL Numbers Default Email Numbers
  27. 27. Key points COMPONENTS & PATTERNS iOS Human Interface Material Design
  28. 28. PAIN Multiple Sclerosis @Point of Care™
  29. 29. PAIN Unknown app
  30. 30. PAIN GSM Spy Finder
  31. 31. PAIN Docs To Go - Free Office Suite
  32. 32. PAIN KredoMobile
  33. 33. PAIN OTP Smart
  34. 34. SUMMARY It isn’t an impossible task to create a native feel for your app on both iOS and Android with one design. Try to keep on top of all these tweaks from the beginning, keep an eye out for components that feel out of sync on one platform, and always work as closely as you can with your team.
  35. 35. QUESTIONS?
  36. 36. THANKS FOR ATTENTION! Andriy Larchenko (UI/UX designer @ Perfectial) andrewlarchenko Larchenko.Andrew andrew_larchenko DESIGN TEAM

×