Second Website Draft

The objective of the second website draft was to refine the typographic scale system, baseline grid and anything else that needed to be changed from the first critique. The second draft also required the homepage in all three breakpoints, with all the content included. My goal was to figure out how the typographic scales system worked and incorporate it into my design.

Mobile Breakpoint Second Draft

Tablet Breakpoint Second Draft

Desktop Breakpoint Second Draft

I used the typographic scales slide deck and activity provided to us to improve the consistency of the typographic scale system used between the different levels of hierarchy of the headers. I did the math using 16px as my base type size and created consistency between each of the headers and line spacing. I used a baseline grid that followed my base unit of 22px and aligned all of the lines of text along it, in multiples of 22.

In a addition to adding a baseline grid and fixing my typographic scale, I also got other critques from my first draft. I had some issues with consistency with my use of colour in the schedule, so I fixed that by making the body copy black and the rest of the text dark blue. I also changed the body copy for the speakers section to 16px so it matched the rest of the body copy and was bigger and more legible. I added a divide between the speakers and schedule section by placing the schedule headers into a dark blue bar. In the tablet breakpoint, I switched it to a two column grid instead of a three column gird in the wireframe sketch because the photos of the speakers were too small to have three across. I also added a second column to the tablet breakpoint schedule that I hadn't included in the wireframe sketch.