Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Wireframes y componentes

9/22
Recursos

Aportes 88

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Esta herramienta en linea y gratuita les puede ayudar FIGMA ( https://www.figma.com/ )

WIREFRAMES
¿Qué es un WIREFRAMES? Es el plano de nuestra aplicación. En ellos hacemos nuestros bocetos en papel de todos los componentes y pantallas que nos salieron en los flujos que hemos creado antes.
Los WIREFRAMES dibujados a mano se consideran de baja calidad, pero con ellos podemos empezar a hacer pruebas de usuarios.
Podemos hacer estas pruebas de muchas formas. Lo importante es ver la usabilidad de los componentes y pantallas, si son muy complejos para los usuarios finales.
Los WIREFRAMES de alta fidelidad son los creados con programas de diseño.
Esta parte es importante en diseño y también en desarrollo, porque en esta etapa los desarrolladores van a ver el tamaño de la aplicación final, y poder hacer estimaciones, además de decidir con que herramientas lo va a programar.
También es importante que lo vea el cliente para que se haga una idea de que secciones va a tener su producto.
En esta etapa no se usan las paletas de colores. Solo es un boceto en blanco y negro o grises.

Hice un wireframe de una pagina de perfumes

Buenas noches. Este fue mi intento para el proyecto que se propone en el curso:





Los wirefremes es simplemente llevar nuestra idea de la aplicación al PAPEL ahí especificamos que componentes tendrá o que pantallas. No es necesario usar un software ya que es nuestro primer boceto. Una vez que ya tengamos el boceto recién usamos un software de diseño para recrear los componentes o las pantallas. OJO no es necesario usar colores o tipografía de eso se encarga el diseño UI.

Para crear wireframes de alta fidelidad también pueden utilizar marvelapp es una buena página para hacer wireframes y es bastante sencilla de utilizar.

https://marvelapp.com/

Yo he usado Adobe XD y hay un curso en platzi:
https://platzi.com/clases/adobe-xd/

Que por herramientas no nos detengamos. Hacer bocetos a mano siempre es una alternativa válida.

Les dejo esta página de Microsoft que utiliza Inteligencia Artificial para transformar tu diseño hecho a mano en código HTML
https://sketch2code.azurewebsites.net/

Wireframe

  • Plano de nuestra aplicación
  • Bosquejo de las pantallas
  • Alta y baja fidelidad

Wireframes
.
Se define como el plano de nuestra aplicación. Aquí hacemos bosquejos y bocetos de todos los componentes que va a tener nuestra aplicación y de las pantallas que nos salieron en los flujos que creamos previamente.
.
Se recomienda hacer estos bocetos a mano y no complicarse en esta etapa con programas de diseño.
.
Lo importante es tener un inventario y poner a volar la imaginación en cuanto a las soluciones que vamos a darle a los distintos componentes.
.
Esta etapa es importante tanto para diseño como para desarrollo ya que aquí se podrán hacer estimaciones.
.
Además de** involucrar al cliente en esta etapa** para verificar si se acerca a lo que este requiere.
.
Capas de color, estilos de fuente, etc, ya que de esto se encarga el diseño UI.

Un pequeño ejercicio de lo que creo podría ser un comercio genérico.

Algunos de los softwares más populares para diseñar wireframes son:

  • Adobe XD. (Curso en platzi)

  • InVision Studio.

  • Sketch.(Curso en platzi)

  • Figma (Curso en platzi) (Mi favorito)

Personalmente utilizo Balsamiq Mockups para diseño de wireframes, les recomiendo mucho la herramienta. Permite no solo visualizar el diseño sino la interactividad entre los diferentes componentes de tu aplicación. Este es un diseño que implementé para un proyecto de la universidad con la misma, en ese caso se trataba de una aplicación móvil de entrenamiento en casa.

¡Saludos!

Mis apuntes de la clase 😄


Aquí para los que quieran saber más de sketch.

Dejo mis apuntes, espero les sirva 😃


💚 Wireframes de baja fidelidad(manual) y alta fidelidad(software).

Les recomiendo dos herramientas muy interesantes a la hora de hacer Wireframes.
El primero es Balsamiq Wirefrmanes: https://balsamiq.com/wireframes/
Y el otro permite modelar implementando un poco de funcionalidades incluso responsive design, ese llama JustinMind:
Ambos tiene una versión free y de paga, y son realmente utiles para dar muestras un poco mas formales que un bosquejo en un papel.

Se me da muy mal esto de UX, me estoy animando a tomar el curso de UX de Platzi.

Para hacer los Wireframes hay muchas aplicaciones súper fáciles de usar, en lo personal me gust mucho Adobe XD, aunque también usar Figma me gusta, depende de lo que tenga que hacer. Pero hay más opciones como Sketch. Te recomiendo que las pruebes y decidas que te gusta más. En Platzi hay cursos para Adobe XD y Figma, si mal no recuerdo hay un curso de Sketch igual.

Les comparto el diseño en figma por acá les dejo el link para que puedan ver todo el desarrollo del proyecto.

Un error de novato que cometí en muchas ocasiones fue darle demasiado detalle a los bosquejos. Esos van simples y rápidos.

Uno de los entregables más importantes en el desarrollo de proyectos digitales, son los wireframes. Se trata de esquemas que muestran estructuras simples con el objetivo de visualizar los contenidos en una pantalla y establecer una jerarquía. Comunicar la forma en que estará estructurada la página.

Los wireframes son muy útiles:

  • Permiten mostrar la idea rápidamente
  • Si hay necesidad de cambio se puede hacer en esta etapa (se ahorra mucho tiempo)
  • Tener una preview de la cantidad de trabajo a realizar

Mi wireframe del ejemplo de Samanta sería este. Usé Excalidraw para hacer el boceto intermedio (figuras básicas así como herramienta de dibujo)

Mi ejercico rapido del wireframe, hice solodos pantallas.

Me tomó como 5 minutos hacerlo. Creo que sin los diagramas me hubiera tardado más,

Llegué a este curso para formalizar mi conocimiento en diseño ya que he sido freelance developer por casi 10 años. Una parte que me parece curiosa es que mi carrera siempre me ha orillado a un proceso más bien parecido a design thinking, donde el diseñador tiene la primer palabra, en lugar del diseñador de experiencias, o bien, son ambas la misma persona. Esto que veo aquí es exactamente al revés. Siento que el wireframing le quita un poco de flexibilidad al diseñador, y por eso siempre he preferido hacerlo al revés, corregir la propuesta de este último para que tenga la funcionalidad requerida mermando lo menos posible el trabajo creativo. Además de que acelera el cierre de la venta al proponer. ¿Que opinan?

El Wireframe es el plano de nuestra aplicación, en el creamos nuestros bocetos y bosquejos de todos los componentes que va ha tener nuestra aplicación y de las pantalla.

**WIREFRAMES Y COMPONENTES
**
Los wireframes son bocetos de nuestra aplicación. Se recomienda hacer los bocetos a mano para no complicarse en el diseño. Pero realizar los wirefrmes de alta fidelidad con algún software como (Figma, sketch, illustrator, powerPoint,etc.). En los wirefrmaes no se tiene elementos como color o imágenes solo es la estructura de como se organizará nuestro contenido.

El wireframe es muy importante al momento de crear o plasmar una idea espontánea de un sitio web, ayuda mucho al momento de organizar. Eso lo aprendí y lo implementé creando un sitio web con html/css, los wireframes siempre me ayudaron 👍👍

Hola a todos esta herramienta es muy útil para diseñar wireframes y es bastante fasil de usar , se las recomiendo balsamiq 👌

Yo utilizo Balsamiq Mockups para los wireframes y la verdad que esta bastante bien.

este es un software recomendado por freddy vega para hacer wireframes, ¡siempre es un placer ayudar😊!
https://balsamiq.com/wireframes/

Les recomiendo ver muchas referencias siempre, de esa manera podrán hacer wireframes más rápidos y más pertinentes para sus objetivos de comportamiento digital en el usuario (informarse, comprar, dejar bases de datos, etc).

la herramienta para crear wireframes es FIGMA https://www.figma.com PERO lo mas cool son sus plugins y la comunidad que te ayudaran a crear tu prototipo

En cuanto al wireframe lo tomo como el diseño de baja calidad donde se pasan todos esos elementos y componentes ya establecidos en el diagrama de flujo de acuerdo a los requerimientos y objetivos ya plasmados. En este se evidenciará la estructuración y ubicación de todos estos elementos.

https://subefotos.com/ver/?d7c39b3f5746c439b8c45740c3a910e2o.jpg#codigos
quiero subir la foto, pero no me deja , asi que bueno dejo el enlace de mi wirframe,

Finalizado este módulo de UX no me queda mas remaedio que comenzar también con la carrera respectiva al diseño UX. Es una gran entrada a hacer las cosas perfectas 💚

Hasta ahora, tengo este wireframe del home para un sitio web de una agencia de publicidad.
La idea de la sección de servicios es que tenga un scroll lateral para poder observar un tercer contenedor y un botón adicional que llevará a los demás servicios ofrecidos.

Cualquier recomendación es completamente bienvenida. Muchas gracias.

Recomiendo esta aplicación, es Software de código abierto (open source), muy fácil de usar para hacer Wireframes: https://pencil.evolus.vn/

En esta página podrás descargar un programa para hacer tus prototipos de páginas web y de dispositivos.
https://balsamiq.com/wireframes/desktop/

Me gustó mucho esta sección.
En lo particular yo uso Figma y solo usé los wireframes cuando estaba empezando el desarrollo, ya después que se tuvo un sistema de diseño nos brincamos ese paso, aunque no recomiendo mucho brincarselo

Les recomiendo usar esta herramienta Mockflow .

Xcode en Mac
💻

Wireframe:
También llamado plan de pantalla por algunos profesionales, el wireframe es un prototipo de página web o de una aplicación. Esto significa que, antes de la elaboración del layout, se crea una especie de esquema. De esta manera, conseguimos entender cómo quedará el producto final.

En caso de que necesiten una herramienta para realizar tanto los wireframes como los diagramas de flujo les dejo esta que es suuuper fácil de usar:

https://whimsical.com

Realizar un buen Wireframe puede ser el gancho erfecto para atraer clientes.

9. Wireframes y componentes:

Wireframe

  • Es un plano de nuestra aplicación
  • Bosquejo de las pantallas
  • Podemos hacerlo en Alta y baja fidelidad
  • No estamos amarrados a un software para el wireframe, podemos usar paint, powerpoint o lapiz y papel, lo importante es tener un concepto de lo que se hará.

9.-Wireframes y componentes

Es el plano de la app, aquí vamos a empezar a hacer bocetos de los componentes y páginas que nos salieron en los diagramas de flujo creados. Estos nos ayudan al momento de las pruebas de usuario que pueden ser grabando la interacción de una persona con el diseño.

Wireframe de baja fidelidad: dibujos en una hoja.

Wireframe de alta fidelidad: hechos en algún programa.

Esta parte es importante para diseño y desarrollo, por lo que es importante incluir al equipo de desarrollo en esta etapa para que se vayan haciendo una idea. Todavía no nos preocupamos por fuentes o colores, para eso esta el diseño UI.

Recomendadisimos los cursos de arquitectura de la información, y todos los cursos de UX

Les dejo un curso rápido sobre wireframe:

Wireframe

Debi a ver visto este curso antes, yo siempre empezaba por los wireframes

https://balsamiq.com/wireframes/

Pueden usar balsamiq también

Wow, me encantan realmente estas clases, gracias

la herramienta online Balsamiq puede servir para esta etapa

Excelente clase !

Gran clase!

En lo personal utilizo: https://balsamiq.com/

Gracias por el vídeo!

Excelente!

Wireframes de bajo nivel son lo que siempre usamos para discutir el diseño de la pagina web, ahora usamos herramientas que nos ayudan a identificar componentes entre otras cosas.

el hero puede considerarse como un div contenedor???

Excelente clase !

Wriframes: es similar al plano de la aplicación, se hace bosquejo y bocetos de todos lo componentes necesario para la aplicación

Incluso para hacerlo mas dinámico con el cliente podríamos hacerlo sobre una pizarra o en una app en la tablet; de dibujo y listo al momento y lo que diga el cliente.

Medibang/ClipStudio/Ilustrator

El wireframe es un boceto en papel o un plano de como quedará nuestra app o web page. Este carece de estilos en la tipografía de letra, colores, imagenes etc.
Es decir, el wireframe hace que visualicemos que hará nuestra app o web, y no cómo se verá.

Yo uso una instalable en Windows llamada Pencil, open source, sencilla de usar.
https://pencil.evolus.vn/

Gracias platzi!!!

Muy buena y excelente clase.

El **wireframe** esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto. Puede crearse en papel o en software. Es útil para que el cliente vea los módulos y elementos del sitio y para que lo desarrolladores estimen tiempo y el tipo de tecnología a utilizar.

También pueden usar Notion 😃

Los Wireframes son planos o bocetos de la aplicación donde plasmamos el resultado de los diagramas de flujo.
Wireframes de baja fidelidad: es recomendable primero crearlos en papel para poder hacer cambios rápidos, con estos ya podemos empezar a realizar pruebas de usuario (interactuando con las hojas de papel)
Wireframes de alta fidelidad: Los creamos con algún software, esto nos ayuda a identificar patrones o componentes que se repiten y también se identifica el tamaño del producto final para así realizar una estimación de tiempo y de la tecnología que mejor se adapte. Carecen de color e imágenes

Ya está el curso nuevo de figma.

Al momento de la hora de tomas de decisiones, es importante que todo el equipo esté presente, de esta manera se reducen las posibilidades de perdida o transgiverción de la Información de los acuerdos.

Gracias por la información 😃

WIREFRAMES (Plano de nuestra aplicación).

Un wireframe es un diseño de baja fidelidad que tiene tres propósitos simples pero exactos:

Presenta la información que se mostrará en la página.
Da un esquema de la estructura y el diseño de la página.
Transmite la dirección general y la descripción de la interfaz de usuario

Fuente: https://www.invisionapp.com/inside-design/how-to-wireframe/

Una herramienta en linea y gratuita es FIGMA. (https://www.figma.com/)

Ejemplo de wireframe.

Si están buscando una herramienta para wireframes Invision (https://www.invisionapp.com/) es la mejor, tiene la opción de Hand-draw donde puede bocetar en cuestión de minutos.

Puede visitar la página de Cacoo es una web para realizar diseños de diagramas y Wireframes