Last Update: 2019/08/14
- User Interface (UI): visual (what we see)
- User Experience (UX): interaction (what we feel)
- Tools: Sketch (MacOS), Adobe XD, Figma (Browser), Invision
- use high contrast
- light & dark
- https://contrast-ratio.com/
- https://contrastchecker.com/
- http://colorsafe.co/
- empty space around elements
- be consistent with white space
- what is important?
- where should we look first?
- use font size and font weight
- think about effects, animations & gradients
- consistent typography
- consistent white space
- the elements should match very well with each other
- 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)