¿Qué son los wireframes de una web y cómo crearlos desde cero?

La creación y desarrollo de una web no es un proceso que pueda realizarse sin ningún tipo de planificación previa, todo lo contrario. Así está recogido en prácticamente cualquier estudio superior y especializado en diseño y desarrollo web. Cuanto más se trabaje en planificar su desarrollo antes de escribir ni una sola línea de código, más posibilidades hay de que la página cumpla las expectativas creadas. También evitarás cambios tras su creación porque no te satisface el resultado. Y podrás evitar fallos muy tontos que pueden llevar a que una página sea un desastre. Tanto en concepto como en ejecución. Para evitarlo es mejor trabajar previamente en los wireframes web.

Los wireframes de una web son parte esencial de cualquier proyecto de diseño web: son los bocetos o esquemas de cómo deseas o cómo necesitan que sean sus distintas páginas. Pueden tener más o menos nivel de detalle, en función de su complejidad o del nivel de profesionalidad con el que se va a tratar el desarrollo. Y no tienen por qué ser algo únicamente del desarrollador. Con los wireframes web, en caso de que tengas que desarrollar una web para un cliente, también puedes implicarle desde el minuto uno en su desarrollo. Así podrás anotar sus necesidades en los esquemas mientras trabajas con él. Además, no tirarás tu trabajo de horas a la basura cuando le presentes un diseño de una página para descubrir que no le gusta.

Wireframes de una web: la base de su desarrollo

Cuando desarrollas los wireframes de una web, lo que estás haciendo es concretar el contenido que tendrá el sitio web, y cada una de las páginas que lo compondrán. Además, también estás situando sobre un papel, que es el medio básico sobre el que suele realizarse, el punto en el que quieres que aparezcan sus elementos. Es decir, sus imágenes, los cuadros de texto, la zona de enlaces, el menú, etc.

Se trata de unos esquemas muy sencillos, generalmente a bolígrafo o lápiz; sin que en ellos haya colores ni imágenes. Tampoco se suele emplear un tipo de letra específico. Todo esto que contendrá la web se prepara y elige en otro momento. Estos elementos se pueden cambiar sin mayores problemas y de manera rápida y sencilla, por lo que no tienen cabida en los wireframes de una web. Lo que sí hay que colocar, por ejemplo, es la manera en que se pasa de un elemento de una página a otra, qué enlace es el que activa la apertura de otra página, etc. Es decir, hay que plasmar la interacción entre los diferentes elementos que tendrá la web.

Su sencillez te permite hacer cambios en la disposición de los elementos de una página, o hacer cambios de estructura o disposición de sus componentes antes de empezar a escribir código. Por eso, aunque al principio creas que con el diseño de wireframes de una web pierdes el tiempo, a la larga lo ahorras.

Cómo crear un wireframe desde cero

Para poder crear un wireframe desde cero puedes utilizar varios soportes. El más sencillo, como hemos visto, es utilizar un papel y lápiz, o bolígrafo. Y el papel adecuado para ello. Se trata de pintar sobre el papel cómo sería la web, y cómo estaría dispuesta cada una de sus páginas. Por eso es recomendable que primero esboces en hojas A4 y, cuando lo tengas todo pensado y quieras pasarlo a limpio, hazlo en otras más grandes.

Sobre todo, si tienes que presentarlo a los clientes; a ser posible, en hojas tamaño A3. De esta manera podrán verlo todo con más claridad. Si quieres destacar alguno de los elementos de alguna página, también puedes utilizar hojas A4 para dibujarlo de manera independiente y que se aprecie mejor.

Dibujar y diseñar los wireframes también requiere cierto orden, a pesar de que sean provisionales. Por eso, si quieres que las líneas se vean rectas y bien organizadas, puedes utilizar papel cuadriculado o milimetrado. O para tener una guía, pero mayor claridad sobre el papel, papel punteado.

Si no te gusta utilizar papel y boli para el desarrollo de wireframes web, también tienes varias opciones para evitarlo en su mayor parte o por completo. La primera es utilizar una plantilla, que puedes descargar e imprimir sin demasiados problemas. En Internet hay muchas plantillas para wireframes que, si descargas e imprimes, te proporcionarán los elementos básicos para su creación. Así no tendrás que utilizar tanto el lápiz.

Otro sistema que puedes utilizar para crear wireframes para una web desde cero y olvidarte por completo del papel es un software específico. Hay varios programas, como la minimalista Wireframe.cc (de pago), que te ofrece una especie de papel pautado virtual para el diseño de wireframes. Pero también hay opciones gratuitas, como la opción básica que te ofrece InVision.

Qué incluir en los wireframes de una web

Ya con el papel o el software para la creación de wireframes, antes de empezar, debes tener en cuenta una serie de elementos básicos. También tienes que tener en tu poder la información básica sobre cómo será la web, que el cliente te habrá facilitado en un primer acercamiento. Necesitas conocerla para saber también dónde puede ir cada cosa. Pero hay otros puntos que precisas definir.

Lo primero es qué tipo de web será: si será una tienda online, un medio de comunicación, un blog, la página de un profesional del diseño, etc. En función de su uso final o su target, será más adecuado un tipo de distribución u otra. Además de esto, debes tener en cuenta cómo quieres que sus visitantes interactúen con la página.

Para ello tienes que plasmar dónde irá cada elemento de la página. Con especial cuidado con el menú de navegación y sus distintos elementos. Como punto básico, debes tener en cuenta que cada una de las opciones del menú tendrá que contar con su página correspondiente. O, en su defecto, con acceso directo al punto en cuestión de otra en la que comience la información relacionada.

Ten en cuenta también que cualquier página que diseñes debe ser multidispositivo. Por lo tanto, los wireframes tendrán que estar preparados para la visualización de las páginas al menos en dos formatos: escritorio y móvil. También, en la medida de lo posible, para tablet. Por lo tanto, tendrás que tener entre dos y tres juegos de wireframes para cada web.

Una vez tengas todo listo y los wireframes preparados, ya puedes enseñárselos a tu cliente para ver si quiere hacer cambios. Una vez aprobado todo podrás empezar con su desarrollo, sabiendo que los cambios que se produzcan una vez lista la web seguro que son menores. Como puedes ver, utilizar wireframes web en el desarrollo de páginas es muy útil para tener todo bien atado antes de empezar a teclear. Incorporarlos a las rutinas de desarrollo es muy sencillo, ya lo verás.