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

1. Grau en Multimèdia Curs 2013/14 – 2n
Semestre
Disseny d'Interfícies
Multimèdia
Pràctica – Finalització del prototipat
gràfc multiplataforma
Guia d'estil
Autor
Jordi Zango Novell
jzango@uoc.edu
Data de lliurament
02/06/2014

2. Índex
1. L'empresa.........................................................................................................3
2. El logotip...........................................................................................................4
2.1.Justificació..................................................................................................4
2.2.El nou logotip..............................................................................................4
2.3.Ús correcte.................................................................................................4
2.4.Ús incorrecte...............................................................................................4
2.5.Trets estables i variables............................................................................5
3. Carta de colors..................................................................................................6
4. Tipografia..........................................................................................................7
4.1.Fonts tipogràfiques.....................................................................................7
4.2.Mides de les fonts.......................................................................................8
5. Retícula.............................................................................................................9
5.1.Versió d'escriptori.......................................................................................9
5.2.Versió per a dispositius mòbils.................................................................10
6. Imatgeria.........................................................................................................11
6.1.Tipus d'imatges.........................................................................................11
6.2.Mida de les imatges..................................................................................11
7. Elements per a la interfície web......................................................................12
7.1.Menú principal..........................................................................................12
7.2.Slideshare.................................................................................................12
7.3.Fil d'Ariadna..............................................................................................12
7.4.Enllaços....................................................................................................12
7.5.Peu de pàgina...........................................................................................12
7.6.Controls i elements d'entrada...................................................................12
8. Llicència..........................................................................................................13
Disseny d'Interfícies Multimèdia - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 2

3. 1. L'empresa
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 ofereix
productes internacionals orientats al viatge d'esbarjo.
S'ha volgut donar importància a la diversitat, emprant diferents colors alguns
dels 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 la
capçalera.
Disseny d'Interfícies Multimèdia - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 3

4. 2. El logotip
2. El logotip
2.1. Justifcació
S'aconsella al client modificar el logotip pel que fa a
la tipografia emprada i la seva distribució.
L'objectiu és aconseguir una imatge de marca una
mica més moderna.
2.2. El nou logotip
Aquest és el nou imagotip, basat en l'antic logotip.
2.3. Ús correcte
L'àrea de protecció es definirà al voltant de tot l'imagotip, preservant un espai
com a mínim igual al doble de l'espai existent entre la figura i la primera lletra
del nom.
2.4. Ús incorrecte
Es farà ús del nou imagotip evitant els casos següents:
• Separar les paraules entre elles o aquestes de la figura més del que s'ha
especificat.
Disseny d'Interfícies Multimèdia - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 4

5. 2. El logotip
• 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 fonts diferents que les que es mostren.
• Fer una distribució vertical.
2.5. Trets estables i variables
La forma i el color de la figura, així com la tipografia emprada són trets
estables. Com a trets variables, es pot canviar la mida global del conjunt o
emprar lletres de color blanc en cas de treballar sobre un fons fosc.
Disseny d'Interfícies Multimèdia - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 5

6. 3. Carta de colors
3. Carta de colors
Disseny d'Interfícies Multimèdia - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 6

7. 4. Tipografia
4. 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 mostren
quines haurien de ser les proporcions entre les diferents mides de text, tant en
la versió d'escriptori com en la versió per a dispositiu mòbil.
4.1. Fonts tipogràfques
Roboto regular:
Roboto bold:
Arial Narrow:
Disseny d'Interfícies Multimèdia - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 7

8. 4. Tipografia
4.2. Mides de les fonts
Versió escriptori:
Títol gran
(36 píxels, negreta)
Subtítol
(24 píxels, negreta)
Text normal
(18 píxels)
Text petit
(14 píxels)
Versió dispositiu mòbil:
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 - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 8

9. 5. Retícula
5. Retícula
5.1. Versió d'escriptori
Per a facilitar el disseny responsiu, s'ha definit una retícula de 960 píxels
perquè, encara que la majoria dels equips d'escriptori ja treballen a resolucions
majors, amb 960 píxels ens assegurem que no hi hagi problemes i obtenim
força versatilitat ja que és una mida adequada fins i tot per a tablets en format
horitzontal.
La retícula de 960 píxels està dividida en 12 columnes de 80 píxels (60 per a
contingut més 10 a cada banda per al farcit). S'ha optat per la versió de 12
subcolumnes en lloc d'una de 16 perquè el número 12 ofereix un major nombre
de combinacions possibles.
Per al disseny actual s'ha optat per agrupar 4 subcolumnes de 80 píxels per
així obtenir un format de 3 columnes de 320 píxels (300 per al contingut i 10 a
cada banda per al farcit) que, al coincidir amb el format de pantalla de 320
píxels demanat per als dispositius mòbils, facilitarà el redisseny per a aquests
dispositius més petits.
Disseny d'Interfícies Multimèdia - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 9

10. 5. Retícula
5.2. Versió per a dispositius mòbils
Tal i com s'ha explicat en l'apartat anterior, la retícula emprada per a aquests
dispositius és de 320 píxels (300 per al contingut i 10 a cada banda per al
farciment).
D'aquesta manera, a més de simplificar els continguts, només ha calgut
adaptar els que ja es mostraven en les diferents columnes de la versió
d'escriptori.
Disseny d'Interfícies Multimèdia - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 10

11. 6. Imatgeria
6. Imatgeria
6.1. Tipus d'imatges
Les imatges a emprar han de ser de bona definició i acolorides. Han d'evocar
en l'usuari conceptes com aquests: paisatges llunyans, diversió, relax, natura,
aventura, esbarjo, cultures diferents.
6.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 - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 11

12. 7. Elements per a la interfície web
7. Elements per a la interfície web
7.1. Menú principal
7.2. Slideshare
7.3. Fil d'Ariadna
7.4. Enllaços
7.5. Peu de pàgina
7.6. Controls i elements d'entrada
Disseny d'Interfícies Multimèdia - Pràctica (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 12

13. 8. Llicència
8. 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 (Guia d'estil)
per Jordi Zango Novell (jzango@uoc.edu) 13