ITGM 755 : Summer 2012 | Professor Leong
Thesis Statement
The role of graphics as a navigation device in information structures in an interactive application can affect how the user can access information faster and easier. I will design a human centered interactive website costumed for online beginning design students that will implement and define the design process and guides through visual graphics and metaphors for online collaboration on social and cultural design solutions.
Short Description
The visual component for this website will replicate a circular shape similar to a pie chart. Circles as an ancient metaphor have been used in various cultures for thousands of years conveying equality, promoting communication and honoring the collective wisdom. [1]
What makes this website unique is:
1- It’s visual and human centered interface, teaching the beginning design students the specific steps to a design process through guided steps, visual graphics and metaphors to solve a design problem.
2- Promoting online collaboration and teamwork through design projects related to social and cultural awareness and sensibilities.
Action Plan
The chart is broken down into specific steps that the design student needs to take to solve a particular design problem from start to finish. Below are the rough steps as to how I see this website’s interface and functionality developing:
1- Once the design problem is introduced, the online class will be divided into five or six students per group.
2- Based on the selected design problem, the pie chart’s color themes will change to reflect the
topic. For example, the chart color themes for a poster design on using Sustainable Energy resources would reflect a different color palette than a poster designed on Animal Cruelty. This
simple change in color palette based on each project, can add dynamics to the website by keeping it connected to each design project and current. It can also help guide the student visually to know where they are in the design process and become more familiar with the color concepts from a more general perspective.
2- On the initial entry all the pie charts are closed.
3- The first pie chart starts with creative briefs and brain storming session where the design students have to come up with ideas for the project.
4- By clicking on the brainstorming section, the piechart will open circularly, letting students access additional course materials, learning tools and resources such as lectures, exercises, simulations and video tutorials specific to the brainstorming section without having to leave the page. (or the circle as the metaphor)
5- Once the user clicks on one of the links in the brainstorming section such as Instructions, the pie chart dimes out, and the new page will open on the top of the chart, similar to Fancy Box jQuery, again without the user having to leave the initial page. [2]
As part of the online brainstorming process, the users can utilize class groups created on social net working services such as Flickr, Voice Thread [3], and wordpress to communicate, share ideas, inspirations and artistic influences as it relates to their design topic.
6- Once a section of the chart is completed by all groups, the class moves to the next section.
The guided and directed instructions and support for each section can help the beginning design students to fully understand the design process esthetically, creatively and technically.
7- At the end of the project, each group will share and record their final design solutions on VoiceThread and talk about their work and the challenges they faced with the assignment. The audio recording is a crucial part of the process of collaboration as it can greatly help the student to verbally talk about their work, articulate their vision and expand their analytical and communication skills, similar to a traditional classroom critiques. They can also use the same resources to leave each other audio feedbacks.
8- The complete collaboration process and the final outcome will be documented and posted on the website, before moving to the next design project.
Method
I will research and study and test jQuary libraries, Flash AS3 components, CSS3 and HTML 5 to find the best solution to implement my vision and achieve the following goals:
2- Enhance and improve the quality of design projects by defining the design process and steps using visual graphics and metaphors for online beginning design students.
3- Through interactive online collaboration process on social and cultural design topics, promote social and cultural awareness, tolerance and cross cultural and racial understanding.
4- Design a human centered interface that is visually comprehensive and easy to understand and navigate for beginning design students.
5- Design an interface that is easy to update and modify by incorporating XML and jQuery libraries.
6- Design an interface that incorporates some of the more dynamic interactive features available online today, such as jQuery libraries, Spry widgets and Flash AS3 Components.[7]
Prototype
For my thesis review, I will use Dreamweaver to create the initial prototype of my design, which can allow the committee and the testers to have some basic interaction with the website before it is fully build. I will also conduct a usability test with my hybrid class design students prior to building the final website to troubleshoot any possible issues that may come up in this process.
References
1- Wisdom metaphore – Website Last Accessed July 21 – 12
http://en.wikipedia.org/wiki/Collective_wisdom
2- Fancy Box – Website – Last Accessed : July 22 – 2012
http://fancybox.net/
3- Voice Thread – Website Last Accessed July 21 – 12
http://voicethread.com/
4- Tiny Circle slider – Website Last Accessed July 21 – 12
http://www.baijs.nl/tinycircleslider/
5- 3D Flipping Circle – Website Last Accessed July 21 – 12
http://tympanus.net/codrops/2012/07/20/3d-flipping-circle-with-css3-and-jquery/
6- 3D rotator – Website Last Accessed July 21 – 12
http://www.uize.com/examples/3d-rotation-viewer.html?tour=all
7- Flash AS3 Components – Last Accessed : July 22 – 2012
http://www.adobe.com/devnet/actionscript/samples.html