PRÀCTICA: Finalització del prototipat gràfic multiplataforma [Disseny d’Interfícies Multimèdia]

evolució

Quan es treballa en el disseny d’un projecte de responsive web design, el format dels diferents dispositius de sortida pot comportar variacions gràfiques, que tinguin com a objectiu que el contingut de les diferents pàgines es pugui veure bé, que tot el text sigui llegible, i que els elements interactius tinguin la mida suficient com per ser seleccionats amb facilitat.
Cal tenir en compte, però, que un projecte de responsive web design ha de resultar coherent tot i les variacions comportades per la visualització en els diferents dispositius. És a dir, l’usuari ha d’obtenir una experiència visual i d’ús semblant, sigui quin sigui el dispositiu des del que visualitzi el web.
Aquesta Pràctica consisteix en optimitzar i completar, a partir dels comentaris del consultor i de la reflexió personal per part de l’estudiant, el prototip gràfic iniciat en la PAC3, tant per web com per a mòbil, i en reflexionar sobre el procés dut a terme.

El lliurament de la Pràctica consisteix en dues parts:

  • el disseny gràfic de totes les pàgines incloses en els protips funcionals (wireframes) per a escriptori i per a smartphone.
  • l’argumentació que exposi quin ha estat el procés de disseny i que justifiqui les decisions preses per a la gràfica. Aquest document ha d’incloure els següents continguts: criteris d’optimització, procés d’optimització i finalització dels prototips i millores de futur

Data: curs 2013-2014 [1r semestre]

A tenir en compte: és interessant llegir els continguts* del blog de l’assignatura referits a:

  • gèneres
  • entorns
  • disseny centrat en l’usuari
  • usabilitat

Si el consultor/a ho suggereix, és altament recomanable compartir al fòrum de l’assignatura els wireframes que es van dissenyant. Aquesta dinàmica permet afinar els dissenys propis i ajuda a desenvolupar col·lectivament els projectes amb la resta de companys d’aula.

*No és requerida la lectura de tots els blocs d’aquests continguts. Els consultors faciliten la relació d’apartats que són necessaris pel desenvolupament de la PAC.

Dificultat: mitjana/alta

Durada: 10/12 hores aproximadament.

Valoració: A


DOCUMENTS ADJUNTS

PAC3: Prototipat gràfic responsiu [Disseny d’Interfícies Multimèdia]

evolució

A més del prototipat funcional, la preparació de la línia gràfica d’una aplicació forma part del disseny de la seva interfície. El disseny visual té molta importància, perquè és el que posa en contacte l’usuari amb el contingut de l’aplicació. Ha de tenir en compte, entre d’altres, dos factors fonamentals: la gràfica d’una aplicació i el disseny visual. Aquesta PAC consisteix a realitzar el prototip (disseny) gràfic de la versió web per a escriptori i smartphone (prototipat d’alta fidelitat) a partir dels wireframes que estaven inclosos en l’enunciat i entregats per part de l’alumne a la PAC2, i a definir la guia d’estil corresponent.

Per fer-ho caldrà treballar sobre tres grans blocs:

  • FASE 1 – PROTOTIP GRÀFIC PER A ESCRIPTORI
    es prendran com a base 3 wireframes (la plana d’inici i dues pàgines de segon nivell, a triar per l’estudiant) subministrats amb l’enunciat de la PAC2.
  • FASE 2 – PROTOTIP GRÀFIC PER A SMARTPHONE
    es prendran com a base 3 wireframes entregats per l’alumne a la PAC2 (la plana d’inici i les mateixes dues pàgines de segon nivell triades per a la versió escriptori).
  • FASE 3 – GUIA D’ESTIL
    a partir de les decisions de disseny i de l’aplicació que s’ha ealitzat anteriorment, cal preparar una guia d’estil que descrigui les pautes de disseny del web, i que servirà per a garantir la coherència en la identitat visual en els diferents dispositius. Aquesta guia d’estil ha de descriure de manera molt visual, és a dir, intentant incloure només el text que sigui realment imprescindible.

Data: curs  2013-2014 [1r semestre]

A tenir en compte: és interessant llegir els continguts* del blog de l’assignatura referits a:

  • gèneres
  • entorns
  • disseny centrat en l’usuari
  • usabilitat

Si el consultor/a ho suggereix, és altament recomanable compartir al fòrum de l’assignatura els wireframes que es van dissenyant. Aquesta dinàmica permet afinar els dissenys propis i ajuda a desenvolupar col·lectivament els projectes amb la resta de companys d’aula.

*No és requerida la lectura de tots els blocs d’aquests continguts. Els consultors faciliten la relació d’apartats que són necessaris pel desenvolupament de la PAC.

Dificultat: mitjana/alta

Durada: 8/10 hores aproximadament.

Valoració: A


DOCUMENTS ADJUNTS

PAC 2: Prototipat funcional responsive per a smartphone [Disseny d’Interfícies Multimèdia]

evolució

El disseny funcional per a dispositius mòbils ha de tenir en compte alguns factors diferents als que es tenen presents quan es treballa per a escriptori. Específicament en el cas de l’smartphone, cal accentuar la importància de la simplicitat i l’agilitat en la descàrrega de la informació, i tenir en compte quins continguts realment utilitzarà l’usuari en aquest dispositiu. L’objectiu d’aquesta pràctica consisteix a realitzar el prototip funcional (wireframes) de la versió responsive per a smartphone, d’un disseny preexistent per a escriptori.*

*El projecte triat per desenvolupar els wireframes ha estat el de ‘JuegosJuegos.com’.

La realització de la PAC es basa en el desenvolupament de les següents fases:

  • FASE 1: tenint en compte els requeriments de disseny per a smartphone i partint de l’arbre de continguts per a escriptori, caldrà seleccionar els continguts que realment cal traslladar a aquest dispositiu, tenint en compte que els wireframes per a smartphone es basaran en aquest nou arbre de continguts, i no en els continguts per a escriptori, molt més extensos.
  • FASE 2: preparar els wireframes per a smartphone de totes les pantalles que teníem en escriptori, exceptuant aquelles que hagin estat eliminades en el nou arbre de continguts.
  • FASE 3: escriure un informe que inclogui quines són les característiques fonamentals dels wireframes per a smartphone que s’han preparat, quins factors s’han tingut en compte per a l aseva creació i quina ha estat l’experiència en la realització dels mateixos (dificultats i reptes).

Data: curs 2013-2014 [1r semestre]

A tenir en compte: és interessant llegir els continguts* del blog de l’assignatura referits a:

  • gèneres
  • entorns
  • disseny centrat en l’usuari
  • usabilitat

Si el consultor/a ho suggereix, és altament recomanable compartir al fòrum de l’assignatura els wireframes que es van dissenyant. Aquesta dinàmica permet afinar els dissenys propis i ajuda a desenvolupar col·lectivament els projectes amb la resta de companys d’aula.

*No és requerida la lectura de tots els blocs d’aquests continguts. Els consultors faciliten la relació d’apartats que són necessaris pel desenvolupament de la PAC.

Dificultat: mitjana/alta

Durada: 8/10 hores aproximadament.

Valoració: A

DOCUMENTS ADJUNTS