Week 13 – Final Project Draft

This week, we begin to post the links of our final project drafts. The process of developing the final project is almost liken to constructing the scaffold for a building.

As I looked through the posts of my peers, I learnt from their work as such:

– Clean neat website with CSS, very mobile friendly website (Russell’s work)
– More details about the lesson accompany each instructional image (Tony, Barry’s work)
– Use of Hyperlink of an image to link from one lesson to another ( Kevin’s work)
– Use of Thumbnails to represent each lesson (Noah’s work)
– Placing information of instructional goal on the page with the instructional image (Sarah’s work)

Through looking at their work, it is almost of gaining new ideas on how to scaffold the construction of my own final project.  There is still some weeks left to final deadline, and I hope to make my site even better.

Currently, my final project draft (see screen capture below) has the basic html navigational structure up, with links to most of the images, and an avatar animated with my own voice. I see potentials to improve on using of thumbnails, and placing information of instructional goals on the pages with the images. I also wondering how to make the site even more mobile friendly. Now, got to spend more time chewing on what I have learnt from my peers and synthesis into new ideas for my site.

Credits:
image of Scaffold
http://www.flickr.com/photos/nrbelex/454726783/

Week 12: Its about balance! Past, Present and Future.

This week is about applying the principle of balance.

As usual, I wanted to look around for examples of balance and came across a very good instructional video on principles of design : balance. 7 examples are shown in the video. After watching the video, I began to appreciate how I can adjust the positions of various elements in my image – especially through using a graphics editing software.

Another video on balance gave more examples on poster design, paintings etc

Through these videos, I began to appreciate that balance is applied not only in modern graphics design, but also in past historical art pieces. Moving forward into the future, I really hope to see a stronger application of this principle of balance into for images for learning.

Week 11: Organization Graphics – Heuristics applied to the design of charts.

This week, I enhanced a pie chart in my assignment. But something that I never really considered before this week is the use of the “Use pie charts for general rather than specific information” – which is one of the 8 heuristics applied to design of charts (Lohr, 2008).

Most of the time, I will indicate all the percentage data in the pie chart for learners. And after reading the textbook, I began to ask myself how much information do my learners (aged 11 to 12 years old) really need to know in the pie chart? Do they need to know the percentages, do they need to memorize the percentages, or do they just need to know that are various sources of data in the pie chart?

I guess perhaps the greatest take-away for me is to once again put the learners first! And to always ask myself “What do my learners really need to know?”.

Secondly, I was looking around for charting tools. The chart function in illustrator was not totally easy to use. So I started searching around and came across another blogger’s entry on “22 Useful Online Chart and Graphing Tools” . And one of my personal favourities in this list is amCharts Visual editor – a visually powerful and easy to use tool for integration of charts. Below is the screen capture of the website.

 

 

Color and Depth in Graphics

This week, I learn how to use colors and depth in graphics to enhance learning. One of the greatest personal gain in this week is to learn to use colors to represent quantity and measurement.

Besides learning from all the posts from my classmates, I was keen to find out more examples on the internet that applies the principles that I have learnt this week. So I looked around and managed to find some more examples:

Example (1) Map of Spread of SARS 

(click on image to go to source of image)
In this image, darker red colors represents areas that have a greater number of people infected with sars

 

 

 

 

 

Example (2) Flow System
(click on image to go to source of image)

In this image, colors are used to group regions together.

 

 

 

 

 

 

Example (3) Tornado Cross Section

(Click on image to go to source)

In this image, texture is used on the tornado to create some form of realism for the learners. A mixture of different shades of grey, white, light blue were used on the tornado. The way the colors are integrated together create some sense of “texture”. Thus learners are able to image this as an three dimensional object, rather than two dimensional. The ground is also give a brown texture to represent a normal ground on earth.

I hope to come across more examples through my classmates work this week! And definitely looking forward to the next week’s lesson.

 

 

 

 

 

 

 

 

EDTECH506 Week 6 Reflections: Shake Up Those Shapes

This week has been a challenging week with assignments in my masters course and two full papers in my graduate certificate course. I was trying to group all the complex thought processes in my mind like a child sieving through a big box of different shapes and coloured lego bricks.

While things can be conceptualized in a complex manner, I really appreciate this week’s EDTECH506 reading in Chapter 10 of the textbook “Creating graphics for learning and performance: lessons in visual literacy.” (Lohr, 2008)

The beauty of this chapter is that many graphics and images for instructional purposes are “born” out of basic simple shapes. While many educators are challenged to teach different content type (concepts, facts, processes, procedures and principles) (Clark, 2007) in the simplest way possible – it can all come down to how we represent these five content types using shapes and text. Based on this, I began to appreciate the fact that graphic design for learning need not be strictly left to the job of a graphic designer, but rather – any teacher with the ability to draw basic shapes can be involved in designing graphics for learning. What an encouragement for educators!

I was keen to find out more about use of shapes in graphic design, and so I decided to conduct a google search and came across a book “Graphic design school: the principles and practices of graphic design“. On page 38, I was intrigued by not only the use of simple shapes, but how the book explains that the concept of figure-ground relationship. The “figure” referring the shapes we used in the foreground, and the “ground” refers to the space in which the shape is placed.The book explains that sometimes, if the is the figure-ground relationship is not clearly represented, the viewer might be confused which is the figure, and which is the ground. Likewise, I am made more conscious that when I place shapes in the foreground, I must ensure that the figure-ground relationship is clearly and easily perceived by my learners. Otherwise, the image will not be effective for learning.

Also managed to submit my Week 6 assignment of shape at http://edtech2.boisestate.edu/boonlaifoo/506/week6.html

Looking forward to hear my classmate feedback on this week’s assignment.

References:

Clark, R. C. (2007). Developing technical training: a structured approach for developing classroom and computer-based instructional materials. John Wiley and Sons.

Dabner, D., Calvert, S., & Casey, A. (2009). Graphic design school: the principles and practices of graphic design. John Wiley and Sons.

Lohr, L. (2008). Creating graphics for learning and performance: lessons in visual literacy. Pearson/Merrill/Prentice Hall.