Construcción de Wireframes en Diseño de Producto

Clase 14 de 39 • Curso de Diseño de Interfaces Únicas

Resumen

Los Wireframes son maquetas del diseño de una aplicación construídos de manera rápida, es el primer paso de planeación de flujos dentro de un sistema, siendo el proceso para construir de forma rápida nuestro diseño.

Existen wireframes de diferente nivel de detalle, desde bajo, medio y hasta alto nivel, aunque siempre se recomienda empezar por lo más sencillo y detallar en siguientes iteraciones.

Los wireframes sirven para comunicar estructuras, así que no importa ni el color ni las animaciones, deben de ser simples y rápidos.

Los puntos a tener en cuenta dentro de un wireframe son:

Arquitectura de la información
Flujos
Jerarquía
Estructura
Componente
Foundations
Arquitectura

Salvador Salva

student•

No pierdas de vista los objetivos que cumplen los Wireframes:

Construir una versión rápida del producto
Definir la jerarquía, estructura y componentes
Aportar un primer avance de los Foundations
Es una visión estática del producto

Recomendaciones siempre que abordes wireframes:

Mantente simple
Piensa siempre en el flujo del producto, los estados de los componentes y el feedback con el usuario
No uses color, mantente plano y en blanco/negro
Se rápido

Sara Amaya Caldas

student•

Excelente aporte!

Esteban Vásquez Quesada

student•

Les recomiendo mucho Figma. Es una gran herramienta para diseñar interfaces, este es el que yo utilizo. Es colaborativo, en línea, tiene herramientas de prototipado. Es una herramienta muy completa. Te permite compartir tu trabajo muy fácil, excelente para trabajar con desarrolladores o compartir tu trabajo. Es muy fácil de usar. Puedes aprender todo lo que necesitas para usar esta maravillosa creación que es Figma: https://platzi.com/clases/figma/

Joaquin Sian

student•

Gracias por la recomendación!!, no sabía que tenian curso de figma, es lo que necesito aprender ...

Luis Palomo

student•

Muy buenas bases!

Aquí dejo la estructura final que muchas veces es bueno verlo antes de todo para formarse un mapa mental y así desglosar cada parte.

Niveles de resolución Low Medium High
Arquitectura de Información Jerarquía Textos Grupos / Componentes
Flujos Information flow Visual flow Function review

Fernando Saucedo

student•

gracias!

Efraín Hernández García

student•

Buenos datos

Omar Gabriel Aguilar Moscoso

student•

team FIGMA

Luis Glex

student•

Wireframing:

Basado en:

Arquitectura
Jerarquía (color, tamaño y posición)
Estructura (en función del contenido y las tareas a realizar)
Componentes (Reutilizables y estándares)
Foundations

Alejandro Sol Villaseñor

student•

Gracias,

Jorge Trujillo

student•

Es importante recordar que el diseño de interfaces es un proceso de varios pasos, y el wireframing no debe ser el primer paso en este proceso. Antes de crear wireframes, es super importante invertir tiempo en UserResearch. Los datos de investigación cualitativa y cuantitativa servirán como referentes durante el diseño de los wireframes.

Aarón González

student•

Totalmente de acuerdo Armando :D Estos datos son de suma importancia para aumentar la probabilidad de éxito del proyecto

Carolina Lazaro

student•

Me gustó la recomendación que Rulo da sobre usar textos reales en lugar de lorem ipsum, ciertamente me ha pasado lo que comenta, en mi trabajo los textos se crean después de tener el sitio web terminado y pienso que no es del todo funcional. Una alternativa para no romper el diseño es limitar los campos a cierto numero de carácteres, que en ciertas ocaciones no es lo ideal.

Aarón González

student•

La recomendación de Rulo es genial y correcta. Siempre es bueno tener definido al menos un texto cercano a lo que se pretende que vaya en el resultado final :D

Juan Manuel Eslava Gordillo

student•

Recomiendo usar Chat GPT para generar textos no definitivos para los wireframes.

Fabiola Dayana Acarapi Alvarez

student•

Jerarquias de los elementos importantes de la aplicación, mediante la definición de tres características: el tamañó, la posición y el color (En un Wiregraming no usamos colores)
**Estructura ** Debe tener nombre, su función y tool

Los componentes deben ser reutilizables y estándares

Foundations Los foundations comienzan aquí, recordemos que tiene espaciado, tamaño, tipografía Estático Un wireframe es estático, solo define la arquitectura de la información en la aplicación.

Sofware que recomienda:Sketch, Adobe XD y inVision Consejo:Poner todo el flujo en forma simple, en color blanco y negro para que nos enfoquemos en la arquitectura de la información y su flujo.

Eugenia Maldonado

student•

Gracias!

Juan Esteban Deossa Pertuz

student•

Cuando ya tenemos toda la información necesaria para comenzar a diseñar nuestra app, debemos empezar con un wireframe, un wireframe es un diseño que le da muchas más importancia a la arquitectura, estructura, flujos y jerarquía de nuestra aplicación, en esta parte del proceso NO es prioridad la estética del diseño, lo importante es definir la estructura que va a tener y verificar si es el adecuado para nuestros usuarios, por ende, es un proceso ágil y rápido que nos permite identificar cuales son las oportunidades o fallas de nuestro diseño, para mejorarlo de una manera más rápida. Un buen wireframe se encarga de definir principalmente, la arquitectura de la información, los flujos del desarrollo, la jerarquía del diseño y su estructura.

Pedro Isaac Aguilar

student•

Los wireframes se encuentran a mitad del camino entre los bocetos y el producto final. Son planos, sin color, regularmente formados a base de líneas, círculos, cuadrados, rectángulos y texto real (no se recomienda texto simulado para evitar hacer una mala estimación de los espacios reales que ocuparán los párrafos). Se deben hacer de forma rápida y su enfoque está en crear estructura, arquitectura de información y componentes necesarios para que el producto digital tome forma y sea entendido por todo el equipo.

Jeremy Francisco Lara Eduarte

student•

¿Qué son los Wireframes?

Son la maqueta inicial de nuetro diseño del producto. Vamos a definir la arquitectura, jerarquia, estructura, componentes y foundations del producto de manera visual pero no manteniendonos siempre bajo el princio de ser rapidos y simples. Lo importante aun no es la parte grafica sino la estructura del producto.

Los objetivos de los wireframes son:

Construir una versión rápida del producto
Definir la jerarquía, estructura y componentes
Aportar un primer avance de los Foundations
Es una visión estática del producto

Recomendaciones siempre que abordes wireframes:

Mantente simple
Piensa siempre en el flujo del producto, los estados de los componentes y el feedback con el usuario
No uses color, mantente plano y en blanco/negro
Se rápido

Para construir nuestro wireframe debemos tener en mente:

Niveles de resolución: Low, Medium, High
Arquitectura de Información: Jerarquía, Textos, Grupos / Componentes
Flujos: Information flow, Visual flow, Function review

Juan Carlos Barbaran Meza

student•

Debí tomar este curso antes de adobe XD, ahora tengo que rehacer mi proyecto.

Dalia Alegria Echavarria Garcia

student•

Siempre antes de aprender la herramienta necesitas saber de técnica y teoría.

Erick Daniel Cardenas Montealegre

student•

Oye me encantan tus cursos... pero he tenido que deternerme muchas veces para comprender la diferencia entre arquitectura de la informacion, UX y flujos... ahora con flujos... No me queda muy claro que es information flow/VisualFlow/ Function review... esto es importantisimo por que entiendo que esto me va dar herramientas de comunicacion con mis usuarios y con el equipo... agradeceria enormemente si me ayudas a desarrollar ese tema... asi sea con bibliografia gracias Bro!

Luis Felipe Silgado Cortázar

student•

Jajajajaja en 6:39 entendí que putas en lugar de que puntos... quedé tan rayado que me tocó repetir esa parte un par de veces xD

Antonio Alexander Estrella Gómez

student•

14.¿Qué son los Wireframes?

Wireframing
1. jerarquía
  - Tamaño
  - Posición
  - Color (No se usa en wireframe)
2. Estructura (Sistematización de componentes)
  1. Nombre (Componentes)
  2. Función (Componentes)
  3. Herramientas (Componente herramienta o no)
3. Componentes
  1. Reutilizables
  2. Estándares
4. Foundations
5. Arquitectura
  1. Información Estática
  2. Flujo
  3. Estados (Cada componente tiene diferentes estados)
  4. Retroalimentación
Wireframing ≠ diseño
La app lo más simple posible
Diseño en Blanco y negro
Se diseña el flujo, no lo visual
Objetivo wireframe
- Primario: Definir rápido flujo y estructura
- Secundario: Ver camino de diseño final
3 tipos de Resoluciones (diferentes niveles de definición)
- Low: líneas y texto (B&N)
- Medium: Líneas, texto y fondos (B&N)
- Hight: Líneas, texto, fondos y fotografías y otros elementos importantes (B&N)
Arquitectura de la información
- Jerarquía
- Textos
- Grupos / componentes
Flujos
- Información flow
- Visual flow
- Function review (Discusiones con el equipo sobre las funcionalidades)
No usar lorem ipsum, los textos lo más cercano posible (Los textos varian mucho de tamaño)
Wireframing = definir rápido el producto

Daniel Andriy Carrillo Marulanda

student•

¿Qué son los wireframes?

Se basa en:

Arquitectura
jerarquía: Se define a traves del Tamaño, colores y posición
Estructura: Definición de elementos ¿qué nombre, función y tool?
Componente: Objetos reutilizable - Son estandarés
Foundations: Tamaño de textos, espaciados, etc

Estático: Un wireframe es estático, ninguna animación ni nada, simplemente se define la arquitectura de tu web o aplicación

Softwares:

Sketchs
Xd
inVision

Mantén tu app lo más simple posible

Cuando estes creando wireframes debes preocuparte por los:

Flujos
Estado
Retroalimentación

Niveles de resolución

Low level
Medium level
High level

Arquitectura de la información

Jerarquía
Textos
Grupos/Componentes

Flujos

Information flow
Visual flow
Function review

Oscar Rodrigo Leon Mojica

student•

Carolina Gómez

student•

Qué son los WIREFRAMES?: Con toda la información estructurada sacada con lo explicado anteriormente sacaremos los WIREFRAMES que son una parte de el PROCESO más para llegar a nuestro producto final. Estaría entre el boceto y el producto final. NO USAMOS COLORES, solamente definimos posiciones.
Jerarquía: Dedicarle todo el tiempo necesario para que quede bien lograda, y coordinada. El tamaño, el color y la posición definen esta, así se crea un flujo de usuario fuerte.
Estructura: Definimos elementos y qué tipo de sistematización debe de llevar, y son: NOMBRE + FUNCIÓN + TOOLS. Todos deben ser estandarizados y/o reutilizables, ya que este mismo componente lo puedo utilizar en otro tipo de cosas, y asi se mantiene también el buen diseño.
Foundations: Tamaño de texto, espaciado, elementos de diseño. Puedo enriquecer mi librería a partir de lo que saque en los wireframes.
Estático: El wireframe es estático, sólo define la arquitectura visual y de la información de mi animación.

-Software a utilizar: El que mejor se nos facilite.

Recordar hacer nuestra APP lo más simple que pueda. Así todo el equipo puede tomar decisiones sobre muestro wireframe, y el trabajo se hace más ágil.
IMPORTANTE: FLUJO + ESTADOS + RETROALIMENTACIÓN. Cada componente tiene diferentes estados, y es acá donde empiezo a definir la sistematización de nuestros componentes.
Objetivo: Que nuestra estructura genere una gráfica impactante que sea importante para la APP.
Resolución: Ya se puede empezar a definir cosas, siendo los más rápidos ayuda a definir más rápido el producto final, ya que la comunicación es mas acertada.
1. Niveles de resolución:
- Los level - Medium level - High level
1. Arquitectura de la información
- Jerarquía - Textos (Preferible textos reales, así se sabe la cantidad de texto y sabemos la noción de espacio) - Grupos / componentes
1. Flujos
- Information flow - Visual flow (Transiciones) - Function review (Que tal componente tenga ciertas funciones, y ahí se discute con el equipo si se puede o no, o que tan viable puede ser.)

Daniel Idarraga

student•

Los wireframes de alta resolución serían mockups? O que diferencia hay entre un mockup y un wireframe de alta resolución

Juan Castro

teacher•

En esta clase se explican a la perfección las diferencias: https://platzi.com/clases/1743-diseno-prototipos/24324-niveles-de-fidelidad-del-prototipado/. :wink:

Boris Köhli-Richter

student•

A groso modo, los mockups son cuando haces un render de tu app corriendo en un dispositivo real, por ejemplo un teléfono