prototipat gràfic, guia d'estil

13
Grau en Multimèdia Curs 2013/14 – 2 n Semestre Disseny d'Interfícies Multimèdia Pràctica – Finalització del prototipat gràfc multiplataforma Guia d'estil Autor Jordi Zango Novell [email protected] Data de lliurament 02/06/2014

Upload: jordi-zango-novell

Post on 12-Apr-2017

208 views

Category:

Design


5 download

TRANSCRIPT

Page 1: Prototipat gràfic, guia d'estil

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

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

Guia d'estil

Autor

Jordi Zango [email protected]

Data de lliurament

02/06/2014

Page 2: Prototipat gràfic, guia d'estil

Í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 ([email protected]) 2

Page 3: Prototipat gràfic, guia d'estil

1. L'empresa

1. L'empresaAvial 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 ofereixproductes internacionals orientats al viatge d'esbarjo.

S'ha volgut donar importància a la diversitat, emprant diferents colors algunsdels 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 lacapçalera.

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

Page 4: Prototipat gràfic, guia d'estil

2. El logotip

2. El logotip

2.1. Justifcació

S'aconsella al client modificar el logotip pel que fa ala tipografia emprada i la seva distribució.

L'objectiu és aconseguir una imatge de marca unamica 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 espaicom a mínim igual al doble de l'espai existent entre la figura i la primera lletradel 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'haespecificat.

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

Page 5: Prototipat gràfic, guia d'estil

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 tretsestables. Com a trets variables, es pot canviar la mida global del conjunt oemprar 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 ([email protected]) 5

Page 6: Prototipat gràfic, guia d'estil

3. Carta de colors

3. Carta de colors

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

Page 7: Prototipat gràfic, guia d'estil

4. Tipografia

4. TipografaEncara 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 mostrenquines haurien de ser les proporcions entre les diferents mides de text, tant enla 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 ([email protected]) 7

Page 8: Prototipat gràfic, guia d'estil

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 ([email protected]) 8

Page 9: Prototipat gràfic, guia d'estil

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íxelsperquè, encara que la majoria dels equips d'escriptori ja treballen a resolucionsmajors, amb 960 píxels ens assegurem que no hi hagi problemes i obtenimforça versatilitat ja que és una mida adequada fins i tot per a tablets en formathoritzontal.

La retícula de 960 píxels està dividida en 12 columnes de 80 píxels (60 per acontingut més 10 a cada banda per al farcit). S'ha optat per la versió de 12subcolumnes en lloc d'una de 16 perquè el número 12 ofereix un major nombrede combinacions possibles.

Per al disseny actual s'ha optat per agrupar 4 subcolumnes de 80 píxels peraixí obtenir un format de 3 columnes de 320 píxels (300 per al contingut i 10 acada banda per al farcit) que, al coincidir amb el format de pantalla de 320píxels demanat per als dispositius mòbils, facilitarà el redisseny per a aquestsdispositius més petits.

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

Page 10: Prototipat gràfic, guia d'estil

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 aquestsdispositius és de 320 píxels (300 per al contingut i 10 a cada banda per alfarciment).

D'aquesta manera, a més de simplificar els continguts, només ha calgutadaptar 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 ([email protected]) 10

Page 11: Prototipat gràfic, guia d'estil

6. Imatgeria

6. Imatgeria

6.1. Tipus d'imatges

Les imatges a emprar han de ser de bona definició i acolorides. Han d'evocaren 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 ([email protected]) 11

Page 12: Prototipat gràfic, guia d'estil

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 ([email protected]) 12

Page 13: Prototipat gràfic, guia d'estil

8. Llicència

8. 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 (Guia d'estil)per Jordi Zango Novell ([email protected]) 13