Un wireframe web es una guía visual simple para mostrarle cómo se vería una página web. Sugiere la estructura de una página, sin utilizar gráficos o texto. Un sitio web de estructura alámbrica mostraría toda la estructura del sitio, incluidas las páginas que enlazan a dónde.
Los wireframes web son una excelente manera de comenzar su trabajo de diseño. Y si bien es posible crear estructuras metálicas complejas con enormes cantidades de detalles, su planificación puede comenzar con una servilleta y un bolígrafo. La clave para hacer buenos wireframes es omitir todos los elementos visuales. Usa cuadros y líneas para representar imágenes y texto.
Cosas para incluir en un wireframe de página web:
- cajas para elementos graficos primarios
- Colocación de titulares y subtítulos.
- una estructura de diseño simple
- llamadas a la acción
- bloques de texto
Cómo construir una estructura de cable web simple
Cree un alámbrico de páginas web utilizando cualquier trozo de papel que tenga a mano. Así es como lo hago:
- Dibuje un rectángulo grande: esto puede representar la página completa o solo la parte visible. Por lo general, comienzo con la parte visible y luego la amplío para incluir elementos que estarían debajo del pliegue.
- Dibuje el diseño: ¿es 2 columnas, 3 columnas?
- Agregar en un cuadro para un gráfico de encabezado: dibuje sobre sus columnas si desea que sea un solo encabezado sobre las columnas, o simplemente agréguelo donde lo desee.
- Escribe "Titular" donde quieras que esté tu encabezado H1.
- Escribe "Sub-Head" donde quieras que sean H2 y titulares más bajos. Ayuda si los hace proporcionales - h2 más pequeño que h1, h3 más pequeño que h2, etc.
- Añadir en cajas para otras imágenes.
- Añadir en la navegación. Si está planeando pestañas, simplemente dibuje cuadros y escriba "navegación" en la parte superior. O ponga listas con viñetas en las columnas donde desea la navegación. No escribas el contenido. Solo escribe "navegación" o usa una línea para representar texto.
- Agregue elementos adicionales a la página: identifique qué son con el texto, pero no use el contenido real del texto. Por ejemplo, si desea un botón de llamada a la acción en la esquina inferior derecha, coloque un cuadro allí y etiquételo como "llamada a la acción". No escriba "¡Compre ahora!" en esa caja
Una vez que haya escrito su estructura alámbrica simple, y no le tomará más de 15 minutos dibujar uno, muéstrelo a otra persona. Pregúnteles si hay algo que falta y para otros comentarios. Según lo que digan, puedes escribir otro alámbrico o conservar el que tienes.
¿Por qué los wireframes de papel son mejores para los primeros borradores?
Si bien es posible crear wireframes con programas como Visio, para tus sesiones iniciales de lluvia de ideas, debes apegarte al papel. El papel no parece ser permanente, y muchas personas asumirán que lo tiraron en 5 minutos, por lo que no dudan en darle una buena respuesta. Pero cuando usas un programa para crear elegantes estructuras de alambre con cuadrados y colores perfectos, corres el riesgo de quedarte atrapado en el programa y pasar horas perfeccionando algo que nunca llegará a funcionar.
Los wireframes de papel son fáciles de hacer. Y si no te gusta, simplemente arrugas el papel, lo tiras al reciclaje y tomas una hoja nueva.
