From mockup to website

https://sebastianz.github.io/from-mockup-to-website/project/

Who am I?

Preparation

  • Set up tools to use
  • Create a new project
  • Set up a local server
  • Set up a version control system

Basic Considerations

  • Use a CSS preprocessor
  • Use a CSS framework
  • Use a JavaScript framework
  • Use a build tool

Mockup analysis

  • Analyse basic layout
  • Identify the main components
  • Identify subcomponents

Implementation considerations

  • Use modern HTML and CSS where possible
  • Consider accessibility
  • Use JavaScript for interactivity

HTML

  • Use semantic HTML
  • Use modern HTML
  • Use ARIA roles and attributes

CSS

  • Use modern CSS
  • Use CSS variables
  • Use CSS Grid and Flexbox

CSS considerations

  • Use a CSS preprocessor
  • Use a CSS framework
  • Use a CSS reset

CSS variables

  • Define variables in :root
  • Tweak variables in components

Spacing and sizing

  • Use rem and em
  • Avoid pixel tweaks

Typography

  • Match font styles
  • Use web fonts (variable fonts if possible)
  • Implement responsive typography (rem, em and clamp(), not px)

Colors

  • Adhere mockup color palette
  • Create color palette via variables
  • Ensure sufficient contrast

Responsiveness & adaptability

  • Use viewport breakpoints for main layout
  • Use flexible units and layouts
  • Consider user preferences (light/dark mode, reduced motion, etc.)
  • Use container queries for components

Accessibility (a11y)

  • Use semantic HTML
  • Use ARIA roles and attributes
  • Ensure sufficient contrast
  • Use alt attributes for images
  • Use labels for form elements
  • Consider user preferences
  • Ensure keyboard accessibility
  • Test with screen readers

Design and development parity

  • Use a style guide
  • Maintain module modularity
    • Use a design system
    • Use design tokens
    • Use a component library
  • Communicate with the designer
    • Clarify states, breakpoints, tokens
    • Ask for design assets

Performance

  • Compress images (WebP, SVG)
  • Lazy-load off-screen assets
  • Flatten DOM structure
  • Minify and bundle CSS and JS

Questions?