Fase de diseño de un proyecto web
La Fase de Diseño de un proyecto web supone un conjunto de operaciones encaminadas a decidir y representar de forma exhaustiva y pormenorizada la arquitectura de la información del sitio web.
Para su correcto desarrollo, necesitamos toda la información recabada en la fase de análisis.
En esta fase de diseño vamos a definir:
- Mapa de contenidos o blueprint
- Taxonomías
- El prototipado de la arquitectura web
- Evaluación del prototipado
1. Mapa de contenidos
Un mapa de contenidos es un esquema que representa la estructura del sitio web, mostrando los diferentes elementos, sus relaciones y las jerarquías existentes.
Estos esquemas pueden representar la estructura general o bien partes concretas, dependiendo de la complejidad del proyecto.
En el blueprint principal definiremos:
- Árbol jerárquico de páginas
- Componentes y funcionalidades de la página de inicio
- Componentes y funcionalidades de las páginas interiores
- Menú principal de navegación
- Menús secundarios de navegación
Podemos asimismo definir blueprints específicos que muestren, por ejemplo, el flujo del proceso de compra de un producto.
Para la elaboración del blueprint pueden emplearse desde programas genéricos de office hasta programas específicos de diseño de diagramas para realizar este tipo de tareas, siendo los más habituales OmniGraffe en entorno iOs y Microsoft Visio en el entorno Windows.
Nosotros recomendamos el uso de la herramienta Pencil
2. Taxonomías
Las taxonomías son una categorización de descriptores de forma jerárquica que nos va a permitir un sistema de almacenamiento y de recuperación de los contenidos de nuestro sitio web.
Las taxonomías que se emplean en los sitios web son de dos tipos:
- Categorías
- Etiquetas
Las categorías agrupan los descriptores de manera jerárquica y de forma excluyente entre sí. De esta forma, cada contenido, ya sea una página o un post, se le suele asignar como mínimo una categoría.
Las categorías permiten la publicación de contenidos agrupados jerárquicamente por estas mismas categorías.
Las etiquetas tienen una organización jerárquica menor, pues su función es la de representar con varios descriptores un contenido determinado. Cada contenido puede tener entre una y cinco etiquetas a modo de descriptores del contenido específico del que se trate.
A diferencia de las categorías, la recuperación de contenidos por la vía de etiquetas se realiza a través de las barras o componentes laterales de las páginas web, en forma de etiquetas desplegables o en nube de etiquetas.
[ Leer post específico sobre categorías y etiquetas ]
3. El prototipado de la arquitectura web
En esta fase vamos a crear y diseñar una serie de diagramas en los que se recojan de forma exhaustiva y pormenorizada los elementos de la arquitectura de la información que va a estructurar el sitio web.
La finalidad más importante es la de comunicar eficazmente nuestra propuesta de la arquitectura web del sitio, de sus sistemas de organización, etiquetado, navegación y búsqueda.
Los principales tipos de diagramas o prototipos que se suelen utilizar habitualmente son los wireframes.
Los wireframes son prototipos arquitectónicos de cada uno de los tipos de páginas que conforman un sitio web.
Dependiendo del nivel de especifidad y de detalles del prototipo o wireframe, habitualmente se emplean dos tipos: de alta fidelidad y de baja fidelidad.
Los wireframes de baja fidelidad muestran los aspectos arquitectónicos básicos de un tipo de página web sin incluir elementos gráficos y sin contenido real.
Los wireframes de alta fidelidad reflejan los aspectos arquitectónicos básicos de un tipo de página web incluyendo todos los elementos gráficos y el contenido real que completará la página y que se mostrará a los usuarios del sitio web.
Los wireframes de baja fidelidad se emplean en las fases iniciales del prototipado. Recordemos que la metodología de los proyectos web es iterativa y, por ese motivo, debemos de ir aproximándonos progresivamente a las necesidades de nuestros clientes desde prototipos menos elaborados a aquellos que se aproximan al modelo final.
Herramientas para la elaboración de wireframes:
4. Evaluación del prototipado
La evaluación del prototipado consiste en, antes de pasar a la fase de implantación, poner a prueba esa primera propuesta arquitectónica con un grupo seleccionado de usuarios tipo del sitio web que estamos diseñando.
Esta evaluación nos permitirá valorar, a partir de evidencias empíricas, si hemos diseñado una propuesta arquitectónica que satisfaga realmente los requerimientos identificados en la fase de análisis. En todo caso, nos va a permitir identificar disfunciones arquitectónicas para resolverlas antes de la publicación del sitio web.
La evaluación del prototipado se realiza con wireframes de alta fidelidad. Las técnicas participativas para su evaluación deberán de ser también iterativas, de manera que podamos escalar el proyecto a la fase de implementación con las máximas garantías posibles.
Referencias:
- ROSENFELD, L.; and MORVILLE, P. Information Architecture for the World Wide Web. O’Reilly &
Associates, Inc. Sebastopol, CA, USA, 2002. - PÉREZ-MONTORO, GUTIÉRREZ, M.; Arquitectura de información en entornos Web. Ed. Trea, 2010
- COUTIN DOMÍNGUEZ, ADRIÁN; Arquitectura de información para sitios web. Ed Anaya, 2002
- CARRERAS MONTOTO, OLGA; Usableaccesible (web). https://olgacarreras.blogspot.com
Fase de disseny d’un projecte web
La Fase de Disseny d’un projecte web suposa un conjunt d’operacions encaminades a decidir i representar de forma exhaustiva i detallada l’arquitectura de la informació del lloc web.
Per al seu correcte desenvolupament, necessitem tota la informació recaptada en la fase d’anàlisi.
En aquesta fase de disseny definirem:
- Mapa de continguts o blueprint
- Taxonomies
- El prototipat de l’arquitectura web
- Avaluació del prototipat
1. Mapa de continguts o blueprint
Un mapa de continguts éso n esquema que representa l’estructura del lloc web, mostrant els diferents elements, les seues relacions i les jerarquies existents.
Aquests esquemes poden representar l’estructura general o bé parts concretes, depenent de la complexitat del projecte.
En el blueprint principal definirem:
- Arbre jeràrquic de pàgines
- Components i funcionalitats de la pàgina d’inici
- Components i funcionalitats de les pàgines interiors
- Menú principal de navegació
- Menús secundaris de navegació
Podem així mateix definir blueprints específics que mostren, per exemple, el flux del procés de compra d’un producte.
Per a la seua elaboració, podem emprar eines com Pencil o com d’altres altres que es ressenyen en el pròxim apartat de prototipat.
2. Taxonomies
Les taxonomies són una categorització de descriptors de forma jeràrquica que ens permetrà un sistema d’emmagatzematge i de recuperació dels continguts del nostre lloc web.
Les taxonomies que es fan servir en els llocs web són de dos tipus:
- Categories
- Etiquetes
Les categories agrupen els descriptors de manera jeràrquica i de forma excloent entre si. D’aquesta forma, cada contingut, ja siga una pàgina o un post, se li sol assignar com a mínim una categoria.
Les categories permeten la publicació de continguts agrupats jeràrquicament per aquestes mateixes categories.
Les etiquetes tenen una organització jeràrquica menor, perquè la seua funció és la de representar amb diversos descriptors un contingut determinat. Cada contingut pot tindre entre una i cinc etiquetes a manera de descriptors del contingut específic del qual es tracte.
A diferència de les categories, la recuperació de continguts per la via d’etiquetes es realitza a través de les barres o components laterals de les pàgines web, en forma d’etiquetes desplegables o en núvol d’etiquetes.
[ Llegir post específic sobre categories i etiquetes ]
3. El prototipat de l’arquitectura web
En aquesta fase crearem i dissenyar una sèrie de diagrames en els quals es recullen de forma exhaustiva i detallada els elements de l’arquitectura de la informació que estructurarà el lloc web.
La finalitat més important és la de comunicar eficaçment la nostra proposta de l’arquitectura web del lloc, dels seus sistemes de organització, etiquetatge, navegació i cerca.
Els principals tipus de diagrames o prototips que se solen utilitzar habitualment són els wireframes.
Els wireframes són prototips arquitectònics de cada un dels tipus de pàgines que conformen un lloc web.
Depenent del nivell de especifitat i de detalls del prototip o wireframe, habitualment s’empren dos tipus: d’alta fidelitat i de baixa fidelitat.
Els wireframes de baixa fidelitat mostren els aspectes arquitectònics bàsics d’un tipus de pàgina web sense incloure elements gràfics i sense contingut real.
Els wireframes d’alta fidelitat reflecteixen els aspectes arquitectònics bàsics d’un tipus de pàgina web incloent tots els elements gràfics i el contingut real que completarà la pàgina i que es mostrarà als usuaris del lloc web.
Els wireframes de baixa fidelitat s’empren en les fases inicials del prototipat. Recordem que la metodologia dels projectes web és iterativa i, per aqueix motiu, hem d’anar aproximant-nos progressivament a les necessitats dels nostres clients des de prototips menys elaborats a aquells que s’aproximen al model final.
Eines per a l’elaboració de wireframes:
4. Avaluació del prototipat
L’avaluació del prototipat consisteix en, abans de passar a la fase d’implantació, posar a prova aqueixa primera proposta arquitectònica amb un grup seleccionat d’usuaris tipus del lloc web que estem dissenyant.
Aquesta avaluació ens permetrà valorar, a partir d’evidències empíriques, si hem dissenyat una proposta arquitectònica que satisfaça realment els requeriments identificats en la fase d’anàlisi. En tot cas, ens permetrà identificar disfuncions arquitectòniques per a resoldre-les abans de la publicació del lloc web.
L’avaluació del prototipat es realitza amb wireframes d’alta fidelitat. Les tècniques participatives per a la seua avaluació hauran de ser també iteratives, de manera que podem escalar el projecte a la fase d’implementació amb les màximes garanties possibles.
Referències:
- ROSENFELD, L.; and MORVILLE, P. Information Architecture for the World Wide Web. O’Reilly &
Associates, Inc. Sebastopol, CA, USA, 2002. - PÉREZ-MONTORO, GUTIÉRREZ, M.; Arquitectura de información en entornos Web. Ed. Trea, 2010
- COUTIN DOMÍNGUEZ, ADRIÁN; Arquitectura de información para sitios web. Ed Anaya, 2002
- CARRERAS MONTOTO, OLGA; Usableaccesible (web). https://olgacarreras.blogspot.com