Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prototipat gràfic

244 views

Published on

Treball per a l'assignatura de Disseny d'interfícies multimèdia.
Grau en Multimèdia, Universitat Oberta de Catalunya.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Prototipat gràfic

  1. 1. Grau en Multimèdia Curs 2013/14 – 2n Semestre Disseny d'Interfícies Multimèdia Pràctica – Finalització del prototipat gràfc multiplataforma Prototipat gràfc Autor Jordi Zango Novell jzango@uoc.edu Data de lliurament 02/06/2014
  2. 2. Í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 (jzango@uoc.edu) 2
  3. 3. 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 (jzango@uoc.edu) 3
  4. 4. 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 (jzango@uoc.edu) 4
  5. 5. 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 (jzango@uoc.edu) 5
  6. 6. 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 (jzango@uoc.edu) 6
  7. 7. 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 (jzango@uoc.edu) 7
  8. 8. 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 (jzango@uoc.edu) 8
  9. 9. 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 (jzango@uoc.edu) 9
  10. 10. 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 (jzango@uoc.edu) 10
  11. 11. 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 (jzango@uoc.edu) 11
  12. 12. 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 (jzango@uoc.edu) 12
  13. 13. 2. Argumentació 2. Argumentació Tal i com es demana, a continuació detallo tant el procediment de disseny com els canvis efectuats en el prototipat previ, basant-me tant en el feedback obtingut 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 considerat com a constant representativa per tal que la informació arribi a l'usuari de la mateixa forma. Per això he mantingut sempre que ha estat possible tant el plantejament bàsic de la maquetació, com la ubicació dels controls de navegació i els espais destinats a mostrar els continguts. D'aquesta manera l'usuari sempre pot preveure on trobar allò que busca. La interfície té una alt nivell d'explorabilitat, que es veu afavorida tant per la reversibilitat de les accions (per exemple, en el procés de compra) com per l'existència d'una ruta ràpida per a accedir a les diferents funcionalitats (per exemple, el menú principal o el fil d'Ariadna). Complint els preceptes de la llei de Fitts, he donat a les opcions més importants una 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 un color 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 i identificar 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. Aquest canvi ha estat l'eliminació de la icona de la anomenada “hamburguesa” en la part de disseny del dispositiu mòbil. En el seu lloc, el que he fet ha estat desglossar les opcions, agrupant la majoria en el desplegable que ja estava present (i que ara compta amb l'etiqueta “Menú” davant) i deixant en una icona aquelles 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'he decidit a fer-lo després de la lectura d'un estudi de la seva funcionalitat, que porta per títol “Hamburguer vs Menu: The Final AB test” i que pot trobar-se a http://exisweb.net/menu-eats-hamburger. En l'aspecte de la usabilitat i llegibilitat, he optat per emprar lletra fosca sobre un fons blanc per a obtenir un bon contrast. Quan parlo de lletra fosca vull dir que 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 (jzango@uoc.edu) 13
  14. 14. 2. Argumentació semblat que un contrast una mica menys dur que el que dóna el negre pur sobre blanc és més agradable per a la lectura. Tanmateix, he decidit emprar unes 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 de paraules i línies de text en alguns llocs, ja que em sembla que estaven massa carregats. 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 tres columnes que em facilités el disseny de la versió per a dispositius mòbils i la consistència de disseny entre aquesta plataforma i la d'escriptori. Seguint les indicacions donades en l'avaluació de la PAC anterior, he reduït la carta de colors i els que he aplicat són menys saturats que els que havia fet servir. En aquest nou disseny, faig servir els tres colors bàsics (vermell, verd i blau) 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és d'una foto Polaroid). He volgut conservar el marc per a donar una idea d'unitat de 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ó i modificació de la pantalla de l'itinerari. Després de pensar-m'ho, he considerat que era millor eliminar la imatge del slideshare i fer que el mapa tingués una mida més gran (llei de Fitts). A més, he afegit la funcionalitat de poder ver imatges en miniatura damunt del mapa en aquells punts geogràfics remarcables. Aquestes miniatures serien clicables i permetrien accedir a una vista ampliada de foto que es mostra en petit. Un altre dels canvis importants ha estat la redistribució i agrupació dels controls del formulari de compra. Veient la llegibilitat que havia obtingut en aquest formulari per la versió mòbil m'ha semblat que la versió per a escriptori era molt menys clara. Com que, justament a la versió d'escriptori, no hi ha problemes d'espai he optat per a reordenar els controls i agrupar les entrades en una columna de la retícula i les etiquetes en una altra. A més, he fet petites agrupacions significatives fent ús de l'espai existent entre els controls. El resultat ha estat un formulari que em sembla molt més clar i entenedor. De pas, amb aquesta modificació, també he obtingut una major consistència entre els dissenys de les dues plataformes. Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic) per Jordi Zango Novell (jzango@uoc.edu) 14
  15. 15. 3. Fonts 3. 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] Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic) per Jordi Zango Novell (jzango@uoc.edu) 15
  16. 16. 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 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. 5. Llicència Aquest treball és obra de Jordi Zango Novell, amb llicència Creative Commons Atribució-NoComercial-CompartirIgual BY-NC-SA 3.0 Unported. Disseny d'Interfícies Multimèdia - Pràctica (Prototipat gràfic) per Jordi Zango Novell (jzango@uoc.edu) 16

×