Prototipat gràfic responsiu

Grau en Multimèdia Curs 2013/14 – 2n
Semestre
Disseny d'Interfícies
Multimèdia
PAC3 – Prototipat Gràfc Responsiu
Autor
Jordi Zango Novell
jzango@uoc.edu
Data de lliurament
05/05/2014

Índex
1. Objectiu.............................................................................................................4
2. Guia d'estil........................................................................................................5
2.1.L'empresa...................................................................................................5
2.2.Justificació..................................................................................................6
2.3.El logotip.....................................................................................................6
2.3.1.Ús correcte........................................................................................6
2.3.2.Ús incorrecte......................................................................................6
2.3.3.Trets estables i variables...................................................................6
2.4.Carta de colors...........................................................................................7
2.4.1.Estudi previ........................................................................................7
2.4.2.Colors emprats..................................................................................7
2.5.Tipografia....................................................................................................8
2.5.1.Font tipogràfica..................................................................................8
2.5.2.Mides de la font.................................................................................8
2.6.Retícula.......................................................................................................9
2.6.1.Versió d'escriptori..............................................................................9
2.6.2.Versió per a dispositius mòbils........................................................10
2.7.Imagteria...................................................................................................11
2.7.1.Tipus d'imatges................................................................................11
2.7.2.Mida de les imatges.........................................................................11
2.8.Elements per a la interfície web...............................................................12
2.8.1.Menú principal.................................................................................12
2.8.2.Slideshare........................................................................................12
2.8.3.Fil d'Ariadna.....................................................................................12
2.8.4.Enllaços...........................................................................................12
2.8.5.Peu de pàgina.................................................................................12
2.8.6.Controls i elements d'entrada..........................................................12
3. Prototips gràfics..............................................................................................13
3.1.Pàgina d'inici.............................................................................................13
3.2.Pàgina de destí.........................................................................................14
3.3.Pàgina d'itinerari.......................................................................................15
Disseny d'Interfícies Multimèdia - PAC3
per Jordi Zango Novell (jzango@uoc.edu) 2

3.4.Pàgina de cerca........................................................................................16
3.5.Pàgina de compra....................................................................................17
4. Conclusió........................................................................................................18
5. Fonts...............................................................................................................19
6. Imatges i recursos...........................................................................................20
7. Llicència..........................................................................................................20

1. Objectiu
1. Objectiu
Realitzar el prototip gràfic del web per a escriptori i smartphone a partir dels
wireframes per a la pàgina de l'empresa Avial Viajes, definits en la PAC
anterior.
Aquest prototipatge haurà d'anar acompanyat de la corresponent guia d'estil.

2. Guia d'estil
2. Guia d'estil
2.1. L'empresa
Avial Viajes és una agència de viatges que ofereix destins a tot arreu del món.
La imatge que aquesta empresa vol transmetre és la d'una agència que ofereix
productes internacionals orientats al viatge d'esbarjo.
S'ha volgut donar importància a la diversitat, emprant diferents colors alguns
dels quals, a més, van canviat com en el cas del fons de pantalla.
Com a exemple, el text publicitari que acompanya una imatge de Nova Zelanda
(en la portada de la seva pàgina web) i el tipus d'imatges emprades en la
capçalera.

2. Guia d'estil
2.2. Justifcació
S'aconsella al client modificar el logotip pel que fa a
la tipografia emprada i la seva distribució.
L'objectiu és aconseguir una imatge de marca una
mica més moderna.
2.3. El logotip
Aquest és el nou imagotip, basat en
l'antic logotip.
2.3.1. Ús correcte
L'àrea de protecció es definirà al
voltant de tot l'imagotip, preservant un
espai com a mínim igual al doble de
l'espai existent entre la figura i la
primera lletra del nom.
2.3.2. Ús incorrecte
Es farà ús del nou imagotip evitant els
casos següents:
• Separar les paraules entre elles
o aquestes de la figura més del
que s'ha especificat.
• Canviar el color de la figura.
• No fer la diferència de negretes
i regulars en les lletres
emprades.
• Canviar la disposició de la
forma i/o el text.
• Emprar una font diferent que la
que es mostra (Roboto, veure
apartat de la tipogarfia ).
• Fer una distribució vertical.
2.3.3. Trets estables i variables
La forma i el color de la figura, així com la tipografia emprada són trets
estables. Com a trets variables, es pot canviar la mida global del conjunt o
emprar lletres de color blanc en cas de treballar sobre un fons fosc.

2. Guia d'estil
2.4. Carta de colors
2.4.1. Estudi previ
Prenent com a punt de partida el color groc de la figura en el logotip original,
s'ha fet un estudi de color per a buscar el suplementari, el complementari i el
suplementari del complementari i definir així una tètrada de colors a partir de la
que es buscaran altres dos colors (més els possibles blancs i grisos).
Un cop trobats els colors inicials, s'han anat fent variacions, buscant colors
relativament vius però que no fossin excessivament saturats, fins arribar a la
carta de colors que es mostra en el proper apartat.
2.4.2. Colors emprats

2. Guia d'estil
2.5. Tipografa
Encara que en un disseny responsiu és més adequat parlar de proporcions
(em, %) en lloc de mides definides (píxels o punts) a continuació es mostren
quines haurien de ser les proporcions entre les diferents mides de text, tant en
la versió d'escriptori com en la versió per a dispositiu mòbil.
2.5.1. Font tipogràfca
S'ha optat per a no barrejar fonts diferents i emprar-ne una de sola en diferents
formats. La font utilitzada ha estat la Roboto
(https://www.google.com/fonts/specimen/Roboto) , amb llicència Apache versió
2.0 (http://www.apache.org/licenses/).
Roboto regular: Roboto bold:
2.5.2. Mides de la font
Versió escriptori: Versió dispositiu mòbil:
Títol gran
(36 píxels, negreta)
Subtítol
Text normal
(18 píxels)
Text petit
(14 píxels)
Títol gran
Subtítol
Text normal
(14 píxels)
Text petit
(12 píxels)
Aquestes són només mides orientatives, per a determinar les proporcions.

2. Guia d'estil
2.6. Retícula
2.6.1. Versió d'escriptori
Per a facilitar el disseny responsiu, s'ha definit una retícula de 960 píxels
perquè, encara que la majoria dels equips d'escriptori ja treballen a resolucions
majors, amb 960 píxels ens assegurem que no hi hagi problemes i obtenim
força versatilitat ja que és una mida adequada fins i tot per a tablets en format
horitzontal.
La retícula de 960 píxels està dividida en 12 columnes de 80 píxels (60 per a
contingut més 10 a cada banda per al farcit). S'ha optat per la versió de 12
subcolumnes en lloc d'una de 16 perquè el número 12 ofereix un major nombre
de combinacions possibles.
Per al disseny actual s'ha optat per agrupar 4 subcolumnes de 80 píxels per
així obtenir un format de 3 columnes de 320 píxels (300 per al contingut i 10 a
cada banda per al farcit) que, al coincidir amb el format de pantalla de 320
píxels demanat per als dispositius mòbils, facilitarà el redisseny per a aquests
dispositius més petits.

2. Guia d'estil
2.6.2. Versió per a dispositius mòbils
Tal i com s'ha explicat en l'apartat anterior, la retícula emprada per a aquests
dispositius és de 320 píxels (300 per al contingut i 10 a cada banda per al
farciment).
D'aquesta manera, a més de simplificar els continguts, només ha calgut
adaptar els que ja es mostraven en les diferents columnes de la versió
d'escriptori.

2. Guia d'estil
2.7. Imagteria
2.7.1. Tipus d'imatges
Les imatges a emprar han de ser de bona definició i acolorides. Han d'evocar
en l'usuari conceptes com aquests: paisatges llunyans, diversió, relax, natura,
aventura, esbarjo, cultures diferents.
2.7.2. Mida de les imatges
• Slideshare d'escriptori: 940 x 360 px
• Fons de pantalla per a dispositiu mòbil: 300 x 430 px
• Descripció de viatges i hotels en les pàgines d'inici i destí:
• Escriptori: 260 x 200 px
• Dispositiu mòbil: 260 x 200 px
• Descripció de viatges en la cerca:
• Mapa d'itinerari:

2. Guia d'estil
2.8. Elements per a la interfície web
2.8.1. Menú principal
2.8.2. Slideshare
2.8.3. Fil d'Ariadna
2.8.4. Enllaços
2.8.5. Peu de pàgina
2.8.6. Controls i elements d'entrada

3. Prototips gràfics
3. Prototips gràfcs
3.1. Pàgina d'inici

3.2. Pàgina de destí

3.3. Pàgina d'itinerari

3.4. Pàgina de cerca

3.5. Pàgina de compra

4. Conclusió
4. Conclusió
Respecte a la guia d'estil, dir que una part del seu contingut l'he fet abans del
prototipus d'alta fidelitat i una altra m'ha anat millor fer-la després o mentre
anava avançant en el disseny.
Per tant, més que col·locar-la abans o després del prototip, ha estat un
desenvolupament conjunt d'ambdues parts.
Entenc que, a més d'una ajuda a l'hora de plantejar el disseny , l'objectiu final i
el més important de la guia d'estil és donar unes directrius clares i entenedores
per a començar la tasca d'implementació de la web.
Pel que fa a les eines emprades, atès que mai fins ara havia fet un prototipus
d'alta definició, he provat diferents opcions abans d'afrontar aquesta PAC. He
mirat quines podien ser les eines amb què fer el prototipatge i que s'adaptessin
més als meus gustos. De entre totes les provades, van quedar com a finalistes
el Keynote, el Photshop i l'Illustrator.
Finalment, vaig decidir fer-ho amb Illustrator perquè em va semblar que podia
treballar de forma més acurada les posicions i les dimensions dels diferents
elements.
Com a conclusió final, dir que aquesta ha estat una molt bona experiència per a
saber com plantejar el disseny d'algunes pàgines web que estic començant a
preparar, algunes d'elles per a projectes personals.

5. Fonts
5. Fonts
Android. Design. [en línia]. http://developer.android.com/design/index.html
[data de consulta: 24/04/2014]
Android Patterns. [en línia]. http://www.androidpatterns.com/ [data de
consulta: 24/04/2014]
Avial Viajes. [en línia]. http://www.avial.es/ [data de consulta: 25/04/2014]
BBC. GEL Web Styleguide. [en línia]. http://www.bbc.co.uk/gel [data de
consulta: 25/04/2014]
Diseño Web Responsivo. [en línia]. http://xn--diseowebresponsivo-
q0b.com.ar/ [data de consulta: 24/04/2014]
Gomis, Miquel. ¿Cómo diseñar utilizando la retícula de 12/16 columnas 960
para web? [en línia]. http://www.miquelgomis.es/como-disenar-utilizando-la-
reticula-de-1216-columnas-960-para-web/ [data de consulta: 27/04/2014]
Hayes, Ben. Adobe Illustrator Responsive Web Design Template. [en línia].
http://www.benhayes.com/2012/05/adobe-illustrator-responsive-web-design-
template/ [data de consulta: 25/04/2014]
Lake, Chris. 18 Wireframing Tools and Resources for Responsive Design. [en
línia]. https://econsultancy.com/blog/62700-18-practical-responsive-design-
tools-and-resources-for-wireframing#i.4167th1edcf3sq [data de consulta:
25/04/2014]
Martínez, Daniel. Prototipando para Responsive Web Design. [en línia].
http://www.redbility.com/blog/2013/05/16/prototipando-para-responsive-web-
design/ [data de consulta: 27/04/2014]
Media Queries. [en línia]. http://mediaqueri.es/ [data de consulta: 24/04/2014]
Microsoft Developer Network. Design Guidelines. [en línia].
http://msdn.microsoft.com/en-us/library/bb158602.aspx [data de consulta:
24/04/2014]
Monjo Palau, Tona. (2011). Disseny. Barcelona: FUOC
Monjo Palau, Tona. (2011). Gèneres. Barcelona: FUOC
Smash Magazine. Design Process In The Responsive Age. [en línia].
http://www.smashingmagazine.com/2012/05/30/design-process-responsive-
age/ [data de consulta: 24/04/2014]

5. Fonts
Smash Magazine. Designing Style Guidelines For Brands And Webistes. [en
línia]. http://www.smashingmagazine.com/2010/07/21/designing-style-
guidelines-for-brands-and-websites/ [data de consulta: 25/04/2014]
This Is Responsive. [en línia]. http://bradfrost.github.io/this-is-
responsive/index.html [data de consulta: 24/04/2014]
Tipografía Digital. [en línia]. http://tipografiadigital.net/ [data de consulta:
27/04/2014]
UOC. Bloc de Disseny d'interfícies Multimèdia. Disseny. [en línia].
http://multimedia.uoc.edu/blogs/dim/disseny/ [data de consulta: 24/04/2014]
UOC. Bloc de Disseny d'interfícies Multimèdia. Dispositius. [en línia].
http://multimedia.uoc.edu/blogs/dim/dispositius/ [data de consulta: 24/04/2014]
6. Imatges i recursos
Free Pik: http://www.freepik.com/
Interactive Mania: http://www.defaulticon.com/
Metrize Icons: http://www.alessioatzeni.com/metrize-icons/
Newman, Giles (Vector Wireframe Kit):
https://www.behance.net/gallery/Vector-Wireframe-Kit-Symbol-
Library/10083603
Webalys GUI Design Framework: http://www.webalys.com/
La d'imatges mostrades en aquest treball, que no hagin estat creades per
l'autor del mateix, són propietat exclusiva dels seus respectius autors i s'han
reproduït acollint-se al dret de citació o ressenya (art. 32 LPI) i estan excloses
de les llicències per defecte d'aquests materials.
7. Llicència
Aquest treball és obra de Jordi Zango Novell, amb llicència Creative Commons
Atribució-NoComercial-CompartirIgual BY-NC-SA 3.0 Unported.

Prototipat gràfic responsiu

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to Prototipat gràfic responsiu

Similar to Prototipat gràfic responsiu (20)

More from Jordi Zango Novell

More from Jordi Zango Novell (7)

Prototipat gràfic responsiu