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.

YouTube Preview Image

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.

Google Slides provides themes which ensure that you will have a good basis for a well presented and good looking slide. The red border, fonts and default arrow colours are all defined in the theme.

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.

The research was basic, and poorly executed – but the idea was to see how different groups of students reacted differently to different forms of visual literacy.

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.

Iterations of Sweeto.co.uk over time.

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.

The website I designed for the SSIS High School House Leagues system (http://houseleagues.ssis.edu.vn/)

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 houseleagues website redesign mock up.

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:

The houseleagues site with core value images on each data 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?

You may also like...

2 Responses

  1. Wow Alex, what a post! Loved it!

    You expose visual literacy not just in theory, as shown in the introduction, but more importantly, its implications for a real problem you have to solve for your students and, maybe, with their help as well.

    I appreciate the fact you used a lot of visual content, either by video or pictures. The blog really called my attention and the colors of the pictures also kind of pushed me forward and kept my attention to continue to read until the end.

    Actually, you showed exactly how to keep a blog post interesting by investing in its visuals, combined with a real problem you face in your school. Case closed, well done!

    PS: Why “free the dragons”?

    cheers

    • Alex Bunting says:

      Heh, the ‘free’ part is a reference to the unboxing of the site, and the ‘dragons’ are the houses. Each house is named after a dragon ­čÖé Maybe ill be a bit less subtle next time ­čśŤ

      Thanks for pointing out you read to the end, I always wonder how far people get on these blogs and there are no statistics modules I can find in word press to let me know how many people have been reading!

      Alex

Leave a Reply

Your email address will not be published. Required fields are marked *