Author Archives: chrispyinteractive

About chrispyinteractive

I am a design student.

Lecture Notes: The Static and Kinetic Screen

Module 1: Play, Experience, Design

Static: Of forces not causing movement. Motionless.

Kinetic: Relating to change over time or motion.

Who is Andy Polaine?

Describes himself as:

“An experienced designer focusing on playful interactions and service design research.”

“Interactive concept development.”

Polaine is currently based in Germany but at times he is a local, moving to Australia in 1999. He helped establish the interactive department Animal Logic and he also write for Desktop magazine.

Polaine completed his PhD at UTS:

Developing a language of interactivity through the theory of play.


Interactivity through the concept of ‘play’


Very important in game design and interactive design

Polaine’s Definition fo Interactive Design:

“I think it’s simple: we design interactions. Those might be interactions between people, machines and screens or they might be interactions between two or more people. It is a combination of how the elements function – what they do, what they look like and what they look like they do – and the experience of using them. In many cases it is about making complicated things easier and more pleasurable to use.”

Polaine, Andrew. “Any Polaine.” Desktop 251 (2009): 30 – 31

A break down:

“It is a combination of how the elements function:

  • What they do
  • What they look like
  • What they look like they do
  • The experience of using them

In many cases it is about making complicated things easier and more pleasurable to use.”

Static Graphic Composition

User = All sense and capacities, especially sight.

User = View + Use

User Inteface (UI) includes visual composition.

Eye-Tracking: is the process of measuring where we are looking or the motion of the eye relative to the head.

Module 2: Using What you Know

Static Composition and Visual Hierarchy

Visual Hierarchy: In a graphic sense, it is the consideration and treatment of graphics or visual forms on a page. Composing elements into a logical order.

“Making complicated things easier and more pleasurable to use” by understanding  visual hierarchy.


  • Navigation
  • Mapping
  • Information Architecture

The principles of relaying information are shared by all fields:

Graphic Design > Information Design > Interactive Design

Visual Spatial Design

Gestalt Psychology

“The use of Gestalt principles can help designers signal to users which elements in the interaface are most useful or significant. This includes how information is grouped and how visual elements are interrelated to collectively function as a single whole.”

Craig M Baehr, Web Development: A Visual-Spatial Approach, Pearson, New Jersey, 2007, p.125


Point of interest, use of contrast, focus point

Point of interest

  • The focus point or draw card of a composition
  • Usually the most important element of a composition
  • The entry or starting point of reading or digesting the visual information in a layout
  • Leader of visual hierarchy

Visual Hierarchy

  • Point of interest (first level)
  • Sub points (second level)
  • Sub sub points (third level)
  • etc.

Composition is visual ecology

  • A point of interest should not overtake a whole composition
  • A point of interest should not be too weak and hidden
  • No right or wrong, only appropriateness to purpose or brief


  • The difference between visual elements within a work.
  • The relative difference between light and dark areas.


  • The relative lightness or darkness of a colour.
  • Strengthen or weaken a point.

Scale and weight

  • The relative size of graphic form.
  • Closely related to perspective and depth.



Legibility: How clear the text is visually.

Readability: The degree to which meaning of text is understandable, visually and conceptually.

Readability is not legibility.

  • Good designers treat text as content.
  • Great designers treat text as UI.

-Cameron Moll


  • Hughes, Greg. “The Static and Kinetic Screen – Module 1: Play, Experience Design.” Interactive Design 1. University Of Western Sydney. Online, vUWS. 21 Mar. 2011. Class lecture.
  • Hughes, Greg. “The Static and Kinetic Screen – Module 2: Using What You Know.” Interactive Design 1. University Of Western Sydney. Online, vUWS. 21 Mar. 2011. Class lecture.
Leave a comment

Posted by on March 30, 2011 in Uncategorized


How to prepare toast: Storyboard

Leave a comment

Posted by on March 23, 2011 in Storyboard


Information/Instructional Design

Instructional Design

Instruction: A sequential order of steps that describes the process for carrying out a certain objective, for example, how to change a light bulb.

An instructional design describing how to change a light bulb. There is a sequential order to the steps that are involved.

Instructional design (also know as instructional systems design) is the analysis of learning needs and systematic development of instructions. Instructional designers often use instructional technology or educational technology as tools for developing instructions. Instructional design models specify a method, that if followed correctly, will fulfill the transfer of knowledge, skills and attitude to the recipient of the instruction. It goes without saying that paying attention to “best practices”, and innovative teaching methods will make any instructional design model more effective.There must be contrast in order to convey the information clearly and effectively and to make the information flow.

An instructional poster describing how to work on a computer without physically injuring the body.

Many instructional designers make a big mistake. In an attempt to make content simple, they take out information. Unfortunately, this leaves the person viewing the instructions wondering, “Why am I learning this and what am I learning exactly?”  The solution isn’t to take away content, but to present it in a clearer and simpler way. This is the art of good instructional design. When deciding what information and elements to leave out, it is essential to consider what content, when removed, will not harm the learning process as this will make the instructions useless and hence make it a bad design.

Information Design

Information: Information is the meaningful representation of data. When the data is structured and arranged, it becomes information that is readable.

Information design is all about gathering data and transforming it into clear, meaningful and easily-accessed information. The goal is to make the complex data into readable information that can easily be accessed and read by average people.

An information design graphic can be made up of ISOTYPE (International System Of TYpographic Picture Education) which is an early infographical form that originated in the 1930’s by an Austrian philosopher and curator Otto Neurath. This is a symbolic way of representing quantitative information via easily interpretable icons. Using icons makes the design more eye catching and easy to interpret. But if the data is not represented correctly, it could make the information too complex for the reader which turns the information back into data, a non readable source to an average person. Hence, information design is all about turning data into information so that it can be read easily.

An information design chart showing the relative distance between places using easy to read icons.



Culatta, Richard. “About this site…” Instructional Design. Web. 22 Mar. 2011.<>

McCandless, David. “Vintage Infoporn No. 1.” Information is Beautiful. 7 Mar. 2011. Web. 23 Mar. 2011. <>


Lecture Notes: The Design Process Overview

Design Process Overview


  • Client Brief
  • Budget
  • Schedule
  • Proposal

Concept and Planning

  • Micro schedule
  • Flowchart
  • Proof of concept
  • Feature List
  • Design Research
  • Exp. requirements
  • Tech. requirements

Design, Prototype and Specifications

  • Workflow and Storyboards
  • Visual Design and Specs.
  • User Testing Report
  • Finished exp.prototype
  • Functional Spec.Production Matrix


  • Alpha Builds
  • Beta Builds
  • Test Matrix


  • Test for bugs/issues
  • Launch


  • Updating and adding content
  • Modifications/fixes
  • Style Guides
  • Archived Assets

Interactive Design Model

  • Begins with an abstract and conception
  • Visual Design
  • Interface, Navigation and Information Design
  • Interaction Design and Information Design
  • Functional Specifications and Content Requirements
  • User Needs and Site Objectives

Personas, Scenarios and Wireframes

Persona: Fictional archetypal users; a portrayal of a character.

  • User Persona
  • Artefact Persona
  • User Scenario

If there is not a conscious, articulated vision of your audience then it is NOT design.

To design interactivity, we must first think about the audience. A designer must have an understanding of the audience that they are designing for. Therefore, a persona is a hypothetical audience that, if followed and designed for, can reach the goal for an intended audience.

Personas and Scenario Example

User – Persona.

Goals – Objective that the design needs to achieve.

Scenario – A hypothetical event created to help the designer see what the user would experience with the designed solution.

Artefact Persona

Artefact – Product

  • If the interface were a person, what would he or she be like?
  • How would you expect users to react when they use the product
  • How would you describe this product to a friend
  • How is the product different form competitive products
  • Which celebrity (or car movie etc.) is the product most like? (Least like? Why?)

Experience Keywords

Developing a set of keywords that forms the foundation for the design. This helps build the persona of the product.


The design process is crucial to developing any type of design. The designer must plan and make sure all preparations and research have been completed before even attempting to create the product. This will ensure that the product will be of high quality.

Leave a comment

Posted by on March 21, 2011 in Lecture Notes


Interactive Design

Interactive design is the design of how two parties interact with each other, which is generally between a human entity and a product/system. When designing an interactive product/system, the aim is to create it so the interaction is fluid and simple. It must feel natural to the user to allow the best and smoothest interactive experience.

The tool bar appears at the top of most Window and Mac applications which gives the user a logical arrangement of options that is easy to understand.


When designing an interactive product/system, one must think about how to address the needs of the user and how to make the interaction easy and smooth for them. Issues such as the capability of the machine, both physically and intellectually, the responsiveness of the machine, the smoothness of the interaction between machine and user, must all be considered when designing an interactive product/system. These issues are very important because they contribute to the natural way of interaction between user and machine.


Nintendo DS, a handheld gaming console that utilises a touch screen for a more interactive gaming experience.

When people think of interactivity, they think touch screens. Today, a lot of new technological devices come with a built in touch screen such as mobile phones, iPod, GPS, Nintendo DS and many other devices. This gives the user the ability to interact with the screen instead of pressing physical buttons. This allows more control than having a single form of input like a button assigned to do a specific task. Touch screens allow many forms of input such as a press of a button or the movement of an on screen pointer. Although it is not always the best idea, because touch screens can sometimes be not as responsive as we want them to be and this creates a disrupted experience for the user. It also means sacrificing the physical feel of the buttons and this rules out users that have a blindness disorder. An interactive designer must ensure that the product is responsive yet give most, if not all users, the best interactive experience possible.

iPhone, a mobile device that can utilise a touch screen keyboard to mimic a computer keyboard for easy typing.

The decision to change the way we use devices that manufacturers have created is all part of the process of creating a better interactive experience, that matches our current lifestyle. They are adopting a design that accommodates our needs in the form of user friendly technology to assist us in our ever changing lives.

Leave a comment

Posted by on March 16, 2011 in Interactive Design


Lecture Notes: Interactive Design


Interaction: The process of where two different parties influence each other.

Interactive Design:

“Designing interactive products to support people in their everyday and working lives.”
-Sharp, Rogers and Preece.

“The design of spaces for human communication and interaction.”
-T. Winograd.

In interaction design there a 5 key design areas that contribute to the design of interactive products. These areas are:

  • Interactivity
  • Information Architecture
  • Time and Motion
  • Narrative
  • Interface

Bill Verplank states there are 3 key “how do you” questions that need to be answered as a interactive designer. These key questions are:

  • How does the person do?
  • How does the person feel?
  • How does the person know?

Gillian Campton says that interactive design is all about designing the quality of the interaction that occurs between the user and the system/product.

These qualities include:

  • How easy/hard is it to interact with the system/product?
  • How natural is this interaction between the user and the system/product?

Experience Design

Information comes from the representation of data.
Information then contributes to knowledge.
Knowledge is then used to build experience.
Once someone has an experience, they gain wisdom.
Through the use of interactive design, we as designers can create an experience for someone.
Interactive design plays a huge part in design today as it allows users to interact with various information and systems. Designing interactivity takes a lot of planning and key questions must be answered to fulfill the design. Interactive design also creates an experience for the user and it is the designer’s job to ensure that the experience is smooth and easy to understand and use.
Leave a comment

Posted by on March 16, 2011 in Lecture Notes


Step by step guide on how to prepare toast (with flowchart)


1 – Gather all of your equipment.

2 – Plug the toaster in.

3 – Flick the power point switch to turn on the toaster.

4 – Take a slice of bread out of the packaging.

5 – Place the slice of bread vertically into one of the toaster slots.

6 – Check that the piece of toast is placed correctly in the slot to ensure the toast will be evenly cooked.

7 – Adjust the settings of the toaster to approximately 3 minutes.

8 – Pull down the lever to enable the toasting process.

9 – Wait a few minutes until the toaster ejects the piece of toast.

10-Once it ejects, check to see if the toast is toasted to your liking. If not, repeat step 8.

11 – Take the piece of toast and place it on a plate.

12 – Serve on plate.


Click to enlarge.