PRACTICA_AI.pdf

7/28/2019 PRACTICA_AI.pdf

1/24

PROPOSTA DARQUITECTURA DUN LLOC WEB:

ARBRE DE CONTINGUTS I PRINCIPALS WIREFRAMES

rau

multimdia

arquitectura de la informaci

Jaume Villarreal Quintana


2/24

ARQUITECTURA DE LA INFORMACI PRCTICA

Grau en Multimdia

- 2 -

BLOC 0

Prvies

BLOC 1

Objectius

BLOC 2

Arbre de continguts

BLOC 3

Wireframes

BLOC 4

Opini personal

RECURSOS

IMATGES

0406

0822

03

24


3/24


Grau en Multimdia

- 3 -

SOBRE LARBRE DE CONTINGUTS

SOBRE EL WIREFRAME

Larbre de continguts s un dels primers documents que ha de dissenyar un arqui-

tecte de la informaci quan senfronta a la creaci o la remodelaci dun lloc web.

Aquesta proposta estableix una estructura que, emulant la conguraci dun arbre,

es basteix a partir dun punt de partida que actua darrel.

A partir daquest nucli sestructuren els diferents sistemes de navegaci que

sajusten als esquemes organitzatius establerts amb anterioritat per tal de facilitar

a lusuari laccs i la cerca de continguts.

El wireframe s el document que mostra de manera esquemtica la distribuci de

blocs que tindr cadascuna de les pgines dun projecte web. Daquesta manera es

constitueix com lesquelet de lestructura visual dun lloc web.

A causa de la seva naturalesa, aquest s un document que en molts casos caldr

traar de manera interdisciplinar, doncs en ell no noms shi referencia la distribu-

ci dels blocs de continguts. El wireframe tamb ha doferir un disseny net, equili-

brat i amable a lusuari, tasca aquesta que recau sobre el dissenyador.


4/24

OBJECTIUS


Grau en Multimdia

- 4 -


5/24


Grau en Multimdia

- 5 -

Implementar un registre dalta dusuaris.

Establir un punt daccs per a usuaris registats.

Acotar el nivell daccs a continguts en funci del perfil dusuari.

Optimitzar lesquema dorganitzaci de les subcategories que ho requereixin.

Mostrar informaci actualitzada del joc: data dalta, cirteris de classificacii comentaris de la comunitat.

Millorar el sistema de votaci i la visualitzaci global de valoracions del jocdins de la fitxa del joc.

Reorganitzar els blocs de disseny i contingut de la fitxa del joc.

Consolidar la creaci duna comunitat dusuaris, facilitant la integraci dediferents xarxes socials.

Mostrar la classificaci taxonmica del joc, tant a nivell de categories comdetiquetes.

Facilitar els mecanismes de cerca mitjanant formularis de cerca avanada.

Reorganitzar la classificaci dels jocs segons categories, basant-se en cri-teris datenci a la igualtat i la diversitat.

Millorar laccs a la informaci presentada dins de la fitxa del joc.

Implementar nous mecanismes de participaci i consolidaci de la comunitatvirtual.

Integrar les xarxes socials i el frum dins de la fitxa de joc.

Crear un frum de consulta i transferncia dinformaci per a usuaris regis-trats.


6/24

ARBRE DE CONTINGUTS


Grau en Multimdia

- 6 -


7/24


Grau en Multimdia

- 7 -

SISTEMES DE NAVEGACI GLOBAL


8/24

WIREFRAMES*

*La mida del document pot penalitzar la llegibilitat dels wireframes. A lapartat de recursos ho torbareu lenlla als arxius originals.


Grau en Multimdia

- 8 -


9/24


Grau en Multimdia

- 9 -

WIREFRAME ESQUEMTIC


10/24


Grau en Multimdia

- 10 -

WIREFRAME HOME


11/24


Grau en Multimdia

- 11 -

WIREFRAME SUBHOME



12/24


Grau en Multimdia

- 12 -

WIREFRAME FITXA JOC (I)



13/24


Grau en Multimdia

- 13 -

WIREFRAME FITXA JOC (II)



14/24


Grau en Multimdia

- 14 -

WIREFRAME FITXA JOC (III)


15/24



16/24

Grau en Multimdia

- 16 -

WIREFRAME DE PERFIL DUSUARI (I)


17/24


18/24



19/24

Grau en Multimdia

- 19 -

WIREFRAME DE FORUM (I)



20/24

Grau en Multimdia

- 20 -

WIREFRAME DE FORUM (II)



21/24

Grau en Multimdia

- 21 -

WIREFRAME DE MAPA WEB



22/24

Grau en Multimdia

- 22 -

OPINI PERSONAL



23/24

Grau en Multimdia

- 23 -

La meva valoraci sobre lassignatura s molt positiva. Per una banda perqu mal-

grat la gran quantitat de matria que requereix lassignatura els continguts terics

estan molt ben estructurats i el llenguatge emprat converteix el temari en una

lectura gil, alhora que profunda, organitzada i aclaridora.

El fet de ser mestre per vocaci i de professi fa que de vegades abusem del nos-

tre defecte professional. Coneixedor de la dicultat que de vegades suposa trobar

el cam ms adient per fer arribar els coneixements que cal transmetre, aplaudeixo

aquest estil ja que s, al meu entendre, una de les bases de lxit de lassignatura.

Per altra banda, lacompanyament fet des del departament de conultoria ha aju-

dat enormement a fer progressar els meus coneixements. s dagrair la dedicaci

dispensada i els aclariments oferts tant a travs del frum com del tauler. La lec-

tura personal de vegades pot dur a malentesos o interpretacions errnies que tan

sols un professional amb experincia pot redrear. Aix doncs, com a mestre, tot el

meu reconeixement a la tasca feta des de la tutoria de lassignatura.

En darrer punt, i no menys important, cal valorar de manera extremandament po-

sitiva lexperincia de la prctica. Ha estat lexcusa ideal per posar en joc tots els

coneixements adquirits al llarg del semestre. Ha estat el moment oport per cons-

trastar el meus coneixements i loportunitat de replantejar i reenfocar planteja-

ments que en prctiques anteriors shavien manifestat com a erronis o poc denits.

Aix doncs, ha estat graticant veure com poc a poc el projecte visualitzat ha anat

prenent forma de manera coherent i consistent, prenent com a punt de refern-

cia lexperincia de lusuari i la visi global de larquitecte. Aquest ha estat, sens

dubte, el signe evident que shan adquirit uns fonaments notables i, sobretot, queencara queda molta feina per fer.



24/24

Grau en Multimdia

- 24 -

Sobre Arquitectura de la Informaci

http://iainstitute.org/es http://www.pebbleroad.com/downloads/organizing-digital-information-for-others-

v1.pdf

Morville, Rosenfeld (2010). Arquitectura de la informaci per al World Wide Web.

Catalunya. Fundaci per a la Universitat Oberta de Catalunya.

Sobre continguts i wireframes

http://olgacarreras.blogspot.com.es/2007/02/wireframes.html

http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-

applications/

http://blog.teamtreehouse.com/20-steps-to-better-wireframing

Webs emprades per realitzar el benchmarking

http://www.minijuegos.com/ http://es.bigpoint.com/

http://www.games.co.uk/

http://www.roundgames.com/

http://www.juegosjuegos.com/

Sobre les imatges:

Totes les imatges relacionades amb els arbres de continguts i wireframes han estat

realitzades per lautor.

El logo del portal JUEGOSJUEGOS.COM ha estat importat del seu web.

La icona del joc AngryBirds ha estat descarregada del portal .

Per una correcta visualitzaci, podeu trobar els wireframes ampliats en el segent enlla.
https://www.box.com/s/7l0nhxqvxbwyinba4qv8https://www.box.com/s/7l0nhxqvxbwyinba4qv8

PRACTICA_AI.pdf

Documents