7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

1/24

Create a Rich Internet Application

Informatica Communicatie AcademieHogeschool Arnhem Nijmegen

Frans.Huijgen@han.nl

Structure (Part-02)

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

2/24

Wireframes

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

3/24

These are not good wireframes

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

4/24

Not everybody knows exactly what they do

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

5/24

Dos and Donts

Wireframes focus on:

Navigation

Layout

Content

A Wireframes is not a Graphical Design

Wireframes put the things in a logical order

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

6/24

Support

Dowloading of elements for the creation of Wireframes:

http://developer.yahoo.com/ypatterns/about/stencils/

Look also on: http://www.yes2web.nl/artikelen/#/show-news/2009-11-06/grid-

based-design-voor-het-web/ (for further exploration) http://960.gs/ (grid system)

--> Show an example.

http://developer.yahoo.com/ypatterns/about/stencils/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://960.gs/http://960.gs/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://www.yes2web.nl/artikelen/http://developer.yahoo.com/ypatterns/about/stencils/

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

7/24

Types of Wireframes

Sketches

Quick, experimental

Good for feedback

Content only (lo fi)

Block diagrams

Good for flows

High fidelity wireframes

Detailed wireframes

Comments / Annotations

Describe content & behavior Describe function (for dev)

Understood withoutexplanation

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

8/24

Sketches

Quick, experimental

Good for feedback

Content only (lo fidelity)

Block diagrams

Good for flows

High fidelity wireframes

Detailed wireframes

Comments / Annotations

Describe content & behavior Describe function (for developer)

Understood without explanation

Types of Wireframes

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

9/24

Sketches

Quick, experimental

Good for feedback

Content only (lo fi)

Block diagrams Good for flows

High fidelity wireframes

Detailed wireframes

Comments / Annotations

Describe content & behavior

Describe function (for developer)

Understood without explanation

Types of Wireframes

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

10/24

When do you make Wireframes?

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

11/24

Place in JJG

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

12/24

Target for Wireframing

Communicate solutions for design problems

Communicate fundamental design choices

Get everyone on the same page

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

13/24

Documentation Wireframes

1. Title + Description

2. Page number

3. Diagram of content

4. Comments annotations

Adobe.com Homepage Not logged in P02

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

14/24

Documentation Wireframes

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

15/24

Documentation Wireframes

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

16/24

Documentation of components and elements

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

17/24

Use realistic text examples and NOT

Lorem ipsum dolor sit atem

Text goes here. Text goes here. Text goes here. Textgoes here. Text goes here.

http://www.google.com

http://www.google.comhttp://www.google.com

http://www.google.com

http://www.google.com/http://www.google.com/http://www.google.com/http://www.google.com/http://www.google.com/http://www.google.com/http://www.google.com/http://www.google.com/

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

18/24

Dont bother about visual aspects

Forget color!(Unless of course it is essential to the user experience)

Try and keep to the basics - boxes and arrows

No rounded corners, drop shadows, images, etc

Focus on how the interface works!

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

19/24

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

20/24

Want to knowmore

Designing for Interaction Dan Saffer Chapter 5

Communicating Design Dan Brown

Chapter 10

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

21/24

Flow Diagrams - Purpose

A flow diagram is anvisual representation of thecontrolling of a use-case (as a part of your system).

Ause-caseshowsbehaviourof the system.

Aflow diagram shows the controlling of thisbehaviourby pushing buttons ordecisions how to go from one toanother Wireframe.

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

22/24

Flow Diagrams - Purpose

If we want to control behaviour:

1. We put someting in (data)

2. We take control (push buttons or sliders etc.)

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

23/24

Flow Diagram Facebook vergeten wachtwoord

7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)

24/24

Assignment

Work on Assignment 3

Part 2 (Real Use Case)

Part 3 (Wireframes)

Part 4 (Flow Diagrams)