Layout Foundations: Grid System Assignment

Introduction

Welcome to your first assignment in Layout Foundations. The goal of this exercise is to get comfortable building a grid before any visual styling happens. A grid is the quiet scaffolding behind a composition — it sets the rhythm of a page and decides where the eye lands first, long before colour or imagery is involved.

Objectives

By the end of this assignment, you should be able to:

• Explain why a column grid makes a layout easier to read and easier to change.
• Build a 12-column grid for either a web page or a mobile app screen.
• Place navigation, content blocks, and interface controls onto that grid deliberately.

Assignment Task

Step 1: Choose a Project

Select one of the following projects to lay out on your grid:

• A homepage for an independent bookshop
• A launch page for a small hardware product
• A booking screen for a neighbourhood bike workshop

Step 2: Sketch the Structure

Block out every region in grey before adding a single word of real copy. Keep the sketch coarse — rectangles and labels only.