Cómo hacer el Wireframe de una página web

La mayoría de los diseñadores esbozan sus diseños de una forma u otra, aunque sólo sea haciendo bocetos rápidos en un papel de borrador. El wireframe es una parte importante del proceso de diseño web, especialmente en los proyectos más complejos.

Los wireframes pueden ser útiles cuando te comunicas con los clientes, ya que les permiten visualizar tus ideas más fácilmente que cuando te limitas a describirlas verbalmente.

El marketing ya no es sólo publicidad directa y vallas publicitarias, es mucho más que eso. Debes ser capaz de impresionar a tus clientes mostrando atención y dedicación a sus esfuerzos de marketing, o simplemente se irán a otra agencia. Por eso es tan importante el wireframing.

Esta guía cubre todo lo que necesitas saber sobre los wireframes de sitios web, suscríbete a nuestra Newsletter para saber más sobre Wireframing:

Por qué debes hacer wireframes de tus diseños web

El wireframe es realmente el primer paso en el proceso de diseño. A menos que el sitio que estés diseñando sea increíblemente mínimo y sencillo, el wireframe ayuda a aclarar exactamente lo que debe haber en los distintos tipos de páginas de tu sitio web y garantiza al cliente que su esfuerzo de marketing online está valiendo la pena.

Un sencillo ejemplo de wireframeTomándote el tiempo necesario para crear al menos un wireframe básico, puedes asegurarte de que tus diseños tendrán en cuenta todos los distintos elementos de página que deben ir en el diseño, y de que están colocados de la mejor manera posible.

Los wireframes también son rentables porque te ahorran el tiempo que podrías perder revisando una maqueta de alta fidelidad. Los wireframes pueden revisarse o descartarse fácilmente. Los wireframes proporcionan a tus diseños de página un buen punto de partida y una base sólida.

Wireframe vs. Maqueta vs. Prototipo

A veces se utilizan indistintamente wireframes, maquetas y prototipos, pero son tres cosas distintas (aunque a veces se solapan). Cada uno tiene un propósito ligeramente distinto que aporta al proceso de diseño.

Los wireframes son ilustraciones básicas de la estructura y los componentes de una página web. Suelen ser el primer paso del proceso de diseño.

Las maquetas suelen centrarse en los elementos de diseño visual del sitio.

Suelen ser muy parecidos o idénticos al diseño final real del sitio e incluyen todos los gráficos, la tipografía y otros elementos de la página. Las maquetas suelen ser sólo archivos de imagen.

Los prototipos son diseños de página web semifuncionales de una maqueta que sirven para ofrecer una vista previa de mayor fidelidad del sitio real que se está construyendo. Los prototipos tendrán la interfaz de usuario y suelen construirse utilizando HTML/CSS e incluso JavaScript para mostrar cómo funciona la interfaz del front-end.

Esta fase precede a la programación de la lógica empresarial del sitio. Aunque puede que no tengan una funcionalidad completa, generalmente ofrecen a los clientes la posibilidad de hacer clic y simular la forma en que funcionará finalmente el sitio. Los prototipos también pueden o no incluir elementos de diseño finalizados.

Boceto del flujo de la interfaz de usuario

Los wireframes son lo primero. Lo que sigue, prototipos o maquetas, dependerá en gran medida del tipo de sitio que estés construyendo.

Si se trata de una aplicación web y no de un simple sitio web estático, es probable que se beneficie de la creación de prototipos.

Cómo crear un esquema

Crear un wireframe puede ser tan sencillo o complicado como quieras. En su forma más básica, tu wireframe puede no ser más que un boceto en papel cuadriculado. Otros “wireframes” se crean digitalmente y en realidad son más como prototipos, con objetos clicables y funcionalidad limitada.

Suele ser bastante sencillo para un sitio con pocas páginas, como el sitio web de un restaurante local, pero sitios más diversos, como el de una universidad, tendrán un esquema más complejo.

El tipo de wireframe que crees dependerá de lo que requiera cada proyecto, así como de cómo sea tu propio flujo de trabajo. Los proyectos más complicados tendrán probablemente esquemas más complejos, mientras que los sitios sencillos tendrán esquemas más simples.

Qué incluir en un wireframe

Tus esquemas deben incluir suficiente información para reflejar lo que debe aparecer en cada página de tu sitio web.

Piensa en los elementos generales de la mayoría de las páginas web: encabezados, pies de página, barras laterales y áreas de contenido. Luego piensa en los elementos adicionales que tendrá tu proyecto específico: widgets dinámicos, características básicas del sitio como barras de búsqueda y navegación, gráficos, etc. Una vez que tengas una idea de lo que incluirá tu sitio, empieza a crear tus wireframes basándote en esos elementos.

El grado de detalle dependerá, una vez más, del proyecto y de la finalidad del esquema. Si tu esquema sólo va a servir como documento guía para tu propia referencia, entonces no querrás involucrarte demasiado en el proceso de esquematización. En cambio, si va a ser utilizado por más de un diseñador o desarrollador, o presentado a tu cliente, entonces debe ser más formal.

Wireframes de baja o alta fidelidad

Tienes un par de opciones en cuanto al estilo de tus wireframes. Algunos diseñadores optan por wireframes de baja fidelidad (low-fi), que son básicamente líneas sobre un fondo liso con algunas etiquetas. Entre ellos se incluyen los wireframes dibujados a mano y los digitales, y suelen ser muy sencillos.

Los wireframes de alta fidelidad van un paso más allá, utilizando determinados elementos de diseño dentro del wireframe. Esto puede incluir el logotipo u otros gráficos básicos, así como el esquema de color y otros elementos de diseño visual.

Los wireframes de este tipo empiezan a acercarse al nivel de las maquetas, pero pueden ser muy valiosos para transmitir una idea de cómo será el sitio web, sobre todo a los clientes a los que les cueste visualizar cómo será un sitio web basándose en un wireframe de baja fidelidad.

Técnicas de esquematización

Hay docenas de formas distintas de crear wireframes, desde simples bocetos hechos con papel y lápiz hasta diagramas más complejos que parecen casi tan pulidos como los sitios web de producción.

También hay diferentes enfoques sobre el propósito y el razonamiento que hay detrás de la creación de wireframes, dependiendo de las necesidades de cada diseñador y proyecto. Aquí tienes algunos recursos sobre distintos procedimientos para crear wireframes de sitios web.

El proceso de creación de wireframes

Aunque varía en función de cada persona, hay un puñado de pasos fundamentales para crear un wireframe. Es probable que empieces con una lista de cosas que el sitio debe incluir o con un documento formal de especificaciones de diseño.

Algunos diseñadores se lanzan directamente desde ahí, tachando cosas de la lista a medida que las añaden al esquema, ya sea en una aplicación o dibujando en papel. A otros les gusta empezar con una visión “general” del diseño global, añadiendo detalles una vez que tienen los fundamentos básicos del diseño definidos. Tanto si decides esbozar las cosas en papel o trabajar inicialmente con software, no descartes ninguno de los dos métodos.

Algunos diseñadores hacen bocetos en papel y luego pasan al software para crear esquemas más pulidos. Otros van directamente al software. Otros, en cambio, se limitan a dibujar a mano esquemas en papel.

Recuerda que si te atascas, cambiar de formato puede hacer maravillas por tu creatividad. Probablemente querrás probar unas cuantas ideas diferentes en tus wireframes antes de decidirte por un diseño. El wireframe es la mejor etapa para hacerlo, ya que inviertes la menor cantidad de tiempo y energía y puedes hacer cambios y probar cosas nuevas más fácilmente.

Una vez creado un wireframe básico, puedes enviarlo a otros miembros del equipo para que te den su opinión o guardarlo uno o dos días para revisarlo de nuevo. Cuando estés satisfecho con él, es hora de compartirlo con el cliente para que te dé su opinión o de empezar a trabajar en maquetas basadas en el esquema.

Utilizar wireframes para pensar en un diseño

Esbozar wireframes puede ser una forma estupenda de pensar en el diseño de tu sitio web sin pasar horas trabajando en maquetas en Photoshop o codificando diseños preliminares.

Los wireframes pueden permitirte trabajar en una serie de ideas de diseño y maquetación rápidamente y con poco coste, salvo tu tiempo.

Echa un vistazo a los documentos de especificaciones de diseño que tienes y que te dicen exactamente qué elementos necesitas en el sitio. A continuación, lánzate y empieza a organizarlos en el esquema.

No tengas miedo de probar cosas no tradicionales en esta fase. Recuerda que es sólo un esquema. Un error o un intento fallido en este punto no te hará retroceder drásticamente.

Arruga el papel, tíralo a la papelera de reciclaje y vuelve a empezar. Libera tus inhibiciones creativas en esta fase.

Los wireframes como entrega del proyecto

Presentar wireframes a tus clientes puede ser una forma valiosa de asegurarte de que todo el mundo está de acuerdo antes de crear las maquetas del diseño real. Es mucho más fácil cambiar la posición de los elementos en la página cuando trabajas con wireframes que con diseños de Photoshop o páginas codificadas.

Los wireframes como producto final también demuestran la habilidad que pones en tu trabajo. Sin embargo, asegúrate de facturar adecuadamente el tiempo adicional que los wireframes añaden a tu proceso de diseño.

Por supuesto, si vas a utilizar tus wireframes como entregables, deberás asegurarte de que están concebidos profesionalmente y no simplemente garabateados en un papel normal o en el reverso de una factura, a menos que tu cliente espere que sea así.

Todas las herramientas que hemos mencionado pueden servir para crear wireframes de aspecto más profesional para mostrar a tus clientes.

Pulido frente al boceto

Una de las consideraciones más importantes a la hora de crear wireframes entregables es su aspecto pulido. En general, hay dos escuelas de pensamiento al respecto. Un punto de vista del debate “pulido frente a esquemático” afirma que todo lo que se presente a un cliente debe estar lo más pulido y formalizado posible.

El otro punto de vista argumenta que ofrecer al cliente un esquema pulido hace que sea menos probable que solicite cambios porque las cosas parecen más “finalizadas”. En otras palabras, los wireframes de estilo boceto parecen menos formales y es más probable que reciban comentarios sinceros. Ambos enfoques tienen sus pros y sus contras.

Los wireframes pulidos suelen ayudar al cliente a visualizar mejor el aspecto que tendrá finalmente el diseño del sitio. Añadir elementos como el color o gráficos mínimos puede contribuir aún más a este fin. Sin embargo, corres el riesgo de que tu cliente no te dé su opinión sincera porque piense que el proyecto ya está demasiado acabado.

Por otro lado, los wireframes esquemáticos parecen más bien “ideas en bruto” y se prestan más a las opiniones de los clientes. La desventaja es que a los clientes que no son especialmente visuales o creativos, o que no están familiarizados con lo que son los esquemas de un sitio web, les puede resultar difícil imaginar el aspecto que va a tener su sitio o pueden sentirse confusos sobre por qué su sitio parece dibujado a mano.

También puedes utilizar wireframes esquemáticos combinados con un mood board que dé una idea de cómo quedarán la combinación de colores, las texturas, la tipografía y otros elementos visuales.