Color, Graphics

• Keep natural colors
• Focus on functional colors, harmonious gradients and beautiful typography, imagery
• Seek relationships: color wheel
• Primary color: 60%
• Secondary color: 30% contrast / visual interest
• Accent color: 10% final touch (like a business suit)
• Primary / secondary / tertiary colors: Start with at least a secondary color
• Most common scenario:
  Monochrome, one main color. Apply 10-50% white or black layer on top
  
• Analogous colors (side‑by‑side on the color wheel)
• Complementary colors (opposite of main color)
• Neutral tones: defer users attention to content
• Hue, Saturation, Brightness, Alpha
• Temper use of heavy textures, 3D effects and multiple shadows

Content, Layout

• Content should take up the whole screen, giving maximum space to inner elements
• Avoid multiple containers and maximize scrolling areas, which will allow more room for interactions.
• Keep it clean and simple
• Each jump should give new excitement
• Negative space: bring focus to content. The less you see, the more you can focus on a few things at once; breathing room;
• Don't overwhelm your screen with too much structure or too many unneeded visual elements.
• Clarity: make things obvious; buttons should be specific and self‑explanatory; typography should be big, readable from a comfortable distance;
• Depth: the idea that everything should be contextual and transitional
• Blurred background: brings focus to foreground

Typography

• 50-90% of screen
• Serif: more traditional, encourage reading, charm, storytelling, unique feel
• Sans-serif: utilitarian, neutral, modern, generic
• Make body text look good, then the rest
• Body text: clean, comfortable
• Body text: 16px, 18px, or 24px
• Beautiful font: font-weight, line-height, color; large, well‑contrasted; visually pleasing, optimal for reading; good spacing and structure in text;
• Balance: large fonts, reduce font weight
• 3 essential font weights: Regular, Light, Thin
• Line length: horizontal width of text block; average of 45‑90 characters per line; 2‑3 lowercase alphabets;
• Heading 1: 48-100px
• Heading 2: 24-48px
• At 24-36px, use Normal (font-weight 400)
• 36-48px, use Light (font-weight 300)
• 48-64px, use Ultra Light (font weight 200)
• 64-100px, use Thin (font weight 100)
• Bold (font weight 700)
• Use italics, underline, bold, colors to reinforce hierarchy and interactions

Animation

• Brings importance to an element that would otherwise be ignored. Adds playfulness and excitement to design.
• Transitional interface: animations, zoom
• Translate: Point A to Point B
• Fade in / Fade out
• Rotate
• Scale: Zoom in / Zoom out
• Combine 2 or 3 at a time. Real‑life physics
• Animate with damping: bounce back effect
• Animations shouldn't last longer than 0.5s
• 0.3-0.5s: fade in, slide, or scale
• Gestures: for power users

Sounds

• You can win a lot with minimal effort, but don't annoy the user
• Always offer the option to disable

Design is Universal.
If it's good, people just get it.