¿Qué es un Wireframe de sitio web y cómo puede ayudarlo a desarrollar su sitio web?

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

Si es su sitio web, probablemente sepa lo que quiere que haga o lo que quiere que los usuarios obtengan de él. Quizás 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 que tenga 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 verse en general. Y los wireframes del sitio web son la forma de solidificar esa idea y comunicarla.

El dorso de una servilleta

La estructura metálica de un sitio web es solo un bosquejo de cómo quiere que se vea su sitio. No se supone que sea bonito, y ni siquiera necesita software para crearlo. Simplemente puede agarrar un trozo 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 ... oh, y aquí puedo poner un cuadro de búsqueda.” Solo en esos términos generales y simples, junte una parte de su sitio web, hasta que el resultado final se vea más o menos así:

Como puede ver, esto no es código de computadora ni nada demasiado técnico o complejo. Cualquiera podría mirar este bosquejo rápido y descubrir instantáneamente 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 hacer las cosas importantes correctamente, como el diseño del sitio, la estructura de navegación y la ubicación del anuncio, antes de tocar una sola línea de código. Y si está trabajando con otras personas, como un codificador o un diseñador, le permitirán llegar a un acuerdo sobre cómo será el resultado final. Esto puede ahorrar un montón de confusión y doble trabajo, especialmente cuando se trata de proyectos más grandes..

Es importante tener en cuenta la falta de detalles en la estructura de alambre anterior: las imágenes al lado de cada artículo no son “real” imágenes, pero marcadores de posición obvios. Incluso el texto del artículo no se completa, es solo un montón de líneas. No puede ver cuál será el esquema de color: todo es solo blanco y negro. Esto es lo que es una estructura alámbrica supuesto a parecer No se supone que sea una representación completa del sitio web final, sino solo su espíritu o esencia, si lo desea. Es solo lo más importante.

Herramientas para alambrado

Como mencioné anteriormente, la mejor herramienta para enmarcar 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 enfocarse en lo que desea que se vea su sitio web, sin interrupciones molestas o desorden sobre aprender una nueva herramienta de estructura de alambre. Un cuaderno de matemáticas (como se muestra arriba) generalmente funciona mejor porque trazas a lo largo de las líneas, creas rectángulos limpios y alineas fácilmente las diferentes piezas de tu sitio. Tome uno, un bolígrafo o dos, y vaya a tomar una taza de café en algún lugar lejos de su computadora. Volverás con una idea clara de lo que estás tratando de crear exactamente.

Dicho esto, a veces es necesario un software de enmarcado. Por ejemplo, tal vez estás trabajando como parte de un equipo que se extiende por todo el país o el mundo, o tal vez estás escribiendo una publicación de blog sobre la estructura de alambre. En estos casos, el escaneo manual de estructuras metálicas 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 de estructura de alambre basada en Flash gratuita con una rica biblioteca de objetos. Esta es la herramienta que utilicé para crear la estructura metálica que ves arriba: es rápida e indolora.
• QuirkTools Wires: una herramienta más simple, sin opciones de alineación. Sin embargo, no está basado en Flash.
• Sinsonte: una herramienta comercial, pero tiene un plan gratuito limitado.

No solo para sitios web

Probablemente te hayas dado cuenta de esto, pero esta es una buena nota para terminar: Wireframes es 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 informática completa. En estos casos, los wireframes del sitio web son invaluables para mostrar cómo se ve todo, e incluso pueden ayudarlo a lograr que las personas apoyen su proyecto de diferentes maneras.

¿Alguna vez has creado una estructura metálica tú mismo? ¿Vas a comenzar ahora que has leído esto? Házmelo saber en los comentarios!

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