Ejemplos de Wireframes

Por lo consejos compartidos llego a la siguiente conclusión:

• Wireframes de baja calidad son para uno mismo.
• Wireframes de media calidad son para compartir con mi equipo.
• Wireframes de alta calidad son para probar con usuarios finales y poder hacer iteraciones.

Les recomiendo mucho que prueben Figma
Este es un Wireframe que hice recientemente para una app muy sencilla del Curso de Diseño de Interfaces de Platzi. Pueden ver este proyecto completo en Behance.

En mi experiencia con el tiempo aprendí que los wireframes de baja calidad son para uno mismo, para validar cosas, pero con el usuario es otra cosa, finalmente ellos compran por los ojos.

EL BUEN WIREFRAME:

• Es de media fidelidad
• Simula contenido real o muy carcano a la realidad
• Las imágenes, textos, menu y botones se deben diferenciar entre si
• No distraen al usuario con fotos y colores. Proponen la estructura, jerarquia y ubicación del contenido con labels y botones apropiados

Con este ejemplo me di cuenta que yo siempre uso primero la barra para buscar. No me fijo en arquitectura ni nada, directamente buscó lo que quiero. Es decir, soy el usuario que no se interesa en navegar solo en tener lo que busca. Por eso me di cuenta que al wireframe le faltó la barrita para buscar.

Les recomiendo muchisimo Figma, es una herramienta libre para todos los s.o. con muchas funcionalidades y es muy facíl de usar, aqui en platzi hay un curso para aprender a usar la herramienta. Además puedes solicitar una beca de estudiante para tener todas las funcionalidades de una versión pago, yo la solicite como estudiante de platzi y me la aprobaron en cuestión de minutos.

Me encanta como se ve todo en dibujo siento que ayuda muchísimo hacer estos ejercicios 😃

Pienso yo que para empezar como tal se puede hacer un wireframe de baja en lápiz y papel, y de ahí en adelante pues irlo implementando digitalmente en cualquier de las herramientas, Xd,sketch, figma, etc… es mi opinión.

Buen ejemplo de agrupamiento

Wireframe baja fidelidad: es un plano de pantalla, es una guía visual que representa la estructura visual de un sitio web.

Elementos de un wireframe:
Diseño de información
Diseño de navegación
Diseño de interfaz

Tengo una observación: los wireframes están enfocados a un dispositivo que en este caso es la web tomando el ejemplo de Netflix cuando creo que justamente por ser Netflix el dispositivo debería ser la TV o tablet los cuales tienen mucho menos espacio para mostrar navegación y contenido destacado. Seria buen reto hacer wireframe para tv y tablets.

En el minuto 7:32 también se podría utilizar la herramienta de Illustrator Ai de adobe ya que estamos maquetando des de lo digital. es facil e intuitivo de usar.

EL Wireframe de baja fidelidad es como una guía boceto, para después acercarme al contenido real en la de mediana fidelidad.

Wireframes de baja fidelidad:
Se enfoca en los espacios y la navegación global, local y contextual. Es el esqueleto.

Wireframes de mediana fidelidad:
Se muestra el nombre que le voy a dar cada categoría, las etiquetas, rutas de navegación. Es algo que es mucho más fácil de entender. Simular el contenido real.

Yo les recomiendo utilizar Mockflow

Bueno ejemplo de wireframe - prueba de usabilidad

Explicación y comparativa entre: Wireframes de baja y mediana calidad.

17. Ejemplos de Wireframes

• Baja fidelidad
  • Esqueleto muy general sin texto e imagen
  • Lorem Ipsum, textos descriptivos y bloques
  • Ver estructura pero no se puede hacer pruebas
• Media fidelidad
  • Esqueleto con textos
  • Mini prueba de usabilidad con tareas específicas en papel
  • B/N
  • Indicar que los cuadros son imágenes y que es un wireframe a media
• Alta fidelidad
  • Esqueleto con textos y visuales básicas (iconos y cimientos de diseño)
• Lo que importa en AI es la capacidad de estructurar, organizar y jerarquizar información
• Que las categorias no compitan entre sí
• AI
  • Organizar > estructurar > jerarquizar

PROG

Qué clase tan espectacular y necesaria!! Mil gracias ❤️

Gracias

Mockflow es muy buena

<code>

Wireframe de baja fidelidad vs wireframe de fidelidad media

Sabios consejos.

Si el cliente no envia la informacion o no tengo la información final, para mi, me serviria mas el de baja fidelidad.

Una vez tenga al menos algo de la información, ya optaría por el Wireframe de fidelidad media.

Y el Wireframe de alta fidelidad ya seria para temas de colores, multimedia y demás y de aquí ya de interacción para diseño final.

Consejo

Otra herramienta:
Justinmind Prototyping

Gracias

muchas gracias y agradezco el enfoque al contenido y por el momento no a las herramientas

proto.io es lo mejor para wireframes por que ya tiene objetos pre diseñados

Excelente clase y ejemplo sobre el por que es mejor que se realicen wireframes de mediana fidelidad

Menu nuevo ejemplo netflix: Con un poco de copywrite jeje sientes la pagina te habla.

-¿Que tenemos para ti?
->Peliculas
->Series
-Estrenos
-Galardonadas

Yo recomiendo este sitio donde podrán encontrar el diseño móvil, tablet y desktop para dibujar wireframes
https://www.sketchize.com/

Considero que quite la categoria “Exclusivos de netflix” de la navegacion global ya se repite dos veces una en ese menú y la otra en "peliculas"
Eso puede hacer que el usuario piense mas de lo usual y de lo necesario

Esta es la parte que mas me gusta , utilizar mi creatividad para bocetar

Figma