Prototipat gràfic responsiu

20
Grau en Multimèdia Curs 2013/14 – 2 n Semestre Disseny d'Interfícies Multimèdia PAC3 – Prototipat Gràfc Responsiu Autor Jordi Zango Novell [email protected] Data de lliurament 05/05/2014

Transcript of Prototipat gràfic responsiu

Page 1: Prototipat gràfic responsiu

Grau en Multimèdia Curs 2013/14 – 2n Semestre

Disseny d'InterfíciesMultimèdiaPAC3 – Prototipat Gràfc Responsiu

Autor

Jordi Zango [email protected]

Data de lliurament

05/05/2014

Page 2: Prototipat gràfic responsiu

Í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 - PAC3per Jordi Zango Novell ([email protected]) 2

Page 3: Prototipat gràfic responsiu

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

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 3

Page 4: Prototipat gràfic responsiu

1. Objectiu

1. ObjectiuRealitzar el prototip gràfic del web per a escriptori i smartphone a partir delswireframes per a la pàgina de l'empresa Avial Viajes, definits en la PACanterior.

Aquest prototipatge haurà d'anar acompanyat de la corresponent guia d'estil.

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 4

Page 5: Prototipat gràfic responsiu

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 ofereixproductes internacionals orientats al viatge d'esbarjo.

S'ha volgut donar importància a la diversitat, emprant diferents colors algunsdels 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 lacapçalera.

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 5

Page 6: Prototipat gràfic responsiu

2. Guia d'estil

2.2. Justifcació

S'aconsella al client modificar el logotip pel que fa ala tipografia emprada i la seva distribució.

L'objectiu és aconseguir una imatge de marca unamica més moderna.

2.3. El logotip

Aquest és el nou imagotip, basat enl'antic logotip.

2.3.1. Ús correcte

L'àrea de protecció es definirà alvoltant de tot l'imagotip, preservant unespai com a mínim igual al doble del'espai existent entre la figura i laprimera lletra del nom.

2.3.2. Ús incorrecte

Es farà ús del nou imagotip evitant elscasos següents:

• Separar les paraules entre elleso 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 tretsestables. Com a trets variables, es pot canviar la mida global del conjunt oemprar lletres de color blanc en cas de treballar sobre un fons fosc.

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 6

Page 7: Prototipat gràfic responsiu

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 elsuplementari del complementari i definir així una tètrada de colors a partir de laque es buscaran altres dos colors (més els possibles blancs i grisos).

Un cop trobats els colors inicials, s'han anat fent variacions, buscant colorsrelativament vius però que no fossin excessivament saturats, fins arribar a lacarta de colors que es mostra en el proper apartat.

2.4.2. Colors emprats

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 7

Page 8: Prototipat gràfic responsiu

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 mostrenquines haurien de ser les proporcions entre les diferents mides de text, tant enla 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(24 píxels, negreta)

Text normal(18 píxels)

Text petit(14 píxels)

Títol gran(24 píxels, negreta)

Subtítol(18 píxels, negreta)

Text normal(14 píxels)

Text petit(12 píxels)

Aquestes són només mides orientatives, per a determinar les proporcions.

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 8

Page 9: Prototipat gràfic responsiu

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íxelsperquè, encara que la majoria dels equips d'escriptori ja treballen a resolucionsmajors, amb 960 píxels ens assegurem que no hi hagi problemes i obtenimforça versatilitat ja que és una mida adequada fins i tot per a tablets en formathoritzontal.

La retícula de 960 píxels està dividida en 12 columnes de 80 píxels (60 per acontingut més 10 a cada banda per al farcit). S'ha optat per la versió de 12subcolumnes en lloc d'una de 16 perquè el número 12 ofereix un major nombrede combinacions possibles.

Per al disseny actual s'ha optat per agrupar 4 subcolumnes de 80 píxels peraixí obtenir un format de 3 columnes de 320 píxels (300 per al contingut i 10 acada banda per al farcit) que, al coincidir amb el format de pantalla de 320píxels demanat per als dispositius mòbils, facilitarà el redisseny per a aquestsdispositius més petits.

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 9

Page 10: Prototipat gràfic responsiu

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 aquestsdispositius és de 320 píxels (300 per al contingut i 10 a cada banda per alfarciment).

D'aquesta manera, a més de simplificar els continguts, només ha calgutadaptar els que ja es mostraven en les diferents columnes de la versiód'escriptori.

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 10

Page 11: Prototipat gràfic responsiu

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'evocaren 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:

• Escriptori: 300 x 240 px

• Dispositiu mòbil: 300 x 240 px

• Mapa d'itinerari:

• Escriptori: 620 x 480 px

• Dispositiu mòbil: 300 x 430 px

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 11

Page 12: Prototipat gràfic responsiu

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

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 12

Page 13: Prototipat gràfic responsiu

3. Prototips gràfics

3. Prototips gràfcs

3.1. Pàgina d'inici

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 13

Page 14: Prototipat gràfic responsiu

3. Prototips gràfics

3.2. Pàgina de destí

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 14

Page 15: Prototipat gràfic responsiu

3. Prototips gràfics

3.3. Pàgina d'itinerari

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 15

Page 16: Prototipat gràfic responsiu

3. Prototips gràfics

3.4. Pàgina de cerca

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 16

Page 17: Prototipat gràfic responsiu

3. Prototips gràfics

3.5. Pàgina de compra

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 17

Page 18: Prototipat gràfic responsiu

4. Conclusió

4. ConclusióRespecte a la guia d'estil, dir que una part del seu contingut l'he fet abans delprototipus d'alta fidelitat i una altra m'ha anat millor fer-la després o mentreanava avançant en el disseny.

Per tant, més que col·locar-la abans o després del prototip, ha estat undesenvolupament conjunt d'ambdues parts.

Entenc que, a més d'una ajuda a l'hora de plantejar el disseny , l'objectiu final iel més important de la guia d'estil és donar unes directrius clares i entenedoresper 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 prototipusd'alta definició, he provat diferents opcions abans d'afrontar aquesta PAC. Hemirat quines podien ser les eines amb què fer el prototipatge i que s'adaptessinmés als meus gustos. De entre totes les provades, van quedar com a finalistesel Keynote, el Photshop i l'Illustrator.

Finalment, vaig decidir fer-ho amb Illustrator perquè em va semblar que podiatreballar de forma més acurada les posicions i les dimensions dels diferentselements.

Com a conclusió final, dir que aquesta ha estat una molt bona experiència per asaber com plantejar el disseny d'algunes pàgines web que estic començant apreparar, algunes d'elles per a projectes personals.

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 18

Page 19: Prototipat gràfic responsiu

5. Fonts

5. FontsAndroid. 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]

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 19

Page 20: Prototipat gràfic responsiu

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 recursosFree 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 perl'autor del mateix, són propietat exclusiva dels seus respectius autors i s'hanreproduït acollint-se al dret de citació o ressenya (art. 32 LPI) i estan exclosesde les llicències per defecte d'aquests materials.

7. LlicènciaAquest treball és obra de Jordi Zango Novell, amb llicència Creative CommonsAtribució-NoComercial-CompartirIgual BY-NC-SA 3.0 Unported.

Disseny d'Interfícies Multimèdia - PAC3per Jordi Zango Novell ([email protected]) 20