Page 1

prototipat grĂ fic per a web i smartphone PAC3


Disseny d'interfícies multimèdia – PAC3

1. Prototipat gràfic web: home............................3 2. Prototipat gràfic web: best sellers...................4 3. Prototipat gràfic web: fitxa de llibre.................5 4. Prototipat gràfic web: contacte........................6 5. Prototipat gràfic smartphone: home................7 6. Prototipat gràfic smartphone: best sellers.......8 7. Prototipat gràfic smartphone: fitxa de llibre.....9 8. Prototipat gràfic smartphone: cistella..............10 9. Argumentació 9.1. per a web................................................11 9.2. per a smartphone....................................12 10. Bibliografia....................................................13

02/05/2012


Disseny d'interfícies multimèdia – PAC3

1.

02/05/2012

Prototipat gràfic web: home

3


Disseny d'interfícies multimèdia – PAC3

2.

02/05/2012

Prototipat gràfic web: best sellers

4


Disseny d'interfícies multimèdia – PAC3

3.

02/05/2012

Prototipat gràfic web: fitxa llibre

5


Disseny d'interfícies multimèdia – PAC3

4.

02/05/2012

Prototipat gràfic web: contacte

6


Disseny d'interfícies multimèdia – PAC3

5.

02/05/2012

Prototipat gràfic smartphone: home

7


Disseny d'interfícies multimèdia – PAC3

6.

02/05/2012

Prototipat gràfic smartphone: best sellers

8


Disseny d'interfícies multimèdia – PAC3

7.

02/05/2012

Prototipat gràfic smartphone: fitxa llibre

9


Disseny d'interfícies multimèdia – PAC3

8.

02/05/2012

Prototipat gràfic smartphone: cistella

10


Disseny d'interfícies multimèdia – PAC3

02/05/2012

9. Argumentació 9.1. Per a web Els prototipats per a web que presentem, estan basats en una resolució inicial de 980px d'ample i 768px d'alçada visible, aquesta variarà depenent dels continguts de cada plana, i s'hi podran accedir mitjançant les scroll bars laterals. Hem procurat seguir el llibre d'estil de la web original de Virus Editorial, és a dir, tenint en compte la seva web, hem adaptat els continguts i el nou disseny sense alterar de manera radical la seva imatge. Per tant, hem mantingut l'aspecte sobri i monocromàtic, aplicant l'escala de grisos, que sosté el lloc original. D'altra banda, per a la ordenació del contingut s'ha establert una retícula molt marcada, que es repeteix en totes les planes, i que emmarca tot els continguts solidificant l'estructura i separant-ne clarament els elements. Amb el nou disseny, el nombre de continguts ha augmentat, per això és important una bona organització i claredat a l'hora d'exposar-los. La tipografia escollida ha estat la clàssica arial, de la família romana (sans serif). La seva difusió i facilitat de lectura ens asseguren l'èxit en qualsevol plataforma, i no correm el risc que els navegadors no reconeguin la tipografia. Pel que fa a l'alineació, en general, s'ha fet servir la justificada, per donar una imatge de formalitat i per la legibilitat. Tot i així, en certs casos, on el poc l'espai condicionava el text, s'ha alineat a la dreta o l'esquerra segons convingués. S'han seguit els wireframes creats per Cristina Xoy, en la seva pràctica final d'Arquitectura de la informació el semestre passat. Amb el nou disseny es busca una funcionalitat més amplia del lloc web i una presentació dels productes més amable i organitzada, facilitant a l'usuari la localització d'aquests, evitant recorreguts innecessaris per el lloc. Tanmateix, s'han fet algunes modificacions en els dissenys originals. Per exemple, s'ha comprimit en algunes ocasions el contingut, prioritzant l'expansió horitzontal dels elements en lloc de verticalment, per visualitzar el màxim de continguts sense fer ús de les barres laterals, com en la pàgina referida com a “best seller” i la de “contacte”. D'altra

11


Disseny d'interfícies multimèdia – PAC3

02/05/2012

banda, en el prototipat de la plana “fitxa de llibre”, s'ha valorat moure algun dels elements, així com les icones per compartir els continguts.

9.2.

Per a smartphone

En el disseny dels prototipat gràfics per a un smartphone, s'han seguit els wireframes creats en la última PAC. Tot i així, s'hi han fet les modificacions aconsellades per la consultora i d'altres que ens han semblat convenients en el desenvolupament de la pràctica. Els prototipats han estat dissenyats basant-nos en el format i la resolució d'un Sony Ericsson Xperia Arc. La resolució de la pantalla tàctil és de 480x854 píxels, per unes dimensions de 4'2 polsades, amb sistema operatiu Android. Seguint amb el llibre d'estil que ens hem imposat, hem dissenyat l'aplicació amb un ventall de colors restringit, l'escala de grisos, per donar una connotació de sobrietat. De la mateixa manera, hem adaptat el sistema de retícules que havíem disposat al lloc web per que l'usuari relacioni les interfícies i associi el disseny a l'entitat. Pel que fa a la tipografia, hem seguit utilitzant la font arial, per la seva funcionalitat. Tot i que hem reduït el volum de text, en relació amb els wireframes, es fa difícil inserir tanta informació, que, al nostre criteri, és necessària. La inclusió d'icones en aquest tipus d'aplicacions és molt útil per no sobredimensionar o atapeir de dades la interfície, fent-la més usable i clara. Malgrat que l'us de finestres desplegables es van desaconsellar, pensem que segueix sent una bona opció alhora de comprimir continguts sense haver-los d'eliminar. Tanmateix, no es preveu que l'usuari les tingui totes obertes alhora, sinó que depenent de les seves necessitats n'obrirà una i en deixarà tancades la resta. En definitiva, el què s'ha buscat amb aquests prototipats és definir una navegació fàcil i directe, tenint en compte el context d'ús d'aquestes aplicacions, resolent amb un alt contrast per facilitar la visualització i facilitant que es puguin realitzar les operacions amb una sola mà. D'altra banda, s'ha potenciat de manera especial la integració i vinculació amb les xarxes socials, donant la possibilitat de compartir tots els continguts de l'aplicació.

12


Disseny d'interfícies multimèdia – PAC3

10.

02/05/2012

Bibliografia

Monjo Palau, Tona (2011). “Disseny d'interfícies multimèdia” . Barcelona: Eureca Media, S.L. , 2011 Xoy Serra, Cristina (2011). “Proposta justificada de l'AI d'un lloc web” Pràctica Final. U.O.C. Android Design [Data última consulta: 29 d'abril del 2012]. http://developer.android.com/design/index.html Media queries [Data última consulta: 24 d'abril del 2012]. http://mediaqueri.es/ Design shack [Data última consulta: 24 d'abril del 2012]. http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-forresponsive-web-design

13

Prototipat gràfic per a web i smartphone  

Pac3 Disseny d'interfícies web

Read more
Read more
Similar to
Popular now
Just for you