Free the Dragons
Cadburys did an amazing advert back in 2008. The last 4 seconds advertise Cadbury. The other 87 seconds are about a bunch of airport vehicles racing. Its a fun advert to watch – and 9 years on it is still having the same effect on me. More important for Cadbury, I remember it. Branding is important, but design matters, and I think if there is one thing that Cadbury advert demonstrates is that just slapping your brand over everything doesn’t always work.
The art of visual literacy is something teachers should be learned in. Many teachers recognize the benefits of a power point slide that has been beautifully crafted to communicate to students as opposed to a wall of text. We as teachers can empathize with students, having been to that conference where all you see on the screen is words and words and words. We tell the students when they present not to read off the slides, and that presentations are there to help facilitate the session – not to do the teaching. Yet many of us fall into the same trap. Visual literacy is sometimes just as important a skill as written literacy when teaching.
Google Slides provides tools to help with this. Themes are useful guidance for how to build a colour and font scheme that will be aesthetically pleasing.
However there are many teachers who ignore guidance and produce poor visual quality materials. An example I found (but felt bad displaying) was a powerpoint on visual literacy, which used no theming, was 4:3 scale (not the same scale as most screens use these days), and had lots of space on a white background. Power point produces themes like Google Slides and utilizing these is an easy way to ensure your slides are aesthetically pleasing..
A project I worked on during my last job was to creating a theming style that worked for students on the autistic spectrum. These students can find it difficult to work with certain colour schemes, and so the research attempted to find a scheme that worked for them.
This wasn’t a particularly well executed research project – but was undertaken as the amount of autistic students we had was large, and our SEN coordinator was concerned the visual literacy being used in the classroom was inaccessible to these students. Making presentation materials accessible to all is an important consideration. For example using fonts that are too small discriminate against students with poor eyesight. Using some colour combinations might make those with poor eyesight or colour blindness struggle. We differentiate the work we give to our students, but often forget the simple things that would make their learning easier.
Web design is something I have long been interested in. I have been in web design since I was thirteen, and have, for the most part, been horrible at it. My last iteration was perhaps my best when tested against the rules of web design I have been reading about this week.
So when asked to redesign something I use with students I jumped at the chance to redesign a site I built for school about two years ago. The site is a house points website, which essentially tracks student point accumulation throughout the academic year, including staff contributions and house events.
This website has been used heavily over the past few years, and is starting to get used much more heavily now our leagues system is taking off. This means that we need it to communicate information as clearly as possible, and also that it feels fresh and dynamic.
Much of the site I felt did work for what we needed:
- The eye is automatically drawn to the top result (Google did some research on where we look first on a webpage, meaning the top is the best place to put 1st place).
- The biggest part of each house is the shield relating to that house, making it easy to recognise (even without the colours) which house is which. The next biggest element is the place, and the third biggest the number of points the house has. The hierarchy works for what the reader needs to know quickly.
- Lots of text is hidden and revealed via a mouse hover. This makes the main page less cluttered with text, but still keeps the information accessible.
The problems I saw with the current site are:
- Its boxy – there’s lots of boxes. Things are all boxed. This isn’t all bad – containment is good and it gives structure – but dropping some of this would maintain the structure but make it feel a bit more open.
- Non Standard. This is a Saigon South International School website, and is linked off the main site. This means the fonts and the colours need to be linked with those of the school branding.
- Its closed off. This is in part a result of the boxes but I think it feel very contained and busy in the middle, and very empty around the edges.
Reading through this week readings on web design, and specifically the Contrast, Alignment, Repetition, Proximity material, I felt like I was in a good place to try and improve upon this – attempting to fix some of the little things which did not work for the site so well.
The general content stayed the same, however there were a few key changes:
- The boxiness has been diluted a little. Removing the central containers borders give it a more open feel. Whilst bands have been added the page feels more open to me – less contained.
- The font and logo are now more in line with the schools branding system. Even pre-schoolers can recognise brands and so for the school, establishing their brand is very important to the future of the school. Repetition is good in this sense as it allows the user to see they are still on an official SSIS webpage and help build the SSIS brand.
- I added a ‘last year’s winners’ bit to the top. It is smaller so doesn’t draw the eye first, but it is there as extra information. this change wasn’t based upon the CRAP principle, but was added as an extra reminder that there is a winner 🙂
I was tempted to add in some images to the bars in the middle. These bars represent the amount of points houses have been awarded for the different core values our school has (Academic Excellence, Dedicated Service, Respect for All, Balance in Life and Sense of Self). Normally one has to mouse over them to work out which each one is, so I mocked up a version of this with an image on each bar:
However although this looked decent, and much more colourful still, I felt like this was starting to feel unnecessarily cluttered. Thus I decided it was probably not a good thing to spend time programming.
I am keen to hear others suggestion for the site though. As I say I have not always been successful with web design over the years. How can it be better looking and be just as on task for the students?