Wireframe

Jorge Fco.™
2 min readJun 21, 2022

Esqueleto para un proyecto web.

Source by @tima-miroshnichenko

Un wireframe es un esquema visual que se utiliza para representar la estructura de un proyecto.

Es una guía visual que se realiza antes de iniciar con el diseño para una aplicación página web o tienda en línea. Con la ayuda del wireframe se pueden definir los elementos visuales que contendrá el proyecto.

🤔 ¿Cuál es el propósito de un wireframe?

El propósito es realizar un boceto o plano que ayude a definir la idea, generar soluciones y documentar los requerimientos de usabilidad antes de construir el sitio web.

No deberá contener bastantes detalles y tiene que ser muy simple para concentrarnos en el objetivo de la idea principal y agilizar el proceso para el diseño 🎨. Establecer la jerarquía de contenido y las acciones principales para el usuario.

Source by @jorge.fco.dev

👀 Tipos de wireframe

Por lo regular los wireframes vienen después de realizar un boceto a mano de una idea y/o propuesta para la problemática y exploración de la solución para el proyecto. Una vez plasmada la idea en papel se puede trasladar a un esquema visual.

Se puede representar en distintos tipos de wireframe:

• Baja fidelidad (Low-fidelity): La baja fidelidad es el tipo más básico de wireframing.

• Alta fidelidad (High-fidelity): El wireframing de alta fidelidad es la misma estructura de baja fidelidad pero con elementos detallados.

Un wireframe te ayuda a definir el flujo del usuario dentro del sitio web y el cómo queremos trasladar al cliente al interactuar con la interfaz.

Thanks ✌🏻!

👨🏻‍💻 https://jorge-fco.com/

--

--