Qué es un wireframe y cuáles son sus objetivos dentro del diseño gráfico

¿Alguna vez te has preguntado cómo hacen los diseñadores para crear una estructura web de la nada? 

¿Cómo hacen para que todo encaje a la perfección dentro de la pantalla del sitio web?... éstas y otras son las dudas que tienen muchos de nuestros estudiantes en Neetwork. 

Porque absolutamente todos están en el proceso de crear un sitio web propio a manera de negocio digital. 

(Que por cierto, si todavía no te unes a nuestra comunidad PREMIUM, al final de este texto te dejaré toda la información necesaria para que te sumes a ella). 

Y al ver a tantos con dudas similares, decidimos crear este texto informativo sobre los wireframes.

«Pero… ¿Qué es un wireframe?»

Yo también tuve en su momento tu misma duda y el mismo sentimiento de estar en el abismo informativo que representa internet.

Así que tranquilo.

U´r not the only one.

¿Qué es un wireframe?

Es normal que al comprar el dominio de tu web tengas en mente una especie de mapa mental en el que describes en sencillos pasos cómo quieres que sea esa web de tus sueños. 

Sin embargo; cuando quieres pasar esa idea abstracta al plano real, no siempre sale todo como quisieras, porque necesitas planificarte. 

Y es que la planificación y la esquematización es parte de todo proyecto, de todo proceso y de todo trabajo. 

Aún así trabajes para ti mismo o así te dediques a conseguir otros clientes que hacen vida en la red y que necesitan crear una página web desde cero. 

Es por este motivo que nacen los wireframes. 

Que no son más que una esquematización gráfica de lo que vas a hacer en la web, es decir, un mapa mental de lo que va a ir o no en ella. 

Puedes decirle boceto, prototipo, planos… es lo mismo, solo que se le ha acuñado el término de wireframe para diferenciarlo de otro tipo de bocetos y para hablar de diseño web de forma específica. 

Cabe destacar que con un wireframe vas a establecer desde los botones del navegador, pasando al menú, opciones, herramientas, páginas y demás. 

Todo, absolutamente todo debe estar incluido en ese boceto que harás sobre tu sitio. 

Este diagrama se representa siempre en escala de grises sin aplicar ningún principio del color o paleta de colores ya definida ya que su único objetivo es definir cómo van a estar establecidos los elementos de la web.

¿Que si lo puedes hacer en papel?

Por supuesto, lo puedes diagramar en una hoja de cuadrículas, en un formato de puntos cada cinco milímetros o en un plano en blanco. 

Existen diversas opciones para crear un wireframe sin tener que pasar por un complejo curso de toda la suite de Adobe, quien quiere lo hace. 

Éstas son las ventajas de crear un wireframe propio

• Es gratis: hacer un wireframe por cuenta propia no tiene costo alguno, es más, hasta lo puedes hacer con papel y lápiz. 

• Podrás saber cuáles son los posibles problemas en el diseño web antes de que exista: uno de los grandes problemas de lanzarte a diseñar un sitio web sin un wireframe establecido de forma previa, es crear errores. Puedes evitarlos si tienes un plan bajo la manga, y si puedes ver antes qué es lo que te gusta y qué no. 

• Mostrarás a tus potenciales clientes que tu proyecto es serio: cuando haces una propuesta de valor a un potencial cliente, debes incluir los detalles más esenciales para que éste sepa que es todo un proyecto en serio y profesional. Incluirlo dentro de tu propuesta de valor dará mayor credibilidad a tu marca: «Mira prospecto, nuestro sitio web tiene su wireframe propio, es un proyecto en serio»
• Tendrás un plan de respaldo en el que estará vetada la improvisación: como todo lo que hagas en la vida, tendrás un plan de respaldo en el que planificarás paso a paso la funcionalidad del diseño de tu web. Porque no es lo mismo tener un hosting y dominio propio si vas a improvisar todo lo que hagas con tu sitio. 

¿Cuál es el objetivo de crear un wireframe?

«Ok, ya sé en qué puede beneficiar un wireframe al diseño de mi web pero… ¿y cuáles son los propósitos de los wireframes?»

¿Con qué propósito existe? 

Esta duda está rondando tu cabeza, si ya sabes que lo puedes hacer solo con lápiz y papel, el para qué lo quieres en digital es tu interrogante. 

Y sí, tienes razón al pensar en eso, de hecho, es como una pregunta bastante lógica. 

Pues pasa que el diseño gráfico es una disciplina que tiene una intención de fondo, cada proyecto amerita que tenga un propósito detrás como soporte, que fundamente el porqué de las cosas. 

Es por esta razón que se crea un wireframe, los diseñadores necesitan reemplazar el plano abstracto que en este caso es la idea mental de lo que se quiere hacer y pasarlo al plano tangible o real, en el que todos puedan formar parte de una misma idea; tanto clientes como demás miembros de un equipo creativo.

Pero ese propósito no se queda así, existen otros propósitos alrededor del wireframe que seguro quieres leer: 

• Es un recurso idóneo para acordar un plan de acción entre clientes y demás miembros de un equipo: un diseñador no puede comenzar a crear un proyecto web para un cliente sin antes haber acordado cómo sería el branding del mismo y qué tipo de elementos va a incluir en su web. Es por esta razón que queda como anillo al dedo para acordar una especie de contrato entre diseñador y terceros. 
• Podrás saber cómo será la experiencia del usuario: el UX es clave para un buen diseño web, es más, es la base de todo diseño. ¿Si tu web no satisface a tus lectores, para qué quieres que sea bonita si no es funcional? Con un wireframe sabrás cómo sería el recorrido del usuario al pasar por tu web. 

Tipos de wareframes

«¿Y cómo sé yo cuál es el tipo de wireframe que mejor le quedaría a mi web?»

Excelente pregunta, identificando a priori qué es lo que vas a introducir en tu web, es decir, sabiendo cuál es la esquematización del wireframe ideal: 

• Básicos: este tipo de wireframes se hace con líneas, gráficos, íconos y demás elementos sencillos ya que es un boceto a luces de lo que se requiere en el sitio web. 

• Interactivos: este tipo de wireframes va a al siguiente nivel. Y es que en ellos puedes agregar interacción entre elementos y elementos. Tal cual lo harías con una revista hecha en Indesign. Gracias a este recurso puedes saber cómo quedaría tu web con los movimientos reales que se harán entre las páginas y los recursos que hacen vida dentro de ellas. Además, puedes añadir el color y la identidad de marca de tu empresa o negocio para tener una aproximación al resultado final. 
• Anotados: son el siguiente nivel o el paso dos luego de tener el wireframe básico. Los detalles son más pulcros y específicos, aquí puedes emplear las medidas reales y las distancias entre un elemento y otro. En ellos puedes definir a través de anotaciones cuáles son los propósitos del contenido y la distribución de los elementos.

Ejemplos de plantillas de wireframes

Que no podía faltar un ejemplo visual en el que se clasifiquen cuáles son los tipos de wireframes: 

Lo prometido es deuda. 

Hemos llegado al final de este texto y te prometí que te iba a decir cuáles eran los requisitos para sumarte a nuestra comunidad de estudiantes PREMIUM:  

¿Qué tienes que hacer para convertirte en alumno PREMIUM?

Comprar la herramienta que necesitarás para hacer todas tus tareas.

Nuestros hostings recomendados son la única herramienta, de calidad y de confianza que necesitarás para llevar a cabo el Máster y demás cursos de Neetwork.

Nuestras dos opciones son Hostgator desde 36 USD y Bluehost desde 59,60 USD

«Luego de comprar el hosting ¿qué debo hacer?»

Contáctanos vía chat y solicita la activación de tu plaza PREMIUM.

¿Qué tenemos preparado para nuestros miembros Premium?

• Tiempo infinito para llevar a cabo su formación.
• Podrán escoger y cursar dos cursos del campus (los de su preferencia).
• Tendrá un entrenamiento de persuasión en ventas que más nadie nunca ha facilitado a sus estudiantes.
• Acceso de por vida al campus.

Conseguirás tu certificación en Negocios Digitales y Analítica Web y querrás invitar a todos tus amigos a que formen parte de nuestra familia.

Y tú, ¿ya sabes cuál es el modelo de negocios que vas a elegir?

Cuéntanos en los comentarios sobre ese proyecto que tanta ilusión te hace que te estaremos esperando con las puertas abiertas desde nuestra comunidad.

Yo me despido de ti y te mando un fuerte abrazo, 

Saludos. 

Este texto ha sido escrito por @soyamandarebeca para Neetwork.