School of Information Systems


Finding suitable representations

Envisionment is standard to effective human-centred design, to enable designers to compare from other people’s perspectives and to explore design concepts and ideas with others. Different representations of design ideas are useful at different stages for different people.

Basic techniques

Sketches and snapshots

  • The art of sketching is something that all designers should practise. Ideas and thoughts can be quickly visualized – either to yourself, or to others – and explored.Sketches and snapshots


  • Storyboarding is a technique taken from filmmaking – using a simple cartoon-like structure, key moments from the interactive experience are represented.
  • The advantage of storyboarding is that it allows you to get a feel for the ‘flow’ of the experience.

Three main types of storyboarding are commonly found in interactive media design:

  • Traditional storyboarding.
  • Scored Storyboards
  • Text-only Storyboards

Mood boards

A mood board is a type of collage consisting of images, text, and samples of objects in a composition. It can be based upon a set topic or can be any material chosen at random.

Navigation maps

Navigation maps focus on how people move through the site or application. The aim is to focus on how people will experience the site. Each page in the site, or location in the application, is represented with a box or heading and every page that can be accessed from that page should flow from it.


They used to be concerned principally with website design, but with the proliferation of small-scale apps for handheld and tablet devices, wireframing has become a mainstream technique. wireframes focus on the structure of particular types of pages. Use the two together and you have the basics of an app or website design. Wireframes work because they focus on the general elements of a design without worrying about the final detail.


Prototypes are used extensively in most design and construction domains. Prototypes may be used to demonstrate a concept (e.g. a prototype car) in early design, to test details of that concept at a later stage and sometimes as a specification for the final product. 4 types of prototypes:

  1. Hi-fi Prototypes: high-fidelity prototypes are highly functional and interactive. They are very close to the final product, with most of the necessary design assets and components developed and integrated. Hi-fi prototypes are often used in the later stages to test usability and identify issues in the workflow.
  2. Lo-fi Prototypes: Low-fidelity prototypes, for example, are simple and low-tech concepts. All you need to get started is a pen and paper.
  3. Paper Prototypes: It is throwaway prototyping and involves creating rough, even hand-sketched, drawings of an interface to use as prototypes, or models, of a design.
  4. Video Prototypes: Video Prototyping is a tool Interaction Designers can use to tell a story about a design. It allows for the showing of an entire experience through a narrative.

Different approaches to functionality in prototypes

  • A horizontal prototype aims to go across the whole system, but deals only with top-level functions, so much of the detail is omitted.
  • a vertical prototype implements the full range of features, from top to bottom, but is applied to only a small number of functions of the overall system.

Envisionment in practice

Prototypes and participatory design

Lo-fi prototypes are an essential part of participatory design because people cannot always understand formal models, but they can explore and evaluate ideas through engaging with prototyped systems. People can also be directly involved in prototype design.

Trade-offs in prototyping

As with so many aspects of design, the designer has to consider the trade-offs in terms of time, resources, the aim of the evaluation, the stage of the project and so on.

Prototyping tools

A good prototyping tool should:

  • Allow easy, rapid modification of interface details or functionality
  • For designers who are not programmers, allow direct manipulation of prototype components
  • For incremental and evolutionary prototypes, facilitate reuse of code
  • Not constrain the designer to default styles for interface objects.

Presenting designs

Presenting design ideas clearly and appropriately is a key skill of the designer. The design process is a long one, with many different stages, there are many different people involved and there are many different reasons for giving a presentation.,+to+enable+designers+to+see+things+from+other+people%E2%80%99s+perspectives+and+to+explore+design+concepts+and+ideas+with+others.+Different+representations+of+design+ideas+are+useful+at+different+stages+for+different+people&source=bl&ots=v-7hO8jycJ&sig=ACfU3U1j-RGJpvqsBycxffJf8EQG2cOAXg&hl=id&sa=X&ved=2ahUKEwjooJ2D2aPoAhUYfX0KHSa8CdQQ6AEwAHoECAoQAQ#v=onepage&q=Envisionment%20is%20fundamental%20to%20effective%20human-centred%20design%2C%20to%20enable%20designers%20to%20see%20things%20from%20other%20people%E2%80%99s%20perspectives%20and%20to%20explore%20design%20concepts%20and%20ideas%20with%20others.%20Different%20representations%20of%20design%20ideas%20are%20useful%20at%20different%20stages%20for%20different%20people&f=false

Lucky Rolando