[Disseny d'interfícies multimèdia] Pràctica: Prototipat gràfic multiplataforma

  • View
    216

  • Download
    0

Embed Size (px)

Text of [Disseny d'interfícies multimèdia] Pràctica: Prototipat gràfic multiplataforma

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    1/25

    D I S S E N Y D I N T E R F C I E S M U L T I M D I A

    P R C T I C A

    J O R D I L L O N C H E S T E V E

    C C B Y - N C - S A

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    2/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 2/25

    NDEX

    ndex ................................................................................................................................. 2

    1. Prototips descriptori ................................................................................................ 3

    1.1 Inici ..................................................................................................................... 3

    1.2 Catleg ................................................................................................................ 4

    1.3 Notcies .............................................................................................................. 5

    1.4 Autors ................................................................................................................ 6

    1.5 Presentaci ........................................................................................................ 7

    1.6 Fitxa de llibre .................................................................................................... 8

    1.7 Carro de la compra ........................................................................................... 9

    2. Prototips per a tauleta vertical ............................................................................. 102.1 Inici ................................................................................................................... 10

    2.2 Catleg .............................................................................................................. 11

    2.3 Notcies ............................................................................................................ 12

    2.4 Autors .............................................................................................................. 13

    2.5 Presentaci ...................................................................................................... 14

    2.6 Fitxa de llibre .................................................................................................. 15

    2.7 Carro de la compra ......................................................................................... 16

    3. Prototips per a telfon mbil................................................................................ 173.1 Inici ................................................................................................................... 17

    3.2 Catleg .............................................................................................................. 18

    3.3 Notcies ............................................................................................................ 19

    3.4 Autors .............................................................................................................. 20

    3.5 Presentaci ...................................................................................................... 21

    3.6 Fitxa llibre ........................................................................................................ 22

    3.7 Carro de la compra ......................................................................................... 23

    4. Informe ...................................................................................................................... 244.1 Criteris doptimitzaci.................................................................................... 24

    4.2 Procs doptimitzaci i finalitzaci dels prototips ..................................... 24

    4.3 Millores de futur ............................................................................................. 24

    5. Bibliografia i altres recursos................................................................................. 25

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    3/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 3/25

    1.PROTOTIPS DESCRIPTORI

    1.1 INICI

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    4/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 4/25

    1.2 CATLEG

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    5/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 5/25

    1.3 NOTCIES

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    6/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 6/25

    1.4 AUTORS

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    7/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 7/25

    1.5 PRESENTACI

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    8/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 8/25

    1.6 FITXA DE LLIBRE

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    9/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 9/25

    1.7 CARRO DE LA COMPRA

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    10/25

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    11/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 11/25

    2.2 CATLEG

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    12/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 12/25

    2.3 NOTCIES

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    13/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 13/25

    2.4 AUTORS

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    14/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 14/25

    2.5 PRESENTACI

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    15/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 15/25

    2.6 FITXA DE LLIBRE

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    16/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 16/25

    2.7 CARRO DE LA COMPRA

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    17/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 17/25

    3.PROTOTIPS PER A TELFON MBIL

    3.1 INICI

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    18/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 18/25

    3.2 CATLEG

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    19/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 19/25

    3.3 NOTCIES

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    20/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 20/25

    3.4 AUTORS

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    21/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 21/25

    3.5 PRESENTACI

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    22/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 22/25

    3.6 FITXA LLIBRE

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    23/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 23/25

    3.7 CARRO DE LA COMPRA

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    24/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    Jordi Llonch Esteve CC BY-NC-SA Pg. 24/25

    4.INFORME

    4.1 CRITERIS D OPTIMITZACI

    Desprs de la correcci de la PAC 3 he tingut present els criteris proposats pelsusuaris i corroborats per la consultora. Aquests es referien a ls duna mateixaidentitat grfica en les tres plataformes, ja que la versi mbil era massa diferentde les altres dues. A ms, feia falta un ajustament en la tipografia (tant pel que fa ala dimensi com als colors) en la versi mbil.

    4.2 PROCS D OPTIMITZACI I FINALITZACI DELSPROTOTIPS

    El programari emprat per a la realitzaci dels prototips en les tres plataformes haestat lAdobe Photoshop, grcies a la facilitat ds del qual, he pogut crear unaretcula amb lajuda de rectangles. Pel que fa a la identitat grfica he fet s delsmateixos colors per a ttols i textos, de la mateixa manera que he utilitzat unamateixa tipografia per a cada situaci.

    Per a les tres versions he partit dunes dimensions en pxels, per sempre tenintpresent ladaptabilitat del contingut a pantalles de diferents amples.

    4.3 MILLORES DE FUTUR

    Crec que si torns a iniciar la prctica des de zero, faria un canvi substancial alarquitectura de la informaci. Podria redissenyar la pgina principal i afegir-hiopcions de compra. A ms, hi afegiria una ordenaci per categories i alfabticadins el catleg.

    Per concloure, he trobat molt tils els comentaris de la meva consultora (Tona

    Monjo Palau) en les PACs anteriors, els quals he implementat en aquesta prctica.

  • 7/30/2019 [Disseny d'interfcies multimdia] Prctica: Prototipat grfic multiplataforma

    25/25

    Disseny dinterfcies multimdia

    Prctica: Prototipat grfic multiplataforma

    5.BIBLIOGRAFIA I ALTRES RECURSOS

    Tona Monjo Palau. Disseny dinterfcies multimdia. Barcelona. Fundaci per a

    la Universitat Oberta de Catalunya, 2011.

    Wiki de lassignatura. [en lnia]. Disponible a Internet noms a travs delcampus virtual.

    Interfaces tctiles: el desafo de las tabletas. [en lnia]http://www.slideshare.net/Afidalgo/interfaces-tctiles-ux-spain [Consulta:novembre 2012]

    Responsive design trends for the Mobile web: [en lnia]http://www.designtickle.com/2012/04/responsive-design-trends-mobile-

    web/[Consulta: novembre 2012]Jornada de Experiencia de Usuario 2012http://www.uxed.org/jornadaux/jornada-ux-2012/ [Consulta: novembre2012]

    Les imatges presents en aquest document sn de domini pblic, deproducci prpia o semparen a ls raonable (fair use).

    http://www.slideshare.net/Afidalgo/interfaces-tctiles-ux-spainhttp://www.slideshare.net/Afidalgo/interfaces-tctiles-ux-spainhttp://www.designtickle.com/2012/04/responsive-design-trends-mobile-web/http://www.designtickle.com/2012/04/responsive-design-trends-mobile-web/http://www.designtickle.com/2012/04/responsive-design-trends-mobile-web/http://www.uxed.org/jornadaux/jornada-ux-2012/http://www.uxed.org/jornadaux/jornada-ux-2012/http://www.uxed.org/jornadaux/jornada-ux-2012/http://www.designtickle.com/2012/04/responsive-design-trends-mobile-web/http://www.designtickle.com/2012/04/responsive-design-trends-mobile-web/http://www.slideshare.net/Afidalgo/interfaces-tctiles-ux-spain