No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Wireframes

16/26
Recursos

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.

Es importante invertir tiempo en hacer wireframes ya que nos permitir谩 tomar decisiones y hacer cambios con facilidad.

Tambi茅n nos permite identificar los componentes que ser谩n visibles, como se agrupar谩n y cu谩l ser谩 la jerarqu铆a de la informaci贸n.

Hay diferentes alternativas para hacerlos, dependiendo del nivel de detalle que quieras darle:

  • Wireframes de baja fidelidad
  • Wireframes de mediana fidelidad
  • Wireframes de alta fidelidad

Es recomendable concentrarse en wireframes de fidelidad media para plasmar la informaci贸n y comunicar la distribuci贸n de la misma con claridad.

Aportes 42

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Un d铆a present茅 el Wireframe a un Cliente鈥 驴y qu茅 creen?.. el Cliente me dijo 鈥淭odo bien, pero el dise帽o no me gusta鈥
鈥 Pens贸 q el Wireframe era el Dise帽o Final 鈥
HAHAHAHAHAHAHAHA

wireframes de baja calidad

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.

En el minuto 9:35 hay un comentario muy importante a tomar en cuenta. Es algo as铆: 鈥淪i 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.

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 .

Cuando dise帽as el HOME de cualquier sitio 驴qu茅 informaci贸n principal aconsejan poner? Existe algun standar de que informaci贸n vendedora debes poner?

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?

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

Gracias

驴En donde S脥 deber铆amos usar el 鈥淟orem impsum鈥?
馃憠 En formatos en donde el texto no es importante, c贸mo lo ser铆a una web de periodismo, noticias etc.

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.

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.

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/

El wireframe de calidad media equivale al guerrilla testing con papel prototyping que se puede ver m谩s a detalle en el curso de fundamentos de dise帽o de interfaces.

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.!

Lorem Ipsum: 隆NO!

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

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.

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?