Monthly Archives: March 2011

Lecture 4 – The Static and Kinetic Screen

Lecture by Greg Hughes

  • Static – is where things in print or on a screen are motionless (not move).
  • kinetic – is motion or things changing over time on screen or with an interactive product.

Static Design Principles can be connected and interacted with Kinetic Design Principles.

Part 1: Play, Experience, Design

The theory of play is where you design for a engaging and more fun experience of interaction with users which Polaine explores. He states the interaction design as a “concept of how elements function…. what they do, what they look like, 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”. These elements are all research related in order to find out about products and how people perceive them and the experiences they gain from using them and also interacting with them to help for a better design to be made. To then look at the results and design for fun makes for better and more enjoyable products which can make play an essential focus in product design considerations (i.e. Game Design). It is therefor essential when creating interactive designs or an interaction for someone and must be explored at great detail to get the best possible solution for the design need.

From Polaine we can now look at static graphic composition and how the screen looks. We need to start making things easier and more pleasurable to use and this would involve the interaction of a user with the human eye to determine what they view and how they will then use. This is seen through how people would look at a web page and where they eyes are drawn to first and then what there after. Through this study, you can find out what has been noticed and what type of visual or text has been skipped over. From the results you can therefor create a better static page that will enable more interaction of all parts from the user.

Part 2: Using What You Know: Static composition and visual hierarchy



Mood Board – Johnny Smith

Lecture 3 – The Interactive Design Process

Lecture by Sarah Waterson


Part 1 – Design Process Overview.

The Design Process is a list of steps taken to complete a certain task and allows teams to keep on track and know where they are at and what needs to be done next. There are 6 steps to be be taken in an Interactive Design Process and they are as follows:
  1. Pre-Project – The Pre-Project step will involve various groups of people qualified in different areas brought together to create a project brief or proposal to respond to a design need brought to their attention. It will include the needs, proposal to these needs, budgets, schedules, who is involved and who are the stakeholders, and other realistic sections that a necessary.
  2. Concept and PlanningConcept and planning is the first real development step where the “goals, messages and audience for the project are all explored and decided”. This step is the proof of the concept where all of the main questions are answered concerning most aspects of the project and also includes features lists, design research, specifications and other product requirements.
  3. Designs, Prototypes and SpecificationsThis step includes the first examples and solutions to the design need. At this stage their is a development on how the solution is to be and is done through the creation of examples of solutions through development in drawing, sketching, and sometimes models, all for an end result to form a functional and effective product. These Prototypes and designs should be user tested with the target market in order to find the best possible solution to the need. Functional Specifications will be required on the final chosen solution that is best fitting the criteria for success.
  4. ProductionAt this stage, there are two sections including the Alpha Build and Beta Build. This is the progress of production models being made from a temporary working instance into the final Beta Build product ready for testing.
  5. TestingEverything needs to be properly tested before it is launched and this testing is done on components and quality assurance testing rather than with people. All aspects of the product need to be tested including links and elements in order for all bugs, errors and problems to be fixed which will all need to be correctly labeled in edition to update.
  6. Launch and MaintenanceThe Launch and Maintenance step is ongoing where once the product, site or solution is launched, it will need to be maintained in order for it to be up to date and successful.

Part 2 – User Persona, Artefact Persona and Scenario Planning.

Personas and scenario planning are a tool used in order to determine the users needs which lead the way in how they look and feel at the end of the process.

  • User Personas are “fictional archetypal users” that are generated in order to create a outline of a character to determine them in a situation or scenario which will help to define their needs.
  • A scenario is a narrative that is an attempt to determine the way in which a person will interact with a system and how it is used in an everyday life situation. It reflects upon the persona created in order to create a criteria to drive a project and its objective goals to a user.
  • An Artefact Persona or a Product Persona is applying a persona to a project rather than a user and creating product personality question to outline who would use it, why, the situations the product can be used, etc.


The design process is a very handy step by step guide to take that will inevitably help a designer to keep on track and hopefully more productive as they know what they are having to do next already and keep that in mind when going through the process. I know it is very helpful for me and I know i can refer to this if i get stuck in thinking what I should be doing next. The user and artefact persona, and the scenario planning tools are all very good for designers to consider when designing a product especially one that will involve much interaction by a user. They are very good to undertake in order to be able to understand the users more and ultimately your customers and gain a basis for much of the research needed to be done. From undertaking them, there will surely be a more successful product that arises.

Info/Instructional Design: Examples

Examples of Informational and Instructional Design include Flowcharts, Visual Instructions (LEGO) and

Flowcharts a good, quick and useful way of expressing instructions in a clear, concise and informative manner that is easy to follow and understand.

The Visual Instructions Represented in LEGO building manuals are a very good form of instructions that even kids can understand and assist in building LEGO models and products.


Info/Instructional Design: Definition

Informational/Instructional Design is the use of developing how people learn to create efficiency and effectiveness of presenting and displaying images or information through instructions and learning experiences to satisfy an outcome. It can thus create a better and more meaningful interpretation of the instructions that is greater understood by the viewer for a better, easier and sometimes funner and more entertaining learning experience.


Lecture 2 – Interaction – Interactivity

Lecture by Sarah Waterson


With Interaction Design, there are 5 main areas that assist to the successful development and design of a product or system. These 5 areas include:

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

All these areas are needed when considering designing for interaction and all co-inside with each other as they all work with each other to create interaction (can not have one without the other).

Bill Verplank defines interaction design as “the focus on design for people interacting with the world and getting feedback from the world”. He then explores the train of thought needed when designing for interaction. He wants us to think about the consumers and question how when with a product, what is leading them to act, feel and understand the way they are. This leads to a better understanding of of a user and what they can gain from a product.

Interactivity is one of the key areas that contribute to interactive design and can simply be put as how much a person can work together with one or more products. It is how much control they can have, the choices it can offer them and what they can be influenced by and gain from a product.


Interactivity is a very important aspect that all designers need to consider when designing a product. This is because a lot of focus on Interactivity will help create the success of a product with it ability to help in interaction by enabling a user to learn, be more engaging and greater control leading to more a higher satisfaction in feeling more in control and powerful over a product (rather than the one being controlled).

Interactive Design: Examples

3 Examples of Interactive Design include a GPS, a Touch Screen Remote Control and a Digital Mall Directory.

GPS Systems are a good example for Interactive Design as it is a product built around driving a car and delivering assistance in navigating to your unknown destination. The GPS allows a person to input a destination of many kinds e.g. street name, park, tourist attraction, specific buildings and in return the GPS will relay navigational instructions to be given while driving through visual and oral communication. While Driving a GPS will also communicate other aspects including speed, time and information involving fixed cameras on the road.

A Touch Screen Remote Control is another really good example of interactive design as it allows for a really good interactive control over ones television. A remote control allows for a quick and easy access to manually change a TV’s channel and for a digital remote it gives more customisation for the consumers with some of the products button layout e.g. where buttons should go and also allows for different settings for different people using the remote control.

The Digital Directories that have been introduced over the past years into shopping centers are an amazing product that give quicker results for consumers wanting to find certain stores quickly and allows searching by store name and also by catogry of products sold in the stores (e.g. electronics, beauty, bedding, etc.). There a very easy system to use and allows customers are more exciting approach to finding stores with animations and voice prompts rather than the old way of looking from a list on a piece of paper and matching it to a map.


Interactive Design: Definition

Interactive Design is the the design or creation of something that will harness a relationship to a human being in order to contribute and give assistance to their daily lives. So basically it is the design of a product or service that will interact with a human. It can ultimately though, be between the relationship of “people and people, people and hardware, people and software applications, people and information, people and environments, people and service, and people and systems”.


How to make Toast: Flowchart

How to make toast: Step by Step Guide

  1. Start with a loaf of bread and a toaster.
  2. Plug toaster into a wall socket and switch on.
  3. Open sliced bread packet and remove required number of bread slices from the bag.
  4. Place slices of bread, vertically into each of the toast slots, so that the bread does not become misshapen.
  5. Set the toasting time by turning the numbered dial to 4-6 (medium).
  6. With the bread correctly in each slot and the required setting selected, push the leaver on the side down until it clicks and remains down.
  7. Monitor bread to make sure it does not burn. If burning occurs press the cancel button located next to the temperature gauge.
  8. When toast is ready the leaver and the toast (bread) will protrude from the top of the toaster. If the toast doesn’t rise from the toaster after it has popped, raise the leaver, to manually access your toast.
  9. Remove toast from toaster (WARNING: toast and toaster may be hot).
  10. Prepare and enjoy.