Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology...

Webinar

December 2012

Presentation by Ulul IlmiComputer Education and Instructional

Technology 100312047

Fatih University

Wireframing

& Prototyping

UX (User Experience) Design

UsereXperience

Design

What is UXD?First of all,

The big picture

UX Design – Defi nition

Four UX Designers in a room, eight different definitions.

Designing anything with enhancement and simplification of technology by evaluating

user’s experience. Aspects of a person’s experience with the

system, product or a service. Aspects of experience: Interface, graphics,

industrial design, physical interaction. UXD describes what's been designed, (the

experience).

During

After

Before

Emot

ion

s Belief

s Perc

eptio

n

s Psyc

hologi

cal

Respo

ns

es

Using a product of UX Design

User’s:

What we see..

Visual Design

Elevator Panel

What we don’t see..

SurfaceSkeleton

Structure

Scope

Strategy

Interface DesignNavigation Design

Visual Design

Interface Design

Interaction DesignInformation Design

Functional SpecsContent

Requirement

User NeedsSite Objectives

90 %

10 %

Behind Elevator Panel

User Technology

Business

UX

User-centered design (UCD)

Student Technology

Education

UX

Student-centered design (UCD)

User-centered design Process Phases

User

Analysis Design

DevelopmentImplementation

Evalu

ati

on

AD

DIE

Student-centered design Process Phases

Student

Analysis Design

DevelopmentImplementation

Evalu

ati

on

AD

DIE

“Design is not just what it looks like and feel like. Design is how it works”

Steve Jobs

How does UXD work?

Well,

Here comes our helpers!Wireframing &

Prototyping

Wireframing

What is Wireframing?

Wireframing – Defi nition

Wireframing a.k.a mockup a.k.a blueprint Visual representation of interface. Instruction & hints for separate teams to

approach interface design in a project. Type of wireframings:

1. Low fidelity (Sketches)2. High fidelity (Developer function details)3. Storyboards (Use of flowchart)

(Low fidelity) (High fidelity) (Storyboard)

Where does wireframes stands?

Where does wireframe stands?

Skeleton

Structure

Interface DesignNavigation DesignInterface Design

Interaction DesignInformation Design

Component and shapes of interface

Connecting shaping flows together

Why Wireframing?

Wireframe – Functions

Faster in gethering assessment needs Improve of communication between

people/groups Design and introduce simplicity in a short

timespan “Wireframing acts as a form of ‘Thinking

device’ for setting and exploration of a given problem space”

Faster in solving problem

“Good design is problem solving”

Jeff Veen

Prototyping

What is Prototyping?

Prototyping – Defi nition

Creating a demo of a new system A method used by designers to acquire

feedback from users about future designs. An early sample or model built to test a

concept or process or to act as a thing to be replicated or learned from.

Prototyping serves to provide specifications for a real, working system rather than a theoretical one.

Wireframing vs Prototyping

Wireframing | Prototyping

• 'How does it look?’(not visually)

• 'What information and features are presented?’

• Lower resolution• Function is

important

• 'How do I interact with this?'

• 'How will it be used?’

• Higher resolution• Visual is

important

Webinar

What is Webinar?

This is Webinar!

Webinar – Defi nition

Web-based seminars or a seminar that’s conducted over the Internet.

A service that allows conferencing events to be shared with remote locations.

New technology

Q&A

Thank You