Coetail Blog Re-design

I really enjoyed exploring the resources around Visual Literacy this week.  It really made me look at everything (my blog, my presentations in class, other presentations, and the world around me) with a critical eye. I’ve been wanting to do a revamp on my COETAIL blog for a while, so with this new information in hand and design principles (CARP) to lean on, I’m going to give it a go.

Like most of us, I dove into the COETAIL course with great energy, reading, thinking and absorbing many new ideas.  The act of blogging was a great reflective practice and I was quick to get the blog up and running.  Wordpress was a new platform for me, but with the instructors’ videos and transferring other skills, it was quick to set up. With so much thinking around the early concepts, the blog site itself was set up in a functional matter and it hasn’t changed much since those early days.  I was more absorbed with the content of my blog posts, rather than the blog design.

Here’s a screen shot of how it looked:

Screen Shot 2015-09-29 at 10.23.26 pm

Here are some issues I have:

The banner image – As I said, this blog was created quickly at the beginning of course 1.  This image is one of my favorite photos I’ve snapped.  However, it is not at all connected to the purpose or focus of this blog.  It is not a metaphor for teaching or anything smart like this.  It’s just a nice, colorful picture that bring me good memories.  So this was the first thing I want to change.  I wanted an image that reflects the blog content and connects with the blog title – Tracy 2.0.

Density and Whitespace – There was too much white space around the top and top-right hand corner in the original layout.  The theme of the blog was creating this effect, so I explored a variety of the themes to find a better style. In fact, I tried on almost of all of the themes. The ones I liked the most were Storyline, Sixteen, Magazino, and TwentyTen. However, there was at least one small thing about each theme that I would’ve liked to be able to manipulate further.

COLOR & CONTRAST – The blog was lacking in color except for the banner image.  It was very much black on white.  Too much white.  Everything was swimming in white. While I do like simplicity, I think the blog was too bland.  I thought to use more color would liven it up and provide some structure to the page so it didn’t feel like the text was slipping off the side of a snow covered mountain.

ALIGNMENT – This was not a problem on the original blog design as everything was aligned on the left side giving it a sleek and organised feel.

PROXIMITY – Again, too much white space and one scrolling blog meant that connections were hard to find between information and some of features of the blog.

So in the new design, I chose the theme Magazino.  I used Picmonkey to make a Site Logo for the top of the page.  I decided to use pictures of myself since this is a website about my teaching practices and reflective of my philosophies.  I only wish that I could’ve extended the collage across further so there wasn’t so much white space. This was a limitation of the theme. I chose a black background to act as a border and provide some structural feel to the page.  The Social Media Icons were a new addition which I think are important and align with the focus of Course 1 – connected educators and learners.  The new theme gives an image to represent individual blog posts in close proximity which I think helps the reader to connect the information from separate posts and get a sense of the overall theme (visual literacy). Using Proximity to make connections may mean a viewer is more likely to go on and read other posts.

Here is a the new look:

Screen Shot 2015-10-18 at 10.27.35 am

After reading Michael Agger’s article Lazy Eyes, I’m trying to be more conscious of how much text I use, the length of paragraphs, and the use of subtitles, bulleted lists and white space in individual posts.

A last minute alteration to change the background colour to match the blue text of the blog titles and I think I’m done.  Any feedback is most welcome…

Screen Shot 2015-10-18 at 12.24.07 pm




Info Me – Course 3 Final Project

For the final project, I decided to do option 3 “Create an “About Me” page on the COETAIL blog, including an infographic or visual resume.  I chose this option because I feel creating a resume is a highly relevant task for all professionals and especially so for educators working in the international school system where there is constant change and fluidity. Whilst not recruiting for the next school year, it will be something I will do in the near future. Not only that, to create a resume is to really take oneself through a highly reflective process as it is impossible to create any resume without considering some essential questions and filtering what is important and what is not important. I knew it would force me to consider questions such as:

  • Who am I as an educator?
  • Which of my experience, qualifications and skills are most important?
  • What information is no longer relevant?

My last resume was written and used for recruiting in 2010. Here is a link to that resume.   It is a traditional resume in most senses.  Now, there is new content to be added; moreover, things have changed in the international teaching world and the world in general with respect to information literacy which I want to infuse into the new resume.  The elements of the old resume that I liked include the quotes, the use of colour and that it is organised.  Other than this, the resume is pretty conventional and standard in terms of content and layout.

After almost 15 years of work experience the teaching experience (work history) section is starting to get lengthy. As is the core competencies and professional development sections.  I have been privileged to work at school that offer many onsite professional development as well as had opportunities to attend PD through various conferences, institutes and specialized programs; however, I felt that I need to find a way to consolidate all of this information and represent it visually.

My main goal with creating an infographic style resume would be to synthesize this information and present it in a more visually appealing way. However, I fear that some information (specific details which I think are important) would be lost in the process. That is why I’d also accompany the infographic with a full traditional resume. I’m proud of both my work history and the time I’ve invested in professional development over the years and am conscious that this could be lost.

I decided to take a similar approach to what @jutecht.  recommends from week 3 on creating visual presentations which is to start in analog. So to do this I considered elements of my resume that I valued and put each one on an index card in some visual form. I played around with the placement of the index card keeping in mind the principles of layout (CARP).  See below my design process:


One big change that I wanted to include in my new resume was some interactive components to step away from a flat document style resume.  I thought this would also be a solution to not being able to include all information in a one-pager infographic. Therefore, I want to include one component that is a link to a video showing a typical teaching scenario in my classroom and places were more information could be found through links and pop-ups.

So after considering all these components I was fairly happy with my vision. However, I quickly realized that I didn’t have the tech skills to make it happen. That’s a real blow when you realize your abilities do not meet your vision. Although I could see how I could create some of the components using various tools, I did not know how to stitch the pieces together in a beautiful and professional-looking way. One of the benefits of Piktochart and other such software is the ready made designs and themes. But on the other hand, it doesn’t give as much control to the user and I knew that it would not give me the flexibility I needed.  So I found the most basic theme that looked easiest to modify to put in my elements.  It doesn’t at all match what I want my Infographic Resume to look and function like, but it is a start and a good practice applying various skills.

To represent all the professional development section of my resume, I decided to do a word art visual representation. Here are a couple of different versions. While I’m happy with the visual elements, I do not think it truly represents the extensive professional development that I’ve been a part of over the years.  Therefore I would somehow link this back to the traditional resume.


To represent my teaching experience, I wanted to include a map which when you roll over the places I’ve taught a box pops up with the school name, years taught, roles held. I could not make this and had to settle for a simple map created using MapChart.  I made a simple graph using Excel.  In addition, I selected a video I created last year showcasing Math Workshop.

I also tried some of the other resume generating web-based tools including:

These do give a clean look and they take much of the design principle decisions out of the users hands to produce a clean and organized product.  However, the final product is a little bit predictable.  Any potential recruiter will recognise that this is a plug in your information type tool.  It does not show what the user can do in terms of applying design principles or creating own content.

In addition to the infographic Resume, I also wanted to rework my About Me page.  So far, I haven’t spent much time on it.  I have only really just added information as a placeholder until I had more time.  On the About Me page, I want to include the Infographic Resume, the traditional resume and a more detailed narrative about myself as an educator.
To end, I’m not at all happy with the final product.  It is not professional or polished.  It certainly does not match the infographic that I haven’t painted in my mind.  However, in my opinion… Process trumps Product.  So in terms of a learning experience this project definitely fulfilled my goals.  I’ll continue to develop my skills so as to be able to turn this into something useable come recruiting time.  I may have to ask for some help from an expert but I definitely know what a want.