Clase 18 UI Kits _ Moodboard

Vista previa del material en texto

UI KITS & MOODBOARD
 Clase 18. DISEÑO UX/UI
Obligatoria siempre. Lleva el ícono y el color del curso (provisto por CH).
RECORDÁ PONER A GRABAR LA CLASE
LO MÁS RELEVANTE DE LA CLASE 17
Leyes aplicadas a UX: Es la recopilación de leyes o normas de diseño que los diseñadores deben tener en cuenta a la hora de pensar y mejorar la experiencia de usuario. Estas leyes no pertenecen directamente a la disciplina de UX-UI pero debemos tenerlas presentes.
GLOSARIO:
Clase 17
Ley de Fitts: Es un modelo del movimiento humano, que predice el tiempo necesario para moverse rápidamente desde una posición inicial hasta una zona destino final como una función de la distancia hasta el objetivo y el tamaño de éste. Cuando esperamos que el usuario haga clic en un elemento de interacción, el tamaño del elemento y su posición con respecto al punto de partida del cursor importan.
Ley de Hick: Se emplea para operaciones sencillas, no es aplicable en casos de decisiones complejas. El tiempo de respuesta es mayor cuando existen más estímulos donde elegir. El tiempo que se tarda en adoptar una decisión, aumenta a medida que se incrementa el número de opciones.
GLOSARIO:
Clase 17
Ley de Tesler: Para cualquier proceso existe un nivel básico de complejidad, inherente al propio proceso. Una vez alcanzado ese nivel mínimo no se puede simplificar más, sólo se puede mover la complejidad de un lado a otro.
Ley de Miller: Las personas pueden recordar hasta 7 elementos distintos en su memoria de trabajo. Más de 7 elementos genera confusión por eso en aplicaciones o servicios que tiene multitud de opciones, se agrupan estás para reducir la carga de memoria.
GLOSARIO:
Clase 17
Efecto de posición de una serie: Los usuarios siempre recordarán mejor el primero y el último. El primero y el último es la razón por la cual vemos que en la barra de navegación de las aplicaciones se colocan las acciones más importantes a la izquierda o a la derecha, las cuales implementan elementos como inicio o perfil teniendo en cuenta la posición en serie.
Efecto de posición de una serie: Predice que cuando hay varios objetivos, siempre se recordará el que difiere del resto.
Guías de estilos: son documentos que ofrecen a los desarrolladores de aplicaciones un conjunto de recomendaciones destinadas a mejorar la experiencia para los usuarios.
GLOSARIO:
Clase 17
Human Interface: Es una normativa de diseño enfocado en la visualización del sistema operativo IOS. Se destaca por la profundidad y claridad en el uso de elementos visuales.
Material Design: Es una normativa de diseño enfocado en la visualización del sistema operativo Android. Se destaca por el uso de la profundidad, las superficies, los bordes y las sombras. 
CRONOGRAMA DEL CURSO
Clase 19
Accesibilidad
REVISANDO Y APLICANDO ACCESIBILIDAD AL PROTOTIPO
Clase 17
Estándares y Guidelines
WIREFRAMES CON GUIDELINES
Clase 18
UI Kit y Moodboard
UI KIT+MOODBOARD
& ICON DESIGN
DEFINIENDO EL MOODBOARD Y ARMANDO EL UI Kit DEL PROYECTO
GENERAR NUESTRO
ICONO DE LA APP
ENTREGA PROYECTO 5
Conocer, obtener y utilizar Kits de Diseño UI
Identificar el cambio de paradigma en el proceso de Diseño UI. 
Relacionar el concepto de Icon Design con Responsive Web Design).
OBJETIVOS DE LA CLASE
No va, es para guiar el uso del plantilla.
MAPA DE CONCEPTOS CLASE 18
ITERAR
Analizar
Diseñar
Validar
Prototipar
Evaluar
EVALUACIÓN HEURÍSTICA
UI Kit & MOODBOARD
SIGNO IDENTIFICATORIO
¿ARRANCAMOS?
ICON DESIGN
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
El signo identificatorio de una app tiene por objetivo generar interés e impacto visual en los usuarios. 
También sirve para identificarla en el listado de app disponibles del celular. No importa cuán genial sea su ícono, si una aplicación no es útil, el usuario la eliminará.
SIGNO IDENTIFICATORIO
ICONO DE LA APP
EL ICONO DEBE SER:
Escalable
No solo aparecen en la página de inicio, sino que también en submenús con un tamaño aún más reducido.
Simple
Los usuarios no deben esforzarse en comprenderlo. Centrarse en la idea y deshacer cualquier elemento innecesario o repetitivo.
Consistente
Insinúa la funcionalidad de la aplicación y mantén el mismo estilo y colores que la aplicación misma.
Usar para slides de texto con iconos. Sacar íconos de https://www.flaticon.com/
ESCALABLE
Usar para slides de texto con iconos. Sacar íconos de https://www.flaticon.com/
SIMPLE
Usar para slides de texto con iconos. Sacar íconos de https://www.flaticon.com/
CONSISTENTE
Usar para slides de texto con iconos. Sacar íconos de https://www.flaticon.com/
¿COMO PUEDO CONSTRUIR UN ICONO?
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Este abordaje consiste en combinar tres elementos (una letra, una textura y un objeto representativo del proyecto). En su mayoría la letra o el objeto sirven como base donde se colocara la textura y el elemento restante.
Es posible realizarlo también en la combinación de dos símbolos.
LETRA+SÍMBOLO+TEXTURA
O 
SIMBOLO+SIMBOLO
LETRA+SÍMBOLO+TEXTURA
SÍMBOLO+SIMBOLO
¿QUÉ TAMAÑO DE ICONO USAR?
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
 ¿Te has preguntado alguna vez cómo se comportaría el diseño de signo identificatorio en la pantalla de un smartwatch? 
¿o simplemente cómo debe verse nuestro logotipo en el reducido espacio del top menú de tu web en la pantalla de nuestro móvil?
 Y si necesitas una app, ¿cómo se vería tu logo entre el resto de iconos app en la pantalla inicial de tu móvil? 
RESPONSIVE LOGO / ICONO
El uso de diferentes dispositivos con tamaños de pantalla variables crea la necesidad de diseñar logos que se adapten a escenarios diversos. 
VEAMOS UN EJEMPLO
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
VEAMOS CÓMO SE APLICA DEPENDIENDO LA RESOLUCIÓN DEL DISPOSITIVO
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
En la mayoría de los casos se suele especificar 4 tamaños para cada versión y suelen estar aproximadamente entre estas medidas (son sólo orientativas, ya que el tamaño puede variar con los diferentes tipos de marcas):
S= 48 x 48 M=240 x 84 L=280 x 120 XL=190 x 340
TAMAÑO RESPONSIVE DEL LOGO/ ICONO
GENERANDO NUESTRO
ICONO DE LA APP
Diseñando nuestro Icon Design
TIEMPO: 25 MINUTOS
Icono de la APP
Tiempo estimado: 25 minutos
Espacio: Breakout Rooms
PARTE 1
Consigna: En breakout rooms, cada estudiante deberá realizar el boceto de su icono usando alguno de los dos abordajes vistos (simbolo+simbolo o letra+textura+símbolo).
NOTA: esta parte de la actividad será guiada por el tutor en los breakout rooms y buscará generar que los estudiantes elaboren un boceto inicial.
PARTE 2
Consigna: El tutor solicitará a algunos estudiantes que muestren sus resultados y entre todos darán feedback teniendo en cuenta los tres principios:
Escalable: ¿funciona en reducción?
Simple: ¿identificar formas geometricas simples?
Consistente: ¿dice algo de la app que estoy desarrollando?).
NOTA: esta parte de la actividad será guiada por el tutor en los breakout rooms y buscará generar conversación entre los estudiantes.
¿Cómo llevar adelante la actividad?
Paso 1: El/la docente dividirá la clase de Zoom en varias salas/rooms, distribuyendo a los estudiantes de manera equitativa para hacer las pruebas.
Paso 2: En cada sala, quedará a cargo un tutor o el docente, quien guiará la actividad.Paso 3: Un estudiante activará el micrófono y mostrará su boceto de icono. Entre todos veremos si cumple con los tres principios (escalabilidad-simpleza-consistencia).
Paso 4: Hacer un cierre de la actividad. El docente y/o tutor/a puede hacer una reflexión de los relevante de su sala.
GENERANDO NUESTRO ICONO DE LA APP
PRIMERA PARTE
Consigna: En las Breakout Rooms, cada estudiante deberá realizar el boceto de su icono usando alguno de los dos abordajes vistos (simbolo+simbolo o letra+textura+símbolo).
NOTA: esta parte de la actividad será guiada por el/la tutor/a en cada sala y motivará que los estudiantes generen un boceto inicial.
Icono de la APP
Tiempo estimado: 25 minutos
Espacio: Breakout Rooms
PARTE 1
Consigna: En breakout rooms cada estudiante deberá realizar el boceto de su icono usando alguno de los dos abordajes vistos (simbolo+simbolo o letra+textura+símbolo).
NOTA: esta parte de la actividad será guiada por el tutor en los breakout rooms y buscará generar que los estudiantes elaboren un boceto inicial.
PARTE 2
Consigna: El tutor solicitará a algunos estudiantes que muestren sus resultados y entre todos darán feedback teniendo en cuenta los tres principios:
Escalable: ¿funciona en reducción?
Simple: ¿identificar formas geometricas simples?
Consistente: ¿dice algo de la app que estoy desarrollando?).
NOTA: esta parte de la actividad será guiada por el tutor en los breakout rooms y buscará generar conversación entre los estudiantes.
¿Cómo llevar adelante la actividad?
Paso 1: El/la docente dividirá la clase de Zoom en varias salas/rooms, distribuyendo a los estudiantes de manera equitativa para hacer las pruebas.
Paso 2: En cada sala, quedará a cargo un tutor o el docente, quien guiará la actividad.
Paso 3: Un estudiante activará el micrófono y mostrará su boceto de icono. Entre todos veremos si cumple con los tres principios (escalabilidad-simpleza-consistencia).
Paso 4: Hacer un cierre de la actividad. El docente y/o tutor/a puede hacer una reflexión de los relevante de su sala.
GENERANDO NUESTRO ICONO DE LA APP
SEGUNDA PARTE
Consigna: El tutor solicitará a algunos estudiantes que muestren sus resultados y entre todos darán feedback teniendo en cuenta los tres principios:
 1. escalable: ¿funciona en reducción?
 2. simple: ¿identifica formas geometricas simples? 
3. consistente: ¿dice algo de la app que estoy desarrollando?.
NOTA: esta parte de la actividad será guiada por el tutor en los breakout rooms y buscará generar conversación entre los estudiantes.
Icono de la APP
Tiempo estimado: 25 minutos
Espacio: Breakout Rooms
PARTE 1
Consigna: En breakout rooms cada estudiante deberá realizar el boceto de su icono usando alguno de los dos abordajes vistos (simbolo+simbolo o letra+textura+símbolo).
NOTA: esta parte de la actividad será guiada por el tutor en los breakout rooms y buscará generar que los estudiantes elaboren un boceto inicial.
PARTE 2
Consigna: El tutor solicitará a algunos estudiantes que muestren sus resultados y entre todos darán feedback teniendo en cuenta los tres principios:
Escalable: ¿funciona en reducción?
Simple: ¿identificar formas geometricas simples?
Consistente: ¿dice algo de la app que estoy desarrollando?).
NOTA: esta parte de la actividad será guiada por el tutor en los breakout rooms y buscará generar conversación entre los estudiantes.
¿Cómo llevar adelante la actividad?
Paso 1: El/la docente dividirá la clase de Zoom en varias salas/rooms, distribuyendo a los estudiantes de manera equitativa para hacer las pruebas.
Paso 2: En cada sala, quedará a cargo un tutor o el docente, quien guiará la actividad.
Paso 3: Un estudiante activará el micrófono y mostrará su boceto de icono. Entre todos veremos si cumple con los tres principios (escalabilidad-simpleza-consistencia).
Paso 4: Hacer un cierre de la actividad. El docente y/o tutor/a puede hacer una reflexión de los relevante de su sala.
ACUERDOS
Presencia
Escucha Activa
Apertura al aprendizaje
Todas las voces
ACUERDOS
Presencia
Participar y “estar” en la clase, que tu alrededor no te distraiga.
Escucha Activa
No es lo mismo escuchar que “escuchar”, escuchar más allá de lo que la persona está expresando directamente.
Apertura al aprendizaje
Siempre, pero siempre puedes seguir aprendiendo. Compartir el conocimiento es válido, la construcción colaborativa es la propuesta.
Todas las voces
Escuchar a todos, todos podemos reflexionar. Dejar el espacio para que todos podamos participar.
UI KITS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Los UI kit (del inglés: User Interface kit) es un archivo/documento que incluye varios elementos ya prediseñados (como por ejemplo: botones, iconos, tablas, formularios, sliders, etc.) para ayudarnos en el desarrollo de nuestras interfaces de usuario. 
Se pueden editar fácilmente (los elementos en un UI kit suelen estar hechos con capas), de manera que podemos personalizarlos o adaptarlos a nuestras necesidades (cambiar tamaño, color, etc.).
KITS RECURSOS 
DE DISEÑO DE LA INTERFAZ 
Usar para slides de texto con imagen.
NOS AYUDA A DEFINIR CÓMO SERÁ LA MORFOLOGÍA DE NUESTROS COMPONENTES
Usar para slides de texto con imagen.
Usar para slides de texto con imagen.
Nos ayudan a mejorar y agilizar nuestros diseños o explorar nuevos caminos, ya que al descargarnos un UI kit entero podemos descubrir elementos o soluciones a problemas de diseño en los que ni siquiera habíamos pensado.
Un UI kit sirve para ahorrar tiempo y dinero, ya que supone un magnífico punto de partida sobre el que empezar a trabajar nuestra interfaz, sin necesidad de diseñar desde cero todos los elementos y detalles.
¿PARA QUÉ SE UTILIZAN?
Comunicación con desarrolladores
Estados de cada componente
Comportamiento de componentes (documentación)
Sintetizar (evita diseñar todo)
Prevenir errores (incoherencias)
¿QUÉ ES LO IMPORTANTE DE UN UI KIT?
Usar UI Kits vectorizados. 
Si bien hay gran cantidad de Kits UI PSD, no se recomienda usarlo para diseñar UI, si para el uso y armado de Mockups (trabajando conjuntamente con el AI). Es un programa especialista para retoque digital, imágenes, montajes. 
Necesitamos usar elementos vectorizados, AI, PDF’s editables, svgs (vectores web) que puedan ser escalables, livianos y reutilizables fácilmente.
¿QUÉ FORMATOS SON LOS MÁS RECOMENDABLES?
¿QUE DEBO INCLUIR EN MIS UI KITS?
UI KITS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Los UI kit (del inglés: User Interface kit) es un archivo/documento que incluye varios elementos ya prediseñados (como por ejemplo: botones, iconos, tablas, formularios, sliders, etc.) para ayudarnos en el desarrollo de nuestras interfaces de usuario. 
Se pueden editar fácilmente (los elementos en un UI kit suelen estar hechos con capas), de manera que podemos personalizarlos o adaptarlos a nuestras necesidades (cambiar tamaño, color, etc.).
KITS RECURSOS 
DE DISEÑO DE LA INTERFAZ 
Usar para slides de texto con imagen.
Usar para slides de texto con imagen.
Definir al menos tres colores:
Principal
Secundario
Acento
Sistema de Color
Usar para slides de texto con imagen.
Definir cuáles serán los iconos a utilizar y los estados:
Activo
Inactivo
Sistema de Iconos
Usar para slides de texto con imagen.
Definir la familia y variable tipográfica que se utilizará para, al menos, las siguientes jerarquías:
Titulo 1
Bajada
Citas
Párrafos y Textos
Botones
Tipografia
Usar para slides de texto con imagen.
Definir cada uno de los elementos que se usarán. Estos son solo algunos:
Barras (superiores, inferiores)
Formulario (selectores, campos de textos, botones).
Tarjetas (texto solo. Texto+imagen, etc)
Controles (medidores, activar, etc).
Si el componente tieneestados (ej: activo, inactivo), se debe mostrar también.
Componentes
Usar para slides de texto con imagen.
Definir los botones (ten presente el sistema operativo elegido):
Botón Principal
Botón Secundario
Botón Terciario
Y sus estados:
Activo
Inactivo
Presionado
Botones
Usar para slides de texto con imagen.
Puedes definir aquellas ilustraciones o elementos específicos que tu UI Kits necesite. Ej: mapa, selector de asiento de cine, entre otros.
Ilustraciones y elementos específicos
Usar para slides de texto con imagen.
VEAMOS UN EJEMPLO
Usar para slides de texto con imagen.
MOODBOARD
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Es un tablero visual que contiene distintos elementos estéticos que nos sirvan para diseñar la UI. 
Permite definir el clima visual del proyecto y corroborar con el cliente si es lo que este esperaba. Nos ayuda a identificar el tema y el espíritu visual de una idea, abriendo nuestra creatividad, y enfocando y dando forma a nuestras ideas.
MOODBOARD
CREACIÓN DE MOODBOARDS 100% UI
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Usar para slides de texto con imagen.
TIPS PARA REALIZAR UN MOODBOARD
Buscar apps similares, ver su estilo visual.
Entender conceptual / climáticamente qué queremos transmitir.
Tomar los elementos de las pantallas que nos sirvan para inspirarnos, como cajas, botones, patrones.
Seleccionar 1 tipografía principal y otra complementaria.
Armar una posible paleta de los colores que usaremos.
Definir el estilo de las imágenes.
Objetivo: Tener un tablero visual, con todos aquellos elementos estéticos que nos sirvan para diseñar la UI.
Usar para slides de texto con imagen.
Usar para slides de texto con imagen.
Comunicación con el cliente. Elegir posibles caminos.
Análisis del trabajo propio. Búsqueda y ordenamiento de las opciones. Visualización de un todo.
Poner en palabras lo visual: ayuda a tener el rumbo más acertado.
¿QUÉ ES LO IMPORTANTE DE UN MOODBOARD?
¿COMO HACER UN MOODBOARD?
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Elige palabras claves que transmitan lo que quieras sentir, que definan tu proyecto. No escribas demasiadas: ve a lo esencial.
 
Intenta limitarte a un máximo de 5 palabras. Escribe también un título para tu moodboard. Intenta no repetir las mismas palabras con tus keywords y tu título.
1
PALABRAS CLAVES Y TÍTULO
Busca todo lo que te ayude a transmitir tus palabras. En este proceso, tienes que ir a lo principal y buscar únicamente aquellos elementos del moodboard que van a ayudarte a transmitir lo que deseas. 
Puedes buscar referencias en Behance, Dribble o Pinterest.
2
RECOPILAR IMÁGENES
Coloca en un soporte, en este caso digital, aquellas imágenes, colores, tipografías, texturas, ilustraciones que te ayuden a mostrar de manera clara tu idea general. 
3
ELEGI UN SOPORTE
VEAMOS ALGUNOS EJEMPLOS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
¡PARA PENSAR!
La siguiente imagen ¿Qué clima visual transmite?
MULTIPLE CHOICE
CONTESTA LA ENCUESTA DE ZOOM
MULTIPLE CHOICE
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break.
1
Pregunta: La siguiente imagen ¿Qué clima visual transmite?
Opciones:
Deporte Extremo
Deporte Lifestyle
Deporte Alto Rendimiento
2
Pregunta: La siguiente imagen ¿Qué clima visual transmite?
Opciones:
Deporte Extremo
Deporte Lifestyle
Deporte Alto Rendimiento
Cerrar esta encuesta con la conclusión que el tipo de moodboard define el clima de la marca.
MULTIPLE CHOICE
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break.
1
Pregunta: La siguiente imagen ¿Qué clima visual transmite?
Opciones:
Deporte Extremo
Deporte Lifestyle
Deporte Alto Rendimiento
2
Pregunta: La siguiente imagen ¿Qué clima visual transmite?
Opciones:
Deporte Extremo
Deporte Lifestyle
Deporte Alto Rendimiento
Cerrar esta encuesta con la conclusión que el tipo de moodboard define el clima de la marca.
¡PARA PENSAR!
Y esta imagen ¿Qué clima visual transmite?
MULTIPLE CHOICE
CONTESTA LA ENCUESTA DE ZOOM
MULTIPLE CHOICE
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break.
1
Pregunta: La siguiente imagen ¿Qué clima visual transmite?
Opciones:
Deporte Extremo
Deporte Lifestyle
Deporte Alto Rendimiento
2
Pregunta: La siguiente imagen ¿Qué clima visual transmite?
Opciones:
Deporte Extremo
Deporte Lifestyle
Deporte Alto Rendimiento
Cerrar esta encuesta con la conclusión que el tipo de moodboard define el clima de la marca.
MULTIPLE CHOICE
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break.
1
Pregunta: La siguiente imagen ¿Qué clima visual transmite?
Opciones:
Deporte Extremo
Deporte Lifestyle
Deporte Alto Rendimiento
2
Pregunta: La siguiente imagen ¿Qué clima visual transmite?
Opciones:
Deporte Extremo
Deporte Lifestyle
Deporte Alto Rendimiento
Cerrar esta encuesta con la conclusión que el tipo de moodboard define el clima de la marca.
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
Obligatoria siempre.
DEFINIENDO EL MOODBOARD Y
ARMANDO EL UI KITS DEL PROYECTO
Paso a paso
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4:Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
👏🏻
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kit del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
C
+
=
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a laspalabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
VAMOS A EMPEZAR CON EL MOODBOARD
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Palabras Claves
Hogar
Calidad
Alegre
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Referencias
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberárealizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Soporte
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
OPCION: “ESTILOS”
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entreotros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Definir “Estilos” en Figma
Seleccione los objetos a los que le gustaría aplicar un estilo.
En el panel Propiedades, haga clic en el Icono de estilo junto a la propiedad que desea actualizar.
En el “Menú Estilos”, verá sus Estilos locales y cualquier estilo generados.
Busque y seleccione el estilo que desea usar para aplicarlo a los objetos seleccionados. El selector de estilo se puede ver como una lista o cuadrícula.
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Definir “Estilos” en XD
Seleccione los objetos a los que le gustaría aplicar un estilo.
En el panel Activos, haga clic en el Icono “+”.
En “Activos”, verá sus Estilos locales y cualquier estilo generados.
Busque y seleccione el estilo que desea usar para aplicarlo a los objetos seleccionados. El selector de estilo se puede ver como una lista o cuadrícula.
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos pluginsque ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
INCORPORANDO COLOR AL PROTOTIPO
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Código Cromatico
Para generarlo, recomendamos usar tres colores. Uno primario, uno secundario y uno de acento.
COLOR PRIMARIO
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles,forms e inputs, ilustraciones.
COLOR
SECUNDARIO
Usar el modo de color HSB (Matiz, Saturación, Brillo). Al “S” del color primario bajarlo a 5 y el B aumentarlo a 100.
Código Cromatico
Para generarlo, recomendamos usar tres colores. Uno primario, uno secundario y uno de acento.
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
COLOR
ACENTO
Usar el color complementario.
Puedes apoyarte de las herramientas de color de MATERIAL DESIGN o ADOBE COLOR.
Código Cromatico
Para generarlo recomiendo usar tres colores. Uno primario, uno secundario y uno de acento.
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Código Cromatico
Porcentajes
Te recomendamos usar estos porcentajes de color para asegurarte diseños más armónicos.
60%: Color Primario
30%: Color Secundario
10%: Color Acento
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento.Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Código Cromatico
Porcentajes
Te recomendamos usar estos porcentajes de color para asegurarte diseños más armónicos.
30%: Color Primario
60%: Color Secundario
10%: Color Acento
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
UI KITS Y COMPONENTES
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de componentes tales como botones y mostrará el concepto de estados (activo, inactivo); y que también puede haber jerarquías de botones (secundario y primario). El cuanto a los elementos más complejos se mostraran algunos plugins que ayuden a realizarlos.
¿Cómo llevar adelante la actividad?
Paso 1: En primera instancia armar el moodboard en base a las palabras claves, hacer una pequeña búsqueda de referentes en behance y finalmente armar el moodboard.
Paso 2: Hablar acerca de la opción “Estilos” y mostrar cómo funciona en ambos programas. El objetivo es que vean como deben empezar a pensar en elementos que sean fáciles de modificar optimizando el tiempo del proyecto. Hablar acerca de que se pueden definir estilos de tipografía, colores, entre otros.
Paso 3: Hablar del código cromático y mostrar un posible abordaje a la generación del mismo. Definir el color primario, secundario y de acento. Mostrar como generar el color secundario a partir del MODO HSB de color. Finalmente mostrar cómo los porcentajes son ayudan a generar interfaces con un uso correcto del color.
Paso 4: Una vez definido el color mostrar como se pueden usar porcentajes de color para armar las interfaces.
Paso 5: Aclarar que es preferible tener un FRAME destinado a los elementos del UI KITS o pueden crear una página nueva.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla (HOY ESTAMOS ACA)
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
1. El estudiante debe comprender la fundamentación de cada uno de los elementos y como el uso del color ayuda a los usuarios a navegar o le dan feedback.
2. Lograr que el estudiante relacione el concepto de Componentes con la generación de UI KITS. 
3. Como buena práctica se recomienda que generen los componentes maestros aparte, se retoman conceptos de la clase a atomic design.
2. Una estructura esperable de ui kits seria: elementos tipográficos, iconográficos, código cromático, barras, tarjetas, botones, controles, forms e inputs, ilustraciones.
Definiendo el Moodboard y Armando el UI Kits del proyecto: Paso a paso
Duración estimada: 45 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá realizar el ui kits del caso testigo. En principio deberá empezar por la definición de los elementos más generales (color, tipografía, iconos). En una segunda parte hablar acerca de los componentes como los botones, inputs, card y por último hablar de elementos más completos y particulares de cada proyecto. Se deberá definir un código cromático de por lo menos tres colores (primaria, secundario y acento). Luego se pasará a la instancia de