Prototipat gràfic, guia d'estil

  • View
    200

  • Download
    5

Embed Size (px)

Text of Prototipat gràfic, guia d'estil

  • Grau en Multimdia Curs 2013/14 2n Semestre

    Disseny d'InterfciesMultimdiaPrctica Finalitzaci del prototipatgrfc multiplataforma

    Guia d'estil

    AutorJordi Zango Novell

    jzango@uoc.edu

    Data de lliurament02/06/2014

    mailto:jzango@uoc.edu

  • ndex1. 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 tipogrfiques.....................................................................................7

    4.2.Mides de les fonts.......................................................................................8

    5. Retcula.............................................................................................................9

    5.1.Versi d'escriptori.......................................................................................9

    5.2.Versi per a dispositius mbils.................................................................10

    6. Imatgeria.........................................................................................................11

    6.1.Tipus d'imatges.........................................................................................11

    6.2.Mida de les imatges..................................................................................11

    7. Elements per a la interfcie web......................................................................12

    7.1.Men principal..........................................................................................12

    7.2.Slideshare.................................................................................................12

    7.3.Fil d'Ariadna..............................................................................................12

    7.4.Enllaos....................................................................................................12

    7.5.Peu de pgina...........................................................................................12

    7.6.Controls i elements d'entrada...................................................................12

    8. Llicncia..........................................................................................................13

    Disseny d'Interfcies Multimdia - Prctica (Guia d'estil)per Jordi Zango Novell (jzango@uoc.edu) 2

  • 1. L'empresa

    1. 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 (jzango@uoc.edu) 3

  • 2. El logotip

    2. El logotip

    2.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 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 mnim 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 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 (jzango@uoc.edu) 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 (jzango@uoc.edu) 5

  • 3. Carta de colors

    3. Carta de colors

    Disseny d'Interfcies Multimdia - Prctica (Guia d'estil)per Jordi Zango Novell (jzango@uoc.edu) 6

  • 4. Tipografia

    4. 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 (jzango@uoc.edu) 7

  • 4. Tipografia

    4.2. Mides de les fonts

    Versi 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 (jzango@uoc.edu) 8

  • 5. Retcula

    5. Retcula

    5.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 (jzango@uoc.edu) 9

  • 5. Retcula

    5.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 (jzango@uoc.edu) 10

  • 6. Imatgeria

    6. Imatgeria

    6.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 px

    Disseny d'Interfcies Multimdia - Prctica (Guia d'estil)per Jordi Zango Novell (jzango@uoc.edu) 11

  • 7. Elements per a la interfcie web

    7. Elements per a la interfcie web

    7.1. Men principal

    7.2. Slideshare

    7.3. Fil d'Ariadna

    7.4. Enllaos

    7.5. Peu de pgina

    7.6. Controls i elements d'entrada

    Disseny d'Interfcies Multimdia - Prctica (Guia d'estil)per Jordi Zango Novell (jzango@uoc.edu) 12

  • 8. Llicncia

    8. 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 (jzango@uoc.edu) 13

    1. L'empresa2. El logotip2.1. Justificaci2.2. El nou logotip2.3. s correcte2.4. s incorrecte2.5. Trets estables i variables

    3. Carta de colors4. Tipografia4.1. Fonts tipogrfiques4.2. Mides de les fonts

    5. Retcula5.1. Versi d'escriptori5.2. Versi per a d