- ¿Tienes que dibujar la maqueta o wireframe de un sitio web?

- ¿Necesitas representar un flujo de navegación?

Ya sabes que antes de arrancar cualquier proyecto, lo más útil que puedes hacer es dibujar lo que tienes en la cabeza. De esta forma contarás con una referencia para ordenar el trabajo, para valorar el alcance real, y para detectar los problemas con los que puedes encontrarte. Además, estos esquemas te permitirán compartir la información con el cliente y con el resto del equipo.

Estos consejos y herramientas pueden servirte de gran ayuda:

1. ¿Qué tipo de gráfico me conviene elaborar?

¿Tienes que elegir una forma de presentación para tus datos y no sabes por dónde empezar? Esta recopilación de tipos de gráficos puede servirte como inspiración.

2. Prefiero trabajar con lápiz y papel

Hay gente que prefiere trabajar al estilo tradicional, con lápiz y papel. Muchas veces, sobre todo en la fase de arranque, puede resultar más rápido e intuitivo, y además no pone límites a nuestra creatividad e imaginación: podemos dibujar y apuntar cualquier cosa, como en un cuaderno de notas.

La ventaja es que ahora no tenemos por qué arrancar de un papel en blanco. Aquí tienes unas plantillas imprimibles para que después completes tus wireframes o maquetas a mano.

(más…)

¿Tienes que diseñar un sitio web? ¿Necesitas realizar una propuesta de Experiencia de Usuario? Lo más importante es que no empieces la casa por el tejado. Para ordenar tus ideas, y para compartirlas con tus clientes y colaboradores, es mejor que arranques con una maqueta o wireframe. Así, a medida que avanzas, podrás incorporar todos los cambios necesarios sin poner el proyecto patas arriba.

En SitePoint han recopilado unas cuentas herramientas específicas que te ayudarán a construir la estructura y el flujo de navegación de tu sitio web. También pueden resultarte útiles para organizar un proyecto complejo.

Casi todas las aplicaciones incluyen una demo y una versión de prueba, que puede valerte para un trabajo puntual. Las hay gratuitas y de pago, baratas y caras, digitales y analógicas.

Aquí van, cada una con su precio aproximado:

Gratis o con versión gratuita

1. Pencil

2. iPlotz

3. Inkscape (aunque está más enfocado al dibujo)

De pago

4. Axure El estándar del mercado, por 589 dólares. A medida que construyes la estructura, el programa va generando la documentación

5. Visio La propuesta de Microsoft, por 129 euros

(más…)

Demasiado a menudo, empezamos a construir un sitio web de arriba abajo: pintamos unas cuantas cajas vacías (un área de trabajo y una columna lateral para el menú, por ejemplo) y después nos dedicamos a rellenarlas de contenido. El problema de este sistema es que acabamos con un montón de cosas en la página que son “de relleno, y que realmente no sirven para cumplir nuestros objetivos de diseño y de negocio.

Afortunadamente, existen otros caminos. En el el blog de 37 signals nos proponen un método sencillo y efectivo para diseñar el interfaz de usuario de un sitio web. A ellos les ha ido siempre muy bien. Aquí va resumido:

1. Haz una lista con todas las cosas que esa pantalla debe hacer. Estas preguntas pueden ayudarte a descubrirlo: ¿Qué es lo que el usuario debe ser capaz de conseguir? ¿Cuánta información es necesario que se muestre? ¿Qué funcionalidades son necesarias para que los clientes completen un proceso? Una vez que hayas descubierto los requisitos, etiquétalos con números.

2. Define cuáles de estos elementos numerados tienen relación entre ellos, ya sea de manera espacial (uno va al lado del otro) o conceptual (tratan sobre el mismo tema). Asigna una letra a cada grupo de elementos relacionados.

3. Realiza un boceto (o varios) para cada una de las letras (que agrupan a los números).

4. Agrupa todos esos diseños en un diseño único, para hacer que todas las piezas formen una unidad.

El siguiente paso consistiría en elaborar un wireframe o maqueta.

Si todavía lo ves un poco abstracto, aquí tienes un pequeño ejemplo:

(más…)