Strategy

Areas of work:

Keys to great web design:

Information Architecture:

Elements of web design:

Color, Graphics

Keep natural colors
Focus on functional colors, harmonious gradients and beautiful typography, imagery
Seek relationships: color wheel
Analogous colors (side‑by‑side on the color wheel)
Complementary colors (opposite of main color)
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
Neutral tones: defer users attention to content
Hue, Saturation, Brightness, Alpha
Temper use of heavy textures, 3D effects and multiple shadows

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

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

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