Exploring Visual Design

 

“At the beginning of a project, the screen is a blank canvas, ready for you, the multimedia designer, to express your craft. The screen will change again and again during the course of your project as you experiment, as you stretch and reshape elements, draw new objects and throw out old ones, and test various colors and effects – creating a vehicle for your message…many multimedia designers are known to experience a mild shiver when they pull down the New… menu and draw their first colors onto a fresh screen…this screen represents a powerful and seductive avenue for channelling creativity.”

Tay Vaughan, 1998

 

Visual design takes the composite of elements: text, symbols, photos, colours, video, in fact any graphic element and much more, to communicate your message – it is your primary connection with the learner.

 

Visual design is the process of producing visual images that are able to communicate information to other people.

1.        What message are you trying to communicate?

2.        What audience are you trying to communicate with?

3.        What is the best way to visually communicate that message?

4.        What are the elements and tools necessary to produce the visual image?

 

Complete the quiz in UTSOnline – Visual & Interaction Design – available in the Course Information tab.

 

Understanding Perception

 

 When you look at a visual image you see lines, shapes, colours, tones, hues and objects in a spatial dimension.

Discovering the way the eye works will help you understand how visual elements function in visual design.

Understanding Visual Communication

No two people ever see the same thing quite the same way. Cultural differences, the level of acquired knowledge, an individual’s psychology and socialisation will all affect the way we construct meaning from a visual image.

Visual hierarchy

Read:

About Page Design and Visual Hierarchy from the Webstyle Guide

http://www.webstyleguide.com/page/index.html

Use the navigation on the right hand side.

 

How would visual hierarchy influence learners?

 

it would influence which content they would likely to lean first, more/better as visual hierarchy emphasise certain contents to be more important than others

 

 

Understanding Colour

Review the Colour Matters site and determine why some colours appear to hurt the eye!

 

The Psychology of Colour

 Some colours make us happy and others, sad.  Colours have the ability to provoke a psychological reaction. Look at the objects around you: their colours have been chosen specifically because they create a mood or an association for the viewer.

Aggression Friend Solid Weak Serious Depressed

 

Selecting Colours

 

Many things will affect your choice of colour. Consider the situation and choose your colours wisely. Think about the following factors.

Fashion

 

Culture of the organisation – the colours of the organisation’s logo, it would be more familiar to the learners and promote organisational pride Corporate colours – usually blue, dark blue, black, green, dark green, it’s serious and professional  Fashion – colours that are appealing to the artistic side, can use those that are usually not used by corporates such as yellow, orange, red  Your message – depending on the message you like to get across, happy usually yellow or orange, love/anger/passion usually red etc Mood of message – depending on the message you like to get across, happy usually yellow or orange, love/anger/passion usually red etc

 

 

Do not underestimate the power of colour to influence your learners!

 

 

 

 The following is a brief overview of the 4 basic principles of design :

C R A P

 Reference: Williams, R. 1994, The Non-Designer’s Design Book, Peachpit Press, USA

 

Contrast

Contrast can be the most important visual aspect of a page. The principle is to avoid elements on the page that are merely similar – if they are not the same – then make them VERY different.   Purpose: To create interest Aid in the organisation of information Supports visual hierarchy   Eg. use of colour

Repetition

Repeat visual elements throughout – colour, shape, etc. Develops organisation and strengthens the unity.   Purpose: To unify and add interest For consistency   Eg. navigation, colour identifiers, layout – anything your learner may visually recognize.   Avoid repeating the element so much that it becomes annoying and distracts from the message

Alignment

Nothing should be placed on your page randomly. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated look.   Purpose: To unify and organize your page design Be conscious of where you place your elements – always try to find something that aligns them Avoid: More than 1 type of text alignment on the same page Don’t always centre align

Proximity

Items relating to each other should be group close together.  Items in close proximity become one visual unit rather than several separate, unrelated units.   Purpose: Reduces clutter and confusing your reader Organizes information – reduces cognitive load Logical information is more likely to be remembered

 

 

“Multimedia is an eerie wail as two cat’s eyes appear on a dark screen.

It’s a small window of video laid onto a map of India, showing an old man recalling his dusty journey to meet a rajah there…”

Tay Vaughan, 1998, Multimedia: Making it Work

 

Multimedia is understood to mean a product that is digitally constructed utilising and seamlessly integrating various media: text, graphics, images, video, animation and sound.

Multimedia enriches the user through medias and technologies with the intention of engaging people’s minds!

Initially the delivery of multimedia products was via CD-ROM, but the internet provided a global distribution system that changed the structure and style of the multimedia products.

High levels of interactivity are now achievable using a range of software that runs on almost any current desktop computer.

The future of multimedia will be even more challenging as a plethora of delivery systems and displays are marketed. Enhanced program material provided on digital television and internet information displayed on mobile phones are just two examples of new multimedia systems.

Our notion of multimedia needs to encompass all new forms.

Review the following websites:

Examples of Multimedia in e-Learning

http://www.adrworkshops.com

 

From the map, click on Australia, then Test your Skills in the left-hand column, choose a scenario

 

 

http://www.listeningadventures.org

 

Carnegie Hall – learn about a Dvorak Symphony

 

 

http://www.bbc.co.uk/history/lj/victorian_britainlj/sour_entry.shtml?site=history_victorianlj_sour

 

The BBC have a huge variety of e-Learning short course – try this one and see if you can improve Victorian Britain’s living conditions!

 

 

http://www.howstuffworks.com/toilet.htm

 

An amazing site full of all sorts of resources – this is a particular favourite!

 

http://www.cadre.com.au

Cadre Design are a Sydney based multimedia design company – from the home page, click on the Education link, this will take you to the Showcase. Click on the first example – the Astronomy site. Examine the possibilities (maybe learn something too)!

How do you define multimedia in today’s e-Learning context?

Compare this to the experiences with the Web 2.0 technologies and the issues raised in the Seely-Brown article.

 

Using different types of mediums in an interactive way to increase e-learning

 

 

 

A multimedia instructional message is a communication using words and pictures that is intended to promote learning.

 

For example, a multimedia instructional message in a book could include printed text and illustrations, whereas a multimedia instructional message on a computer could include narration and animation.

 

Examples of multimedia instructional messages include words and pictures intended to explain how lightning storms develop, how car braking systems works, and how a bicycle tyre pumps work.

Richard Mayer, p.21

Multimedia Learning

 

READ:
Mayer, Richard E. & Moreno, Roxana 2003, Nine Ways to Reduce Cognitive Load in Multimedia Learning in Educational Psychologist, 38 (1), pp43-52.
(PDF File in Subject Documents folder in UTSOnline)

 

1.        Multimedia principle: Students learn better from words and pictures than from words alone.

 

2.        Spatial Contiguity Principle: Students learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen.

 

3.        Temporal Contiguity Principle: Students learn better when corresponding words and pictures are presented simultaneously rather than successively.

 

4.        Coherence Principle: Students learn better when extraneous words, pictures, and sounds are excluded rather than included.

 

5.        Modality Principle: Students learn better from animation and narration than from animation and on-screen text.

 

6.        Redundancy Principle: Students learn better from animation and narration than from animation, narration, and on-screen text.

 

7.        Individual Differences Principle: Design effects are stronger for low-knowledge learners than for high-knowledge learners and for high-spatial learners rather than low-spatial learners.

 

 

Now consider your course and make notes where multimedia may be of value:

 

 

Task:

Consider the media elements in your design – use the questions above as a guideline if you are using animation, video or sound.   What are your recommendations?  follow the multimedia principles content need to be relevant to the program Should not be too long as it may increase information overloada Provided examples of multimedia elements you would recommend. vod casts pod casts online quiz blogs wikis

 

module 3

in class exercise next week, read through module three for next week and the article on UTS online

what the test will involve

• evaluate three different e-learning sites
• need to be about to describe screen layout
• visual hierarchy
• placement of graphics
• style of graphics
• use of colours
• effectiveness of learning design from a learning perspective

Theories of Learning

Behaviourism

• Involves the process of condition and observable behaviour
• Looks at the relationship between cause and effect in response to a stimulus
• Learning becomes a modification of behaviour by applying stimuli, shaping responses and provisions of reinforcement
• Requires practice and feedback otherwise skill may appear lost (frequency of repetition and ensuring response is not ignored)
• Classic condition-> ability to generalize our responses to stimuli
• Operant conditioning-> people learn to behave a way in which allows them to obtain what they want or avoid things they don’t want (positive and negative reinforcement)
• Reinforcement becomes vital as generalizations can suggest importance of practice in varied situations (learning transfer)
• Feedback must work with motivation
• Shaping behaviour by reinforcement of responses ensures appropriate learning of new skills

Cognitivism

• Involves thinking and applying thought
• Focuses on the process between learning and performing skill
• Learning occurs when experiences are formed into a systematic and meaningful pattern that can encourage problem solving insight and meaning
• Grouping, hooking and pegging -> memory function
• Pre test used to test existing knowledge while post test becomes the comparison of learning obtained

Humanist

• Influenced by cognitive approach focuses on individuals seeking self esteem, personal adequacy and self actualization
• Can be used as a blend to form and influence different aspects of learning theories

Constructivism

• Involves schema-mental model which builds on personal interactions with others and are unique to each individual
• Dependant on prior knowledge
• Involves repetition with increasing detail (spiral)
• Can include taking knowledge and applying it to live situations
• However has no final assessment

Social Learning Theory

• Blend that focuses on experience and observation and modeling ( mentoring)
• Involves 4 processes which include: attention, retention, reproduction and reinforcement
• Social constructivism thus becomes a blend of social and constructivism theories

References

http://tip.psychology.org

what we’re doing in class:

Behaviourism: we should be observing observable and measurable human behaviours. explaining human behaviour…the cause and effect.

Classic conditioning can also be demonstrated by our ability to generalise our reponsess to stimuli – the ability to generalise

Operant conditioning -

Active learning – the learner responds actively.

Cognition is information processing

Cognitivism is like a computer processor, it provides a structure to learners prior to them taking a course, it tells the learner what is to come, like a roadmap. it is a systematic approach to learning. the advance organiser may provide backgroun information, provide outline of the content.

KEY ELEMENTS of CONSTRUCTIVISM:

individuals build their own models based on their experiences and interactions with others. we learn through gradually building our own ideas and concepts. they are unique to each individual.