Web Design Deliverables

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