Prototipat gràfic, guia d'estil - [PDF Document]

Grau en Multimdia Curs 2013/14 2n Semestre Disseny d’InterfciesMultimdiaPrctica Finalitzaci del prototipatgrfc multiplataformaGuia d’estilAutorJordi Zango [email protected] de lliurament02/06/2014mailto:[email protected]

ndex1. L’empresa……………………………………………………………………………………………32. El logotip……………………………………………………………………………………………..42.1.Justificaci……………………………………………………………………………………..42.2.El nou logotip………………………………………………………………………………….42.3.s correcte…………………………………………………………………………………….42.4.s incorrecte…………………………………………………………………………………..42.5.Trets estables i variables………………………………………………………………….53. Carta de colors……………………………………………………………………………………..64. Tipografia…………………………………………………………………………………………….74.1.Fonts tipogrfiques………………………………………………………………………….74.2.Mides de les fonts……………………………………………………………………………85. Retcula……………………………………………………………………………………………….95.1.Versi d’escriptori……………………………………………………………………………95.2.Versi per a dispositius mbils………………………………………………………..106. Imatgeria……………………………………………………………………………………………116.1.Tipus d’imatges……………………………………………………………………………..116.2.Mida de les imatges……………………………………………………………………….117. Elements per a la interfcie web…………………………………………………………….127.1.Men principal………………………………………………………………………………127.2.Slideshare…………………………………………………………………………………….127.3.Fil d’Ariadna………………………………………………………………………………….127.4.Enllaos……………………………………………………………………………………….127.5.Peu de pgina……………………………………………………………………………….127.6.Controls i elements d’entrada………………………………………………………….128. Llicncia…………………………………………………………………………………………….13Disseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 2

1. L’empresa1. L’empresaAvial Viajes s una agncia de viatges que ofereix destins a tot arreu del mn.La imatge que aquesta empresa vol transmetre s la d’una agncia que ofereixproductes internacionals orientats al viatge d’esbarjo.S’ha volgut donar importncia a la diversitat, emprant diferents colors algunsdels quals, a ms, 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 pgina web) i el tipus d’imatges emprades en lacapalera.Disseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 3

2. El logotip2. El logotip2.1. JustifcaciS’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 ms moderna.2.2. El nou logotipAquest s el nou imagotip, basat en l’antic logotip.2.3. s correcteL’rea de protecci es definir al voltant de tot l’imagotip, preservant un espaicom a mnim igual al doble de l’espai existent entre la figura i la primera lletradel nom.2.4. s incorrecteEs far s del nou imagotip evitant els casos segents: Separar les paraules entre elles o aquestes de la figura ms del que s’haespecificat.Disseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 4

2. El logotip Canviar el color de la figura. No fer la diferncia 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 variablesLa forma i el color de la figura, aix com la tipografia emprada sn 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’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 5

3. Carta de colors3. Carta de colorsDisseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 6

4. Tipografia4. TipografaEncara que en un disseny responsiu s ms adequat parlar de proporcions(em, %) en lloc de mides definides (pxels 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 mbil.4.1. Fonts tipogrfquesRoboto regular:Roboto bold:Arial Narrow:Disseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 7

4. Tipografia4.2. Mides de les fontsVersi escriptori:Ttol gran(36 pxels, negreta)Subttol(24 pxels, negreta)Text normal(18 pxels)Text petit(14 pxels)Versi dispositiu mbil:Ttol gran(24 pxels, negreta)Subttol(18 pxels, negreta)Text normal(14 pxels)Text petit(12 pxels)Aquestes sn noms mides orientatives, per a determinar les proporcions.Disseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 8

5. Retcula5. Retcula5.1. Versi d’escriptoriPer a facilitar el disseny responsiu, s’ha definit una retcula de 960 pxelsperqu, encara que la majoria dels equips d’escriptori ja treballen a resolucionsmajors, amb 960 pxels ens assegurem que no hi hagi problemes i obtenimfora versatilitat ja que s una mida adequada fins i tot per a tablets en formathoritzontal.La retcula de 960 pxels est dividida en 12 columnes de 80 pxels (60 per acontingut ms 10 a cada banda per al farcit). S’ha optat per la versi de 12subcolumnes en lloc d’una de 16 perqu el nmero 12 ofereix un major nombrede combinacions possibles.Per al disseny actual s’ha optat per agrupar 4 subcolumnes de 80 pxels peraix obtenir un format de 3 columnes de 320 pxels (300 per al contingut i 10 acada banda per al farcit) que, al coincidir amb el format de pantalla de 320pxels demanat per als dispositius mbils, facilitar el redisseny per a aquestsdispositius ms petits.Disseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 9

5. Retcula5.2. Versi per a dispositius mbilsTal i com s’ha explicat en l’apartat anterior, la retcula emprada per a aquestsdispositius s de 320 pxels (300 per al contingut i 10 a cada banda per alfarciment).D’aquesta manera, a ms de simplificar els continguts, noms ha calgutadaptar els que ja es mostraven en les diferents columnes de la versid’escriptori.Disseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 10

6. Imatgeria6. Imatgeria6.1. Tipus d’imatgesLes 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 mbil: 300 x 430 px Descripci de viatges i hotels en les pgines d’inici i dest: Escriptori: 260 x 200 px Dispositiu mbil: 260 x 200 px Descripci de viatges en la cerca: Escriptori: 300 x 240 px Dispositiu mbil: 300 x 240 px Mapa d’itinerari: Escriptori: 620 x 480 px Dispositiu mbil: 300 x 430 pxDisseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 11

7. Elements per a la interfcie web7. Elements per a la interfcie web7.1. Men principal7.2. Slideshare7.3. Fil d’Ariadna7.4. Enllaos7.5. Peu de pgina7.6. Controls i elements d’entradaDisseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 12

8. Llicncia8. LlicnciaAquest treball s obra de Jordi Zango Novell, amb llicncia Creative CommonsAtribuci-NoComercial-CompartirIgual BY-NC-SA 3.0 Unported.Disseny d’Interfcies Multimdia – Prctica (Guia d’estil)per Jordi Zango Novell ([email protected]) 131. L’empresa2. El logotip2.1. Justificaci2.2. El nou logotip2.3. s correcte2.4. s incorrecte2.5. Trets estables i variables3. Carta de colors4. Tipografia4.1. Fonts tipogrfiques4.2. Mides de les fonts5. Retcula5.1. Versi d’escriptori5.2. Versi per a d

Prototipat gràfic, guia d’estil – [PDF Document]

Investigacion de Metodos – [DOCX Document]

Manejo de filtros excel – [PDF Document]

Presentación cmi – [PPTX Powerpoint]

GUIA POLIZAS Y SEGUROS – [PDF Document]

Hacer Una Consulta en C# Paso Por Paso en Imagen

Aprende y diviértete con el libro de actividades Beep 5 en formato PDF

Publicaciones Similares