Compiled with the assistance of the Tiger University Program of the Estonian Information Technology Foundation

likooli logo

PANTONE 1807 PANTONE Black

ess

Creating Design Objects

Ilya Shmorgun,Valeria Gasik, David Lamas

Topics
Prototyping System maps Low delity prototypes Medium delity prototypes High delity prototypes Cost of transitioning between interaction
design stages

Stages of Interaction Design

Research

Design

Develop

Bake

Promote

Research

Initial Concept

Design

System Map

Sketch

Wireframe

Mockup

Develop

Alpha

Beta

Product

Bake - Promote

Product

Prototyping

What is a Prototype?
An initial model of something, from which
other forms are developed or copied concept or process

An early sample or model built to test a An object to be replicated or learned from

State Transition Diagrams

State Transition Diagrams

Give an abstract description of the
behavior of a system

Behavior is analyzed and represented in Help dene the structure of a systems

interface

series of events, that could occur in one or more possible states

System Maps

What is a System Map?

A list of views in web site or an
application design

Is used as a planning tool for interaction Is organized in a hierarchical fashion

Example

CAMERA VIEW

CURRENT LECTURE LIST

LECTURE DETAILS

PREVIOUS LECTURE LIST

NEXT DAY LECTURE LIST

Low Fidelity Prototypes

Sketch
A rough or unnished drawing or painting Often created to assist in making a more
nished picture

Things to Remember
A sketch is disposable Draw as many variations as possible Dont go into too much detail

Example

Dening the Interactions

Tap the Back button

Tap the Camera button Start

Tap the lecture name

Tap the Scan button

Medium Fidelity Prototypes

Wireframe
A visual guide that represents the skeletal
framework of a website or an application graphics

Usually lacks typographic style, color, or The main focus lies in functionality,
behavior, and priority of content

Example

4:20PM

4:20PM Done Back

mTLU

mTLU

Done

IFI7038 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

16:15 - 19:45

21. sajandi ksitlusi informatsioonist ja th... Lorem ipsum Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Lorem ipsum Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus.

Nothing else today

Thu

Fri

Sat

Dening the Interactions

4:20PM

4:20PM

4:20PM Done Back

mTLU

mTLU

Done

16:15 - 19:45 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

Tap the Back button

IFI7038
21. sajandi ksitlusi informatsioonist ja th... Lorem ipsum Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Lorem ipsum Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus.

Nothing else today

Tap the lecture name

Start

Tap the Camera button

Thu

Fri

Sat

Tap the Done button

4:20PM 4:20PM Done

mTLU

mTLU

Done

16:15 - 19:45 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

16:15 - 19:45 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

Tap the Fri button

No lectures today

16:15 - 19:45 IFI7038 21. sajandi ksitlusi inf...

Teng Jaan

Nothing else today Thu Fri Sat Thu Fri Sat

Tap the Sat button

High Fidelity Prototypes

Mockup
An arrangement of text and pictures to be
printed

A pixel-perfect representation of an systems

user interface

Colors, graphics, UI elements and their

dimensions are set prototype

The foundation for developing a code-based

Example

Dening the Interactions

Tap the Back button

Tap the lecture name Start Tap the Camera button

Tap the Previous tab Tap the Done button Tap the Fri button

Tap the Sat button

Cost of Transitioning Between Interaction Design Stages

Initial Concept

List of views

Sketch

Wireframe

Mockup

Alpha

Beta

Product

Concept Map

State Transition Diagram

State Transition Diagram

State Transition Diagram

State Transition Diagram

System Map

Low Fidelity Prototype

Medium Fidelity Prototype

High Fidelity Prototype

CodeBased Prototype

Production Code

Topics Covered
Prototyping System maps Low delity prototypes Medium delity prototypes High delity prototypes Cost of transitioning between interaction
design stages