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
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
Top Related