Uso de wireframes para optimizar su proceso de desarrollo
Crear un wireframe es uno de los primeros pasos que debes tomar antes de diseñar un sitio web.
Un wireframe lo ayuda a organizar y simplificar los elementos y el contenido dentro de un sitio web y es una herramienta esencial en el proceso de desarrollo.
Un wireframe es básicamente una representación visual del diseño de contenido en un diseño de sitio web .
El wireframe actúa como un prototipo que muestra la ubicación de las características de la página, como el encabezado, el pie de página, el contenido, las barras laterales y la navegación.
También especifica la ubicación de los elementos dentro de estas áreas de contenido. Si desea desarrollar un sitio que coincida exactamente con los requisitos del cliente y minimizar las revisiones del proyecto, wireframing lo mantendrá al tanto.
Beneficios de Wireframing
La creación de una estructura alámbrica brinda al cliente, desarrollador y diseñador la oportunidad de analizar de manera crítica la estructura del sitio web y les permite realizar revisiones fácilmente desde el principio del proceso.
Wireframing ofrece los siguientes beneficios clave:
- Le da al cliente una vista temprana y en primer plano del diseño del sitio (o rediseño).
- Puede inspirar al diseñador, lo que resulta en un proceso creativo más fluido.
- Le da al desarrollador una imagen clara de los elementos que necesitarán para codificar.
- Hace que el llamado a la acción en cada página sea claro.
- Es fácil de adaptar y puede mostrar el diseño de muchas secciones del sitio web.
Herramientas para el desarrollo de wireframe
Tiene muchas herramientas para elegir al crear un wireframe:
- Dibujar a mano en papel es siempre un buen punto de partida para cualquier diseñador. Proporciona una manera rápida y fácil de enfocarse y organizarse. Si eres muy preciso con los bocetos, incluso podrías usar esto como tu wireframe final. (Ver figura 1.)
- Diagrama de flujo o software de mapas mentales , como Visio . Estas opciones de software vienen con elementos preempaquetados que le permiten crear fácilmente representaciones de diagramas de flujo de su estructura metálica.
- Software de creación de prototipos web , como Gliffy o Balsamiq . Herramientas como estas fueron creadas especialmente con el propósito de generar wireframes, y tienen capacidades de prototipado fáciles de usar.
- Software de gráficos , como Photoshop o Illustrator. El beneficio de usar estas herramientas es que el wireframe se puede convertir directamente en una maqueta gráfica del diseño del sitio web; sin embargo, la desventaja es que tendrás que crear todos los elementos a mano.
- (X) Los wireframes HTML son casi como los sitios reales. Puede diseñar la malla con el código antes de aplicar los estilos, o puede crear un diseño de alta fidelidad y totalmente estilizado que se parezca mucho a un diseño final. (Ver figura 2)
En última instancia, el desarrollador o diseñador debe seleccionar la herramienta que prefiera. Personalmente, uso Photoshop porque me gusta la forma en que organiza el proceso y la facilidad con la que puedo convertir el archivo en una maqueta.
Ejemplo de estructura metálica
El nivel de detalle en un wireframe depende de varios factores, que incluyen: cuánta dirección y contenido ha proporcionado el cliente, qué tan complejo es el contenido, qué tan avanzado está en el proceso y qué detalle le gustaría incluir .
Aquí hay ejemplos de wireframes que fueron creados usando diferentes herramientas y exhibiendo diferentes niveles de detalle y color:
Figura 1: Este esquema simple de estructura metálica para el sitio web Coastal Capital Partners (ahora rebautizado como Broad Reach Retail Partners) se utilizó para crear maquetas gráficas y, finalmente, el diseño final. Por Mike Rohde .
Figura 2: estructura metálica HTML de muy baja fidelidad. Útil para demostrar cómo se verá un sitio antes de agregar el estilo. Muy útil para usuarios con discapacidad visual.
Figura 3: estructura metálica de baja fidelidad para la Comunidad Embrace Pet , por Jesse Bennett-Chamberlain de 31Three .
Figura 4: una maqueta preliminar de una herramienta de conferencia social basada en Tiddlywiki para usar en Le Web 3. Las notas para acompañarlo están en tiddleleweb.tiddlyspot.com . Estructura metálica por Phil Hawksworth.
Figura 5: Esta se basa en el uso avanzado de un sistema de publicación de blogs (WordPress). Por Mattheiu Mingassson o Activeside Estrategias de Internet y Consultoría .
Figura 6: Una estructura de alambre para la Comunidad Embrace Pet , por Jesse Bennett-Chamberlain de 31Three .
Figura 7: Una estructura alámbrica con color e imágenes. Estructura de la página del autor por Bokhandel .
Figura 8: Otro wireframe con color. Por Mattheiu Mingassson de Activeside Estrategias de Internet y Consultoría .
Mejores prácticas
Para lograr resultados óptimos, aquí hay varias cosas importantes a tener en cuenta al desarrollar una estructura metálica:
- Sencillez. La clave es mantenerlo lo suficientemente simple como para ser claro para el cliente y ser flexible para el diseñador, pero lo suficientemente detallado como para guiar al programador. Como se mencionó anteriormente, podría crear una estructura alámbrica de alta fidelidad, pero hacerlo al principio del proceso de desarrollo podría ser confuso para el cliente, que puede confundirlo con un borrador final.
- Trabaja en escala de grises Al crear elementos para un wireframe, es mejor trabajar en escala de grises para que pueda enfocarse en el diseño sin distraerse con el diseño. Si le han dado un logotipo a todo color, conviértalo a escala de grises también. Para distinguir y categorizar varios elementos, muestre las formas y los contornos en diferentes tonos de gris.
- Utilice wireframes en tándem con un mapa del sitio. Un wireframe es una representación visual de un buen mapa del sitio, no un reemplazo. Un mapa del sitio es una herramienta útil para cualquier sitio web y definitivamente sería útil consultar durante el proceso de desarrollo.
- Enfócate en el resultado deseado. Tenga una idea clara de cómo su cliente desea que los usuarios respondan a la página antes de crear su estructura. Los llamados a la acción deben ser muy claros simplemente al mirar el wireframe.
- Crea un wireframe de tamaño completo si es para un sitio web. Esto dará la representación más precisa de la página real.
- Planifique los elementos asegurando el contenido por adelantado. En el mejor de los casos, su cliente ya le habrá proporcionado los elementos que deberían aparecer en cada página, como el logotipo, los anuncios, los reproductores de Flash o de video, las características, las secciones de navegación y los elementos de barra lateral, encabezado y pie de página. Si todavía no tiene esta información, reúnase con su cliente y obtenga (o cree) un mapa del sitio. Si está rediseñando elementos existentes, puede recopilarlos a partir de una revisión cuidadosa del sitio web. En este escenario, asegúrese de confirmar primero con su cliente que no se le pedirá que agregue o elimine elementos, porque no tener una comprensión clara de sus expectativas ralentizará el proceso.
Escala de grises vs. Color
Al crear una estructura alámbrica, trabajar en escala de grises ayuda a mantener el foco en la función principal del proceso , que es finalizar el diseño, no el diseño (ver Figura 3). Otro riesgo de trabajar en color es que el cliente puede confundir el wireframe con la maqueta final.
El color puede, sin embargo, resultar útil al mostrar la ubicación de cada llamada a la acción. Debido a que una página puede contener varias llamadas a la acción, es importante priorizarlas. Los wireframes pueden ayudar a determinar qué llamado a la acción atraerá primero la atención del usuario.
Recientemente trabajé en un proyecto que tenía un logotipo muy vibrante, que, en ese caso, fue el principal llamado a la acción porque representaba una revista recién lanzada.
Cuando usa el color, puede decir más fácilmente si ciertos elementos están dominando la llamada a la acción principal. Este proceso aún cae dentro del ámbito del wireframing, en lugar del diseño de maqueta, porque las ubicaciones de los elementos aún están siendo determinadas.
El color se puede agregar gradualmente a la estructura metálica a medida que avanza el proyecto , que es más eficiente que avanzar con las maquetas antes de que la ubicación de los elementos se bloquee. Al hacer esto, el software gráfico puede ayudarlo a cambiar directamente a una maqueta cuando esté listo.
Que evitar
Al igual que otros aspectos de su proceso de desarrollo, el wireframing puede tener sus inconvenientes si no se lleva a cabo correctamente. Aquí hay algunos consejos sobre qué evitar para lograr los resultados más efectivos:
- Demasiado sucediendo en la página. Deje un amplio espacio en blanco para que el diseño no parezca demasiado ocupado o desordenado.
- Énfasis en el color y el diseño. Wireframing es para decidir el diseño y la ubicación de los elementos. Aunque una estructura metálica puede influir en el diseño, agregar gráficos y colores probablemente solo lo distraiga de su propósito.
- Demasiados detalles. Siempre puede agregar más detalles más adelante, pero si incluye demasiado en el comienzo, el cliente puede confundir la malla para la maqueta final.
Si está interesado en aprender más sobre wireframes, Revista Wireframe es un gran recurso que comparte muestras, analiza técnicas y resuelve problemas relacionados con la arquitectura de la información.
Crear un wireframe para el sitio web de su cliente proporciona una herramienta de comunicación efectiva para todas las partes involucradas.
Incluso la construcción de un wireframe simple ahorrará tiempo a largo plazo y facilitará el proceso de desarrollo para el diseñador, desarrollador y cliente.
Escrito exclusivamente para WDD por Eric Shafer.
¿Utiliza wireframes para su diseño? ¿Cuáles son algunas de las mejores formas de crear wireframes eficaces?