Guio
description
Transcript of Guio
![Page 1: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/1.jpg)
Guió MultimèdiaMariona Grané. Laboratori de Mitjans Interactius. @CAVUB
![Page 2: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/2.jpg)
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ó
![Page 3: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/3.jpg)
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.
![Page 4: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/4.jpg)
FLOWCHARTS
![Page 5: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/5.jpg)
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
![Page 6: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/6.jpg)
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.
![Page 7: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/7.jpg)
DIAGRAMA DE FLUXE
Neixen de la representació de processos
![Page 8: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/8.jpg)
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.
![Page 9: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/9.jpg)
DIAGRAMA DE FLUXE
Elements bàsics d’un diagrama de fluxe.
ETAPA DE PROCÉS
DECISIÓ
INICI
CONNECTOR
PROCÉS
[ COMENTARI ]
BASE DE DADES
![Page 10: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/10.jpg)
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
![Page 11: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/11.jpg)
Esquemes bàsics realitzat per alumnes
![Page 12: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/12.jpg)
![Page 13: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/13.jpg)
Podem con s t r u i r elements a mida pel nostre fluxe d’acció
![Page 14: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/14.jpg)
WIREFRAMES
![Page 15: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/15.jpg)
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
![Page 16: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/16.jpg)
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
![Page 17: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/17.jpg)
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
![Page 18: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/18.jpg)
EXEMPLES DE GUIONS MULTIMEDIA
![Page 19: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/19.jpg)
FDP - Xunta de Galicia
![Page 20: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/20.jpg)
![Page 21: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/21.jpg)
![Page 22: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/22.jpg)
Guías formativas - Bankinter
![Page 23: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/23.jpg)
![Page 24: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/24.jpg)
Activa Multimedia - Plaza&Janés
![Page 25: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/25.jpg)
![Page 26: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/26.jpg)
![Page 27: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/27.jpg)
![Page 28: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/28.jpg)
![Page 29: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/29.jpg)
Karencia- Nou ordre MundialEmaf 2006-07
![Page 30: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/30.jpg)
![Page 31: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/31.jpg)
![Page 32: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/32.jpg)
![Page 33: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/33.jpg)
Cuina Catalana - EMAF 2002
![Page 34: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/34.jpg)
![Page 35: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/35.jpg)
![Page 36: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/36.jpg)
![Page 37: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/37.jpg)
![Page 38: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/38.jpg)
Bombers - Interactiva
![Page 39: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/39.jpg)
![Page 40: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/40.jpg)
![Page 41: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/41.jpg)
![Page 42: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/42.jpg)
Columna Cervical - Inde
![Page 43: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/43.jpg)
![Page 45: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/45.jpg)
![Page 46: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/46.jpg)
Videoconferencia - REAF
![Page 47: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/47.jpg)
![Page 48: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/48.jpg)
![Page 49: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/49.jpg)
Learn off - EMAF 2007
![Page 50: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/50.jpg)
![Page 51: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/51.jpg)
![Page 52: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/52.jpg)
![Page 53: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/53.jpg)
Walk & Wiki
![Page 54: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/54.jpg)
![Page 55: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/55.jpg)
![Page 56: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/56.jpg)
![Page 57: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/57.jpg)
Fuga - EMAF 2001
![Page 58: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/58.jpg)
![Page 59: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/59.jpg)
Melmac- EMAF 2011
![Page 60: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/60.jpg)
Guió per a un videojoc
Diagrama de fluxe de l’acció i interacció+Guió literari
![Page 61: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/61.jpg)
![Page 62: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/62.jpg)
![Page 63: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/63.jpg)
![Page 64: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/64.jpg)
obrir guió
![Page 65: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/65.jpg)
Open ScriptsOpen projects for mobile learningLMI
![Page 66: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/66.jpg)
![Page 67: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/67.jpg)
obrir guió
P a n t a l l a
Lorem ipsum dolor
![Page 68: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/68.jpg)
Plataforma xarxes socials
![Page 69: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/69.jpg)
![Page 70: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/70.jpg)
Web Wireframes
![Page 71: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/71.jpg)
![Page 72: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/72.jpg)
![Page 73: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/73.jpg)
![Page 74: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/74.jpg)
![Page 75: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/75.jpg)
![Page 76: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/76.jpg)
![Page 77: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/77.jpg)
![Page 78: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/78.jpg)
![Page 79: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/79.jpg)
Mobile Wireframes
![Page 80: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/80.jpg)
![Page 81: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/81.jpg)
![Page 82: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/82.jpg)
![Page 83: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/83.jpg)
![Page 84: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/84.jpg)
![Page 85: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/85.jpg)
![Page 86: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/86.jpg)
![Page 87: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/87.jpg)
![Page 88: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/88.jpg)
![Page 89: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/89.jpg)
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/
![Page 90: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/90.jpg)
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/
![Page 91: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/91.jpg)
EINES I RECURSOS PER A LA CREACIÓ DE WIREFRAMES
Sketch, material gràfic per a crear guions i prototips
![Page 92: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/92.jpg)
![Page 93: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/93.jpg)
![Page 94: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/94.jpg)
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
![Page 95: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/95.jpg)
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
![Page 96: Guio](https://reader033.fdocument.pub/reader033/viewer/2022050818/559080591a28abc5518b472a/html5/thumbnails/96.jpg)
Mariona Grané. Laboratori de Mitjans Interactius www.lmi.ub.edu