Wireframe: ¿Qué es y cuáles son sus intereses?
Este artículo se centra en el wireframe. ¿Quizás no estés familiarizado con esta palabra inglesa conocida por diseñadores y desarrolladores? No te preocupes, te explicamos todo sobre este concepto tan práctico y popular.
¿Qué es un wireframe?
Un wireframe es muy útil en todos los proyectos web. Es simplemente un esquema de la estructura y funcionalidad de la aplicación móvil que se está creando o del sitio web que se está construyendo.
Este esquema que muestra la disposición de las partes que componen una página web, por ejemplo, permite visualizar las zonas de texto, la ubicación de las imágenes, los vídeos y los enlaces, así como los distintos elementos gráficos.
Pueden estar en papel o en formato digital y se utilizan antes de crear cualquier modelo gráfico. Se necesita un plan para construir una casa. Aquí es lo mismo: es necesario un plan antes de crear una aplicación o web para evitar cualquier defecto de construcción.
Wireframe VS Mock up
La principal diferencia entre un wireframe y un mock up es que este último es mucho más estética que el wireframe. Es una maqueta con gráficos simplificados y el mock up toma la estructura esbozada en el wireframe, pero muestra el aspecto que debe tener el producto final.
Wireframe VS Prototipo
¿Sabes la diferencia entre este concepto y un prototipo? Ahora te lo explicamos. Un prototipo es un modelo de diseño de fidelidad media a alta de la interfaz de usuario final de tu sitio web o producto móvil. Es una representación interactiva más detallada del producto final, que incluye atributos visuales e interacciones.
La idea general de un prototipo de alta fidelidad es representar un producto lo más parecido posible al producto final.
¿Cuáles son los intereses de este esquema?
Es muy práctico para facilitar la comunicación entre todas las partes implicadas en un proyecto de web o app. Es un lenguaje sin ambigüedades, claro y preciso, para que todos puedan participar en el proyecto. Esto facilita el trabajo en equipo.
Esta herramienta también te permitirá ahorrar tiempo al detectar errores o problemas desde el principio, incluso antes de empezar. Es barato y rápido de hacer.
Das vida a tus ideas mostrando la futura interfaz de la herramienta, a escala real. Es un medio ideal para formalizar las expectativas, necesidades y objetivos del proyecto. Pero también para obtener la opinión del cliente y las posibles modificaciones necesarias antes de empezar.
Por último, ayudan a las distintas partes implicadas a calcular mejor el tiempo de ejecución del proyecto y, por tanto, a calcular mejor el coste.
Tipos de wireframes
Wireframe de baja fidelidad
Son representaciones visuales básicas de la página web y suelen servir como punto de partida del diseño. Como tales, suelen ser bastante toscos, creados sin ningún sentido de la escala, la cuadrícula o la precisión de los píxeles.
Wireframe de media fidelidad
Son los más utilizados de los tres, los de fidelidad media, presentan representaciones más precisas del diseño. Aunque siguen evitando distracciones como las imágenes o la tipografía, se asignan más detalles a componentes específicos y las características se diferencian claramente unas de otras.
Wireframe de alta fidelidad
Por último, los de alta fidelidad cuentan con diseños específicos para cada píxel. Mientras que un esquema de baja fidelidad puede incluir rellenos de texto en pseudo-latino y cuadros grises rellenados con una “X” para indicar una imagen, los wireframes de alta fidelidad pueden incluir imágenes reales y contenido escrito relevante.
Si trabajas en el mundo del diseño UX / UI o perteneces al área de desarrollo, sabrás lo que son los wireframes… pero este artículo puede ser utilizado como ejemplo y argumento cuando empieces un proyecto con un cliente para explicar el papel de un wireframe.
Si eres un novato, esperamos que nuestro artículo haya sido lo suficientemente claro. Contáctanos para más detalles.