Contenido del curso
Construcción de Wireframes en Diseño de Producto
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:
Salvador Salva
Estudiante
Sara Amaya Caldas
Estudiante
Esteban Vásquez Quesada
Estudiante
Joaquin Sian
Estudiante
Luis Palomo
Estudiante
Efraín Hernández García
Estudiante
Hanz Rodriguez Emiliani
Estudiante
Omar Gabriel Aguilar Moscoso
Estudiante
Luis Glex
Estudiante
Alejandro Sol Villaseñor
Estudiante
Jorge Trujillo
Estudiante
Aarón González
Estudiante
Carolina Lazaro
EstudianteAarón González
Estudiante
Juan Manuel Eslava Gordillo
Estudiante
Fabiola Dayana Acarapi Alvarez
EstudianteEugenia Maldonado
Estudiante
Juan Esteban Deossa Pertuz
Estudiante
Pedro Isaac Aguilar
Estudiante
Jeremy Francisco Lara Eduarte
Estudiante
Juan Carlos Barbaran Meza
Estudiante
Dalia Alegria Echavarria Garcia
Estudiante
Erick Daniel Cardenas Montealegre
Estudiante
Luis Felipe Silgado Cortázar
Estudiante
Antonio Alexander Estrella Gómez
Estudiante
Daniel Andriy Carrillo Marulanda
Estudiante
Oscar Rodrigo Leon Mojica
Estudiante
Carolina Gómez
Estudiante
Daniel Idarraga
Estudiante
Juan Castro
Profesor
Boris Köhli-Richter
EstudianteNo 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
Excelente aporte!
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/
Gracias por la recomendación!!, no sabía que tenian curso de figma, es lo que necesito aprender ...
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.
Buenos datos
Gracias
team FIGMA
Wireframing:
Basado en:
Gracias,
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.
Totalmente de acuerdo Armando :D Estos datos son de suma importancia para aumentar la probabilidad de éxito del proyecto
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.
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
Recomiendo usar Chat GPT para generar textos no definitivos para los wireframes.
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.
Gracias!
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.
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.
¿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:
Recomendaciones siempre que abordes wireframes:
Para construir nuestro wireframe debemos tener en mente:
Debí tomar este curso antes de adobe XD, ahora tengo que rehacer mi proyecto.
Siempre antes de aprender la herramienta necesitas saber de técnica y teoría.
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!
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
14.¿Qué son los Wireframes?
¿Qué son los wireframes?
Se basa en:
Estático: Un wireframe es estático, ninguna animación ni nada, simplemente se define la arquitectura de tu web o aplicación
Softwares:
Mantén tu app lo más simple posible
Cuando estes creando wireframes debes preocuparte por los:
Niveles de resolución
Arquitectura de la información
Flujos
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.
Los wireframes de alta resolución serían mockups? O que diferencia hay entre un mockup y un wireframe de alta resolución
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:
A groso modo, los mockups son cuando haces un render de tu app corriendo en un dispositivo real, por ejemplo un teléfono
