This was a collective project, created by three designers including myself. I did the coding of the website as well as the imagery for the contrasts Direction, Form and Structure, and the typographic image of Carl Dair himself. The website utilizes a bootstrap template to make it responsive, and uses lightweight from Rodrigo Pinto for the page transitions.

The purpose of this website was to illustrate and explain the 7 Contrasts from Carl Dair's book, Design with Type, the second edition from 1967. His book is a standard text when it comes to the subject of typography. The colour scheme of the website (orange, black, grey and white) matches the colour scheme used in his book. The only exception is the image for colour, as it was important to illustrate the contrast of colour in that illustration, and the best way to do that was to contrast it with the colour scheme used in the rest of the website. Each illustration example uses only the first letter of its word. For example, direction only uses the letter d, while form uses only the letter f.

The link at the bottom of each page, excluding the homepage, 'a' sends the viewer to the previous page, while 'z' sends the viewer to the next page. This method was chosen in relation to the alphabet where 'a' is at the beginning of the alphabet, while 'z' is at the end.

Visit the Carl Dair Website here.