Digital Storytelling and Presentation on Using iMovie and Quicktime

The call rang out in late August.

My school, the International School of Phnom Penh, had volunteered to host this year’s “Tekhin” Educational Technology conference and presenters were needed. Not considering myself a giant of tech innovation by any stretch of the imagination, I cautiously approached our IT director and our Ed Tech Coach with a few ideas for presentations I might be able to give. “Do it!” was their response to all of them.

Ok. I could see they were desperate.

I went home and started to scribble out notes. I initially thought I might give a presentation on how to use the Voicethread app to introduce younger students to online communities or to combine community resources in order to gauge the understanding of beginning English Language Learners. I even went as far as to send out my workshop description and create and share an online registration form with some pre workshop materials.

But then…I don’t know what happened. The introduction to online communities discussion started to feel so…so…so May 2016 while the mother tongue connection with Voicethread was so…so…so SPELTAC-y.

The main themes in Banules-Land this “Fall” have been visual and graphic design centered. At the time of my pre Tekhin brainstorming, I had begun to really dive into the making of very amateur, but fun-to-make educational videos with Quicktime and iMovie.

Slowly, the wheels began to turn.

Why not give a presentation, based on principles of “Presentation Zen”, for beginners on how to use iMovie and Quicktime for the purpose of digital storytelling? And why not start it with a digital story of my own – in the form of a movie?

Creating Digital Documentaries Using iMovie – The Movie (and Presentation)!

The two main guideposts I steered by in the creation of this movie and workshop presentation were blogs: Presentation Zen by Garr Reynolds and Story Concepts by Jason Ohler.

I knew that I had to concentrate on the following criteria, gleaned from “From design to meaning: a whole new way of presenting?” ,while creating my movie:

  1. design – as suggested by Reynolds, I would spend time designing this movie and presentation, preferably on paper. This design would extend to the oral narrative and the conception of visual components of the movie. I would think about my objectives, to teach beginners how to both conceive digital stories and use available apps to visualise these stories. I would think about my messages: “You too can do this!” “Use, reuse, attribute, and share!” “Create your own curriculum materials!”. I would consider my audience and how I could possibly affect them and get them fired up for this workshop. I then wanted to plan a brief outline of story steps, followed by writing a draft of a script to be read as a voiceover. I would then, using an approach favoured by Reynolds, draft scenes of images I wanted to create or use on sticky notes. I would then place these sticky notes at appropriate places in my script. For the presentation, I wanted to see how much I could create slides that followed design principles of colour, font usage, image, and the rule of thirds.
  2. story – My movie was going to tell the story of how I came to embrace movie making as a teacher. As such, I was going to plan this story using many of the ideas from Jason Ohler. Mainly, I wanted to start by developing a story core consisting of a problem, transformation, and solution. I knew what my problem would be, how to teach English language learners deep concepts. I knew my transformation in my movie would be a creative one, moving from a more traditional way of teaching based around preexisting teaching materials, to one in which I used my own educational materials that I would design specifically for my students. I wanted the movie to touch upon aspects of my overall presentation and workshop, to serve as a sort of primer. I wanted the movie to model principles of digital storytelling. Most of all, I wanted this beginning to give workshop participants a thirst for creating their own (better) movies in the workshop that would follow.
  3. symphony – I wanted this film to be a synthesis of all the steps of movie making and a treatise on why making movies could be important for teachers rather than a simple analysis and expose of how to use iMovie. As such, I also wanted workshop participants to experience iMovie in the context of creating a real piece of digital storytelling. Too often, we divorce learning of an application with real world uses.
  4. empathy – I hoped the movie and presentations would demonstrate this criteria in its relevance for teachers. I would also try to keep the movie under six minutes. In addition, I would try to balance my presentation, making sure to demonstrate concepts related to story planning, movie editing, and screen casting for brief amounts of time before actually having participants practice. I would also make very useful presentation notes that participants could access later when trying to make their own movies. I knew I had to be very empathetic with my audience as we would all be teachers giving up our Saturdays for this training.
  5. play – I took this very, er, seriously and wanted to try to introduce humour into my film and presentation with word plays, anecdotes, and music that would convey a light hearted sense of exploration. I also wanted to encourage participants to be critical of my movie, but with an open minded approach in order to present the idea that we are all learners here.

With these criteria very much on my mind, I set out to plan my movie that would serve as my story.

I then searched for free stock footage and images using a variety of web sites and searches including: UnsplashCreative Commons SearchIgnite Motion, and Beachfront B-Roll.

After loading these clips into iMovie, I recorded my first voiceovers. Later, I took notes on sections where the images did not match with the script. I then sped those clips up. or trimmed them, or slowed the clips down. In certain places I rerecorded my voiceovers after modifying the script. I filmed extra footage and added it. I then added titles before recording a music track in Garageband with my keyboard while watching the video clips. The resulting movie can be seen below.

My introductory story done, I refocused on the presentation that I would use to present the iMovie workshop. I created some slides and looked at them in Photoshop with a grid overlaid to make sure I was adhering for the most part to the rule of thirds. I kept to the rule of thirds mainly in my placement of text, as I gathered my images preformed from free to reuse searches of Unsplash or Creative Commons Flickr Search.

screen-shot-2016-10-27-at-8-20-58-pm
Imposing a grid over slides with photoshop to check rule of thirds. Here the text fits into the lower third of the slide. GOOD!

 

 

 

 

 

 

 

 

 

 

 

 

I also tried to make sure for instance that whenever I used serif fonts and wanted a second font on the slide, that I used a sans font from the same family. In most cases this turned out to be a combination of Droid Serif and Droid Sans. I also played with the Word Art function in Google slides, using fonts and colours that matched with the colour scheme of my images or provided a message in terms of colour. Most of the time, the best choices for my font colours were yellow or white in order to to be easily read. Usually, to increase the readability, however, I would also outline the word art in a contrasting colour, especially if the image background was light coloured.

The final presentation is below.

I also provided workshop participants with an invitation to join a document I had put together with many notes related to the presentation. I plan to offer this training again for teachers in my school, so it will be handy to have all of these resources already made.

img_7429
Participants planning their movies with stickies and storyboards.

img_7431 img_7432

Learning About Tornado Safety and Hurricane Preparedness with Weather Underground Infographics

My grade 1 students are getting blown away by videos like these as they inquire into the central idea that “Understanding how the weather works allows us to make plans”…

[youtube]https://www.youtube.com/watch?v=bjb7QtMEBUg[/youtube]

[youtube]https://www.youtube.com/watch?v=EinzBoVnmRs[/youtube]

[youtube]https://www.youtube.com/watch?v=e5b7YmJ0xoU[/youtube]

Inspired by these videos (muted of course to dispense with the completely understandable obscenities the tornado chasers might be uttering), students have decided to inquire more into these destructive weather phenomena of hurricanes and tornadoes.

Although I know the power of video and visuals for learning, I want my students to move beyond the “OMG factor” of watching the destruction and wild savagery of these storms. I want them: to start making connections between what they know about severe weather and planning in the form of emergency procedures during such events; to connect new and technical vocabulary to contextualised images; and to begin to have deeper visual literacy and digital literacy experiences.

Visual literacy is a set of abilities that enables an individual to effectively find, interpret, evaluate, use, and create images and visual media. Images and visual media may include photographs, illustrations, drawings, maps, diagrams, advertisements, and other visual messages and representations, both still and moving.

Source: The Association of College and Research Libraries Image Resources Interest Group  Frank Baker 

This definition of visual literacy contains some exact descriptors of what I aim for students to do during this unit. I want them to interpret and use graphical images in their mini research on either hurricanes or tornadoes, gathering knowledge from such images. I also want them to notice some basic ways designers use colors and organisation when presenting information in visual form in order to effectively communicate.

After watching Kathy Schrock’s epic infographic treatise, how could I do anything BUT look for well designed and appropriate infographics on tornadoes and hurricanes for my students.

Infographics as a creative assessment from Kathy Schrock on Vimeo.

Incidentally, I used Kathy’s lecture as an opportunity to practice my visual note taking. (I’m going to need more notebooks.)

My novice attempt at visual note taking
My novice attempt at visual note taking

Inspired and infographic-ed up, I started snooping around the internet by using Google Image Search and Creative Commons Search with the sophisticated search query of “weather infographics for kids”, I quickly discovered that few well designed infographics came up under any of the “free for reuse” search parameters. When I removed this filter, I did come across a “wunder”ful website entitled Weather Underground, which very conveniently has a page of their website devoted to infographics of various complexity.

The Weather Underground website states:

Our brand mission is to make quality weather information available to every person on this planet. No matter where you live in the world or how obscure an activity you require weather information for – we will provide you with as much relevant, local weather data as we can uncover. We promise to provide weather data for those that are underserved by other weather providers.

I decided to play the fair usage card and use the following infographics both in my teaching and on this blog as my lesson centers around the following principles:

  1. I’m employing this lesson in an actual lesson on digital media literacy.
  2. I’m employing this copyrighted material in preparing my curriculum materials.
  3. I’m sharing these media literacy curriculum materials with a wider audience of educators who are reading my blog.

As such, I am using these infographics on hurricane and tornado preparedness/safety to teach and am sharing them below as part of a larger educational discussion on medial literacy.

Infographic by www.weatherunderground.com/weather-infographics/tornado-safety

 

Infographic by www.wunderground.com/weather-infographics/hurricane-safety-and-preparedness-advice

I plan to use these infographics as the text students will inquire into during a small guided reading lesson. These students will be students who have chosen to research tornados or hurricanes.

While guiding students through these infographics, I will work on a metacognitive comprehension strategy for reading, activating prior knowledge, and I will also introduce students to the genre of infographics, a new media sub genre of information texts.

Pre Reading

I’ll get students to activate their prior knowledge by creating webs of facts or pictures that show what they already understand about tornados and hurricanes.

I will then pose a question: What should we do if we know a hurricane or a tornado might be coming?

I’ll scribe a list of what the students mention we should do. I will then prompt them to think deeper with this question: How could we draw these suggestions? Would drawing them help people to understand them better?

Introducing the Infographic Genre

I will then ask students to skim over the infographics on their iPads.

Questions I might ask will include:

How is this text different from what we usually read in guided reading?

What are some parts of this text that you notice right away? Is it only text?

What is the purpose of this text? How do we know?

How can this text give us information for our research?

What was the first thing you saw when you looked at this text?

I will then introduce this text as an INFOGRAPHIC asking: What is an infographic? Does the name give us any clue?

Previewing the Vocabulary

Because some of the vocabulary on these infographics will be tricky for first graders, I might discuss a few of the more prominent and important vocabulary items at this point.

Words I will discuss for the tornado safety infographic will be: basement, low interior, sturdy, shelter, mobile home, “duck and cover”, ditch, overpass, and elevator

Words I will highlight for the hurricane preparedness infographic will include: tropical, cyclone, prepare, non-perishable, elevation, medication, evacuate, secure, generator, sanitary, authorities, propane, coast, and mobile home.

Guided Reading and Discussion of Genre

For the tornado safety infographic, I will then ask students to read through each of the Do/Don’t items, checking their comprehension as we go. I will then ask them: How do the pictures help us understand the text? Do you think we need more writing to help us understand? Why or why not? Did we think of some of the ways to stay safe already? Why do you think we should do or not do what the pictures and text tell us during a tornado?

For the hurricane preparedness infographic, I will ask students to read through the two columns of how to prepare for a hurricane, one at a time. I will then ask questions such as: Some of the words were a bit tricky in this section. How do the pictures help us understand the words? Do we need more writing to help us understand? Why or why not? How do these lists compare with what we thought of before we started reading? Why should we prepare these items before a hurricane?

I will then ask students to read through the column entitled “During the Hurricane” followed by the “Evacuate if…” column. I will then ask: Which parts of this infographic were easier to understand? Why? What was the main focus of this infographic? Why should we follow the suggestions offered in these sections of the infographic?

Post Reading Activities

After students finish reading and discussing the information for comprehension, I want them to refocus on the genre, noting how design elements help our comprehension.

For the tornado safety infographic, I will ask students about color with: What colors did you notice in this infographic? How do these affect your feelings? How do these colors of words and pictures make it clear what the designer wants you to know? Why do you think the designer did not make the pictures colored? Does anything repeat in the infographic? If yes, why?

If students do not mention it, I will inform them how red colors usually signify danger or “Pay attention!”. Green colors tend to make us want to do something (and I will give a green traffic light as an example). I will also try to guide students to an understanding that by repeating a message, a designer can help a viewer remember what is important. I will also ask students whether they think the designer felt his/her message was important? I will then introduce them to the concept that we tend to write important messages with white fonts on black backgrounds or black fonts on white backgrounds.

For the hurricane preparedness infographic, I will ask students to think about why the designer used the color blue so much. I will then introduce students to the idea that blue colors tend to make a viewer calm. I will then ask: Why do you think a designer might want the viewer of his/her infographic to stay calm? I will also ask my readers to think about what information the designer thought was most important. I will ask them why they think the designer put certain information where he/she did on the infographic.

I’m hoping this sort of approach will not only help students to see how they need to use reading strategies to view these sorts of texts, but also will create an interest in possibly designing their own using various digital creation tools they have been exploring, such as Comic Life or Google Docs.

 

 

My Own Private Hollywood…

Jakob Owens www.unsplash.com

 

All the new information about graphic design including visual hierarchy, the importance of teaching digital/media literacyPresentation Zen, and the primacy of visual information in helping us learn has really engrossed me for the past month.

On the weekends and for an hour or two on Thursday and Friday mornings, I have managed to slip into the “readings” for COETAIL Course 3, but have found these more like viewing sessions. In these sessions, I have learned about so much content, such as: how you can change rural China, one buffalo at a timewhy foreign military interventions are problematic for the United Statesthe epic Galveston hurricane of 1900why trails matter; and climate change in terms of the apocalyptic and prophetic but ultimately constructive ideas of Saul Griffith.

I have also tried to look at these presentations and digital stories with a critical eye on their designs as I begin creating my final project that will also serve as my workshop presentation for Tekhin 16 in Phnom Penh. Subject of this workshop…STILL EVOLVING (yikes!) but will probably involve some personal story of how I learned to stop despairing and start managing data in the classroom for the benefit of all (people kind).

In this critique, I have found the 7 Elements of Digital Storytelling from the University of Houston’s Educational Uses of Digital Storytelling website, to be useful as guidelines for analysing and ultimately constructing my own digital storytelling pieces.

Effective digital storytelling pieces should have or include:

1) Point of view;
2) A dramatic question;
3) Emotional content;
4) The creator’s personal voice as a way to personalise the story and help the audience understand the context;
5) An appropriate and powerful soundtrack;
6) Economy of content that tells the story without overloading the viewer; and
7) Pacing that sets the rhythm of the story and how slowly or quickly it progresses.

I decided to try my hand at digital storytelling this week by creating a movie with these elements in mind to help my grade 2 students understand the concept of perception as they begin inquiring into a unit with the central idea: Personal perspectives influences how we create art.

Last year, I rather clumsily guided students through an experience of different perspectives of art and place by navigating the internet to find images of our school, and using Google Maps and Google Earth to help students experience bird’s eye perspectives of where they learn, play, and eat Monday to Friday.

This year, I thought I might try to make this presentation more powerful by drafting an educational short film combining: internet searching and use of visual information, what I have been learning about screen casting using Quicktime, and a never-before-actualised desire to add music I have improvised to video I have created.

Graeme Garden, director, animated
Photo of Graeme Garden modified by DanR  https://www.flickr.com/photos/dansdata/

 

Taking a cue from the Presentation Zen blog in which Garr Reynolds discusses making analog drafts of presentation slides on sticky notes, I sketched out a rough plan of what my movie would look like as if it were a digital presentation.

img_7376
Stickies? My brain’s too fast for Stickies!

I then went online to find photographs that would fit my exacting descriptions of the necessary imagery, using Creative Commons Search and Unsplash to gather free-to-use-and-modify intellectual property.

Afterwards, I created Quicktime screen casts of my internet searches for different perspectives of our school and my drafting of messages on Google Docs expressing different perspectives about homework.

Being lucky enough to work at a school with a digital media studio, I came into work early on a Friday, and used iMovie and my iPhone headphones with included microphone to mash all the images, screen casts, a completely improvised voice over, and a few titles and transitions up into what was becoming a coherent movie. I experienced so much flow that I missed a rather important 15 minute planning meeting.

The things we do for art.

The day clunked by rather slowly and I had to keep ducking potential social engagements for the evening (luckily it rained heavily) but I was fixed on editing back at my crib for the evening.

After serious urban adventure mountain biking through flooded Phnom Penh streets during a thunderstorm back to my apartment, I finally settled down to the first task at hand – fixing the rather rambling voice over which was also plagued with audio imperfections. I hastily created a “script” for one of the rougher patches.

img_7377
Official ISPP Pay-Stub-Envelope-Themed Script Template

I recorded this before my wife got home from work. As she entered the apartment, I mumbled something about “Not going out tonight!” and “I’ll be in the studio if you need me.”

Thus, I entered my sound lab…set up the computer to watch the iMovie project so far, and began to make some music equivalents of doodles to my voiceover lecture on perspective. I would emerge some six hours later.

I then recorded some of the doodles by sending the mix to my computer and Garageband before dragging the files into my movie project along with a few tracks I recorded years ago. The soundtrack really adds an emotional element to the movie in my personal opinion.

The result:

[youtube width=”500″ height=”400″]https://www.youtube.com/watch?v=4vNJEx50xMM#action=share[/youtube]

In viewing this movie now, I realise it’s a little rough. It will probably do for giving a grade 2 class more insights into what perspective is. If I was going to revise this, I would probably go back and redo all the monologue, making sure to script the voiceover beforehand.

For the actual final project/presentation I’m going create, I’m going to take some lessons I learned creating the movie this week and combine them with what I read this week on story crafting at Jason Ohler’s Story Concepts blog. I feel like I’m at a good place regarding the visual design and the digital skills, but I really need to work on story.

To do this, I’m going to follow Ohler’s method of creating a story core involving a problem, transformation, and solution. I’m then going to create a story map, chart how the story will move, write a script, and ultimately combine this with images I find for the presentation into a story table.

Don’t tell stories!

To think that’s what Grandma used to say…

 

Planning Presentations with Presentation Zen Principles

William Iven www.firmbee.com/freebies/all Unsplash

I sometimes cringe when I hear the word “presentation” as it seems to be synonymous, even amongst young students, with a very typical Powerpoint type presentation.

As an adult in my 40’s, I have certainly had to sit through, and most likely have given, one too many rather formulaic presentations involving some sort of digital presentation software.

To become a better presenter and producer of quality visual presentations, I’m going to practice and learn using principles outlined in Garr Reynold’s Presentation Zen blog. I will do this for a workshop I’m leading on practical uses of the online application, VoiceThread.

When I create this presentation, I will focus on and incorporate visual design principles and presentation design suggestions from Reynolds including:

  • Create from analog – I will try planning out my slides using sticky notes as sketch plans. I’m intrigued by this step as I have always taught children when writing that they need to plan by jotting down notes, making lists, and making sketches. Time to practice what I preach.
  • Use visual design principles – I want to focus on making sure that my slides in my presentation pay attention to basic visual design principles I have been learning like: the Golden Mean and the Rule of Thirdsvisual hierarchy, the ten commandments of color theory and the art of combining fonts.
  • Use principles of Presentation Zen to make meaning – Besides demonstrating good visual design, I want my presentation to tell a STORY, show creative SYMPHONY, show EMPATHY for the fact that my audience will be filled with education professionals like me and I must not waist their time, and demonstrate an ability to PLAY somehow.
  • Create minimalist slides – I want my slides to be incapable of standing alone and I want them to be trimmed to the bare minimum in terms of text and imagery.
  • Respect copyright – I will try to use only images that have been licensed for reuse with Creative Commons licenses by using Creative Commons search of Flickr and Google images. I will also use the Unsplash project site and the Noun Project to find useful images, reusable images.

Before I begin this journey, however, I want to assess my current level of presentation understanding by analysing and perhaps thinking of some ways to improve a presentation or two that I have already created. To do this, I analysed two presentations I have given. One was for newbie teachers at my school to give them some information about the Phnom Penh/Cambodian music scene. The other was for grade 1 students to teach them about the issue of shark finning.

In the following screen cast (my first one!), I go through each presentation and self critique based on the Presentation Zen and visual design principles.

An interesting thing I noted about my own presentations in this analysis was that I tend to make my presentations for children much more Zen than my presentations for adults. This is of course related to the fact that young students are learning to read anyways and I therefore would not think of putting too much text on each slide.

Ultimately, all of my slides need to be redesigned based on principles of visual design and I need to improve the stories I tell in each of the presentations.

I’m excited to get to work on my new presentation.

Now where is that pen and paper?

 

Searching for Images of Skilful Presenting?

The Mission

As I set out to find an image using Creative Commons Search this week that could be useful in helping students achieve some of our learning intentions, I first looked at my lesson plans (in their Saturday night – embryonic stage).

Hmmm…let’s see. Grade 2, Thursday, September 22…the inquiry questions for the lessons are, “How can we be skilful presenters?” As part of this lesson, students will be assessed on whether they can create a list of success criteria for effective presentations.

Finding Images for Comprehensible Input

I’m currently an English as an Additional Language teacher at my linguistically diverse international school. I therefore immediately began thinking about the vocabulary and concepts that might trip up not only my English language learners but my native English speaking students too, as they are all acquiring cognitive academic language.

Using my own knowledge of presentations and well organised information I found online by searching WikiHow, I isolated some vocabulary, phrases, and concepts that I wanted students to comprehend and focus on in order to create their lists of success criteria: presentation, presenter, audience, knowledgeable, prepared, research, images, engage, and eye contact.

I also knew that I wanted to begin the lesson with a visual discovery activity on the order of the Visible Thinking Routine “I see…I think…I wonder…”. This would give me an insight into how much students already understood about presentations in general and would prepare them for the learning about to take place by activating prior knowledge and thinking skills.

Based on what I have been reading about the power of vision in fostering memorisation of important information from John Medina, I also felt that this lesson should primarily be based on images; that is, although I had vocabulary in mind that I wanted students to begin exploring and using, I felt that they would gain understanding and meaning of concepts necessary to skilful presentations most through viewing and comparing images or videos of examples of good and bad presentations themselves. I also wanted to project these images during discussions and possibly annotate them using Evernote’s “Skitch” app while we underwent the the thinking routine.

I therefore resolved to use Creative Commons Search to try and find images licensed by their creators as free to “modify, adapt, or build upon”. Figuring that searching Flickr alone might limit my results, I used the Google Images search.

screen-shot-2016-09-25-at-8-46-17-am

I modified my search terms a few times, trying “children presenting”, “students presenting”, “student presentations”, “teaching students to present”, “good presentations”, “bad presentations”, and “presenting”.

I found the following image that I thought would enable our discussion of some of the key vocabulary and illustrate a few points about how to skilfully present including making eye contact with the audience and using visuals.

Grupo de estudiantes expone un powerpoint en Escuela Barreales, Santa Cruz, Chile
By Escuela Barreales (Own work) [Public domain], via Wikimedia Commons

How I Used the Image in the Lesson

During our lesson on how to skilfully present, we then marked this image according to the prior knowledge that students volunteered related to what they saw. Below is an example of the annotated image after a class discussion.

karyns-class

Through my searching, I ultimately realised that students actually needed to view videos to understand certain concepts related to use of proper volume, making eye contact and engaging the audience. Unfortunately, I could not find suitable videos online that explicitly and clearly showed skilful and unskilful presentations. I therefore created my own videos, using iMovie to edit and share.

[youtube]https://youtu.be/kN8gJh2GWvQ[/youtube]

Extreme Graphic Design Makeover Part 3 – (Return of the Blog!)

This is part three of a three part blog post. In part one I described how my recent introduction to graphic design had made me a bit self conscious about the layout and design of my professional school blog, Mr. Jon’s ISPP EAL Blog. In part two, I analysed my blog, both in terms of elements of the hierarchist’s toolbox, and my own reasons for why I had originally designed the blog in various fashions. In this part, I also began to think about where my blog needed rethinking and redesigning, concluding that size, color, contrast, alignment, repetition, proximity, density and whitespace, and style and texture all needed adjustments.

In this part, I am redesigning the blog, and will be stopping along the way to share some of my thinking that goes into the design.

Just to remind you, here is the current blog.

Mr. Jon's ISPP EAL Blog - in all it's glory.
Mr. Jon’s ISPP EAL Blog – in all it’s glory.

Now I’m thinking the best place to start with this rethinking of my blog’s design is to use Brandon Jones’ test of visual hierarchy. In his post Understanding Visual Hierarchy in Web Design he suggests a process for testing online visual designs:

1. List the key information points that visitors are likely seeking.
2. Assign values (1-10) according to their importance to the average visitor.
3. Now, look at the actual design again.
4. Assign values (1-10) according to the actual visual importance as you see it in the live design.
Consider: Does the expected importance match up with the actual designed importance?

What information are visitors to my blog likely seeking?

1) Pictures of their children (Parents)
2) How to translate this blog into their own language
3) Information about what children are learning in EAL during foreign language times and in Grade 1 and Grade 2 with EAL support (Parents, teachers, administrators)
4) How to follow or get updates about the blog
5) Information on how to search the blog, including labels
6) Links and images of documents used in lessons (Teachers)
7) Links to other blogs that I’m associated with (Teachers, Parents, Administrators)
8) The name of the school I work for
9) The name of the blog
10) Information about the EAL teacher, including contact information (Parents, teachers, administrators)

What is the actual visual heirarchy of my blog?

Based on a combination of size, proximity, contrast and color, here is what turns out to be most important visually:

1) The name of the blog
2) Information about what children are learning
3) Pictures of children
4) Links of images and documents
5) The name of the school from its logo
6) Google Translate button
7) How to follow or subscribe to the blog
8) Links to other blogs I’m associated with
9) Information about the EAL teacher and how to contact me
10) Information on how to search the blog, including labels

Step by Step

My mission was to align the visual hierarchy as much as possible with what information I anticipated parents, teachers, and administrators wanted while visiting. In doing this I knew that I was going to have to maximise my understanding and use of the hierarchist’s toolbox. In particular, I knew I was going to need to pay close attention to size, color, contrast, proximity, density and white space, and style and texture. I felt that in terms of alignment, my blog was already pretty well set up. For repetition, I was not sure how to apply this to my blog, unless in the form of a repetitive background.

Step 1 – Off with its head!!!

1 Change Header Size
1 Changing header size.

The first thing to do was to reduce the size of the header and blog title to one that looked a bit more professional and less eye-catchy. It is still big and may not be a 9 with regards to importance, but it no longer competes with the size of the information about classes and pictures of students, and does not detract from the purpose of the blog, to discuss my EAL teaching.

Step 2 – March of the Gadgets and search addition 

2 Changing the Widgets to reflect heirarchy by proximity and increasing white space by using drop downs, increase searchability
2 Changing the gadgets to reflect hierarchy by proximity and increasing white space by using drop downs. Increasing searchability.

Next, as much as possible I wanted to align information in my gadgets in the order of what I thought visitors would most need, in keeping with the idea of proximity. I thought these pieces of ordered information should be near each other. I therefore arranged my gadgets to follow the order of perceived importance on the right hand sidebar of my blog. In addition, I added my missing search bar.

To increase white space and decrease density as much as possible, I simplified and demystified my gadget headers and used drop boxes where possible, such as on the Google Translate gadget and on the Blog Archive gadget.

Step 3 – Removing the creator from the creation

3 Footer with Teacher Info
3 Moving teacher information to the footer.

As I had already determined that my profile information would be least important to viewers of my blog, I moved that information to the footer, again making use of proximity to present important information together and less important information further apart.

Step 4, 5, 6 – Reducing the Density in Posts

7 Reconfigured Blog Posts to Make Less Cluttered
4 Reconfiguring blog posts gadget to reduce density.
4 Change Date and time settings for less density
5 Changing date and time settings for less density.
5 Less Clutter:Density between posts
6 Reducing density between posts.

Next, I looked at the clutter around my posts. I had buttons for social media sharing, long dates, times of posting (with seconds), and reactions. This made it a little chaotic to distinguish between posts. I removed all these options using the blog post gadget and limited the amount of displayed posts to one day’s worth. No longer would viewers be able to see the fact that I tend to post at odd hours; it’s part of my writing process.

Step 7 – Going for Some Personality

6 Colors Aligned All Links and Headers the Same color
7 Choosing a stylish background that reflects my tech edge. Aligning all links, headers, sections with the same color. Going for easy to read background for my posts.

Ok, I had done most of the heavy lifting in this extreme makeover. However, I now wanted to put a little more reason behind the color scheme and give the blog a little bit of style.

First, I chose a stylish background which to me reminded me of a circuit board, but with less clutter and more repetition. I thought that this would reflect the tech side of my teaching, and was a vast improvement over the lounge motif from from before.

Then, I changed the font of the title of the blog to a large print version written in the font “Syncopate“, which to me appears a bit futuristic. I thought this might reflect my personality a bit and my acceptance and use of technology again in my teaching of English. Likewise, I changed the fonts of all headers to “Droid Sans Mono” to reflect their connections as headers. I like this font because it reminds me of how I used to view computer screens, thus reinforcing the tech theme. I increased the size of post titles in this font as well to indicate their relative importance and to draw viewers to the content of the posts.

Finally, I customised the color scheme of this template, “Travel“. I made sure all headers, links, previously viewed links, and hovering illuminations were typed in the same color in order for my viewers to understand their shared functionalities. I also thought that a white on black background for posts would be easier to read; however, after reading this discussion of the matter, I may have to reevaluate that decision.

It’s ALIVE!!!

Voilá!

Before After Blog
Before…AFTER!

Any suggestions? Opinions? Please be honest in the comments section.

 

Extreme Graphic Design Makeover (Part 2 – Analysis)

This is part two of a three-part blog post.

In part one, I discussed a growing (self) consciousness of my developing visual literacy. In this part, I will analyse my professional teaching blog and blog posts in terms of what Brandon Jones calls the heirarchist’s toolbox. In part three, I will describe changes I make to my professional blog and blog posts in order to make them more attractive to today’s modern, scavenger-like, informavores.

*Warning: The following blog post contains graphic images that may shock, disgust, or perplex the viewer, especially if he/she happens to be a graphic designer.

The State of the Blog

Mr. Jon's ISPP EAL Blog - in all it's glory.
Mr. Jon’s ISPP EAL Blog – in all it’s glory.

Colorful, isn’t it?

First, in it’s defense, I would like to explain my original naive reasons for this blog’s overall design and the design of my posts.

Theme and Color Scheme

As my school uses Google Apps for Education, we use Blogger as our blogging platform and therefore have to choose from its free templates. Attracted by its layout, I chose the “Travel Template”.

Screen Shot 2016-09-04 at 9.38.07 AM
Phase 1 of my design. I chose a nice template, “Travel”.

So far so good, I think in retrospect. Then I made bizarre choices to add a retro background of a 1) 1970s style tile scheme, and 2) to alter the template’s color scheme in order to better grab the attention of viewers. What colors are more attractive, than reds, pinks, and variations?

Blog_Overall_Layout_Colors 2
I began to diverge from the template default settings…

Banner and Title

Next I wanted my blog to reflect an ethos and embracing of exploration, as in language acquisition both teachers and students must be risk-takers. I therefore picked a photo I had snapped of Ta Tai Waterfall in Koh Kong Province, Cambodia and changed it to into a banner complete with text using Photoshop.

Blog_Overall_Layout Banner Explanation

Menu Bar and Sidebar Functionality

Blog_Overall_Layout_Explanation_of_Menu_Bar_and_Top_Sidebar 2

In the beginning (6 years ago)…when I designed blogs and websites, I very much wanted to viewers to see the navigation options in a horizontal menu bar (the space within the ellipse). Nowadays, I prefer to have viewers be more active in their searching of my site, usually including a search bar – which to my horror, I see that I have forgotten to include – and a cloud of tags/labels they can also use to find blog posts that fit into the categories.

My school also specifies that we must include in our designs: 1) our school logo, and 3 and 4) multiple ways of following the blog or contacting the teacher who is connected to it. I therefore added widgets in the side bar for a logo, for contacting my school email address, and for subscribing to the blog by email updates or use of an RSS feed.

In addition, as I am a language acquisition teacher, I also wanted viewers, many of whom may not speak English, to be able to translate the blog, for better or for worse in terms of accurate translation, into their mother tongues. For this reason, I included a 2) Google Translate widget.

A shameless digital self promoter, I also wanted viewers who might be interested in this blog to have the chance to easily find and read my other blogs. Voila! We have a 5) recommended blogs widget in the sidebar too, which just so happens to have my other blog address linked first.

Analysis of the Blog with the Heirarchist’s Toolbox

Using the heirarchist’s toolbox of size, color, contrast, alignment, repetition, proximity, density and whitespace, style and texture, let’s analyse, and discover what needs to quickly addressed in terms of graphic design with my blog’a overall appearance.

Size

From a graphic design standpoint, size quickly communicates to the viewer what is important in the blog. As we design web based products, we need to carefully choose what elements we make bigger to reflect this inflated importance.

In terms of overall design, the biggest elements of my blog are: the blog’s title, contained in the banner which is likewise massive, the actual blog posts, and my school’s logo. Most likely, the banner needs to be scaled back and perhaps the title of the blog should be large, but not so large that it does not fit on one line.

Oh yeah, and the images are large and colorful within blog posts themselves; I’ll keep that size differential in the makeover.

Color

This is not an exact science here, but the colors of this blog do not gel well with what the blog is about. They do express personality somewhat and they grab the viewers attention, but they do seem to detract from the important elements of my blog, namely the information in my posts. The color scheme, and perhaps the entire theme, needs to change drastically, unless this blog is going to shift from a being a blog about teaching for language acquisition to being a blog about the club scene in Phnom Penh.

Contrast

Now this might be an area where at least my posts contrast in color greatly from the background and elements. The whiteness of my widgets also contrast fairly well against the red borders.

However, in viewing the title on the banner, I’m seeing that I have not paid enough attention to contrast of the words with the image of the waterfall. Mr. Jon’s ISPP EAL Blog in its dark read hue does not pop out against the dark of the trees. In fact, the top of ISPP almost gets lost as does the bottom of Mr. (Not even beginning to discuss how amateurish the photoshop text job looks).

Must change.

Alignment

There is a very basic rough alignment to my blog in that the header is above everything, while down below are two columns, one for posts and one for widgets. Has been seen a million times in beginner’s blogs. Does not present a savvy image and looks a little dull from a design perspective possibly. Again, perhaps changing templates might fix this. Brandon Jones mentions that “alignment can also provoke interest if used in unique ways”.

I’ll look into doing that.

Repetition

I have not used repetition at all in this blog, apart from the background tiles. I do, however, tend to underline, bold, and align left my headers to aid readers scan quickly through my copious text (and use bold italics for emphasis). Oh! One point!

Proximity

Here, a viewer can clearly see that my blog posts are all together and the widgets are separate. One thing I would like to improve is that the widgets all seem to run into each other, becoming one mega-widget. It would also be nice to have slightly more space between my actual blog posts, as they appear to merge together vertically as well.

Density and Whitespace

Ouch. My blog is very densely packed with post and widget. I will try to make a bit more white space in order to reduce the clutter. To be fair, it is a blog, but still…clutter is clutter. Not professional.

Style and Texture

Jones mentions how these two elements can be “dangerous”.

Just like a carpenter cutting his finger off on a band-saw, a designer can easily mislead people by over-emphasizing certain elements through style. Imagine a heavily textured, heavily designed site element that demands so much attention that it distracts instead of informing.

Ok, ok. Guilty as charged. This is where I have to reduce the lizard-lounge quality and get back to the purpose of my blog, to display my educational professionalism for parents, teachers, and employers present and future.

As the wonderful Christopher Lee (may he rest in peace) said:

[youtube]https://www.youtube.com/watch?v=mfQbYGd4oII[/youtube]

Check out how this Frankenstein’s-monster-of-a-blog gets transformed from Boris Karloff to Peter Boyle in Part 3 of Extreme Graphic Design Makeover – The Blog Returns!

Extreme Graphic Design Makeover (Part 1 – Introduction)


I sometimes feel as Han Solo did when I view my band posters, blogs, websites, Google Sheets, Forms, and Documents. At times, I have churned out these web artefacts with more functionality and use of the latest widgets, scripts, and app tie ins than those of my peers. My computer wiz friends, have even gone so far as to call me a “super” and “master” user when I have described ways I max out various web tools for efficiency and utility. (I’m aware that such a description is probably of dubious honour in the hardcore tech community but I’m ok with it.)

However, like the smart skinny kid at the beach getting sand kicked in his face by the Charles Atlas bully, I have had, without exception, most of my creations (a band website, a blog about the PYP Exhibition, my first class blog, my second class blog, and my first blog on this technology bizniz) absolutely trashed by graphic design experts, some of them the same friends who named me master user.

Initially I might have retorted, “She’s got it where it counts. Check the information. Check the utility. Unfortunately, I’ve got kids to teach, and bands to run…I don’t have the luxury of sitting around and thinking how to make my sites pretty. They are about information anyway…and I provide lots of it!”

However, after awkwardly laughing my way through a hilarious article from Slate by  discussing the cold hard facts about information foraging/foragers, I’m rethinking my self assuredness and am tuning in to what designers have been telling me for years. The design matters at least as much as the information; if information foragers, if my potential readers, decide to not view my blogs because of poor visual design, then I have wasted my time putting the information there in the first place.

I have a long way to go in my visual literacy proficiency, but I have found this statement to help guide me:

As students develop their visual literacy, they begin to understand that every visual choice the artist has made, every detail regarding subject and color and composition, conveys information that informs the reader.”

-from “The Power of Pictures: Creating Pathways To Literacy Through Art”  Frank W. Baker

Now, as I view my various web creations they are looking less like Millenium Falcons and more like the space garbage ejected by a Star Destroyer that the Falcon floats away from in “the Empire Strikes Back”.

Please join me in Part 2 of this blog post as I do an EXTREME GRAPHIC DESIGN ANALYSIS/MAKEOVER of one of my professional creations, Mr. Jon’s ISPP EAL Blog.

What’s wrong with this blog’s design? (Don’t everyone speak at once!)