Sketching a website
What & why
When designing websites it’s extremely helpful to plan ahead so we have a direction before writing a line of code.
Sketching the layout, determining the HTML semantics & drawing the grid will make coding more straight-forward and understandable.
Let’s get some practice planning websites by working backwards from an already complete design.
Set up
- Form into pairs
- Download the files
- Print “mockup.pdf” and draw with pencil
Or do it digitally
Instructions
-
Write semantics
Assign each box a semantically appropriate HTML tag. -
Prioritize the content
Use the grey box method, or numbering method. -
Determine the grid
Plan the grid basic CSS grid code: columns, rows, areas.
Hints on the next screen…
Grid hints
- Keep it simple
- Use
fr
units - Think in “areas”
- Not everything has to be in the grid
- More than 1 element can occupy the same area