Download - Prototipat gràfic

Transcript
Page 1: Prototipat gràfic

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

Disseny d'InterfíciesMultimèdiaPràctica – Finalització del prototipatgràfc multiplataforma

Prototipat gràfc

Autor

Jordi Zango [email protected]

Data de lliurament

02/06/2014

Page 2: Prototipat gràfic

Índex

1. Prototipat gràfic.................................................................................................3

1.1.Pàgina d'inici...............................................................................................3

1.1.1.Versió escriptori.................................................................................3

1.1.2.Versió mòbil.......................................................................................4

1.2.Pàgina de destí...........................................................................................5

1.2.1.Versió escriptori.................................................................................5

1.2.2.Versió mòbil.......................................................................................6

1.3.Pàgina d'itinerari.........................................................................................7

1.3.1.Versió escriptori.................................................................................7

1.3.2.Versió mòbil.......................................................................................8

1.4.Pàgina de cerca..........................................................................................9

1.4.1.Versió escriptori.................................................................................9

1.4.2.Versió mòbil.....................................................................................10

1.5.Pàgina de compra.....................................................................................11

1.5.1.Versió escriptori...............................................................................11

1.5.2.Versió mòbil.....................................................................................12

2. Argumentació..................................................................................................13

3. Fonts...............................................................................................................15

4. Imatges i recursos...........................................................................................16

5. Llicència..........................................................................................................16

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 2

Page 3: Prototipat gràfic

1. Prototipat gràfic

1. Prototipat gràfc

1.1. Pàgina d'inici

1.1.1. Versió escriptori

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 3

Page 4: Prototipat gràfic

1. Prototipat gràfic

1.1.2. Versió mòbil

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 4

Page 5: Prototipat gràfic

1. Prototipat gràfic

1.2. Pàgina de destí

1.2.1. Versió escriptori

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 5

Page 6: Prototipat gràfic

1. Prototipat gràfic

1.2.2. Versió mòbil

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 6

Page 7: Prototipat gràfic

1. Prototipat gràfic

1.3. Pàgina d'itinerari

1.3.1. Versió escriptori

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 7

Page 8: Prototipat gràfic

1. Prototipat gràfic

1.3.2. Versió mòbil

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 8

Page 9: Prototipat gràfic

1. Prototipat gràfic

1.4. Pàgina de cerca

1.4.1. Versió escriptori

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 9

Page 10: Prototipat gràfic

1. Prototipat gràfic

1.4.2. Versió mòbil

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 10

Page 11: Prototipat gràfic

1. Prototipat gràfic

1.5. Pàgina de compra

1.5.1. Versió escriptori

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 11

Page 12: Prototipat gràfic

1. Prototipat gràfic

1.5.2. Versió mòbil

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 12

Page 13: Prototipat gràfic

2. Argumentació

2. ArgumentacióTal i com es demana, a continuació detallo tant el procediment de disseny comels canvis efectuats en el prototipat previ, basant-me tant en el feedbackobtingut de l'avaluació de la PAC anterior com en la pròpia reflexió personal.

Un dels principis que he tingut molt en compte ha estat el de la consistència.He intentat aplicar de forma constant i predictible tot el que pot ser consideratcom a constant representativa per tal que la informació arribi a l'usuari de lamateixa forma.

Per això he mantingut sempre que ha estat possible tant el plantejament bàsicde la maquetació, com la ubicació dels controls de navegació i els espaisdestinats a mostrar els continguts. D'aquesta manera l'usuari sempre potpreveure on trobar allò que busca.

La interfície té una alt nivell d'explorabilitat, que es veu afavorida tant per lareversibilitat de les accions (per exemple, en el procés de compra) com perl'existència d'una ruta ràpida per a accedir a les diferents funcionalitats (perexemple, el menú principal o el fil d'Ariadna).

Complint els preceptes de la llei de Fitts, he donat a les opcions més importantsuna major grandària i visibilitat. Per això, els controls primaris (com el menúprincipal) han estat col·locats en els límits de la pantalla i també he donat uncolor i una mida diferents als botons que impliquen accions més compromeses(com per exemple, el botó de compra).

També he fet ús d'algunes metàfores per a ajudar a l'usuari a reconèixer iidentificar algunes funcionalitats o opcions. Per exemple, he fet ús d'estrelles,símbols de casetes o persones, o petites icones amb forma de calendari.

Sí que he fet un canvi concret pel que fa a les icones i les metàfores. Aquestcanvi ha estat l'eliminació de la icona de la anomenada “hamburguesa” en lapart de disseny del dispositiu mòbil. En el seu lloc, el que he fet ha estatdesglossar les opcions, agrupant la majoria en el desplegable que ja estavapresent (i que ara compta amb l'etiqueta “Menú” davant) i deixant en una iconaaquelles opcions que tenen a veure amb l'usuari (registre, connexió, perfil, etc.).

El canvi que acabo d'explicar, l'eliminació de la icona de la “hamburguesa” m'hedecidit a fer-lo després de la lectura d'un estudi de la seva funcionalitat, queporta per títol “Hamburguer vs Menu: The Final AB test” i que pot trobar-se ahttp://exisweb.net/menu-eats-hamburger.

En l'aspecte de la usabilitat i llegibilitat, he optat per emprar lletra fosca sobreun fons blanc per a obtenir un bon contrast. Quan parlo de lletra fosca vull dirque he utilitzat un color gris fosc per al text però no un negre perquè m'ha

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 13

Page 14: Prototipat gràfic

2. Argumentació

semblat que un contrast una mica menys dur que el que dóna el negre pursobre blanc és més agradable per a la lectura. Tanmateix, he decidit emprarunes fonts tipogràfiques sense serif i d'una mida força gran.

Altra modificació que té a veure amb la llegibilitat és que he reduït el nombre deparaules i línies de text en alguns llocs, ja que em sembla que estaven massacarregats. A més, en alguns llocs he passat a emprar la font Arial Narrow que téun format més comprimit i permet aprofitar millor l'espai.

Tal i com explico a la guia d'estil, he emprat una retícula bàsica de trescolumnes que em facilités el disseny de la versió per a dispositius mòbils i laconsistència de disseny entre aquesta plataforma i la d'escriptori.

Seguint les indicacions donades en l'avaluació de la PAC anterior, he reduït lacarta de colors i els que he aplicat són menys saturats que els que havia fetservir. En aquest nou disseny, faig servir els tres colors bàsics (vermell, verd iblau) però per a coses puntuals i amb menys intensitat.Ara, per exemple, els paquets de viatge no els mostro envoltats de color sinód'un marc en un to gris clar (de forma intencionada, gairebé com si es tractésd'una foto Polaroid). He volgut conservar el marc per a donar una idea d'unitatde paquet, com si fos un objecte material que es pot comprar o regalar.

Entre tots els canvis que he fet, un dels més grans ha estat la redistribució imodificació de la pantalla de l'itinerari. Després de pensar-m'ho, he consideratque era millor eliminar la imatge del slideshare i fer que el mapa tingués unamida més gran (llei de Fitts). A més, he afegit la funcionalitat de poder verimatges en miniatura damunt del mapa en aquells punts geogràficsremarcables. Aquestes miniatures serien clicables i permetrien accedir a unavista ampliada de foto que es mostra en petit.

Un altre dels canvis importants ha estat la redistribució i agrupació dels controlsdel formulari de compra. Veient la llegibilitat que havia obtingut en aquestformulari per la versió mòbil m'ha semblat que la versió per a escriptori era moltmenys clara.

Com que, justament a la versió d'escriptori, no hi ha problemes d'espai he optatper a reordenar els controls i agrupar les entrades en una columna de laretícula i les etiquetes en una altra. A més, he fet petites agrupacionssignificatives fent ús de l'espai existent entre els controls. El resultat ha estat unformulari que em sembla molt més clar i entenedor.

De pas, amb aquesta modificació, també he obtingut una major consistènciaentre els dissenys de les dues plataformes.

Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 14

Page 15: Prototipat gràfic

3. Fonts

3. 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 - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 15

Page 16: Prototipat gràfic

3. 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]

4. 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.

5. 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 - Pràctica (Prototipat gràfic)per Jordi Zango Novell ([email protected]) 16