�ݺ�ߣ

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

Í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.2.Versió mòbil.......................................................................................6
1.3.Pàgina d'itinerari.........................................................................................7
1.3.2.Versió mòbil.......................................................................................8
1.4.Pàgina de cerca..........................................................................................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

1. Prototipat gràfic
1. Prototipat gràfc
1.1. Pàgina d'inici
1.1.1. Versió escriptori

1.1.2. Versió mòbil

1.2. Pàgina de destí

1.3. Pàgina d'itinerari

1.4. Pàgina de cerca

1.5. Pàgina de compra

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

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.

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]

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.

�ݺ�ߣ

Prototipat gràfic

Recommended

More Related Content

Viewers also liked (15)

Similar to Prototipat gràfic (20)

More from Jordi Zango Novell (7)

Prototipat gràfic