Los wireframes de sitios web son dibujos lineales simples que muestran la ubicación de los elementos en una página web. Puede ahorrar mucho tiempo editando el diseño de un simple alámbrico al inicio del proceso de diseño en lugar de un diseño complejo más adelante.
Usar wireframes es una excelente manera de comenzar un proyecto de sitio web, ya que le permite a usted y a su cliente enfocarse en el diseño sin la distracción del color, tipo y otros elementos de diseño. Concéntrese en lo que sucede en sus páginas web y en el porcentaje de espacio que ocupa cada elemento, que puede ser determinado por las necesidades de su cliente.
Qué incluir en un sitio web Wireframe
Todos los elementos importantes de una página web deben estar representados en la estructura de tu sitio web. Use formas simples en lugar de gráficos reales, y etiquételos. Estos elementos incluyen:
- Navegación: botones para que los usuarios visiten las secciones principales de su sitio.
- Logotipo de la empresa: se puede representar con una caja.
- Áreas de contenido: ¿Dónde aparecerán tus diferentes secciones de contenido?
- Cuadros de busqueda
- Áreas de inicio de sesión de usuario
Cómo crear Wireframes sitio web
Hay una variedad de formas de crear un wireframe de sitio web. Incluyen:
Dibujando a mano sobre papel
Este método es útil cuando se encuentra cara a cara con un cliente. Dibuje sus ideas de diseño en papel, con un enfoque en qué elementos deben ir a dónde.
Uso de Adobe Photoshop, Illustrator u otro software
La mayoría de los paquetes de software de gráficos vienen equipados con todas las herramientas básicas necesarias para crear wireframes. Las líneas simples, las formas y el texto (para etiquetar sus elementos) son todo lo que necesita para crear una estructura metálica presentable.
Uso de software creado para este tipo de tarea
Si bien Photoshop e Illustrator pueden hacer el truco, algunos paquetes de software se desarrollan específicamente para este tipo de trabajo. OmniGraffle es una pieza de software que simplifica la creación de wireframes al proporcionar herramientas de forma, línea, flecha y texto para usar en un lienzo en blanco. Incluso puedes descargar conjuntos de gráficos personalizados (gratis) en Graffletopia, que te brinda más elementos, como botones web comunes, para trabajar.
03 de 03Los beneficios
Con los wireframes del sitio web, tiene la ventaja de ajustar un simple dibujo de líneas para lograr el diseño deseado. En lugar de mover elementos complejos alrededor de una página, puede llevar muy poco tiempo arrastrar un par de cuadros a nuevas posiciones. También es mucho más productivo para usted o su cliente enfocarse primero en el diseño … no comenzará con comentarios como "¡No me gusta ese color allí!" En cambio, comenzará con un diseño y una estructura finalizados en en el cual basar su diseño.
