No tienes acceso a esta clase

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

Wireframes: comienza en papel

18/29
Recursos

Los wireframes son bocetos que sirven para definir la estructura y la jerarqu铆a de los distintos elementos, de forma sencilla. Se pueden hacer con los materiales m谩s simples, de esta manera se pueden hacer iteraciones y cambios m谩s r谩pidamente.

18.png

Dentro de este boceto, se trata de plasmar el concepto general, los patrones m谩s elementales y el flujo de las pantallas m谩s significativas, sin entrar a profundidad en detalles. Lo que se busca es llegar a una referencia s贸lida a la que se pueda acudir cuando se necesite retomar el camino del dise帽o que planeamos, o cuando se quiera experimentar con alguna parte sin tener que intervenir en el dise帽o principal.

Los wireframes son ideales para ser trabajados con plena libertad junto con el equipo antes de comenzar un dise帽o profesional.

Aportes 123

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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 鈥淟ike 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

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

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鈥ay 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.

Estos fueron los Wireframes que hice enfocado en ser aplicaci贸n. Wireframe

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:

鈥淓s 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.

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.

Antes de empezar con los wareframes debemos!!

Antes de empezar con los wareframes debemos!!

Adobe Xd

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