WIREFRAMES

PARA UX/UI
Primero...

¿Qué es un wireframe?
Un Wireframe se trata de una estructura

que sirve como modelo para visualizar el

diseño, la organización y comportamiento

de los elementos que forman la interfaz.

¿Por qué nos sirve la
etapa de wireframing?
Nos permiten saber cuáles son los
contenidos que se van a mostrar.

Podemos visualizar la estructura de

cómo va a encajar cada pieza de la
aplicación o página.

Aplicamos jerarquías visuales y de

información para una mejor organización
del contenido en conjunto.
¿Por qué nos sirve la
etapa de wireframing?
Podemos chequear la funcionalidad de la
aplicación o el sitio.

¿Cómo van a interacturar los usuarios con

la interfaz? ¿Cómo se comporta?

Fuente: Introduction to Wireframing and its Principles. Isha. Medium

Tipos de Wireframes
Low fidelity o Lo-Fi (wireframes en baja)
Podríamos decir que se trata del crudo de
nuestra interfaz, son bocetos que no tienen
medidas detallas, píxeles y se centran
principalmente en la funcionalidad.

Fuente Img: Wireframing in UI/UX Design. Designerrs Academy. Medium

Tipos de Wireframes
Mid fidelity o Mi-Fi (wireframes en media)
Acá ya se aplican medidas exactas y escalas
para ser un poco más precisos y poder
realizar pruebas con los usuarios finales.

Fuente Img: Wireframing in UI/UX Design. Designerrs Academy. Medium

Tipos de Wireframes
High fidelity o Hi-Fi (wireframes en alta)
En los anteriores, no se utilizan imágenes ni
texto real. En estos ya se puede visualizar el
contenido preciso que va a tener la interfaz.

Fuente Img: Wireframing in UI/UX Design. Designerrs Academy. Medium

Entonces...

Utilizar wireframes nos permite verificar

funcionalidad, nos ahorra tiempo y

también nos permite realizar pruebas con

usuarios para detectar fallas e iterar.

Si te gusta nuestro
contenido no te olvides
de compartir y guardar :D