Empieza las webs con buen pie. Haz un buen esquema

Lo primero que hago cuando empiezo un proyecto, antes siquiera de pensar en el diseño, es hacerme un esquema de la web. No hace falta un esquema muy detallado, pero si lo suficientemente claro para visualizar el proyecto al completo y tener definidos todos los bloques que va a tener la web.

Aunque he probado muchas soluciones( a mano, con freehand, con plantillas wireframe en html )… al final las dos herramientas que encuentro más prácticas son estas dos:

  • Freemind
  • Balsmik Mockups

Freemind. es una herramienta de mind maping ( Mapas mentales en castellano)  Opensource en Java. No es tan bonita como Mind mapper o Mindmeister (servicio online), pero chico, Freemind es gratis y hace lo que necesito. Si quereis ver más aplicaciones de mind maping, en la wikipedia hay un listado muy completo.

En este ejemplo he creado dos árboles, uno para la web anterior y otro para la nueva. En los rediseños me gusta hacerlo asi para ver las secciones enfrentadas y tener claro cuales son nuevas, cual se elmina, etc…

Estructurando contenidos con Freemind

Estructurando contenidos con Freemind

Cuando ya tengo claro el esquema, paso a Balsamiq Mockups. Esta aplicación en AIR me la recomendó Andres Karp y desde que la usé me enamoró. Tiene muchos elementos de interfaz web ya definidos para que en un momento puedas montar un esquema decente (video de la aplicación). La ventaja de trabajar primero con un diseño en wireframe con el cliente es que se puede centrar en los elmentos y bloques de información, eliminando la variable “diseño” en el primer acercamiento.

Esquema web hecho con Balsamiq Mockup

Esquema web hecho con Balsamiq Mockup

El mundo no es de algodón y azucar por lo que al final esta estructura inicial evolucionará y crecerá. Este paso sirve para ahorrarte horas y horas de modificaciones sobre diseños ya avanzados.

Cuando ya tengas clara la estructura y el esquema, empieza a diseñar. Verás que es mucho más fácil a partir de un esquema que con una hoja en blanco de photoshop.

En webdesignerdepot han publicado un post muy bueno sobre las ventajas de empezar por diseño en wireframes: Using Wireframes to Streamline Your Development Process

Enlaces: