Fases de prototipado: Lo-Fi a Hi-Fi

-Wireframes Sketching:

• Primer boceto a mano

• Foco sin pensar en el diseño

• Hacerlo siempre: cuesta poco, es muy eficaz.
  _Ventajas: _

• Colaborativo. Útil en reuniones de trabajo

• Participan no diseñadores.

Wireframes Lo-Fi (Baja):

• Esquema principal de un diseño
• Estructura y jerarquía de textos e imágenes aun sin definir su contenido.

Ventajas:

• Rapidez de cambios ante primeras reiteradas iteraciones.
• Repositorio de decisiones previas de cada fase del proyecto.

Wireframes High-lo (Alta):

• Próximo al final sin la capa de diseño.
• Recoge funcionalidades básicas.
• Mínimas iteraciones.

Ventajas:

• Definición y fiabilidad. Elementos y estructura final.

• Teste table. Primeras pruebas con usuarios.
  **
  Mockup:**

• Propuesta final con interacciones reales.

• Estilos diseño con color, tipografía, sombras, comportamientos…

Mi idea es hacer una pokedex

"-Ser imaginativo y plasmar tus ideas en el agua.

-Una página Web o aplicación digital se compone de una serie de pantallas, que hay que tener muy bien estructuradas.

-Es conveniente tener claro el flujo de navegación y que cada pantalla tenga un orden, jerarquía, y por supuesto sea visualmente atractiva.

-Wireframes: Pasos necesarios, que agilizarán tu proyecto sin invertir mucho tiempo, en aquellos probables cambios que surjan.

1. Sketching: Es el origen de tu proyecto… es tu idea original y además es la más directa.

2.Baja: plasmando la estructura y la jerarquía de la composición … recuerda cada vez que tengas que dar una explicación de porqué un cambio, acude a tu wireframe en Baja.

3.Alta: Prototipo ideal y perfecto para comenzar a testear con los usuarios, ver sus impresiones y recoger feedback

4.Mockup:Queda definido perfectamente el comportamiento de la aplicación, porque también se habrán incluido las interacciones."

En mi caso un prototipo dentro de un sitio web de una concesionaria para una linea de autos, De izquierda a derecha > 1° info genérica familia de coches > 2° Modelos disponibles > 3° Selección de modelo > 4° configurador de características del vehículo, como ejemplo, el motor.
En la fase de prototipado, me parecio mejor dejar recuadros solamente con outline para donde irían las fotos porque se confunden con otros elementos, me gustaría saber qué otros recursos de diferenciación se pueden utilizar en esta etapa, ejemplo color. Gracias!

Este es mi aporte, hay que tener en cuenta que estamos trabajando en una app, los elementos normalmente son mucho más pequeños que los que aparecen en una web de escritorio.

Hola a todos! Estoy trabajando en un sitio web para adopción de mascotas!

Versión mobile

Versión Desktop

Este es mi pequeño aporte. 😃 Espero que les guste!

Aqui dejo mi lo-fi

Buenas, mi proyecto es una tienda de café online

es la mejor herramienta para definir espacios y jerarquías de la información.

Hola a todos 😄
Mi proyecto es para mi página web de papelería y encuadernaciones.

Hola, mi proyecto es realizar una tienda de artistas, envió el wireframe realizado

👏 Cosas que la música me enseñó

• Lo-Fi = Baja fidelidad (Baja calidad) ✔
• Hi-Fi = Alta fidelidad (Alta Calidad) 🔥

Los _Wireframes Mockup _ están un escalón arriba respecto a los Wireframes de Alta Fidelidad (High-fi), puesto que son la propuesta definitiva con las interacciones reales. Está bien detallada, puesto que contiene estilos, diseño con color, tipografía, sombras y comportamientos. Ello permite mostrar al equipo exactamente qué es lo que se va a construir y cómo debe verse y funcionar el producto, por lo que es la imitación del producto más cercana a la realidad.

¡Brutal!