Process Diagrams

On most projects, before I begin coding, I define site components; determine their various configurations (including responsive states); and sketch out the possible site layouts. This catalogues the system and helps me understand how best to put the pieces of the site together, optimizing my coding efforts. Below are a few examples of those sketches.

Calculating sizes

Element diagram

Component definition

Layouts 1

Layouts 2

Project process