Guió MultimèdiaMariona Grané. Laboratori de Mitjans Interactius. @CAVUB

PROCÉS DE DISSENY I GUIONITZACIÓ, WEB I INTERACTIUS

finalitat context target client benchmarking

documentació disseny conceptual planing pressupost

DISSENY CONCEPTUAL I BRIEFING

continguts mm interfície gràfica html / css

integració i maquetació testeig

PRODUCCIÓ

disseny informació

ui user interface gui graphic user interface hci interaction

flowcharts wireframes

DISSENY DEL CONTINGUT

disseny formatiu disseny comercial

BDs

DISSENY INTERACTIU

documentació guió complet

proves amb usuaris

gestió

revisió / validació

revisió / validació

gestió

revisió / validació

gestió

revisió / validació

Es una col·lecció de documents:

disseny conceptual

documentació

esquema de navegació

diagrama de fluxe - flowchart

storyboard - wireframe

EL GUIÓ MULTIMÈDIA

Per tal que un guionista i gestor d’un projecte, aconsegueixi un fluxe informatiu amb dissenyadors i desenvolupadors.

FLOWCHARTS

DIAGRAMA DE FLUXE

L’estructuració de la informació interactiva pot tenir un objectiu esquemàtic lligat a la navegació entre continguts o lligat a la programació d’accions.

Parlem de storyline (navegació)

o de diagrames de fluxe (algoritmes).

home

apartat 1 apartat 1 apartat 1

subapart subapart subapart

subapart

subapart subapart

DIAGRAMA DE FLUXE

Els diagrames de fluxe són eines per representar gràficament un algoritme.

Diagrames = Blueprint = Arquitecture Map = Flowcharts

Utilitzen sistemes estàndards de representació d’accions i de relacions acordats.

DIAGRAMA DE FLUXE

Neixen de la representació de processos

DIAGRAMA DE FLUXE

S’utilitzen per mostrar relacions de causa-efecte entre accions i interaccions del sistema amb l’usuari.

Són utilitzats des de la concepció de l’arquitectura de la informació,

des de la programació i

i des del disseny de videojocs o interactivitats complexes com a esquema previ al guió complet.

DIAGRAMA DE FLUXE

Elements bàsics d’un diagrama de fluxe.

ETAPA DE PROCÉS

DECISIÓ

INICI

CONNECTOR

PROCÉS

[ COMENTARI ]

BASE DE DADES

DIAGRAMA DE FLUXE

Eines per crear un diagrama, a part del cervell, alguna cosa per guixar i una superfície on fer-ho:

OMNIGRAFFLE www.omnigroup.com

SMARTDRAW www.smartdraw.com

DIA dia-installer.de

Esquemes bàsics realitzat per alumnes

Podem con s t r u i r elements a mida pel nostre fluxe d’acció

WIREFRAMES

Referència de la pantalla

Què es veurà a la pantalla (=wireframes)

Què s’escoltarà

Quin text hi haurà

Quines zones actives o hotspots hi hauràn

Quines relacions de navegació amb altres pantalles

Quina interacció permetrà amb l’usuari

Observacions i comentaris per al disseny

Observacions i comentaris per a la programació

ESQUEMA CLAU D’UN STORYBOARD

ESTRUCTURA D’UN GUIÓ MM CLASSIC

REF. PANTALLA TITOL O NOM

ESBÓS GRÀFIC

NAVEGACIÓ

informació i noms d’arxius

enllaços interns o externs

INTERACTIVITAT

Notes per a la programació, enllaços o

documents necessars

CONTINGUTS

textos complerts o informació documental

arxius grafics

arxius audiovisuals

arxius interactius

VISUAL

anotacions per als

dissenyadors,

arxius i documentacio

EL GUIÓ MULTIMÈDIA

NO existeix un sol model de guió que sigui adient per a tots els dissenys interactius.

Segons cada cas, el guionista construeix una eina que sigui adient

EXEMPLES DE GUIONS MULTIMEDIA

FDP - Xunta de Galicia

Guías formativas - Bankinter

Activa Multimedia - Plaza&Janés

Karencia- Nou ordre MundialEmaf 2006-07

Cuina Catalana - EMAF 2002

Bombers - Interactiva

Columna Cervical - Inde

veure resultat

obrir guió

Videoconferencia - REAF

Learn off - EMAF 2007

Walk & Wiki

Fuga - EMAF 2001

Melmac- EMAF 2011

Guió per a un videojoc

Diagrama de fluxe de l’acció i interacció+Guió literari

obrir guió

Open ScriptsOpen projects for mobile learningLMI

obrir guió

P a n t a l l a

Lorem ipsum dolor

Plataforma xarxes socials

Web Wireframes

Mobile Wireframes

EINES I RECURSOS PER A LA CREACIÓ DE WIREFRAMES

Eines online, que permeten crear guins a partir de plantilles i que inclouen tot tipus

de materials des de l’esbós, al guió literari, al disseny visual previ.

https://www.jumpchart.com/

http://www.justinmind.com/

http://www.axure.com/

EINES I RECURSOS PER A LA CREACIÓ DE WIREFRAMES

http://www.balsamiq.com

http://iplotz.com

http://www.evolus.vn

http://templatr.cc/

http://www.flairbuilder.com/

http://www.protoshare.com/

EINES I RECURSOS PER A LA CREACIÓ DE WIREFRAMES

Sketch, material gràfic per a crear guions i prototips

EINES I RECURSOS PER A LA CREACIÓ DE WIREFRAMES

Guides, normes i convencions que cal tenir en compte per a la creació d’aplicacions

mòbils i de sistema o bé per a webs d’entorns concrets

iOS Human Interface Guidelines

https://developer.apple.com/library/ios

Android Interface Guidelines

http://developer.android.com/guide/practices/ui_guidelines/index.html

iPhone GUI PSD 3.0

http://www.teehanlax.com/blog/iphone-gui-psd-30/

iOS Design Stencils

http://speckyboy.com/2011/04/26/gui-stencils-wireframing-kits-and-sketching-

templates-for-ipad-app-designers/

iPad GUI Design Template

http://www.appdesignvault.com/ipad-3-retina

SketchyPad!

http://sketchyapp.com/

EINES I RECURSOS PER A LA CREACIÓ DE WIREFRAMES

Mariona Grané. Laboratori de Mitjans Interactius www.lmi.ub.edu