Skip to content

Latest commit

 

History

History
55 lines (38 loc) · 1.09 KB

design-fundamentals.md

File metadata and controls

55 lines (38 loc) · 1.09 KB

Design Fundamentals

Last Update: 2019/08/14

Basic Theory

  • User Interface (UI): visual (what we see)
  • User Experience (UX): interaction (what we feel)
  • Tools: Sketch (MacOS), Adobe XD, Figma (Browser), Invision

Color & Contrast

White Space

  • empty space around elements
  • be consistent with white space

Visual Hierarchy

  • what is important?
  • where should we look first?
  • use font size and font weight

Complexity & Simplicity

  • think about effects, animations & gradients

Consistency

  • consistent typography
  • consistent white space

Scale

  • the elements should match very well with each other

Basic Practice

  • https://www.figma.com
  • create new file: +new file
  • new canvas: Frame (F) => right side "Design"
  • move element (V)
  • select rectangle (R)
  • import svg: (Ctrl+Shift+K): change inner color
  • scale elements: (Shift+Alt+Mouse)
  • add text (T)
  • Zoom To Fit (Shift+1)
  • Combine to Group (Ctrl+G)
  • Create reusable Component (Ctrl+Alt+K)