¿Qué es una estructura alámbrica de un sitio web y cómo puede ayudarle a desarrollar su sitio web?

A nivel técnico, un sitio web moderno no es solo una cosa. Es una mezcla compleja de tecnologías interactivas, como HTML (el marcado que se ve en la página), JavaScript (el idioma que se ejecuta en su navegador, que afecta las interacciones), CSS (el idioma para configurar el aspecto de la página) y más. Pero en un nivel más básico, un sitio web es una idea..

Si se trata de su sitio web, probablemente sepa qué quiere que haga o qué quiere que los usuarios obtengan de él. Tal vez se supone que es un lugar fácil para que encuentren información sobre tecnología; o tal vez debería explicar por qué eres la mejor banda o paseador de perros. En cualquier caso, mucho antes de tener que lidiar con HTML, CSS, JavaScript o cualquier otra tecnología de desarrollo web específica, debe tener una idea muy clara de lo que debe hacer su sitio y cómo debería ser en general. Y los wireframes de sitios web son la manera de solidificar esa idea y comunicarla..

La parte posterior de una servilleta

Una estructura alámbrica de un sitio web es solo un esbozo de cómo quiere que se vea su sitio. No se supone que sea bonito, y ni siquiera necesitas software para crearlo. Puede simplemente tomar un pedazo de papel, o incluso una servilleta, y comenzar a bloquear en su sitio web, elemento por elemento. “El título va aquí ... y luego tenemos un menú de navegación ... ah, y aquí puedo poner un cuadro de búsqueda.” Solo en esos términos generales y sencillos, junte una parte de su sitio web, hasta que el resultado final se vea algo así:

Como puede ver, esto no es un código de computadora ni nada demasiado técnico o complejo. Cualquiera puede ver este rápido boceto y al instante descubrir lo que está viendo. Y ese es el punto sobre los wireframes: son muy rápidos de hacer y fáciles de entender. Le permiten entender correctamente las cosas importantes, como el diseño del sitio, la estructura de navegación y la ubicación de los anuncios, antes de tocar una sola línea de código. Y si está trabajando con otras personas, como un programador o un diseñador, le permiten a todos llegar a un acuerdo sobre cómo se verá el resultado final. Esto puede ahorrar un montón de confusión y trabajo doble, especialmente cuando se trata de proyectos más grandes.

Es importante tener en cuenta la falta de detalles en la estructura de alambre de arriba: las imágenes al lado de cada artículo no son “real” Imágenes, pero obvios marcadores de posición. Incluso el texto del artículo no está completo, es solo un montón de líneas. No puedes ver cuál será la combinación de colores, todo es solo blanco y negro. Esto es lo que es un alambre supuesto para parecerse a No se supone que sea una representación completa del sitio web final, sino solo su espíritu o esencia, si así lo desea. Es solo lo mas importante.

Herramientas para wireframing

Como mencioné anteriormente, la mejor herramienta para armar con alambre es a menudo solo un pedazo de papel y un bolígrafo. Alejarse de su computadora realmente puede ayudarlo a aclarar su mente y concentrarse en lo que desea que su sitio web vea, sin interrupciones molestas ni problemas con el aprendizaje de una nueva herramienta de cableado. Un cuaderno de matemáticas (como se muestra arriba) generalmente funciona mejor porque traza líneas rectas, crea rectángulos nítidos y alinea fácilmente las diferentes partes de su sitio. Toma uno, un bolígrafo o dos, y toma una taza de café en algún lugar lejos de tu computadora. Regresarás con una idea clara de qué es exactamente lo que estás tratando de crear..

Dicho esto, a veces es necesario el software de wireframing. Por ejemplo, tal vez esté trabajando como parte de un equipo que se haya extendido por todo el país o el mundo, o tal vez esté escribiendo una publicación de blog sobre wireframes. En estos casos, escanear manualmente los wireframes no es una solución muy práctica. Aquí hay algunas herramientas de software gratuitas que pueden ayudar, si realmente no puede usar un lápiz y papel:

• Lumzy: una herramienta gratuita de alámbrico basada en Flash con una rica biblioteca de objetos. Esta es la herramienta que utilicé para crear la estructura alámbrica que ves arriba: es rápida e indolora..
• QuirkTools Wires: una herramienta más simple, sin opciones de alineación. Aunque no es basado en flash.
• Mockingbird: una herramienta comercial, pero tiene un plan gratuito limitado.

No sólo para sitios web

Probablemente se haya dado cuenta de esto, pero esta es una buena nota para terminar: Los wireframes son una herramienta fantástica para crear cualquier producto, no solo un sitio web. Tal vez tenga una idea aproximada para una aplicación de iPhone o Android, o incluso una aplicación de computadora de pleno derecho. En estos casos, los wireframes de los sitios web son invaluables para mostrar cómo se ve todo, y pueden incluso ayudarlo a lograr que las personas apoyen su proyecto de diferentes maneras..

¿Alguna vez has creado un wireframe? ¿Vas a empezar ahora que has leído esto? Házmelo saber en los comentarios!

Créditos de imagen: imagen de la servilleta arrugada a través de ShutterStock, imagen de cuaderno rojo a través de ShutterStock

Explorar más sobre: ​​Diseño web, Desarrollo web, Herramientas para webmasters.