The changes I’ve made to the blog look & feel were based on Bigman’s “6 Principles of Visual Hierarchy”. Most of those principles were familiar to me from Tanya LeClair’s excellent Learning2 session at Nanjing International School in 2019, where she unpacked the CARP principles, outlined here by Dustin Wax.
A smaller banner means goodbye video
In the previous template, there was an option of adding a video as the media for the banner, instead of a static image. I created a short video portfolio with shots from my classes, after-school activities, and events.
What I now realize is the real estate it occupied on the screen while taking the focus away from the purpose of the blog: these reflections. Because it isn’t text, it might stop the flow on the top part of the “Z” or “E” pattern of this current template.
More prominent “E” reading pattern
The previous format read as a two-column newspaper, where the main content was squished to the left with the Twitter feed on the right-hand side. Because the two weren’t always relevant to each other (or repetitive when there was a tweet sharing the post, it didn’t flow nicely. This template has three distinct sections – banner, latest post, and a final horizontal block with the 4 previous posts. It that sense, it’s much cleaner and gives the reader an idea of the 5 most recent reflections. In the previous template, the reader would have to scroll. Who has time for that?
The different colour in the middle block actually employes three principles from Bigman’s article: the negative space it generates between the header and the bottom block; the white acts as a colour highlight for the most recent post; it guides the reader to the horizontal line in the middle of the “E” reading pattern.
Limitations of the template design
I was already making use of the colour highlight principle in previous posts. While the template allows me to differentiate headings by using darker tints and large typeface sizes, it does not allow me to create highlights as I have in the past. I’ve been playing with the source code all morning with no luck. I guess it’s monochromatic from now on!
I wish I could get rid of the “home” menu at the top. At the moment, I don’t have enough categories to really split my posts into. I find the “course 1, 2, 3…” sub-categories artificial (especially for non-COETAILers) and the course names/objectives don’t really roll off the tongue as menu items. When I start other online courses this school year, I will revisit this idea, but for now, I wish I could get rid of it. In all of the internet, it is now implied that clicking on the logo will take you back “home”.
Overall I am happy with the new layout, though I might explore other templates that offer the same reading pattern but allow colour customization.