Wireframes: comienza en papel

Por favor, revisen la pagina en los archivos sketchize.com. Me encanto lo bonita y creativa manera en la que esta diseñada…

Hola a todos y todas:
Aquí les dejo mis wireframes.
Mi propuesta para el proyecto de la web de búsqueda de vivienda se llama “Like At Home”

• La pagina principal o HOME:
  

  

• Pagina del listado de viviendas buscadas:
  

  

• Pagina con el detalle de la vivienda seleccionada:
  

  

• Contacto Email:
  

  

• Contacto Telefónico:
  

  

Espero sus comentarios
Gracias

Existe una metodologia llamada Crazy 8 que es, en parte, una manera de realizar wireframes rapidisimos. 1 idea por minuto = 8 minutos/ 8 ideas.

Existen diversas plataformas que permiten realizar esta medotologia online, muy util en tiempos de pandemia 😉

¡Muy chévere!

En este caso utilicé esta App llamada Whimsicle, dejo el link por si alguien quiere probarlo
https://whimsical.com/

Wireframes: bocetos que nos sirven para definir la jerarquía de los productos.
Un wireframe se hace con boceto gráfico.
Tener en cuenta: Tamaño de íconos y letra, y permitir que el usuario pueda salirse cuando quiera.

Puedes hacer el Wireframe aquí: https://balsamiq.com

Una buena plataforma todo en uno desde wireframes hasta prototipar
https://www.figma.com/downloads/

Si no quieren hacer su wireframes en papel podrian hacerlo en esta pagina https://wireframe.cc/, esta muy buena

Hola a todos, este fue el avance de los wireframes.

Los wireframes son bocetos que nos sirven para definir la estructura y la jerarquìa de las vistas de nuestro producto.

Comparto mis bocetos realizado en MIRO

Wireframes

Bocetos que sirver para definir la estructura y jerarquia de nuestro producto

Nos enfocamos a pensar en funcionalidad y ordenar los contenidos.

Wireframe son igual a bocetos rapidos.

Importante empezar a mano por que es mas rapido y barato iterar.

Martín Coronel
UX/UI Design

Web: https://martincoronel.com/

Luego de 9 meses que hice este curso! encontré una herramienta online para hacer maquetacion de wireframes de una manera bien facil! y con este toque imperfecto! aca se las dejo https://www.invisionapp.com/

Hice varios intentos de las 3 páginas principales

Dejo mi aporte basándome en el primer ejercicio que realizamos de Real Estate.

¿Qué son los wireframes?

Un wireframe es un esquema o plano que es útil para ayudarlo a usted, a sus programadores y diseñadores a pensar y comunicarse sobre la estructura del software o sitio web que está creando.

En muchos cursos se habla de los Wireframes esto por que con ello desarrollas el Producto minimo Viable MVP esto nos ayuda a poder salir con validaciones de producto gstando menos por que con el Wireframe podemos validar la usabilidad y aceptacion de nuestros productos digitales antes de mandarlos a produccion y ser mas empaticos con lo que los usuarios validen

Wireframes
Son bocetos que nos sirven para definir la estructura y jerarquía de la vista de nuestro producto.

• Nos enfocamos en funcionalidad y contenido

• No se piensa en color, tipografía o algún otro elemento gráfico.

• Son bocetos rápidos, no tienen que quedar perfectos.

• Se puede hacer en papel, pizarrón o de manera digital.

Que bonito le quedaron los diseños profesora.

Hola! No son muy buenas las fotos pero aquí les dejo mis wireframes (mucho por mejorar jajaja)

Al final uní las dos páginas para realizar una sola landing page.

Creo que es muy importante, de acuerdo a los principios de Nielsen, sobretodo el 10 (Ayuda y documentación), tener en cuenta, dentro de lo posible, el circulo con el símbolo de ayuda arriba del texto o botón, sin que sea clickeable solo una nube de texto que se despliegue y que te vaya explicando el paso a paso del proceso en el que vas o el botón que estás por oprimir. Esto reduce la incertidumbre del usuario.

Wireframe: boceto que nos sirven para definir la estructura y la jerarquía de nuestro producto.

Cumpliendo con el reto es mi wireframe.

Excelente capitulo

https://drive.google.com/file/d/1LaBDQN8-uwcHB-Yu753Cie04r7EZJF8n/view?usp=sharing

Mockflow Es una buena herramienta para crear wireframes

Hola, les comparte mi wireframes, es el dashboard de la interfaz para buscar arriendos. me comentan si les gusto 😃

Pd: para realizar el wireframes utilice la siguiente interfaz https://miro.com/login/

¿Por qué utilizar wireframes?

Hacer este trabajo ahora, antes de que se escriba cualquier código y antes de que se finalice el diseño visual , le ahorrará mucho tiempo y un doloroso trabajo de ajuste más adelante.

Wireframes: Bocetos que definen la estructura y jerarquía de las vistas de nuestro producto
• Pensar en funcionalidad y orden de los contenidos
• Bocetos rápidos

1. Como se realiza la búsqueda: define los elementos de la pantalla de inicio.
2. Vista de resultados: consistencia en los elementos. Mismo patrón de navegación.
3. Como queremos el detalle.
4. Interacciones: pantallas de enviar mensaje, llamar, etc

particularmente no uso papel para casi nada, prefiero usar cualquier cosa digital, miren esta opcion: balsamiq wireframes

![](

![](

![](

Mi Wireframe:

Mi ejercicio:

Mi avance de mi proyecto HomePet

Tanto sufrir buscando herramientas digitales, agarren un paquete de cartulinas de colores, recorten y construyan sus módulos, incluso pasan a visualizar colores, tomen fotos, y vuelvan a reconstruir solo moviendo los recortes.

Comparto un wireframe que hice de Rappi para diferenciar el uso de botones de la RappiCard y RappiCuenta!!
image_2022-07-18_21-33-34.png

Plataformas para realizar el Wireframe

https://whimsical.com/
https://www.mockflow.com/
https://www.sketchize.com/
https://wireframe.cc/

Programas
https://www.figma.com/downloads/
https://www.invisionapp.com/

*Este es un resumen de algunos aportes

Diseño de wireframes

Muy buenos recursos. Se hace más fácil trabajar con ellos.

Chequen este sitio, digitaliza sus wireframes en segundos y los convierte en diseño https://uizard.io/es/

😃

He decidido apartarme del proyecto del curso y enfocar los ejercicios sobre un reto personal: hacer mi portafolio. Aquí va la versión inicial de los wireframes q quiero crear

Creo que es mejor de manera digital, en lugar de papel…hay que ayudar al medio ambiente.

Aparta

lo hice para movil!

Por aquí mis Wireframes

Los wireframes son bocetos que sirven para definir la estructura y jerarquía del producto digital, y así dar una idea del flujo de navegación dentro del producto o aplicación. Siempre se hace como bocetos rápidos, en distintos medios, como papel, pizarra o de manera digital.

Los wireframes son bocetos gráficos que nos sirven para definir la jerarquía de los contenidos. Puede ser hecho en papel, pizarra o de manera digital.

Al hacer un wireframe hay que enfocarse en la funcionalidad del sitio y el orden de los contenidos.

Hice mi primer prototipo o Wireframe, aunque eso sí; todo feo esta 😝

La app se llama Notability

Wireframes!

Mi aporte
Primero lo hice en papel, el segundo tambien me modificandole cosas y el tercero lo realize en Figma mas detallado

En papel

Home

Con mapa

Sin mapa

Contacto

Me encanta que si uno ha hecho los deberes con el modelo de negocio, la arquitectura de información es muy sencilla de hacer

Cuál es la relación entre la Arquitectura de la Información y los bocetos o Wireframes…???

Esta pagina ayuda a crear wire rames muy rápidos y con lo necesario para crear algo funcional, espero les pueda servir, en la compañía la usamos para poder apoyarnos en la creación de diseños y homologar la calidad de los mismos.
https://www.invisionapp.com/

Copy:

“Es el conjunto de textos que componen una pieza creativa.”

Gracias

Me gustó mucho la clase, aqui les dejo un aporte para reforzar la información sobre el uso de Wireframes

Después de tanto buscar y probar, me quedo con los wireframes en mi tableta, además de que se ven superlimpios y son fáciles de modificar! 😃

Me parece que hay una confusión con respecto a este punto. A mi entender, lo que está realizando la profesora no es un wireframe sino un sketch o boceto, que no es más que una idea rápida que nos ayuda a tener una noción de lo que vamos a desarrollar y da paso luego al wireframe que es un diseño más detallado (blanco y negro) de lo que queremos desarrollar. Es un plano con una estructura bien definida y se describen los procesos de interacción y características de nuestro sitio.

https://medium.com/level-up-web/the-difference-between-sketch-prototype-mockup-and-wireframe-whats-what-44d2b24ca0f0

Es muy importante diseñar o bocetar nuestro wireframe, eso nos dará una vista aproximada del flujo de nuestra pantalla.

Yo les recomiendo cuando hacen wireframes utilizar plantillas como esta, para evitar el estar maquetando el formato, y centrarse en diseñar los componentes.

Wireframes for Web Design
https://www.freepik.com/blog/how-use-wireframes-web-design/

todavìa me cuesta entender qué es el copy 😦 ¿Una imágen?

Muy práctico siempre es importante tener una perspectiva antes de ir al área digital

muy buena clase

Cual es el elemento más básico que conforma una interfaz?

Realizamos bocetos que nos sirven para definir la estructura y la jerarquía de nuestro producto.
En este paso nos enfocamos en la funcionalidad y orden del contenido.

Wireframe
//i.imgur.com/ovGW1UOg.jpg

Antes de empezar con los wareframes debemos!!

Antes de empezar con los wareframes debemos!!

Adobe Xd

Les comparto mi archivo:
https://drive.google.com/file/d/11iSP5OUgXc1wPUDS1EHYYzpEnI3wXWrU/view?usp=sharing
https://drive.google.com/file/d/1v3zi1Sr5bhRbzWOpHaMH5YRQlRa_nx0o/view?usp=sharing

Super claro, muchas veces obviamos este tipo de pasos que nos pueden ayudar a simplificar el diseño de nuestra web

Wireframe del proyecto.

muy buena clase