Upload
chaib-el-kouri
View
218
Download
0
Embed Size (px)
Citation preview
7/31/2019 CRIA Les3 Structure Wireframes (Deel 02)
1/24
Create a Rich Internet Application
Informatica Communicatie AcademieHogeschool Arnhem Nijmegen
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)