📐
UI Design - Cheat Sheet
UI Design Cheat Sheet: Best Practices Across Desktop, Android, and iOS
Typography
Fonts
Desktop: Use system fonts (e.g., Arial, Helvetica, Roboto, Open Sans) for
compatibility and performance.
Android: Default to Roboto for native apps.
iOS: Default to San Francisco (SF Pro Display/Text).
Text Sizes
Use Case Desktop Android iOS
H1 (Large Title) 32-40px 32sp 34pt
H2 (Section Title) 24-32px 24sp 28pt
H3 (Subheading) 18-24px 20sp 22pt
Body Text 14-18px 16sp 17pt
Small Text 12-14px 14sp 15pt
Line Height & Spacing
Use 1.5x line height for readability.
Minimum 8px margin between text blocks.
Understanding Units: px, sp, and pt
px (Pixels): Fixed unit commonly used in web and desktop design.
sp (Scale-independent Pixels): Used in Android; adjusts based on user
font size settings.
UI Design - Cheat Sheet 1
pt (Points): Used in iOS; scales according to screen density to ensure
consistency.
Colors
Contrast & Accessibility
Maintain 4.5:1 contrast ratio for text.
Use WCAG AA or AAA standards for accessibility.
Primary Colors
Use brand colors for primary elements like buttons and links.
Ensure high contrast for readability.
Secondary & Neutral Colors
Secondary: Used for accents and highlights.
Neutral: Grays for backgrounds, borders, and text.
Dark Mode Considerations
Use lighter grays instead of pure white for text.
Background should be #121212 or similar dark gray.
Buttons
Sizes
Type Desktop Android iOS
Primary Button 44-48px height 48dp height 44pt height
Secondary Button 36-44px height 40dp height 38pt height
Icon Button 32-40px 36dp 36pt
Types
Primary: Solid background, high emphasis.
UI Design - Cheat Sheet 2
Secondary: Outlined button, medium emphasis.
Tertiary: Text only, low emphasis.
Floating Action Button (FAB): Used for primary actions in Android.
States
Default: Brand color (Primary) or Neutral (Secondary).
Hover: Slightly darker/lighter than default.
Pressed: 10-20% darker.
Disabled: 50% opacity.
Grids & Layouts
Desktop
12-column grid (Bootstrap standard).
Gutter: 16-24px.
Margins: 16-32px.
Container Width: 1140px (standard).
Android
Uses Material Design Grid (8dp grid system).
Common breakpoints: 360dp, 600dp, 840dp.
Minimum touch target: 48x48dp.
iOS
Uses 4pt grid system.
Common breakpoints: 320pt, 375pt, 414pt.
Minimum touch target: 44x44pt.
Icons & Spacing
Desktop: 16-24px icons.
UI Design - Cheat Sheet 3
Android: 24dp icons (Material Icons recommended).
iOS: 22-28pt icons (SF Symbols preferred).
Final Tips
Keep designs consistent with platform guidelines.
Prioritize accessibility and readability.
Maintain scalable components with responsive design.
Use Auto Layout & Constraints for adaptability.
Follow platform-specific guidelines:
Material Design (Android)
Human Interface Guidelines (iOS)
This cheat sheet provides a solid foundation for designing UI elements across
different platforms. For in-depth specifications, always refer to official
guidelines.
UI Design - Cheat Sheet 4
