Prototipat gràfic, guia d'estil.
0 likes347 views
Treball per a l'assignatura de Disseny d'interfícies multimèdia. Grau en Multimèdia, Universitat Oberta de Catalunya.
More Related Content
Viewers also liked (14)
Similar to Prototipat gràfic, guia d'estil. (20)
More from Jordi Zango Novell (7)
Prototipat gràfic, guia d'estil.
- 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.ݺߣshare.................................................................................................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 • ݺߣshare 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. ݺߣshare 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