Prototipat gràfic responsiu

download Prototipat gràfic responsiu

of 20

  • date post

    12-Apr-2017
  • Category

    Design

  • view

    358
  • download

    3

Embed Size (px)

Transcript of Prototipat gràfic responsiu

  • Grau en Multimdia Curs 2013/14 2n Semestre

    Disseny d'InterfciesMultimdiaPAC3 Prototipat Grfc Responsiu

    AutorJordi Zango Novell

    jzango@uoc.edu

    Data de lliurament05/05/2014

    mailto:jzango@uoc.edu

  • ndex1. Objectiu.............................................................................................................4

    2. Guia d'estil........................................................................................................5

    2.1.L'empresa...................................................................................................5

    2.2.Justificaci..................................................................................................6

    2.3.El logotip.....................................................................................................6

    2.3.1.s correcte........................................................................................6

    2.3.2.s incorrecte......................................................................................6

    2.3.3.Trets estables i variables...................................................................6

    2.4.Carta de colors...........................................................................................7

    2.4.1.Estudi previ........................................................................................7

    2.4.2.Colors emprats..................................................................................7

    2.5.Tipografia....................................................................................................8

    2.5.1.Font tipogrfica..................................................................................8

    2.5.2.Mides de la font.................................................................................8

    2.6.Retcula.......................................................................................................9

    2.6.1.Versi d'escriptori..............................................................................9

    2.6.2.Versi per a dispositius mbils........................................................10

    2.7.Imagteria...................................................................................................11

    2.7.1.Tipus d'imatges................................................................................11

    2.7.2.Mida de les imatges.........................................................................11

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

    2.8.1.Men principal.................................................................................12

    2.8.2.Slideshare........................................................................................12

    2.8.3.Fil d'Ariadna.....................................................................................12

    2.8.4.Enllaos...........................................................................................12

    2.8.5.Peu de pgina.................................................................................12

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

    3. Prototips grfics..............................................................................................13

    3.1.Pgina d'inici.............................................................................................13

    3.2.Pgina de dest.........................................................................................14

    3.3.Pgina d'itinerari.......................................................................................15

    Disseny d'Interfcies Multimdia - PAC3per Jordi Zango Novell (jzango@uoc.edu) 2

  • 3.4.Pgina de cerca........................................................................................16

    3.5.Pgina de compra....................................................................................17

    4. Conclusi........................................................................................................18

    5. Fonts...............................................................................................................19

    6. Imatges i recursos...........................................................................................20

    7. Llicncia..........................................................................................................20

    Disseny d'Interfcies Multimdia - PAC3per Jordi Zango Novell (jzango@uoc.edu) 3

  • 1. Objectiu

    1. ObjectiuRealitzar el prototip grfic del web per a escriptori i smartphone a partir delswireframes per a la pgina de l'empresa Avial Viajes, definits en la PACanterior.

    Aquest prototipatge haur d'anar acompanyat de la corresponent guia d'estil.

    Disseny d'Interfcies Multimdia - PAC3per Jordi Zango Novell (jzango@uoc.edu) 4

  • 2. Guia d'estil

    2. Guia d'estil

    2.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 - PAC3per Jordi Zango Novell (jzango@uoc.edu) 5

  • 2. Guia d'estil

    2.2. 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.3. El logotipAquest s el nou imagotip, basat enl'antic logotip.

    2.3.1. s correcteL'rea de protecci es definir alvoltant de tot l'imagotip, preservant unespai com a mnim igual al doble del'espai existent entre la figura i laprimera lletra del nom.

    2.3.2. s incorrecteEs far s del nou imagotip evitant elscasos segents:

    Separar les paraules entre elleso aquestes de la figura ms del que s'ha especificat.

    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 una font diferent que la que es mostra (Roboto, veure apartat de la tipogarfia ).

    Fer una distribuci vertical.

    2.3.3. 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 - PAC3per Jordi Zango Novell (jzango@uoc.edu) 6

  • 2. Guia d'estil

    2.4. Carta de colors2.4.1. Estudi previPrenent com a punt de partida el color groc de la figura en el logotip original,s'ha fet un estudi de color per a buscar el suplementari, el complementari i elsuplementari del complementari i definir aix una ttrada de colors a partir de laque es buscaran altres dos colors (ms els possibles blancs i grisos).

    Un cop trobats els colors inicials, s'han anat fent variacions, buscant colorsrelativament vius per que no fossin excessivament saturats, fins arribar a lacarta de colors que es mostra en el proper apartat.

    2.4.2. Colors emprats

    Disseny d'Interfcies Multimdia - PAC3per Jordi Zango Novell (jzango@uoc.edu) 7

  • 2. Guia d'estil

    2.5. 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.

    2.5.1. Font tipogrfcaS'ha optat per a no barrejar fonts diferents i emprar-ne una de sola en diferents formats. La font utilitzada ha estat la Roboto (https://www.google.com/fonts/specimen/Roboto) , amb llicncia Apache versi 2.0 (http://www.apache.org/licenses/).

    Roboto regular: Roboto bold:

    2.5.2. Mides de la fontVersi escriptori: Versi dispositiu mbil:

    Ttol gran(36 pxels, negreta)

    Subttol(24 pxels, negreta)

    Text normal(18 pxels)

    Text petit(14 pxels)

    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 - PAC3per Jordi Zango Novell (jzango@uoc.edu) 8

    http://www.apache.org/licenses/https://www.google.com/fonts/specimen/Roboto

  • 2. Guia d'estil

    2.6. Retcula2.6.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 - PAC3per Jordi Z