As this project is rather heavy on the written content, I wanted to lead with typography in my design and have this be really strong before I proceeded with imagery and graphics. To do this, I felt it was important to work to a strong grid structure. I worked to a 30px grid, with both a column and row grid to aid in establishing the margin, which was 120px at each side and 60px top and bottom.
My Grid Structure
Once I had established what grid structure I was working to, I began to lay down the typography. I used grey shapes to mark out where certain graphic elements would be placed. I worked to the type-scale I had previously decided upon, along with the fonts I chose in my planning also.
Below is an example of how I used this grid structure in building my first iteration of this prototype. I felt that this was quite a flexible grid structure, meaning it allowed me lots of options when deciding composition and layout.
Using the Grid Example
LOW FI MOCKUPS:
1
2
3
4
5
6
7
8
9
11
10
12
13
14
15
16