Transcripciones
1. Introducción a la clase: Los kits de Ui son realmente útiles si estás trabajando en un proyecto pequeño o grande porque te van a ahorrar un montón de tiempo con estas tareas repetitivas. Te van a ayudar a entregarlo a tus clientes y desarrolladores mucho más rápido. Y te van a dejar con más tiempo libre para ti. Los niños entran, mi nombre es Alex, soy creador de un producto y hasta ahora he creado cuatro o 500 productos de diseño y también nuestro creador de cursos. Y hasta ahora he creado más de 20 cursos. En esta clase de Skillshare, vamos a hablar de kits de interfaz de usuario y por qué son útiles. Vamos a cubrir para qué nuestros kits de interfaz de usuario y para qué se pueden utilizar. Cuáles son los tres tipos principales de kit de interfaz de usuario y por qué cada uno de ellos es bueno. ¿ Cuál es la diferencia entre los kits de interfaz de usuario y los sistemas de diseño? Cómo elegir componentes importantes para tus propios Kits de UI, cómo estructurar, crear y guardar tu kit de UI en Adobe XD. Y finalmente, cuál es la diferencia entre kits de interfaz de usuario gratuitos
y premium y cómo puedes vender los tuyos propios si quieres, y mucho más. Tu proyecto de clase para esta clase es crear tu propio kit de UI. Puedes usar Adobe XD o cualquier otro software para un asunto, simplemente
puedes elegir algunos elementos, guardarlos como JPEG y subirlos a tus proyectos de clase. Y me emociona mucho ver lo que se les puede llegar a ustedes chicos y cuáles son algunos diseños que se pueden crear para este proyecto de clase. Por lo que espero verte en el final de clase para mostrarte cómo sois niños se pueden utilizar para mejorar tu productividad sin importar en qué tipo de proyectos de IU estés trabajando. Entonces te veré en clase.
2. Qué son la UI kits y por qué son útiles: Los kits de Ui son básicamente solo colección de diferentes elementos que puedes usar para tus proyectos de diseño de UI. Esos proyectos pueden variar desde proyectos de diseño móvil hasta proyectos de diseño de sitios web hasta proyectos de diseño de
productos como dashboards y aplicaciones web y proyectos de esa naturaleza. Pueden venir en diferentes tipos de archivos. Por ejemplo, Photoshop, Sketch, Illustrator, Figma, Adobe XD. Y en esta clase nos vamos a centrar en Adobe XD. También pueden ser imágenes de ancho y sin imágenes. Y vamos a explorar algunas diferencias entre esos dos tipos. ¿ Por qué es uno mejor que el otro y al revés? Y principalmente vas a usar estos kits de interfaz de usuario para acelerar tu flujo de trabajo porque vas a hacer estas tareas repetitivas, especialmente en el diseño de la interfaz de usuario. Por ejemplo, vas a crear navegaciones para todos tus proyectos. Entonces en lugar de una recreación de esa navegación per se para cada proyecto en particular, solo
vas a crear un tipo de navegación y luego simplemente expande tu ideación a partir de ese tipo de navegación, que también te voy a mostrar más adelante en esta clase. Entonces básicamente vas a acelerar tu flujo próxima vez cuando inicies un proyecto de diseño, porque vas a tener todos estos diferentes tipos de archivos guardados en tu computadora. Y entonces básicamente van a poder usar y reutilizar todos estos diferentes elementos para todos tus diferentes proyectos. Ahora porque vamos a trabajar en Adobe XD, vamos a trabajar con componentes y vas a
poder reutilizar esos componentes para cambiar los colores,
para cambiar los tipos de archivo, para cambiar la estructura, para cambiar la sombra de fondo, por ejemplo, para cambiar los colores y mucho, mucho más. Con tus hijos, vas a poder adaptarte a diferentes proyectos. Entonces, una vez más, por ejemplo, si estás creando en Adobe XD per se, puedes crear componentes para, por ejemplo, diseño de
sitios web en pantalla completa, Digamos que 1920 por 1080, entonces puedes bajar y crear redimensiona tamaños para sus proyectos de diseño responsive. Lo mismo vale para los diseños móviles. Por ejemplo, creas tu kit de interfaz de usuario para aplicaciones de iOS. Entonces quieres crear ese mismo kit de UI para que funcione en Android. Va a ser mucho más sencillo cuando realmente
tengas los tipos de archivos y archivos ya preparados, después para hacerlo desde cero. Y esto te va a permitir cobrar más por tus proyectos porque vas a poder entregar más rápido. Porque vienes preparado con estos chicos y lo preparas todos estos elementos para tus futuros proyectos. Por lo que en el siguiente video, vamos a explorar estas diferencias entre kits de interfaz de usuario con imágenes y sin imágenes. ¿ Cuáles son algunos beneficios e inconvenientes de cada uno de ellos? Y te veré en el siguiente video.
3. Tipos de kits de UI: En este video, vamos a explorar algunas diferencias principales de kits de interfaz de usuario con imágenes y sin imágenes. ¿ Cuáles son algunos de los principales inconvenientes y puntos de venta para cada uno de ellos? Entonces, empecemos. Entonces aquí he abierto la interfaz de usuario 8, que es un sitio web donde en realidad se pueden comprar estos kits de interfaz de usuario. Y vamos a llamar a un doc sobre estos sitios web un poco más tarde en este video en particular, solo
quiero enfocarme en las diferencias entre kits de interfaz de usuario con imágenes y sin imágenes. ¿ Para qué se puede utilizar cada uno de estos? N, lo que puedes aprender sobre la creación de estos kits de interfaz de usuario para tus diferentes tipos de proyectos. Entonces lo que tenemos aquí mismo es este UIKit cuántico, que es, como dicen, enorme biblioteca de sus tarjetas para servicios web. Y lo que realmente crearon aquí mismo, como puedes ver, son todos estos componentes diferentes, que son básicamente un sitio web buscando plantillas que puedes usar y reutilizar para tus futuros proyectos. Entonces por qué esto es útil para, si hago clic derecho y abro en la nueva pestaña y acerco para que puedas ver un poco de estos detalles. Se puede ver que aquí mismo tenemos, por ejemplo, este Sony Dual shock para controlador negro. Tenemos el precio, tenemos este ícono. Entonces básicamente lo que puedes hacer con este diseño es que simplemente puedes trabajar con este diseño exacto. Simplemente crea un componente, por ejemplo, para este controlador de doble show. Y digamos que se quiere reemplazar esto dentro del componente, por ejemplo, para agregar un producto diferente. Digamos que tal vez quieras vender el iPhone, entonces puedes crear componente de deuda de esta tarjeta en particular. Simplemente puedes arrastrar y soltar tu imagen de iPhone. Puedes arrastrar y soltar la información de ese iPhone que tienes a la venta. Y Darío, no tienes que volver a crear la carta, no
tienes que añadir la sombra de gota. No tienes que elegir la fuente específica. No tienes que elegir el diseño tipográfico, no
tienes que elegir la jerarquía. Todo eso se hace por ti en el proyecto anterior por ti mismo. Y ahora simplemente puedes usar y reutilizar este mismo componente exacto en tus futuros proyectos. Te voy a explicar que un poco más adelante en la lección específicamente sobre Adobe XD, cómo puedes escalar estos componentes, cómo puede cambiarlos, usarlos y reutilizarlos y así sucesivamente. Pero en este ejemplo, como dije, queremos enfocarnos en kits de interfaz de usuario con imágenes y sin imágenes y lo que puedes usar cada uno de estos cuatro. Por lo que volviendo a este ejemplo, se
puede ver cuántos de estos tienen. Tienen este auto de venta, por ejemplo, tienen esta carga más componentes. Entonces, básicamente, todos estos componentes son extremadamente cruciales para crear en un kit de interfaz de usuario porque los vas a usar y reutilizar para todos y cada uno de los proyectos. Entonces en las negaciones, pies de página, tarjetas de blog, estos son artículos afilados y así sucesivamente. Por lo que todos estos van a ser realmente útiles de tener para tus futuros proyectos. Si echamos un vistazo a este que se llama plataforma nuestro kit wireframe. Entonces, ¿cuál es la diferencia aquí entre éste y éste? Básicamente wire-frame kids son estos kits de interfaz de usuario sin ninguna imagen y puedes encontrarlos en línea dondequiera que busques. Y realmente te recomiendo que crees estos tipos de estructura alucinante o kits de interfaz de usuario. ¿ Por qué? Porque siempre puedes arrastrar y soltar imágenes en lugares de estos kits de wireframing y no tienes que iniciar sesión con estos enormes tipos de archivos porque obviamente cuáles son un software que estás usando si no tienes imágenes incluidas dentro de tus diseños, tus tipos de archivos van a ser mucho más pequeños. Va a ser mucho más fácil trabajar con estos archivos. Entonces si las tienes con imágenes, también
va a ser mucho más sencillo. Para mostrar estos chicos wireframe a tus clientes y solo decírselo, solo imagínate incluir imágenes dentro de lado del placeholder de imagen, por ejemplo, puedes cambiar el color. Entonces digamos que puedes hablar con tu cliente, puede comunicar esta idea. Por ejemplo, esa imagen va a ser azul, como en este caso aquí mismo, para que puedan saberlo, vale, Así que este fondo sólo va a ser imagen. Entonces va a ser mucho más sencillo para ellos entender y visualizar en su cabeza que la imagen va a ir allí. Lo que hay en ello para ti
es, va a ser mucho más sencillo cambiar y hacer cambios a estos kits wireframing luego a los kits de UI porque estás obteniendo con las imágenes van a ser mucho más difíciles de cambiar porque siempre vas a seguir algún tipo de estructura de imagen. Siempre vas a involucrar algún tipo de imagen, no quizá vayas a probar tus colores a partir de tus imágenes. Entonces, por lo tanto, es bueno ser mucho más simple usar colores en uso todos estos elementos de wireframe kids porque
no tienes imágenes en su lugar más adelante cuando
determines la estructura con tu cliente durante tu trabajo en eso simplemente
puedes arrastrar y soltar imágenes dentro y luego simplemente ajustar un poco el diseño. Por ejemplo, incluye la sombra de gota aquí y allá, solo para hacer que el botón, por ejemplo, destaque o navegación o imagen de héroe o el texto. A lo mejor deberías cambiar el color del texto de oscuro a claro y al revés dependiendo de la imagen que elijas. Entonces, por lo tanto, los niños wireframe son mucho más útiles, en mi opinión. Y luego kits de interfaz de usuario porque son niños, como dije, siguen la estructura de las imágenes y por lo tanto se adaptan a esa estructura y esas imágenes, mientras que los niños wireframe simplemente usan la estructura misma y no se adaptan a nada. Simplemente puedes arrastrar y soltar imágenes dentro más adelante. Ahora por fin, hay una cosa más que quería mencionar, y estos son diagramas de flujo. Y básicamente para diagramas de flujo vienen en diferentes tipos de tamaños de archivo, diferentes tipos de elementos. Y esto es algo llamado diagrama de flujo móvil esquema. Y te puedo mostrar uno de mis productos de diagramas de flujo un poco más tarde porque tengo que hacerlo, y te voy a mostrar cómo los creé y cómo puedes
usarlos para comunicar ideas con tus clientes volviendo a éste, porque tú no puede verlo. Aquí. Lo abro en una nueva pestaña, y aquí puedes ver que no usan textos reales, no
usan imágenes reales. Simplemente usan estos marcador de posición. Por ejemplo, esto va a ser párrafo, va a ser subtítulo de título. Esta es la imagen, este es el botón, esta es la paginación es que puedes ver que están usando iconos para la navegación y para la búsqueda. Usando estos iconos sociales para Facebook y Twitter. Y lo que esto te va a permitir hacer es que seas capaz de comunicar tus ideas y mucho más rápido con tu cliente. Porque una vez más, al igual que con los kits de wireframing y los nuevos niños de IA, no
pierdes el tiempo eligiendo estas imágenes, eligiendo estos colores. Simplemente estás creando diseños que puedes comunicarte y compartir con tu cliente. Una vez aprobados esos diseños, puedes trabajar en los detalles. Por eso, estos kits de wireframing, kits de interfaz y estos diagramas de flujo son tan cruciales para que usted cree. Por lo que solo puedes imaginar que puedes empezar a trabajar en un diagrama de flujo, por ejemplo, para tu cliente. Después de que se haga ese proyecto, simplemente
puedes reutilizar ese diagrama de flujo en términos de una creación de UIKit para tu próximo proyecto, simplemente
puedes crear componentes para formas, para colores, para fuentes, para imágenes, para botones, y así sucesivamente. Y simplemente puedes usar y reutilizar esos componentes en tus futuros proyectos, lo que a su vez te va a ahorrar mucho tiempo y él te va a ayudar a seguir adelante con tus proyectos más rápido te
va a permitir cobrar mucho más porque vas a pasar mucho menos tiempo en cada proyecto porque ya has creado todos estos componentes.
4. Qué componentes son importantes: Cuando se trata de estructura, estos componentes son realmente importantes y menos importantes. Entonces, realmente todo depende de ti qué tipos de componentes quieres usar. Entonces digamos que estás trabajando en proyectos de blog todo el tiempo. Basta con echar un vistazo a tus trabajos anteriores y entender qué tipos de componentes has utilizado en el pasado. Obviamente, algún tipo de barra de búsqueda, algún tipo de pie de página de navegación, tal vez incluso deslizadores , imágenes de
héroes, puertas son realmente obligatorias porque esos son tipos de elementos que vas a utilizar todo el tiempo en tus proyectos. Pero dependiendo del nicho, eres independiente de los proyectos para los que trabajarás previamente y en anteriormente, eres quien va a determinar qué tipos de estos elementos vas a usar en tus kits de UI. Entonces les voy a mostrar con los ejemplos anteriores que les mostré. Y puedes determinar mirando aquellos qué tipos de elementos puedes elegir. Y en los próximos videos de esta clase, les voy a mostrar cuáles son algunos tipos de elementos que se utilizan en el pasado y qué se puede aprender de eso. Por lo que volviendo a estos ejemplos que mostré anteriormente, se
puede ver que tienen comercio electrónico aquí mismo. Y si me desplaza todo el camino por aquí, para que podamos ver el comercio electrónico. Y si me desplaza todo el camino hacia abajo, se
puede ver Dashboard. Entonces si estás trabajando en proyectos que requieren todos estos elementos, solo
puedes imaginar lo largo que es objetivo de estos. que puedas crearlos una vez y luego simplemente reutilizarlos cambiando colores,
cambiando por ejemplo, posición de estos diferentes textos y así sucesivamente. Si nos desplazamos todo el camino hacia abajo, tenemos tarjetas de empresa. lo que estos pueden ser, por ejemplo, portafolio de
equipos Acerca de Nosotros, testimonios, características, precios, y cosas por el estilo. Si nos desplazamos todo el camino hacia abajo, podemos ver música y tarjetas de video. Por lo que estos quizá no sean tan importantes como estos anteriores, y pueden variar de un proyecto a otro. Noticias y tarjetas de revistas. Una vez más, si estás trabajando en proyectos de blog todo el tiempo, estos son realmente cruciales. Por lo que una vez que crees unos va a ser mucho más sencillo reutilizarlos y reutilizarlos para futuros proyectos. Y se puede ver aquí mismo, así que tenemos diferentes tipos de navegación. Tenemos estas tarjetas sociales, que una vez más, dependiendo del proyecto en el que estés trabajando, pueden ser importantes o menos importantes. Contamos con elementos base y tarjetas de estilo. Por lo que tenemos elementos de base como estos de navegación, pies de página, migas. Tenemos estos diferentes iconos, cargadores, deslizadores, botones, colores. Y finalmente tienes estas páginas de muestra en este UIKit cuántico en particular. Y puedes mirar estas páginas en busca de inspiración y ver dónde usaron todos estos diferentes elementos. Si echamos un vistazo al juego de plataformas, tenemos encabezados, tenemos contenidos. Por lo que una vez más, bloques de Contenidos, deslizadores, rejillas simples. Entonces básicamente imágenes en una cuadrícula izquierda y derecha. Tenemos esta cuadrícula maestra. Tenemos futuros características izquierda, derecha. Por ejemplo, con maqueta de teléfono móvil, con maqueta de sitio web, lo siento, maqueta de
laptop con maqueta de tablet. Contamos con diferentes carteras una vez más, dependiendo de dónde estés trabajando en qué naturaleza, cuándo usar una u otra. Tenemos comercio electrónico, especialmente importante si estás trabajando con sitios web de comercio electrónico. Contamos con tarjetas de blog. Y obviamente puedes usar y reutilizar estos diferentes componentes. Por ejemplo, estas tarjetas de bloque. No tienes que usarlos para sitios web de blogs. Se pueden utilizar, por ejemplo, para sitios web de comercio electrónico. Esa es la belleza de estos kits de interfaz de usuario. Simplemente puedes reutilizar estas tarjetas en
tus futuros proyectos y simplemente adaptarlas para que funcionen para ese proyecto en particular. Para que podamos tener testimonios de equipo, cuadras de
precios, llamada a la acción. Estas tablas de precios son especialmente aburridas de crear porque básicamente eres, digamos que tienes, por ejemplo, 20 ejemplos diferentes de estas tablas de precios en línea. Y todos estos otros ejemplos son sólo variaciones de esos ejemplos. Entonces, ¿por qué perderías tiempo recreando todo el tiempo? Todos estos elementos simplemente crean, por ejemplo, cinco o seis tablas de precios a la vez ahí dentro, simplemente reutilizarlas para tus futuros proyectos te va a ahorrar un montón de tiempo, sobre todo con estos aburridos detalles donde tienen la mayoría de estas diferentes opciones, especialmente con tabla de precios. Por lo que tienes opciones, tienes precios, un plan mensual, plan anual. Por lo que todos estos detalles te van a llevar mucho tiempo crear para cada proyecto en particular. Entonces, por lo tanto, tenerlos en un kit de UI te va a ahorrar mucho tiempo. Si echamos un vistazo aquí mismo, llama a la acción, especialmente importante con todas estas tarjetas promocionales, tenemos formularios y contactos. Una vez más, con estas formas, ¿cuántas de estas variaciones puedes realmente tener? Entonces digamos que puedes crear, por ejemplo, 1520 formularios de contacto. Ahí vas. Ya sea puedes utilizarlos para todos tus proyectos futuros. Y los encabezados y pies de página, sobre todo son aburridos para mí crear por la repetitividad y están utilizando todos estos diferentes elementos. Por ejemplo, el logotipo del cliente va a ser izquierdo, derecho, centro en la parte inferior, y eso es básicamente todo. Para que puedas ver cuando comienzas a crear estos kits de interfaz de usuario, puedes obtener la imagen de qué tipos de elementos necesitas para crear un más, qué tipos de elementos necesitas crear menos obviamente para cualquier tipo de nicho en el que te encuentres, algún tipo de formulario de contacto va a ser bueno para incluir. Pero básicamente una vez que comiences a crear, puedes usar formulario de contacto para esto, a partir de este proyecto. Puedes usar el formulario de contacto de este proyecto y simplemente adaptarte al trabajo para tus futuros proyectos. Ese es todo el punto de vista que niño, y por eso creo que son extremadamente útiles para tener y para crear. Y obviamente esta creación de UIKit no va a venir fácil, no
va a venir rápido. Este es el proceso que vas a utilizar y reutilizar a lo largo de tu carrera. Por lo que básicamente se pueden desechar algunos elementos que ya no son relevantes en términos de estilo, en términos de función. Quizás algunos elementos no se utilizan en la industria ni en más, por lo que simplemente puedes desechar. Usa los elementos que son finales, simplemente adapta y ajusta a ese kit de interfaz de usuario que estás usando. Entonces esa es la belleza de los kits de interfaz de usuario y por eso los amo tanto. Y creo que deberías empezar a explorarlos también.
5. Estructura de los kit UI en Adobe Xd: En este video, te voy a mostrar algunas ideas de estructura para tus kits de UI en Adobe XD. Te voy a mostrar mis ejemplos porque llevo años
creando estos chicos de UI y UX. Y tengo más de 500 productos de diseño en mi tienda web dawn at dotnet, voy a dejar los links a todo lo que estoy hablando en el PDF. Simplemente puedes hacer clic en esos enlaces y visitar y explorar si te interesa, incluso Burgess, todos estos diferentes productos que mencioné n, que voy a mencionar en el futuro. Una vez que realmente llegues a estos tipos de venta y estos perfiles en estos sitios web, puedes vender tus diseños. Pero por ahora, vamos a explorar la estructura de estos niños, cómo pueden trabajar en Adobe XD, y cómo puedes aprender de ella y crear la tuya propia. Entonces lo que tengo aquí mismo es el constructor de páginas de aterrizaje de conversión, que es el producto que creamos hace un tiempo. Y este es el kit wireframe, obviamente, como se puede ver. Y si acerco un poco más, pero puedes ver aquí mismo tenemos la navegación, tenemos los encabezados, historia, características, beneficios, promo, testimonios, equipo, precios, otros. Y para todos estos, tenemos múltiples opciones, obviamente porque este es el constructor de páginas de aterrizaje. Estos son los elementos que van a utilizar para la mayoría de las páginas de aterrizaje. Y esto está destinado a alguien que está creando estas páginas de aterrizaje todo el tiempo porque la mayoría de estas empresas
están ahí, están creando estas páginas de aterrizaje todo el tiempo, por ejemplo, para sus campañas de lanzamiento, para sus lanzamientos de productos, para su producto a unas promociones para todas estas campañas,
para anuncios de Facebook, para anuncios de Instagram, anuncios de
YouTube y así sucesivamente. Por lo que las páginas de aterrizaje son extremadamente importantes para eso. Este producto en particular está destinado a trabajar con páginas de aterrizaje. Por lo que una vez más, vamos a volver al nicho. ¿ Cuál es tu nicho y cuál es tu tipo de proyecto en el que estás trabajando? Vas a crear componentes que van a funcionar en ese nicho. Si saltamos aquí mismo, por ejemplo, puedo ver que esto es 1400. Y puedo saltar aquí mismo para crear una nueva mesa de trabajo. Y puedo saltar aquí mismo, crear éste. Haga clic aquí y simplemente ajustado a 1400, así. Para que todos nuestros elementos funcionen. Y voy a ampliarlo aún más. Entonces lo que puedo hacer es que puedo, por ejemplo, clic en esta navegación Control C, clic aquí, controlar V. Y puedo, por ejemplo, hacer clic aquí, controlar C,
controlar V, y ajustar esto para que quepa. Incluso puedo ponerlos dentro de la pila, y luego simplemente puedo arrastrar y soltar dentro de una pila, pero también podemos hacerlo después. Por ejemplo, quiero mostrar estas diferentes características. Entonces veamos dónde están las características. Aquí están. Entonces por ejemplo, puedo usar este control C,
control V. Y se puede ver lo fácil que es la creación de estos sitios web. Digamos que éste, posiciones aquí mismo. A lo mejor quiero usar este ahora. Posición justo aquí. A lo mejor quiero usar este de aquí. Al igual que así. Y digamos que ahora llega el momento del precio, ponlo aquí mismo. Y tal vez algo así. Quiero persuadir a la gente aún más pie de página aquí mismo. Y la posición no importa. Pásate un momento y vas a ver por qué en tan solo un segundo. Así que ponlos aquí mismo. Y digamos que ahora que tu página de aterrizaje está completada, puedes seleccionarlos todos, presionar Control G para ponerlos en un grupo y luego ponerlos en una pila. Esta es la pila vertical y puedo poner la distancia de 150,
por ejemplo, entre ellos y presionar Enter o Return. Y ahora tenemos espacio espaciado uniformemente entre todos nuestros elementos. Puedo ponerlos todos al principio de la página así. Y por ejemplo, no quiero que sean 150 para esto. Por lo que simplemente puedo ajustar sólo este a 0. Y todos estos otros van a tener 150 para el espaciado. Para que puedas ver lo sencillo que es crear tu página de destino. Puedes hacer doble clic aquí para cerrarlo aquí mismo. Y por ejemplo, digamos que la copia está lista y quieres hacer algunos cambios en las imágenes. Simplemente puedes arrastrar y soltar tus imágenes dentro de aquí, colocarlo, y luego simplemente hacer cambios. Por ejemplo, tenemos este ícono de imagen justo aquí. Simplemente puedo pulsar Eliminar para eliminarlo. Y puedo, por ejemplo, bajar la opacidad de mi imagen para que destaque un poco más. Por ejemplo, quiero agregar imagen adicional a aquí. A lo mejor esta imagen, quiero agregar algo para el video. A lo mejor. A lo mejor esta imagen va a funcionar para que
veas lo sencillo que es trabajar con estas diferentes imágenes. Por lo que puedo seleccionarlo golpeó para tal vez, para 40 por ciento de obesidad. Quizás pueda usar un ícono diferente de ojo aquí mismo. Y quizá quiero poner esto para que sea, no
sé, algo un poco más rudo. Entonces puedo saltar aquí mismo, teclear en 2004, el radio de esquina. Si quiero hacer eso, puedes ajustar esto para obtener la imagen de lo sencillo que es crear estos elementos. Entonces esta es básicamente mi estructura y cómo mi equipo y yo estamos trabajando durante años en estas estructuras. Y te voy a mostrar una estructura diferente para niños móviles. Y esto es parloteo UIKit. Y se puede ver que aquí tenemos imágenes. Obviamente va a ser bastante sencillo reemplazar todas estas imágenes. Simplemente vas a usar exactamente la misma estructura. Entonces si echo un vistazo aquí mismo, quizá quiera ajustar estas imágenes para poder seleccionarla y ésta,
y tal vez pueda seleccionar dos imágenes diferentes, arrastrarlas y soltarlas dentro. Y quiero usar este por ejemplo,
para que te ocurra la idea de lo rápido que es. Pero lo que también puedes hacer es hacer click aquí mismo, y aquí tenemos todos estos diferentes elementos. Ahora, los elementos son realmente útiles. Tenemos este azul principal y quiero hacer clic derecho, dar clic en Editar, y tal vez quiero cambiarlo a rojo. Así que solo note cómo se aplica a lo largo de todos nuestros diferentes cambios y simplemente ajustado para leer. También puedo ir Control Z. Para deshacer eso. También podemos cambiar el tamaño de fuente y las opciones de fuente. Podemos cambiar los pesos de las fuentes. Podemos cambiar todos estos diferentes elementos. Entonces lo que puedo hacer es golpear Editar. Por ejemplo, quiero elegir algunas otras formas como Open Sans, por ejemplo,
presionar Enter, y se va a aplicar ese cambio a lo largo de nuestro diseño. Para que puedas ver lo fácil y sencillo que es eso. Además, podemos tener todos estos diferentes componentes. Podemos cambiar de forma independiente. Entonces se puede ver, por ejemplo, que tenemos estos puntos que son negros, aquí mismo, aquí mismo, aquí mismo. Entonces a lo largo de nuestro diseño y todo lo demás, que es negro, queremos cambiarlo por algo salvaje, como leer una vez más por ejemplo. Para que puedas ver donde sea que tuviéramos ese color, se va a aplicar en todo el diseño de arte. Y se va a aplicar dondequiera que lo teníamos en primer lugar. Entonces, por eso todos estos componentes son extremadamente útiles. Y en el siguiente ejemplo y en el siguiente video, voy a mostrar cómo puedes convertir tu diseño existente en UIKit porque no vas a comprar estos kits de UI donde cada proyecto, y creo que es mucho mejor pesar de que estoy vendiendo estos niños de UAC, es mucho, mucho mejor enfoque para ya sea empezar con un UIKit premium solo para tu estructura, solo para este elemento, solo para algunos elementos aburridos, que luego puedes reutilizar para tus propios proyectos y luego crear tu propio UIKit usando estos elementos, usando estas tácticas y técnicas, que va a funcionar para tu caso de uso particular. Porque voy a volver al nicho una vez más. Porque estás, por ejemplo, en un nicho de viajes, los elementos que funcionaron para ti en tu proyecto podrían no funcionar para alguien que está en un nicho de blog, por ejemplo, porque podrían necesitar diferentes elementos. Entonces en el siguiente video, te voy a mostrar cómo puedes convertir tu proyecto existente en kits de interfaz de usuario.
6. Creación de kit UI en Adobe Xd: En este video, te voy a mostrar cómo puedes convertir tu proyecto existente en UIKit y luego reutilizarlo para tus futuros proyectos. Este enfoque se puede utilizar para diferentes proyectos tan grandes y pequeños. Y puedes usar ciertos elementos o puedes usar todos los elementos y luego simplemente seguir a partir de ahí. Se puede utilizar un tipo de elemento, por ejemplo, navegación. Si eso es algo que se está repitiendo todo el tiempo en tu proyecto, o puedes usar diferentes tipos de elementos. Por ejemplo, ambas navegaciones, imágenes de héroes, pies de página, corazones de blog, y todo este tipo de elementos. Entonces te voy a mostrar en este ejemplo o para el proyecto existente cómo puedes convertirlo en un kit de interfaz de usuario. Entonces este es el proyecto que he creado para uno de mis cursos anteriores. Yo lo voy a dejar, deja el enlace al mismo en el PDF para que puedas echarle un vistazo si te interesa. Por lo que todos estos elementos se crean en esa clase. Por lo que ya son 20 horas de largo n una vez más, voy a dejar el enlace en el PDF para que puedas acceder a él rápidamente. Y lo que tenemos aquí mismo son diferentes componentes para los colores, estilos de personaje, todos estos componentes para todas estas diferentes tarjetas, tenemos diferentes iconos, tenemos diferentes estructuras aquí mismo. Tenemos el logo, tenemos las tarjetas de flechas y mucho, mucho más. Entonces lo que puedes hacer por esto es que si hago clic justo aquí, una vez más, estamos en 1920 en lugar de 1400, como hicimos la última vez. Entonces lo que puedo hacer es dar click en mi mesa de trabajo para crear un nuevo aeropuerto. O simplemente puedo duplicar el existente. Lo que hacer aún mejor, lo que puedo hacer es ir justo aquí al Archivo. Y luego Nuevo, perdón si se queda un poco porque estoy corriendo todos estos elementos en mi máquina. Y este archivo es bastante enorme. Entonces voy a crear un nuevo archivo, y simplemente voy a reutilizar algunos de estos diferentes elementos en mi proyecto. O es un agregado, tuvimos ese proyecto creado. Lo que voy a hacer es saltar aquí mismo al diseño de este sitio web. Y voy a saltar todo el camino hasta aquí,
toca Control C. Y luego voy a cambiar al proyecto que acabamos de crear,
toca Control V. Así que ahí solo puedo pegar dentro de este diseño. Y lo que también puedo hacer es saltar de vuelta a aquí. Y quizá pueda usar el uno del otro. Usemos este control único C. Y voy a saltar a este proyecto, golpear control V. Y entonces una vez allá vamos, sólo para ahorrarnos un poco de tiempo, lo que voy a hacer es realmente voy a apagar esto. Entonces skillet, y como puedes ver, algunos elementos ya están pegados de nuestro proyecto anterior, como todos estos diferentes iconos. Pero no tenemos colores y estilos de carácter y podemos trabajar en ellos por separado. Lo que quería mostrarles es esto. Entonces voy a agrandar esto. Y digamos que quiero usar esta navegación, pero antes que nada, usemos la misma cuadrícula. Entonces si lo enciendo, tenemos, vamos a ver, 12 columnas. Entonces 60, 82, y yo voy a hacer lo mismo por esto. Entonces tenemos 60, 82. Ahí vamos. Entonces es lo mismo que éste. Y voy a bajar tu basicidad de estas líneas de cuadrícula así. Entonces digamos que quiero usar este círculo de navegación, pulsa Control C, pégalo aquí mismo. Y lo que puedo hacer es posicionarlo aquí mismo. Y digamos que esta es nuestra primera navegación. Vamos a nuestras capas. Por lo que podemos usar, por ejemplo, Nav 1. Y lo que también puedo hacer es desvincularlo. Entonces vamos a hacer clic derecho. Sólo déjame ver dónde está. Sólo componente. Ahí vamos. Entonces este es el único fin. Podemos crearlo para que sea componente local. Entonces podemos golpear Control K Si queremos,
y podemos crear diferentes estados a partir de él. Entonces puedo hacer clic aquí y escribir, por ejemplo, digamos botón grande, big btn. Y lo que quiero hacer aquí es que solo quiero hacer doble clic en el interior y extender este botón para escuchar y quizás mover más nuestros elementos de navegación. Digamos que quiero alinearlos aquí mismo, o tal vez incluso mejor en el centro así. Entonces si echamos un vistazo a este estado por defecto y a este estado, tenemos estos dos estados separados. Entonces lo que puedes hacer con este es simplemente mantener Alt en tu estado predeterminado. Posición a la derecha aquí también. No lo sé, digamos 60, entonces usa este estado. Y ya tienes dos tipos de diferentes navegaciones. Entonces digamos que quiero crear otra. Entonces podemos volver al estado por defecto, que es éste, crear un nuevo estado. Y por ejemplo, puedo a algo así sin texto, algo así. Entonces en este estado, lo que vamos a hacer es básicamente entrar y quitar nuestros textos. Así que abre, selecciona nuestro texto, pulsa Eliminar. Entonces ahora nos acaba de quedar con nuestro botón. Y podemos o ampliar este botón, dejarlo así. Todo depende realmente de ti. Entonces lo que voy a hacer es seleccionar este, moverlo a 60, y hacer clic sin texto. Entonces ahí vamos. Tenemos nuestros tres elementos diferentes y tres elementos de navegación diferentes ya creados. Pero también se puede hacer es organizar estos. Y realmente me gusta hacer eso. Entonces esto ahora es uno, esto ahora son dos. Y esto va a ser nav tres. Y déjame darte solo un ejemplo más para que podamos volver a este predeterminado y crear uno sin botón o sin btn para abreviar. Entonces lo que vamos a hacer es básicamente hacer un punto selecto. Entonces de aquí somos 40 y voy a seleccionar un botón eliminado y seleccionar todos nuestros elementos de navegación. Al igual que así. Colóquelos al cambio de borde 1234. Entonces somos 40 de este filo, igual que estamos con esta oleada. Y básicamente voy a hacer eso una vez más. Entonces voy a sostener mi opción más antigua, seleccionar saber BTM y Terry go, puedo volver al estado por defecto y se puede ver lo rápido que es esto, lo rápido que es esto. Y te va a ahorrar un montón de tiempo. Voy a cambiar esto a botón grande así. Entonces te va a ahorrar un montón de tiempo más tarde para tus futuros proyectos. Y ya viste lo sencillo que es esto simplemente copiar y pegar en el video anterior. Pero también puedes hacer por estas imágenes de héroe, por ejemplo. Entonces vamos a golpear Control C. Voy a V. Y lo que te recomiendo que hagas es renombrar esto a navegación y crear aeropuerto separado para estas imágenes de héroe por ejemplo. Entonces en este caso, digamos que tenemos a estas personas de este lado. Y vamos a duplicarlo. Control J, perdón, Control D, así y posicionarlo para ser 60. Entonces, una vez más, esto va a ser en mesas de trabajo separadas, así que realmente creemos eso. Entonces voy a quitar estos dos. Y puedes colocar pies de página dentro de tu navegación si quieres. Ya todo depende de ti cómo quieres crearlos. Y voy a llamar a este Héroe, por ejemplo. Porque estas imágenes de héroes es algo en lo que
vas a pasar la mayor parte de tu tiempo. Entonces digamos que para este segundo ejemplo, que va a ser Héroe 2. Entonces este héroe uno. Observe cómo no creo componentes a partir de estos. Yo quiero mostrarles este segundo enfoque. Entonces como ya te mostré con estos, los componentes son obviamente extremadamente sencillos de crear, pero también puedes ir sin componentes y
simplemente puedes crear estos elementos separados por ti mismo. Entonces digamos que quiero posicionar este texto a la derecha. Lo que podemos hacer con estos es posicionar a estos dos en un grupo, ponerlos en una pila, y simplemente revertir Orden, así. Y ahora el texto está de este lado, gente está de este lado. Y lo que también podemos hacer es utilizar estos elementos de fondo. Entonces esta forma de héroe, tal vez quiero darle la vuelta así, y quiero posicionarla así. Y todos estos diferentes elementos. Entonces Hero Elements, los voy a posicionar justo por aquí. Entonces obtienes la imagen de lo sencillo que es esto. Y también tengo una máscara aquí mismo con mi círculo de héroes dentro. Entonces lo voy a posicionar aquí mismo. Entonces ahí vamos. Nosotros sólo un par de clics. Contamos con dos opciones diferentes que podemos mostrar a nuestros clientes. Lo que esto va a hacer por ustedes una vez más, es que estamos haciendo para permitirle trabajar mucho más rápido en estos proyectos, sobre todo con estas tareas repetitivas como mencioné. Entonces navegación, imágenes de pie de página, y todos estos elementos diferentes que se van a repetir todo el tiempo,
como tablas de precios por ejemplo. Por lo que es mucho más fácil para ti como diseñador crear todas estas variaciones en tu estilo, usando tus componentes,
usando tu lenguaje de diseño, usando tu fuente preferida, usando tus colores preferidos, y luego simplemente reutilizar estos componentes para sus futuros proyectos. ¿ Es esto engaño para tus clientes? Conoce, porque tus clientes solo quieren el resultado final. No les importa cómo llegues a ese resultado final. ¿ Es esto algo que reutilizaste? Obviamente lo es, pero solo asegúrate de no usar ningún logo que hayas usado anteriormente en tu proyecto y de no usar ninguna marca. Por ejemplo, ciertos colores en tus libros de marca que obtienes con tus clientes. Por ejemplo, algunos colores son marcas registradas, algunas fuentes son marcas comerciales. Así que solo asegúrate de usar, por ejemplo, fuentes
gratuitas de Google cuando empieces a crear estas, y luego simplemente adaptarlas a las especificaciones de tu cliente. Por ejemplo, para los colores y para las fuentes. Déjame mostrarte una cosa más. Entonces con el poder de x D, tenemos todos estos diferentes elementos. Entonces solo imagina que queremos usar esta imagen. Entonces Control-C, Control-V aquí mismo. Y digamos que esta es nuestra primera carta. Entonces llamémoslo tarjeta uno. Lambda. Y aquí tenemos la pila, como pueden ver. Entonces voy a pegarle al Alt. ¿ Qué mejor aún? Puedo crearlo como componente. Entonces Control K, tenemos este estado por defecto es con la imagen de la izquierda. Tan nuevo estado, imagen correcta. Y luego simplemente se ajustó a aquí. Al igual que así. Y lo que voy a hacer por este es que básicamente los voy a dar la vuelta. Entonces ahí vamos. Y voy a ajustar esta tarjeta uno, voy a asegurarme de que mi imagen esté justo aquí, y allá vamos. Entonces este es nuestro estado por defecto. Esta es nuestra imagen correcta. Y una vez más, voy a crear uno más. Entonces centro imagen así. Y voy a hacer un cambio así. Entonces 123, así estamos en 60 así. Y obviamente para este, voy a ir con imagen central. Entonces lo que voy a hacer es saltar aquí mismo. Y voy a cambiar la posición mi pila. Entonces lo que voy a hacer es ponerlos dentro de un grupo. Voy a usar una pila vertical de segundo como esta. Y básicamente sólo expande la imagen a los bordes así. Haga doble clic dentro posicionado por ejemplo, aquí mismo. Ahí vamos. El texto va a estar en el centro en tan solo un momento. Entonces vamos por el estado predeterminado, y vamos a trabajar en la imagen central aquí mismo. Porque este es nuestro componente. Lo que quiero hacer es básicamente ajustar este texto. Entonces vamos con, veamos ancho automático. Entonces lo que voy a hacer es hacer doble clic en el interior y ajustar este bit de bingo de texto fuera. Pero también puedes hacer es crear o a la altura y puedes ajustarlo así. Y simplemente trae aquí lo que no necesitas así. Entonces somos sólo un par de clics. Vamos a poder ajustarlo. Y se puede hacer debe esperar. Puedes hacer auto altura, lo que quieras. Y voy a asegurarme de que esto esté alineado al centro así. Y voy a posicionar tal vez esto en el centro y posicionar mi botón en el centro también. Y asegúrate de que seamos 40 de todos estos. Y sólo asegúrate de que estamos porque estamos en una pila, por ejemplo, 64 decimal. Y también puedes ingresarlo aquí mismo. Entonces si selecciono mi grupo aquí mismo, selecciono 60, y está seleccionado. Entonces ahí vas con solo un par de clics. Tienes tres cartas diferentes que puedes usar. Entonces básicamente tenemos imagen por defecto, imagen
derecha, imagen central. Para que puedas hacer lo que quieras con esos. Para que puedas ver lo sencillo que es crear estos elementos en Adobe XD. Y una vez más, les insto a empezar a pensar en su proyecto, a empezar a pensar en su nicho, que son algunos elementos que ya superan todo el tiempo. Nuestros elementos SWOT que son extremadamente aburridos. ¿ Se puede comprar algo o descargar algo de forma gratuita lo cual va a mejorar su flujo de trabajo, que va a acelerar su flujo de trabajo? O tienes que crear todo desde cero dependiendo de la orina ordenada, dependiendo de tu estilo de diseño. Si ese es el caso, entonces simplemente empieza por crear todos estos elementos regulares como te mostré en este ejemplo. Por ejemplo, navegación, pie de página, todos estos autos diferentes que se van a repetir en todo el tiempo luego simplemente expandirse a partir de ahí a lo largo del tiempo. Por último, lo que quiero mostrarles es que si volvemos a Adobe XD, se
puede ver que guardó este archivo en la Nube. Esto es sumamente importante, sobre todo si lo estás compartiendo con tus compañeros de diseño, con tus clientes, o si estás trabajando de forma remota, por ejemplo, tienes la oficina y también trabajas en una laptop. Pero lo que también recomiendo es guardar esto en tu escritorio. Para hacer eso simplemente puedes escribir aquí en Archivo, Guardar como, y puedes elegir tan seguro como documento local en tu escritorio. Lo que eso te va a permitir es que simplemente puedas tener este archivo. Por ejemplo, si la electricidad se ha ido, puedes llevarla a tu laptop y puedes llevarla a donde quieras. Si tienes que ajustar y hacer algunos cambios rápidos, si Internet se ha ido, que es realmente el beneficio clave de los documentos locales, simplemente
puedes guardarlo localmente y simplemente trabajar o no. Si no tienes conexión a Internet.
7. UI Kit VS de diseño: También hay un tipo más de plantilla que está disponible en línea, que se llama sistema de diseño. Y el sistema de diseño está básicamente muerto. Se trata de diferentes tipos de fuentes, diferentes tipos de reglas, diferentes tipos de cuadrículas en muchos otros proyectos, sobre todo si estás trabajando con código. Por lo que vas a asignar un fragmento de código diferente. Vas a asignar diferentes tokens para colores, para fuentes y mucho más. Por lo que el sistema de diseño es mucho más complejo bestia que el UIKit. Entonces dependiendo de los proyectos en los que estés trabajando, puedes crear sistema de diseño que es más pequeño si estás trabajando en proyectos pequeños o si estás trabajando con proyectos más grandes, definitivamente recomiendo trabajar con sistema de diseño. Pero la diferencia clave entre UIKit y el sistema de diseño es que UIKit ya tiene estos componentes prefabricados ya creados. Entonces como viste en el video anterior, ya
creamos esa navegación. Entonces está listo. Cuenta con el logo dentro del cual podrás intercambiar con tu próximo proyecto de cliente. Tiene el tipo dentro, por lo que todo ya está posicionado. Simplemente puede cambiar el nombre de algunos de estos tipos. Puedes cambiar la fuente, puedes cambiar los estilos, puedes elegir el tamaño y todo lo demás. Y ya tenía ese botón en su lugar. simplemente puedas ajustar el ancho, la altura, el color del botón, la sombra de fondo, y todos estos elementos. Y ese es el UIKit en pocas palabras. Si bien con el sistema de diseño, tendrías que recrear esa navegación desde cero. Y porque dentro del sistema de diseño tienes mucha estructura coherente. Entonces, una vez más, vuelvo al proyecto más grande, sobre
todo en el enorme proyecto donde mayoría de los diseñadores están trabajando en ese mismo proyecto. Entonces el sistema de diseño es realmente crucial porque necesitas tener un repositorio central de elementos para ser utilizado para todos estos diferentes diseñadores dentro de tu equipo. Si bien si estás trabajando solo o si estás trabajando solo con otro diseñador, o si estás trabajando directamente con clientes, obtengo es una solución mucho mejor en mi opinión, porque una vez más, va a acelerar tu flujo de trabajo masivamente porque tienes todos estos elementos ya creados. No tienes que crearlos desde cero todo el tiempo. Si bien diseñar sistemas son extremadamente importantes, extremadamente valiosos y extremadamente útiles, en mi opinión, para estos proyectos más pequeños, realmente no
necesitas crear estos sistemas de diseño porque tienes los componentes. Por lo que simplemente puedes ajustar los componentes. Simplemente puede ajustar el tamaño de la fuente. Simplemente puede ajustar la familia de fuentes. Se puede ajustar el color. Se pueden ajustar todos estos diferentes elementos, por ejemplo, iconos. Digamos que estás usando estos ícono de imagen lo largo de tu diseño y solo quieres cambiarlo realmente rápidamente. Bueno, puedes crear un componente y la próxima vez en el siguiente proyecto, si quieres cambiar eso, simplemente
puedes arrastrar y soltar un icono diferente dentro va a intercambiar esos componentes. Y ahí tienes. No necesitas un sistema de diseño para todos estos pequeños proyectos. Entonces, una vez más, depende de ti en qué tipo de proyectos estás trabajando, en qué tipo de nicho te encuentres, especialmente para estos pequeños nichos, estos sistemas de diseño no son realmente tan útiles. Una vez más, todo depende de ti y voy a dejar los enlaces a algunos de los sistemas de diseño más conocidos en un PDF, puedes descargar la versión XD. Puedes abrirlos en Adobe XD y simplemente puedes explorar cuáles son estos sistemas de diseño y qué puedes aprender de ellos. Porque todos esos son creados por grandes empresas. Y una vez más, esas grandes empresas crearon esos sistemas de diseño porque tienen múltiples diseñadores trabajando en un equipo al mismo tiempo. Por lo que necesitan ese repositorio central de elementos para ser utilizado por todos estos diferentes diseñadores. De lo contrario, si solo eres una banda de hombre, si estás trabajando con proyectos más pequeños, simplemente
puedes usar kits de interfaz de usuario y va a estar bien.
8. Kits de UI gratuitos en la primera: Está todo bien y bueno crear estos kits de interfaz de usuario por ti mismo. Pero a veces puede ser más fácil simplemente seguir adelante y descargar o comprar estos diferentes kits de interfaz de usuario que
vas a ser utilizado para tus futuros proyectos, tal vez para esos elementos aburridos como hablamos anteriormente, como la navegación, como el pie de página, como las tablas de precios y demás. Entonces donde puedes encontrar estos kits de interfaz de usuario, te
voy a mostrar en la siguiente lección dónde vamos a
discutir realmente vender tus propios kits de UI personales en estos sitios web. Pero básicamente lo que quería compartir en esta lección es estos kits premium de interfaz de usuario están hechos con la marca simplemente tonta en mente. Quiero decir con eso es que no hay cierta conexión entre la deuda UIKit y cierta marca. Simplemente te puedes imaginar que si iOS lanza su UIKit va a ser específico de esas pautas de branding, a esas grandes pautas, a esas pautas de topografía y todos estos diferentes elementos que comprenden de ese UIKit en particular y de ese sistema operativo en particular en ese caso. Entonces es lo mismo. Si Facebook, por ejemplo, lanza su propio UIKit, va a ser reconocido por ese color azul, por fuente de deuda y todos esos elementos. Si bien con estos kits de UI premium y gratuitos, que puedes encontrar en línea, no
hay cierta marca en mente. ¿ Por qué es eso? Porque está destinado a ser utilizado por otros diseñadores. Va a ser bastante sencillo para ti cambiar los colores, cambiar las fuentes y todos estos elementos de los que hablaste antes. Entonces ese es el punto completo del kit premium o gratuito de UI. Ahora, ¿cuál es la diferencia entre UIKit gratuito y premium? Obviamente, el número 1 está en precio. Los kits de UI gratuitos se pueden descargar de forma gratuita, obviamente, y la prima se puede comprar. Y la diferencia clave, en mi opinión es el número de elementos. Por lo general estos niños de la autopista solo vienen con diez o 20 elementos diferentes. Si bien los kits de UI premium como el UIKit cuántico, sobre todo que te mostré antes, viene con, por ejemplo, 11000 elementos diferentes. Además, hay diferencia en los tipos de archivos. Por ejemplo, con kits de interfaz de usuario gratuitos, generalmente
viene con un solo tipo de archivo. Por ejemplo, habrá XD o Adobe Photoshop o Sketch o Figma o lo que sea. Si bien con premium los deseos de uno suelen esforzarse por incluir todos estos diferentes tipos de archivos. Entonces, no importa lo que estés usando, te van a cubrir. También, hay una diferencia en la diferenciación de elementos. Entonces en libre tú, supongo que simplemente vas a conseguir, por ejemplo, 23 categorías. Si bien con los kits de interfaz de usuario premium, normalmente
vas a conseguir 10, 20, 50 categorías diferentes. Y por último, quiero mencionar el apoyo. Si algo se rompe, si algo no funciona. Semana tres, kits de interfaz de usuario, básicamente, a quién le importa, Es gratis y no vas a conseguir ningún apoyo del diseñador. bien con los mercados premium, sobre todo si los estás comprando directamente en su página web, básicamente
vas a tener derecho al apoyo. Y vas a ser el primero en la fila para obtener ayuda de estos diseñadores que crearon estos kits de interfaz de usuario. Entonces en el siguiente video, voy a hablar de vender tus propios kits de UI. Y básicamente vamos a navegar por estos diferentes sitios web. Y te voy a mostrar dónde puedes conseguir los kits premium de UI para ti. Y también puedes vender tus propios kits de interfaz de usuario en esos sitios web en particular.
9. Crea y vende tu kit de UI: Cuando se trata de comprar kits de interfaz de usuario premium en línea, o cuando se trata de vender tus propios kits de interfaz de usuario en línea. Solo hay un puñado de sitios web donde puedes hacerlo con éxito. Hay muchos sitios web diferentes por ahí. Y mi consejo como alguien que está en esto por seis años es que no trates de vender en todas partes porque solo te vas a dejar lata. Vas a pasar demasiado tiempo perdido en estos sitios web los cuales no van a generar tus ventas. Siguió este consejo. Sigue este video de alguien que lo ha hecho desde hace, como dije, ya
seis años y tengo o 100 mil ventas en todos mis diferentes productos. Entonces debería saber una cosa o dos sobre dónde debes vender y dónde es rentable o no. Entonces en este video, te
voy a mostrar, como dije en un video anterior, estos sitios web donde puedes comprar kits premium de UI y donde puedes vender tus propios Kits de UI. Ahora antes que nada, por qué deberías vender tus propios kits de UI en primer lugar. En realidad, es solo un buen sentido hacerlo, y es solo una buena fuente de ingresos adicionales para ti mismo. Si, por ejemplo, has creado un kit de interfaz de usuario de buen aspecto para uno de tus proyectos anteriores. Simplemente puedes expandirlo usando los consejos y técnicas de las que hablamos antes y simplemente prepararlo y venderlo en uno de estos sitios web diferentes. Se puede poner a la venta por el precio del cual está representado en todos estos diferentes sitios web. Simplemente puedes ajustarte por el precio de mercado. Puedes explorar lo que están haciendo otros y simplemente ajustarte por ti mismo. Entonces si tienes, por ejemplo, 100 elementos en tus kits de interfaz de usuario y estás ofreciendo solo un tipo de archivo, que es Adobe XD, asegura de no cobrar demasiado porque estás compitiendo contra alguien más que lo está creando en boceto de Adobe XD Figma para la tienda. Entonces tal vez que tu hijo vaya a vender mucho mejor que tu UIKit porque están ofreciendo todos estos tipos de archivos diferentes. Entonces saltemos adentro y te voy a mostrar todos estos sitios web diferentes y dónde puedes vender tus productos. Y en primer lugar, alojamiento celular. Entonces básicamente el autoalojamiento es donde estás hospedando los productos y eres el encargado de traer a tus clientes. Por lo que eres el encargado de promoción, eres el encargado de la venta, eres el encargado de la entrega de todo lo demás. Y también son marketplaces donde puedes vender en todos estos diferentes marketplaces y están haciendo todo el trabajo por ti. Entonces empecemos con auto alojado en básicamente el sitio web que estoy usando durante años es chicle road. Puedes ajustar, puedes subir todos estos diferentes productos. Se pueden crear enlaces personalizados, descuentos
personalizados, colores personalizados. Podrás crear estos diferentes botones de llamada a la acción, como dice aquí mismo, empezar a vender o comprar ahora, o comprar ahora, lo que quieras. Y básicamente puedes atar esto con presentación de balizas,
con presentación de dribble, simplemente puedes llevar a tus espectadores aquí y ellos pueden comprar en tu tienda de cámaras. O puedes hacer lo que hice con mi equipo es crear un sitio web. Y en este sitio web se puede crear, por ejemplo, UIKit. Y digamos que puedes ver a UIKit justo aquí, tus hijos justo aquí. Entonces tenemos un montón de ellos. Y digamos que los usuarios quieren comprar este, por ejemplo, simplemente pueden hacer clic. Se los va a llevar a la página específica para su producto, que va a tener. La descripción aquí mismo, ¿qué incluye? Funciona en qué software y cuando haga clic en Comprar ahora, los
va a llevar a la página de la ruta del chicle. Simplemente pueden hacer click, quiero esto y pueden comprar este producto. Y como puedes ver, es bastante más sencillo ir de sitio web a escuchar. Lo que también puedes hacer es la venta integrada. Lo que eso significa es que cuando hacen clic en Comprar ahora, una ventana se va a abrir justo aquí y pueden comprar directamente desde allí. Pero solo asegúrate de entender si estás usando Gmail, especialmente, y estás usando algo como Google Analytics por ejemplo, esos dos se van a estrellar. Entonces básicamente solo asegúrate, y por eso digo que te redirige a una página de compra segura. Entonces me voy a ir justo aquí. Como pueden ver, la carretera de chicle es realmente segura ya que es mi sitio web, pero solo quiero tener esa capa adicional de seguridad porque la gente está dejando sus números de tarjeta de crédito, son direcciones de correo electrónico de PayPal. Entonces no quiero que nada le pase a eso. Entonces básicamente esa es mi opinión. También tienes un sitio web llamado sulfuro, que básicamente es bastante similar al chicle road, pero en mi opinión, chicle road está ahí desde el inicio de este juego en línea y se puede, como dije, se ajustan para encajar lo que sea que estés haciendo, como se vea tu producto, en este caso, UIKit, pero puedes vender todo tipo de cosas diferentes. Ahora pasemos a los mercados. Y les voy a mostrar cuáles son algunos de los principales mercados por ahí. Y como dije, puedes explorar todos estos otros mercados, sobre todo cuando comienzas a vender, cuando comienzas a conseguir tracción. Todas estas diferentes personas del mercado se van a acercar a ti y decir que tienen este nuevo sitio web revolucionario el cual te va a traer tanto dinero. No vas a saber qué hacer con él, pero simplemente no los escuches. Asegúrate de empezar a vender en estos sitios web principales y luego expandirte a los sitios web pequeños. Pero solo con un producto a la vez. Si tienes 500 productos como yo, es literalmente imposible subir todos esos productos a todos esos sitios web diferentes. Y por qué incluso deberías querer hacer esto si no tienen, por ejemplo, un millón de vendedores diferentes o si no te traen suficientes ventas. Entonces para empezar, lo que tenemos es mercado de Envato y este sitio web es Graphic River. Dentro de eso tienes Web Elements y tienes interfaces de usuario. Se puede saltar dentro de ahí. Y se puede ver cómo se ven algunos de estos diferentes productos. Como dije anteriormente, no
tienes que vender kits de interfaz de usuario. Puedes vender lo que quieras. Pero esta clase se trata de kits de interfaz de usuario. A continuación, hemos diseñado modelo y estos chicos son intrépidamente selectivos sobre lo que es capaz de ir en su página web. Y se puede ver que todos estos elementos son realmente de alta calidad, realmente de primera clase, especialmente para estos kits de interfaz de usuario n, Por ejemplo, si hago clic aquí solo para mostrarles estas diferentes presentaciones porque están trabajando con ellos para crear estas presentaciones. Se puede ver que son realmente a pantalla completa. El aspecto real pulido, el realmente se ve profesional. Realmente se ven de alta gama, y eso es lo clave de ellos. Y creo que también puedes agregar unas animaciones diferentes cuando estés creando con ellas. A continuación tenemos Mercado Creativo y básicamente río gráfico y Mercado Creativo, o estamos ahí desde el inicio de los tiempos. Y puedes navegar por todas estas diferentes plantillas. Entonces vamos con plantillas web por ejemplo. Se puede ver cuántos de estos hay. Pero si vamos con plantillas y voy con Déjame recordarme dónde están todos estos. Por lo que gráficos elementos web. Y si hago clic ahí, podemos filtrar a través. Entonces vamos con Adobe XD. Y puedes ver todos estos diferentes elementos para Adobe XD. Y podemos incluso para filtrar esto más allá yendo a plantillas de sitios web de redes sociales. Y tenemos chicos wireframe, por ejemplo. Yo puedo seleccionar eso. Y se puede ver a los niños wireframe, cómo se ven, ¿cuánto hay? Aquí están los míos. Y puedes navegar a través de ellos si te interesa. Y eso es básicamente todo. Simplemente ve aquí mismo y ve qué están haciendo estos otros diseñadores C, cuál de sus categorías están usando, C en qué software están creando estos chicos wireframe, tus hijos y así sucesivamente. Y básicamente empieza desde ahí y explora lo que te funciona. Por último, lo que tenemos también es la UI 8, que es bien conocida en la industria. También son de alto nivel, de alta calidad, y son realmente frugales a la hora de seleccionar quién es capaz de vender en su sitio web para que puedas consultarlos. De verdad los recomiendo. Por último, tenemos elementos Envato y hemos diseñado paquetes y elementos de
agua es solo la parte del mercado de Envato. Por lo que tienes que postularte por separado para vender en elementos Envato. Pero una vez que lo haces, básicamente te pagan
la cantidad que alguien descarga tu producto. Entonces si busco kit de UI por ejemplo, puedes ver todos estos diferentes elementos. Y básicamente la diferencia entre este mercado y todos estos otros mercados es excepto UA porque tienen todo pase de acceso, pero tienen limitaciones en cuántos artículos puedes descargar por semana, por mes, por día, y así sucesivamente. Si bien los elementos de Envato no tienen ninguna limitación, ahora
puedes cargar lo que quieras, donde quieras, y estás pagando una suscripción anual en lugar de tres meses, seis meses, un mes, lo que sea. Todas estas otras son básicamente solo pagas a medida que avanzas. Entonces si optas por comprar este producto, por ejemplo, solo lo compras. O si eliges comprar mis productos, simplemente
puedes comprarlo. Y misma historia con todos estos otros, y misma historia con chicle road, pero camino Vidkun, puedes elegir crear paquetes separados. Entonces si volvemos a aquí, me desplaza hacia abajo, por ejemplo, puedo crear paquete UIKit a partir de todos mis productos. Y puedo elegir crear un paquete iframe masivo, como medio hecho. Y eso se puede hacer con bastante facilidad dentro de la carretera de chicle, mientras que no se puede hacer eso en todos estos sitios web diferentes. Ahora volviendo a elementos de Envato, como dije, no
estás ganando dinero por unos productos separados que alguien más compra, sino que estás ganando dinero. Pero, ¿cuántos de tus productos alguien descargó y también cuántas descargas tienes en esa categoría para tu bono contribuyente? Entonces por ejemplo, cuántos de estos diferentes productos que tienes en la mayoría de estas otras cosas. Y una vez más, si te interesa, simplemente
puedes navegar por su página web. Y una vez más, aquí está mi producto y kit de UI de Austria. Y por último, quiero compartir paquetes de diseño con ustedes, que es uno de los sitios web más nuevos de la industria, pero vale la pena perseguir porque aquí también se pueden vender todos estos. Hey chicos, como mencionamos, pero también tienen diferentes paquetes los cuales están corriendo de vez en cuando. Y básicamente bundle es algo así como un paquete y puedes comprar un paquete. Por ejemplo, 10 diseñadores diferentes tienen 10 kits de interfaz de usuario diferentes. Utilizan todos esos que sois niños los ponen dentro de un paquete llamado el paquete rebajan el precio realmente duro y luego simplemente se comercializan como locos. Y básicamente que Mundell va a traer pocos miles de ventas y luego disciplina divide ese dinero de ese paquete en particular a través de estos diseñadores, generalmente lo que pasa es que hay dos modelos diferentes. O 50, 50, 50 va a los paquetes de diseño. En este caso en 50 va para todos los demás diseñadores. Y también hay un modelo 50 y el resto, el 50 por ciento va a los paquetes de diseño, y el resto va a quien tenga la mayor UIKit obtiene la mayor cantidad de dinero, quien tiene la alegría más pequeña que los niños obtienen la menor cantidad de dinero. Entonces básicamente dependiendo del sitio web, dependiendo del acuerdo, dependiendo del paquete, vas a conseguir un cierto porcentaje del dinero. Voy a crear un curso separado en el futuro, explicando, explicando cómo preparar presentaciones, etiquetas, cómo preparar descripciones, cómo elegir tu segmentación, cómo describir mejor tu producto, cómo crear estas listas de tomas, cómo puedes crear estas imágenes de portada y todos estos elementos. Especialmente voy a hablar de soporte, por qué el soporte es importante, cómo puedes moverte brindando soporte brindando una buena descripción y al proporcionar un buen producto en primer lugar, lo que hace que un gran producto y mucho más. Entonces si te interesa esa clase para el futuro, solo sígueme en redes sociales o puedes dejarme un mensaje. Puedes seguirme aquí dondequiera que estés viendo esta clase y básicamente solo mantente atentos para el futuro. Y también puedes seguir mi canal de YouTube. Yo también voy a dejar un enlace a ella. En el PDF. Estoy poniendo todo tipo de contenido de Adobe XD por ahí. Entonces si te interesa, asegúrate de seguirme allá y voy a anunciar esa clase en el futuro.
10. Tu proyecto de clase: Tu proyecto de clase para esta clase es crear tu propio kit de UI. No tienes que crear la mayoría de estos elementos, por lo que no tienes que crear 50 elementos diferentes. Simplemente puedes crear uno o dos o tres, tal vez cinco elementos. que puedas empezar, por ejemplo, con la navegación, con la imagen de héroe, y luego puedes seguir desde ahí y simplemente puedes
guardarla como una imagen JPEG y subirla a los proyectos de clase. Realmente me gustaría ver lo que se les puede llegar a ustedes chicos y solo para practicar la creación de kits de interfaz de usuario para el futuro. Porque como dije, una vez que empieces a hacer esto, lo
vas a apreciar cada vez más porque te
va a ahorrar un montón de tiempo en el futuro para todos tus futuros proyectos en
te va a permitir trabajar en tus proyectos mucho más rápido. Entonces como dije, estoy ansioso por nuestros proyectos de clase y realmente emocionado por ver qué se les puede llegar a ustedes chicos.
11. Conclusión y recursos: Gracias por ver esta clase y de verdad espero que hayas encontrado algún valor en ella, y de verdad espero que hayas entendido cómo eres. Los niños realmente pueden ayudar a elevar tu tiempo dedicado a estos proyectos. Cómo pueden mejorar tu flujo de trabajo, cómo pueden aumentar el tiempo que pasaste con tu familia, con tus amigos, y disminuir el tiempo que pasas en estos proyectos. Una vez más, comienza a crear kits de interfaz de usuario. Estilo pequeño, empezó a crearles un ancho. Todos estos elementos que vas a utilizar en todos tus proyectos. Por ejemplo, pie de página de navegación, tablas de
precios como hablamos antes. Y luego simplemente puedes agregar un ajuste e incluir diferentes elementos. Y es por eso que Adobe existe tan grande. Y te mostré en el video anterior cómo puedes crear fácilmente tu propio kit de interfaz de usuario y asegurarte de ajustarlo y cambiarlo a medida que avanzas. Y lo más importante de todo es encontrar tu estilo. A algunos diseñadores no les gusta crear componentes. Otros están jurando por componentes. Entonces básicamente lo que quieras, lo que sea que estés metido, lo que sea que te sienta más cómodo. Usa esa técnica, usa ese enfoque para crear tu propio kit de interfaz de usuario. Además, asegúrate de seleccionar tu nicho y asegúrate de explorar tu nicho y de ver qué tipos de elementos más requiere tu nicho, como expliqué en uno de los videos anteriores, no va a ser
lo mismo para todo. Algunos sitios web de blogs no van a usar elementos de sitios web de tiendas y viceversa. Por supuesto, van a haber elementos que son cruzados compatibles con todos estos nichos diferentes. Pero en la mayoría de los casos, vas a crear para un nicho específico. Así que asegúrate de hacerlo una vez que comiences a crear tu kit de interfaz de usuario. Una cosa más a mencionar es que los recursos van a estar en un PDF, como expliqué en los videos anteriores, simplemente haga clic en el enlace que te interese. Te va a llevar ahí. Está dentro de ese PDF. Y te deseo suerte en la creación de tus kits de interfaz de usuario. Y realmente espero que te ahorren un montón de tiempo como lo hicieron por mí en todos tus proyectos futuros. Cuídate.
Aleksandar Cucukovic, Improving lives, one pixel at a time.
