Web Design Deliverables

Waicung -

Design Dimensions

Dimension shall reflect the current distribution of screen sizes

  • Desktop Large: 2560 x 1440 (2K)
    • 1200px
  • Desktop: 1960 X 1080
    • 960px
  • Tablet: 810 x 1080
    • 600px
  • Mobile: 390 x 844
    • Mobile first

Visual Files

  • Final design - as images
  • Source file with details
    • Online: Figma etc.
    • Offline: PSD etc.
  • Visual materials - Most of the non-textual content
    • Icons
    • Images, like
      • Banners
      • Backgrounds
    • Special buttons
    • Graphics, like
      • Shapes
      • Special Frames
      • Special Dividers
  • Format
    • .svg > .jpg > .png
  • Special Note:
    • Retina Screen requires higher resolution

Development Guideline

Fonts

  • Font
    • Family
      • Series of fallback fonts
    • Size
    • Weight
    • Line Height
    • Letter Spacing
  • HTML based
    • Headers (h1, h2, h3...)
    • General Content (body)
    • Link
    • Action Buttons
    • Other Elements
      • Reusable
      • Special
  • Format
    • WOFF
    • TTF and OTF

Colour Schema

  • Contrast Colour
    • Content
    • Background
    • Surface
  • Element Color
    • Header
    • Content
    • Brand Colors
    • Other Elements

Primary Layout

  • Element Dimensions
    • Post Card
    • Other Elements
  • Spacing
    • Gap
    • Margin
    • Padding
  • Divider
    • Element Border
    • Section Divider
  • Ratio and Position
    • Logo
    • Banner
    • Background
    • Primary Images

Design Tools Generated

  • HTML and CSS
  • Animation(/JS) library