Structure (Part-02)

Create a Rich Internet Application

Informatica Communicatie Academie Hogeschool Arnhem Nijmegen Frans.Huijgen@han.nl

Wireframes

These are not good wireframes

Not everybody knows exactly what they do

Dos and Donts

A Wireframes is not a Graphical Design Wireframes focus on:

Navigation Layout Content

Wireframes put the things in a logical order

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/gridbased-design-voor-het-web/ (for further exploration) http://960.gs/ (grid system)

--> Show an example.

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 without explanation

Types of Wireframes
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

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

When do you make Wireframes?

Place in JJG

Target for Wireframing

Communicate solutions for design problems

Communicate fundamental design choices

Get everyone on the same page

Documentation Wireframes

1. 2. 3. 4.

Title + Description Page number Diagram of content Comments annotations

Adobe.com Homepage Not logged in

P02

Documentation Wireframes

Documentation Wireframes

Documentation of components and elements

Use realistic text examples and NOT

Lorem ipsum dolor sit atem

Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
http://www.google.com http://www.google.com http://www.google.com http://www.google.com

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!

Usefull software for producing Wireframes

Visio OmniGraffle InDesign Illustrator Fireworks Powerpoint And many others..

Software comparison: http://www.uxmatters.com/MT/archives/000161.php http://developer.yahoo.com/ypatterns/about/stencils/

Want to know more

Designing for Interaction Dan Saffer Chapter 5 Communicating Design Dan Brown Chapter 10

Flow Diagrams - Purpose

A flow diagram is an visual representation of the controlling of a use-case (as a part of your system). A use-case shows behaviour of the system. A flow diagram shows the controlling of this behaviour by pushing buttons or decisions how to go from one to another Wireframe.

Flow Diagrams - Purpose If we want to control behaviour: 1. We put someting in (data) 2. We take control (push buttons or sliders etc.)

Flow Diagram Facebook vergeten wachtwoord

Assignment

Work on Assignment 3 Part 2 (Real Use Case) Part 3 (Wireframes) Part 4 (Flow Diagrams)