Crea un panel SaaS en Figma: una clase magistral completa de un proyecto de diseño de interfaz de usuario

1. ¡Te doy la bienvenida a la clase magistral del panel de control SaaS de Figma!: Bienvenido al curso Figma Project SAS Dashboard. Si ya has aprendido algunos conceptos básicos de Figma y quieres ver cómo los diseñadores profesionales de UI abordan el proyecto del mundo real, entonces este es el curso para ti Hola. Mi nombre es Ahmal Hasan, y soy diseñador de UIUX con más de cuatro años de experiencia diseñando experiencias y productos digitales, aplicaciones web y aplicaciones web Y en esta clase, te guiaré a través del mismo proceso exacto de crear un tablero SAS moderno desde cero. Al igual que los cursos basados en teoría, esta clase se basa completamente en proyectos. Tomaremos un resumen de diseño y lo transformaremos en una interfaz de usuario completamente profesional tablero de ASAS utilizando un flujo de trabajo muy profesional. Comenzaremos planificando el proyecto, entendiendo las necesidades del usuario, creando algunos diseños y bocetos básicos, así como estableciendo una dirección de diseño Luego pasaremos a diseñar el tablero pieza por pieza desde la navegación y los encabezados hasta las tarjetas y paneles de actividad, así como diferentes botones y visualización de datos. En el camino, aprenderás a crear componentes reutilizables, establecer consistencia visual, así como organizar tu trabajo de manera eficiente. También exploraremos prototipos, micro interacciones y animaciones Cosas que realmente dan vida a tu diseño, los hacen más realistas, además de interactivos. Al final de esta clase, habrá diseñado una interfaz de panel SAS completa que puede convertirse en una parte valiosa de su cartera y al mismo tiempo brindarle experiencia práctica en un proyecto de diseño común. Entonces, vayamos a construir. 2. Qué es el resumen del Panel de Control SaaS.: Hola, y bienvenidos a una de las primeras lecciones de este curso donde estaremos diseñando un dashboard SaaS o panel de software como servicio Entonces, en esta primera lección introductoria, vamos a discutir lo que vamos a construir dentro de este curso de proyecto. Y eso es exactamente lo que es. Estamos teniendo un curso donde estamos construyendo un proyecto juntos, y te estoy mostrando paso a paso cómo podemos hacerlo. Es muy importante entender lo que estamos construyendo o lo que estamos diseñando. Lo estamos diseñando y cuáles son sus funcionalidades requeridas. Vamos a repasarlos muy rápido. Este es básicamente nuestro resumen de proyecto. Esto es algo que podría ser mucho más expansivo, pero lo estoy manteniendo muy mínimo para los fines de este curso Una pregunta muy sencilla es, ¿qué estamos diseñando? Este es un proyecto ficticio, pero básicamente estamos diseñando un software de gestión de proyectos como un panel de servicio llamado flow desk para pequeños equipos creativos Es un tablero que estamos ofreciendo a personas a diferentes equipos y empresas donde los gerentes de proyectos pueden acceder a ellos y pueden administrar sus proyectos, sus equipos, etc. Eso nos lleva a la siguiente pregunta es, ¿para quién es exactamente? ¿Quién es nuestro público objetivo y quién es nuestra base de usuarios? La respuesta es que el usuario principal es un gerente de proyecto que necesita ver rápidamente el progreso del proyecto, boletos vencidos Plazos y actividad en equipo. Por lo que necesitan mantener todo bajo control. Esto no es para miembros específicos del equipo. Esto no es para la alta dirección, el jefe de tu jefe. Esto es estrictamente para el gerente del proyecto. Entonces necesitan tener en mente datos específicos, y ahora llegamos a las funcionalidades requeridas. Lo que hay que incluir dentro de este prototipo para que sea suficiente. Esto es según nuestro pensamiento y no tiene que ser todo, sino solo algunas cosas, funcionalidades que pueden ser necesarias. Por lo que el gerente del proyecto debería poder verificar el estado de los proyectos activos. Entonces no proyectos pasados, sino los que actualmente están activos. Y luego ver números importantes rápidamente o estadísticas, necesitan entender, ¿ cuánto tiempo toma cada miembro del equipo por boleto? ¿Cuánto tiempo tarda cada proyecto hasta que se cierra? ¿Cuántos proyectos están abiertos, cuántos están cerrados? ¿Cuál es la eficiencia? Necesitan entender estas cosas. Entonces deberían poder encontrar tareas atrasadas y urgentes Deberían destacarse. ¿Qué vence hoy o mañana? Deberían poder revisar trabajo en equipo y para que puedan reorganizar carga de trabajo del equipo para que ningún miembro del equipo tenga demasiado que hacer o muy poco. Luego, por supuesto, navegue a proyectos, tareas, informes y configuraciones. Esto es solo algunos bloques básicos de construcción que deberían poder tener. Sólo para darte una idea muy rápida de lo que realmente me estoy metiendo es algo similar a estos. Estos son los dashboards. Son configuraciones muy complejas. No son realmente fáciles, esto va a ser un reto, y están formados por muchos elementos. Hay muchas estadísticas, incluyendo gráficos, te dice que el proyecto está atascado en progreso y la revisión realizada, y luego te está dando la carga de trabajo semanal que te muestra cuántas tareas en curso hay, y luego también hay algunos números, total completada, tarea total por cliente, y así sucesivamente. Pero además de eso, tienes algunos botones extra como actividad. Tienes notificaciones, chats, historial, y tienes este menú lateral donde tienes muchas opciones y páginas diferentes. Te muestra aquí, supongo, las estadísticas de crecimiento, pero esto también podría ser un dashboard. Entonces tienes proyectos, hojas de tiempo, automatización, integración Va a tener que prototipar todas estas diferentes opciones. No tiene que ser tan complicado como esto. Pero el punto principal es que debería dar una muy buena visión general de lo que está pasando, y no vamos a hacer cada página. Sólo vamos a hacer el tablero en sí mismo. Aquí hay otro ejemplo con mejor calidad. Pero es el mismo principio. Tienes este menú lateral. Tienes tu configuración, tareas de cierre de sesión, proyectos, etc. Entonces aquí tienes una visión general un poco más simple. Este tablero te dice, Bien, aquí están las tareas que tienes en este momento o las tareas principales. Aquí está el objetivo mensual. Aquí están las estadísticas del proyecto. Se puede ver durante 12 meses, 30 días, así sucesivamente y algún resumen del proyecto, descripción general del proyecto. Realmente depende de lo que creas que es importante para el usuario ver. Esto es algo que vamos a estar haciendo en las próximas lecciones donde vamos a estar dibujando y prototipando e ideando Eso significa entender y determinar cuál es el problema y cómo debe ser nuestra solución de la mejor manera. ¿Qué datos debemos mostrar a nuestros usuarios, básicamente? Eso es algo que vamos a discutir en la siguiente lección. Gracias por escucharme. Te veré en la siguiente lección. 3. El boceto del diseño del panel de control: Entonces ahora tenemos una idea amplia de lo que queremos construir, y ahora tenemos que estrecharlo un poco dibujando Ahora, voy a usar Fig Jam, que he estado usando ahora mismo para este breve, y es muy sencillo. Podemos usar la herramienta Pluma e intentar crear algo con ella, o también podemos usar algunas de estas formas. Voy a usar algunas formas aquí y allá solo para hacerlo más fácil y luego jugar un poco con los bolígrafos. Aquí tenemos nuestro marco. Esta va a ser nuestra primera pantalla. Y, para ser honesto contigo, no creo que podamos ir tan lejos para crear algo completamente diferente al tablero normal. Es completamente normal y bien seguir adelante y copiar el diseño general. Dicho esto, creo que podemos crear de manera muy segura básicamente un área aquí para nuestro inicio de sesión. Podemos tener algunos círculos aquí, para que puedas tener tu cuenta o algo así. Puedes tener tus notificaciones e historial, alguna configuración así. También pondría una búsqueda quizá aquí. Yo pondría una función de búsqueda aquí y entonces aquí tendríamos nuestro menú lateral, pero estaría colapsado. Quiero crear una versión donde esté colapsada, y cuando coloques el cursor sobre ella, iría a la derecha Aquí tenemos algunos íconos. Así que sólo voy a dibujar algunos cuadrados aquí. Este es tu menú lateral y tal vez tengas tu configuración aquí. Y si con solo pasar el rato sobre él, se expandiría. Entonces tendríamos nuestro tablero. Esto nos permitiría tener mucho más espacio aquí en el tablero. Estaba pensando, para ser honesto, qué sería genial y estoy pensando tal vez en Spotify. Spotify tiene un diseño de ventana muy bonito, es ventana. Hay diferentes secciones y esas cosas. Estoy tratando de crear algo similar. Estoy pensando que lo que podríamos estar haciendo es que podríamos tener una sección aquí y esta sección básicamente tendría múltiples boletos. Entonces básicamente te mostraría lo más urgente o lo último, los boletos más nuevos o algo así. Por cierto, podemos anotar esto, sería genial si solo podemos estar diciendo boletos urgentes, y luego tal vez debajo de él, diría boletos más nuevos Entonces solo para que puedan tener una visión muy clara de lo que viene, lo que es urgente, lo que hay que hacer hoy. Y luego como mencionamos aquí, tendríamos perfil o vamos a escribirlo como este historial notificaciones, perfil, y primero, tenemos la búsqueda correcta de búsqueda aquí. Y luego aquí, lado plegable. Entonces ahora tenemos la disposición general, y estas son como las cosas periféricas laterales, pero ahora tenemos que hablar de la mantequilla y el pan reales de toda esta operación, que son estos pequeños boletos, estas pequeñas secciones. Y casi siempre tienen la misma configuración. Ya sabes, tienes estas secciones que están delineadas o están coloreadas, rellenadas, y luego tienes alguna información. Y siempre hay un uso de iconos de colores para indicar, ya sabes, aquí tienes urgencia o tal vez actualizado, ya sabes, el tiempo, y aquí tienes signos de, como, bajar, subir, disminuir, aumentar, así sucesivamente. Entonces no vamos a llegar a eso todavía, pero estoy pensando en lo que podríamos tener podríamos tener una ventana muy grande o una sección, y esta sección nos daría un entendimiento con gráficas de ciertas cosas. Entonces, para mostrarte las tareas completadas y las tareas que sean. Aquí voy a anotar esto y decir estadísticas de completado, hacer tareas atrasadas y así sucesivamente Y entonces estoy pensando aquí podríamos tener algunos números, así podríamos tener un número Vaya, y luego alguna explicación, número, alguna explicación, similar a esto aquí Pero en vez de hacer seis cosas diferentes, quiero hacer tres o podríamos hacer un círculo, un gráfico circular, ya sabes, un gráfico circular o algo así para mostrar lo que está pasando. Pero esa es la primera sección, y luego básicamente me gustaría hacer un corte o diferenciar esto. Entonces me gustaría tener múltiples secciones que muestren las cosas con más detalle. Entonces podríamos agregar una gráfica, algo así, posiblemente y bien, entonces tenemos una gráfica, y nos gustaría tener más información sobre tal vez los miembros del equipo. Creo que eso estaría muy bien. Y tal vez algo como este gráfico de barras es bastante agradable también porque te da más de una visión general. Entonces podría mostrarte a diferentes personas y lo que están haciendo y así sucesivamente. Y si, vamos a ver. Entonces esto es sólo una idea, pero creo que me gustaría tener un par de secciones más. Entonces no estoy seguro de lo que serían, pero aquí los van a cortar. Y si. Todavía no estoy seguro con qué tipo de grilla quiero estar trabajando, pero creo que me gustaría mantenerla flexible con estas cajas bento Entonces como puedes ver aquí, es muy recto. Como, tienes esta grilla así y así. Pero aquí es diferente. Está cortado de diferentes maneras. Entonces aquí tienes esta carta ocupando dos espacios y aquí cada uno está ocupando un espacio, y aquí tienes cuatro cartas diferentes. Es una cosa diferente, pero vamos a jugar con ella y ver qué sale de ella. Pero como dije, como mencioné, no estamos reinventando No estamos reinventando la rueda. Esto es más o menos lo mismo, pero solo estamos tratando de entender cómo queremos que sea diferente. Pequeños detalles a veces son importantes, donde quieres poner la búsqueda, donde quieres poner el perfil, o el hecho de que nos urge cosa de ventanilla de boletos. A lo mejor me gustaría incluso poner algo en el fondo que te dé una tarea de enfoque o tal vez, en realidad, déjame ver qué puedo hacer aquí. Intenta eliminar estos. Entonces tal vez aquí igual que Spotify, me voy fuera de eso. Podríamos tener algo de enfoque aquí y tal vez tendríamos una especie de situación tipo Pomodoro, contra Pomodoro o tarea de enfoque Entonces básicamente dirías, Bien, soy gerente de proyectos. Estoy manejando todo al mismo tiempo, y es mucho, pero quiero tener algo en lo que seguir para concentrarme en una tarea a la vez. Porque es muy fácil perderse en la salsa, sobre todo cuando tienes tantas cosas diferentes pasando. Entonces, mantener algo aquí abajo tal vez podría mantenerte, ya sabes, enfocado. Entonces sí, este es nuestro boceto. Es muy básico y primitivo, pero eso es exactamente lo que queremos. Aún no estamos inventando nada. Sólo estamos tratando de tener una idea de ello. Entonces te veré en la siguiente lección. 4. Configuración de marcos, cuadrículas y dirección del diseño: Entonces, en esta lección, vamos a tratar muy rápidamente determinar la dirección de nuestro diseño y crear el primer fotograma, así como tal vez establecer algunas pautas, algunas cuadrículas, cualquier cosa que realmente nos ayude a establecer una base para el diseño Entonces lo primero es lo primero, ya he seguido adelante e hice pequeños preparativos para las cosas. Uno de ellos es simplemente un logotipo muy simplista, no muy pulido que muestra una F y la D. Es muy simple, pero básicamente es como escritorio de flujo Y sí, está escrito básicamente así. Entonces este va a ser nuestro locum más o menos. Podemos retocarlo, no hay problema. Y entonces tenemos nuestros colores aquí. Entonces tenemos nuestra primaria, que es este tipo de azul oscuro mezclado con este gris oscuro. Entonces tenemos estos otros colores, acentos lo que podemos usar. Tenemos este amarillo anaranjado así como este rosa. Estos son solo algunos colores básicos que me gustaría usar por ahora, pero podemos trabajar en ellos a medida que avanzamos, pero solo para tener un poco de base. Como pueden ver, solo me gustaría hacérselo saber, porque este es un proyecto ficticio que vamos a correr más o menos a velocidad dentro de las próximas 2 horas, la configuración aquí es muy básica Pero si realmente estuvieras diseñando un sitio web o programa o tablero de instrumentos de este tipo, necesitarías mucho más que esto. Esto es muy básico, solo hacerlo así porque vamos a seguir adelante y expandirlo y va a ser un proyecto muy pequeño por ahora. Para la tipografía, como en para la fuente, tenemos a Geist como fuente, una fuente muy sencilla que se puede usar Esta es nuestra dirección de diseño muy generalmente puesta, por lo que esta es una hoja de estilo muy simplista para que la usemos en el camino Ahora, sigamos adelante y creamos nuestros marcos. Vas a seguir adelante con tu herramienta de marco y nosotros vamos a elegir escritorio y vamos a elegir Mac Pro de 16 pulgadas. Así que así, tenemos este marco creado, y este es el marco en el que vamos a estar trabajando principalmente. Entonces ahora sigamos adelante y montemos algunas cuadrículas. Ahora, personalmente, no soy un gran fan de ellos, pero pueden ser muy útiles al principio para tener una pequeña guía agradable. Entonces aquí vamos a la guía de maquetación y agregamos columnas. Me gusta tener algunas columnas. Y lo que vamos a hacer es que vamos a decir, vamos a tener cuatro. No quiero más de cuatro tarjetas, y voy a agregar un margen por ahora, y entonces la cuneta está bien ahora mismo Este es nuestro diseño muy general. Ahora, solo ten en cuenta que a la izquierda derecha aquí, vamos a tener, solo voy a colorearlo. Vamos a tener nuestra barra lateral por aquí. Bien. Y al mismo tiempo, nos vamos a quedar a la derecha, vamos a tener, ya sabes, boletos, boletos tan urgentes y todo eso Así que tenlo en mente. Pero para ser honestos, quiero crear nuestro diseño así y luego seguir adelante y agregar la sección de agregar este comentario un poco más adelante. Entonces sí, de esta manera, podemos centrarnos en el contenido en las cosas del medio, y luego podemos agregar nuestro pequeño comentario o función de tarea a la derecha un poco más adelante. ¿Bien? Entonces sólo voy a borrarlos por ahora. Entonces así es como se ve la configuración general ahora, y vamos a seguir adelante y comenzar a construir sobre ella en las próximas lecciones. Te veré en las próximas lecciones. 5. Creación de la navegación en la barra lateral: Ahora, sigamos adelante y creamos nuestra área de encabezado aquí mismo, todos los elementos que teníamos en nuestro boceto, que consisten en las notificaciones del historial de búsqueda y el perfil. Así que no vamos a complicar esto demasiado, sino que vamos a crearlo de manera muy sencilla Ahora, para crear las notificaciones de historial, voy a seguir adelante y comenzar con estas. Y para hacer eso, quiero crear algunos botones. Entonces voy a crear un solo componente, y voy a escribir A aquí. Voy a hacer de esta una fuente increíble. Bien fuente impresionante siete. No sabes que esta es una fuente que crea iconos. Por ejemplo, aquí tenemos iconos de notificaciones. Eso es una campana. Simplemente tecleamos campana y luego la tenemos ahí mismo. Vamos a hacer esto tal vez 20 tamaño, y vamos a mantener Mayús y A para hacer de esto un diseño automático, y vamos a asegurarnos de que el ancho y la altura sean los mismos, y luego solo vamos a bloquear la relación de aspecto. Entonces aquí lo tenemos. Esta es la fuente. Voy a centrarlo, y voy a llamar a esto un botón. O botón de icono. Entonces básicamente vamos a convertirlo en un componente. Ahí vamos, y vamos a darle un relleno. Vamos a darle un color a esto. Lo haremos regular así. Y le daremos algunos rincones dorados. Entonces tal vez ocho es suficiente. Entonces aquí tenemos nuestro botón de icono. Entonces voy a agregarlo pegarlo aquí, y aquí tenemos esta campana. ¿Bien? Y luego podemos copiar esto, y luego podemos crear los botones de historia ver si podemos obtener historia o repetir o algo así. Así que vamos a la página web, Font Awesome, y podemos encontrar la específica que queremos, que es reloj rotar a la izquierda. Así que sólo vamos a pegarlo aquí. Y vemos que no está disponible en sólido. Para que podamos hacer solo volvamos. Haremos todos estos, un sólido. Ahora tenemos estos dos y podemos aumentar el tamaño, podemos cambiar algunas cosas, podemos hacerlo 24 en su lugar. Ahora tenemos estos botones por aquí, y luego lo que necesitamos es una búsqueda. Voy a crear un marco aquí y voy a darle cierto radio y crearlo así. Entonces sólo voy a poner algo de texto dentro de él y decir buscar. Voy a tener en realidad un icono aquí bastante práctico y luego en realidad anuncios de texto. Voy a elegir ambos. Y ahí vamos. Sólo voy a asegurarme de que esté lo suficientemente oscuro como para ser legible. Entonces puedo convertir todo esto en un diseño automático y extenderlo un poco, claro, al final, tenemos la imagen. Para la imagen, solo podemos seguir adelante y buscar en pexels cualquier foto del hombre Chico, la mujer realmente no importa. Sigamos adelante y simplemente elijamos a cualquier persona aquí. Sólo necesito una buena toma de su cara. Copiarlo, pegarlo, y voy a crear un círculo y sólo voy a copiar el relleno, pegarlo aquí, entonces voy a recortarlo para que pueda centrar un poco su cara aquí. Creo que esto es lo suficientemente bueno. Podemos darle algunas fronteras si quieres, solo para asegurarnos de que se va a notar o algo así. Ahora lo que vamos a hacer es que vamos a sostener todos estos y ponerlos en un diseño automático. Veamos cómo se ve esto ahora mismo. Creo que el tamaño está bien. Podemos seguir adelante e incluso hacerlo un poco más pequeño. Déjame ver cómo se vería eso en una MacBook. Bien. Ahora mirándolo realmente en una MacBook, no es tan grande en absoluto. Está bastante bien. Entonces sí, podemos seguir adelante con eso. Ahora lo que también necesitamos incluir son nuestros logotipos. Sólo voy a copiar esto. Voy a pegarlo aquí. Sólo voy a regresar. Asegúrate de que todo aquí esté incluido. Copiarlo, pegarlo aquí. Y luego con K, voy a redimensionarlo. K redimensiona todo de una manera agradable para que nada se salga de proporción. Entonces esto es bastante bueno. Y luego lo voy a agregar aquí. Y lo que voy a hacer es que voy a incluir todos estos en un solo cuadro. Así que un diseño automático, de nuevo, usando shift y A, y ahora todo ha terminado. Lo que voy a hacer es que voy a extender esto hasta el final, y voy a darle 36 o tal vez 24. Voy a darle un relleno también solo para poder decir a dónde va. Y le voy a dar un poco de relleno de derecha e izquierda. Esto es lo que está bien. Voy a elegir estos otra vez. Voy a destacarlos. Voy a crear un diseño automático dentro de un diseño automático, pero voy a darle tal vez un máximo si queremos. Si quieres, puedes darle un máximo y centrarlo. Y así, se quedaría aquí en medio. Entonces, aunque la pantalla sea realmente amplia, entonces todavía se va a quedar hasta aquí. No va a ir mucho más allá. Pero en realidad no necesitamos eso per se, en mi opinión. Así que vamos a mantenerlo así, y tomaremos el relleno y lo haremos blanco. Y sí, así como así, tenemos un pequeño cabezazo agradable. Por supuesto, podemos expandirlo. Podemos agregarle más cosas. Pero por ahora, parece bastante bien. Podemos, por supuesto, editar las pequeñas cosas como el espaciado en lugar de 22, podría ser 24, y eso es más o menos todo. La siguiente lección, intentaremos crear la barra lateral o el menú lateral. 6. Diseña el encabezado y el área de búsqueda: Entonces, desde la última lección, agregué esta cosita de un kit de interfaz de usuario solo para darle un aspecto más realista. Entonces solo para eso, ya sabes, sobre todo con esta muesca. Entonces ahora, parece que en realidad estamos en un sitio web. Y de esta manera, podemos decir mejor dónde van a estar nuestros encabezados y cuánto espacio va a ocupar. En vez de que esto esté aquí arriba, se puede decir, oh no me queda mucho espacio ahora. Entonces, o cambias el tamaño del encabezado o lo mantienes igual y vives con él, depende de ti Pero de esta manera, tenemos una mejor comprensión del dimensionamiento de las cosas o elementos de diseño que tenemos. Pero creo que por ahora se ve bien. En esta lección, vamos a diseñar el menú lateral, lo que no va a ser una tarea fácil. Bien, así que tenlo en cuenta, por favor. Para ello, me gustaría crear otro componente. Así que vamos a empezar por crear estos botones específicos. Por supuesto, podemos construir sobre este componente en sí mismo, pero creo que sería bueno si podemos hacer componentes completamente diferentes. Acabo de copiar esto, lo pegué aquí y voy a desatar la instancia En lugar de ser botón icono, voy a decir botón de menú, y vamos a convertir esto en su propio componente. Ahora, esencialmente lo que queremos tener es que queremos tener un botón que tenga un icono, pero que también tenga algo de texto. Este texto, permítanme agregarlo aquí. Lo copié o lo corté, lo pegué. Vamos a hacerlo horizontal. Y no vamos a bloquear la relación de aspecto. Vamos a hacerlo abrazar. Entonces vamos a hacer clic ojo a ojo gota este color. Entonces ahora tenemos un artículo. Este ítem podría ser quiero decir, ahora mismo, dice SFP, que es la fuente de Apple, pero eso no es lo que queremos Queremos decir que esto es, por ejemplo, dashboard, este es nuestro botón de dashboard. Entonces una cosa que podríamos hacer es, quiero decir, veamos cómo se ve aquí, se ve bastante bien, pero tal vez podríamos hacerlo aún más grande, para ser honesto. Podríamos hacer que el icono sea un poco más grande. Eso es un poco demasiado grande. Y hacemos que la fuente sea más grande. Podrían ser 20 por lo menos. O hagamos esto llevemos esto vuelta al 24 y este 24 también. Y luego le daremos a este 616. Y si, veamos como quedaría esto aquí. Sólo voy a pegarlo por aquí y voy a crear diferentes versiones. Voy a ponerlos todos en un diseño automático, volvamos a nuestro sitio web y veamos qué podemos agregar para el dashboard. Puedes filtrarlo y hacerlo solo gratis, y podemos ver lo que más nos convenga. Por ejemplo, esto podría ser mejor para el tablero, para ser honestos, ¿verdad? Y luego tenemos algunos otros puntos que están por aquí proyectos tenemos calendario de tareas, y luego tenemos informes de equipo y ajustes. Informes de equipo. Ahora vamos a tener que hacer esto alineado a la izquierda, y aquí vamos a hacer lo mismo. Ahí vamos. Entonces ahora se deja alineado para todos ellos. Y sólo vamos a tener que averiguar los íconos para cada uno. Pero veamos cómo se ve ahora mismo. Quiero decir, para ser honesto, no se ve tan mal. A lo mejor necesitamos un poco más de espaciamiento entre ellos. Pero aparte de eso, siento esta es una buena manera de enumerarlos. Para que podamos comprobar, por supuesto, los otros diseños en los que estamos basando esto, para que podamos venir aquí y ver cómo lo hicieron A lo mejor el suyo es un poco más pequeño. Yo diría que sí. Entonces eso es algo que podemos intentar hacer, pero el caso es que no tenemos tantos artículos por aquí. Así que volvamos, a ver cómo se ve. Entonces tal vez podamos hacer la fuente un poco más pequeña, tal vez, no. Entonces hagamos que sea un 20 para que podamos hacer el espaciado luego un poco menos. Todo bien. Entonces veamos si podemos hacer esto regular. El problema con regular es que las fuentes no siempre tienen la opción regular cuando estás en el plan gratuito con este icono. Entonces con esta solución de iconos, sólo vamos a mantenerla así. Creo que se ve bien, y solo necesitamos llenar los íconos. Y una cosa importante es que cuando tienes esto, necesitas crear otra variante. Esta variante tiene que tener el texto oculto, solo hacerlo invisible, ocultarlo, y luego tienes dos versiones diferentes, puedes sostenerlas todas. Y entonces puedes tener la versión con o sin íconos, ¿bien? Como mencionamos, queremos crear dos versiones diferentes, una que sea normal y otra que se colapse. Entonces eso es muy esencial para hacerlo. ¿Bien? Entonces la forma de hacerlo es seguir adelante y crear dos versiones diferentes a partir de este menú. Aún no lo he configurado completamente. Todavía necesitamos un botón aquí, así que vamos a agregar un botón de configuración. Pero con el botón de configuración, queremos que esté más o menos abajo, solo voy a escribir equipo, y luego ajustes. Entonces queremos que sea muy abajo. Simplemente separe. Entonces vamos a hacer que sea un diseño automático y la distancia debe ser automática. Así que ahora lo tenemos a la vuelta así y nos aseguramos de que esté extendido por todo el camino. Y entonces lo que vamos a hacer es asegurarnos de que el espaciado sea adecuado, así que tenemos tal vez 24 de aquí y allá, y luego el relleno de arriba y abajo y de izquierda y derecha debería ser 24, y ahora se ve más normal. Ahora vamos a sacar esto y darle tal vez un fondo, y luego convertirlo en un componente y vamos a decir menú lateral o barra lateral. Lo que se llama una barra lateral. Esta barra lateral va a tener dos versiones que solo tiene íconos, sin texto. Vamos a hacer esto eligiendo todos los elementos aquí. Ahora sólo tenemos que elegir cada uno de estos artículos aquí y vamos a poner la variante dos. Podemos cambiar el nombre de esto. Entonces lo que vamos a hacer es que vamos a venir aquí y simplemente colapsar todo esto. Vamos a colapsarlo. Y así, con nuestros íconos, se va a configurar de una manera en la que ocupe mucho menos espacio. Así que vamos a ver y probarlo. Sólo voy a pegar esto aquí y voy a colocarlo donde debería estar. Veamos cómo se ve ahora. Bam. ¿Ves? Ahora, ocupa mucho menos espacio. Podríamos ir un paso más allá e incluso disminuir el relleno, para ser honestos, de derecha e izquierda, así como así. Pero solo tenemos que asegurarnos aquí de que todo esté bien. Solo hazlo abrazar y ahí vamos. Así es como se ve nuestra barra lateral en este momento. Por supuesto, tengo que rellenar los íconos y cambiar algunas cosas, pero así es como funciona, y vamos a estar construyendo sobre ello un poco más tarde. Vamos a crear el mecanismo donde hagas clic en el botón. Aún no lo hemos hecho, pero vamos a crearlo más adelante. Todo bien. Nos vemos en la siguiente lección. 7. Crea tarjetas de control y bloques de estadísticas.: La sección de tarjetas. Esta es la sección donde vamos a estar viendo las tarjetas y el tablero real. Entonces el contenido real. A medida que avanzamos y comenzamos a diseñar esto, me gustaría echar un vistazo a Spotify. Te dije antes que esto es lo que estoy tratando de ir ahora mismo dentro de este diseño porque me gusta mucho cómo lo hacen. Ya sabes, Spotify es una empresa que ha recibido mucha crítica a su diseño, tal vez porque es demasiado complejo o algo así Pero realmente me gusta. Tienes tu encabezado aquí, tu búsqueda con tu perfil y otras cosas. Y es muy similar, ya sabes. Y luego a la izquierda, tienes aquí tu playlist. Tienes cosas diferentes como el acceso rápido. Y este es su tablero. Tienes múltiples opciones diferentes para elegir. Tienes deslizadores y así sucesivamente. Y aquí abajo, tienes a tu jugador que siempre va contigo. Y a la derecha, tienes una sección aquí que te muestra más la canción que estás escuchando los créditos del artista, y así sucesivamente. Entonces, lo que es genial de esto, sin embargo, es que si echas un vistazo, esta no es una sección diferente. Se nota como si se tratara de una ventana, ¿verdad? Al igual que, esto es una ventana y estás asomando por el Lo que normalmente hacen las empresas es hacer que el encabezado se vea como si estuviera en la cima. Entonces tienes este menú y también está en la cima. Son muchas cosas una encima de la otra. Pero en cambio, lo que hacen aquí es que hacen que parezca que el encabezado está conectado a esta parte, que también está conectada al jugador y solo tienes dos ventanas. Lo genial es que puedes cambiar el tamaño de estas ventanas. Puedes llevarlos a la derecha o izquierda. Y lo mismo aquí. Puedes redimensionarlo, y luego puedes ver los nombres completos o puedes recuperarlo y así sucesivamente Eso es exactamente lo que voy a buscar aquí. Quiero lucir que se vea tan simple y limpio y moderno que no parezca que estos son todos elementos uno encima del otro, sino que aquí hay una ventana, y esta ventana te muestra las opciones, ¿o? Voy a seguir adelante y esconder la guía de maquetación por ahora solo para que podamos ver con más claridad. De hecho voy a tomar el diseño aquí, la guía de diseño, y voy a agregarlo a este marco. Voy a arreglarlo un poco. Así que sólo para darte una idea de lo que queremos ir a por. Entonces la razón para hacer esto es porque quiero que la guía, ya sabes, esté aquí porque queremos hacer el diseño bento por aquí, ¿de acuerdo? Pero vamos a esconderlo de nuevo por ahora. Entonces ahora, como pueden ver, eso es exactamente de lo que estoy hablando. Entonces básicamente tenemos aquí esta ventana que nos muestra las tarjetas, esta área, y todo lo demás aquí se ve bastante normal. Parece conectado, ya sabes, lo cual es muy suave. Y luego más adelante, básicamente también estaremos agregando la sección de comentarios o la sección de tareas por aquí. Así que de manera similar al layout con Spotify, ¿bien? Y entonces aquí tendríamos el controlador o la tarea actual que estamos haciendo actualmente, y vamos a llegar a eso más tarde. Pero por ahora, centrémonos. Así que ahora tenemos un diseño bastante ordenado pasando por aquí. Sigamos adelante y veamos qué podemos hacer aquí en cuanto a las tarjetas. Entonces como mencioné, vamos a tener diferentes diseños para diferentes tarjetas. Pero lo que podemos hacer, sin embargo, es intentar crear un layout muy básico. Así que juega con los tamaños y así sucesivamente. Entonces ahora mismo, así es como se ve. Podemos mear con eso. Creo que eso es demasiado espaciado. A lo mejor podamos 24 y también podamos hacer la cuneta 24. También podemos agregar algunas filas. Entonces ahora, como pueden ver, se ve más claro de dónde pueden llegar las cartas. Así que vamos a traer esto por aquí. Entonces cuando traemos aquí este elemento, se puede ver que esta podría ser una sola carta, ¿verdad? Pero también podríamos agregar otra tarjeta que podría ocupar mucho más espacio. Puedo ocupar el espacio de dos cartas, o tal vez ambas puedan ocupar todo este espacio. Entonces es muy flexible a nuestras necesidades y a lo que necesitamos mostrar. Eso depende totalmente de nosotros, y todo esto con estos se vuelve trippy Así es como se vería, asegúrate de apagar esto tan seguido, vez en cuando solo para que no se meta con cómo ves las cosas y veas cómo se ven las cosas, y es como, Bien, esto no está tan mal. Pero una cosa, claro, que recomendaría es jugar también con las sombras. Eso es algo que suelen hacer. Podrían ser sombras muy simplistas de alguna manera, así o podría ser incluso menos Como puedes ver, es como muy simple cerca de sombras que los hace parecer boletos. O podríamos trabajar con algo un poco más fuerte, así podría ser que pudiéramos disminuir la opacidad y hacerla más borrosa y luego conseguiríamos algo un poco más suave en los ojos, Entonces eso es una cosa a tener en cuenta. Creo que quiero ir con este estilo por ahora, pero podemos cambiarlo más adelante. Depende totalmente de nosotros. Bien, así que vamos. Yo sólo voy a tomar una de estas cartas, la versión más pequeña aquí, y voy a seguir adelante y jugar así que aquí tenemos la maquetación. Ahora, podemos hacer esto de muchas maneras diferentes, pero una forma en la que me gustaría hacerlo es que me gustaría agregar un título. Entonces este título podría estar arriba o podría estar abajo. Depende totalmente de nosotros. Veamos cómo lo han hecho los demás. Por lo general, lo hacen arriba. Es negro, muy grande y legible y lo mismo aquí, dice tareas continuas. Entonces se puede ver una gráfica. Se puede ver una opción para filtrarlo semanalmente, diariamente, sea lo que sea. Entonces sí, esto es amable a lo que vamos a buscar. Aquí, lo tienes como botones o desplegable. Entonces eso es algo a lo que podemos ir. Entonces podemos agregar esto arriba y podemos decir que podemos volver aquí y ver qué ponemos. Entonces las estadísticas. Entonces este es nuestro texto aquí mismo, y no tenemos que llamar a una tarea por encima de ti. Sólo se puede decir título. Asegúrate de que esté alineado a la izquierda. Tiene la fuente adecuada, la fuente correcta, y aquí dice que está alineada a la izquierda y a la parte superior, lo cual es lo suficientemente bueno para nosotros. ¿Bien? Y luego podemos agregar algunas otras opciones. Podría ser una imagen, podría ser lo que sea. Pero este es un bonito diseño general. Veamos qué otra información podríamos estar agregando. Quiero decir, para ser sinceros, no tenemos un diseño simple. Tenemos muchos diseños diferentes por aquí. Es difícil de decir, vamos a hacer exactamente este mismo diseño porque cada vez tienes un tipo diferente de gráfico. Creo que esto es lo suficientemente bueno como para tener un diseño muy simplista Entonces puedes agregar tu gráfica, puedes agregar tus números, sea lo que sea. Y si, Bien, entonces, ¿qué más podemos hacer aquí? Bueno, podemos agregar un área de opciones. Para que puedas tener un botón que diga, aquí tienes tus opciones. Sólo vamos a crear unos cuantos círculos aquí uno al lado del otro. Vamos a convertirlos en un diseño automático. Vamos a hacer que también sea 13 alto. Y vamos a cambiar el color, hacerlo un poco más oscuro. Y vamos a alinearlo aquí. Pero para éste, vamos a alinearlo a la derecha. ¿Bien? Entonces cuando cambiemos el tamaño de esto, como pueden ver, el título se va a quedar en la parte superior izquierda, y esta cosa va a quedar en la parte superior derecha ¿Bien? Entonces aquí tienes tu botón de opciones extra, y luego aquí está tu título, y aquí tendrías tu gráfica, sea lo que sea. Voy a mantener esto como una pequeña cosa principal como el original, y luego voy a jugar con algunos otros. Ahora, hablamos de tener esta visión general de la tarea para mostrar la tarea terminada vencida y así sucesivamente Hagámoslo muy rápido. Vamos a decir visión general de tareas. Entonces vamos a crear estos rectángulos y los vamos a hacer redondeados y les vamos a dar algunos colores. ¿Bien? Entonces vamos a escribir aquí los números. Vamos a agregar este texto y luego vamos a agregar estos rectángulos y luego vamos a agregarles algo de texto, y vamos a hacerlo pequeño 12 es lo más pequeño que podemos ir normalmente cuando se trata de aplicaciones web, y así voy a hacerlo regular y voy a decir 42 o algo así. Entonces voy a convertir esto en un marco o podemos hacer esto en un diseño automático. Bien. Entonces voy a copiar esto. Entonces como pueden ver, puedo redimensionarlo y cambiar las cosas. Yo puedo hacer esto y puedo decir 24. Pero 24, ¿qué 42, qué? Voy a añadir un poco más de texto. Voy a decir terminado. Lo mismo aquí. Podemos agregar texto aquí, para hacer, y así sucesivamente y así sucesivamente. Entonces una vez que tengamos un par, podemos ponerlos en un diseño automático, y por supuesto, tiene mucho sentido cambiar los colores. Uno de los colores que escogimos es este rosa y luego uno de ellos es este naranja. Ahora tiene más sentido ordenarlos también ¿qué color dice urgente? Es más hacia el rojo. Entonces tienes este color que dice, sí, pendiente o simplemente podemos decir urgente y luego podríamos decir, sí, podríamos decir que hacer aquí, y luego aquí está terminado. O podríamos decir quiero decir, por terminado o podemos decir pegado para uno de ellos. Entonces esto podría ser para hacer. Esto podría estar atascado. Y entonces esto se completaría, pero necesitaríamos un color verde para ello. Sí, así que ya está escrito. Esta es una buena manera demostrarlo, pero entonces podrías tener una pregunta. Bien, bueno, los números, aún no los hemos arreglado, pero estás diciendo que hay 24 urgentes y 42 por hacer. Entonces estos urgentes, ¿ también se cuentan en el para hacer o no? Esa es una buena pregunta. Tenemos que hacernos preguntas lógicas. Vamos a incluir hay 42 tareas y 24 de ellas son urgentes y 24 de ellas están estancadas. ¿O es esta una categoría completamente diferente? ¿O es este 42 para hacer no urgente? ¿Sabes? Entonces estas son como si tuviéramos 42 tareas que no son urgentes y luego 24 tareas que son urgentes. Entonces, en total, tenemos tantas tareas. Esa sería una buena pregunta. ¿Correcto? Así que tenemos que entender esas cosas. De lo contrario, no tendría sentido mostrarlos como cosas diferentes, ¿de acuerdo? Vamos a tratar de jugar con él y ver de dónde nos lleva. Ahora, claro, otra cosa que podríamos hacer es que podemos tomar todos estos y cambiarlos a la derecha. De esta manera, o tal vez no de esa manera, exactamente, o podemos cambiarlos a la derecha y encontrar una manera de hacer que todos comiencen desde el mismo lugar porque ahora mismo, todos comenzando aquí. La forma de hacerlo es que podríamos hacer un largo o ancho específico. Entonces tenemos ancho de 65 y voy a dar a todos estos un ancho de 65 y luego todos podrían comenzar desde el mismo lugar. Esto es un poco más agradable, diría yo, a la vista porque es un poco más organizado Por supuesto, también podrías cambiar estos números, tiene más sentido ponerlos aquí, ahí vamos. Ahora se ve mucho más bonito. Tenemos cosas a la izquierda, cosas a la derecha, y es más comprensible. Ahora bien, una cosa que me gusta hacer cada vez que estoy creando cualquier tipo de dashboard, si es posible, si esto es algo que se puede programar es cierta manera agregar símbolo de estado, por así decirlo, esto es bueno, esto es malo porque muchas veces es realmente difícil de analizar y entender. Tenemos tantas tareas urgentes, y tenemos tantas atascadas, y cambiemos los números. Entonces, ¿qué me dice eso? Esa es la pregunta. ¿Qué me dice esto a la larga? ¿A qué me beneficia esta gráfica? Me gustaría agregar texto que diga, estás en el camino correcto. Esto es bueno, esto es positivo o hay un aumento, hay una disminución. Esta es una buena carga de trabajo. Esto es una cosa que podríamos hacer y podríamos agregarla como placa. Podemos crear esto como un componente, pero solo tenemos que entender cuál es la mejor manera de agregarlo. Yo solo digo aquí categoría o estado, y voy a hacer que sea un diseño automático, darle algo de color, algo de verde. El verde 10% y lo va a hacer cuatro por cuatro tal vez u ocho por ocho. Ahora bien este es un componente y dice estado. Podemos agregarlo por aquí en alguna parte. Para el texto, voy a hacer que sea un poco verde oscuro. Y tal vez podríamos agregar algún tipo de símbolo o como un objeto. Entonces agregaría este círculo aquí, y también lo haría verde oscuro. A lo mejor darle un poco, como una sombra o un brillo, si es posible. No se ve tan genial. No se ve súper duper genial, pero creo que podemos intentar resolverlo de alguna manera. Básicamente, queremos decir que hay diferentes tipos de stati y aquí dice en pista Se puede decir en pista como ejemplo. Podemos disminuir el espaciado aquí y luego podríamos agregar otro donde diga retroceder. Así. Podemos hacer que esa sea más amarillenta. Yo puedo encargarme de eso y luego podemos hacer una tercera que diga que necesitas hacer tu trabajo. Sí, básicamente solo agrega algunos tipos diferentes de estatus. Pero la redacción y los colores y estas cosas son algo lo que podremos encargarnos más adelante. Pero esto es solo como un comienzo una tarjeta muy agradable para la visión general de la tarea. Podemos convertir algunas cosas en auto layout como estas, por ejemplo, y luego asegurarnos de que este frente sea igual. Entonces sólo voy a seguir adelante y copiar esto aquí. Volvamos a poner nuestras filas y columnas. Sólo voy a borrar estos, y voy a agregarlo justo por aquí. Bien. Entonces, si sentimos que necesita mucho más espacio, podemos darle más o podemos redimensionarlo Depende totalmente de nosotros. Siento que esta es una tarjeta importante. Entonces esto es algo a lo que podemos darle mucho más espacio . Entonces vamos a ver. Solo tenemos que cambiar el tamaño de esto realmente. Así que podemos simplemente cambiar el tamaño de esto en este de aquí o podemos expandirlo totalmente hasta usted Pero sí, intentemos expandirlo un poco. Esto se ve mejor. Te muestra la longitud, las diferencias drásticas mucho más Y así es más o menos como se vería. Ahora que lo estoy viendo desde aquí, siento que esto podría ser un poco demasiado pequeño, pero estas son las cosas que tenemos que seguir haciendo una y otra vez, revisando otra vez y viendo, ho, el texto aquí es demasiado pequeño. Tenemos que hacerlo más grande, hacer que toda la tarjeta tal vez sea más grande. Pero como dije, esto es más, parte del perfeccionamiento de tu diseño en el camino, y esto es algo que vamos a hacer Todo bien. Viendo la siguiente lección. 8. Creación de un menú desplegable de filtro: Bienvenido de nuevo. Entonces desde la última lección, agregué algunas cosas por mi cuenta solo solo para llenar algunos vacíos, rellenar algunos detalles, algún trabajo de jardín que sería demasiado aburrido para ti. Pero básicamente, solo llenó estas tarjetas, ¿verdad? Entonces obtienes el concepto. Solo haces un par de gráficas, anotas los meses, y, ya sabes, yo solo llené algunos vacíos como dije. Entonces ahora tenemos visión general de tareas, KPI del equipo, horas extras de rendimiento ya sabes, largo de meses o años o lo que sea que sea Y entonces tenemos carga de trabajo. Entonces, aunque lo que es realmente interesante, Lo siento, borre eso. Una cosa que también he hecho es que en realidad he cambiado el tamaño de los elementos de las cosas Probablemente lo notaste para hacer más legible el texto porque tenemos mucho espacio, entonces, ¿por qué no usarlo Al mismo tiempo, no queremos abrumar a la gente con demasiada información, demasiado texto Entonces, ¿por qué no solo hacer el texto un poco más grande? Entonces como puedes ver ahora, también, algunas de las cosas son grises mientras que otras son negras para llamar más la atención. Aquí quieres saber cuántas tareas tienes entonces aquí, sigue siendo visible, pero se le da un poco menos de importancia. Pero al final del día, cuando alguien va a leer 24, van a leer urgente después de eso y entender, Bien, 24 tareas urgentes, y así sucesivamente. Pero abusar del negro puede llevar a que la gente tenga tanta información para asimilar psicológicamente que se equivoque con su percepción, trate de no hacer Pero en esta lección, lo que vamos a hacer como adición es que vamos a agregar un botón o tal vez múltiples botones que nos ayuden a filtrar según el tiempo. Porque ahora mismo no está claro. ¿Es este mes, esta semana? Este año, quiero decir, ¿de qué estamos hablando del resumen de tareas? ¿De qué estamos hablando en términos de KPI de equipo? Tenemos que tener un marco de referencia para poder comparar. ¿Estamos comparando esto con el mes pasado o el año pasado? Eso va a ser muy diferente. La respuesta va a ser algo completamente diferente en base a qué pregunta nos estamos haciendo. Sigamos adelante y creamos un botón muy sencillo que nos permita filtrar el tiempo. Lo que vamos a crear es esencialmente un desplegable. Así que al igual que crear cualquier botón, vamos a empezar añadiendo elemento de texto, y vamos a escribir aquí semana o semanalmente o tal vez, digamos, esta semana. ¿Bien? Ahora vamos a mantener turno en A, y eso nos va a permitir hacerlo A. Va a hacer que sea un diseño automático, y luego vamos a elegir aquí el mismo color de texto aquí. Vamos a darle el mismo color. Y lo que vamos a hacer es que vamos a conseguir la herramienta Pluma y vamos a crear esta pequeña flecha. Vamos a darle vuelta cero como radio de esquina, y le vamos a dar el mismo color. Ahí vamos. Ahora vamos a darle a todo el botón un poco de radio de maíz. Cuál es el radio del maíz que tenemos aquí. Eso son 24, entonces este 16. A ver que no tiene que ser lo mismo. Podrían ser ocho también. Entonces ahora tenemos que tomar una decisión. Vamos a pegarlo aquí, antes que nada. Voy a pegarlo aquí. Entonces ahora mismo, es solo blanco, y como puedes ver, no se ve tan blanco. Se ve un poco gris. Y la razón es porque no tiene la misma sombra. Entonces ahora tenemos múltiples opciones. O vamos a agregar esta sombra aquí, y entonces se puede ver ahora que tiene una dimensión tres D a ella, y luego tiene el mismo aspecto, pero entonces tenemos un riesgo aquí. Y el riesgo es decir, que realmente no sabemos si esto porque estas tarjetas no se pueden hacer clic en y de sí mismas No se puede hacer clic en la tarjeta en sí, pero hay que hacer clic en estos tres puntos o algo más. Si hay un botón dentro, puedes hacer clic en él. Pero esto debería ser clicable y eso debería ser un poco más claro Yo diría, personalmente, siempre es mejor ir con un estilo un poco diferente. Esto podría estar dando una sombra más fuerte. ¿Correcto? Pero entonces, como que te pierdes el look. Lo que personalmente diría es quizás agregar un poco de esquema como este, un trazo, tal vez incluso eliminar completamente el relleno, eso depende totalmente de ti. Esto nos permite darle un aspecto diferente, y este aspecto diferente puede ayudarnos a que sea identificable. Entonces veamos qué podemos hacer con el botón. No queremos que el trazo sea demasiado grueso, y tampoco queremos que sea demasiado en el fondo, tampoco. Entonces como es ahora, creo que esto es lo suficientemente bueno, diría yo. Pero ahora mismo lo que está pasando, sin embargo, es que aquí estamos teniendo como una zona muy vacía . Está muy vacía. Y siento que deberíamos llenarlo. Entonces, la forma de hacerlo es quizás agregar un título. O sea, es una cuestión de ¿en qué página estamos? Bien, estamos en flodesk.com. ¿Cuál de estos artículos, proyectos de dashboard, en qué página estamos? Entonces por eso es importante copiar y pegar este título y agregar un título aquí y decirle a la gente, oye, ahora mismo, estamos en esta página, y es importante que sea un título más grande que los demás. Tenemos que tener alguna jerarquía. Entonces aquí yo diría tablero, ¿verdad? Así que simple ahora mismo, solo lo estamos manteniendo muy simple y estamos poniendo eso. Ahora, ya tenemos este botón. Está diciendo esta semana, esto es genial. Yo continuaría diciendo que sería aún mejor si agregáramos más opciones de filtro. Entonces estamos filtrando el tiempo. ¿Qué podríamos también estar filtrando? ¿Tal vez un equipo de diseño específico? Tal vez. A lo mejor no estoy seguro de que podamos estar filtrando porque quiero decir, a lo mejor tienes varios equipos o varias secciones dentro de tu equipo. Entonces tienes el equipo de diseño o la sección de diseño, la sección de programación, y demás. Todo eso podría integrarse, pero eso es algo que me voy a dejar para más adelante. Ahora mi pregunta es, Bien, entonces tenemos este botón que filtra las cosas según semanas o meses y demás ¿Deberíamos estar haciendo uno específicamente para cada tarjeta? Porque esto es algo que otras personas han hecho. Aquí tienes semanalmente. Así que tarea continua, puedes filtrarlos semanalmente. Y aquí tienes las estadísticas de este proyecto. Puedes filtrarlo por sí solo, o puedes filtrar las tareas diarias por tu cuenta. Y lo que estoy notando es que muchos de ellos confían en hacer las cosas por separado para cada tarjeta Pero para ser honestos, creo que la forma que lo hicimos tiene más sentido porque entonces tienes un botón que lo cambia todo en lugar de tener que cambiar todos y cada uno. Como, ¿y si quiero ver nuestras estadísticas para todo el año? ¿Tengo que cambiar todas y cada una de ellas? Eso no tiene sentido. Pero voy a seguir adelante y cambiarlo ahora y decir este año, ¿de acuerdo? Voy a alinearlo a la derecha. El motivo es porque tenemos este por aquí y te muestra varios meses a partir de principios de año. Yo diría que este año mucho más sentido en este contexto. Entonces, mantengámoslo así. Si queremos, podemos incluso un poco más grande, ver si eso funciona. Para ser honesto, no lo prefiero. Todo bien. Ahora, por supuesto, tenemos que asegurarnos de que nuestras cartas también estén alineadas. Veo que uno de ellos aquí se movió de alguna manera, y sucede muy a menudo que como actualmente estás diseñando, mueves las cosas sin prestar atención, así que asegúrate de no estropearlo o en el mejor de los casos, tal vez solo usa el diseño automático. Realmente te hace la vida mucho más fácil. Entonces ahí lo tienes, acabamos de crear un botón como un filtro, y nos ayudó a hacer que el diseño sea más fácil entender y también ajustable. Bien, así que ahora hemos creado este botón, pero necesitamos la funcionalidad desplegable para funcionar realmente, para poder ver y entender de qué se trata todo esto. Y la forma de hacerlo es que vamos a seguir adelante y ponerlos en un diseño automático por ahora, y luego vamos a crear otra variante. Y esta variante debería incluir diferentes opciones. Voy a esconder esto ahora mismo. Voy a esconderme, voy a ocultar este error de vez en cuando voy a traer esta copia y pegarla, pero voy a hacer la dirección vertical, copiar pegar, copiar y pegar. Ahora tenemos esta semana y luego va a ser este mes. Uy. Vamos a asegurarnos de que todo esté alineado a la parte superior izquierda y luego vamos a decir esto aquí. Y esto, no lo sé, o el año pasado. Bien, entonces vamos a tener todas estas opciones. Y lo que vamos a hacer es que lo vamos a prototipar para que cuando hagas clic en él, vaya a cambiar al otro usando smart animate Y cuando hagas clic en cualquier cosa aquí, va a volver. Ahora, normalmente, debería elegir uno, ¿verdad? Debería escoger esta semana, este mes, y cambiaría. Pero ahora mismo, solo lo estamos manteniendo simple, así que no debería cambiar. Entonces veamos cómo se ve esto ahora mismo. ¿Ves? Yo se extiende. Pero el tema es, es ver a través. Entonces lo que vamos a hacer es que lo vamos a hacer colorido una vez que hagas clic en él y veas cómo se ve. Bien, eso no está nada mal. Das click en él y te muestra, este año, este mes, sí. Bien, ahora tenemos este menú desplegable. Puedes editarlo un poco. Yo hice la fuente un poco más grande para que se pueda leer más fácilmente, y voy a venir aquí y también darles un poco más de espaciado entre sí y ver cómo se ve eso. Sí, esto es un poco mejor. Y se puede trabajar con algo como esto. Así es como básicamente creas un botón de filtro desplegable Gracias por ver. En la siguiente lección, estaremos creando las tarjetas de tareas y trabajando en este panel aquí mismo. 9. Diseño de las tarjetas de tareas.: Así que sigamos adelante y creamos algunas tarjetas de tareas. ¿Bien? Entonces va a ser en esta sección principalmente. Podemos seguir adelante, copiar este texto, llevarlo a este marco, y tareas. Entonces ahora tenemos las tareas aquí. Estoy pensando que sería bastante agradable básicamente si hiciéramos diferentes categorías. Entonces podemos decir tareas urgentes o algo así. Y entonces podríamos tener tareas más nuevas, algo por el estilo. O eso o podríamos tener tareas y tú podrías ordenarlas. En realidad, esa podría ser una idea más agradable. No lo sé. Eso lo decidiremos en un momento. Pero ahora mismo, sigamos adelante y creemos las tarjetas generales. Así que vamos a crear algunas tarjetas e intentemos asegurarnos de que estas tarjetas sean más o menos compactas. Queremos agregarles alguna información pero no exagerar. Así que estoy copiando el estilo de aquí para allá y ya sabes, vamos a tratar de averiguarlo de alguna manera, para crear un diseño muy bonito sin exagerar, ¿de acuerdo? Entonces ahora, toda la idea es que deberíamos tener un título, y, ya sabes, el título es lo que realmente es la tarea. Y en este caso, la tarea podría ser algo muy sencillo. Podría ser roll ups de diseño. Lo interesante es, ya sabes , la tarea podría decirlo todo. Podría decir que diseñan roll ups para la Feria de Chicago, ¿verdad? Vamos a tener una feria en Chicago. Se llama la Feria de Chicago o tal vez haya una feria en Chicago y vamos a diseñar los roll ups para ello. Pero en lugar de hacer un título como este, podríamos permitir que básicamente, yo solo voy a quitar este marco. Voy a decir roll ups de diseño. Y luego como una especie de comentario, va a decir una información extra va a decir Feria de Chicago. Bien. Y entonces también va a dar una fecha. Eso es lo que está bien. Lo estamos desglosando en lugar de solo tener una pieza de información, solo dividirla en múltiples capas diferentes, digamos. Voy a copiar esto y voy a agregar voy a agregar un icono aquí y va a ser reloj. Entonces vamos a juntar estos, y luego vamos a copiar esto. Esta va a ser la hora o la fecha. Y podríamos decir el 21 de abril, eso en realidad es demasiado tarde. Digamos el 21 de julio y luego vamos a tener información extra aquí. Qué es esta información, no lo sé. Podrían ser accesorios para que pudiéramos encadenar. No estoy segura. A ver. Sí, Link debería funcionar. Sí. Ahí vamos. Vamos a hacer esto también sólido. Vamos a decir que hay dos apegos o algo así, y esta es la tarea. Intentemos descomponerlo un poco. Entonces también podríamos mostrar quién se suma a esta tarea. Podríamos hacer esto de la siguiente manera. Y sólo para recordarles, esto también se basa en lo que he visto hacer otras plataformas. Esto no es nosotros reinventando la rueda . Así que tenlo en mente. No estamos haciendo todo completamente nuevo desde cero, sino haciendo uso de las experiencias que otras personas han hecho. Creo que esta es una configuración muy agradable que tenemos aquí. Podríamos cambiarlo un poco, pero creo que esto es muy agradable. Podríamos intentar que tal vez las cartas tengan un poco menos de radio de esquina porque se siente exagerada Pero también es importante para la consistencia, así que no estoy seguro. Retrocedamos un poco, a ver cómo se ve. Porque cuanto más radio de esquina tengas, menos información podrás caber en estas cosas. Pero creo que eso está bien. Ahora tenemos esta configuración así, y creo que esto es realmente genial. Voy a convertir esto en un componente y voy a decir boleto. Este es nuestro ticket o nuestra tarea, y lo voy a agregar aquí y lo voy a copiar y luego voy a poner estos en maquetación automática. O bien podríamos hacerlo de esta manera donde tenemos estas tareas urgentes y están organizadas así y luego podríamos tener otras tareas aquí. Organizado así. Entonces podríamos agregar algunas tareas más o podríamos hacerlo como filtro. Hay una opción de filtro, pero creo que esto es más agradable y acerquemos esto un poco más Ahí vamos. Está muy lleno. No voy a mentir. Sí tengo esa sensación de que está muy lleno y tal vez no está centrado. Sí, eso es cierto. No está centrado. Pero sigue siendo importante. Te da una buena visión general de lo que está pasando. Lo que es muy importante es que también deberíamos poder colapsar este menú. Eso es algo a tener en cuenta también. Ahora lo que deberíamos poder hacer también es rellenar los detalles, y eso es algo que voy a hacer solo para que no tengas que verme hacer este trabajo servil Pero este es ahora mismo nuestro sistema de tickets. Se ve muy bien. Está limpio, y da suficiente información sobre lo que estás haciendo la tarea, dónde va a estar o qué proyecto, digamos, para qué proyecto exactamente, tal vez incluso podamos subrayarlo para mostrar qué proyecto es, y luego puedes pinchar sobre él O podríamos cambiar estos. Eso es en realidad tal vez hagámoslo. Entonces tenemos una jerarquía un poco mejor aquí. ¿Ves? Entonces sí, tienes como Chicago Fair, diseñas roll ups y así sucesivamente. Y entonces queda claro para qué proyecto es este, ¿cuál es la tarea real? Cuándo vence y cuántos archivos adjuntos, ¿tiene información sobre esto, comentarios, lo que sea? Y entonces, ¿a quién se le asigna realmente esta tarea? Entonces yo diría que esta es una muy buena versión resumida de un boleto, y definitivamente deberíamos tener una versión más ampliada del mismo. Pero por ahora, esto es suficiente. En las próximas lecciones, también trabajaremos en cómo colapsar este menú o este panel de sección lateral así como este. Esto es definitivamente algo que vamos a hacer en las próximas lecciones, además de agregar más prototipos, agregar un poco de interacción y micro interacciones a este diseño Muchas gracias por ver, y nos vemos en la siguiente lección. 10. Creación de tablas, gráficos: Bien, entonces tenemos un diseño muy bonito que va hasta ahora, pero me gustaría tomarme un momento para mostrarles cómo he creado estos gráficos y cómo pueden recrearlos. Entonces, en esta lección, tendremos como un ejercicio de recrear estas gráficas. Empecemos. Ahora bien, el primero que hicimos juntos, así que ya tienes una idea de cómo lo hicimos. Ahora, los otros los vamos a llevar a un lado y vamos a tratar de recrearlos uno por uno Entonces aquí tenemos algunos KVIs. Sólo voy a copiarlo y pegarlo y después voy a eliminar esta parte. Cómo funciona esto es muy, muy fácil, y deberías tratar de pensarlo en los términos que te voy a decir ahora, ¿verdad? Hay muchas formas diferentes en las que podrías recrear estas Pero la forma en que lo hago o la forma en que te voy a mostrar cómo hacerlo es, en mi opinión, la más limpia porque mucha gente diseña cosas, sobre todo cuando se trata de diseño gráfico, sobre todo con otras aplicaciones que no son Figma, en las que hay pequeños píxeles que van mal El icono va un poco a la derecha a la izquierda, el espaciado está un poco fuera. Todo eso son cosas que vamos a evitar, vamos a tratar de evitar todas estas haciéndolo de esta manera. Así que lo primero que vas a hacer, me gusta empezar con los íconos, ¿bien? Entonces sólo voy a poner un elemento de texto aquí. Voy a copiarlo. Este va a ser nuestro texto, las actas, y este va a ser nuestro icono. Voy a escribir aquí, increíble. Impresionante, fuente impresionante siete gratis. Entonces voy a escribir el nombre de este icono, que es cronómetro Vamos a hacerlo sólido porque algunos de los iconos solo están disponibles en forma sólida en la versión gratuita. Así que vamos a hacer eso, y así, lo conseguimos de inmediato, ¿verdad? Entonces, en lugar de poner un círculo detrás de esto, lo que vamos a hacer es hacer un autodiseño A estas alturas, deberías haber adivinado que realmente me encantan los diseños de automóviles porque facilitan mucho las cosas En lugar de preocuparte por dos elementos, solo tienes un cuadro, ¿verdad? Un marco e incluye la cosa, ya sabes, incluye el icono justo en el medio de la misma, ¿de acuerdo? Ahora vamos a darle un relleno. Ahora, el relleno ahora mismo no importa. Solo tiene que ser un color que podamos ver e identificar. Vamos a darle un radio de 50 o 100 esquinas redondeadas, solo para que podamos asegurarnos de que sea completamente redondo. Otra cosa es asegurarse de que el ancho y la altura sean los mismos. Aquí, puedes ver que no es un círculo propio, así que hagamos que ambos sean 36. Todo bien. Y así ahora es perfecto y asegúrate que este ícono también esté centrado, no a la izquierda. Ahora está perfectamente centrado, y ahora puedes determinar la cantidad de relleno que deseas. Entonces ahora mismo, puedes hacerlo con el relleno o simplemente puedes hacerlo por tu cuenta, asegúrate de bloquear la relación de aspecto. Entonces aquí, en lugar de trabajar con el relleno, solo puedes escribir en 40 y luego tienes más espacio. Podemos comprobar qué tan grande es la fuente aquí. Son 24, así que vamos a hacer 24 aquí, y podemos hacer este 45 y parece lo suficientemente cerca. Voy a hacer clic en I para tomar el color de aquí. Voy a elegir el icono y voy a tomar el color de este icono. Ahora tengo el texto. Aquí sólo voy a escribir 50 minutos, y luego tenemos este elemento aquí. Ahora, va a ser el mismo principio. Estoy copiando esto y estoy escribiendo 25%. Voy a hacer la fuente 12. Supongo que así de grande es. Entonces voy a hacer que sea un layout automático y estamos haciendo lo mismo. Darle un relleno, no importa. Hazlo 50, 100 y haz el relleno, cámbialo , cámbialo a lo que funcione para ti. Entonces tienes esto como un ícono. Voy a copiar esto. Voy a duplicarlo, increíble. Entonces vas a escribir flecha arriba y otra vez, hacerla sólida. Ahora tenemos esto aquí. Voy a hacerlo más pequeño, diez, y luego voy a hacer que el espaciado entre ellos más pequeño y el relleno también de derecha e izquierda. Entonces se parece más a eso. Ahora voy a dejar caer el color. Voy a elegir estos dos, y voy a tomar de aquí o simplemente puedo copiarlo de aquí porque es muy pequeño. Todo bien. Entonces ahora se ve muy similar. Ahora solo nos queda este título, así que vamos a copiarlo. Yo sostengo Alt, por cierto, mientras lo mueve, lo sostienes y lo mueves mientras sostienes Alt y solo lo duplicas, entonces voy a escribir tiempo promedio por tarea. Haz este 16, y luego roba el color de aquí. Bam. Ahora bien, este es un paso muy importante. Ahora tenemos un diseño automático aquí, un diseño automático aquí. Vamos a elegir todos estos en la misma fila y hacerlos un diseño automático para ellos mismos, para los suyos. Ahora toda esta fila está junta. Ahora podemos hacer el espaciado cuatro u ocho o lo que queramos. También puedes optar por acercarlos más el uno al otro. Sólo como una opción porque, ya sabes, la idea aquí está más cerca. Esto es texto. Entonces los 52 minutos están teniendo un incremento del 25%, y todo esto se relaciona con el cronómetro, que está relacionado con el tiempo promedio Entonces lógicamente lo conectas entre sí. No hace una gran diferencia porque el espaciado no es súper visible a simple vista, pero para un diseñador, es bastante visible. Entonces vamos a hacer de estos un diseño automático, ¿verdad? Entonces a las siete, no me gustan estos números desiguales, ya sabes, así que hazlo un ocho. ¿Por qué no? Entonces ahora lo tenemos y todo lo que necesitas hacer es simplemente duplicarlo, duplicarlo. Cambia el icono aquí, lista del portapapeles. Ahí vamos. Entonces con este icono, es estrella, y luego solo tomas la información, copiala, pegarla, copiarla y pegarla. Lo bueno es que no necesitas mover las cosas tanto porque hay un diseño automático, así que no necesitas mover las cosas para ello, y vamos a hacer esto. Tenemos que tomar este color de aquí, presionar I, tomar este color, y luego cambiar esto a eso. Bam, ahí vamos. Y asegúrate de que aquí tenemos este texto. Podemos extenderlo un poco. Podemos simplemente vamos a hacer clic aquí y luego se extiende. Entonces ahora elegiremos todos estos y los pondremos en un diseño automático. En vez de 19, voy a hacer 16. Te das cuenta aquí que hay un poco de diferencia. Así que lo puedes hacer es que puedes hacer doble clic y luego va a ser Hug, ahora tienes mucho más espacio. Voy a hacerla 24, hacerla 36, ver qué funciona para ti, y luego puedes colocarla en medio y bam, solo copiamos eso muy rápido, muy fácil. Se trata de entender desde dónde empezar. En lugar de hacer todos los iconos a la vez y luego todos los números, solo crea una mirada sólida. Cuando estés satisfecho con él, solo sigue duplicándolo y cambiándolo. Ahora pasando a la segunda. Voy a copiar, pegarlo igual que antes, y voy a eliminar esto así que la forma de hacerlo es bastante fácil. Vas a presionar O o elegir la herramienta ovalada y mantener presionada la tecla shift para asegurarte de que sea recta y que tenga la misma relación de aspecto. No es como extendido ni nada por el estilo. Entonces vamos a tomar este color. Ahora, copiar y pegar, lo copiamos y pegamos. Ahora voy a aguantar desde este punto, y voy a tomar un trozo del pastel. Entonces voy a dar click yo elijo éste. Ahora, enjuague y repita copiar y pegar. Yo voy a hacer esto. No tiene que ser tan exacto. Entonces lo mismo, copiar y pegar. Voy a darle más espacio. Después vuelve a presionar la herramienta óvalo O, hazla recta, manteniendo presionada la tecla shift, y luego tienes esto. Entonces obtienes esta imagen de algún lado, puedes simplemente copiar el relleno, copiar la imagen aquí, copiar la imagen ahí, y luego tomar los rellenos y aquí tienes un círculo con un.in él Lo que vamos a hacer es simplemente vamos a dar un relleno blanco y sólo vamos a añadir un signo de interrogación. Ahora te habrás dado cuenta de que esto no es perfectamente lo mismo. Solo estoy haciendo esto muy rápido. No tiene que ser exactamente del mismo tamaño, solo la misma idea. Ahora tenemos estos textos, y como puedes ver aquí, estamos trabajando de nuevo con diseños de auto. La forma de hacer esto es escribir a John 20%, y luego obtienes un óvalo muy pequeño y obtienes el color, los sostienes a ambos sosteniendo Mayús, y luego mantén presionados Mayús y A y ahora están en un diseño automático, y el espaciado es cuatro. Ahora mantén Alt mientras estás copiando. Ahora ponlos todos en un diseño automático y dales también cuatro o tal vez ocho y luego cambia los valores. Sólo copiar y pegar. Tenemos dos Johns, al parecer. Nosotros tenemos, no estoy seguro. John, Mary y Lawrence y luego pondremos a Lawrence ahí y asignaremos ahí, y tomaremos los colores. Laurence está aquí y Mary está aquí. Bam. Así como así, lo copiamos. Y así es como puedes crear un gráfico muy rápido. Ahora, por supuesto, puedes usar gráficos de otros programas, otros lugares puedes importarlo. Depende totalmente de ti, pero así es como puedes crearlo con Figma rápidamente, muy fácilmente A mí me resulta más fácil hacerlo Figma en sí, para ser honestos. Ahora llegando al último, este puede ser un poco complicado o puede parecer abrumador, pero en realidad no lo es. Entonces ahora lo estoy copiando y lo estoy poniendo aquí abajo y como siempre, solo borrándolo. La forma en que hago esto personalmente es que consigo la herramienta pluma y sostengo Shift para hacerlo recto. Yo lo traigo abajo. A donde quiero justo por aquí, y luego lo extiendo. Trato de asegurarme de que el espaciado aquí sea similar al de aquí. No siempre puedo ser perfecta. Asegúrate de que el trazo sea muy ligero porque esta información no es tan importante, estos ejes. Entonces tenemos esta línea genial. Esto puede ser un poco complicado. Vas a hacer clic aquí y luego vas a mantener el turno Solo para obtener un ángulo inclinado realmente agradable y luego vas a sostener y asegurarte de obtener una buena curva Entonces puedes ir a donde quieras. Por ejemplo, aquí, no tienes que mantener turno y luego extender hasta obtener una bonita curva igual, subir a donde quieras. Tú la traes aquí. Y luego otra vez, consigue esa curva. Básicamente es la misma idea, haga doble clic fuera de ella solo para asegurarse de que esto se guarde así. Puedes volver a esta primera y luego darle también una pequeña curva agradable desde el principio. Y ahora tienes un poco de color bonito. Ahora, voy a tratar de hacer esto con un color diferente sólo para mostrarte lo que hice aquí. Ahora estoy haciendo esto verde ¿verdad? Ahora bien, ¿cómo consigo este pequeño y bonito gradiente? Esa es una buena pregunta. Este es un estilo de diseño muy común, por cierto, por eso lo hago. La forma de hacerlo es que vas a copiar y pegar esta línea. ¿Bien? Entonces solo para hacértelo saber, esta no es una línea perfecta. Las curvas se pueden hacer mejor, pero está totalmente bien. Vas a dejar uno de ellos tal como está, y para el segundo , vas a hacer doble clic en él y luego vas a ver los puntos. Entonces vas a volver a la penol. Te vas a conectar aquí. Mantenga el turno para ir recto hacia abajo. Parece que nos perdimos la marca. Entonces lo vas a cerrar. Lo vas a traer aquí, cerrarlo , y ahí lo tenemos. Entonces ahora está cerrado. Ahora vas a quitar el trazo y vas a agregar un relleno. Pero en lugar de un relleno normal, vas a elegir gradiente y este gradiente va a ser lineal. Y debería tener más o menos el mismo color. Pero de abajo, le vas a dar 0% de opacidad y vas a darle a todo esto tal vez el 50% Entonces justo así ahora, tienes este pequeño gradiente agradable. Ahora puedes ajustarlo. Se puede hacer que sea 25%. Me parece que más ligero es mejor. Puedes hacerlo hasta el 10%, depende de ti, o incluso puedes hacer la línea en sí. La línea de arriba, puedes hacerla más brillante o más oscura o depende totalmente de ti. Pero creo que algo en el medio siempre es agradable. Voy a dar este 25% aquí y no se ve tan mal. Ahora bien, lo más importante es que esta parte está en la cima y esta parte está en la parte inferior. Por supuesto que puedes ajustarlo pero ¿cuál es el punto de hacer que se vea así? Se supone que retrata el aumento real o la cercanía al pico Se puede ver lo cerca que está. Aquí no está tan cerca porque no es tan verde. Aquí sí se acerca al pico, pero no tan cerca. Aquí se pone lo más cerca, por ejemplo. Entonces tenemos esta línea, esta línea te muestra dónde está el pico o el máximo. Solo vas a obtener la herramienta de línea, presionar en L o elegir la herramienta de línea desde aquí, y vas a mantener presionada la tecla Mayús y seguir recto. Ahora, bájala una muesca para acercarte a ella o llegar a ella, y vas a llegar a estas opciones. Ve a las opciones de trazo y en vez de sólido, vas a tener guión. Entonces puedes retocar aquí los guiones, así puedes hacerlos diez, por ejemplo, y luego tienes estos bonitos guioncitos y luego hacerlos grisáceos para que no queden tan claros porque no son claros porque no son Entonces podemos sumar los meses ahora. Primero empezamos con enero y lo que vas a hacer es que lo vas a traer aquí y sostener Alt y organizarlo no tiene que ser perfecto. Sólo debes saber cuántos meses necesitas. Entonces tienes uno, dos, tres, cuatro, cinco, seis, siete, uno, dos, tres, cuatro, cinco, seis, siete. Entonces voy a elegir todos ellos y ponerlos en un diseño automático sosteniendo Shift y A, y luego voy a extenderlo hasta el final. Entonces voy a elegir Auto. Auto se asegura de que el espaciado Automático sea automático para que todos estos lleguen al final del marco y el espaciado sea automático. Se extiende hasta aquí. Sólo voy a extender esta pequeña línea gris. Perdón por eso. Sólo voy a extenderlo un poco hasta aquí. Claro. Todo bien. Ahora vamos a cambiarlo y podemos escribir fb y luego vamos a enero, febrero, marzo, abril, mayo, junio, julio. No me juzgues, pero a veces necesito cantar la canción para realmente recordar el orden del mes es solo un mal hábito que tengo o no un mal hábito, solo algo que recogí y difícil de dejar ir. Ahora, nos estamos asegurando de que sea legible, así que está por debajo de esta línea. Entonces esta es la línea de accesibilidad, asegurándose de que haya suficiente contraste ahí lo tienes. Así como así, copiamos el estilo y ahora podemos retratar diferentes análisis, diferentes informes, y gráficos y tablas en Figma sin necesidad de una aplicación diferente ¿Es un poco duro? ¿Es rápido y es útil? Sí, definitivamente porque recuerda esto. O sea, puedes conseguir otro diseño, puedes conseguir otra mirada. Pero si en realidad estás diseñando un tablero, es muy importante diseñar el diseño. Estás haciendo el diseño. No tomes algo de PowerPoint o Excel o cualquier otro programa que tal vez esté desactualizado. Haz tu propio diseño, y esa debería ser la base. Así que pon en el trabajo, pon tiempo para crear realmente algo hermoso y que se ajuste a tu estilo y al estilo del diseño en el que estás trabajando. Muchas gracias por escuchar. Te veré en la siguiente lección. 11. y limpieza final de la interfaz de usuario.: Bienvenida de nuevo. En esta lección, vamos a echar un mejor vistazo al diseño que hemos hecho hasta ahora, aunque estemos muy orgullosos de ello, pero vamos a tratar de pulirlo un poco. Una cosa que me salta justo es que de alguna manera, no hay tantos colores, lo cual veo que es algo positivo. No queremos abrumar a la gente con demasiados colores. Tenemos muchos blancos, grises, sombras, y así sucesivamente Hacemos un gran uso de estos elementos. No obstante, al mismo tiempo, estamos utilizando muchos colores muy brillantes como el morado, el azul, el amarillo y el verde. Y aunque sean útiles de alguna manera, por ejemplo, tienes el verde aquí indicando un aumento, tienes el rojo indicando una disminución, y luego tenemos este sistema de color también con en pista retroceder y precaución. Todas estas etiquetas son útiles. No obstante, en otros lugares como aquí, por ejemplo, sólo nos ayudan en el sentido de que nos muestran que estos son valores diferentes, por ejemplo, urgente es diferente a hacer, atascado, terminado, y así sucesivamente. No obstante, hay una pregunta, ¿tienen que ser tan brillantes? ¿Tienen que asumir tanta carga cognitiva? Porque ahora mismo, ya sabes, me están llamando la atención y estoy mirando directamente aquí y aquí. Estas son solo algunas de las cosas que me gustaría mejorar en nuestro diseño. Entonces comencemos con eso en realidad. Se ve genial, pero ¿qué podemos hacer al respecto? Hay diferentes posibilidades de lo que podríamos hacer. Ahora bien, una cosa que podríamos hacer al respecto es que podríamos intentar usar un sistema más lógico, digamos. Entonces en lugar de solo usar los colores aleatorios o no realmente aleatorios, pero son los colores de la marca. En lugar de eso, podríamos tratar de utilizarlos en un sentido más ligero. Entonces usando este morado, tal vez podríamos usar una versión más ligera de la misma. Entonces de alguna manera, no lo quitamos completamente, sino solo para que sea más ligero. Algo más como esto es de lo que estoy hablando. Aún puedes diferenciarlos, pero no son tan brillantes. No están en tu cara tipo de brillante. Me parece que eso es mucho más agradable. Puede que no sea tan genial en cuanto al diseño, pero ocupa menos de la carga de trabajo cognitiva, en tu cerebro, no lo estás mirando directamente. Entonces la carga cognitiva es menor. No te está esforzando los ojos también porque vas de blanco a morado muy brillante, azul brillante, y verde y amarillo, pero ahora es un poco más suave en el ojo, diría yo Esta es una forma en la que podríamos hacer esto. Otra forma es usar un sistema lógico porque tenemos urgente que hacer pegado terminado. Ahora, terminado tiene sentido porque es verde, pero también tenemos urgente eso es más hacia el morado. Podemos hacer que vaya a rojo. Eso es un poco más lógico. Tiene más sentido que urgente sea rojo porque usamos eso por todas partes, por ejemplo. A la hora de hacer, pegados y terminados, estos colores, en realidad no siempre tienen sentido. Podría ser esto o simplemente podría ser gris, para ser honestos, usando el gris, estamos soltando un color que tenemos aquí, pero sí nos ayuda un poco, y luego ahora nos queda el sistema de semáforos que hemos usado antes con estas etiquetas, lo que tiene mucho más sentido porque tienes urgente, que es rojo, hacer es más o menos neutro. Es decir, es algo que hay que hacer, pero no tiene una indicación. No te estás volviendo a caer en ello, y no lo estás haciendo muy bien en ello, es solo para hacer. Entonces te has quedado atascado. Esto es amarillo, lo que significa que estás a mitad de camino, necesitas llegar a algún lado No lo has completado y no has fallado y tampoco es solo para hacer, está en algún lugar en el medio, dejado en el medio. Entonces puedes intentar resolverlo a partir de ahí. amarillo tiene sentido porque el amarillo siempre es uh, sabes, indeciso en el medio en alguna parte Ya sabes, al igual que con los semáforos, el amarillo está diciendo, oye, casi va a ser rojo. Pero aún no lo es. Entonces tal vez aproveche su oportunidad, tal vez conduzca rápido, tal vez despacio. Entonces aquí necesitas algo así es básicamente decir, necesito tu atención. Tienes que hacer algo conmigo. Y luego terminado es sólo decir verde. Esto es verde, es positivo. No hay necesidad de pensarlo, no hay necesidad de adivinarlo en segundo lugar. Ahora, otra idea es hacer terminado también algún color neutro. Pero como ya tenemos el gris, eso sería un poco confuso ya que no habría mucha diferencia, o podríamos hacerlo más hacia azul porque este es más o menos el color que tenemos aquí. Pero creo que el verde es muy bueno. Dependiendo de los propósitos, incluso podrías pensar eliminar completado en lugar de tenerlo. La idea detrás de eso es ya sabes, no necesitas saber cuánto hay terminado. Necesitas saber cuánto queda por hacer. Pero eso realmente profundiza en la UX. Yo personalmente, no lo creo. Creo que es bueno saber qué has completado, en qué has hecho un gran trabajo y qué has aclarado. Si debería ser un verde brillante, eso está a debate porque creo que eso te está quitando algo de energía ahora mismo. Y no es exactamente lo que quieres estar haciendo. Pero creo que por ahora, optimizamos esto y se ve mucho mejor. Todo bien. Entonces, ¿qué más podemos hacer aquí? Entonces creo que los colores y las fuentes están bien. No están mal. No son nada. Pero cuando se trata de aquí, siento que el esquema de los grises es demasiado neutral para mí. Estoy pensando que tal vez haya una manera de cambiarlo. No estoy segura. Vamos a probar las cosas. Entonces solo estoy tratando de hacer pck colores aquí y darle un poco más de identidad No sé si podemos hacerlo porque tampoco queremos estropear las cosas al mismo tiempo, también creo que aquí no hay mucho contraste. Intentemos conseguir un poco más de contraste. El círculo aquí no es tan importante, pero el icono sería genial si pudiéramos hacerlo si es más comprensible. Creo que esto es más agradable. Creo que esto le da un poco más de identidad. Y si, es un cambio muy menor, nada demasiado grande. Entonces sí, creo que esto es bueno y tenemos buen espaciado. Las cosas están funcionando en esta área. Ahora, venir a aquí, esto es un desastre que hay que resolver. En lugar de seguir adelante y hacer clic en cada elemento, solo voy a filmar aquí los colores de selección y voy a cambiar las cosas o intentar al menos. Siguiendo el mismo principio, una cosa que podríamos hacer muy fácilmente es simplemente elegir colores más claros, más colores pastel. Entonces tenemos este azul aquí, muy ligero. Yo elegiría hacer esto ahora gris, y entonces vamos a usar esto aquí como el azul claro, tal vez. Todo bien. Ahora voy a hacer esto un poco más ligero. Y cuando se trata del amarillo, veamos qué podemos hacer. Volvamos a los colores de selección. Creo que les dije chicos que voy a hacer eso y luego lo metí a la pata y no lo hice bien, así que solo voy a arreglarlo ahora mismo Bien. Ahora vuelve. Con este morado, vamos a elegir algo más ligero pero no demasiado ligero. Y luego tenemos el amarillo. Parece que tenemos dos amarillos diferentes. Entonces esto se ve quiero decir, es más suave a los ojos, pero para ser honesto, no estoy tan contento con eso. No se ve tan genial. Veamos qué podemos hacer al respecto. Entonces tal vez en vez de tener un relleno, tal vez podamos tener una especie de trazo cuando se trata de esta área vacía. Podría hacer lo mismo aquí y sólo darle un trazo. Y cuando se trata de estos colores de vuelta? ¿Deberíamos traerlo de vuelta? ¿No deberíamos? Podemos hacerlos volví a cometer el error. Hay que hacerlo desde los colores de selección para poder cambiar el círculo correspondiente con la rebanada, en lugar de tener que hacerlo dos veces. Estoy tratando de asegurarme de que estos colores también sean reconocibles aquí y también sean diferentes entre sí Ahora, estaban demasiado cerca. Entonces vamos a ver. Ahora, idealmente, ya sabes, lo que estamos haciendo en este momento es que estamos una especie de estimación, y estamos viendo lo que funciona mejor, pero idealmente no deberías estar haciendo pero idealmente no deberías estar haciendo esto así al azar, sino hacerlo al tener realmente configurado un buen sistema de diseño con una guía de estilo y colores definidos Pero no tenemos eso, así que estamos haciendo las cosas, ya sabes, rápido y sucio y, ya sabes, tratando de que las cosas se resuelvan en el alternativamente, lo que me gusta hacer a veces es que me gusta agregar colores similares para que tengas algo como esto. Creo que es bonito porque a pesar de que ahora tenemos dos colores, pero le da más identidad o más carácter. Pero lo que notas es que podría ser problemático porque entonces John y Mary tienen colores muy similares. Entonces puede ser complicado. Lo que posiblemente podríamos hacer es cambiar a John y Mary. Entonces la forma de hacerlo es, solo voy a copiar esto y lo voy a pegar aquí, y luego voy a elegir esto y voy a abrir mi portapapeles Entonces ahora hay algo así como en medio de ellos, hay una especie de búfer. Este rosa está en el medio. Entonces ahora puedes diferenciarlos un poco. No son tan claramente diferentes. Pero siento que aquí es una paleta más armoniosa. No lo sé. Siento que me gusta más. No es usar los amarillos, no es usar otros colores, pero creo que está bien No tenemos que usarlas por todas partes. Y ten en cuenta, solo estoy teniendo tres, pero lo ideal sería que tuvieras un cuarto, un quinto, un sexto dependiendo de lo grande que sea tu equipo, y luego usarías más amarillo. A lo mejor presentarías naranja, rojo, lo que sea. Solo asegúrate de tener algunos colores al principio y luego vas a seguir expandiéndolos a otros colores diferentes. Pero creo que podemos vivir con ello o tal vez podamos hacer algo como esto. A ver. Creo que esto es más agradable. Ahora estamos usando este gris grisáceo o azulado, que está funcionando o gris violáceo , se podría Ahora bien, esto está funcionando, hay una conexión entre esta zona, esta área y este color, y ahora un poco más aquí. Esto es más en el lado más oscuro. Ahora cuando se trata de esto, me gusta mucho esto, pero hay algunos ajustes menores que podríamos hacer. Pude ver que esta línea viene aquí, así podríamos tirarla a la espalda. Ver. Solo tírala aquí y sigue siendo transparente, así que podemos levantarla. Ahí vamos. Esto es mucho más agradable y podríamos ver lo mismo aquí. Hay un poco de superposición, vamos a quitar eso y vamos a ver. También lo derribaremos. Otra cosa que podríamos hacer es que también podríamos abrir este marco. También podríamos agregar un círculo para simplemente indicar el punto más alto. Los círculos siempre son agradables con gráficas para indicar ciertos puntos importantes o periodos de tiempo o tal vez podrías ir con el ratón y te mostraría diferentes puntos y lo que sea y sus valores. Aquí tenemos el punto más alto. A lo mejor deberíamos destacar el punto más bajo, algo así. A pesar de que sería bueno indicar que este es el punto más bajo. No estoy seguro si podríamos hacer esto el color. Bien, entonces creo que deberíamos poner estas líneas encima de esto y luego bien. O podríamos asegurarnos de que esto no sea transparente, fueron los fuerzos Aquí hay un trazo ¿Bien? Eliminaremos este relleno y nos aseguraremos de que esté al 100%, y solo tendremos que averiguarlo, solo vamos a escoger el color de sí mismo y hacerlo al 100%. Ahí vamos. Ahora no tenemos tema de transparencia, y es el mismo color que tenemos. Todo bien. Ahora esto se ve un poco más bonito, aunque siento que el rojo es demasiado , redefinamos Bien. Creo que voy a traer esto de vuelta aquí. En vez de gris, creo que optaré por usar el mismo color para escoger el color de aquí. Ahora tenemos el punto más bajo y el punto más alto. Podrías indicar cuál es este número. No estoy seguro de lo que se supone que indique el rendimiento aquí o cómo se mediría, pero digamos que tenemos el 89% aquí. Esto es un alto, 89%, y este es un bajo 74 74%. Al igual que tirar algunos números por ahí. Pero ahora se puede ver que las cosas van más juntas porque ahora tienes algunos números, algunas indicaciones, entiendes que este es el punto más bajo, este es el punto más alto, esto es lo mucho que era y algunas indicaciones aquí y allá para hacernos saber que estas gráficas en realidad están teniendo algún sentido. Yo diría que también sería genial aquí si agregáramos un eje Y. Entonces básicamente haríamos eso sumando algunos números. Entonces tomemos el color de aquí. Entonces alinea esto a la derecha, y diremos que esto es del 90%. Voy a tomar toda esta gráfica a la derecha. Nosotros elegiremos todos estos. Los pondremos en maquetación automática y luego se extenderán. Entonces vamos a ver que esto es 74%, esto debe estar en alguna parte 80%. A lo mejor nos exageramos con los números. Veamos qué podemos hacer al respecto. Estira esto por aquí. Ahora podemos ver si esto fue del 70%, tal vez borramos esto también. Esto rondaría el 74%. Y entonces esto básicamente sería 79. Entonces ahora tenemos el eje Y, y nos dice que también debemos preferiblemente, también deben ser etiquetados. Entonces esto debería decir, esta es la actuación, este es el momento. Pero aquí, en este caso, tiene sentido, estos son los meses, entonces está claro y aquí tienes el porcentaje. Pero deberíamos cuando hagas clic en él, te debería decir, bien, así es como medimos el porcentaje. Pero aquí no somos matemáticos, no somos estadísticos Nuestro trabajo no es averiguar cuál es la mejor manera de medir el rendimiento a lo largo del tiempo o lo que sea o la productividad, sino que solo estamos tratando de graficarlo. Por lo general, deberías tener un número adecuado en alguna parte. Acabo de darme cuenta de que estos no están dentro de este grupo, así que sólo voy a insertarlos en el grupo, colocarlos correctamente. Bien. Ahí vamos. Creo que esto es lo suficientemente bueno. Bien, entonces ahora solo cambiamos esto. Ahora, pasando a otros aspectos. Entonces tenemos estos botones aquí, tenemos las notificaciones. No quiero cambiar demasiado. No quiero pulir demasiado porque eso también puede ser contraproducente Otras cosas que podríamos hacer, podríamos jugar con el espaciado aquí con el relleno. Siento que a lo mejor ponemos demasiado acolchado. Pero eso es por supuesto, depende de tu diseño. Entonces creo que tal vez podamos hacer estos más pequeños. Mantenga el control, y luego podrá recortarlo. Bien, entonces ahora tenemos más espacio. Guardamos un par de píxeles, lo que nos ahorra mucho más espacio. Y cuando se trata de esto aquí, una cosa que me molesta de ello es que no se puede decir dónde termina. Ya sabes, es sólo blanco. Entonces estoy pensando que tal vez podríamos darle algo de sombra. Entonces veamos cómo podemos hacer esto porque esto puede ser un poco complicado. Entonces si le damos 24 desenfoque y luego vamos a comprobarlo. Y el tema principal que sucede Whoops. Bien. Es que puedes ver la sombra desde arriba, que es algo que definitivamente no quieres. Entonces para contrarrestar eso, voy a darle, voy a hacer la Y 24 y luego hacer todo esto tal vez 15% Entonces veamos cómo se ve ahora mismo. Bien, esto es realmente genial. Ya puedes ver porque la sombra va mucho abajo, se mezcla, así que no parece que esté separada de aquí, pero hay suficiente sombra para mostrarte que este es un menú lateral, y diferencia este menú de los contenidos de la derecha Entonces esto es realmente genial. Pero una cosa que todavía me molesta esto es el espaciado, tal vez Déjame sostener Control Alt A para editar todas las instancias, diferentes versiones del mismo. Estoy editando tanto aquí como allá al mismo tiempo. Voy a disminuir esto y ver cómo se ve. Lo que me molesta es que cuando resaltas, aquí hay mucha diferencia A lo mejor lo que podamos hacer es que voy a volver a controlar la Alt A, así que elijo todas estas. A lo mejor básicamente puedo agregar más relleno. C. Antes de irme, voy a regresar. Voy a asegurarme, esto va a ser difícil. Todo bien. Reconozco que va a ser difícil. Voy a hacer que sea 16 por 16. Ahora voy a escribir 53 y voy a hacer que quede bloqueada la relación de aspecto. Bien, o en realidad, voy a quitar el registro y voy a hacer lo mismo aquí, voy a hacerlo. ¿Cuánto fue eso? 53. Todo bien. Entonces ahora veamos cómo se ven. Ahora, deberían ser mucho más fornidos, pero veo que aquí no han cambiado Eso significa que estropeamos demasiado con las instancias A veces eso sucede si cambias manualmente las instancias. Así que ahora sólo voy a cambiarlos manualmente aquí. 53. Ahora vamos a ver. Entonces los botones son mucho más grandes, lo que nos permite elegirlos mucho más fácilmente sobre todo porque no tenemos muchos artículos, funciona bien. Ahora podemos volver atrás y hacer que el espaciado tal vez sea incluso menos cuatro, ¿verdad? Entonces ahora están más cerca el uno del otro. Y así cuando pasas el cursor sobre uno de ellos, hay muy poco espacio entre ellos, que creo que así es como debería ser más Este es mi propio gusto o los principios de diseño, el estilo en el que me han entrenado Así es como se ve mayormente. Entonces sí, esto se ve muy bien. Sabes, es un pequeño detalle, pero hace toda la diferencia para mí. Podría ser el caso es el tablero es un poco demasiado corto, así que solo podemos extender esto un poco. Especialmente, hay que tener en cuenta que cuando localizas para diferentes idiomas, eso significa que cuando tienes un producto, tienes un diseño, y luego vas a tener diferentes idiomas aquí Especialmente cuando se trata de idiomas específicos como el alemán, tienen texto muy, muy largo. Entonces, en lugar de tablero, tendrías una palabra muy larga. Entonces tienes dos opciones. O harás suficiente espacio para que la gente pueda seguir adelante y escribir su versión en idioma localizado, lo que sea, o vas a tener que recortar la palabra, no realmente recortarla, sino cortarla. Va a ser B, punto punto punto. La idea es que sí, la palabra es demasiado larga, así que hay que adivinar de qué se trata. Pero eso es realmente malo para los usuarios. Deberías tratar de evitar hacer eso porque entonces en lugar de mostrar el tablero, digamos que estas son palabras mucho más largas como el control del tablero. Pero en lugar de decir control de tablero, solo dices tablero, con, punto punto punto. Entonces no es comprensible dashboard con, ¿qué? ¿Qué es exactamente lo que se describe aquí? Eso es lo que pasa para ser honesto con idiomas como el alemán porque tienen palabras largas. Traducir el dashboard al alemán podría darte una palabra muy larga, y luego si el menú no es lo suficientemente largo, si no es lo suficientemente ancho, se va a reducir y luego los usuarios no van a entender qué es Eso es todo lo que estoy tratando de explicarte. La idea es que tengas suficiente espacio. Aunque pienses, oye, mis palabras son lo suficientemente cortas. Ellos van a encajar aquí. Pero piensa de una manera que sea sostenible, eso es a largo plazo, eso es pensar en el futuro y en lo que va a venir. Y cuando hagas eso, entonces las cosas van a tener sentido. Todo bien. Entonces ahora que tenemos esto, creo que esto es lo suficientemente bueno para pulir. Hay mucho más que podríamos hacer para ser honestos, pero no tenemos tiempo para ello. Creo que deberíamos llamarlo un descanso. Ahora que nos centramos los elementos más importantes que podrían estar entorpeciendo las experiencias de los usuarios, creo que ya es suficiente y podemos seguir adelante y pasar a cosas más importantes Muchas gracias por escuchar, y nos vemos en la siguiente lección. 12. Creación de interacciones: estados de desplazamiento y presionados: Una parte esencial de cualquier diseño son las micro interacciones que los usuarios tienen a lo largo de la interacción con su diseño. Necesitan sentir que está vivo, que responde, que responde a sus clics, a sus hovers, y así sucesivamente Es por ello que utilizamos la función de interacción en Figma. Espero que estés familiarizado con ello. Lo hemos usado un poco hasta este punto, pero ahora vamos a usarlo un poco más intensamente Vamos a empezar a hacerlo de manera muy sencilla. No vamos a ir por la borda, sino que acabamos de hacer estos boletos Lo que vamos a hacer ahora es que vamos a crear otra instancia. Bien, así es como lo vamos a hacer. He hecho que todos los textos sean grisáceos, y lo que vamos a hacer ahora es que vamos a convertir al menos este texto para que sea más oscuro Eso es tan simple como se pone. Nada demasiado loco. Lo que también podríamos hacer posiblemente es hacer que las sombras sean más fuertes, opcional. Ahora voy a prototipar esto. Voy a ir al panel prototipo, conseguir esta flecha, ponerla aquí, en vez de onclick, voy a decir mientras se cierne, smart La animación smart animate y vamos a ver cómo se ve Bien. Me gusta mucho con el texto y todo, pero siento que la sombra va demasiado. Está muy por la borda. Lo que puedes hacer es que podamos hacerlo diez y tal vez podamos aumentar la posición, hacer la Y y ocho. Ahora la sombra va por debajo de ella. Creo que esto no está nada mal. Lo que posiblemente también podríamos hacer, podemos ajustar esto para que esto suceda mucho más rápido. En lugar de 300 milisegundos, 100, así que eso es menos de un tercio Lo bueno es que parece que el sitio web es más rápido. Da esa impresión porque está respondiendo a tus hovers mucho más rápido que antes. Eso es una cosa que podemos hacer. Podemos ir adelante a los demás elementos ahora mismo uno por uno. Creamos este filtro. Sólo voy a escribir filtro. La forma de hacerlo es que vamos a copiar y pegar éste aquí y vamos a tratar de hacerlo más interactivo. La forma de hacer esto tal vez es hacerlo un poco más oscuro. Hacer el texto un poco más oscuro, tal vez. A ver. Entonces tenemos que prototimarlo ahora. Entonces mientras no presionamos sino rondando, ahí vamos. No es muy fácil de ver, para ser honesto. Sólo tengo que quitar un poco este modo. Bien. Ahí vamos. A veces con un trazo, es difícil de ver en figma porque el trazo es un poco demasiado delgado para ello, pero esto también se ve bien A lo mejor nos fuimos un poco demasiado oscuros. Y también podemos hacerlo de una manera donde esté tomando un poco más de tiempo, 200, 200 milisegundos, creo que se ve bastante bien, bastante genial Y podemos hacer estos también un poco más oscuros, el texto aquí. Ahí vamos. Colas el cursor sobre él, lo presionas. Perfecto. Ahí vamos. Bien. Ahora, a continuación, también tenemos estos botones de menú, y tenemos estos botones de icono. Estos botones de icono están aquí mismo. A pesar de que todos son botones de icono, técnicamente, esto es diferente. Podríamos llamarlo botones de cabecera o algo así. Bien, entonces, ¿cómo funciona esto? Lo que básicamente vamos a hacer es hacer clic en él de la misma manera, crear una nueva instancia, y vamos a hacer el relleno sea un poco más oscuro, como un poquito. Y lo mismo con el icono mismo. Ahora veamos cómo se ve. Entonces mientras se cierne, ahí vamos. Tan simple como eso. ¿Ves eso? Potencialmente también podríamos aumentar el tamaño de la misma, para ser sinceros, podemos hacerla 50 por 50. Entonces tenemos mucho más espacio entre ellos a su alrededor, y de esta manera, tenemos más espacio para hacer clic en el botón en realidad, ¿verdad? Entonces eso está hecho. Lo que también podríamos hacer potencialmente es, esto es nivel pro. Podríamos agregar una versión de la misma en la que se haga clic o se esté presionando Cuando sostengamos ambos, haremos clic en el más, lo arrastraremos aquí, y vamos a decir mientras presionamos. Entonces, ¿ves estos? Los presionamos, y luego se vuelven para decolorarse Esto es mientras se presiona. Um, ahora mismo, creo que se está poniendo en buggy. Pero sí, debería suceder mientras presionas solo o podríamos decir una vez que hagas clic en ellos. Entonces, una vez que haces clic en él, este es el estado elegido. Pero eso no es lo que queremos, pero en realidad en realidad podríamos quitarlo tal vez de aquí. Ahí vamos. Y podríamos darle la vuelta a mientras presionamos. Cuando pasas el cursor sobre él, y luego presionas , debería volverse a eso Pero recuerda que aquí hay un hover. Eso es lo que lo está fastidiando. El hover es llevarla de vuelta al estado y luego volver aquí y así sucesivamente Vamos a probarlo ahora otra vez. Ahora mientras presiono, termino mi prensa y ya está hecha. Se ha ido. Por supuesto, el propósito no es que alguien haga clic durante mucho tiempo, sino que haga clic una vez y luego así es como se ve, y luego sale. Pero tampoco tiene que ser como este color. Esto es sólo un color muy fuerte relacionado con la identidad, pero no tiene por qué serlo. Pero esto es sólo para demostrarte cómo podría quedar. Ahora vamos a llegar a los botones del menú. Todo bien. Entonces cuando tengo múltiplos, lo que me gusta hacer es copiarlos y pegarlos aquí mismo, los dos, y luego empiezo a crear prototipos Entonces lo hacemos mientras rondamos y puedo hacer lo mismo aquí, mientras flotaba Entonces podríamos ajustar estos con los mismos valores que tenemos aquí. Este color, tómalo aquí, pegarlo, y este color también. Ahora para estos, no voy a crear una versión prensada. Déjame ajustarlo. No voy a crear una versión prensada, sino más bien, me gustaría crear una versión que se elija, que sea seleccionada. Cuando estás en una página específica y luego se selecciona, debería mostrarlo. Voy a elegir lo mismo aquí tal vez o en realidad, déjame hacer esto. Voy a elegir estos y voy a hacerlos de color. Sí. Voy a conseguir esto y que sea super duper ligero Por supuesto, siempre es bueno entonces dar nombres a tus variantes. Aquí voy a decir tipo, y esto es por defecto, y voy a decir aquí en hover, y luego en prensa Lo mismo aquí, sólo voy a escribir tipo. Voy a elegir estos por defecto al pasar el cursor sobre la prensa. También podemos añadir algo aquí y decir, colapsar, no. Estos son, como decíamos, son por defecto. Pero estos son colapso, ustedes colapsan sí y aquí colapsan, no. Esto hace que sea más fácil entender lo que tienes porque ahora cuando lleguemos a esta parte o la voy a editar aquí, voy a elegir estas y voy a decir en prensa. Dijimos que no queremos esto en prensa, sino seleccionados. Exactamente. Ahora cuando vamos a nuestro diseño, nos muestra en qué página estamos, que es realmente genial y mira el efecto hover Es muy agradable. Es realmente genial. Entonces ahora nos queda una cosa, que es prototipar este panel que sale, así como éste también siendo plegable Podemos hacer lo mismo por ambos. Sólo tenemos que averiguar cómo. Y eso no es demasiado duro, así que vamos a hacerlo en la siguiente lección. Muchas gracias por escuchar. Te veré en la siguiente. 13. Creación de función colapsable del panel.: Creo que te he molestado lo suficiente acerca de hacer esta pequeña interacción ordenada de colapsar estos paneles, el de la derecha, y expandir el de la izquierda Ahora bien, este va a ser un truco no tan fácil, así que hay que prestar atención porque yo mismo no sé exactamente cómo voy a hacerlo. Hay muchas formas diferentes de hacerlo para lograrlo, y solo vamos a probar una de ellas y ver qué sale de ella. Me gustaría primero enfocarme en crear una interacción para ésta, solo para colapsarla y volver a colocarla. Y la manera de hacerlo es, quiero decir, hay diferentes maneras de hacerlo, ¿verdad? Pero una forma de hacerlo es que hay una especie de icono que mucha gente crea. Sólo voy a mostrarte cómo se ve, solo voy a crearlo muy rápido. Por lo general, tiene una línea así en el medio, no justo en el medio, sino en el lateral. Y tiene una flecha. Bien. Entonces se ve un poco así. Estoy pensando que podríamos hacer uso de eso. Pero no va exactamente a donde queremos que vaya. Es un poco difícil de controlar. Pero creo que vamos a resolverlo. Esto es lo suficientemente bueno. Sólo voy a tomar esto aquí mismo. Uy. Voy a poner éste en él. Voy a darle la vuelta a esto Ups. Bien. Voy a cortarlo y agregarlo aquí. Bien. Entonces voy a cambiar los colores. Voy a hacerlo muy oscuro, no demasiado oscuro. Veamos cómo se ve si es visible. Bien. No es tan visible, para ser honestos. Y queremos que sea visto para ser entendido por la gente. Entonces tal vez hagámoslo un poco más grande. La idea es que aquí muestra un panel lateral. También podemos intentar hacerlo un poco más grueso. Eso no funcionó muy bien. Así que volvamos a como era y tratemos de que funcione. Ahora tenemos esto y lo que vamos a hacer es que vamos a tomar esto, vamos a pegarlo aquí y vamos a hacer todo esto un componente y lo vamos a llamar panel de tareas. Entonces vamos a agregar esta instancia de la misma. En esta instancia, básicamente vamos a cerrarla así como así. Bien y al hacer eso, lo que básicamente estamos haciendo es cerrar todo esto, y luego vamos a tomar todo el contenido que tenemos aparte del ícono que acabamos de crear Vamos a llevar todo el contenido hasta aquí y lo vamos a llevar a la derecha para que vaya a estar desapareciendo básicamente Entonces posiblemente podríamos incluso hacer esto más pequeño. Ahora veamos cómo se ve eso. A lo mejor vamos a retomarlo. Y luego vamos a hacer que sea un pequeño botón pulcro. Vamos a convertir esto en eso, pero no haciendo clic en el panel, sino haciendo clic en este botón, se va a convertir en esto y va a tomar 300 milisegundos tal vez Entonces cuando hagamos clic en este botón, va a volver. Sí. Entonces tal vez deberíamos invertir este botón. Se refiere este rosario para que se entienda que al hacer clic en, se va a revertir Ahora vamos a sacar esto, mantenerlo a un lado, y vamos a agregar este panel. Vamos a alinearlo aquí y ver cómo funcionaría ahora. Bueno, esto es muy ordenado. puede ver que funcionó muy bien, tiene un poco de animación agradable. Pero hay un problema. No queremos que se derrumbe aquí, queremos que vaya a la derecha y queremos que todo esto se expanda. Lo cual también va a ser un poco complicado. La forma de hacer esto es que vamos a sostener todos estos tres y vamos a hacerlos un diseño automático. Y entonces lo que vamos a hacer es que los vamos a llevar a un lado aquí y vamos a llegar a este pequeño salpicadero. Y cuando extendamos este tablero, te vas a dar cuenta de que las cosas se van de las manos. Eso no queremos. Lo queremos para que cuando movemos las cosas, se quede igual. Voy a elegir todos los elementos y los voy a enmarcar, y luego los voy a hacer centrados de arriba a abajo. Ahora cuando movemos esto, van a permanecer centrados. Bien. Entonces ahora, lo que vamos a hacer es que vamos a llegar a este diseño automático y le vamos a decir que para este marco, va a llenar el contenedor tanto como pueda excepto que vamos a agregar un poco de relleno a la derecha porque no queremos que el espacio de la derecha se ahogue así ¿Ves? Entonces vamos a contarlo a la derecha. Vamos a dar click aquí y decir a la derecha, queremos, 24, ahora se ve saludable. Ahora volvamos y veamos que algo anda mal. Vamos a refrescar esto. Bien, así es como se ve. Y cuando hacemos clic en el botón de colapsar, lo va a colapsar, como pueden ver, y solo va a mantener este botón justo por aquí. Ahora bien, este espacio todavía está un poco desperdiciado, para ser honesto, lo que no me alegra. Pero el objetivo aquí es darle más atención a lo que tienes aquí. Así que tenlo en mente, no te distraigas con otras cosas Esta es una característica realmente genial que puedes construir, pero queremos construir algo similar para la izquierda, pero no necesariamente con este botón, sino con otra cosa. Y sólo para hacer esto hasta el final, quiero asegurarme de que también tenemos una versión de esto. Vamos a copiarlo y pegarlo. Quiero una versión de esto que se destaque. Este tiene este color, pero en realidad debería ser blanco. Cuando lo destaques, se va a oscurecer un poco. Entonces vamos a agregar una interacción que se cierne. Se 200 y ver cómo se ve. Ahí vamos. Pero es un poco demasiado oscuro. Déjame hacer trampa desde aquí, toma este color. Todo bien. Está justo aquí, y podemos hacer que el color aquí mismo sea un poco más oscuro, tal vez. Bien. No lo veo muy bien porque es demasiado delgada. Pero sí, ahí lo tienes. Ahora tienes algo de interacción pasando aquí, lo que realmente me encanta. Es una característica realmente genial. Bien, así que ahora aprendimos a crear un menú de panel lateral plegable o como quieras llamarlo Y en la siguiente lección, vamos a aprender a crear una función hover aquí Ahora, como mencioné, vamos a hacer esto un poco diferente. En lugar de tener este botón por aquí, que mucha gente hace, quiero que funcione con una función hover Entonces, cuando coloques el cursor sobre él, te va a mostrar los artículos Cuando no se ciernen sobre él, entonces va a quedarse colapsando así porque simplemente no lo necesitas Bien, entonces te veré en la siguiente lección. 14. Crear interacción para la barra lateral: Ahora, en cuanto a mi próximo truco de magia, voy a agregar aquí una función hover que te muestra la versión descolapsada del menú lateral, completamente abierta con todos los títulos y texto y así sucesivamente ¿Bien? Así que casi estamos ahí en realidad porque ya tenemos estas dos instancias, así que realmente hicimos esto un poco más fácil para nosotros mismos. Podemos nombrarlo aquí. Podríamos decir, ya sabes, colapso. Y entonces podríamos decir aquí, no, y aquí podemos decir que sí, parcialmente colapsado. Bien, ¿cómo hacemos esto? Bueno, no es tan difícil. Sólo vas a ir a la página del prototipo aquí y vas a venir aquí y vas a hacer click mientras se cierne. El disparador es mientras estás rondando sobre él, va a cambiar a la versión no colapsada, y eso va a pasar con la animación Smart Anim Ease out 500 out Ahora sigamos adelante y veamos cómo se ve. Ahí vas. Se ve muy limpio. Es muy agradable, pero tal vez puedas hacerlo un poco más rápido. Entonces 300 tal vez. Y puedes pasar por todos y cada uno de los elementos de la lista, y eso es prácticamente todo. Pero no es tan fácil porque ahora mismo estamos teniendo un problema. Cuando se despliega, cuando se expande, cubre una parte del tablero de una manera muy incomplaciente Y la manera de deshacerse de esto es posiblemente seguir adelante y llegar a todo este marco y hacer que se abrace los contenidos. Entonces cuando eso suceda, cuando hagamos esto, el dashboard va a ir a la derecha junto con las tareas. Pero asegurémonos de que esto no estropeara nuestro efecto aquí. Y lo hizo, desgraciadamente. El motivo es porque cuando haces esto, le dices al marco, abraza el contenido, no te expandes, no vayas más allá. Si este contenido se hace más pequeño, entonces deberías hacerlo más pequeño con el contenido. Si se hace más grande, entonces te haces más grande con él. Pero estos dos efectos van ahora uno contra el otro. Ahora tenemos que encontrar una manera hacer que vayan de la mano entre sí. Voy a hacer esto haciendo que este marco llene contenedor. Pero el problema es que, en cuanto haces eso, este ancho de todo el marco pasa de los contenidos del abrazo a lo fijo. Cuando haces lo contrario, va a cambiar esto de relleno a fijo. Como puedes ver, son totalmente opuestos. Se están apagando entre sí. Hay un trabajo alrededor. No va a ser exactamente lo que queremos hacer. Pero la forma de hacerlo es que vas a poner esto en un diseño automático en sí mismo pero en lugar de hacerlo abrazar, vas a hacer que sea de ancho fijo. Eso significa que cuando el menú se expande, el marco que lo sostiene no se va a expandir con él. El efecto resultante es lo que ves ahora mismo. Entonces se expande, pero no con el marco, nada más se mueve. Pero esencialmente lo que queremos, queremos que todo este menú esté encima del tablero, no detrás de él. Aquí te explicamos cómo resolverlo. Vas a hacer clic en el marco y vas a ir a estos ajustes cuando se trata de apilamiento de lienzo, lugar de último en la parte superior, vas a decir primero en la parte superior. La primera capa aquí va a estar encima de la otra y ahí la tienes. Por supuesto, no mantiene el efecto que deseamos tener donde básicamente se muestra como si se tratara de ventanas. Pero creo que está bien. Podemos vivir con eso y podemos volver aquí y configurar esto para llenar contenedor para que este truco funcione. Entonces ahora mira cómo funciona. Entonces desde este lado, funciona y desde este lado es expandible y se ve bastante limpio. Tenemos nuestros proyectos, tareas, calendario, equipo, todo lo que necesitamos, y tiene este pequeño efecto genial al respecto. Ahora bien, una cosa que para ser honesto, me molesta un poco es que a veces, ya sabes, esto no es así Hay una capa adicional, una capa extra a ella. Porque y si quiero hacer clic en el icono, pero luego en cuanto llego a él, solo estás moviendo las cosas por ahí. Y hay una solución a esto. Entonces, en vez de trabajar con hover mientras se pasa el mouse como disparador, deberías trabajar con mouse enter porque mouse Enter, dice, Cuando el mouse ingresa a este objeto, se va a expandir o va a hacer esta acción, pero se te permite agregar un retraso Entonces, por ejemplo, 500 milisegundos. Entonces, lo que sucede entonces cuando pasas el cursor sobre no se expande de inmediato Hay que pasar el cursor y luego 500 milisegundos después, se abrirá En realidad voy a hacer mil 500. No obstante, hay un problema. Una vez que pasas el cursor sobre él, no vuelve atrás. Para resolver esto, hay que volver a este fotograma y darle una interacción, y el gatillo debe ser la licencia del ratón. Una vez que el ratón se va, después de 1,500 milisegundos, también tienes una opción Tienes un retraso, y luego va a colapsar. Veamos cómo se ve. Pones el cursor sobre él, y luego un poco más tarde se abre. Usted lo quita. Y luego se cierra. Lo que es realmente genial de esto, puede parecer una pequeña diferencia, pero de esto se trata exactamente de lo que se trata UX. Se trata de estas pequeñas micro interacciones. Lo que es genial es que le da al usuario, en primer lugar, una opción para cambiar muy rápidamente porque hay usuarios power, quieren cambiar muy rápidamente entre pestañas. Quieren dar click aquí y allá. Por lo que expandirlo no ayuda a la persona. Viene en la manera de que ellos hagan cosas, ¿verdad? Y es como una animación extra que no necesita suceder. Si ya dan click en la página a la que quieren ir, entonces realmente no la necesitabas. Entonces por eso esto es genial porque agrega un retraso en caso alguien no esté realmente familiarizado o alguien sea un nuevo usuario y estén como, Oye, ¿qué era esta página? Y luego toma estos tres segundos extra y luego se lo abre para ellos. Y les dice, bien, aquí hay una explicación de todo. Pareces que no sabes cómo moverte, así que aquí tienes todo explicado. Entonces una vez que te mueves y luego aún quieres volver, todavía tienes tiempo. Por eso hay un retraso también en el colapso. Pero una vez que dices, Oye, ya terminé, necesito revisar estas cosas y luego se me cae. Pero voy a lograrlo en vez de que sea 1,500, podría hacerlo mil milisegundos. Demora, creo que es más que suficiente. Ahora miremos y veamos cómo se ve esto, y luego elijo donde quiero, y luego terminé. Bam. Es tan fácil como eso. No se pone más fácil. Y si, creo que esto es genial. Ahora tenemos un diseño muy agradable e interactivo, y se siente vivo, ¿verdad? Se siente como si fuera personalizable. Se puede decir, Oye, quiero ver las tareas. No quiero ver la tarea. Quiero ver si quiero filtrar el año. No, en realidad, quiero abrir el menú aquí y revisar otras cosas. Totalmente bien, totalmente factible. Esto es realmente increíble. Y simplemente continúa para mejorar la experiencia del usuario. Entonces ahora que lo tenemos hecho, las siguientes lecciones, vamos a hacer un par de cosas más. Una de ellas es que vamos a pulir un poco nuestra interfaz. Empezamos con mucho entusiasmo e hicimos muchas cosas Pero tal vez es hora de que volvamos y replanteemos algunos de ellos. Solo mirando esto muy rápido, podría decir, Oye, los colores son un poco demasiado brillantes. No estoy hablando de cambiar los colores, todos los colores de inmediato, pero tal vez jugando con ellos, haciéndolos un poco más claros, expandiéndolos porque queremos asegurarnos de que la atención del usuario esté dirigida a las cosas en las que en realidad se debe enfocar. Bien. Y encima de eso, vamos a agregar algunas otras funcionalidades. Entonces una de estas funcionalidades son las notificaciones. También podríamos hacer algo con historia, perfil, búsqueda. Todas estas son posibilidades de lo que podríamos estar haciendo. Encima de eso, me gustaría crear también la posibilidad de que vayamos a otra página. Ahora, solo para advertirles, no creo que tengamos tiempo para seguir adelante y llenar estas páginas con contenido significativo, pero creo que deberíamos prototipar el proceso de pasar de una página a otra. Todo bien. Muchas gracias por ver, y voy a ver la siguiente lección. 15. Desplazamiento: Muy bien, así que ahora tenemos un diseño muy agradable en marcha. Pero hay una cosa que aún falta o tal vez podría ser un buen complemento, y esa es en realidad esta parte de aquí. Tenemos las tareas, pero se puede ver que una de ellas está cortada, y esto no es por error. Si sabes, ya sabes. Esto es básicamente una pequeña característica agradable, un pequeño truco que diseñadores e ingenieros usan mucho y básicamente se hace para demostrar que hay más contenido. Se llama tipo teaser o al menos yo lo llamo así. Me burla del contenido y te muestra que existe la posibilidad de desplazarte hacia abajo y ver cada vez más ver si hubiéramos dado forma a todo esto, si lo dimensionamos de una manera donde viene aquí la última carta, entonces no tendrías idea de que hay más cartas. Ahora, vamos a ver nuestro diseño aquí mismo. Tenemos estas características geniales. Nosotros los construimos. Pero ahora quiero desplazarme hacia abajo, pero puedo sería genial si pudiera desplazarme hacia abajo en este panel. ¿Cómo podemos hacer eso? En lugar de editar aquí, asegúrate de ir al propio componente. No quieres estar editando usando una instancia. Quieres asegurarte de que tus cambios estén guardados en el componente principal, ven aquí y esto es lo que vas a hacer. Vas a ir y dirigirte al panel prototipo justo por aquí, y vas a cambiar a la pestaña prototipo. Y vas a venir a desbordarse. Desbordamiento significa que todo lo que está fluyendo sobre el marco y en lugar de no desplazarse, lo vas a configurar en vertical Ahora, por supuesto, depende. ¿Es de desplazamiento vertical o es derecha e izquierda como en horizontal? ¿O son las dos direcciones? Bueno, para nosotros, es vertical. Ahora vamos a comprobarlo. Ahí vas. Así podrás desplazarte hacia arriba y hacia abajo y podrás ver las cosas. Quiero decir, se corta un poco. Se hace un poco recortada desde aquí abajo. No es perfecto, pero funciona. Así que esto es muy bueno y tenemos algo agradable pasando. Ahora, una forma de arreglarlo sería hacer todo esto en un diseño automático. Pero ahora mismo, es un poco tarde para hacer eso porque va a estropear muchas cosas. Pero quiero decir, podemos intentarlo. Entonces vamos a ver. Bueno, así que sólo vamos a hacer esto. Bien. Y vamos a traer a este chico malo. Vamos a traerlo aquí. Y luego vamos a establecer los valores. Bien. Todo bien. Y así queremos asegurarnos de que el tamaño sea exactamente como lo teníamos antes, que era 839 En lugar de ser abrazo, debería ser 839, y luego podemos cambiar el espaciado Yo recomendaría que armes estos y estos juntos en un diseño automático. De esta manera, están más cerca el uno del otro. Tienen, por ejemplo, 16 espaciados, y luego se puede dar todo lo demás 24. Ahora vamos a echarle un vistazo. Sólo voy a refrescarme. Ahora cuando te desplazas hacia abajo, veamos. Todo bien. Hay una cosa más que hacer, que es poner todo en un diseño automático y luego ir al marco principal y quitar el desplazamiento Que no se desplace. Ahora tenemos un diseño como un marco dentro de un marco, y vamos a agregar algo de espaciado aquí. Sólo un poquito más. Solo estamos tratando de asegurarnos que el tablero y las tareas aquí estén alineadas. Sólo le voy a dar cuatro. Ahora vamos a comprobar cómo se ve. Bueno, hay una cosa más que hacer. Ahora ves esto, está rebosante. Lo que vas a hacer es que lo vas a derribar. Lo vas a traer aquí. O lo que vas a hacer es que lo vas a hacer que llene contenedor y luego así así, nosotros lo arreglamos. Puedes desplazarte hacia arriba, así tienes suficiente espacio hacia arriba, y cuando te desplazas hacia abajo, vas a ver aquí, tiene suficiente espacio. Se va abajo, y si eso es más o menos todo. La razón por la que hicimos todo esto es que está más limpio. Funciona mejor porque ahora tienes diseños de auto. El espaciado es perfecto entre ellos, y de esta manera, podemos tener un espaciado realmente agradable sobre consistente. Es bueno y tiene sentido, y funciona. Entonces sí, así es básicamente como puedes crear desplazamiento. Y solo para llevar el punto a casa, solo voy a copiar una de estas tarjetas varias veces para mostrarte lo lejos que podemos desplazarnos hacia abajo. Entonces, si tuvieras muchas tareas, así es como se vería. Simplemente te desplazas hacia arriba y hacia abajo y podrás ver muchas cosas. Ahora bien, no recomendaría esto. Yo recomendaría que en algún momento diga ver todas las tareas. Eso tendría mucho más sentido. Pero sí, ese era el propósito de esta lección es aprender a hacer scroll y aprendes a hacerlo, felicidades Te veré en la siguiente lección. 16. Creación de un panel de notificación emergente.: Todo bien. Entonces, una cosa que falta en este diseño ahora mismo después de todo lo que hemos hecho es tal vez alguna interactividad en esta área Ahora, ya hemos incorporado algunos efectos hover, lo cual es bastante genial, tengo que decir Pero tal vez podamos hacer que se haga clic en ellos, ¿verdad? ¿Y si hacemos clic en ellos? También tenemos estos estados de prensa, lo que también es genial. Pero, ¿qué pasa con ver un panel real que te muestre las notificaciones? Sigamos adelante y diseñemos eso muy rápido. Entonces hay diferentes maneras en las que podrías hacer esto. Podrías crear una pantalla completa para notificaciones. Algunos sitios web, ya sabes, cuando haces clic en notificaciones, te llevan a una página completamente diferente, pero realmente no me gusta eso. Lo que personalmente me gusta es cuando tienes un panel que no está ocupando toda la pantalla, está ocupando una parte de la pantalla, y te está mostrando las notificaciones una por una, y luego puedes si quieres ver todas las notificaciones, entonces puedes ir a otra página porque eso es simplemente más rápido. No tienes que cambiar de página y solo puedes comprobarlo muy rápido. Así que sigamos adelante y diseñemos eso. Así que lo primero que vamos a hacer es que vamos a crear un marco, obtener la herramienta de marco y crear algo y lo estoy mirando ahora mismo, pero podemos cambiarlo Voy a hacerlo un poco más ancho y luego darle algún radio de esquina, asegurarme de que esto es lo mismo. Entonces también podemos darle una sombra paralela similar. Ahora tenemos esto. Lo primero que vamos a hacer es que le vamos a dar un título, dentro de él, vamos a escribir algo y vamos a hacer de esto un layout automático y darle 24. Y sé lo que estás pensando, Oh, solo miramos el tamaño y luego, ya sabes, lo arruinamos por completo Bueno, tienes razón. Entonces vamos a llamar a este centro de notificaciones. Todo bien. Y o solo digamos notificaciones. Simplemente mantenlo simple. Y luego vamos a crear estas tarjetas de notificación. Entonces van a ser similares a las tarjetas de boletos. No va a ser algo completamente diferente. Así que tomemos eso como base, pegarlo, hacer clic derecho, separar Instancia, y luego sigamos adelante y sí, un vistazo y veamos cómo podemos cambiarlo Una cosa que podríamos encontrar útil es tener tiempo, fecha y hora, no archivos adjuntos, no personas. Sí, tener un tiempo para ello es genial, y no necesariamente tenemos que tener un ícono con él, para ser sinceros, así que solo podemos quitar eso y luego quitaremos este marco, y tal vez podamos poner la fecha ahí arriba. Bien. Y ahora tenemos estos dos. Y entonces lo que me gustaría hacer además de eso es crear un círculo aquí. Voy a hacer que sea un marco en realidad, darle un color y darle un radio de 50 esquinas. Ahora bien, este es un lugar donde podemos agregarle un icono. Vamos a crear un icono, poner la letra A y escribir impresionante. Y entonces sólo vamos a escribir exclamación. Vaya, exclamación. Marca o punto, exclamación. Eso no funcionó. Vamos a hacer un signo de interrogación o simplemente puedes poner un signo de interrogación tal vez, ojalá. No tenemos un sólido. Entonces vamos a ver exclamación. Eso es. Eso es todo lo que necesitábamos. Lo vamos a poner aquí dentro y luego vamos a hacer este un diseño automático y vamos a asegurarnos de que tenga una relación de aspecto de bloqueo, y vamos a robar el color de aquí, ponerlo ahí, y bien. Eso es de color muy claro. Bien, es muy ligero, pero podemos cambiarlo y hacerlo un poco más oscuro. No se preocupe. Bien, así que ahora lo tenemos con este aspecto. Todavía no muy contento con ello. Simplemente puedes eliminar esto por completo y solo tener un título para las notificaciones. Siempre es bueno tratar de pensar, ¿qué tipo de notificaciones podría estar recibiendo? Así que voy a agregar estos en un diseño automático, y pongámoslos en un diseño automático también. Vamos a hacer ocho y luego ponerlos en un diseño automático. Y luego vamos a hacer todo esto un diseño automático. Sí, esto funciona. Esto funciona de alguna manera. Bien. A lo mejor podemos disminuir el radio de esquina aquí y lo mismo con el relleno. Todo bien. Ahora vamos a convertir esto en un componente y probarlo. Vamos a decir notificación. Ahora tenemos esto como notificación, vamos a copiarlo, pegarlo aquí, y luego lo vamos a hacer vertical, y le vamos a dar 36 y después vamos a copiar, pegar, copiar y pegar. Ponga todos estos juntos en el diseño automático. 16 u ocho, y luego tenemos estos juntos, cercanos entre sí. Entonces lo que vamos a hacer es darle a esto un contenedor de llenado. Vamos a hacer que llene el contenedor, y luego vamos a hacer que todos estos llenen el contenedor también. Aquí ya notamos un problema. Esto es parte completamente del proceso. Te das cuenta de que tienes un valor de espaciado específico aquí. Pero en realidad, debería ser en auto. Esto permite que estos tres puntos sean arrojados hasta el final. Aquí no se ve diferente, pero ahora se puede ver que acaba de arreglarlo. Ahora tenemos estas notificaciones y acaban de ser lanzadas, entonces podemos tener múltiples y al igual que antes, también podemos agregar más notificaciones que la persona tenga que desplazarse. No hay ningún problema con eso. Solo tenemos que volver ahora y hacer que estos sean un poco neutrales, así que solo vamos a decir fecha, y vamos a decir título de notificación. Ahora nos estamos dando cuenta de otro tema es que aquí no hay relleno. Entonces tal vez nos gustaría hacer que llene el contenedor. Lo mismo con este, así que llena el contenedor. Puedes hacerlo manteniendo pulsada la tecla Alt y haciendo doble clic. Lo mismo aquí, ya está hecho, aquí está bien, aquí está bien Bam. Bien, entonces título de notificación, y luego puedes ver, puedes decir aquí, descripción, descripción muy rápida o resumen. Entonces aquí se podría decir que la tarea urgente requiere atención. Te has perdido el plazo en una tarea que estaba marcada como urgente. Por favor, cuídese por favor de da da da, y luego el mensaje continúa. Todo bien. Entonces podemos hacer lo mismo por los demás, pero la idea principal es que también podemos cambiar el icono para que podamos escribir aquí pregunta. Bien. Y ahora me estoy dando cuenta de otro problema El texto está alineado a la izquierda. Volvemos aquí, hacemos que se alinee con el centro. Ahora está centrada. Perfecto. Y si te das cuenta , quiero decir, esta es una tarea urgente, pero no parece una tarea urgente. Simplemente se mezcla con los demás. Bueno, eso es por los colores. Ahora cuando vayamos a escoger un esquema de color más urgente como este, aquí me robaré este color. Entonces parece mucho más urgente. Eso es lo que me gusta de tener estos círculos o imágenes o íconos o lo que sea que puedas usar es que den una idea usando colores, usando formas, y te digan, Oye, algo está pasando. Aquí puedes ver el signo de interrogación y puedes decir, hay algún problema. Aquí se podría decir actividad sospechosa detectada. ¿Registraste tu cuenta desde otro dispositivo? Por favor revise abla. Bien. Y entonces podemos dar el 14 de enero, el 7 de enero 16 y o deberíamos decir julio julio? Todo bien. Y entonces puedes tener muchos más otros íconos. Los iconos también pueden ser muy no sé, interesantes. Quiero decir, podemos volver a esta y simplemente hacerla reloj. Reloj, algo así, y luego podremos tener otro tipo de notificaciones. Pero lo más importante, veamos cómo podemos vincular este panel de notificaciones aquí con este botón. Entonces, ¿cómo lo vamos a vincular? Vamos a ir a prototipo, y ahora ya vemos que tenemos un efecto hover, no hay problema, no hay problema Vamos a arrastrar esto hasta aquí. Ahora que tenemos esto, vamos a decir, Bien, vas a hacer click cuando hagas click en él, correcto? Entonces ese es el detonante. La acción va a ser superposición abierta. La superposición es frame 67. Podemos darle un nombre. Podemos decir notificaciones, pop up o ventana o como quieras llamarlo. Y luego lo revisas, ¿ verdad? Esa es la correcta. En lugar de que esté centrado, vas a elegir manual y luego lo vas a colocar donde se sienta bien, para ser honesto. Así que aquí está muy bien ubicado. También puedes hacer que el fondo sea un poco más oscuro. De manera realista, la mayoría de las aplicaciones no hacen eso, y sí, no necesitas una animación, de verdad Ahora, vamos a comprobar cómo se ve. Ahora vamos a hacer click en él. Ahí está. Hay un problema es que se mezcla demasiado al fondo. Esto se puede resolver de dos maneras. O vas a hacer fondo, así que vas a darle un color al fondo. Esto es un truco para hacerlo. Es muy agradable porque te da todo el enfoque en esto. Elimina el enfoque de todo lo demás, siéntete libre de usar eso si te funciona. Pero aparte de eso, otra cosa que puedes hacer es simplemente intentar que este panel se vea más interesante. Esto podría ser con color. Podría ser con sombras. Tenemos 5%. Podemos hacerlo 50%. Y se ve realmente horrendo ahora mismo, pero eso es solo una idea de lo que podrías estar haciendo Volvamos a poner el color . A lo mejor intentemos trabajar solo con las sombras. Pero sí, con las sombras, ahora es mucho mejor con esto. Pero todavía diría, ya sabes, tal vez tratar de hacer una mezcla. Entonces intentemos hacerlo ahora. Entonces vamos a dar un trasfondo, pero sólo va a ser del 10%. Y si, se ve mucho mejor. Muy bien, repitiendo, abriéndola. Ahí vas. Estas son notificaciones. Solo asegúrate de tener una salida porque cuando los usuarios si van a presionar sobre esto, van a recibir las notificaciones. Necesitan hacer click fuera de él. Entonces, o haga clic fuera de ella, que es una configuración que inconscientemente pongo aquí mismo Si esto no estuviera encendido, harías clic aquí y allá y lo que sea, y no podrías salir. Entonces, si ese fuera el caso, necesitas tener un botón X aquí. Solo para que la gente pueda cancelar el pop up, cerrarlo y pasar a otra cosa. Solo asegúrate de tener eso marcado y tiene sentido. Muchas aplicaciones hacen eso. Se siente como una ventana. Una vez que haces clic fuera de él, ya no está. Solo quería volver aquí y decirte, por cierto, no necesitas tomar esta configuración exacta. Por ejemplo, si quitamos las sombras aquí. Ahora, ves las notificaciones, siguen funcionando sin sombras, completamente bien. Alternativamente, lo que podrías hacer es que podrías tomar una línea voy a pegar la línea aquí y voy a llenar el contenedor, y voy a hacerlo un poco genial. Ahí vas. Una línea así como esa. Voy a hacerlo más ligero y luego copiarlo, pegarlo, copiarlo, copiarlo y pegarlo, y luego tienes estos divisores entre cada notificación, y luego tienes una idea de qué notificaciones tienes Voy a recuperar eso. En mi estilo. Lo cavo sin la sombra, así que solo voy a mantener eso porque a veces si quieres asegurarte de que cada elemento y cada rincón sea visible, le pones demasiado peso, demasiada presión al usuario para que perciba todo eso. Estas tarjetas tienen sentido porque necesitas saber que cada una es una carta separada que puedes moverte, que puedes cambiar , lo que sea. Pero aquí, ese no es el caso. Ahora, una cosa que podemos hacer es que podemos agregar el efecto hover. Ya lo hemos hecho antes. Podemos hacerlo de nuevo. Solo puedo agregar esta sombra del 10%, y luego podría hacer esto un poco más oscuro. Y esto es aún más oscuro. Entonces sólo voy a convertir esto en un efecto Haber. Veamos cómo se ve. Es muy rápido. Entonces vamos a hacer Smart animate 200 y vamos a calmarnos con esto Le vamos a dar el 5%. Ahora mira cómo se ve. Con este cambio de color, es un poco demasiado, así que voy a volver a poner eso a donde estaba o intentar al menos. Bueno, ya no es visible. Un poco más oscuro Bien, esto se ve más natural, y ahora es más agradable. Se siente más interactivo ahora que podemos elegir estas cosas, flotar sobre ellas, al menos, y luego otra cosa ¿Bien? Otra cosa que podemos hacer es desplazarnos Llevo mucho tiempo tratando de desplazarme. No sé si te diste cuenta, pero esa sería una gran característica para agregar. ¿Bien? Entonces la forma de hacer esto es igual que aprendimos antes, vamos a hacer que esto llene el contenedor. Así que igual que se va a cortar y se puede ver que hay más contenido. Vaya al prototipo y haga clic en Vertical esta vez. Es decir, la última vez hicimos vertical también, y luego eres capaz de desplazarte hacia abajo. Bien, es tan sencillo como eso. Sólo hay una cosa que me está molestando. Visualmente hablando, se puede ver que las notificaciones no están alineadas con las tarjetas. Cuando pasas el cursor sobre ellos, tiene sentido, pero tal vez nos gustaría cambiar eso. Si quisieras hacer tal cosa, lo que haces es disminuir esto tal vez a 12 y darías solo notificaciones. Lo pondrías en su propio marco y le darías 12 acolchados. De esta manera, estarían alineados. Ahora bien, no estoy seguro de que diferentes personas tengan diferentes preferencias, así que hay que verificar. Pero esto es no lo sé, esto funciona para mí. A mí me gusta cómo se ve. Yo sólo voy a disminuir el espaciado aquí. Y ahora se ve mucho mejor, yo diría, no estoy seguro Definitivamente necesita algo de trabajo, pero sí, esto es genial. Estamos en camino de hacer algo. Ahora, claro, como mencioné antes, también puedes hacerlo mucho más pequeño, pero entonces tendrías que ajustar la ubicación. Sí, siento que esto se ve más natural. Esto se parece más a una app y puedes ver todas tus notificaciones, hacer clic en ellas, elegirlas, sea lo que sea que quieras hacer. Y así es como básicamente puedes usar un pop up o un overlay. Eso es lo que llamamos apigma y cómo puedes crearlo, usarlo, vincularlo con la función de prototipado Muchas gracias por escuchar, y nos vemos en la siguiente lección. 17. Conectar pantallas del panel de control: Todo bien. Entonces en esta lección, nos gustaría seguir adelante y probar algo un poco diferente. Vamos a crear una pantalla completamente diferente. Entonces una segunda pantalla, y en otros casos, tal vez tercera, cuarta, quinta. Pero para esta lección, sólo vamos a hacer una segunda pantalla. Quiero mostrarles muy rápidamente cómo va a suceder, cómo vamos a hacer que suceda y cómo podemos vincularlos de una manera que sea realmente agradable y fluida. Bien, así que lo primero que vamos a hacer es que vamos a aclarar esta área Vamos a llevarlo a un lado. Sólo para que podamos tener un flujo adecuado aquí. A mí me gusta ir de izquierda a derecha y de arriba a abajo, entonces tenemos ese espacio libre. Ahora voy a copiar esto y pegarlo. Ahora tenemos una segunda pantalla. Podemos llamar al primero tablero, y al segundo, podríamos llamarlo tareas. Esta va a ser una pantalla donde expandamos solo el dashboard ver todas las diferentes tareas. Entonces lo primero que voy a hacer es que voy a eliminar el dashboard en el segundo. No hay tablero, pero hay tareas. No obstante, va a ser un tipo de tarea diferente. No va a tener este panel que haga esa animación donde se oculte o se minimice. Vamos a desacoplar la instancia, hacer clic, Separar instancia, y luego vamos a tomar esta pequeña pieza, sacarla, y si, vamos a trabajar con En lugar de tener tareas urgentes y luego tareas más nuevas, estoy pensando en darle forma a esto de manera diferente porque tenemos un equipo y diferentes miembros del equipo tienen diferentes tareas. Vamos a crear algo parecido a otros programas y un ejemplo de programas de gestión de tareas o de gestión de proyectos es Trello, si lo conoces, hay muchos otros tipos de soluciones Vamos a volver a hacerlo, no vamos a reinventar la rueda, vamos a crear algo parecido Te lo estoy admitiendo solo para que tengas eso en mente en lugar de pensar, guau Va a crear algo completamente diferente. No, no voy a hacer eso. Voy a ceñirme a lo que está probado y probado y probado y todo. Todo bien. Entonces ahora voy a quitar estos títulos porque creo que en realidad no nos están ayudando aquí. Sin embargo, estoy pensando en incluir todos estos juntos en un marco, así que voy a poner un diseño automático. Voy a agregarle algo de color. Estoy pensando que tal vez podríamos agregar algo más de color. A lo mejor podría ser muy vibrante esta vez. A lo mejor no tan vibrante. Pero veamos qué podríamos hacer. Bien, eso no se ve bien. Vamos a quitar eso. A ver lo que se nos puede llegar a ocurrir. Entonces queremos un color que no sea demasiado. Entonces a lo mejor estoy pensando en esto. Tal vez ¿por qué no? Algo para estar en el fondo. Y la razón para hacer esto, sólo estoy pensando en cambiarlo. También podríamos elegir el mismo color aquí o elegir un color más oscuro, por lo que podría ser gris en lugar un poco más oscuro. Pero estoy pensando que podríamos incluir un poco más de color aquí porque queremos que las tareas destaquen. Queremos que se vean muy claros. Y así porque las tareas son blancas, así que queremos que el fondo esté en un color diferente, no todo sea de color tan claro. Sí. Entonces vamos a ver ¿y si denominamos estos ish transparentes? Eso es algo que podemos hacer también. Y de esta manera, tenemos mucho más enfoque en las propias tareas. Entonces llegando a este texto, estoy pensando, ¿ podemos colorearlo de blanco? A lo mejor. Entonces tendríamos que hacer esto un poco más oscuro para la legibilidad Pero ahora tenemos que volver a este color y trabajar de nuevo a partir de ahí porque quiero tener claro que es un color similar. Bien, esto no está tan mal. Es algo con lo que puedes trabajar. Es correcto. Bien. No está funcionando a la perfección con este azul, pero es correcto. Entonces ahora tenemos tareas, pero vamos a darles nombres diferentes. Entonces, ¿quiénes son los miembros del equipo que teníamos? Entonces voy a considerar que soy el jefe de proyecto, así que tengo un nombre diferente, que tal vez sea Alan. Y luego vamos a tener a John y Mary. Y luego tenemos otro John, al parecer. No, eso lo cambiamos. ¿Qué fue eso? Laurence. Entonces tenemos a Laurence. Muy bien, entonces copiando ese pegado aquí. Entonces tenemos a Alan John, a Mary Lawrence. Para que podamos cambiar las cosas. Podemos hacer que este contenedor todo llene, así entonces tenemos mucho que ocupa el espacio. Pero para ser honestos, no se ve tan bien. Así que vamos a tomar eso de vuelta. También podemos hacerlo centrado, pero no se ve genial, así que solo lo voy a mantener aquí y te da la posibilidad de agregar algo más. Tal vez podamos demostrarlo en realidad creando algo como esto y luego poniendo un signo más en él. Así que corta esto y pégalo aquí, y ahí vamos. Tenemos esto justo por aquí. Podemos hacerlo un poco más pequeño. Bien. Déjame ponerlo aquí. Perfecto. Entonces tenemos esto. Se ve realmente genial. Lo que podríamos hacer es que tenemos que cambiar los artículos aquí. No queremos que todo sea igual. Y otra cosa que acabo de notar es que estos son dos marcos diferentes, que no queremos. Y así voy a eliminar algunos de estos en realidad. No tienen que tener tantas tareas para ser honestos. Entonces eso es algo a tener en cuenta. Entonces voy a copiar y pegar base. Y entonces como decíamos, Mary tiene muchas más tareas que las otras, y John no tiene tanto que hacer. ¿Correcto? Y una cosa a la que hay que prestar atención es ver también, como, qué nombres aquí, qué caras o qué fotos tenemos aquí. Entonces María debería tener las tarjetas con su nombre y así sucesivamente. Pero esto es algo de lo que podremos encargarnos más adelante. Es decir, no hay necesidad ahora mismo de enfocarse demasiado en estas cosas. Pero sí, así que ahora tenemos esta pequeña configuración agradable yendo Recuerda, esta lección no se trata de crear la segunda pantalla sino de cómo conectarla. Para conectarlo al menú principal o cualquier elemento que tengas aquí para que puedas hacer la transición de esta pantalla a esa. Ahora que lo tenemos configurado, lo primero que quieres hacer es ir al prototipo. La primera pantalla tiene flujo uno. Ahora, solo por facilidad de uso, puedes hacer que este flujo sea dos yendo al prototipo y convirtiéndolo en un punto de partida de flujo. Lo que esto te permite hacer esencialmente es visitar ambas páginas. Bien, ambas pantallas. Puedes ver éste y aquel, y puedes juzgar, Bien, se ve genial, no se ve tan bien, lo que sea. Y entonces puedes venir aquí y hacer lo tuyo sin que te interrumpan. Para que puedas comprobar ambos sin tener que hacer click en el menú porque eso es lo que estamos haciendo ahora mismo. Entonces para hacer esto, vamos a ir a tareas y mantener presionado Control Alt y A para elegir ambos íconos o las mismas instancias cruzadas de elementos, y luego vas a sostener el signo más y llevarlo hasta allí. Entonces ahora tenemos onclick. Va a navegar a las tareas. Yo recomendaría que lo hagas instantáneo porque cuando estás creando especialmente sitios web, es muy difícil hacer animaciones y transiciones realmente geniales. Entonces, dependiendo de lo que tu equipo esté dispuesto a hacer, la mayoría de las veces, haces clic en una página y solo se va a cargar. No va a tener una animación realmente genial menos que estés trabajando en una aplicación web, esa es una historia diferente. Pero por lo general solo va a ser disuelta o instantánea, para ser honestos. Sólo va a cargar la página. Entonces ahora vamos a probarlo. Nosotros venimos aquí. Vamos a la tarea, vamos a darle click. Bam, estamos ahí, ¿de acuerdo? Así como así. Eso dice fácilmente, pero no lo olvides, vuelve a donde estabas. Hagámoslo ahora mismo. Vamos a sostener dashboard en ambas instancias y lo vamos a llevar aquí, lo mismo, ahora vamos a comprobarlo. Así como así, somos capaces de movernos entre páginas. Pero espera un minuto, hay un problema, hay un pequeño detalle. Se trata de lo más destacado. Aquí, todavía tenemos el tablero resaltado y eso no es algo que queramos. Voy a volver aquí. Voy a elegir a ambos manteniendo Control Al a A, y voy a hacer que sea por defecto. Ahora todos están por defecto y voy a venir aquí a esta instancia en esta página y voy a hacerla seleccionada, voy a venir aquí y voy a elegir esta tarea, y voy a hacerla seleccionada también. Ahora vamos a probarlo. Bien. Ahora tenemos un problema. Espera, vamos a recargar esto. Tenemos tablero de instrumentos, se elige el tablero, se selecciona, genial. Ahora vamos a la tarea, se selecciona tarea, la abrimos. Espera un minuto, dice tablero. Bien. Ahora tenemos un problema porque la versión seleccionada del mismo solo dice dashboard, que claramente no es lo que quieres estar viendo. Aquí tenemos un problema, al parecer. Este problema suele surgir de la nomenclatura o de cómo configuras estas versiones Hay que comprobarlo. Ahora vamos a comprobarlo. Esto es por defecto y no, no colapso. Esto es unhover no colapso, y esto se selecciona sin Ahora, volviendo a esto, default, hover, sí, seleccionado, sí Bien, entonces no hay ningún problema aquí. Ahora vamos a checar aquí. ¿Cuál podría ser el problema? A ver. ¿Bien? Esto es normal. Dice default, no collapse, default, no collapse, default, no collapse. Bien. Entonces, lo que estoy pensando que podría ser el tema es el hecho de la nomenclatura. Entonces, a veces los nombres aquí tienen un problema. Entonces solo para estar seguros, voy a llamar a este botón de tareas. ¿Bien? Y entonces hay que nombrar cada instancia. Entonces volviendo a esta instancia, voy a llamarlo botón de tareas. Tiene que ser exactamente el mismo escrito, ¿de acuerdo? Entonces ahora vamos a comprobarlo. Bien. Todavía me está dando el mismo tema. Bien, así que acabo recargar la página y ya no tenemos el error Entonces, cuando abres esto, no te muestra nada resaltado, ¿de acuerdo? Entonces ves esta página, estamos en esta página, y luego cuando la abres, ves todas las opciones que puedes abrir. Así como así, puedes ir al tablero de instrumentos. No hay problemas con los íconos. ¿Bien? Ahora bien, así es como básicamente puedes vincular muy fácilmente dos pantallas diferentes juntas. Y de esta manera también es realista. No estamos haciendo nada loco. Hay algunas cosas que puedes arreglar como este radio de esquina, por ejemplo, horrible. Esto es mucho mejor, no perfecto, pero mucho mejor. Pero sí, así es básicamente como puedes seguir adelante y conectar dos pantallas diferentes usando un menú. Se trata solo de prototipado, diferentes tipos de disparadores, diferentes tipos de acciones, pero al final, llegamos ahí y lo hacemos, y eso es lo importante Muchas gracias por escuchar y nos vemos en la siguiente lección. 18. La vista previa y las pruebas del prototipo.: Bien, entonces ahora llega a la parte más importante, que es compartir tu trabajo. Después de todo, has puesto mucho trabajo duro y ahora necesitas compartirlo con el mundo, compartirlo con tus compañeros, con tus clientes, quienquiera que sea, necesitas sacar tu trabajo ahí fuera. Hay diferentes maneras de hacerlo. Una forma que es muy sencilla es hacer clic en el botón azul grande. Sé que es bastante obvio, así que es fácil, pero sólo tengo que hacer una nota. Hay dos tipos diferentes de compartir. Puedes compartir el archivo como en este archivo de diseño, o puedes compartir el prototipo y dice que compartes prototipo. Se ven muy similares, pero en realidad son cosas diferentes. Presta atención cuando estés haciendo eso. La forma de hacer esto en ambos casos es seguir adelante y hacer clic en Copyink así, tienes un enlace También puedes invitar a alguien escribiendo su correo electrónico, pero lo más importante, antes de hacer algo de esto, sigue adelante y da clic en Solo Personas Invitadas y cámbialo a cualquiera. Cuando haces eso, también puedes agregar una contraseña requerida. Pero cuando lo haces necesitas una cuenta profesional para eso solo para avisarte. Pero cuando hagas eso, podrás compartirlo con cualquiera simplemente usando el enlace. Si tienes varias personas dentro de un proyecto, especialmente si compartes el archivo, el archivo de diseño, también puedes decidir quién es el propietario, quién es editor, comentarista, etc., tienes un par de opciones diferentes para compartir Puedes copiar el enlace de DevMDE para dárselo a un desarrollador. Puedes copiar el enlace prototipo, que es lo que estábamos haciendo aquí y puedes publicarlo en la comunidad u obtener un código embed. Todo bien. Y hay una forma más de compartir tu prototipo, que es exportándolo. Puedes hacerlo haciendo clic directamente en cualquier fotograma o múltiples fotogramas, yendo a exportar y agregando una exportación. Puedes decidir si quieres ser PNG, JPEG, SVG o PDF. Y hay más configuraciones para que explores, o puedes seguir adelante y simplemente exportarlo desde aquí, que es yendo al archivo, pestaña, la opción de archivo y luego yendo ya sea a exportar o exportar marcos a PDF. Es tan sencillo como eso. No es tan complicado, pero solo tienes que preguntarte, ¿cuál es la mejor manera de compartir el archivo con tus clientes o con tus compañeros o con las personas con las que lo estés compartiendo? Tienes que hacerte esa pregunta y obtener una buena respuesta. Muchas gracias por escuchar, y nos vemos en la siguiente. 19. Proyecto de clase: diseña tu propio panel de control SaaS: Y ahora es tu turno de crear tu propio dashboard. Para este proyecto de clase, vas a diseñar tu propia variación de un panel SAS utilizando las técnicas y flujos de trabajo que hemos cubierto a lo largo de este curso. Puedes elegir entre construir sobre el tablero que ya hemos creado, para seguir adelante, optimizarlo y hacerlo aún mejor, o puedes seguir adelante y elegir hacer tu propio tablero con una industria completamente diferente o casos de uso completamente diferentes. Por ejemplo, puedes crear un dashboard para finanzas de gestión de proyectos, para una app de fitness o cualquier otro dashboard SAS que te gustaría crear. Comienza definiendo el propósito de tu dashboard y luego identificando los diferentes tipos de información que los usuarios necesitan ver. Después de eso, sigue adelante y haz una maquetación general de cómo será el diseño. Comience a crear sus componentes reutilizables, diferentes secciones y comprender cómo se mostrará la información. Y por supuesto, no olvides aplicar un estilo consistente a tu diseño. Ahora, una vez que su panel esté completo, continúe y agregue algunas interacciones, posiblemente alguna animación para demostrar cómo los usuarios usarían su tablero. Y por supuesto, asegúrate de que sea una experiencia amena, algo que la gente estaría encantada de ver e interactuar con, desde las grandes animaciones y funciones hasta las micro interacciones más pequeñas. Una vez que hayas terminado, sube una captura de pantalla de tu tablero o comparte un enlace de prototipo de Figma y simplemente colócalo en la sección de galería de proyectos Por supuesto, siéntase libre de incluir una breve explicación de sus decisiones de diseño o cualquier comentario que explique qué tipo de tablero estaba tratando de crear. Este proyecto es tu oportunidad de seguir adelante y tomar todo lo que hemos aprendido, para practicarlo y aplicarlo de una manera que muestre tus propias ideas y creatividad únicas. Así que empecemos a diseñar. 20. ¡Felicidades!¿Qué sigue?: Enhorabuena por terminar el curso. Ahora ha completado un proyecto completo de panel SAS desde el concepto hasta el prototipo. A lo largo de la clase, has practicado planeación, diseño de maquetación, creación de componentes, jerarquía visual , diseño de interfaces y muchas otras habilidades que se traducen directamente y se transfieren a proyectos y habilidades reales de IX. A medida que continúas aprendiendo, te animo mucho a seguir adelante y crear más conceptos de tablero, rediseñar productos existentes y explorar diferentes industrias y casos de uso Cada proyecto que practiques en este momento no solo se sumará a tu portafolio, sino que también fortalecerá tus habilidades de diseño. Si aún no lo has hecho, asegúrate de haber subido tu proyecto como captura de pantalla o como enlace a la galería del proyecto. Realmente me encantaría ver qué se les ocurrió a ustedes y cómo personalizan sus propios proyectos. Como siempre, si has disfrutado de esta clase, por favor considera dejar una reseña. Realmente nos ayuda a mejorar las clases futuras y también ayuda a otros estudiantes a descubrir este curso. Muchas gracias por acompañarme, y los veré en el próximo proyecto.