Skip to content

Instantly share code, notes, and snippets.

@somahargitai

somahargitai/Design_UX_UI_CheatSheet.md

Last active February 21, 2025 13:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save somahargitai/1c15311b627742533b4a1629776526b1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save somahargitai/1c15311b627742533b4a1629776526b1 to your computer and use it in GitHub Desktop.
Download ZIP
Design, UI and UX Cheat Sheet
Raw
Design_UX_UI_CheatSheet.md

Design UX UI Cheat Sheet

↩cheatsheet list

Collection of basics to start design projects for digital projects

UX design startup for Mobile / Tablet / Desktop

Mobile (Single Column)
Content
Row 1
Row 2
Row 3
Row 4
Tablet (Columned Layout)
Content
Header
Left Column Right Column
Left Content Right Content
Footer
Footer Content
Desktop (Asymmetric Wide Layout)
Content
Header
Left Column (1/3) Right Column (2/3)
Left Content Right Content
Footer
Footer Content

Grid Layout

960px grid system was pretty standard for web design in 2009-2012. After that, 1200px became the new standard.

Common Grid Systems

12-Column Grid (Desktop)

1 2 3 4 5 6 7 8 9 10 11 12

Common Column Combinations

6 Columns 6 Columns
4 Columns 4 Columns 4 Columns
3 Columns 3 Columns 3 Columns 3 Columns

Grid Spacing

  • Gutter (space between columns): 16px - 32px
  • Margin (outer spacing): 16px - 64px depending on viewport
  • Padding (inner spacing): 16px - 32px

Tools

Youtube intros

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment