Pràctica final de l'assignatura de Disseny d'Interfícies Multimèdia (UOC).

1. Finalització del prototip gràfic i
tancament de la guia d’estil
Disseny d’interfícies multimèdia
Pràctica
Rosa Suñé Barniol · Grau multimèdia · 2014

2. MULTIPLATAFORMA I GUIA D’ESTIL
pantalla ordinador
home 1
subhome 2
fitxa producte 3
procés compra 4
cerca 5
pantalla smartphone
home 6
subhome 6
fitxa producte 7
procés compra 7
cerca 7
annex guia d’estil
argumentació
Bibliografia i webografia
ÍNDEX

3. DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
GRAU MULTIMÈDIA 1
PANTALLA ORDINADOR
HOME Text Lato Regular en negre sobre
blanc perquè siguin contrastats
al màxim i millorar la llegibilitat.
Mida 12px.
He donat aire als textos ampliant l’espai
entre aquests i les imatges o text següent.
He acostat el text interior de les caixes
“Newsletter” i “Consigue...” per tal que
tinguin la màxima relació possible.
PNG

4. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
2
PANTALLA ORDINADOR
SUBHOME
Text Lato Regular en negre sobre blanc
perquè siguin contrastats al màxim i
millorar la llegibilitat.
He afegit el nom de l’apartat de cada
pàgina com em vas indicar. Em semblava
repetitiu perquè en aquest cas concret ho
és, en altres casos no.
A més a més, ordena la la pàgina fent-la
més accessible i dóna context a l’usuari.
Igualment, he donat aire als textos
ampliant l’espai entre aquests i les
imatges o text següent.
PNG

5. DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
GRAU MULTIMÈDIA 3
PANTALLA ORDINADOR
FITXA PRODUCTE
He modificat el contingut de la caixa del producte (informació,
característiques, personalització i disponibilitat) organitzant el
contingut textual en dues columnes de 320 px d’ample i una separació
als marges (tots igual, superior, inferior, dret i esquerre) de 16px.
He mogut els títols cap a la part superior i el paràgraf a la inferior per
destacar-ho.
La informació textual canviarà segons els producte i el contingut.
PNG

6. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
4
PANTALLA ORDINADOR
PROCÉS COMPRA
He desplaçat la línia de característiques
de cada producte (referència, preu,
disponibilitat, quantitat...) a la part
inferior perquè crec que facilita la lectura
en diagonal i separa millor els diferents
productes quan es vagin posant a la
cistella.
He afegit el títol de l’apartat i he
mogut a sota el gràfic de la línia
de comanda perquè quedi més
clar.
PNG

7. DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
GRAU MULTIMÈDIA 5
PANTALLA ORDINADOR
BUSCADOR
He afegit el disseny de la pàgina de
cerca que és el que em faltava de tots
els wireframes donats.
PNG

8. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
6
PANTALLA
SMARTPHONE
HOME
SUBHOME
Aplico les mateixes indicacions
pels dissenys de pàgina en
pantalla:
- textos llegibles i contrastats.
- major separació dels textos per
donar aire.
- tots els clicables tenen una
mida mínima de 40x40 píxels o
l’espai equivalent.
- el text és de 12 pt com a mínim.
- he afegit el títol d’apartat en
cada pantalla corresponent per
saber on ens trobem en cada
moment.
PNG
PNG

9. DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
GRAU MULTIMÈDIA
PANTALLA SMARTPHONE
FITXA PRODUCTE PROCÉS COMPRA
7
He simplificat l’estructura dels
passos de compra indicant
només el punt on ens trobem.
El disseny recorda al que hi ha
a la mateixa pàgina en versió
ordinador.
Em continuo preguntant com es
veuria la cistella amb més d’un
producte.
Menú desplegable al footer.
CERCADOR
PNG
PNG
PNG

10. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
8
PAUTES D’ACCESSIBILITAT
Se’ns demana que el disseny permeti un nivell d’accessibilitat «doble a» AA hem de comprovar que tots
els punts de verificació de prioritat 1 i 2 es satisfan.
Per què la pàgina web sigui accessible hem de complir amb les pautes d’Accessibilitat al Contingut de
la Web WCAG 1.0 i les pautes d’Accessibilitat al Contingut de la Web WCAG 2.0, fent que el disseny que
he plantejat sigui accessible, reduint les barreres a la informació.
Pautes d’accessibilitat al contingut de la Web
WCAG 1.0
1. Alternatives equivalents per al contingut visual i auditiu.
Des de l’etapa de disseny ho hem de tenir present i donar la indicació de que així sigui, preveient:
- l’ús de textos equivalents de descripció de la imatge.
- vincles de format text.
- descripcions auditives i subtítols.
2. No basar-se només en el color.
Els textos i els gràfics de la pàgina web es veuen igual de bé en
blanc i negre. La gamma de colors amb la que he treballat és prou
contrastada perquè així sigui.
El contrast entre el color de fons i els text. En el disseny que proposo
no hi ha superposició de text damunt de les imatges però si fos el
cas, hauria de ser prou contrastat perquè fos llegible.
3. Utilitzar marcadors i fulls d’estil i fer-ho apropiadament.
Des de l’etapa de disseny ho hem de tenir present i donar la
indicació de que així sigui, preveient que:
- el llenguatge HTML sigui vàlid i apropiat.
- el document estigui validat per les gramàtiques formals publicades.
- s’utilitzin els fulls d’estil per la presentació i maquetació.
- l’ús d’unitats relatives i no absolutes als fulls d’estil (s’adjunta la
retícula des del disseny amb aquesta nomenclatura, en tants per
cent).
- ús dels elements d’encapçalament per transmetre l’estructura
lògica i la informació sobre la pàgina seguint les especificacions del
W3C.(h1, h2, h3...)
- marcat correcte de les llistes i ítems de les llistes.
- marcat de les cites.
4. Identificar l’idioma utilitzat.
Des de l’apartat de disseny indiquem que s’identifiqui l’idioma
general de la pàgina en espanyol (es) i s’indiquin:
- identificar els canvis d’idioma.
- identificar les abreviatures o acrònims amb l’etiqueta corresponent.
5. Crear taules que es transformin correctament.
Des de l’apartat de disseny indiquem que:
- s’identifiquin els encapçalaments de fila i columna a les taules.
- es distingeixi entre les cel·les d’encapçalament i cel·les de dades a

11. DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
GRAU MULTIMÈDIA 9
les taules de dades amb dos o més nivells.
- no s’utilitzin taules per maquetar.
- es facin resums de les taules, molt útils pels usuaris ividents.
- es donin abreviatures per les etiquetes d’encapçalament.
6. Les pàgines que incorporin noves tecnologies es transformaran correctament.
- Organitzar el document perquè pugui ser llegit sense fulls d’estil.
- Assegurar que les pàgines segueixin sent utilitzables quan es desconnectin o no se suportin els scripts,
applets o altres objectes programats.
- Proporcionar pàgines alternatives per als continguts dinàmics no accessibles.
7. L’usuari té el control sobre els canvis dels continguts tempodependents.
L’usuari pot aturar els objectes o pàgines que es mouen, fan pampallugues, es desplacen o s’actualitzen
automàticament.
- Evitar provocar centelleig a la pantalla
- Evitar el parpelleig del contingut (per exemple, canvi de presentació en períodes regulars, així com
l’encesa i l’apagada)
- Evitar els moviments en les pàgines
- No crear pàgines que s’actualitzin automàticament de forma periòdica.
- Proporcionar la possibilitat d’aturar el redireccionament automàtic.
8. Accessibilitat directa de les interfícies incrustades.
La interfície d’usuari segueix els principis d’un disseny accessible: funcionalitat d’accés independent del
dispositiu, teclat, veu automàtica, etc.
- Els elements de programació, com scripts i applets, són directament accessibles o compatibles amb les
ajudes tècniques.
9. Disseny pensant en l’ús de diferents perifèrics de control.
- Mapes d’imatge controlats pel client en comptes de pel servidor, excepte allà on les zones sensibles no
puguin ser definides amb una forma geomètrica.
- Qualsevol element pugui utilitzar-se de forma independent al dispositiu (ratolí, teclat, etc.).
- Ordre lògic per navegar amb el tabulador mitjançant vincles, controls de formulari i objectes. Així estan
disenyats els mockups seguint els wireframes d’arquitectura de la informació.
- Dreceres de teclat per als vincles més importants i per als formularis.
10. Solucions multiplataforma.
- Desconnectar l’obertura de noves finestres. No provocar aparicions sobtades de noves finestres i no
canviar la finestra actual sense informar a l’usuari.
-Per a tots els controls de formularis amb etiquetes associades implícitament, assegurar que l’etiqueta
estigui col·locada adequadament.
- Caràcters per defecte en els quadres d’edició i àrees de text, està previst des del disseny i es mostra.
11. S’han utilitzat les tecnologies i pautes W3C.
- Tecnologies W3C quan estiguin disponibles i siguin apropiades per al desenvolupament de tasques i
utilitzeu les últimes versions que siguin suportades.
- Consultar les referències del W3C i WAI per a més informació.
- Validar la sintaxi dels documents: http://validator.w3.org/
- Validar la sintaxi dels documents CSS: http://jigsaw.w3.org/css-validator/
- Evitar característiques desaconsellades per les tecnologies W3C
-Proporcionar la informació perquè els usuaris puguin rebre els documents segons les seves preferències
(idioma, contingut, etc...). Així està dissenyat amb el desplegable d’idioma a la part superior dreta.
- Si no es pot crear una pàgina accessible, proporcionarem un vincle a una pàgina alternativa que usi
tecnologies W3C, que sigui accessible, tingui informació (o funcionalitat) equivalent i sigui actualitzada

12. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
tan sovint com la pàgina (original) inaccessible.
12. Informació de context i orientació.
-Títol a cada marc per facilitar-ne la identificació i navegació. S’han afegit els títols d’apartats de cada
pàgina.
-Si no és obvi amb el títol del marc, descriurem el propòsit dels marcs i com aquests es relacionen entre
sí.
-Dividim la informació en blocs curts i manejables.
-Associem explícitament les etiquetes amb els seus controls.
13. Donem mecanismes clars de navegació.
-S’identificar clarament l’objectiu de cada vincle.
-Es Proporcionen metadades per afegir informació semàntica a les pàgines i els llocs web. Les
metadades és la informació que es proporciona sobre el lloc web i que aporta a l’usuari informació
orientativa sobre aquest lloc web.
-Es proporciona informació sobre la maquetació general del lloc web.
-S’utilitzen els mecanismes de navegació de forma coherent. El que s’espera d’un element és el mateix
a tot el lloc web ja que no és bo que el mateix element de navegació es comporti de manera diferent,
sobretot tenint en compte els diferents tipus d’usuaris que visiten el lloc web.
- S’han agrupat els vincles relacionats i identificat el grup, ho tenim a la part del footer de la pàgina i en
la versió mòbil de manera desplegable.
14. Els documents són clars i simples.
- Hem utilitzat el llenguatge apropiat més clar i simple per al contingut del lloc web
WCAG 2.0
1. El contingut és perceptible.
- Oferim equivalents textuals per a qualsevol contingut no textual, que tinguin el mateix propòsit i
proporcionin la mateixa informació, excepte quan el propòsit d’aquell contingut no textual sigui crear
una experiència sensorial específica. Veure Ref. Punt 1.1 - Pauta 1 de WCAG 1.0.
- En les presentacions tempo-dependents, proporcionem la informació per altres mitjans de forma
sincronitzada. Veure Ref. Punt 1.3 - Pauta 1 de WCAG 1.0.
- La informació, funcionalitat i estructura són independents de la presentació partint de la bona
informació dels wireframes. Veure Ref. Punt 3.3 - Pauta 3 de WCAG 1.0
- En les presentacions que, per defecte, siguin visuals, el contingut en primer pla (paraules i/o imatges) es
distingeix del fons amb facilitat. Veure Ref. Punt 2.2 - Pauta 2 de WCAG 1.0
- En les presentacions sonores, comprovar que el contingut principal (discurs parlat i sons) es diferencia
amb facilitat del so del fons. Veure Ref. Punt 1.3 - Pauta 1 de WCAG 1.0
2. Els elements de la interfície en el contingut són manejables.
- Totes les funcionalitats del contingut han estat dissenyades de manera que puguin ser operables
mitjançant un teclat o una interfície de teclat. Veure Ref. Punt 9.2 - Pauta 9 de WCAG 1.0. Hi hauria la
excepció de la versió mòbil.
- Els usuaris tenen el control de qualsevol límit de temps en la lectura, interacció o resposta a un
document, excepte quan no és possible degut a la naturalesa del contingut o de les accions que es
desenvolupen en temps real. Veure Ref. Punt 7.3 - Pauta 7 de WCAG 1.0
- Els usuaris poden evitar el contingut que pugui causar atacs fotosensibles o d’epilèpsia. Veure Ref. Punt
7.1 - Pauta 7 de WCAG 1.0
- Donem als usuaris la capacitat d’orientar-se i moure’s a través del contingut. Veure Ref. Punt 9.1, 9.2,
9.3 i 9.4 - Pauta 9 de WCAG 1.0
- Ajudem als usuaris a evitar errors i a corregir-los fàcilment. Veure Ref. Punt 8.1 - Pauta 8 de WCAG 1.0

13. DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
GRAU MULTIMÈDIA
3. El contingut i els controls són compatibles.
- El significat del contingut es pot obtenir-se de forma automàtica. Veure Ref. Punts 14.1, 14.2 i 14.3 -
Pauta 14 de WCAG 1.0.
- S’ha organitzat el contingut “pàgina a pàgina” de manera consistent i els elements interactius es
comporten d’una manera predictible. Veure Ref. Pautes 12, 13 i 14 de WCAG 1.0.
4. El contingut és robust perquè funcioni amb les tecnologies actuals i futures.
- Ús de les tecnologies d’acord amb les especificacions. Veure Ref. Punt 6.1 - Pauta 6 de WCAG 1.0
Veure Ref. Punts 11.1 i 11.2 - Pauta 11 de WCAG 1.0.
- Les interfícies d’usuari són accessibles o que se s’ofereixen alternatives accessibles. Veure Ref. Punts 1.1,
1.2 i 1.4 - Pauta 1 de WCAG 1.0 Veure Ref. Punt 6.1 - Pauta 6 de WCAG 1.0.

14. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
ANNEX PÓSTERS GUIA D’ESTIL

15. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA - GUIA D’ESTIL PAC 3
Rosa Suñé Barniol
Text per pantalla ordinador HTML sans serif
h1 Lato Bold 18pt white
h2 Lato Bold 18pt magenta
h3 Lato Bold 16pt negra
h4 Lato Regular 14pt
paràgraf Lato Regular 14pt
Números per pantalla ordinador
1234567890
Tienne Bold magenta 18pt
1234567890 Tienne Regular gris 14pt
#b52470
#000000
#ffffff
#b9b9b9
Text per pantalla smartphone HTML serif
h1 Lato Bold 16pt white
h2 Lato Bold 14pt magenta
h3 Lato Bold 14pt negra
h4 Lato Regular 12pt
Números per pantalla smartphone
1234567890
Tienne Bold magenta 14pt
1234567890 Tienne Regular gris 14pt
(c) 2014, Arte Hábitat interiores. Todos los derechos reservados
C = 29%
M = 99%
Y = 28%
K = 2%
R = 181
G = 36
B = 112
C = 75%
M = 68%
Y = 67%
K= 90%
R = 0
G = 0
B = 0
C = 0%
M = 0%
Y = 0%
K = 0%
R = 255
G = 255
B = 255
C = 28%
M = 22%
Y = 22%
K= 0%
R = 185
G = 185
B = 185
COLORS ICONESTIPOGRAFIA
icon by Designmodo

16. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA - GUIA D’ESTIL PAC 3
Rosa Suñé Barniol
INTERACTIUS

17. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA - GUIA D’ESTIL PAC 3
Rosa Suñé Barniol
RETÍCULA PER PANTALLA ORDINADOR 1080px RETÍCULA SMARTPHONE 320px
gutter horitzontal/
vertical 20px
gutter horitzontal/
vertical 16px
(c) 2014, Arte Hábitat interiores. Todos los derechos reservados
Consulta los catálogos
IMATGES
Imatge tipus a 3 columnes
mida: ample 320, alt 194
Imatge tipus a 4 columnes
mida: ample 173, alt 120
Imatge tipus a 5 columnes
mida: ample 182, alt 167

18. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
ARGUMENTACIÓ
En tot el procés del disseny s’ha tingut en compte tan la diversitat d’usuaris que visitarà el lloc web com
la imatge final que s’ha volgut donar des de l’inici.
L’objectiu era aconseguir un lloc web senzill, clar i fàcil de navegar, sense carregaments en el disseny
innecessaris. I crec que hem assolit l’objectiu. Un disseny sempre és millorable però ens estaríem movent
dins de la imatge neta, blanca, amb colors contrastats que faciliten la lectura i destaquen el contingut.
Els colors que hem utilitzat són els de la imatge comercial d’Arte Hábitat i els que té el seu logo.
Les millores que s’han dut a terme respecte a la PAC 3 són:
- airejar els textos que quedaven excessivament comprimits.
- eliminar el tipus «thin» de la tipografia Lato ja que dificultava la lectura, massa fina, poc contrast a la
pantalla.
- simplificar i ordenar el disseny de les parts del lloc web que eren millorables, tan en la versió per a
pantalla d’ordinador com la versió per a mòbil.
El procés d’optimització i finalització de prototips ha estat:
- prendre la decisió de la imatge que es volia: senzillesa i netedat.
- prendre la decisió de la gamma cromàtica que ens ve donada pel logotip de l’empresa.
- seguir els wireframes desenvolupats des d’arquitectura de la informació.
- posar en crisi les parts que ens semblaven millorables des del disseny dels mockups i executar les
millores.
Hem seguit tres fases:
- primera:
- elaboració de les fitxes d’usuaris.
- brainstorming i wallconcept per decidir quina imatge volem donar de l’empresa a través del lloc web.
- primera proposta gràfica de la home tan per versió mòbil com per ordinador.
- segona:
- revisió d’aquesta primera proposta gràfica i correcció.
- decisió de quina retícula utilitzem: està basada en un ample de 1080 px i modulada a partir de l’ample
de mòbil de 320 px.
En el lloc web farem servir, per la versió ordinador:
- columna a ample total de pàgina 100% - partim de 1080 px
- 3 columnes al 32 % cadascuna.
- 4 columnes al 24% cadascuna.
- 5 columnes al 19 % cadascuna.
Amb un gutter horitzontal/ vertical 20px
I per la versió mòbil:
- columna a ample total de pàgina 100% - partim de 320 px
- 2 columnes al 45 % cadascuna.
- 4 columnes al 20% cadascuna.
Amb un gutter horitzontal/ vertical 16px
Hem decidit aquesta retícula perquè és la que millor encaixa amb els wireframes de partida per
organitzar el contingut de cada pàgina. La retícula de la versió per ordinador és responsive i adaptable
a la versió mòbil sense haver de fer grans canvis en el disseny.

19. DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
GRAU MULTIMÈDIA
- segona proposta gràfica més completa amb 4 mockups (home, subhome, fitxa producte i cistella
compra) tan de versió mòbil com ordinador.
- decisió de quina gamma cromàtica farem servir: colors del logotip més el blanc i el negre
- decisió de quina tipografia farem servir: una sans serif, Lato, pel text de paràgrafs i títols i una serif,
Tienne Bold, per destacar els números entre el text. El preu del producte és un element principal en el
lloc web i que l’usuari vol trobar fàcilment.
- tercera:
- revisió d’aquesta segona proposta gràfica i correcció.
- proposta gràfica definitiva amb tots els mockups donats des d’arquitectura de la informació tan de
versió mòbil com ordinador.
Hem fet servir el programari Adobe CS6: Illustrator pel disseny vectorial i InDesign per la maquetació.
Hem explotat l’ús de retícules i grids per dur a terme el disseny de la manera més regular possible. També
Photoshop per la redimensió i retoc d’imatges.
Hem tingut en compte la versió per ordinador en la que preval l’ús del click del ratolí (tot i que funciona
amb teclat també) i la versió per mòbil en que la interacció serà tàctil. En aquesta última s’ha de tenir
en compte deixar el marge suficient entre incones o botons (40x40px) per tal que l’ordre que dóna
l’usuari s’executi correctament.
La versió per ordinador és més extensa i la versió per mòbil està optimitzada per l’ús des del dispositiu
amb menús més simples i amb menys contingut. Igualment pel major ús de menús desplegables.
El disseny es pot millorar en la part de la cistella de la compra de la versió mòbil ja que no acabem
de veure clara la manera exposada des dels wireframes. És un punt a resoldre en un futur i ja des d’un
prototip web en ús.
Hi ha altres punts millorables com veure com s’afegiria contingut, veure si les tipografies cansen o
perduren, si el disseny és prou responsive en els diferents dispositius, etc... També s’ha de preveure el
canvi de la gamma cromàtica si l’empresa decideix fer un canvi de logo en un futur.
Això ja quedaria per una següent fase o ja pel disseny, construcció del web i els seus primers usos en
navegació. Creiem que la retícula i el disseny en general és prou flexible per acollir més contingut i
canvis en el disseny de parts de la web.

20. GRAU MULTIMÈDIA
DISSENY D’INTERFÍCIES MULTIMÈDIA PRÀCTICA
Recursos web assignatura
Usabilitat
http://multimedia.uoc.edu/blogs/
dim/usab
Disseny
http://multimedia.uoc.edu/blogs/
dim/disseny
Mòdul 3: Usabilitat (punts 1 i 2)
Mòdul 4: Disseny
Sobre les retícules
Responsive resources
http://bradfrost.github.io/this-is-
responsive/resources.html
A better Photoshop grid for
responsive web design
http://www.elliotjaystocks.com/
blog/a-better-photoshop-grid-for-
responsive-web-design/
WHAT ARE STYLE TILES?
http://styletil.es/
9 basic principles of responsive web
design
http://blog.froont.com/9-basic-
principles-of-responsive-web-design/
Logo
http://www.artehabitat.com/
tiendaonline/es/
Icones
http://seeklogo.com/instagram-icon-
logo-249360.html
http://www.freepik.es/vector-
gratis/iconos-de-redes-sociales-
establecidas-paquete-de-
vectores_684574.htm
http://www.flaticon.com/free-icon/
small-truck_4435
Fonts
http://www.google.com/fonts/
specimen/Tienne
http://www.google.com/fonts/
specimen/Lato
Guia d’estil
http://www.smashingmagazine.
com/2010/07/21/designing-style-
guidelines-for-brands-and-websites/
http://identity.yale.edu/web
Pautes d’accessibilitat web
http://www.gencat.cat/web/cat/
accessibilitat/PautesWCAG.pdf
BIBLIOGRAFIA I WEBOGRAFIA