Download pdf - [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


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


3/25




1.PROTOTIPS DESCRIPTORI

1.1 INICI


4/25




1.2 CATLEG


5/25




1.3 NOTCIES


6/25




1.4 AUTORS


7/25




1.5 PRESENTACI


8/25




1.6 FITXA DE LLIBRE


9/25




1.7 CARRO DE LA COMPRA


10/25


11/25




2.2 CATLEG


12/25




2.3 NOTCIES


13/25




2.4 AUTORS


14/25




2.5 PRESENTACI


15/25




2.6 FITXA DE LLIBRE


16/25






17/25




3.PROTOTIPS PER A TELFON MBIL

3.1 INICI


18/25




3.2 CATLEG


19/25




3.3 NOTCIES


20/25




3.4 AUTORS


21/25




3.5 PRESENTACI


22/25




3.6 FITXA LLIBRE


23/25






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.


25/25



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