Wireframes

Un día presenté el Wireframe a un Cliente… ¿y qué creen?.. el Cliente me dijo “Todo bien, pero el diseño no me gusta”
— Pensó q el Wireframe era el Diseño Final —
HAHAHAHAHAHAHAHA

wireframes de baja calidad

En el minuto 9:35 hay un comentario muy importante a tomar en cuenta. Es algo así: “Si no simulas con el contenido real no podrás calcular con las dimensiones correctas el espacio a diseñar”.

Esto es importante porque no es lo mismo diseñar un espacio para que haya 10 conceptos, a uno donde existan 2. Parece algo muy simple, pero puede ser que si no se toma en cuenta se tengan que hacer correcciones que quitan tiempo de trabajo.

Yo hice el rediseño del home del sitio GAM (Centro Cultural Gabriela Mistral) a mi me parece que es un sitio bonito con buenos diseños pero la información no es tan clara para el usuario, por ejemplos el hazte socio y la cartelera de las actividades no estaban a simple vista, casi toda la información relevante se encontraba en el footer.

Baja fidelidad: Sirven para validar estructura y jearaquia del contenido.
Hay que evitar el uso de colores o componentes muy detallados: usar abstractos: cajas e iconos representativos (Play, Img, graph, etc)

• Son geniales para descartar porpuestas con base en el feedback del usuario: donde entiende mejor que este tal o cual cosa.
• De preferencia debemos mostrar las etiquetas, la navegacion, y la busqueda. Para definir la INTERACCION, como el sieguiente paso, tras validar esta Arquitectura.

Es un ejemplo muy basico pero es algo que note 😃

Los wireframes de baja fidelidad , son importantes para una definicion mucho mas rapida , ya que podemos hacerlo en una hoja de papel e ir definiendo de manera colaborativa con el equipo e ir definiendo los componentes .

Me gusta muchisimo este curso, y me a ampliado mi paradigmas, lo volvere a reviasr de nuevo 😃

Wireframes de baja fidelidad:
Enfoca la atención en el plano global, local y contextual, definiendo los espacios de navegación en una pantalla.

Wireframes de mediana fidelidad:
Se muestran algunos aspectos del contenido que hará parte del producto estableciendo rótulos y rutas de navegación.

Wireframes de alta fidelidad:
Es lo más aproximado al producto final, no sólo con distribución de contenido sino con contenidos reales, ubicaciones e interacciones posibles.

Recordar: Lo más importante es primero definir la jerarquía, estructura, etiquetado y la información que tendrá el contenido dentro de mi pantalla. Por eso, lo mejor es comenzar a hacer los wireframes en baja o media fidelidad.

Cuando diseñas el HOME de cualquier sitio ¿qué información principal aconsejan poner? Existe algun standar de que información vendedora debes poner?

a mí si me gusta empeñarme en hacer un wireframe de baja calidad, en lo personal, ser muy detallista en el principio, me hace la vida más facil a la hora de hacer los wireframes de media calidad y los mockups. Adjunto la ultima página que he hecho, la hicimos en quince días pero está en constante revisión

https://thinkigrow.com/

Lorem Ipsum: ¡NO!

hoy en dia los wireframes pueden tener un contenido casi real con los chat gpt

Wireframes

• Una vez tenga definido todo mi contendió, lo tenga organizado y sepa cómo se tiene que navegar entre estos es horra de crear un wirframe. Un wireframe es un plano preliminar de la interfaz que nos permite ver en papel los elementos que componen la interfaz y cómo están conectados.

• Este hace referencia al diseño del funcionamiento de todos los elementos previamente mencionados. Tomar en cuenta que diseñar wireframe se enfoca en la funcionalidad y cómo funciona lo que trabajé anteriormente en cuanto a la organización de mi contenido, este no está enfocada en el detalle visual.

• Es importante realizar wireframes porque este es el primer paso de crear tus planos o bluprints de ti interfaz. Mientras más rápido lo puedas tener, antes puedes probar y antes puedes corregir. En caso contrario demoraremos más en el detalle de diseño y si es necesario cambiarlo nos tomará más tiempo hacerlo, esto solo va a generar retrabajos.

Usar loren ipsum es menospreciar el fondo y dejar toda la importancia en la forma, lo cual es un error. En mi experiencia, usar textos reales, así sean provisionales o hechos a la carrera (pero que tengan que ver con el producto o empresa) es una gran oportunidad para ver cómo la estructura resulta funcional al mensaje y no al contrario.

Excelente explicación! exactamente el wireframe es cómo el plano de la casa y su relevancia es la estructura y funcionalidad, no tanto el diseño gráfico.

Hermoso! me encanto porque deja en claro cómo se diferencia cada wireframe. Duda que tenía ya varios cursos atrás.

El Wireframe es la estructura de la información dentro de una página = HTML

Una pregunta, siempre que se construya una AI, entiendo que se debe elaborar/rediseñar por lo menos los wireframes del wireflow más importantes para el usuario, es decir asumo aquellos que concentren el contenido mas relevante y/o jerárquico para este , como es el caso del homesite en una webpage,
sobre lo que escribí en antes, que tan cierto es?
siempre se elaboran wireframes?

Gracias

¿En donde SÍ deberíamos usar el “Lorem impsum”?
👉 En formatos en donde el texto no es importante, cómo lo sería una web de periodismo, noticias etc.

Chevere wireframe mediana fidelidad

Como hacer un wireframe en baja óptimo

Hacer wireframes es de gran importancia al desarrollar un producto o interfaz, por lo que bien vale la pena el tiempo invertido en ello porque a la larga nos va ahorrar más tiempo y dinero ya que siempre habrá modificaciones y adaptaciones de la interfaz de acuerdo a las necesidades y preferencias del usuario. Se recomienda utilizar wireframes de fidelidad media para plasmar la información y comunicar su distribución con claridad. Además que no se deben poner textos genéricos lorem ipsum, sino más bien colocar la información textual real para no confundir a terceros que participarán en el proceso de iteración.

Acá volvemos a las primeras clases del contexto, concepto etc y Lorem ipsum no cumple satisfactoriamente. Seria mejor trabajar de la mano desde la etapa de investigación con el UX writer para obtener mejores resultados.

¿Qué diferencia tiene los wireframes y mockups?, ¿Cuál va primero?

https://platzi.com/clases/diseno-interfaces-ux/

esta clase permite entender de mejor manera el desarrollo de wireframes

Sketchs, mockups, wireframes y prototipos

¿Cual sería un ejemplo de lorem ipsum? Es que no me quedó claro.

Gracias.

Buena parte del diseño de arquitectura de la información es darle peso visual a los elementos más importantes dentro de la interfaz.

Por experiencia propia los wireframes de media fidelidad son los que se usan en agencias de marketing, statups o agencias de desarrollo web.
No concuerdo con lo del no usar LOREM IPSUM, es ampliamente usado y entendible en el medio digital

Un wireframe es un plano preliminar de la interfaz que nos permite ver en papel los elementos que componen la interfaz y cómo están conectados.

Entendido, los Wireframe son los planos preliminares de la interfaz

Excelente clase.!

Excelente clase

En el minuto 6:54 dentro de la iteracion se podria utilizar la metodología scrum, esta me permite generar esta iteracion con el producto y en pequeños pasos y tareas con el usuario, esto me retro alimenta para generar los ajustes del producto.

Los wireframe nos permiten:
Crear estructuras de forma rápida y sencilla
Permite evaluar otras posibilidades de navegación no contempladas en el análisis.
Poder levantar los requerimiento de forma rápida.
Identificar problemas en etapas tempranas del proyecto en cuanto a la interacción y usabilidad que puedan presentarse más adelante.
Disminuir los costos y los tiempos de construcción
Permite una comunicación fluida entre el trabajo y el cliente

Wireflows
Wireframes

La poca experiencia que tengo en diceño UX me dice efectivamente lo que expresa la profe… Es super complejo cuanto intentas diseñar directo sin wireframe porque en efecto se convierte en un laberinto de opiniones del cliente entre rutas, funcionalidad y diseño que agotan y hacen que el proceso sea mucho más lento!

Cuál es la diferencia entre Wareframe y Sitemap?