Most schools started again a few weeks ago, still remotely for some, or on-campus like mine.
Still, everything remains so incredibly different from what we had before the pandemic hit us. 2020 will be like no other year in our lifetime and it is a challenge to adjust.
We are also back for the second stretch of the COETAIL program, and although adding to the challenge of balancing professional and personal time, it feels great to catch up with fellow Coetail-ers from Cohort 12, all teaching around the world, and to start reading their recent posts. Although this time I should say “looking at” their blogs: for Course 3, we are indeed developing our V✶I✶S✶U✶A✶L Literacy to improve effective collaboration and communication.
Visual literacy is the “ability to recognize and understand ideas conveyed through visible actions or images”. In today’s increasingly digital world, we are communicating with images and icons more than ever, which makes it crucial to understand design principles and how it influences the way we perceive media. We are not only referring to an aesthetic enhancement — although we will see how a clear appearance is important — but to a language of its own, inducing communication and interaction. Over 50 billion photos (!!) have been shared on Instagram since it was launched in 2010 (Source: Omnicore).
The design of online tools is a virtual language and a powerful way of communication, and, as educators, we need to take it into account when we plan lesson plans and activities for our students.
My first reading on the topic, Explore visual hierarchy, taught me, or reminded me, a few things that totally make sense and are obvious. But… if you don’t specifically pay attention to this, chances are that you will overlook most of them and end up with a product that is not as efficient as it could be.
The visual hierarchy is indeed “the principle of arranging elements to show their order of importance”. This means that you need to place all elements not only in a logical order, but also strategically to facilitate your users’ understanding and guide them to the wanted action.
The page on visual hierarchy from the Interaction Design Foundation tells us which components should be taken into account:
Regarding size: larger elements will be better noticed. Bright colors and richer textures will attract more attention. Contrast and Whitespace are eye-catching. Using out-of-alignment elements will make them stand out. Style repetition and Proximity will suggest a relation between content.
And they also explain why clear visual hierarchy is crucial:
With this knowledge in mind, I now need to revisit my own blog and question the choices I made last March when I was new to WordPress blogging. Clearly, some of them were not deliberate choices at all: I didn’t master the tool, and my main goal was to manage to publish some content.
I do remember choosing the theme, convinced I was making an informed selection: I picked up Twenty Seventeen who has a black background because I thought, that words and images would stand out better. All my quotes were published in color with a different font and/or size. I even tried to have them matched the illustrations I was adding.
There was frustration tough for not always being able to produce the layout I imagined.
When I went back to my blog after a couple of months, and having read through some additional reading materials like the Guide to visual hierarchy (Infographic source) and the 6 principles of visual hierarchy for designers (99designs) it became clear that my objectives should be to convey simplicity and clarity by adding:
- softer colors on a white background
- lighter text with better visual
- a table of content (a must-have for a librarian!)
- a name that reflects its purposes (still thinking about that one)
Before starting to implement some of the changes, let’s look again into some principles that guide designers and called CARP for:
Contrast – Alignment – Repetition – Proximity
But also called CRAP .. maybe for a better mnemotechnic acronym?
Bryan Jones helps us understand the impact of these graphic design principles when applied to a specific project to then be able to make our courses and presentation look attractive and therefore efficient.
U∗P∗D∗A∗T∗I∗N∗G my blog
I played a lot with the different free WordPress Themes, changed the background colors when possible, and found out that not all features were available on all themes. I learned new vocabulary on the way, and WordPress how-to’s, got excited, and then deceived as I wasn’t able yet to get the right aesthetics I wanted while implementing the functions I wanted for a better performance of my blog.
So I finally went back to my original theme “Twenty Seventeen” for now, with the following updates:
∗ name change for a wider audience: not my first name anymore, but “Mme Toilier”, as students call me
∗ after looking at the result, I tried again to add a logo (my portrait) on this theme (see 3d version below) for enhanced site identification
∗ menu added right under the header
∗ a search button (my librarian self was lacking the last two items a lot!)
∗ swapping the dark background for a white one — ideally, I would like a pale color one but I still need to figure out how to add it in within this theme
∗ I was surprised how the pictures actually stand out better now while I chose the dark one originally on purpose
∗ And finally (for now!), I made sure to choose the parameters I wanted for the widgets (e.g. numbers of displayed comments or previous posts, etc)
“We are All Designers” … or at least we need to be(come) one to communicate our digital messages across in an efficient way! I feel that this unit taught me a lot, or reactivated previous knowledge. I found myself looking at websites or other online content in a different way, and will definitely think twice next time I create a presentation for a class.