SlideShare une entreprise Scribd logo
1  sur  9
Télécharger pour lire hors ligne
9-4-201421:22:46.183+02:00 - 1 - 
AULA 
06.517 Arquitectura de la informació aula 1 
Proposta d'arquitectura d'un lloc web responsiu: 
Arbre de continguts i wireframe per a escriptori i 
mòbil 
Inici: 
09-04-14 
Lliurament: 
30-04-14 
Solució: 
14-05-14 
Qualificació: 
14-05-14 
Dedicació: 
000 % 
Descripció 
Després de la PAC2, emmarcada en la fase d’anàlisi i investigació de redisseny d’un lloc 
web, arribem ara a la fase de disseny conceptual. 
Hem de començar a dibuixar sobre paper les idees i requeriments recollits. 
Es tracta de definir l’arbre de continguts i de fer una primera proposta només d’un 
wireframe determinat. 
Objectius i competències 
Competències 
– Capacitat per innovar i generar noves idees. 
– Capacitat per planificar i gestionar projectes en l'entorn de les TIC. 
– Capacitat per avaluar solucions tecnològiques i elaborar propostes de projectes 
tenint en compte els recursos, les alternatives disponibles i les condicions de mercat. 
– Capacitat per conceptualitzar, dissenyar i avaluar les interfícies i esquemes 
d'interacció de les aplicacions i dispositius d'accés a l'informació digital. 
Objectius 
– Estructurar, dissenyar i argumentar una nova proposta d’arquitectura.
9-4-201421:22:46.183+02:00 - 2 - 
– Crear els primers documents bàsics d’un projecte d’arquitectura de la informació 
com són un arbre de contingut (també anomenat: blueprint, mapa de contingut...) 
i una primera proposta d’un sol wireframe (també anomenat maqueta, retícula, 
prototip, mockup,...). 
– Utilitzar eines i tècniques per dibuixar mapes i wireframes. 
Descripció 
Hem de fer una proposta de millora: reestructurant, reorganitzant i introduint nous 
continguts i funcionalitats sempre centrar-nos en l’interés i l’experiència d’ús de l’usuari. 
Dibuixarem l’arbre de continguts i un wireframe per a un lloc web responsiu. 
Per abordar-ho ens podem ajudar de les idees i conclusions extretes de la PAC2 i també 
podem aplicar noves idees que vagin sortint en el procés. 
Hem de continuar amb els mateixos sites seleccionats en la PAC2. 
En el cas de voler canviar de site caldria justificar-ho. 
Us recordem els sites proposats: 
– www.artehabitat.com 
– www.immoblesbarcelona.com 
– www.taquilla10.com 
Haurem d’elaborar un únic document que inclogui les següents parts: 
PART I 
Crear un nou arbre de continguts del lloc web. L'arbre ha de mostrar fins el tercer i/o 
quart nivell de navegació (depenent del grau de profunditat que tingui), ha de ser clar i 
intuïtiu per l'usuari final. 
Es valorarà la introducció de nous continguts i noves funcionalitats (no contemplats en 
els sites actuals) i reestructuracions que puguin ser d’interés per l’usuari. 
Dibuixem l’arbre adaptat als continguts per a escriptori. 
PART II
9-4-201421:22:46.183+02:00 - 3 - 
Definir un wireframe d’una pàgina de detall corresponent al site seleccionat. El 
wireframe ha d’estar pensat per ser responsiu, és a dir, que tot el site s’adapti als canvis 
de mida del navegador i a les diferents mides de pantalla dels diversos dispositius. 
En aquest cas, només dibuixarem la mateixa pàgina per a escriptori i per a mòbil. 
Cal dibuixar el wireframe optimitzant per a resolució de 1024x768 d’escriptori i per 
a 320x480 de mòbil. (Atenció!!! Cada pantalla dissenyada caldrà que tingui l’alçada 
que requereixi els seus continguts, no l’hem de fer encaixar en alçada ni als 768px per 
escriptori ni als 480px per a mòbil). 
Caldrà preveure com s’adapten els diferents continguts entre aquestes dues mides de 
pantalles. En aquesta adaptació hi haurà reestructuracions, canvis i potser cal eliminar 
alguns continguts secundaris per a mòbil. 
La pàgina de detall ha de ser la: 
1. fitxa d’un producte (Artehabitat). 
2. fitxa d’un inmoble (Immoblesbarcelona) 
3. fitxa d’un ticket (Taquilla10) 
Si la pàgina proposada conté elements amagats en el contingut central de la pàgina 
(p.ex.: en navegacions locals,..) o interaccions importants caldrà replicar la pàgina o el 
mòdul corresponent per mostrar aquests elements ocults i interaccions. 
Es valorarà la reestructuració i la creació de mòduls de continguts nous i de 
funcionalitats/tasques noves incloses en el disseny del wireframe. 
Anotació: Ara no cal fer totes les pàgines del site, comencem en aquesta PAC amb una 
primera proposta de l’arbre i d’un wireframe i després en la Pràctica ja es revisarà i es 
completarà amb les pàgines principals del site. 
PART III 
Llistar els objectius que s'han volgut aconseguir amb la proposta d’arbre de continguts i 
de wireframe. (màxim 1 pàgina) 
Alguns dels reptes que s’hauran de resoldre en les vostres propostes: 
• www.artehabitat.com 
• Cal potenciar l’integració i protagonisme de la botiga online.
9-4-201421:22:46.183+02:00 - 4 - 
• S’ha de millorar la navegació. 
• ... 
• www.immoblesbarcelona.com 
• S’ha de millorar la navegació i el cercador. 
• S’ha d’enriquir la fitxa de cada inmoble. 
• Cal millorar els resultats de cerca. 
• ... 
• www.taquilla10.com 
• Cal millorar el cercador. 
• S’ha d’enriquir la fitxa de cada ticket. 
• S’ha de potenciar les xarxes socials, pensar en com crear comunitat dins el site. 
• ... 
Anotació: Aquests només són alguns reptes a plantejar-te, però has de pensar i fer d’altres 
millores/reptes. 
Pensar un wireframe 
Pensar un wireframe 
– Pensar en l'usuari final (Disseny Centrat en l'Usuari). L'arbre de continguts i els 
wireframes han de tenir una estructura lògica i clara per a l'usuari final i, sobretot, 
han de respondre als objectius/tasques que pot tenir aquest usuari en accedir a 
cadascuna d'elles. 
– Cercar la consistència però no cal ser estrictes. Per exemple: el sistema de 
navegació principal ha de ser consistent en la gran majoria de pantalles d’un site. Per 
tant, ha de mantenir el seu aspecte, ubicació i comportament però, segons els tipus 
d’escenaris, com potser el cas d’un procés de compra, podria variar i/o obviar-se. 
– Un camí recomanat per començar un wireframe : primer en paper, es fa una 
llista numerada de tot el que ha de tenir la pàgina (continguts, imatges, accions, 
funcionalitats, sensacions,..), després s’agrupa segons relacions, es prioritzen els 
grups importants, es dissenya cada mòdul de contingut, s’adjunten els diferents 
mòduls segons prioritats i al final es passa tot a la “pantalla digital”.
9-4-201421:22:46.183+02:00 - 5 - 
Pensar un wireframe responsiu 
– Flexibilitat. Tot ha de ser flexible en un disseny responsiu: taules, imatges,... 
– Canvis, adicions i substraccions. De vegades, la millor opció per adaptar-se a 
les diferents mides de navegador inclou: canvis, adicions i substraccions entre els 
diferents breakpoints. 
Per dispositius més petits algunes imatges i continguts poden no mostrar-se per 
millorar l’experiència d’usuari . 
O es pot optar per un disseny global més senzill per a que el lloc web tingui un 
aspecte més uniforme a través dels dispositius. 
– Quadrícula fluida. El lloc web pot escalar-se proporcionalment en base a 
percentatges o construir-se en base a un nombre de límits. 
– Les quadrícules més responsives inclouen quadrícules per un mínim de 3 mides 
diferents: 768px o més, 480 a 768px i 320 a 480px. 
Dibuixar un wireframe 
– Simple. Cercar la funcionalitat per sobre de l’estètica. No fer wireframes amb una 
mica de disseny. Fer servir una paleta de grisos. No cal definir, per tant, tipografia, 
gamma cromàtica, etc. 
– No dissenyar mòduls amb formes complexes. 
– Simular l'amplada i dibuixar cada pàgina amb la llargària que necessiti. 
– En cada wireframe han d'estar presents tots els elements de la pàgina : capçaleres, 
navegacions, enllaços, llistes, mòduls de continguts, imatges, formularis.. 
– Fer ús de retícules per ordenar columnes i crear una coherència entre espais entre 
mòduls. No cal ser estricte però si ser coherents i intentar seguir-les quan els tipus de 
mòduls ho permetin. 
– Els wireframes també han de mostrar el comportament dels diferents elements 
d'interacció. Per això farem que tot el que és linkable estigui subratllat. El dibuix dels 
elements de formularis han de poder-se reconèixer segons la seva tipologia, si és un 
botó, un camp de text, un checkbox, un menú desplegable ,.. 
– En alguns casos, la millor manera de descriure el comportament és afegir alguna 
nota associada a aquell element. Per això deixarem espai als costats i/o en la part 
superior per posar notes (requadres, globus..) que expliquin les funcionalitats dels 
elements de la pàgina en qüestió (formularis, desplegables, destacats que canvien 
d'imatge automàticament, capes o elements que es mostren en determinades
9-4-201421:22:46.183+02:00 - 6 - 
accions..,.. etc..). Anotar només allò rellevant. Els wireframes han de tendir a ser 
auto-explicatius. 
– En aquesta PAC es demana que tots els textos siguin reals/simulats . Per tant, no 
farem ús del típic "Lorum Ipsum". Ara bé, si es tractés per exemple del contingut 
d'una notícia, no cal redactar de nou, simplement agafar el text d'una notícia que 
estigui online i utilitzar-la per tal de simular el seu cos. 
– Els wireframes han de tenir l'alçada que necessiti tot el contingut de la pàgina tant 
per a escriptori com per a mòbil. Per tant l'amplada és fixe però l'alçada la determina 
el contingut de cada pàgina a definir. No totes seran igual. 
Recursos 
Bàsics 
– El llibre de Morville & Rosenfeld, "Arquitectura de la Informació per la World Wide 
Web" (especialment els capítols 4, 5, 6, 7, 8, 9, 10 i 11) 
– “Usuaris i sistemes interactius”. Anotar que el teniu en aquest mateix enunciat 
– Ebook petit, senzill i amb conceptes clars sobre Arquitectura de la Informació http:// 
www.pebbleroad.com/downloads/organizing-digital-information-for-others-v1.pdf 
Sobre eines 
Per a dibuixar els wireframes es pot fer servir qualsevol eina ( Axure, Balsamiq, Fireworks, 
Visio, Justinmind, Omnigraffle, Illustrator, Mockflow, ...). O també eines open source. 
– 10 eines gratis recomanades: http://speckyboy.com/2010/01/11/10-completely-free- 
wireframe-and-mockup-applications/ 
– Llistat de software per fer wireframes: http://www.uxbooth.com/blog/15-desktop-online- 
wireframing-tools/ 
– http://iainstitute.org/tools/ 
Sobre arbres de continguts 
– http://boxesandarrows.com/site-diagrams-mapping-an-information-space/ 
– Vocabulari visual: http://www.jjg.net/ia/visvocab/spanish.html
9-4-201421:22:46.183+02:00 - 7 - 
Sobre wireframes 
– http://olgacarreras.blogspot.com/2007/02/wireframes.html 
– http://blog.teamtreehouse.com/20-steps-to-better-wireframing 
– http://blog.fuzzymath.com/2011/07/12/how-to-read-a-wireframe/ ( 3 articles linkats 
entre ells) 
– http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm 
– http://www.mordecki.com/ebusiness/aifacetada/aifacetada.shtml 
Dissenyar per a mòbil 
– http://mashable.com/2013/08/08/responsive-design-best-practices/ 
– http://designmodo.com/responsive-design-examples/ 
– Dimensions mòbils i tablets http://stefhatcher.com/projects/device-dimensions/ 
– http://alistapart.com/topic/responsive-design 
– http://www.responsiveappdesign.org/links.html 
– Col.lecció de pantalles patrons http://pttrns.com/ http:// 
mobiledesignpatterngallery.com/mobile-patterns.php 
– http://olgacarreras.blogspot.com.es/2012/12/claves-para-la-web-movil.html 
– Recopilatori de wireframes per a mòbils http://moobileframes.tumblr.com/ 
– Web mòbil versus aplicacions mòbils http://www.uxabilidad.com/inspiracion/sitios-web- 
moviles-v-s-aplicaciones-nativas.html 
– AI per a mòbils http://ayerviernes.com/wp-content/uploads/2008/12/ 
paper_moviles08.pdf 
Casos
9-4-201421:22:46.183+02:00 - 8 - 
– Guide to Creating Website Information Architecture and Content: 
www.princeton.edu/communications/services/docs/IAguide2.p 
– Cas pràctic: Redesign a web magazine http://iainstitute.org/tools/download/ 
blueprint.pdf 
– Recopilatori de wireframes": http://wireframes.tumblr.com/ 
– Blog amb recursos, idees i bones pràctiques: http://wireframes.linowski.ca/ 
Criteris de valoració i puntuació 
Criteris 
S’avaluarà la correcta comprensió e integració dels conceptes plantejats en els diferents 
materials de consulta. 
S’avaluarà la capacitat de síntesis, l’ordre i claredat de l’estructura i l’estil de comunicació 
a l’hora d’organitzar els informes. 
S’avaluarà les reestructuracions, la creació de mòduls de continguts nous i de 
funcionalitats/tasques noves que puguin ser d’interés per l’usuari. 
S’avaluarà la capacitat d’adaptació de les estructures creades per a escriptori i mòbil. 
Es valorarà la presentació correcta de l’escrit, tenint present els següents aspectes: 
– Presentació correcta del document i de l’escrit: Portada, índex, capçalera de pàgina, 
paginació i correcció ortogràfica. 
– Bona ordenació/ indexació/ formateig dels blocs de continguts, fer ús de: titulars, 
subtitulars, negretes, llistats,.. 
– Format del text: 12 pt i 1,5 d'interlineat. 
– Referenciar adequadament la font d’on s’han obtingut les imatges (què han d’estar 
lliures de drets). 
– Tenir cura de la citació correcta de les fonts consultades (bibliogràfiques o en línia). 
Puntuació 
El valor d’aquesta PAC és del 33,33% de la nota global de Pacs de l’assignatura i, per 
tant, correspon al 20% del global de l’AC (60%)
9-4-201421:22:46.183+02:00 - 9 - 
L’arbre puntua 3 punts i els wireframes 7 punts. 
Format i data publicació 
El treball ha de ser entregat al registre RAC. 
MOLT IMPORTANT! El lliurament de la PAC ha d’estar compost per un únic document 
format .PDF sense comprimir. 
La data límit de lliurament per a la PAC3 és el 30 d’abril de 2014 . 
Materials i fonts d'informació 
Materials 
Arquitectura de la informació de la World Wide Web Paper 
Usuaris i sistemes interactius 
Usuaris i sistemes interactius 
Recursos i fonts d'informació 
Morville, Peter ; Rosenfeld, Louis (2006). "Information Architecture for the World 
Wide Web". 3rd ed. Publisher: O'Reilly Media, Inc. November 27, 2006. 528 p. ISBN 
978-0-596-52734-1.

Contenu connexe

En vedette

Administració i gestió d'organitzacions - Pac2 - Solució - Lidia Bria
Administració i gestió d'organitzacions - Pac2 - Solució - Lidia BriaAdministració i gestió d'organitzacions - Pac2 - Solució - Lidia Bria
Administració i gestió d'organitzacions - Pac2 - Solució - Lidia BriaLidia Bria
 
Fonaments i evolució de la Multimèdia - Pac1 - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac1 - Lídia BriaFonaments i evolució de la Multimèdia - Pac1 - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac1 - Lídia BriaLidia Bria
 
Matemàtiques per Multimèdia I - Pac3 - Lidia Bria
Matemàtiques per Multimèdia I - Pac3 - Lidia BriaMatemàtiques per Multimèdia I - Pac3 - Lidia Bria
Matemàtiques per Multimèdia I - Pac3 - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia II - Pac4 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac4 - Solució - Lidia BriaMatemàtiques per Multimèdia II - Pac4 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac4 - Solució - Lidia BriaLidia Bria
 
Programació - Pràctica2 - Solució - Lídia Bria
Programació - Pràctica2 - Solució - Lídia BriaProgramació - Pràctica2 - Solució - Lídia Bria
Programació - Pràctica2 - Solució - Lídia BriaLidia Bria
 
Programació - Pac3 - Solució - Lídia Bria
Programació - Pac3 - Solució - Lídia BriaProgramació - Pac3 - Solució - Lídia Bria
Programació - Pac3 - Solució - Lídia BriaLidia Bria
 
Matemàtiques per Multimèdia I - Pac3 - Solució - Lidia Bria
Matemàtiques per Multimèdia I - Pac3 - Solució - Lidia BriaMatemàtiques per Multimèdia I - Pac3 - Solució - Lidia Bria
Matemàtiques per Multimèdia I - Pac3 - Solució - Lidia BriaLidia Bria
 
Narrativa interactiva - Pràctica - Lídia Bria
Narrativa interactiva - Pràctica - Lídia BriaNarrativa interactiva - Pràctica - Lídia Bria
Narrativa interactiva - Pràctica - Lídia BriaLidia Bria
 
Narrativa interactiva - Pac1 - Solució - Lidia Bria
Narrativa interactiva - Pac1 - Solució - Lidia BriaNarrativa interactiva - Pac1 - Solució - Lidia Bria
Narrativa interactiva - Pac1 - Solució - Lidia BriaLidia Bria
 
Programació - Pac2 - Lidia Bria
Programació - Pac2 - Lidia BriaProgramació - Pac2 - Lidia Bria
Programació - Pac2 - Lidia BriaLidia Bria
 
Competència comunicativa per a professionals de les TIC - PS - Lidia Bria
Competència comunicativa per a professionals de les TIC - PS - Lidia BriaCompetència comunicativa per a professionals de les TIC - PS - Lidia Bria
Competència comunicativa per a professionals de les TIC - PS - Lidia BriaLidia Bria
 
Arquitectura de la Información - Pac01 - Lidia Bria
Arquitectura de la Información - Pac01 -  Lidia BriaArquitectura de la Información - Pac01 -  Lidia Bria
Arquitectura de la Información - Pac01 - Lidia BriaLidia Bria
 
Llenguatges i estàndards web - PS - Lidia Bria
Llenguatges i estàndards web - PS - Lidia BriaLlenguatges i estàndards web - PS - Lidia Bria
Llenguatges i estàndards web - PS - Lidia BriaLidia Bria
 
Fonaments i evolució de la Multimèdia - Ps - Lídia Bria
Fonaments i evolució de la Multimèdia - Ps - Lídia BriaFonaments i evolució de la Multimèdia - Ps - Lídia Bria
Fonaments i evolució de la Multimèdia - Ps - Lídia BriaLidia Bria
 
Programació - Pràctica1 - Lidia Bria
Programació - Pràctica1 - Lidia BriaProgramació - Pràctica1 - Lidia Bria
Programació - Pràctica1 - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia I - Pac1 - Solució - Lidia Bria
Matemàtiques per Multimèdia I - Pac1 - Solució - Lidia BriaMatemàtiques per Multimèdia I - Pac1 - Solució - Lidia Bria
Matemàtiques per Multimèdia I - Pac1 - Solució - Lidia BriaLidia Bria
 
Narrativa interactiva - Pac3 - Solució - Lidia Bria
Narrativa interactiva - Pac3 - Solució - Lidia BriaNarrativa interactiva - Pac3 - Solució - Lidia Bria
Narrativa interactiva - Pac3 - Solució - Lidia BriaLidia Bria
 
Vídeo - Ps - Lídia Bria
Vídeo - Ps - Lídia BriaVídeo - Ps - Lídia Bria
Vídeo - Ps - Lídia BriaLidia Bria
 
Fonaments i evolució de la Multimèdia - Pac3 debat - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac3 debat - Lídia BriaFonaments i evolució de la Multimèdia - Pac3 debat - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac3 debat - Lídia BriaLidia Bria
 
Imatge i llenguatge visual - Pràctica - Lidia Bria
Imatge i llenguatge visual - Pràctica - Lidia BriaImatge i llenguatge visual - Pràctica - Lidia Bria
Imatge i llenguatge visual - Pràctica - Lidia BriaLidia Bria
 

En vedette (20)

Administració i gestió d'organitzacions - Pac2 - Solució - Lidia Bria
Administració i gestió d'organitzacions - Pac2 - Solució - Lidia BriaAdministració i gestió d'organitzacions - Pac2 - Solució - Lidia Bria
Administració i gestió d'organitzacions - Pac2 - Solució - Lidia Bria
 
Fonaments i evolució de la Multimèdia - Pac1 - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac1 - Lídia BriaFonaments i evolució de la Multimèdia - Pac1 - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac1 - Lídia Bria
 
Matemàtiques per Multimèdia I - Pac3 - Lidia Bria
Matemàtiques per Multimèdia I - Pac3 - Lidia BriaMatemàtiques per Multimèdia I - Pac3 - Lidia Bria
Matemàtiques per Multimèdia I - Pac3 - Lidia Bria
 
Matemàtiques per Multimèdia II - Pac4 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac4 - Solució - Lidia BriaMatemàtiques per Multimèdia II - Pac4 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac4 - Solució - Lidia Bria
 
Programació - Pràctica2 - Solució - Lídia Bria
Programació - Pràctica2 - Solució - Lídia BriaProgramació - Pràctica2 - Solució - Lídia Bria
Programació - Pràctica2 - Solució - Lídia Bria
 
Programació - Pac3 - Solució - Lídia Bria
Programació - Pac3 - Solució - Lídia BriaProgramació - Pac3 - Solució - Lídia Bria
Programació - Pac3 - Solució - Lídia Bria
 
Matemàtiques per Multimèdia I - Pac3 - Solució - Lidia Bria
Matemàtiques per Multimèdia I - Pac3 - Solució - Lidia BriaMatemàtiques per Multimèdia I - Pac3 - Solució - Lidia Bria
Matemàtiques per Multimèdia I - Pac3 - Solució - Lidia Bria
 
Narrativa interactiva - Pràctica - Lídia Bria
Narrativa interactiva - Pràctica - Lídia BriaNarrativa interactiva - Pràctica - Lídia Bria
Narrativa interactiva - Pràctica - Lídia Bria
 
Narrativa interactiva - Pac1 - Solució - Lidia Bria
Narrativa interactiva - Pac1 - Solució - Lidia BriaNarrativa interactiva - Pac1 - Solució - Lidia Bria
Narrativa interactiva - Pac1 - Solució - Lidia Bria
 
Programació - Pac2 - Lidia Bria
Programació - Pac2 - Lidia BriaProgramació - Pac2 - Lidia Bria
Programació - Pac2 - Lidia Bria
 
Competència comunicativa per a professionals de les TIC - PS - Lidia Bria
Competència comunicativa per a professionals de les TIC - PS - Lidia BriaCompetència comunicativa per a professionals de les TIC - PS - Lidia Bria
Competència comunicativa per a professionals de les TIC - PS - Lidia Bria
 
Arquitectura de la Información - Pac01 - Lidia Bria
Arquitectura de la Información - Pac01 -  Lidia BriaArquitectura de la Información - Pac01 -  Lidia Bria
Arquitectura de la Información - Pac01 - Lidia Bria
 
Llenguatges i estàndards web - PS - Lidia Bria
Llenguatges i estàndards web - PS - Lidia BriaLlenguatges i estàndards web - PS - Lidia Bria
Llenguatges i estàndards web - PS - Lidia Bria
 
Fonaments i evolució de la Multimèdia - Ps - Lídia Bria
Fonaments i evolució de la Multimèdia - Ps - Lídia BriaFonaments i evolució de la Multimèdia - Ps - Lídia Bria
Fonaments i evolució de la Multimèdia - Ps - Lídia Bria
 
Programació - Pràctica1 - Lidia Bria
Programació - Pràctica1 - Lidia BriaProgramació - Pràctica1 - Lidia Bria
Programació - Pràctica1 - Lidia Bria
 
Matemàtiques per Multimèdia I - Pac1 - Solució - Lidia Bria
Matemàtiques per Multimèdia I - Pac1 - Solució - Lidia BriaMatemàtiques per Multimèdia I - Pac1 - Solució - Lidia Bria
Matemàtiques per Multimèdia I - Pac1 - Solució - Lidia Bria
 
Narrativa interactiva - Pac3 - Solució - Lidia Bria
Narrativa interactiva - Pac3 - Solució - Lidia BriaNarrativa interactiva - Pac3 - Solució - Lidia Bria
Narrativa interactiva - Pac3 - Solució - Lidia Bria
 
Vídeo - Ps - Lídia Bria
Vídeo - Ps - Lídia BriaVídeo - Ps - Lídia Bria
Vídeo - Ps - Lídia Bria
 
Fonaments i evolució de la Multimèdia - Pac3 debat - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac3 debat - Lídia BriaFonaments i evolució de la Multimèdia - Pac3 debat - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac3 debat - Lídia Bria
 
Imatge i llenguatge visual - Pràctica - Lidia Bria
Imatge i llenguatge visual - Pràctica - Lidia BriaImatge i llenguatge visual - Pràctica - Lidia Bria
Imatge i llenguatge visual - Pràctica - Lidia Bria
 

Similaire à Arquitectura de la Información - Pac03 - Lidia Bria

Arquitectura de la Información - Pac02 - Lidia Bria
Arquitectura de la Información - Pac02 -  Lidia BriaArquitectura de la Información - Pac02 -  Lidia Bria
Arquitectura de la Información - Pac02 - Lidia BriaLidia Bria
 
PRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies MultimèdiaPRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies MultimèdiaRosa Suñé Barniol
 
Aplicacions Interactives multiplataforma_pac1
Aplicacions Interactives multiplataforma_pac1Aplicacions Interactives multiplataforma_pac1
Aplicacions Interactives multiplataforma_pac1Marcos Baldovi
 
Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7Paquita Ribas
 
Àgora: el tercer nivell
Àgora: el tercer nivellÀgora: el tercer nivell
Àgora: el tercer nivellIThinkUPC
 
ELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
ELISAVA Beta. Cas d'èxit desenvolupat per YmbraELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
ELISAVA Beta. Cas d'èxit desenvolupat per YmbraYmbra
 
Llenguatges i estàndards web - Pac2 - Lídia Bria
Llenguatges i estàndards web - Pac2 - Lídia BriaLlenguatges i estàndards web - Pac2 - Lídia Bria
Llenguatges i estàndards web - Pac2 - Lídia BriaLidia Bria
 
Fonaments i evolució multimèdia_PAC3_UOC
Fonaments i evolució multimèdia_PAC3_UOCFonaments i evolució multimèdia_PAC3_UOC
Fonaments i evolució multimèdia_PAC3_UOCNabel GM
 
disseny_entorn
disseny_entorndisseny_entorn
disseny_entorniMona06
 
Arquitectura de la Información - PS Altres anys - Lidia Bria
Arquitectura de la Información - PS Altres anys -  Lidia BriaArquitectura de la Información - PS Altres anys -  Lidia Bria
Arquitectura de la Información - PS Altres anys - Lidia BriaLidia Bria
 
Disseny Web
Disseny WebDisseny Web
Disseny Webudl
 
Eines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websEines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websLa Borrassa rural lab
 
3.Com Ha De Ser Un Web
3.Com Ha De Ser Un Web3.Com Ha De Ser Un Web
3.Com Ha De Ser Un Webmnicolau
 
Què són els nous mitjans?
Què són els nous mitjans?Què són els nous mitjans?
Què són els nous mitjans?jvalenting
 
Eines per disposar d'un web o un blog
Eines per disposar d'un web o un blogEines per disposar d'un web o un blog
Eines per disposar d'un web o un blogsantfeliuonline
 
Turbo Gears, Framework De Python Per Aplicacions Web
Turbo Gears, Framework De Python Per Aplicacions WebTurbo Gears, Framework De Python Per Aplicacions Web
Turbo Gears, Framework De Python Per Aplicacions WebTomàs Reverter
 

Similaire à Arquitectura de la Información - Pac03 - Lidia Bria (20)

Arquitectura de la Información - Pac02 - Lidia Bria
Arquitectura de la Información - Pac02 -  Lidia BriaArquitectura de la Información - Pac02 -  Lidia Bria
Arquitectura de la Información - Pac02 - Lidia Bria
 
PRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies MultimèdiaPRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies Multimèdia
 
Aplicacions Interactives multiplataforma_pac1
Aplicacions Interactives multiplataforma_pac1Aplicacions Interactives multiplataforma_pac1
Aplicacions Interactives multiplataforma_pac1
 
Gencat 2003
Gencat 2003Gencat 2003
Gencat 2003
 
Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7
 
Àgora: el tercer nivell
Àgora: el tercer nivellÀgora: el tercer nivell
Àgora: el tercer nivell
 
Disseny d'interficies d'usari
Disseny d'interficies d'usariDisseny d'interficies d'usari
Disseny d'interficies d'usari
 
Disseny web
Disseny webDisseny web
Disseny web
 
ELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
ELISAVA Beta. Cas d'èxit desenvolupat per YmbraELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
ELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
 
Llenguatges i estàndards web - Pac2 - Lídia Bria
Llenguatges i estàndards web - Pac2 - Lídia BriaLlenguatges i estàndards web - Pac2 - Lídia Bria
Llenguatges i estàndards web - Pac2 - Lídia Bria
 
Fonaments i evolució multimèdia_PAC3_UOC
Fonaments i evolució multimèdia_PAC3_UOCFonaments i evolució multimèdia_PAC3_UOC
Fonaments i evolució multimèdia_PAC3_UOC
 
disseny_entorn
disseny_entorndisseny_entorn
disseny_entorn
 
Arquitectura de la Información - PS Altres anys - Lidia Bria
Arquitectura de la Información - PS Altres anys -  Lidia BriaArquitectura de la Información - PS Altres anys -  Lidia Bria
Arquitectura de la Información - PS Altres anys - Lidia Bria
 
Disseny Web
Disseny WebDisseny Web
Disseny Web
 
Eines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websEines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de webs
 
3.Com Ha De Ser Un Web
3.Com Ha De Ser Un Web3.Com Ha De Ser Un Web
3.Com Ha De Ser Un Web
 
Què són els nous mitjans?
Què són els nous mitjans?Què són els nous mitjans?
Què són els nous mitjans?
 
Eines per disposar d'un web o un blog
Eines per disposar d'un web o un blogEines per disposar d'un web o un blog
Eines per disposar d'un web o un blog
 
Turbo Gears, Framework De Python Per Aplicacions Web
Turbo Gears, Framework De Python Per Aplicacions WebTurbo Gears, Framework De Python Per Aplicacions Web
Turbo Gears, Framework De Python Per Aplicacions Web
 
Webquest practica
Webquest practicaWebquest practica
Webquest practica
 

Plus de Lidia Bria

Gràfics 3D - PS altres anys - Lidia Bria
Gràfics 3D - PS altres anys - Lidia BriaGràfics 3D - PS altres anys - Lidia Bria
Gràfics 3D - PS altres anys - Lidia BriaLidia Bria
 
Gràfics 3D - Pràctica - Lidia Bria
Gràfics 3D - Pràctica - Lidia BriaGràfics 3D - Pràctica - Lidia Bria
Gràfics 3D - Pràctica - Lidia BriaLidia Bria
 
Pac03 - Lidia Bria (A) - Gràfics 3D
Pac03 - Lidia Bria (A) - Gràfics 3DPac03 - Lidia Bria (A) - Gràfics 3D
Pac03 - Lidia Bria (A) - Gràfics 3DLidia Bria
 
Gràfics 3D - Pac03 Test - Lidia Bria
Gràfics 3D - Pac03 Test - Lidia BriaGràfics 3D - Pac03 Test - Lidia Bria
Gràfics 3D - Pac03 Test - Lidia BriaLidia Bria
 
Pac02 - Lidia Bria (B) - Gràfics 3DB
Pac02 - Lidia Bria (B) - Gràfics 3DBPac02 - Lidia Bria (B) - Gràfics 3DB
Pac02 - Lidia Bria (B) - Gràfics 3DBLidia Bria
 
Gràfics 3D - Pac02 Test - Lidia Bria
Gràfics 3D - Pac02 Test - Lidia BriaGràfics 3D - Pac02 Test - Lidia Bria
Gràfics 3D - Pac02 Test - Lidia BriaLidia Bria
 
Gràfics 3D - Pac1 Segona entrega - Lidia Bria
Gràfics 3D - Pac1 Segona entrega - Lidia BriaGràfics 3D - Pac1 Segona entrega - Lidia Bria
Gràfics 3D - Pac1 Segona entrega - Lidia BriaLidia Bria
 
Gràfics 3D - Pac1 Primera entrega - Lidia Bria
Gràfics 3D - Pac1 Primera entrega - Lidia BriaGràfics 3D - Pac1 Primera entrega - Lidia Bria
Gràfics 3D - Pac1 Primera entrega - Lidia BriaLidia Bria
 
Gràfics 3D - Pac01 - Lidia Bria
Gràfics 3D - Pac01 - Lidia BriaGràfics 3D - Pac01 - Lidia Bria
Gràfics 3D - Pac01 - Lidia BriaLidia Bria
 
Programació - Exàmens - Solució - Lídia Bria
Programació - Exàmens - Solució - Lídia BriaProgramació - Exàmens - Solució - Lídia Bria
Programació - Exàmens - Solució - Lídia BriaLidia Bria
 
Programació - Exàmen - Lidia Bria
Programació - Exàmen - Lidia BriaProgramació - Exàmen - Lidia Bria
Programació - Exàmen - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia II - Pac4 - Lidia Bria
Matemàtiques per Multimèdia II - Pac4 - Lidia BriaMatemàtiques per Multimèdia II - Pac4 - Lidia Bria
Matemàtiques per Multimèdia II - Pac4 - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia II - Pac3 - Lidia Bria
Matemàtiques per Multimèdia II - Pac3 - Lidia BriaMatemàtiques per Multimèdia II - Pac3 - Lidia Bria
Matemàtiques per Multimèdia II - Pac3 - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia II - Pac2 - Lidia Bria
Matemàtiques per Multimèdia II - Pac2 - Lidia BriaMatemàtiques per Multimèdia II - Pac2 - Lidia Bria
Matemàtiques per Multimèdia II - Pac2 - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia II - Pac2 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac2 - Solució - Lidia BriaMatemàtiques per Multimèdia II - Pac2 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac2 - Solució - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia II - Pac1 - Lidia Bria
Matemàtiques per Multimèdia II - Pac1 - Lidia BriaMatemàtiques per Multimèdia II - Pac1 - Lidia Bria
Matemàtiques per Multimèdia II - Pac1 - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia II - Pac1 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac1 - Solució - Lidia BriaMatemàtiques per Multimèdia II - Pac1 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac1 - Solució - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia II - Pràctica - Lidia Bria
Matemàtiques per Multimèdia II - Pràctica - Lidia BriaMatemàtiques per Multimèdia II - Pràctica - Lidia Bria
Matemàtiques per Multimèdia II - Pràctica - Lidia BriaLidia Bria
 
Matemàtiques per Multimèdia I - PS - Lidia Bria
Matemàtiques per Multimèdia I - PS - Lidia BriaMatemàtiques per Multimèdia I - PS - Lidia Bria
Matemàtiques per Multimèdia I - PS - Lidia BriaLidia Bria
 
Imatge i llenguatge visual - PS - Lidia Bria
Imatge i llenguatge visual - PS - Lidia BriaImatge i llenguatge visual - PS - Lidia Bria
Imatge i llenguatge visual - PS - Lidia BriaLidia Bria
 

Plus de Lidia Bria (20)

Gràfics 3D - PS altres anys - Lidia Bria
Gràfics 3D - PS altres anys - Lidia BriaGràfics 3D - PS altres anys - Lidia Bria
Gràfics 3D - PS altres anys - Lidia Bria
 
Gràfics 3D - Pràctica - Lidia Bria
Gràfics 3D - Pràctica - Lidia BriaGràfics 3D - Pràctica - Lidia Bria
Gràfics 3D - Pràctica - Lidia Bria
 
Pac03 - Lidia Bria (A) - Gràfics 3D
Pac03 - Lidia Bria (A) - Gràfics 3DPac03 - Lidia Bria (A) - Gràfics 3D
Pac03 - Lidia Bria (A) - Gràfics 3D
 
Gràfics 3D - Pac03 Test - Lidia Bria
Gràfics 3D - Pac03 Test - Lidia BriaGràfics 3D - Pac03 Test - Lidia Bria
Gràfics 3D - Pac03 Test - Lidia Bria
 
Pac02 - Lidia Bria (B) - Gràfics 3DB
Pac02 - Lidia Bria (B) - Gràfics 3DBPac02 - Lidia Bria (B) - Gràfics 3DB
Pac02 - Lidia Bria (B) - Gràfics 3DB
 
Gràfics 3D - Pac02 Test - Lidia Bria
Gràfics 3D - Pac02 Test - Lidia BriaGràfics 3D - Pac02 Test - Lidia Bria
Gràfics 3D - Pac02 Test - Lidia Bria
 
Gràfics 3D - Pac1 Segona entrega - Lidia Bria
Gràfics 3D - Pac1 Segona entrega - Lidia BriaGràfics 3D - Pac1 Segona entrega - Lidia Bria
Gràfics 3D - Pac1 Segona entrega - Lidia Bria
 
Gràfics 3D - Pac1 Primera entrega - Lidia Bria
Gràfics 3D - Pac1 Primera entrega - Lidia BriaGràfics 3D - Pac1 Primera entrega - Lidia Bria
Gràfics 3D - Pac1 Primera entrega - Lidia Bria
 
Gràfics 3D - Pac01 - Lidia Bria
Gràfics 3D - Pac01 - Lidia BriaGràfics 3D - Pac01 - Lidia Bria
Gràfics 3D - Pac01 - Lidia Bria
 
Programació - Exàmens - Solució - Lídia Bria
Programació - Exàmens - Solució - Lídia BriaProgramació - Exàmens - Solució - Lídia Bria
Programació - Exàmens - Solució - Lídia Bria
 
Programació - Exàmen - Lidia Bria
Programació - Exàmen - Lidia BriaProgramació - Exàmen - Lidia Bria
Programació - Exàmen - Lidia Bria
 
Matemàtiques per Multimèdia II - Pac4 - Lidia Bria
Matemàtiques per Multimèdia II - Pac4 - Lidia BriaMatemàtiques per Multimèdia II - Pac4 - Lidia Bria
Matemàtiques per Multimèdia II - Pac4 - Lidia Bria
 
Matemàtiques per Multimèdia II - Pac3 - Lidia Bria
Matemàtiques per Multimèdia II - Pac3 - Lidia BriaMatemàtiques per Multimèdia II - Pac3 - Lidia Bria
Matemàtiques per Multimèdia II - Pac3 - Lidia Bria
 
Matemàtiques per Multimèdia II - Pac2 - Lidia Bria
Matemàtiques per Multimèdia II - Pac2 - Lidia BriaMatemàtiques per Multimèdia II - Pac2 - Lidia Bria
Matemàtiques per Multimèdia II - Pac2 - Lidia Bria
 
Matemàtiques per Multimèdia II - Pac2 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac2 - Solució - Lidia BriaMatemàtiques per Multimèdia II - Pac2 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac2 - Solució - Lidia Bria
 
Matemàtiques per Multimèdia II - Pac1 - Lidia Bria
Matemàtiques per Multimèdia II - Pac1 - Lidia BriaMatemàtiques per Multimèdia II - Pac1 - Lidia Bria
Matemàtiques per Multimèdia II - Pac1 - Lidia Bria
 
Matemàtiques per Multimèdia II - Pac1 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac1 - Solució - Lidia BriaMatemàtiques per Multimèdia II - Pac1 - Solució - Lidia Bria
Matemàtiques per Multimèdia II - Pac1 - Solució - Lidia Bria
 
Matemàtiques per Multimèdia II - Pràctica - Lidia Bria
Matemàtiques per Multimèdia II - Pràctica - Lidia BriaMatemàtiques per Multimèdia II - Pràctica - Lidia Bria
Matemàtiques per Multimèdia II - Pràctica - Lidia Bria
 
Matemàtiques per Multimèdia I - PS - Lidia Bria
Matemàtiques per Multimèdia I - PS - Lidia BriaMatemàtiques per Multimèdia I - PS - Lidia Bria
Matemàtiques per Multimèdia I - PS - Lidia Bria
 
Imatge i llenguatge visual - PS - Lidia Bria
Imatge i llenguatge visual - PS - Lidia BriaImatge i llenguatge visual - PS - Lidia Bria
Imatge i llenguatge visual - PS - Lidia Bria
 

Arquitectura de la Información - Pac03 - Lidia Bria

  • 1. 9-4-201421:22:46.183+02:00 - 1 - AULA 06.517 Arquitectura de la informació aula 1 Proposta d'arquitectura d'un lloc web responsiu: Arbre de continguts i wireframe per a escriptori i mòbil Inici: 09-04-14 Lliurament: 30-04-14 Solució: 14-05-14 Qualificació: 14-05-14 Dedicació: 000 % Descripció Després de la PAC2, emmarcada en la fase d’anàlisi i investigació de redisseny d’un lloc web, arribem ara a la fase de disseny conceptual. Hem de començar a dibuixar sobre paper les idees i requeriments recollits. Es tracta de definir l’arbre de continguts i de fer una primera proposta només d’un wireframe determinat. Objectius i competències Competències – Capacitat per innovar i generar noves idees. – Capacitat per planificar i gestionar projectes en l'entorn de les TIC. – Capacitat per avaluar solucions tecnològiques i elaborar propostes de projectes tenint en compte els recursos, les alternatives disponibles i les condicions de mercat. – Capacitat per conceptualitzar, dissenyar i avaluar les interfícies i esquemes d'interacció de les aplicacions i dispositius d'accés a l'informació digital. Objectius – Estructurar, dissenyar i argumentar una nova proposta d’arquitectura.
  • 2. 9-4-201421:22:46.183+02:00 - 2 - – Crear els primers documents bàsics d’un projecte d’arquitectura de la informació com són un arbre de contingut (també anomenat: blueprint, mapa de contingut...) i una primera proposta d’un sol wireframe (també anomenat maqueta, retícula, prototip, mockup,...). – Utilitzar eines i tècniques per dibuixar mapes i wireframes. Descripció Hem de fer una proposta de millora: reestructurant, reorganitzant i introduint nous continguts i funcionalitats sempre centrar-nos en l’interés i l’experiència d’ús de l’usuari. Dibuixarem l’arbre de continguts i un wireframe per a un lloc web responsiu. Per abordar-ho ens podem ajudar de les idees i conclusions extretes de la PAC2 i també podem aplicar noves idees que vagin sortint en el procés. Hem de continuar amb els mateixos sites seleccionats en la PAC2. En el cas de voler canviar de site caldria justificar-ho. Us recordem els sites proposats: – www.artehabitat.com – www.immoblesbarcelona.com – www.taquilla10.com Haurem d’elaborar un únic document que inclogui les següents parts: PART I Crear un nou arbre de continguts del lloc web. L'arbre ha de mostrar fins el tercer i/o quart nivell de navegació (depenent del grau de profunditat que tingui), ha de ser clar i intuïtiu per l'usuari final. Es valorarà la introducció de nous continguts i noves funcionalitats (no contemplats en els sites actuals) i reestructuracions que puguin ser d’interés per l’usuari. Dibuixem l’arbre adaptat als continguts per a escriptori. PART II
  • 3. 9-4-201421:22:46.183+02:00 - 3 - Definir un wireframe d’una pàgina de detall corresponent al site seleccionat. El wireframe ha d’estar pensat per ser responsiu, és a dir, que tot el site s’adapti als canvis de mida del navegador i a les diferents mides de pantalla dels diversos dispositius. En aquest cas, només dibuixarem la mateixa pàgina per a escriptori i per a mòbil. Cal dibuixar el wireframe optimitzant per a resolució de 1024x768 d’escriptori i per a 320x480 de mòbil. (Atenció!!! Cada pantalla dissenyada caldrà que tingui l’alçada que requereixi els seus continguts, no l’hem de fer encaixar en alçada ni als 768px per escriptori ni als 480px per a mòbil). Caldrà preveure com s’adapten els diferents continguts entre aquestes dues mides de pantalles. En aquesta adaptació hi haurà reestructuracions, canvis i potser cal eliminar alguns continguts secundaris per a mòbil. La pàgina de detall ha de ser la: 1. fitxa d’un producte (Artehabitat). 2. fitxa d’un inmoble (Immoblesbarcelona) 3. fitxa d’un ticket (Taquilla10) Si la pàgina proposada conté elements amagats en el contingut central de la pàgina (p.ex.: en navegacions locals,..) o interaccions importants caldrà replicar la pàgina o el mòdul corresponent per mostrar aquests elements ocults i interaccions. Es valorarà la reestructuració i la creació de mòduls de continguts nous i de funcionalitats/tasques noves incloses en el disseny del wireframe. Anotació: Ara no cal fer totes les pàgines del site, comencem en aquesta PAC amb una primera proposta de l’arbre i d’un wireframe i després en la Pràctica ja es revisarà i es completarà amb les pàgines principals del site. PART III Llistar els objectius que s'han volgut aconseguir amb la proposta d’arbre de continguts i de wireframe. (màxim 1 pàgina) Alguns dels reptes que s’hauran de resoldre en les vostres propostes: • www.artehabitat.com • Cal potenciar l’integració i protagonisme de la botiga online.
  • 4. 9-4-201421:22:46.183+02:00 - 4 - • S’ha de millorar la navegació. • ... • www.immoblesbarcelona.com • S’ha de millorar la navegació i el cercador. • S’ha d’enriquir la fitxa de cada inmoble. • Cal millorar els resultats de cerca. • ... • www.taquilla10.com • Cal millorar el cercador. • S’ha d’enriquir la fitxa de cada ticket. • S’ha de potenciar les xarxes socials, pensar en com crear comunitat dins el site. • ... Anotació: Aquests només són alguns reptes a plantejar-te, però has de pensar i fer d’altres millores/reptes. Pensar un wireframe Pensar un wireframe – Pensar en l'usuari final (Disseny Centrat en l'Usuari). L'arbre de continguts i els wireframes han de tenir una estructura lògica i clara per a l'usuari final i, sobretot, han de respondre als objectius/tasques que pot tenir aquest usuari en accedir a cadascuna d'elles. – Cercar la consistència però no cal ser estrictes. Per exemple: el sistema de navegació principal ha de ser consistent en la gran majoria de pantalles d’un site. Per tant, ha de mantenir el seu aspecte, ubicació i comportament però, segons els tipus d’escenaris, com potser el cas d’un procés de compra, podria variar i/o obviar-se. – Un camí recomanat per començar un wireframe : primer en paper, es fa una llista numerada de tot el que ha de tenir la pàgina (continguts, imatges, accions, funcionalitats, sensacions,..), després s’agrupa segons relacions, es prioritzen els grups importants, es dissenya cada mòdul de contingut, s’adjunten els diferents mòduls segons prioritats i al final es passa tot a la “pantalla digital”.
  • 5. 9-4-201421:22:46.183+02:00 - 5 - Pensar un wireframe responsiu – Flexibilitat. Tot ha de ser flexible en un disseny responsiu: taules, imatges,... – Canvis, adicions i substraccions. De vegades, la millor opció per adaptar-se a les diferents mides de navegador inclou: canvis, adicions i substraccions entre els diferents breakpoints. Per dispositius més petits algunes imatges i continguts poden no mostrar-se per millorar l’experiència d’usuari . O es pot optar per un disseny global més senzill per a que el lloc web tingui un aspecte més uniforme a través dels dispositius. – Quadrícula fluida. El lloc web pot escalar-se proporcionalment en base a percentatges o construir-se en base a un nombre de límits. – Les quadrícules més responsives inclouen quadrícules per un mínim de 3 mides diferents: 768px o més, 480 a 768px i 320 a 480px. Dibuixar un wireframe – Simple. Cercar la funcionalitat per sobre de l’estètica. No fer wireframes amb una mica de disseny. Fer servir una paleta de grisos. No cal definir, per tant, tipografia, gamma cromàtica, etc. – No dissenyar mòduls amb formes complexes. – Simular l'amplada i dibuixar cada pàgina amb la llargària que necessiti. – En cada wireframe han d'estar presents tots els elements de la pàgina : capçaleres, navegacions, enllaços, llistes, mòduls de continguts, imatges, formularis.. – Fer ús de retícules per ordenar columnes i crear una coherència entre espais entre mòduls. No cal ser estricte però si ser coherents i intentar seguir-les quan els tipus de mòduls ho permetin. – Els wireframes també han de mostrar el comportament dels diferents elements d'interacció. Per això farem que tot el que és linkable estigui subratllat. El dibuix dels elements de formularis han de poder-se reconèixer segons la seva tipologia, si és un botó, un camp de text, un checkbox, un menú desplegable ,.. – En alguns casos, la millor manera de descriure el comportament és afegir alguna nota associada a aquell element. Per això deixarem espai als costats i/o en la part superior per posar notes (requadres, globus..) que expliquin les funcionalitats dels elements de la pàgina en qüestió (formularis, desplegables, destacats que canvien d'imatge automàticament, capes o elements que es mostren en determinades
  • 6. 9-4-201421:22:46.183+02:00 - 6 - accions..,.. etc..). Anotar només allò rellevant. Els wireframes han de tendir a ser auto-explicatius. – En aquesta PAC es demana que tots els textos siguin reals/simulats . Per tant, no farem ús del típic "Lorum Ipsum". Ara bé, si es tractés per exemple del contingut d'una notícia, no cal redactar de nou, simplement agafar el text d'una notícia que estigui online i utilitzar-la per tal de simular el seu cos. – Els wireframes han de tenir l'alçada que necessiti tot el contingut de la pàgina tant per a escriptori com per a mòbil. Per tant l'amplada és fixe però l'alçada la determina el contingut de cada pàgina a definir. No totes seran igual. Recursos Bàsics – El llibre de Morville & Rosenfeld, "Arquitectura de la Informació per la World Wide Web" (especialment els capítols 4, 5, 6, 7, 8, 9, 10 i 11) – “Usuaris i sistemes interactius”. Anotar que el teniu en aquest mateix enunciat – Ebook petit, senzill i amb conceptes clars sobre Arquitectura de la Informació http:// www.pebbleroad.com/downloads/organizing-digital-information-for-others-v1.pdf Sobre eines Per a dibuixar els wireframes es pot fer servir qualsevol eina ( Axure, Balsamiq, Fireworks, Visio, Justinmind, Omnigraffle, Illustrator, Mockflow, ...). O també eines open source. – 10 eines gratis recomanades: http://speckyboy.com/2010/01/11/10-completely-free- wireframe-and-mockup-applications/ – Llistat de software per fer wireframes: http://www.uxbooth.com/blog/15-desktop-online- wireframing-tools/ – http://iainstitute.org/tools/ Sobre arbres de continguts – http://boxesandarrows.com/site-diagrams-mapping-an-information-space/ – Vocabulari visual: http://www.jjg.net/ia/visvocab/spanish.html
  • 7. 9-4-201421:22:46.183+02:00 - 7 - Sobre wireframes – http://olgacarreras.blogspot.com/2007/02/wireframes.html – http://blog.teamtreehouse.com/20-steps-to-better-wireframing – http://blog.fuzzymath.com/2011/07/12/how-to-read-a-wireframe/ ( 3 articles linkats entre ells) – http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm – http://www.mordecki.com/ebusiness/aifacetada/aifacetada.shtml Dissenyar per a mòbil – http://mashable.com/2013/08/08/responsive-design-best-practices/ – http://designmodo.com/responsive-design-examples/ – Dimensions mòbils i tablets http://stefhatcher.com/projects/device-dimensions/ – http://alistapart.com/topic/responsive-design – http://www.responsiveappdesign.org/links.html – Col.lecció de pantalles patrons http://pttrns.com/ http:// mobiledesignpatterngallery.com/mobile-patterns.php – http://olgacarreras.blogspot.com.es/2012/12/claves-para-la-web-movil.html – Recopilatori de wireframes per a mòbils http://moobileframes.tumblr.com/ – Web mòbil versus aplicacions mòbils http://www.uxabilidad.com/inspiracion/sitios-web- moviles-v-s-aplicaciones-nativas.html – AI per a mòbils http://ayerviernes.com/wp-content/uploads/2008/12/ paper_moviles08.pdf Casos
  • 8. 9-4-201421:22:46.183+02:00 - 8 - – Guide to Creating Website Information Architecture and Content: www.princeton.edu/communications/services/docs/IAguide2.p – Cas pràctic: Redesign a web magazine http://iainstitute.org/tools/download/ blueprint.pdf – Recopilatori de wireframes": http://wireframes.tumblr.com/ – Blog amb recursos, idees i bones pràctiques: http://wireframes.linowski.ca/ Criteris de valoració i puntuació Criteris S’avaluarà la correcta comprensió e integració dels conceptes plantejats en els diferents materials de consulta. S’avaluarà la capacitat de síntesis, l’ordre i claredat de l’estructura i l’estil de comunicació a l’hora d’organitzar els informes. S’avaluarà les reestructuracions, la creació de mòduls de continguts nous i de funcionalitats/tasques noves que puguin ser d’interés per l’usuari. S’avaluarà la capacitat d’adaptació de les estructures creades per a escriptori i mòbil. Es valorarà la presentació correcta de l’escrit, tenint present els següents aspectes: – Presentació correcta del document i de l’escrit: Portada, índex, capçalera de pàgina, paginació i correcció ortogràfica. – Bona ordenació/ indexació/ formateig dels blocs de continguts, fer ús de: titulars, subtitulars, negretes, llistats,.. – Format del text: 12 pt i 1,5 d'interlineat. – Referenciar adequadament la font d’on s’han obtingut les imatges (què han d’estar lliures de drets). – Tenir cura de la citació correcta de les fonts consultades (bibliogràfiques o en línia). Puntuació El valor d’aquesta PAC és del 33,33% de la nota global de Pacs de l’assignatura i, per tant, correspon al 20% del global de l’AC (60%)
  • 9. 9-4-201421:22:46.183+02:00 - 9 - L’arbre puntua 3 punts i els wireframes 7 punts. Format i data publicació El treball ha de ser entregat al registre RAC. MOLT IMPORTANT! El lliurament de la PAC ha d’estar compost per un únic document format .PDF sense comprimir. La data límit de lliurament per a la PAC3 és el 30 d’abril de 2014 . Materials i fonts d'informació Materials Arquitectura de la informació de la World Wide Web Paper Usuaris i sistemes interactius Usuaris i sistemes interactius Recursos i fonts d'informació Morville, Peter ; Rosenfeld, Louis (2006). "Information Architecture for the World Wide Web". 3rd ed. Publisher: O'Reilly Media, Inc. November 27, 2006. 528 p. ISBN 978-0-596-52734-1.