Infotectura

Las 5 fases de los proyectos web: Diseño

23 de Septiembre, 2008 9 comentarios

En mi artículo anterior en esta serie describí la primera fase (“Negociación”) del proceso que usamos en BootStudio para producir sitios web. Si no lo has hecho todavía, recomiendo que leas ese artículo antes de leer este.

La primera fase termina cuando el cliente ha aprobado la cotización y alcance del proyecto. Entonces nos toca iniciar el “trabajo real”: ¡producir el proyecto! El primer paso siempre consiste en diseñar el producto que vamos a producir.

Fase 2 — Diseño

“Diseño” es una de esas palabras cargadas que significan cosas diferentes para diferentes personas. Muchos asumen que el diseño de un sitio es su diseño visual: cuando escuchan la palabra inmediatamente piensan en colores, imágenes, tamaños de letras, etc. Aunque el diseño visual es parte del proceso de diseño, no lo es todo; antes de comenzar a especificar elementos visuales, es importante tener clara la estrategia general del diseño, y esta a su vez ayuda a determinar la arquitectura de información del sitio. Ambas deben estar claramente definidas antes de comenzar a ver diseños visuales.

En fin, tenemos tres objetivos para la fase de diseño:

1. Definir de la estrategia de diseño.
2. Crear de una arquitectura para la información (o diseño de interacción, según sea necesario).
3. Producir un diseño visual que satisfaga las necesidades del proyecto.

Estrategia de Diseño

Para saber qué vamos a producir, debemos tener claro porqué vamos a producirlo: debemos entender cuáles son las necesidades de negocio que motivan el proyecto. En muchos casos, esto significa conocer cuáles son las características de nuestro cliente que lo diferencia de otras empresas en el mercado. Una vez que entendemos esto, podemos producir un diseño que enfatiza (y refuerza) estas características.

Esto suena obvio, pero en la práctica no es fácil. En algunas ocasiones el cliente puede tener una idea clara del sitio que quiere obtener, pero puede que hayan otras alternativas más efectivas para comunicar la estrategia de marca. Nuestra función en estos casos es asesorar al cliente y presentarle alternativas que apoyen su estrategia de marca en el web.

Por ejemplo, hace unos años desarrollamos un sitio para una empresa que deseaba construir un edifico de apartamentos. Querían un sitio que les ayudara a presentar el edificio, y generar contactos de ventas. En la actualidad hay docenas de empresas en este rubro en nuestro mercado, por lo que al inicio del proyecto nos reunimos con ellos para entender qué los diferenciaba de los demás. Resultó que el proyecto tenía unas vistas panorámicas magnificas, por lo que propusimos hacer éste el tema principal del sitio. Esta decisión inicial dictó el diseño de diversos elementos del sitio, y le trajo una coherencia al diseño que no hubiera tenido de otra forma.

Cabe mencionar que para poder desarrollar una estrategia de diseño, es importante entender cuál es la audiencia (o audiencias) del sitio. ¿Se trata de usuarios con mucho conocimiento sobre Internet? ¿Personas de la tercera edad? ¿Extranjeros? Cada uno de estos grupos va a tener expectativas diferentes del sitio. Entender cuáles van a ser los grupos más importantes ayuda a determinar la mejor forma de lograr un diseño que comunica claramente con ellos.

Arquitectura de información/Diseño de interacción

La arquitectura de información (AI) es otro concepto cuya definición parece estar en flujo. Sin embargo, para los propósitos que trato aquí, la AI consiste en definir la estructura del contenido en el sitio y las formas en que el usuario va a encontrar y usar esa información. Esto incluye las estructuras de navegación del sitio, los esquemas de las páginas (wireframes), los tipos de contenido que va a incluir el sitio (e.g. artículos, plantas de apartamentos, perfiles de ejecutivos, etc.), y la metadata que describe esos contenidos. También incluye las estructuras de búsqueda del sitio, en caso de que se emplee un motor de búsqueda.

El diseño de interacción (IxD) es un complemento a la AI aplicable a las aplicaciones web (e.g. una aplicación de banca virtual). Consiste en el diseño de las formas en que el usuario va a interactuar con la aplicación: la secuencia de pantallas, la estructura de los diversos formularios, etc. Voy a tratar más sobre este tema en artículos futuros, pero por ahora vamos a enfocarnos en la AI. Basta con mencionar que el IxD también se ve en esta fase del proyecto.

Para poder producir una AI, debemos primero conocer a detalle el contenido que se desea publicar. En caso de un re-diseño, este contenido puede encontrarse publicado en el sitio actual del cliente. También puede darse el que el cliente cuente con textos o imágenes producidos para otros medios: revistas, libros, panfletos, etc. Aún cuando haya contenido existente, casi siempre hay que producir contenido adicional. Para poder llevar control del contenido que va a ser publicado en el sitio, producimos un inventario de contenido: un documento que nos permite saber con qué contenido contamos, quién es responsable por el, y qué hace falta.

En fin, el resultado de la AI (y el IxD) es una serie de documentos que especifican el “esqueleto” del sitio: una presentación diagramática de los esquemas que van a regir la experiencia del usuario del sitio. Crear esta documentación antes de iniciar el diseño visual tiene varias ventajas, pero la más importante es que permite al diseñador tener una idea de cómo va a funcionar el sitio—algo mucho más importante que cómo se va a ver. (En algunos casos, esto puede incluir prototipos de baja fidelidad. Éste tema lo vamos a tocar en más detalle en artículos futuros.)

Diseño visual

Una vez que tenemos claro el “esqueleto” del sitio, podemos proceder a ponerle “músculo, pellejo, y maquillaje”: el diseño visual.

Éste es uno de los componentes más importantes del sitio. El web es un medio visualmente rico, y los usuarios han aprendido a confiar en sitios con presentaciones visuales de alta calidad (y, obviamente, a desconfiar en aquellos con una presentación visual incompetente). Sin embargo, producir un diseño visual que satisfaga las expectativas de todos los grupos claves es un reto: la presentación visual es uno de los elementos más subjetivos del proyecto. Aquí también nos beneficiamos de tener clara una estrategia de diseño para el sitio: si todos los miembros del proyecto están claros en cuales son los objetivos principales del diseño, la producción del diseño visual se puede hacer menos arbitraria.

Otro reto a la producción del diseño visual es que a muchas personas se les hace difícil comunicar claramente las cosas que les gustan (o las que no les gustan). Alguien puede decir que quiere un sitio “minimalista”, o “moderno”, o “tradicional”, pero puede que estas palabras signifiquen algo radicalmente diferente para ellos que para nosotros. Normalmente le pedimos al cliente que nos muestre ejemplos de sitios que le gustan, y le pedimos que nos explique porqué le gustan; esto nos da claves sobre la dirección visual que debemos tomar.

Cabe notar que el diseño visual debe ser creado principalmente para comunicar claramente con los usuarios del sitio. Es posible que el cliente tenga expectativas sobre la presentación visual que no concuerden con las que tienen los miembros de la audiencia principal del sitio. (Es un fenómeno que vemos con frecuencia en casos en que la audiencia pertenece a un grupo cultural diferente al del cliente.) En estos casos, servimos como asesores del cliente para ayudarle a entender cuáles son las expectativas de sus usuarios, y sugerir alternativas para satisfacer las expectativas de ambos grupos.

Una vez que contamos con todos los elementos de diseño—la estrategia, la arquitectura, y el diseño visual—definidos, podemos iniciar la siguiente fase: la producción del sitio. Esto lo veremos en detalle en nuestro siguiente artículo de esta serie.