Composition

Visual representation of a composition

How?

After experiencing the the previous steps comes the fun part; composition. This is where all the hard work pays off.


Armed with the following:

  • Typographic measuring system
  • Vertical alignment
  • Grid system

…the fun can begin!


The compositions for each of Interior’s pages (including this one) started in Illustrator. Due to nothing being arbitrary—thanks to each previous section—and therefore (browser quirks aside, oh the woes of CSS columns) can be predicted from one format to another, gaps were filled by designing anything missed right in the browser using Interior’s automation and (visual) Grid System.

As you read on you may realise that the order of things is not set in stone, I found it impractical to do so—this is one of those things that may change later. However they have to be categorised, as opposed to being in a single post, as each informs the other and they can be considered separately.

Grid system

I designed the Grid System using Illustrator, and applied it to the pre-determined screen widths (I used art boards to represent each one) then got my readymade content onto the grid. This allowed me to work consistently on each layout.

Layout

I already had an idea in mind of the range of font sizes I could get started with, I applied them to the headings and body, then used the Grid System as a reference so that I could make more creative decisions.

I used image placeholders (grey boxes) during the initial wireframe creation—as I knew there would be a need for some fairly interesting imagery to contrast against the black columns of Helvetica; and needed to see the layout take shape. I kind of broke a rule here (design to suit the content) as my content in this case was being created in parallel with the documentation; however with me being the designer there was no issue as it can all be changed to suit.

There is a hierarchy in everything from the typography to the imagery.

Illustration detaling 3 different layout widths with varying grid cells per width.
Illustration detaling 3 different layout widths with varying grid cells, and content per width.

Typographic Measuring System

Due to being able to understand what typography each design would consume—through visualisation—the layouts I created informed the Typographic Measuring System; which had already been established. Once applied, the practicalities of the decisions made in isolation became apparent—the abstraction should be a round-trip, creating each component for assembly in isolation will only work up to a point. Once I had decided that the sizes were practical enough for web use I gathered and curated them into a formatted list, each size was assigned a unique variable name.

Vertical Alignment

I had to work out a way to get the Grid System into browsers so I could layout designs accurately. It’s fairly crude but does the job, so in conjunction with the baseline grid I applied the grids I designed in Illustrator piece by piece.

Unlike a Grid Inspector, the Grid System is a visual aid that is not reflective of CSS Grid styles. It is the Grid System a design adheres to. The one I used with Illustrator was recreated using HTML, CSS and a smattering of JS; so designs can be translated to the browser with accuracy.

Illustration detaling a vertical grid and grid system combined.
Baseline Grid and Grid System combined.

Firefox Grid Inspector

Not long after I got something together, Firefox released their superb grid inspector.

I use Safari to browse using my mobile device, and the bulk of dev was done using Chrome so I couldn't rely solely on Firefox—however it sets a very high standard. The difference between the Grid System and the grid of what you inspect is huge. One is a design reference and should remain constant throughout the entire process of creating a layout, whereas the grids inspected could be constantly evolving, yet should align to the Grid System. The tool enables the level of fine tuning necessary for creating layouts, with precision.