Llegamos a la entrega 3 de esta serie de reDiseño de Sitios Web. En esta última parte veremos cómo crear un sitio web siguiendo cinco pasos aplicables de forma general.

Nota: Tal vez no sea la última parte, esto sólo depende de ti, de ustedes. Después de diseñar un sitio, el asunto no se queda ahí, todavía quedan más pasos por realizar como son: el proceso de desarrollo (la programación), el proceso de la publicación y por último el mantenimiento. Si te interesa, sólo deja un comentario ahora mismo si quieres que esta serie continúe hasta aquellos temas.

Puedes consultar las demás partes en la siguiente lista:

  1. Cómo reDiseñar Una Página Web: Parte I
  2. Cómo reDiseñar Una Página Web: Parte II
  3. Cómo reDiseñar Una Página Web: Parte III

Empecemos.

¿Por qué todo aquel alboroto de definir objetivos, propósitos, acciones y definir una estrategia para la “simple” tarea de diseñar un sitio?

En seguida veremos como ese ejercicio nos va guiar durante toda esta fase de diseño, de otro modo estaríamos trabajando a ciegas y dejando muchas cosas al azar, cosa que no queremos en un sitio web.

Hay que tomar aquella lista de objetivos + propósitos + acciones y la estrategia para realizar el primer paso y como apoyo para los demás. Veamos el primer paso.

Re/Estructuración de un mapa del sitio

Por experiencia sé que esto a veces lo dejamos para el final o ni si quiera lo hacemos, pero nada más erróneo. Un mapa de sitio nos dice explícitamente las páginas que hay que diseñar y cómo están conectadas unas con otras. El mapa es y será nuestra guía de aquí en adelante.

El mapa de sitio es un ejercicio en el que le ponemos nombre a las secciones del sitio, las categorías, incluso hasta una estructura de URL’s y lo más importante, una jerarquización del sitio.

¿Con qué herramientas contamos para hacerlo?

Seguramente pensaste que OmniGraffle, o Illustrator, PowerPoint o cualquier software que se te ocurra.

Pues no, ¿pero qué, por qué? Porque el software no te va hacer (todavía) un mapa de lo que tienes en mente auto mágicamente, de hecho el software que utilices realmente no importa, es cuestión de gustos, habilidades y presupuesto en el bolsillo.

Entonces ¿Cuáles son esas herramientas? Piensa que un mapa de sitio en realidad lo podemos “pensar” como una infografía, entonces nuestras herramientas para esto son:

  • Mapas Mentales
  • Organigramas
  • Cuadros Sinópticos
  • Diagramas de Flujo
  • Diagramas de Procesos

Por mencionar algunos… yo en lo personal, más por la rapidez y claridad en la implementación hago un SmartArt en PowerPoint de un organigrama horizontal o vertical, escribo una sencilla lista y niveles de indentación (si ya lo plasmé antes en papel) y queda en 5 a 10 minutos dependiendo del mapa.

mapa de sitio

Haz una lista de las páginas, secciones, categorías del sitio y plásmalas en alguno de los mapas o diagramas que ya mencioné.

El objetivo es tener un panorama global de acceso rápido visual para consultarlo continuamente; te servirá a ti y si lo implementas en el sitio, a tus visitantes.

Ahora vayamos al siguiente paso.

Bocetaje del sitio completo o componentes específicos

Es importante plasmar primero las ideas del diseño a lápiz y en papel y luego pasarlo a la computadora.

Basado en la información obtenida de las entregas anteriores, toca el momento de plasmarlo gráficamente en papel.

¿Cómo hacerlo? Está bien ¿Es necesario que lo explique?... Creo que no, sería insultarte, sólo quiero dejar algunos tips y recordatorios:

  • Utiliza un sistema de rejillas.
  • Enfócate más en la composición y las proporciones.
  • Recuerda que es tan sólo un boceto, pero no por eso no le pongas calidad aceptable, debe ser comprensible.
  • La calidad del boceto depende de la calidad de línea.
  • El boceto debe explicar la intención del diseño.
  • NUNCA tires los bocetos, guárdalos, incluso escanéalos o tómales una fotografía.

Realiza anotaciones sobre los bocetos para aclarar ciertos puntos.

cuaderno de bocetaje

Esto sirve para la hora de diseñar los mockups (maquetas) finales hechos por lo general en Photoshop. Anotaciones donde describamos que ahí va una tipografía de cierta familia, de cierto nombre, de cierto tamaño, cierto estilo e incluso especificaciones de color; entre muchas otras.

¿Ahora qué sigue?

Realización de wireframes de páginas, secciones y  componentes específicos

¿No sabes qué es un wireframe? Es sencillo el concepto, vendrían a ser los planos estructurales del sitio y están basados en los bocetos pero a una calidad muy alta.

Recuerda que los wireframes no contienen demasiado lenguaje visual, deben ser simples:

  • Un solo color: Negro
  • Una sola calidad de línea: 1pt o 1px
  • Nada de plastas en los componentes
  • Una sola tipografía, de preferencia sans-serif, puedes variar sólo el peso y el estilo normal / negrita / itálica. (Tipico Arial / Helvética 12pt o 14pt)
  • Escala y proporciones reales

ejemplo de wireframe

¿Dónde realizarlos? Nuevamente, hay mucho software, las mejores opciones son software que pueda manipular vectores, por ejemplo de la Suite de Adobe: Illustrator, Fireworks e InDesign y existen muchos otros específicos para hacer wireframes.

¿Para qué hacerlos? Puede parecer una pérdida de tiempo, sin embargo, si diseñamos bien componentes genéricos que pueden ser re-utilizados en otros proyectos que mejor.

La idea es que desarrollemos un sistema de patrones de diseño que funcionan una y otra vez sin importar el proyecto, siempre y cuando cubran ciertas necesidades y especificaciones.

Esto nos da pauta al siguiente paso

Diseño y propuesta de las maquetas finales (mockups)

Ahora sí, es momento de tomar todo lo que ya hicimos previamente:

  • Objetivos + propósitos + acciones y la estrategia.
  • Materiales recopilados (fotografías, videos, ilustraciones, diagramas, etc)
  • Mapa del sitio
  • Bocetos y anotaciones
  • Wireframes

Basta con aplicar todo eso en conjunto y créeme que de este modo, es más rápido y fácil, que como primer paso llegar y enfrentarte al Photoshop abierto con una pantalla en blanco.

diseñador web trabajando

Nos toca apretar botones, lidiar con programas de computadora que se pasman, interrupciones continuas a nuestro alrededor, el email que no deja de llegar… y así hasta que terminamos.

Creo que no necesita más explicación este punto.

Documentación de las propuestas

No te debería sonar raro lo de documentar el diseño. De hecho esto es sumamente común en el diseño de identidad corporativa o marcas.

Documentar el diseño permite entre muchas cosas explicar el concepto y trabajo que hubo detrás del diseño global y cada uno de sus componentes.

Sirve de manera similar a una guía de estilo editorial; sirve para comunicar a otros diseñadores los mecanismos y especificaciones que actúan en un diseño.

Sirven también como ejercicio para nosotros mismos para justificar cada pieza y/o elemento gráfico de lo que estamos haciendo. Así nos evitamos poner “adornos” que están de más e identificar objetos que puedan faltar.

¿Qué documentar? TODO, el “porque”, de todo lo que estás diseñando, de lo que hicimos.

  • Porque esa composición
  • Porque esos colores
  • Porque esa(s) tipografía(s)
  • Porque esas texturas
  • Porque esas figuras o formas
  • Porque esas proporciones, escalas, medidas, tamaños.
  • Acotaciones y limitaciones del diseño
  • Oportunidades en el diseño (que se puede mejorar, que podemos adaptar, que se puede modificar)

Etcétera, etcétera… ¿Se entiende la idea? Esto es escribir en prosa la justificación del proyecto en lenguaje de diseño; escrito para otras personas y para nosotros.

Hay que sustentar el diseño en base a investigación, análisis, estadísticas y requerimientos de (nuevamente y que no me cansaré de repetir) los objetivos, propósitos, acciones y estrategia del proyecto.