Teachers are adept at wearing many hats. In a ‘normal’ week in a primary school a teacher may also take on the role of coach, leader, nurse, engineer, editor, designer, cleaner, peace-maker, philosopher or facilitator. The list is endless and ever changing and now often includes blogger, web-designer, vlogger, social media marketing managers and many more roles.
The hurdle for many teachers today is that they are not equipped with the correct skills to fulfill these digital roles successfully. An understanding of web design, topography, visual hierarchy, scanning patterns etc. should now be a priority for all educators (and their students) both as consumers and producers of information.
An informative post by web developer, Brandon Jones, has helped me to understand the essentials of web design. He explains web design as visual communication. He goes on to explain the importance of using size, colour, contrast, alignment, repetition, proximity, density and whitespace, and style and texture.
Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.
Understanding Visual Hierarchy in Web Design, Brandon Jones
So now time to make my learning authentic. How can I improve my own blog? Admittedly I have not given much thought to the design of this blog. I am now reviewing my own blog through the eyes of my new role as a web designer. The size of the large sunset image draws the eye but it is now relevant to the content of the blog. The background colour could be toned down to be more ‘calming on the eye’. I also need to consider which widgets and headings I want.
One of the questions that Brandon Jones tells us to ask ourselves is:
Does the expected importance match up with the actual designed importance?
Understanding Visual Hierarchy in Web Design, Brandon Jones
This is an important question for me as the expected importance in the layout, particularly the widgets, does not match up with the designed importance. A photograph of personal significance doesn’t have a lot of relevance to my audience. I am also now analysing the priority of the tool bars and widgets. What do I actually want you, the reader, to take from my page? The aim of my blog is to connect with like-minded professionals and to promote collaboration as a tool for developing classroom practice.
Possible design updates:
- technology related header image
- reorder widgets depending on relevance
- new background colour to complement new header image
- upper tool-bar categories for each coetail course
- twitter feed more prominent
- links to my other blogs
- include some personal information about me
- global visitors map/globe counter
- clear licensing details
As always, I look to my COETAIL colleagues for inspiration. The design of these blogs have given me some great ideas.
And now I shall begin the process of updating and improving the design of this blog. I now feel more confident to include web design in my own teaching as I help my students to understand and benefit from the importance of visual media. As George Lucas succinctly put it in an Edutopia article:
We live and work in a visually sophisticated world, so we must be sophisticated in using all the forms of communication, not just the written word.
James Daly, Life on the Screen: Visual Literacy in Education
And here is a screen shot of my ‘new look’ blog, which may continue to evolve as my confidence in visual literacy grows. Watch this space!
I think that’s a great place to start and my first impression from the change is definitely that your blog will look at students, collaboration and technology. I hope that’s a positive for you! I think we also need to keep in mind that we need to make these visual decisions carefully, purposefully and thoughtfully- and not publish every change! We need to remember that we are cultivating a brand or persona online and changing too often or too much can put readers off. Like you, this prompted me to look at my own blog so thanks for the impetus!
Hi Lizzie, I agree that these visual decisions need to be made carefully. I’d always meant to go back and improve my blog so it was good to have the opportunity to focus on it specifically. Thanks for your comments!
@amandamccloskey The method in which you’ve annotated your design choices and thoughts behind your revamp will certainly prove helpful to other students. I like how you’ve chosen a more neutral color palette as it allows your text and images to become more prevalent. My own personal blog has gone through so many changes but that’s all part of the process, isn’t it? Do you feel like this week’s exercise has provided you with some topics to cover with students in relation to CRAP (or CARP), etc?
@brandonhoover it has been very useful to learn the specifics of visual literacy. We can discuss how contrast, repetition, alignment and proximity can all be used to improve a websites appearance. I think we can begin by analysing some of our favourite websites and trying to identify what we appreciate in the layout. Thanks for the tips!
I like the new header image! It’s funny, when you listed one of your goals as changing your header to something more tech-related, I realized my header features one of the most old-school teaching tools still in use: the chalkboard.
Brandon’s right, your explanation and annotations give me a lot more to think about when it comes to more redesigns for my blog (though the thought of putting my face to a screen for any longer makes me a little sick to my stomach!). For example, I didn’t even think to make it clearly licensed. Thanks for describing your thought process in such detail!
Hi Tara, it has been a really useful process to analyse the details of the layout of my blog. It was something I had been meaning to do for some time so it was helpful to learn how to guide myself through the analysis. However, now it is hard to stop! I am considering changing other features, and I think this may be something I keep coming back to!
Thanks for your comments!