Gmultimèdia rau
PROPOSTA D’ARQUITECTURA D’UN LLOC WEB: ARBRE DE CONTINGUTS I PRINCIPALS WIREFRAMES
Jaume Villarreal Quintana
PRÀCTICA
arquitectura de la informació
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
BLOC 0
03
Prèvies
04
BLOC 1 Objectius
06
BLOC 2 Arbre de continguts
08
BLOC 3 Wireframes
22
BLOC 4 Opinió personal
24
RECURSOS IMATGES
-2Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
prèvies
SOBRE L’ARBRE DE CONTINGUTS L’arbre de continguts és un dels primers documents que ha de dissenyar un arquitecte de la informació quan s’enfronta a la creació o la remodelació d’un lloc web. Aquesta proposta estableix una estructura que, emulant la configuració d’un arbre, es basteix a partir d’un punt de partida que actua d’arrel. A partir d’aquest nucli s’estructuren els diferents sistemes de navegació que s’ajusten als esquemes organitzatius establerts amb anterioritat per tal de facilitar a l’usuari l’accés i la cerca de continguts.
SOBRE EL WIREFRAME El wireframe és el document que mostra de manera esquemàtica la distribució de blocs que tindrà cadascuna de les pàgines d’un projecte web. D’aquesta manera es constitueix com l’esquelet de l’estructura visual d’un lloc web. A causa de la seva naturalesa, aquest és un document que en molts casos caldrà traçar de manera interdisciplinar, doncs en ell no només s’hi referencia la distribució dels blocs de continguts. El wireframe també ha d’oferir un disseny net, equilibrat i amable a l’usuari, tasca aquesta que recau sobre el dissenyador.
-3Grau en Multimèdia
PRÀCTICA
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
OBJECTIUS
-4Grau en Multimèdia
objectius
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
Reorganitzar la classificació dels jocs segons categories, basant-se en criteris d’atenció a la igualtat i la diversitat. Implementar un registre d’alta d’usuaris. Establir un punt d’accés per a usuaris registats. Acotar el nivell d’accés a continguts en funció del perfil d’usuari. Crear un fòrum de consulta i transferència d’informació per a usuaris registrats. Facilitar els mecanismes de cerca mitjançant formularis de cerca avançada. Optimitzar l’esquema d’organització de les subcategories que ho requereixin. Reorganitzar els blocs de disseny i contingut de la fitxa del joc. Millorar l’accés a la informació presentada dins de la fitxa del joc. Mostrar informació actualitzada del joc: data d’alta, cirteris de classificació i comentaris de la comunitat. Millorar el sistema de votació i la visualització global de valoracions del joc dins de la fitxa del joc. Implementar nous mecanismes de participació i consolidació de la comunitat virtual. Integrar les xarxes socials i el fòrum dins de la fitxa de joc. Mostrar la classificació taxonòmica del joc, tant a nivell de categories com d’etiquetes. Consolidar la creació d’una comunitat d’usuaris, facilitant la integració de diferents xarxes socials. -5Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
ARBRE DE CONTINGUTS
-6Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
SISTEMES DE NAVEGACIÓ GLOBAL
-7Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAMES*
*La mida del document pot penalitzar la llegibilitat dels wireframes. A l’apartat de recursos ho torbareu l’enllaç als arxius originals. -8Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME ESQUEMÀTIC
-9Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME HOME
- 10 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME SUBHOME
- 11 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME FITXA JOC (I)
- 12 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME FITXA JOC (II)
- 13 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME FITXA JOC (III)
- 14 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME DE CERCA
- 15 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME DE PERFIL D’USUARI (I)
- 16 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME DE PERFIL D’USUARI (II)
- 17 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME DE CONTACTE
- 18 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME DE FORUM (I)
- 19 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME DE FORUM (II)
- 20 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
WIREFRAME DE MAPA WEB
- 21 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
OPINIÓ PERSONAL
- 22 Grau en Multimèdia
ARQUITECTURA DE LA INFORMACIÓ
valoració
La meva valoració sobre l’assignatura és molt positiva. Per una banda perquè malgrat la gran quantitat de matèria que requereix l’assignatura els continguts teòrics 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 ‘nostre defecte professional’. Coneixedor de la dificultat que de vegades suposa trobar el camí més adient per fer arribar els coneixements que cal transmetre, aplaudeixo aquest estil ja que és, al meu entendre, una de les bases de l’èxit de l’assignatura. Per altra banda, l’acompanyament fet des del departament de conultoria ha ajudat enormement a fer progressar els meus coneixements. És d’agrair la dedicació dispensada i els aclariments oferts tant a través del fòrum com del tauler. La lectura personal de vegades pot dur a malentesos o interpretacions errònies que tan sols un professional amb experiència pot redreçar. Així doncs, com a mestre, tot el meu reconeixement a la tasca feta des de la tutoria de l’assignatura. En darrer punt, i no menys important, cal valorar de manera extremandament positiva l’experiència de la pràctica. Ha estat l’excusa ideal per posar en joc tots els coneixements adquirits al llarg del semestre. Ha estat el moment oportú per constrastar el meus coneixements i l’oportunitat de replantejar i reenfocar plantejaments que en pràctiques anteriors s’havien manifestat com a erronis o poc definits. Així doncs, ha estat gratificant veure com poc a poc el projecte visualitzat ha anat prenent forma de manera coherent i consistent, prenent com a punt de referència l’experiència de l’usuari i la visió global de l’arquitecte. Aquest ha estat, sens dubte, el signe evident que s’han adquirit uns fonaments notables i, sobretot, que encara queda molta feina per fer. - 23 Grau en Multimèdia
PRÀCTICA
ARQUITECTURA DE LA INFORMACIÓ
PRÀCTICA
Sobre Arquitectura de la Informació • http://iainstitute.org/es • http://www.pebbleroad.com/downloads/organizing-digital-information-for-othersv1.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-mockupapplications/ • 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 l’autor. • 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 següent enllaç. - 24 Grau en Multimèdia
