Wireframe (disseny web)
Un wireframe per a un lloc web, també conegut com un esquema de pàgina, plànol de pantalla o esquema de filferros, és una guia visual que representa l'esquelet o estructura visual d'un lloc web.[1] El wireframe esquematitza el disseny de pàgina o ordenament del contingut del lloc web, incloent-hi elements de la interfície i sistemes de navegació i com funcionen en conjunt.[2] Usualment aquest esquema manca d'estil tipogràfic, color o aplicacions gràfiques, ja que el seu principal objectiu resideix en la funcionalitat, comportament i jerarquia de continguts.[3] En altres paraules, s'enfoca en “què fa la pantalla i la seva funcionalitat, no en com es veu.”[4] Els esquemes poden ser dibuixats amb llapis i paper o esquemes en una pissarra, o poden ser produïts amb mitjans de disseny d'aplicacions de programari lliure o comercials.
- Els wireframes s'enfoquen en:[5]
- El tipus d'informació que es mostrarà
- La quantitat i quines funcions estaran disponibles
- Les prioritats i jerarquia relatives a la informació i les funcions
- Les regles per mostrar certs tipus d'informació
- L'efecte dels diferents escenaris en la pantalla com ara visualitzacions en ordinador, telèfon o tauleta.
El wireframe del lloc web connecta l'estructura conceptual, o arquitectura de la informació, amb la superfície, o disseny visual del lloc web.[2] Els wireframes ajuden a establir funcionalitat, i les relacions entre les diferents plantilles de pantalles d'un lloc web. Un procés iteratiu de creació de wireframes és una forma efectiva de fer prototips de pàgines ràpids, mentre es mesura la practicitat d'un concepte de disseny. Típicament, l'esquematització comença entre “diagrames de flux d'estructures de treball d'alt nivell o mapes de lloc i dissenys de pantalles.”[3] Dins del procés de construcció d'un lloc web, el dibuix d'un wireframe és on el concepte es torna tangible.[6]
A part dels llocs web, els wireframes són usats per fer prototips de llocs mòbils, aplicacions per a ordinador o altres productes basats en pantalla que impliquin interacció home-màquina.[7]
Les tecnologies futures i els mitjans forçaran als wireframes a adaptar-se i evolucionar.
Usos dels wireframes modifica
Els wireframes poden ser utilitzats per diferents disciplines. Els desenvolupadors usen wireframes per obtenir una aproximació més tangible de les funcionalitats del lloc, mentre que els dissenyadors els usen per impulsar el procés de disseny de la interfície d'usuari (UI). Els dissenyadors d'experiència d'usuari i arquitectes d'informació usen wireframes per mostrar les rutes de navegació entre pàgines. Els interessats en un negoci els usen per assegurar-se que els requeriments i objectius es connecten a través del disseny.[3] Altres professionals que creen wireframes inclouen als analistes de negocis, arquitectes d'informació, dissenyadors d'interacció, dissenyadors d'experiència d'usuari, dissenyadors gràfics, programadors i gestors de productes.[7]
Treballar amb wireframes pot ser un esforç col·laboratiu ja que aquest connecta l'arquitectura d'informació amb el disseny visual. A causa de l'encreuament d'aquests rols professionals, poden sorgir conflictes, fent del desenvolupament d'un wireframe una part controvertida del procés de disseny.[6] Com que els wireframes tenen una estètica "nua", és difícil per als dissenyadors assumir que el wireframe pot acabar representant els dissenys de pantalla.[4] Una altra dificultat amb els wireframes és que, efectivament, no mostren els detalls interactius. El disseny modern d'UI incorpora diversos dispositius com a panells expansibles, efectes d'intercanvi visual i carrusels que representen un repte per a diagrames en 2-D.[8]
Els wireframes poden tenir múltiples nivells de detall i poden dividir-se en dues categories en termes de fidelitat, en funció de com de semblants són al producte final.
Baixa fidelitat Caracteritzat per ser un dibuix en brut o un esbós ràpid, els wireframes de baixa fidelitat tenen menys detalls i són ràpids de produir. Aquests wireframes ajuden a un equip de projecte a col·laborar més efectivament, en ser més abstractes, fent servir rectangles i etiquetes per representar el contingut.[9] Quan el contingut real no està disponible, s'hi fa servir contingut de prova, text de farcit (lorem ipsum), mostra o contingut simbòlic per representar la informació.[10]
Alta fidelitat Els wireframes d'alta fidelitat sovint es fan servir per documentar, ja que incorporen un nivell de detall que s'acosta més al disseny final d'una pàgina web. No obstant, suposen més esforç en el seu procés de creació.[9]
Per a dibuixos senzills o de baixa fidelitat, una tècnica habitual són els prototips en paper. Com que aquests només són representacions, s'hi fan servir les notes al marge per explicar comportaments.[11] Per a projectes més complexos, es fan servir programes d'ordinador específics per a la creació de wireframes. Algunes eines permeten incorporar interactivitat, incloent animació en Flaix, i tecnologies de presentació web com a HTML, CSS, i Javascript.
Elements d'un wireframe modifica
L'esquelet d'un lloc web es pot dividir en tres components: disseny d'informació, disseny de navegació i disseny d'interfície. El disseny de la pàgina és on aquests components s'uneixen, mentre que un wireframe és on es representa la relació entre aquests components.[2]
Disseny de la informació modifica
- Article principal: Disseny de la informació
El disseny de la informació és la ubicació en la presentació i priorització d'informació de manera que faciliti l'enteniment. El disseny de la informació és una àrea del disseny gràfic pensada per representar informació de manera efectiva per a una comunicació clara. Per a llocs web, els elements informatius han d'estar ordenats de manera que reflecteixin els objectius i tasques de l'usuari.[12]
modifica
El sistema de navegació proporciona un conjunt d'elements en pantalla que permeten a l'usuari moure's entre pàgines del mateix lloc web. El disseny de navegació ha de comunicar la relació entre els enllaços que conté de manera que els usuaris entenguin les opcions que tenen per navegar el lloc. Sovint, els llocs web contenen múltiples sistemes de navegació, tals com a navegació global, navegació local, navegació suplementària, navegació contextual i navegació de cortesia.[13]
Aquest disseny permet donar una vista de manera global –similar a l'índex d'un llibre–, de la ubicació i desplaçament a través de les diferents pàgines d'un lloc web.
Disseny d'interfície modifica
- Article principal: Disseny d'interfície d'usuari
El disseny de la interfície d'usuari inclou seleccionar i ordenar els elements de la interfície per permetre als usuaris interactuar amb la funcionalitat del sistema.[14] L'objectiu és facilitar-ne la usabilidad i eficiència tant com sigui possible. Alguns elements comuns que es troben en el disseny d'interfícies són els botons d'acció, camps de text, caixes de verificació, botons radials i menús desplegables.
Més informació modifica
- Disseny comprensiu
- Disseny gràfic
- Arquitectura de la informació
- Disseny d'experiència d'usuari
- Disseny d'interfície d'usuari
- Disseny web
Notes modifica
- ↑ Brown 2011, p. 166
- ↑ 2,0 2,1 2,2 Garrett 2010, p. 131
- ↑ 3,0 3,1 3,2 Brown 2011, p. 167
- ↑ 4,0 4,1 Brown 2011, p. 168
- ↑ Brown (2011), p. 169
- ↑ 6,0 6,1 Wodtke, Govella 2009, p. 186
- ↑ 7,0 7,1 Konigi.com 2011
- ↑ Brown 2011, p. 169
- ↑ 9,0 9,1 Wodtke, Govella 2009, p. 185
- ↑ Brown 2011, p. 175
- ↑ Brown 2011, p. 194
- ↑ Garrett 2010, p. 126
- ↑ Garrett 2010, p. 120-122
- ↑ Garrett 2010, p. 30
Referències modifica
- Brown, Dan M. Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders, 2011. ISBN 978-0-13-138539-9.
- Garrett, Jesse James. The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders, 2010. ISBN 978-0-321-68865-1.
- «Konigi Wiki – Wireframes». Arxivat de l'original el 5 de maig de 2011. [Consulta: 25 març 2011].
- Wodtke, Christina; Govella, Austin. Information Architecture: Blueprints for the Web, Second Edition. New Riders, 2009. ISBN 978-0-321-59199-9.