3 - Mockups

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 1/27

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 2/27

Compiled with the assistance of the Tiger University Program of the Estonian

Information Technology Foundation

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 3/27

MockupsIlja Šmorgun

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 4/27

What is a Mockup?

•A model or replica of a machine or

structure, used for instructional or

experimental purposes

•An arrangement of text and pictures to be

printed

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 5/27

A full-size model of a design or

device, used for teaching,demonstration, design evaluation,

promotion, and other purposes

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 6/27

A pixel-perfect

representation of theapplication’s user interface

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 7/27

Colors, graphics, UI

elements and theirdimensions are set

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 8/27

The foundation for

developing a workingprototype

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 9/27

Example

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 10/27

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 11/27

Tools for CreatingMockups

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 12/27

Adobe Photoshop

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 13/27

iPhone 4 GUI PSD

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 14/27

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 15/27

iPad GUI PSD

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 16/27

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 17/27

Android GUI PSD

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 18/27

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 19/27

OmniGraffle

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 20/27

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 21/27

http://graffletopia.com/categories/iphone

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 22/27

PowerPoint

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 23/27

MockApp

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 24/27

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 25/27

Defining theInteractions

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 26/27

State Transition Diagram

•Give an abstract description of the

behavior of a system

• Behavior is analyzed and represented in

series of events, that could occur in one or

more possible states

8/3/2019 3 - Mockups

http://slidepdf.com/reader/full/3-mockups 27/27

Start