Module 5 / Web craft
Web layout, responsive design, and mobile
Covers the practical web layer: Figma setup, resolution choices, grids, containers, box model, responsive vs adaptive behavior, and mobile-first review.
Learning outcomes
- Design with containers, columns, gutters, padding, and breakpoints instead of arbitrary placement.
- Explain the box model and how spacing decisions translate to implementation.
- Create related mobile, tablet, and desktop layouts for the same content.
Lessons
Figma file setup for real web work
A useful design file needs named frames, organized pages, reusable styles, components, and visible responsive variants.
Practice: Set up a new landing page file with pages for research, wireframes, UI, components, and handoff.
Grid systems and containers
Columns, gutters, margins, and max-widths create alignment rules that keep sections connected.
Practice: Build one 12-column desktop grid and one mobile grid, then place the same content in both.
Box model thinking
Every interface is boxes inside boxes. Content, padding, border, and margin must be intentional.
Practice: Annotate a card with content area, padding, border, outer spacing, and responsive resize behavior.
Responsive vs adaptive layout choices
Responsive layouts fluidly adjust; adaptive layouts switch at planned breakpoints. Good work uses both deliberately.
Practice: Redesign a hero and feature grid for mobile, tablet, and desktop with clear breakpoint behavior.
Mobile best practices
Mobile work must account for thumb reach, readable type, stacked hierarchy, forms, media cropping, and slow networks.
Practice: Run a mobile audit on a desktop-first page and rewrite the layout order for a phone user.
Studio assignment
Responsive Figma frames with grid notes, breakpoint notes, and box-model annotations.
Create responsive wireframes and high-fidelity UI for a three-section landing page across mobile, tablet, and desktop.