Transcripciones
1. Introducción a la clase: Los sistemas de diseño
se utilizan para crear experiencias fáciles de usar, fáciles de escalar y fáciles de crear consistentemente
en el futuro. El punto principal de un sistema de
diseño es vencer el puente y la brecha
entre diseñadores y desarrolladores y ser
fáciles de integrar y desarrollar para un mayor uso en el futuro como las habilidades del
sistema de diseño y como la empresa habilidades niños, no
sabía que mi nombre es Alex. Y en esta clase
de Skillshare vamos a
hablar de lo que están diseñando sistemas
y cómo crear sistemas de
diseño en Adobe XD, soy
creador de productos de diseño y hasta ahora había creado más de
500 productos de diseño. También soy creadora de cursos
y hasta ahora había creado más de 30
caballos diferentes todo sobre tu diseño de UX en Adobe XD, vamos a hablar de
sistemas de diseño y su propósito y lo que es un buena estructura
para un sistema de diseño. Entonces
te voy a mostrar algunos ejemplos
y estándares
líderes en la industria que debes seguir cuando
estés creando tus propios
sistemas de diseño en Adobe XD. Y después de eso, te voy
a mostrar cómo crear tu propio sistema de diseño
usando el WASD. Y te voy a mostrar
mi sistema de diseño de inicios, cómo lo creé y qué
puedes aprender de él. Entonces vamos a
hablar de tokens de diseño, qué son, por qué son útiles para crear
tus sistemas de diseño. Y por último, cómo escalar tu sistema de diseño
y fue a escalarlo. Y lo que debes
tener en cuenta cuando realmente
estás escalando
tu sistema de diseño. Tu proyecto de clase
para esta clase es crear el tuyo propio en el sistema, pero nada demasiado importante, solo unos pocos componentes
aquí y allá. Y estoy muy emocionado de ver
lo que ustedes pueden crear. Hay un video en la clase explicando más de tu clase. Los sistemas de diseño de proyectos son más útiles que nunca en el día y la edad
actual en que tenemos estos
múltiples tamaños de pantalla y dispositivos para los que necesitamos
diseñar. Entonces tenemos que hacer un seguimiento de la consistencia en
cuanto a lo que estamos creando para qué tamaños de
pantalla y cómo funciona todo
al final del día, para nuestros usuarios finales, utilizando un sistema de diseño para mantener
track es realmente importante, especialmente si estás utilizando la herramienta que es
impresionante como Adobe XD. Esperamos
verte dentro y vamos a crear algunos sistemas de diseño
impresionantes.
2. Qué es un sistema de diseño: El sistema de diseño, como su nombre indica, es un enfoque sistemático para
crear diseños de UI y UX. El propósito principal del sistema de
diseño de área por ahí es hacer un
seguimiento de lo que todo el mundo
en el equipo ha creado. El propósito principal del
sistema de diseño es la escalabilidad. Ya sea esa la escalabilidad
inmediata o la escalabilidad que
va a venir en el futuro. Pero el principal trabajo del
sistema de diseño es mantener la escala de deuda consistente. Lo que eso significa es
que cada cambio que hagas va a
reflejar a través del resto de tu diseño va a ser coherente y se va
a quedar en la mirada y sensación de lo que es determinante en el comienzo mismo
de un sistema de diseño. Todo buen sistema de diseño
consta de dos tanques, reglas y estándares
y bibliotecas de patrones. Reglas y estándares están ahí a todos los compañeros
de equipo para
seguirlos a la t porque
esa es la única forma en
que el sistema de diseño
va a escalar uniformemente, que va a crecer
y va a ser consistente a lo largo de
su vida útil. Porque la vida útil
del sistema de diseño es la
vida útil de la empresa. Nunca se hace, nunca está terminado. Por lo que mientras exista la empresa
o el producto, el sistema de diseño puede coexistir con ese
producto o empresa, mientras que la biblioteca de patrones, otro lado está ahí, y va a escalar todo el tiempo dependiendo
muchas veces las necesidades, necesidades Kubrick y necesidades
futuras de cada proyecto en particular y de
cada empresa en particular. El principal error
por ahí es que los sistemas de
diseño son solo para las grandes empresas
que no lo son. Puede utilizar un sistema de diseño
para empresas más pequeñas, puede utilizar el sistema de
diseño con menos número de componentes. Tenemos menos número de
lineamientos y estándares. Y esos lineamientos pueden ser un
poco ásperos al principio. Pero a medida que va el proyecto, a medida que crece
la empresa, las reglas y estándares
se van a endurecer y el sistema
de diseño finalmente va a tomar su forma y su forma, prevista desde
el comenzando y sólo
va a
crecer con la empresa. Los sistemas de diseño pueden ser para diseñadores y para
desarrolladores también. Y eso se puede
lograr con el uso algo que se llama token. Vamos a hablar de ellos
un poco más tarde en esta clase. Pero básicamente, la colaboración
entre diseñadores y desarrolladores es la clave para cada buen
sistema de diseño por ahí. En cuanto
se realice o propague el cambio, diseñadores y desarrolladores
tienen que estar en la misma página
para que ese sistema
de diseño funcione y para el cambio se
implemente de inmediato. Y es lo más fácil posible. Eso es extremadamente
importante para las startups, pero para
las empresas establecidas por ahí también, porque no se
quiere romper el diseño y
la funcionalidad del producto simplemente
cambiando el diseño
sistema demasiado con algo que no está alineado con todos
en el equipo. Hay algunas cosas
que todo buen sistema de
diseño por
ahí debería tener. Y en el siguiente
video vamos a hablar de eso. ¿ Cuál es la buena estructura para cada buen
sistema de diseño por ahí?
3. Estructura de un sistema de diseño: Como mencioné en
la lección anterior, estructura de un
buen sistema de diseño realmente consiste en dos cosas, reglas y estándares
y bibliotecas de patrones. Los roles en los estándares pueden estar
ahí en muchas formas diferentes. Por ejemplo, cada
regla tiene que ser, coincidirla con
algo que estás haciendo dentro de
ese sistema de diseño. Y digamos que la regla
puede ser sobre grid en absoluto, puede ser sobre tipografía. La regla puede ser sobre el color, sobre el espaciado, sobre el ritmo
horizontal o vertical. Puede ser sobre cualquier cosa. Y
por supuesto se pueden romper reglas, pero se pueden romper
al principio de
un sistema de diseño porque más adelante cuando se desarrolla el
proyecto, cuando el proyecto ha crecido, es mucho difícil
romper una regla de lo que es cuando acabas de
empezar con el diseño. Sistema. Los estándares pueden ser algo así
como los valores de la empresa. Pueden ser algo
así como un tono, como un estado de ánimo del
proyecto y fuera la página web del cliente o de la marca de
su cliente. Y eso se debe seguir
a la t interior de un sistema de diseño porque no se quiere desviarse demasiado, sobre todo en el sistema de diseño que realmente son Corporativos. No quieres que
cambien demasiado porque multitud
corporativa está realmente
acostumbrada a ese tipo de expiación, ese tipo de
puertas de diseño tipos estudiosos, esas topografías,
jerarquías y mucho más. La segunda parte de un buen
sistema de diseño es bibliotecas de patrones. Y puedes cambiar
estas bibliotecas de patrones medida que creces a lo largo
del consejo principal
aquí mismo es tan pronto como empieces construir bibliotecas de
patrones de sistemas de diseño, no
necesitas
crear elementos que no son necesarios por el momento. Por ejemplo, si tu proyecto
no tiene un dashboard, no
crearás
elementos como gráficos y gráficos porque simplemente
no son relevantes en este momento. No vas a llenar tu sistema
de diseño con todos estos componentes inútiles porque solo te recuerdas como
el diseñador está ahí, tu equipo de diseño, está ahí
para crear esos diseños. Pero esos diseños deben ser accesibles y fáciles de entender
para los desarrolladores que tienen que
desarrollar todos estos elementos para ese proyecto
en particular. Por lo que sólo crea
elementos que se necesitan en ese
momento y dejar que el sistema de
diseño escale con el tiempo
según lo requiera el proyecto. Ahora, ¿cómo puedes dividir todos estos componentes en
la biblioteca de componentes? Básicamente, hay
tres categorías principales. Hay átomos,
moléculas y organismos. Y por supuesto puedes
agregar plantillas. Puedes, por supuesto se expande a cuántas otras
variaciones quieres. Por ejemplo, diagramas de flujo o wireframes, wireframes de alta
fidelidad. Pero básicamente átomos, moléculas y organismos están ahí para todo buen sistema de diseño y se están escalando
con el proyecto. Y siempre se pueden sumar
más de estos elementos, como dije más adelante abajo
en el alinear proyecto. Ahora como su nombre lo indica, los
átomos son
el más pequeño del grupo y pueden ser
algo que es bastante fácil. Por ejemplo, color o
tamaño de texto o ancho inferior o
algo así. Entonces las moléculas se
crean a partir de átomos, fueron a los átomos, se combinan. Básicamente vas
a crear una molécula, por
ejemplo, un
menú desplegable o algo así. Y entonces los organismos
son, digamos, una forma que se crea a partir de
diversos elementos diferentes, por
ejemplo,
campos de entrada y botones. Y entonces vas
a obtener una forma que es organismo creado para varios y
de diversos átomos y
moléculas diferentes se combinan en
un solo organismo. Esto se llama la
estructura atómica y es realmente nuestros
estándares de la industria desde hace décadas. Pero puedes crear tu
sistema de diseño como quieras. Pero si estás usando
este enfoque atómico, va a ser mucho más
sencillo para ti crear tus elementos y
escalarlos en el futuro. El punto principal de
cada sistema de diseño por ahí es la consistencia. Entonces hay que pensar en
la consistencia todo el tiempo. Dondequiera que estés simplemente
creando un botón simple, tienes que pensar en cómo
ese botón va a
escalar a través de diversos tamaños de pantalla
diferentes. ¿ Va a cambiar el ancho, va a cambiar la altura. ¿ Va a cambiar
el color va a ser con esquinas redondeadas,
sin esquinas redondeadas. Entonces hay que pensar en
todos estos elementos a medida que está construyendo
su sistema de diseño, que pensar en
reglas y estándares, que mencionamos al
inicio de esta lección. Y también hay que pensar otros elementos en
su biblioteca de patrones. ¿ Cómo van a
coincidir entre sí? ¿ Se van a quedar
bien en la página? Entonces cada vez que creas un nuevo elemento dentro de
la biblioteca de patrones, tienes que ponerlo en una página, tienes que ponerlo en
una prueba de inmediato, ver si funciona con el resto
de tu biblioteca de patrones. Y luego si lo hace,
puedes guardarlo y si no, siempre lo
puedes desechar. Ese es el punto entero
de nuestro sistema de diseño. Siempre va a evolucionar, siempre
va a cambiar
y nunca va a quedar igual como lo era ayer. En la siguiente lección,
voy a mostrar algunos grandes
ejemplos de sistemas de diseño de los
líderes de la industria y estándares de la industria. Te voy a mostrar
qué tener cuidado. Y luego más adelante en esta clase, te
voy a mostrar cómo crear tu propio
sistema de diseño en Adobe XD y lo que puedes lograr con creación de
sistemas de diseño en Adobe XD. Te veré ahí.
4. Ejemplos de sistemas de diseño: La mejor manera de crear tu
propio sistema de diseño es
aprender de los estándares de la industria
y de los gigantes de la industria. Y para hacer eso, solo te
voy a mostrar algunos ejemplos y puedes encontrar estos ejemplos en
el PDF adjunto. Simplemente puedes hacer click
en esos enlaces para
acceder a todos estos
ejemplos que te
voy a mostrar
y simplemente aprender de
ellos lo que están creando. Pero lo clave
antes de empezar, no se sienta obligado a tomar
cada componente que estas empresas están creando porque como mencioné anteriormente en las lecciones
anteriores, estos componentes están
ahí por alguna razón. Entonces, a menos que esté
utilizando alguno de estos componentes,
no los cree. Cuando empiezas a crear
un sistema de diseño, es realmente importante
empezar pequeño. Entonces a medida que evoluciona tu proyecto, entonces vas a sumar todos estos
diferentes componentes. Porque
de qué sirve crear componentes si no son necesarios
en este momento, solo te van
a ralentizar y no
vas a
optimizar tu tiempo en
ese proyecto en particular si
estás creando componentes que no son necesarios
para tu proyecto. Así que permítanme mostrarles todos
estos ejemplos. El primer ejemplo que tenemos
es el diseño de materiales de Google. Por supuesto, este diseño
material se utiliza en su sistema
operativo Android. Apple tiene las suyas propias, se llama lineamientos de
interfaz humana, y también lo puedes encontrar. Voy a vincular todos
estos sistemas de diseño
que están mencionando con pocos sistemas más de diseño
que no van a mencionar en este video
dentro del PDF. Una vez más, abre el PDF, clic en estos enlaces para acceder
y navegar por ti mismo. Lo que tenemos
aquí es presentarte material en el momento
de hacer de este video. Este es el nuevo y el estándar de la industria
en el mundo Android. Entonces básicamente, seguir
usando el diseño de materiales también. Puedes ver pautas,
componentes, iconos, componentes para la web, pautas de
accesibilidad
y tutoriales para desarrolladores. Puedes aprender más
de su blog. Y repasemos rápidamente estos elementos y
no voy a entrar en demasiados detalles
porque la mayoría de estos sistemas de diseño
son básicamente los mismos. Están usando los
mismos estándares, están usando las
mismas pautas, pero simplemente se ven diferentes. Porque, por ejemplo, con
este sistema de diseño de materiales, es para Android, por
lo que es para dispositivos móviles. Si bien hay otros sistemas de diseño
existen, por ejemplo, sitios web o para proyectos web o para un dashboards o
elementos como esos. Por supuesto, todos estos
elementos van a ser diferentes entre los sistemas de diseño móvil
y de escritorio. Pero la clave es la misma, los estándares son los mismos. Entonces digamos que tienes
estas pautas, principios, estilos
y mejores prácticas. Lo que eso significa es para
cada elemento, ¿cuándo es el mejor momento
para usar ese elemento? En cuyo caso
escenario, por ejemplo, no
vas a usar ciertos, digamos que los recolectores de fecha. En ciertos ejemplos,
vas a utilizar diferentes tipos de
recolectores de fecha en esos ejemplos. Entonces por eso esos principios y mejores prácticas están ahí. Si alguna vez miraste
un proyecto de branding o en una
presentación de branding de una marca, puedes verlos en Behance, Por ejemplo, puedes buscar videos de
YouTube para esos. Básicamente
las mejores prácticas están ahí. Y esa es la
razón clave, por ejemplo, por qué se utiliza el logotipo en esta orientación en
lugar de esta orientación. Por qué usas imágenes blancas
aquí y no aquí. Por eso estas mejores
prácticas están ahí. Para lograr estas mejores prácticas y estos principios y estilos, hay
que empezar de forma pequeña. Hay que empezar
desde el principio. Tienes que crear estos
diversos botones y experimentar. ¿ Ve qué funciona, qué
no, qué funciona? Asegúrate de actualizar desde ahí, asegúrate de agregar nuevos elementos, asegúrate de agregar nuevos estilos, nuevos componentes de
esos elementos y ver qué funciona
y qué pega, qué no, tírala
lejos y simplemente seguir adelante. Eso me lleva muy bien a
componentes, orientación de diseño y documentación para desarrolladores para bloques de construcción
interactivos de interfaz de usuario. Y puedes verlos aquí mismo. Estos son botones,
imágenes, formularios, campos de
entrada, iconos,
y mucho más. Estos componentes están ahí
para que sea fácil para usted. Y te voy a mostrar eso en una lección posterior en esta clase. Una vez que realmente
llegamos a Adobe XD, los componentes están ahí para acelerar
las cosas mucho porque los componentes se pueden
utilizar en todo su sistema de diseño, a
lo largo de su proyecto. Y pueden ser utilizados por diversos
diseñadores diferentes en su equipo debido a la
característica de edición central de Adobe XD, diversos miembros
del equipo diferentes pueden estar en diversos
lados diferentes del planeta. Y todos pueden estar utilizando el
mismo sistema de diseño y utilizar los mismos componentes de ese sistema de diseño
en particular. Por supuesto, siempre se puede
cambiar de componentes. Siempre puedes actualizarlos. Puedes agregar diferentes
componentes, estilos y mucho más. Pero esa es la clave aquí mismo para crear componentes que
van a ser reutilizables
en todo su sistema de diseño. Vamos a explicar
eso un poco más tarde, pero por ahora, sigamos adelante. Los iconos son recurso clave para cada buen
sistema de diseño por ahí. Por supuesto, porque
esto es Google, tienen sus propios iconos
materiales. Cuando estés empezando
con tu sistema de diseño, probablemente
vayas a usar algunos otros iconos en
tu sistema de diseño. Pero a medida que ese
sistema de diseño evoluciona, ya que encontrarás una
voz para una marca. A medida que encuentres la dirección y
pautas para la marca, también
vas a evolucionar
esos iconos. Si no eres experto
en creación de Icon, tal vez tu cliente pueda. Contrata a alguien que sea, y luego puedes usar esos
iconos en ese sistema de diseño. Entonces tenemos componentes
para la web. Así implementa y personaliza aplicaciones web
materiales con nuestro
código y documentación. Por supuesto, esto es escalar desde dispositivos
móviles hasta la web. Por último, tenemos lineamientos de
accesibilidad que son de suma importancia. Aprendió a ayudar a usuarios de diversas habilidades a navegar, comprender y usar su interfaz de usuario porque no todos
tienen la misma visión. Algunas personas tienen deterioro de la
visión, por ejemplo, algunas personas
tienen dificultad para leer. que pensar en todas esas personas porque
hay muchos
de tus usuarios que van a tener
tristemente algunos de estos temas, que tienen que pensar en ellos
todo el tiempo cuando están creando su sistema de diseño. Por último, contamos con tutoriales de
desarrolladores, implementamos material con Java,
Kotlin, Objective-C, Swift, y donde sea bit padre, dependiendo del sistema de diseño, dependiendo de los desarrolladores, implementamos material con Java,
Kotlin, Objective-C, Swift,
y donde sea bit padre,
dependiendo del sistema de diseño,
dependiendo de los desarrolladores,
vamos a usar esta
o aquella tecnología. Así que básicamente
no hay una respuesta correcta o incorrecta aquí mismo, que hablar
con sus desarrolladores. Tienes que hablar con
tu cliente, una vez más, dependiendo de lo que tu
cliente vaya a utilizar. En este caso, para el material, es mayoritariamente para
dispositivos móviles, para Android. Entonces por supuesto que
van a usar diferentes tecnologías entonces
si estás, por ejemplo, usando, no sé, PHP o algo así
para WordPress o lo que sea. Entonces esas tecnologías
van a ser diferentes y dependiendo de qué tecnólogos que
sean desarrolladores van a utilizar, vas a formar tu sistema de diseño para
esos fines de desarrollo. Por lo que básicamente,
puedes saltar aquí mismo, puedes hacer click en el
diseño, puedes ver. Así fundación, visión general, diseño del
entorno, navegación, color, tipografía, sonido, iconografía,
forma, movimiento. Entonces como dije, y
voy a seguir
diciendo esto a lo largo de
esta clase. No se deje intimidar por todos estos diferentes elementos porque una vez más, esto es Google. Tenían literalmente
miles de millones de usuarios a lo largo de sus dispositivos y
en toda su empresa. Por supuesto, van a utilizar todos estos
diferentes elementos de los que probablemente no habrán
oído hablar, y mucho menos usar. Así que no se intimiden. Demasiada deuda de ancho. Entonces tenemos componentes. Estos son botones, casillas
de verificación de tarjetas, chips, tablas de datos y así sucesivamente. Entonces hemos desarrollado
para Android, para web aleteo iOS. Contamos con recursos y
puedes leer todo sobre
estos recursos. Así hiper tipo, escala, creador o
herramientas de personalización de formas y así sucesivamente.
Tienen el blog. Así que asegúrate de
revisarlo una vez más, creo los enlaces a
todo lo que mencioné en este video y más
en el archivo PDF. Haga clic en esos
enlaces para acceder a él. Entonces tenemos sistema de
diseño Atlassian, lenguaje de diseño de
extremo
a extremo para crear experiencias sencillas, intuitivas y
hermosas. Entonces, una vez más,
vas a notar que
tenemos componentes,
tenemos patrones. Entonces marca, tienen misión, tienen personalidad,
y han prometido, que es lo que mencioné
en video anterior. No vas a hablar
las mismas dos personas que están usando esto en sus calzoncillos
en su dispositivo móvil. Y dos CEO de grandes
empresas que están, por
ejemplo, en alguna oficina
costosa. Entonces el tono simplemente no es lo mismo. Por lo que hay que hablar con su usuario en el idioma
que entenderán. Entonces tenemos fundaciones. Entonces color, iconografía,
tipografía, una vez más, dependiendo
quién sea tu usuario, vas a utilizar
diferentes colores, diferentes iconos y
diferente tipo, contenido, lenguaje y gramática,
vocabulario, estilo de escritura. Entonces, una vez más, estamos
hablando con el usuario. ¿ Quién es tu usuario? Tienes que hablar con tu usuario en lenguaje de deuda que
van a entender. Puedes explorar esto y aquí
tenemos contenido fundaciones de marca. Demos click en el contenido para que puedas ver lenguaje inclusivo, gramática, vocabulario,
puedes hacer click aquí mismo. Componentes. Tenemos nuestro término, grupo
externo, insignia,
y de inmediato, vas a notar que esto se ve bastante
diferente a esto porque
hay dos cosas completamente
diferentes. Entonces si hago clic en el
banner, por ejemplo, aquí
mismo, se puede ver cómo se ve
este banner. Y de inmediato
podemos ver el código, podemos ver el error, podemos ver el anuncio. ¿ Cómo se ve? ¿ Cómo escala, cómo se encoge o crece? Y se puede ver el uso. ¿ Cómo funciona? Entonces anatomía, tenemos el
ícono, tenemos el mensaje, y tenemos las acciones que
son opcionales en este caso. Así que siéntete libre de navegar por todas estas categorías
para aprender más sobre cómo se usan y cómo se
integran aquí mismo. A continuación tenemos Shopify
polarizado sistema de diseño sal. Vamos primero con fundaciones. Valores experimentados, que
es lo que mencioné. Su enfoque, qué
considerarlo. Son empoderadores, elaborados, eficientes, confiables
y familiares. Entonces esos son todos los valores que están apuntando
con su marca, por tanto, su sistema de diseño. Entonces tenemos el contenido. Entonces voz y tono, Shopify es reflejo
de voz de quiénes son. Entonces quiénes son simplemente
ponen ahí la empresa
construida por personas reales que entienden este
negocio y se
preocupan por ayudar a otros a tener éxito. Entonces esos son sus valores. Contamos con el diseño. Una vez más, diseña
colores, principios. La comunicación es clave. Los colores tienen sentido. Los colores siguen las pautas de
accesibilidad para que puedas ver roles de color. Así superficie básicamente
elementos que están detrás de otros
elementos en superficie. Esos son los elementos
como textos por ejemplo, primarios, por ejemplo,
para los elementos, digamos botón secundario
para los elementos que son, digamos marcas de verificación o iconos o algo
así , interactivo. A lo mejor hay una
animación sucediendo. Entonces todos estos colores
están ahí por una razón. Una vez más, vuelvo a cada vez por el
punto que hice con anterioridad. Y no creas
elementos que no sean necesarios en tu sistema de diseño. Para que puedas ver
la varianza del color y
puedes ver estos colores
implementados aquí mismo. Una vez más,
les animo a revisar todos estos elementos y
a conocer más sobre ellos. Se pueden ver ilustraciones. Están utilizando estas
ilustraciones, pero por qué, por qué están utilizando esta ilustración
particular en este estilo particular, utilizando estos colores particulares. Para que puedas conocer más sobre todo eso aquí mismo en esta página. A continuación tenemos sistema
de diseño de carbono, que es creado por nuestro IBM, que es una enorme corporación. Me encanta este sistema de diseño porque
puedes hacer click aquí y puedes hacer click en los kits de diseño y puedes
obtener la versión de sketch, pero también puedes conseguir
la versión de Adobe XD, que está en algún lugar alrededor aquí. Y se puede abrir
en XD, aquí está. Pero es construido por la comunidad del
carbono. Entonces no es exactamente spot on
porque no está creado para Adobe XD en lugar de
para sketch al principio. Después pasaron a Figma, pero también apoyan a
Adobe XD y Azure. que puedas llegar a los
niños ahí mismo, abrirlo y
también puedes hacer lo mismo por shopify, sistema de diseño, polaris. Y estoy bastante seguro de que también
puedes conseguir Atlassian. Puedes abrirla y podrás aprender más sobre
cómo se ve. Pero volvamos al carbono, básicamente, sistema de
código abierto o de diseño para productos y
experiencias digitales. El lenguaje de diseño es
su sistema fundacional consistió en código de trabajo, herramientas y recursos de
diseño, directrices de interfaz
humana, y una vibrante comunidad
de colaboradores. Entonces ahí vamos. Muchos diseñadores diferentes están contribuyendo a
este sistema de diseño. Por eso puedes descargar esos archivos y
explorarlos de forma gratuita. Entonces empieza a diseñar. Se pueden ver todos estos
diferentes elementos, lo que están utilizando, pero me
preocupan más las pautas. Esto, están empezando por
la rejilla. La rejilla está en el corazón de cada buen
sistema de diseño por ahí. Si acabo de reproducir este video, así, se pueden ver dos x grid y cómo se
ve? Básicamente, se compone de una caja y esa caja puede
expandirse a otras cajas, que pueden ser más grandes o más pequeñas. Pero básicamente está en
los incrementos de dos. Todo se ajusta
muy bien a esas cajas. Básicamente, se puede ver
el espaciado aquí mismo. Dos cuadros separan el texto, las imágenes, el diseño
y cosas así. Así que asegúrate de
explorarlo todo. Y se puede ver cómo
el ritmo vertical, Brooks aquí mismo
y cómo
funciona la escala aquí mismo en
este video en particular, verdad
te animo
a explorarlo más. Se pueden ver iconos, pictogramas, movimiento, que es
realmente importante. Entonces, ¿cómo usaron la animación? Entonces si hago clic aquí
para reproducir este video, se
puede ver cómo
están usando el movimiento dentro de su sistema de diseño, cómo funciona la animación, cómo funciona la transición, cómo funcionan las cosas. Por ejemplo, la facilidad
en la animación está fuera de la animación
y mucho más. Así que explóralo, descárgalo, y asegúrate de
comprobarlo tú mismo. Por último, tenemos a Salesforce. Puedes empezar. Se puede ver qué plataformas son corrientes o bosques
visuales relámpago, directrices de diseño
Heroku, Android e
iOS. Entonces visión general, constructor, entrada de datos de
gráficos, visualización de datos y
mucho más accesibilidad, que es lo que
hablamos de los blueprints de componentes. Entonces resumen,
digamos acordeón, quiero echar un vistazo
al en consecuencia, ¿cómo se ve? Entonces esto es una gran cosa. Puedo hacer click aquí y entender cuál fue la intención
detrás de esto en consecuencia. Entonces en este caso particular, se
puede ver que este
acordeón está cerrado, pero cuando haga clic, toda
esta sección se va a expandir hacia abajo. ¿ Cuánto se va
a expandir hacia abajo? Por ejemplo, si estás
usando eso para pixel grid, que mencionaste en el sistema de diseño de carbono de
IBM, entonces se va a expandir
por los incrementos de dos. Y puedes usar esas
reglas y estándares
y lineamientos a lo largo de
tu sistema de diseño, sea cual sea lo que estés creando. Por lo que una vez más, puede
hacer clic en la alerta, por ejemplo, puede hacer clic
en el avatar o insignias. Demos clic en el carrito y veamos cómo se ven sus
cartas. Entonces este es el auto, esta es la nueva, tarjetas más pequeñas, tarjetas más cortas, tarjetas más anchas. Por lo que se puede ver cómo se implementan todos estos
elementos, cómo se
establecen en la página. Y si hago clic aquí mismo, por lo que tenemos acción 123, tenemos la información sobre herramientas de
estos diferentes elementos. Por último, tenemos esto
que es utilidades,
margen, función de dimensionamiento de texto, lista vertical. Y por último, hemos
diseñado tokens. Los tokens de diseño son increíbles. Piensa en los sistemas de diseño y vamos a
hablar de ellos en una de las lecciones posteriores
porque
realmente están en el corazón de
todo buen sistema de diseño. Y realmente son
el puente entre diseñadores y desarrolladores
para conocer el sistema de diseño
y usarlo su mayor medida y seguir
utilizándolo en el futuro. Y por eso estamos utilizando tokens de
diseño en
nuestros sistemas de diseño. Y voy a mostrar eso en Adobe XD también en
la lección posterior. Pero por ahora, checkout estos
enlaces, como mencioné, van a estar en la mezcla de
PDF para explorar más posible y
aprender tanto como sea posible. Porque se puede ver sistema de
diseño no es algo que vas
a aprender en uno o dos días. Realmente toma meses y años para que se desarrolle un buen
sistema de diseño. Pero no dejes que el
material que de crear tu propio sistema de diseño porque los beneficios son enormes a
medida que estás diseñando, como estás construyendo
y desarrollando, vas a expandir los
tuyos sistema de diseño. En la siguiente lección,
vamos a hablar de Adobe XD. ¿ Qué puedes crear en
Adobe XD en cuanto a sistemas de diseño y
cómo puedes escalar tu sistema de diseño en Adobe XD? Te veré ahí.
5. Crear un sistema de diseño en Adobe Xd: Adobe XD es una herramienta
impresionante porque en una sola herramienta
puedes diseñar prototipo y compartir con tus clientes, desarrolladores
y partes interesadas. Esto es genial para
crear sistemas de diseño, y de esto es de lo que
vamos a hablar en esta lección de la clase, cómo crear tus propios sistemas de
diseño en Adobe XD. Y más adelante
vamos a hablar escalar esos
sistemas de diseño en Adobe XD. Empecemos. Aquí estoy en Adobe
XD y abro el tablero de arte 1280 por 800. Esto es solo un
tablero de arte básico que encuentras en la pantalla de inicio justo
aquí en un D Adobe XD. ¿ Cómo crear tu sistema
de diseño? Bueno, hay que empezar pequeño. Empecemos
con las rejillas. Entonces si me escondo
para que
lo veas en lugar de
disparar este layout, voy a cambiarlo a cuadrado n Esto es de lo que
hablamos previamente para el sistema de diseñadores de
IBM, están usando esta
iteración de dos. Por lo que va a ser realmente plazas
pequeñas justo aquí, pero voy a usarla. Número de ocho, por ejemplo,
algo así como deuda. Y entonces voy a encender mi calculadora y la voy
a traer aquí mismo. Entonces tenemos 1284, el ancho. Entonces 1280 dividido por
ocho, es 160. Lo que eso significa es cuando hago
zoom hasta aquí mismo, se
puede ver que
estos cuadrados son ocho píxeles por ocho píxeles porque ese es el tamaño cuadrado. Si un bajan a dos, se
puede ver que
bajaron en botón de tamaño. Voy a aumentar de nuevo
a ocho porque ocho
píxeles es
una especie de estándar de la industria u
8 grid si lo desea. Y eso es lo que
vamos a utilizar para nuestro
sistema de diseño imaginario aquí mismo en Adobe XD para empezar, lo que podemos crear
es algo pequeño, como un botón por ejemplo. Entonces empecemos primero con
la topografía. Para que pueda decir algo
como click aquí, tal vez. Usaremos algo
como Open Sans tal vez, porque es fuente gratuita de Google
y lo puedes encontrar en línea. Y lo voy a
posicionar más o menos por aquí. Vamos con 24, porque 24 es divisible por
ocho, claro. Y luego voy
a crear mi botón. Así que voy a crear
algún espacio alrededor de él. Voy a hacer clic derecho, enviarlo a retroceder solo para
que podamos ver nuestros textos. Y ahora puedo empezar a jugar alrededor y posicionarme
a mi parrilla. Entonces si sostengo mi tecla Alt, se
puede ver que
soy 16 de este lado, 16 de este lado
por 78 de este lado, es bueno, pero siete no
es tanto. Entonces, lo que puedes hacer aquí no
es mucho realmente porque herramientas de texto de
Adobe XD no
son realmente más antiguas desarrolladas como Adobe Illustrator por
ejemplo, o Adobe Photoshop. Pero va a funcionar
bastante bien en este caso porque solo estamos creando nuestro proyecto de startup aquí mismo. Lo primero a considerar, ¿es tu tipo demasiado grande? Si lo es, entonces puedes aumentar el espaciado a 16 en cada lado, por ejemplo, pero
aún puedes ver 1515 aquí mismo. Entonces si empezamos así, seguirá
siendo 15 porque la forma en que Adobe
XD trata los textos. Entonces, una vez más,
¿qué puedes hacer si estás trabajando con marca, que requiere ese lenguaje, lo que hablamos anteriormente, entonces vas a ajustar este radio de esquina a algo
así como ocho por ejemplo. Y ahora tenemos las esquinas
redondeadas. Entonces 64 es el tamaño de nuestro
botón divisible por ocho, supuesto, 144
divisibles por ocho. Por lo que ahora podemos proceder. siguiente es el sub de la
convención de nomenclatura este botón es bastante grande. Sal por ejemplo, lo
vas a nombrar btn. Déjame darte otra oportunidad. Btn dash, BG, botón,
fondo, dash grande. Y tienes que hacer
esto a lo largo tu sistema de diseño para todos tus elementos porque de
esa manera vas a conocer y los diseñadores de
tu equipo van a saber, los desarrolladores van a saber, es esto para nuestro sitio web, tablet, reloj móvil, o
cualquier tamaño que sea. Entonces el siguiente es agruparlos. Entonces lo que hay que considerar es de dónde viene este texto
. En este caso,
va por la izquierda. Así que si pongo el cursor aquí mismo, podemos ver que está
alineado a la izquierda y está fuera de ella. Por lo que va a escalar
automáticamente el botón y expandido
al lado derecho. O puedes
arreglarlo si quieres,
puedes hacer clic en
sitios fijos y
no va a expandir el botón. Dependiendo del propósito de
los botones, digamos BTN, variables grandes. Entonces podemos usar VAR por ejemplo, algo así, o
simplemente llamarlo btn large. Y entonces si queremos
que se arregle, entonces podemos llamarlo
btn grande fijo. Por lo que una vez más, realice un seguimiento de ese fondo BTN
grande, btn grande. Si estás usando
fijo, por ejemplo, va a ser para
el fondo del botón, btn BG large fixed, o BTN BG. Fijo más grande como
quieras llamarlo. Entonces la convención de nomenclatura es realmente crucial porque en
cuanto empieces a sumar más y más de estos
elementos va a ser mucho más complicado para que hagas un seguimiento de lo
que has creado a continuación porque queremos que este
botón se expanda, voy a encender el relleno. Entonces la próxima vez
que alguien diga algo como por ahora, se
puede ver que el
botón se va a expandir. Pero una vez más, por ese elemento gradual que creamos, si hago
clic aquí mismo, se
puede ver 16161516, se va a expandir, pero siempre se puede anular. Entonces si hago clic aquí mismo, y si extiendo esto
aún más aquí mismo, si hago clic aquí
y extendido a 20, tal vez se va a chasquear
para migrar mucho mejor. Por lo que siempre puedes hacer estos cambios para
asegurarte de que somos 3664 todo el camino es
divisible por ocho en nuestro caso, si estás
pensando en cuadrículas y cómo crear cuadrículas,
puedes por supuesto, usa estas cuadrículas de ocho píxeles
para tus cuadrículas sólidas, digamos 12 columnas para
este gran tamaño, ocho columnas para
el tamaño de la tableta, cuatro columnas para
el tamaño móvil. Y dependiendo de los
tamaños que elijas, vas a elegir
el número de columnas y qué tan amplias son
estas columnas. Por supuesto,
acabamos de empezar. Se puede ver cómo se ve esto. Y antes de seguir adelante,
voy a hacer clic aquí mismo, saltando aquí mismo a
mis bibliotecas y agregarle color porque este es
el color de mi texto. En este caso, voy
a añadir estilo de personaje. Entonces, ¿cómo se puede nombrar esto? Y esto es realmente importante
porque ahora estamos entrando al territorio de los tokens de diseño. Y voy a explicar los tokens de
diseño en la siguiente lección de
esta clase un poco más. Pero básicamente voy a
llamar a esto h cuatro por ejemplo, porque ese es el
tamaño de este texto. Aquí por el color, voy a cambiarle el nombre a
algo así como, no sé, gris
regular o lo que sea, tablero
regular y gris,
algo así. Entonces todo el mundo de mi
equipo sabe que, vale, esto es H por sus centavos abiertos 24. Y cuando pasan el cursor, se pueden
ver opuestos, espaciado de
24 caracteres,
el tamaño 24 puntos. Por lo que vas
a poder contar de inmediato. siguiente arriba está el botón con el borde o
sin la frontera. Cómo vas a tratar esto, cómo
se van a apilar todos estos elementos, lo
hace tiene, no
tiene el guión o no. Entonces hay que pensar en
todas estas cosas, pero asegúrate de crear múltiples
copias de este patrón. Mira lo que funciona, mira qué no termina cuando empieces a agregar
elementos a este botón, asegúrate de comenzar
con los componentes. Entonces Control o Comando K en tu teclado para
crear un componente. Este es el estado predeterminado. Entonces el primer componente en
crear es quizás
el estado de horror. Entonces lo voy a llamar “flotar”. Y la próxima vez que alguien se
cierne sobre este botón, tal vez va a
cambiar el color. En lugar de blanco. A lo mejor podemos cambiarlo por
algo ligero como esto. Da click aquí,
pulsa Control Entrar para previsualizar lo que estamos creando. Y ahora cuando pongo el puntero
sobre este botón, se
puede ver que
tiene estado de flotación. Entonces eso es lo fácil que es
crear tu inicio
de un sistema de diseño. Y ahora te voy
a mostrar lo que
he creado en
los últimos dos años. Y me tomó seis meses
crear en Adobe XD. Se llama sistema de
diseño de Inception. Y aquí está. Este es el archivo maestro del
sistema de diseño inicial. Esto me llevó seis meses de trabajo
continuo para crear. Y puedes conseguir este
sistema de diseño si quieres. Voy a dejar
el enlace en el PDF. Esta es la página para el diseño
de inicio system.co. Y una vez más,
dejaré el enlace en el PDF. Puedes hacer click
aquí e ir a mi canal de YouTube para
ver el curso gratuito. En ella. Voy a través de
cada elemento. Creo que es algo
así como una
hora o algo así. Está en mi canal de YouTube
y puedes verlo ahí para saber más cómo funciona
y qué está incluido. Se puede ver,
se puede diseñar más rápido. Puedes leer algunas críticas. Está hecho a mano para escala
usando cuadrícula de ocho píxeles. Tiene estructura molecular
como mencionamos. Es local y nubes
que pueden trabajar tanto a
nivel local como en la nube
con tus compañeros de equipo. Cuenta con diagramas de flujo,
plantilla e iconos de Lottie, que son iconos animados. Se hace usando las
últimas características como estados de componentes de
pilas
en Activos de documentos. Así que déjame volver a Adobe XD y mostrarte
primero las cosas primero, lo que está incluido en
este sistema de diseño. Aquí tenemos alguna información
básica y pautas sobre el propio sistema de
diseño, cómo usarlo y
dónde usarlo. Entonces aquí tenemos las rejillas, tenemos tres diferentes ella
básicamente tamaños de pantalla. Contamos con grandes, medianos y pequeños, o de escritorio, tablet y móvil. Y dependiendo del tamaño, tenemos varios colores diferentes. Número de columna. Para los grandes,
tenemos 12 columnas. Para el medio,
tenemos ocho columnas, y para la pequeña
tenemos cuatro columnas. Aquí tenemos las guías
y puedes
copiar fácilmente estas guías y
pegar en tu tablero de arte. Entonces tenemos
topografía y se puede ver que dividí
la topografía dos encabezados y
encabezados corporales vienen en estos diferentes tamaños y cuerpo en estos diferentes tamaños. Entonces tenemos los colores, colores principales y colores de
apoyo. Vas a notar que aquí no
tengo sombras. Y eso es con el propósito porque cuando obtienes
este sistema de diseño, puedes agregar tus propias sombras. Van a escalar con
el propio sistema de diseño. Entonces tenemos el logo que
puedes reemplazar por el logo de
tus clientes. Contamos con estos diferentes
logotipos que
puedes utilizar en tus proyectos. Tenemos iconos y de inmediato, vas a notar
estas cuadrículas de ocho píxeles. Tamaño tan cuadrado. Y si lo escondo aquí mismo, sólo para que puedas ver el sistema de diseño
en sí un poco mejor. Entonces tenemos iconos aquí mismo, y estos son iconos estáticos. Y por supuesto, el sistema de diseño viene con
iconos animados también, que funcionan de forma nativa
dentro de Adobe XD, lo cual es fantástico
para la creación de prototipos. Entonces si hago zoom un poco, lo que tenemos aquí
son átomos y moléculas, y puedes
encontrarlos aquí mismo. Si abres esto, puedes ver que tenemos cuadrículas,
iconos, avatares, desplegables, imágenes, modelos,
paginación, línea de educación según
Search y mucho más. Entonces todos estos elementos
aquí son átomos y moléculas. Y si acerco un
poco más cerca, se puede ver. Entonces tenemos botones, tenemos entradas de texto, selectores,
textarea, casillas de verificación, fecha de
radio, selectores, conmutadores de
contenido, pestañas, indicadores de
progreso, entradas
numéricas, acordeones, imágenes que
son extremadamente importante. Tenemos Blobs, desplegables, tenemos diversos dispositivos
diferentes,
notificaciones, paginación sólida o es modelo y mucho más densa. En el lado izquierdo
tenemos diagramas de flujo, que se encuentran aquí mismo. Entonces si acerco, tenemos diagramas de flujo de escritorio,
tenemos diagramas de flujo móviles, entonces tenemos elementos de flujo de tareas. Obviamente para los flujos de tareas, tenemos
elementos de diagrama de flujo que se utilizan para conectar estos
diferentes diagramas de flujo. Y entonces lo que estamos aquí, tenemos estos tamaños de papel. Por lo que aquí tenemos retrato tamaño
A4, paisaje,
retrato de letra estadounidense y paisaje. Y cada uno de estos, si cambio al panel Capas
justo aquí y hago clic en el interior, tiene varios
elementos diferentes que se utilizan para
ayudarte a crear más rápido usando
este sistema de diseño. Entonces si lo selecciono, se puede ver lo que tenemos aquí
mismo es la cuadrícula de puntos. Entonces si enciendo esta rejilla de puntos, se
puede ver cómo se ve. Así que hasta tengo arriba un papel aquí mismo que te
voy a mostrar en este momento, que se utilizan para una de
mis transmisiones en vivo recientemente, y lo puedes encontrar
en mi página de YouTube. Entonces si acerco esto, este documento fue
creado en realidad dentro de
este sistema de diseño. Y en realidad fue
imprimirlo y luego dibujado en el uso de
la pluma normal. Para que puedas ver lo versátil
y útil que es esto cuando creas elementos como
este en tu sistema de diseño. Entonces volviendo a ello, lo que también tenemos los teléfonos. Entonces si un show que
puedes usar estas fuentes, obviamente imprimirlas como
te mostré con este papel en particular. Y vas a notar que se van a
posicionar aquí mismo. Y obviamente, si el papel
es paisaje como este, se
van a posicionar de
manera diferente y se utilizan para el wireframing de papel
si quieres. Entonces tenemos navegador
para responsive, tenemos navegador de escritorio
y navegador móvil, y va igual
para todos estos tamaños. Entonces tenemos
información del diagrama de flujo. Contamos con
nombre del proyecto del cliente, fecha límite, número de páginas web, número de pantallas de aplicaciones, y por supuesto puedes combinar cuadrícula de
puntos y el diagrama de flujo en
para que puedas cambiar de lugar, puedes colocarlos,
imprimirlos y crear básicamente componentes
y diagramas de flujo en ellos. Y por último, lo que tenemos
si cambio aquí mismo, tenemos las plantillas. Aquí tenemos plantillas en
tres tamaños diferentes, como acabo de mencionar anteriormente. Entonces tenemos grandes, medianos y pequeños, y esos
están aquí mismo. Por lo que estas son plantillas grandes
en 15 categorías diferentes. Estas son plantillas pequeñas en esas mismas categorías pero apenas ajustadas para el tamaño de la tableta. Y estas son plantillas, pequeñas, por lo que es un medio y estas
son pequeñas para tamaños de teléfono. Entonces, ¿cómo funciona todo esto? Básicamente, si abro esto, tenemos colores, por lo que tenemos colores
principales y colores de
apoyo. Como dije, estos son componentes
principales. Si cambio el color, este azul océano
aquí mismo, por ejemplo, simplemente
puedo ir a editar
aquí mismo y cambiar el color. Se va a actualizar
ese color en tiempo real en todas partes donde se
encuentre ese color en este sistema de diseño. Entonces yendo de aquí y esta muestra todo el camino por aquí, por aquí y por aquí, se va a
actualizar en tiempo real y cambiar y
actualizar ese color. Si decides conseguir
este sistema de diseño y
comienzas a trabajar en
un proyecto para tu cliente. Simplemente puedes cambiar estos
colores a los colores de tus clientes va a cambiar a
lo largo de este sistema de diseño. La misma historia va para
los estilos de personaje. Entonces para encabezamientos, por ejemplo, si decido cambiar esto, es Proxima Nova
en este momento. Pero por ejemplo, si
decidiste cambiarla a ciencia abierta, como dije, entonces puedes
actualizarla en tiempo real. Va a cambiar a
lo largo de tu diseño. A continuación, tenemos lo que dije, átomos y moléculas,
diagramas de flujo y plantillas, ¿
y cómo puedes usarlas? Es realmente bastante simple. Así que permítanme realmente utilizar en
esta gran gota a aquí. Y quiero mostrarte
si hago clic aquí mismo. Y digamos que
quiero ocultar estas columnas sólo para que puedan
ver lo que estoy haciendo. Y digamos que
quería arrastrar y soltar algunos
elementos dentro, por lo que es bueno para los
átomos y las moléculas. Y vamos a cambiar este
diseño en realidad. Pero vamos con la
plaza justo aquí, sólo para que puedan ver
lo que realmente estoy haciendo. Entonces vamos con algo así como desplegable, desplegable grande. Arrastrémoslo y sueltemos por dentro. Y se puede ver cómo
se
ve para poder posicionarlo
donde quiera. Y luego devolvamos
nuestras columnas. Haga clic en nuestro desplegable,
colóquelo aquí mismo. Y se puede ver que
funciona de inmediato porque este es un componente
con múltiples estados. Echemos un vistazo al estado de enfoque. Por ejemplo, vamos a abrir
el pago. Y por supuesto puedo
saltar en la ciencia y adaptarme y cambiar
cualquiera de estos estados. Entonces en lugar de decir
desplegable grande, tal vez pueda decir el
tamaño de tu zapato o el color de tu zapato o lo que sea que tu proyecto requiera que la belleza de
este sistema de diseño, estos son átomos y
moléculas en corto. Básicamente puedes adoptarlas y usarlas como quieras. Y déjame
mostrarte rápidamente plantillas. Entonces aquí tenemos las plantillas
y vamos a utilizar grandes. Entonces lo que necesitamos es la navegación. Arrastra y suelta mi nav
uno por ejemplo. Lo voy a meter a la posición. Cierra esto. Vamos a usar la sección héroe. Vamos con aquí en el
número cuatro por ejemplo. Vamos a posicionarlo
aquí mismo y aquí mismo. Tal vez hacer algo como esto. Entonces lo que podemos
hacer es usar la llamada a la acción puede ser así que
utilicemos la llamada a la acción cinco. Acérquelo, asegúrate de que esté en la posición central está
justo aquí hasta que se reúna con nuestra sección de héroes
y te pongas la idea. Sólo vas a arrastrar y
soltar estos elementos dentro. Vas a construirlos. Lo bueno
de todas las plantillas y todos los diagramas de flujo es que
vienen en dos modos diferentes. Estado predeterminado, que es el modo de
luz y el modo oscuro. Entonces si hago clic en mi
interruptor de navegación de nuevo al modo oscuro, haga clic aquí mismo,
cambie a oscuro, haga clic aquí mismo, cambie a
oscuridad en tan solo unos clics. Y si escondo mi grilla sólo
para que puedan ver tenemos esto. Entonces si la previsupo
muy rápidamente, se
puede ver cómo se
ve en ETO en tiempo real, tiene estos efectos de terror. Y por supuesto, cuando cambias y adaptas todos
estos componentes, por
ejemplo, este logotipo y lo
cambias al logo de sus clientes. Puedes agregar diferentes iconos, puedes agregar diferentes imágenes. Se va a adaptar
en tiempo real. Y este es el punto entero
de un sistema de diseño es
ahorrarte miles y
miles de horas
de crear estas tareas aburridas. Porque no hay nada
en el mundo que más odio. Y para crear pies de página, y tengo mis
pies de página aquí mismo. Haga clic aquí, arrastre y
suelte el posicionamiento de pie de página allí, por ejemplo, ajuste al modo
oscuro, así. Posicionarlo aquí. Preview de golpe una vez más. Y aquí tengo mi
pie de página en su lugar. Esa es la belleza de
estos sistemas de diseño, es crear con velocidad, para crear escala de ancho. Y eso es lo que se puede ver con este particular sistema de diseño de
iniciación, que he creado en
los últimos seis meses, es que creé todos
estos elementos. Entonces déjame borrar esto. Creé todos estos elementos, pero puedo escalarlos fácilmente. Puedo añadir más elementos aquí
usando elementos existentes, puedo reposicionarlos, reorganizarlos,
cambiar sus colores, cambiar su radio de esquina. Porque si un acercamiento realmente cerca a uno de estos botones, se
puede ver que
el radio de la esquina es de cuatro si un espectáculo
que aquí mismo, pero tal vez quiero cambiar
el radio de la esquina en este botón principal a
algo un poco más grande. Permítanme asumir para
que puedan ver todos
los estados poco más grandes
a algo así como 20. Presione Intro. Y se puede ver
en tiempo real, va a cambiar
por todas partes donde sea, este botón se encuentra. Dondequiera que se use este botón, no solo aquí, sino a lo largo de
mis plantillas también. Entonces se va a
actualizar en tiempo real. Eso es lo clave de los sistemas de
diseño en Adobe XD. Tienes que cambiarlos en los componentes
predeterminados y todos estos componentes
que arrastra y suelta los cuales
te están mostrando nuestros componentes secundarios. Podemos cambiar y adaptarnos allí y utilizar estos cambios
locales. Por ejemplo, en
esa sección de héroes que acabo de
mostrarte previamente, vas a actualizar el texto. Quieres agregar tu propio
texto, los textos de tus clientes, lo que sea, entonces va a
cambiar en componente de deuda. Pero si quieres hacer cambios
más globales como
el color de fondo, como la fuente y lo que sea, vas a hacer
esos cambios
aquí mismo dentro de los componentes
principales, sistema de diseño de inicio
viene con dos archivos, archivo
maestro y archivo ligero. Básicamente la única diferencia es dentro del archivo maestro,
que solo te estoy mostrando,
puedes ver todos los elementos aquí
mismo en un solo lugar, dentro del archivo de luz. No se puede hacer eso porque a
propósito eliminé todos ellos
del lienzo para mantener la mayor parte
del lienzo libre
posible para que puedas diseñar
sin ninguna instrucción, como mirarlos aquí mismo. Entonces quizás sea lo
más sabio comenzar con el archivo maestro para aprender
todos estos componentes. Y por supuesto proporcioné
imágenes de todos estos componentes
que pueden navegar de
un vistazo en cuanto a cómo se ve el
componente, cómo se ve la plantilla antes de empezar a
trabajar con esos. Lo último que
quería mostrarte sobre esto son estos diagramas de flujo. Así que déjame
abrirlos aquí mismo. Entonces vamos a cerrar plantillas, abrir los diagramas de flujo. Vamos con diagramas
de flujo de escritorio. Vamos a usar el
encabezado, por ejemplo, arrastrarlo y soltarlo aquí mismo. Vamos a usar contenido. A lo mejor quería
posicionarlo aquí mismo. Vamos a usar
algo más como un deslizador. Posiciónalo aquí mismo. Entonces lo bueno de
estos componentes es que simplemente
puedes duplicarlos
posicionando aquí mismo. Y debido a que estos son los
componentes, como dije, simplemente
puedes hacer clic en
arrastrar y va a reemplazar ese componente
en tiempo real. Entonces cartera, arrastra
y suelta aquí. A lo mejor quiero usar
el formulario número cinco. Dice mi cliente, no me gusta cómo se ve la fórmula
de un archivo. A lo mejor puedes probar otra
cosa, vale, para el número
tres, ahí tienes. Se puede ver lo súper simple que es
esto para crearlos. Cuando quieras conectar todos estos elementos,
cerremos esto. Entonces vamos a usar los elementos del
diagrama de flujo. Vamos a usar, por ejemplo, los números. Entonces vamos con el número uno. A lo mejor esta es la primera página, por ejemplo, vamos a cerrar eso. Vamos a usar flechas. Entonces voy a usar esta flecha, arrastrarla y soltarla en su lugar. Quizás cuando los usuarios hacen click
en este botón aquí mismo, van a
ir a esta página. Entonces voy a simplemente extender esto y seleccionar mi
línea y te atrevo a ir. Así es lo super simple que
es esto de usar y de crear. Por ejemplo, si sueltas esto, digamos flecha por error. Quería reemplazarlo. Quería hacerlo con
éste. Ahí vas. Esta es la flecha que
quería, por ejemplo, de este par, de
este slider aquí mismo, quiero que vayan a
esta pieza de portafolio. Se puede ver lo súper simple que es crear
esto. Entonces esa es la belleza de
estos sistemas de diseño. Obviamente esto es un extremo, como dije, me llevó más de
seis meses crearlo todo. Me tomó más de
dos años de investigación. Y si te muestro algunas
de estas plantillas, puedes ver cómo se ven. Entonces tenemos héroe, tenemos
futuros llamados a la acción. Entonces hice mi investigación en
cuanto a lo que es el más utilizado dentro
de la industria. ¿ Cuáles son algunos
estándares de la industria y cuáles son los más utilizados? Cuadrículas de contenido, precios. Tenemos el blog, tenemos login y
tenemos foros, contáctanos y mucho más. Y todo es receptivo
como un corto aquí mismo. Y todo es usar
x fácilmente para discursos. Entonces si hago clic aquí y
salto dentro de estas imágenes, se
puede ver que tenemos la
pila, tenemos el relleno. Entonces si elijo cambiar
la pila, por ejemplo, puedo hacer clic aquí mismo, y va a
cambiar esta dirección de esta pila a esta dirección. Y vas a
notar que va a empujar este contenido hacia abajo
y se va a escalar uniformemente a lo que esté creando en mi sistema de diseño. Una vez más, si
te interesa, diseñó el sistema es inicio
diseño system.console. Hay un
curso de YouTube para ello. Todo se explica
con mucho más detalle y puedes consultar esta página para que puedas ver los futuros
como mencioné, átomos o moléculas,
organismos, diagramas de flujo, plantilla, modo oscuro, animado
iconos, curso incluido. Entonces todo está dentro del sistema de diseño
de inicio. Si quieres crear
tu propio sistema de diseño, solo asegúrate de prestar
atención a dos cosas. Asegúrate de que cuando empieces
a escalar para escalar con un propósito. No solo escale por el bien
de escalar y asegúrate de
usar solo elementos que sean necesarios en tu sistema de diseño. Para mi sistema de diseño aquí mismo, utilicé elementos de mi investigación que la mayoría de
los diseñadores están utilizando. Pero para tu sistema de diseño, tal vez no vas a
usar estos elementos cuando
vamos a usar alguna
otra cosa, algo más. Pero básicamente, empezó con pequeños elementos como botones como te
mostré y luego
expandirte a partir de ahí, añadir componentes, pero asegúrate de
agregar solo los
componentes que son realmente necesario en
su sistema de diseño. En el siguiente video,
vamos a hablar de tokens de diseño, qué son un elaborado
un poco más de ellos, y cómo usarlos en su sistema de diseño. Entonces
te veré ahí.
6. Tokens de diseño: Los tokens de diseño están
en el corazón de cada buen
sistema de diseño
por ahí porque son una gran herramienta para la colaboración
entre diseñadores, desarrolladores y tenedores de estaca. En este video, te voy
a mostrar cómo lo hago y cómo
lo hacen algunas grandes
empresas por ahí, y cuáles son algunas de las mejores prácticas
con respecto a los tokens de diseño? Así que empecemos. Aquí estamos de
nuevo en Adobe XD y una vez más en mi archivo maestro de sistema de
diseño de inicio, que te mostré
en video anterior. Y los tokens de diseño se encuentran
justo aquí a la izquierda. Básicamente lo que mencioné anteriormente en la lección
anterior, tienen el nombre. Este nombre es realmente
útil porque cuando estás colaborando
con otros diseñadores, digamos que quería usar
este color oceánico para, digamos, color de fondo de nuestro modelo o
algo así. Y entonces tengo que decirle eso a mi colaborador de diseño
en mis compañeros de equipo de diseño, digamos usar ese color azul dentro de ese fondo modelo. Pero tenemos múltiples colores
azules. ¿ De qué color azul? ¿ Usar? Un BAT F9. Una vez más, va a ser
realmente difícil para la gente, sobre todo si estás trabajando
con ellos lejos. Si estás trabajando desde
casa con tus compañeros de equipo, va a ser difícil les
va a ser difícilimplementar ese cambio. Y va a ser
difícil para todos en el equipo recordar este código
hexadecimal, por ejemplo. Entonces por eso
estamos usando nombres. En este caso,
sólo puedo decirles, utilizar el azul océano para el
fondo del modelo. Y todo el mundo está
en la misma página. Ocean es mucho más fácil de
recordar que por ejemplo, hashtag one, BH EF,
EF nueve o lo que sea. Entonces los desarrolladores pueden usar la
misma función y voy a mostrar que en tan solo un segundo en un gran sistema de diseño por ahí. Pero básicamente este es
todo el punto del diseño. Los tokens los usan sabiamente y los
utilizan como escalas de su sistema de
diseño. Por supuesto, puedes
usarlos para texto. En este caso, solo tengo titular y cuerpo,
pero por ejemplo, se
puede utilizar el
tamaño de caracteres
específicos para elementos específicos. Por ejemplo, si el personaje
está justo debajo, digamos, animaciones o
ilustraciones aún mejor, entonces puedes usarlas en conjunto con
esas ilustraciones. Por ejemplo, la
ilustración de titular, grande, la ilustración de titular
es pequeña o lo que sea. Y luego cuando le dijiste
a tus desarrolladores, asegúrate de cambiar la herramienta de ilustración
grande titular, digamos 64 puntos. Todo el mundo en el equipo
va a ser capaz entender eso mucho
mejor que si no, lo que mencioné
anteriormente sobre los componentes y
diferentes nombres de componentes. Entonces si acercamos
aquí mismo a mis botones, por
ejemplo, cambiar el
panel de capas, haga clic aquí. Se puede ver que tenemos
botón por defecto grande, porque estos son botones grandes, entonces tenemos botón predeterminado, medio, botón predeterminado pequeño. Entonces estos son botones predeterminados, pero si cambio a otra
cosa, por ejemplo, aquí mismo
tenemos un selectores. Selectores, valor en línea,
selectores grandes en valor de línea, selectores
medios valor en línea, digamos pequeño o lo que sea. Por lo que hay que prestar atención
a todos estos detalles. Y tenemos imágenes. Hemos imaginado en grande
y cuántas columnas juega tu imagen en esta jaula? ¿ Imagen? Grande, dos columnas, imagen grande, imagen de nueve
columnas grande, 10124 con medio de pantalla completa, la misma historia, pequeña
la misma historia. Entonces tenemos dispositivos,
por ejemplo,
dispositivo dash, navegador
o lo que sea. Por lo que hay que utilizar estos tokens de diseño para
explicar lo que está creando en su sistema de
diseño y lo que cada token de diseño está diseñado
para hacer en primer lugar. Por lo que ahora te mostraré esto, que es un sistema de
diseño de Salesforce Lightning Design
tokens ya te
mostró que en la lección
anterior donde
hablamos de todos estos
impresionantes sistemas de diseño, cómo lo usan es
básicamente exactamente lo mismo. Por lo que tenemos marca
accesible variante oscura de marca que es
accesible con blanco. Por lo que están utilizando combinaciones y están utilizando
estos soportes. Por lo que se puede ver el acceso global disponible para su uso
en la plataforma. O si no, puedo pasar el cursor
aquí interno, por lo que disponible para desarrolladores internos de
Salesforce solo sujetos a cambios. Por lo que tienen todas estas reglas puestas en marcha cuando se libera, versión número 1234 y así sucesivamente, T-Mobile, tan difícil de
usarla con un equipo. ¿ Lo usas con una app? ¿ Lo usas para
front-end o back-end? ¿ Lo usas para lo que los
visitantes están viendo o para tablero interno
o para panel
de visitantes, tienes que etiquetar todos estos elementos. Y aquí se puede
ver otra cosa. Entonces están usando RGB primero
y valor hexadecimal segundo, mayoría de las marcas están
utilizando al revés, por lo que están usando el valor hexadecimal
primero, el valor RGB segundo. Por lo que hay que tener en cuenta en todos estos elementos respecto a
su propio sistema de diseño. Entonces por eso creé
esta estructura simple en sistema de diseño de
Inception porque mayoría de las personas son
capaces de entenderla. Nos hemos enfocado, por
lo que es sólo para desenfocar, pero si estoy creando una variación
en el enfoque, por ejemplo, diferentes tonos de enfoque, tal vez voy a
decir algo como foco 80 por ciento o botón de
enfoque o enfoque. No lo sé,
sección héroe o lo que sea. Vas a contar eso dentro del propio
token de diseño. Entonces todo el mundo en el equipo
va a ser
capaz de entenderlo. Y si te muestro
aquí una vez más, si nos desplazamos un poco más hacia abajo, puedes ver cuántos colores
diferentes
tienen sólido elige uno al azar. Por ejemplo, éste, palet cloud blue, 15. Por lo que tienen 15
variaciones diferentes de esta paleta. Nube color azul. No, no es T-Mobile y aquí lo están
usando internamente. Esta es la versión 2.14 y
se puede ver paladar nube azul, así que cómo
lo están utilizando y cómo funcionan. Entonces básicamente, como
sigo mencionando, todo
se debe a tu
proyecto, tu necesidad, no
vas a tener todos estos colores diferentes
si tus clientes, un proyecto no los requiere. Entonces, ¿por qué molestarse en
crear y gastar tanto tiempo en crear
todos estos colores, tonos, variaciones
y mucho más cuando se puede salir con la suya
con algo como esto. Por ejemplo, sólo unos pocos colores
aquí y allá y luego, y esto es
lo crucial y Keating, cuando el gasto del proyecto, siempre se
puede agregar más colores. Por ejemplo, déjame
mostrarte eso también. Vamos a hacer clic en seleccionar eso. Vamos a cambiarlo a, no
sé algo,
lo que sea aquí mismo. Y si queremos
agregar este color, simplemente
puedo dar click aquí. Y puedo decir
algo como renombrar, tal vez llamarlo blob púrpura,
algo así. ¿ Este es mi color principal
en mi auto secundario? Yo lo llamaré colores principales. Así que ponlo justo por
aquí, blob púrpura. Y luego cuando selecciono mi blob, próxima vez pueda hacer clic en Blob. El púrpura se va a
aplicar al mismo tiempo. Por ejemplo, si
tenemos estos blobs en la sección héroe
de tu sitio web, por ejemplo, o de tu app, puedes contar tu diseño. compañeros de equipo, cambia
el blob número cinco a blob color morado. Haga clic, haga clic en Listo. Es por eso que
los tokens de diseño son impresionantes. Por eso son útiles, porque puedes
usarlos para crear todos
estos elementos en tus sistemas de diseño mucho más rápido. Y todos en
tu equipo pueden estar en la misma página y
entender lo que estás creando mucho
más rápido que si no estás usando estos tokens de diseño
en primer lugar. En la siguiente lección,
vamos a
hablar de escalar tu sistema de
diseño. Cuándo debes hacerlo y
cómo debes hacerlo? Te veré ahí.
7. Escala tu sistema de diseño: Cuando estés escalando
tu sistema de diseño, siempre
debes
hacerlo mejor propósito y siempre
debes
hacerlo paso a paso. ¿ Por qué lo estás escalando? ¿ A dónde lo estás escalando? ¿ Cuatro? Qué páginas
para qué tamaños, para qué dispositivos
tienes que pensar todas estas cosas a
medida que escalas. Vamos a saltar a Adobe XD y te
mostraré y te daré algunos consejos sobre cuándo y cómo escalar tus sistemas de diseño. Aquí estamos en Adobe
XD una vez más dentro de mi archivo maestro del
sistema de diseño de inicio. Si quieres consultar este sistema
de diseño, asegúrate de hacer click
en el enlace en el PDF y ahí está, puedes comprobarlo
si te interesa. Para este caso, digamos
que acabas de crear estos botones y has
elegido estos tres tamaños, grandes, medianos y pequeños. Y a partir de aquí tal vez
quieras agregar tamaño
extra grande.
¿ Qué debes hacer? Tienes que consultar primero con
tus desarrolladores, ¿
debo crear
diferentes botones para ese tamaño extra grande, o eres capaz de
escalarlos y reposicionarlos? Codificar, por ejemplo,
tal vez el
tamaño extra grande para el botón en sí no
sea realmente necesario. A lo mejor se debe
ajustar el espaciado y va
a caber a un tamaño más grande. Entonces por eso la
comunicación entre diseñadores y
desarrolladores es la clave. Por lo que no estás invirtiendo
tu tiempo en estos cambios que
realmente no son necesarios y obligatorios. Entonces si no son
obligatorias y necesarias, vas a terminar con
un aspecto limpio como este. Pero si lo son, entonces tal vez
vas a tener 20 tamaños de botones diferentes. Y luego más adelante por la línea, vas a decidir
que, por ejemplo, tamaño número siete
no es realmente necesario. Qué tamaños usar. Eso es bastante simple. Tendrías que hablar con
tu cliente y tienes que hablar con la empresa para la
que estás trabajando. ¿ Qué tamaños usan tus usuarios? Si están utilizando, por ejemplo, solo una talla mayoritaria de ellos, eso se asegura de enfocar toda tu atención
en ese solo tamaño. Y luego cuando estás trayendo más usuarios abajo de la
línea, por ejemplo, esos usuarios están llegando, la
mayoría de ellos están llegando a, no
sé, tamaños de escritorio. Vamos a la mayoría de ellos están usando computadoras portátiles y luego de
repente, vasta afluencia de nuevos
usuarios están usando iPhone. Cómo adoptar este
tamaño de escritorio a los tamaños de iPhone. Entonces tienes que hablar
con tus clientes, tus desarrolladores, tienes que hacer tu investigación
todo el tiempo. Y luego al escalar, realmente no tiene
mucho sentido escalar a tablet si sus usuarios
no usan tamaños de tableta. Entonces piensa en todas
estas cosas, pero piensa en estas
cosas a medida que
avanza y como estás creando
tu sistema de diseño, porque
no hay punto de escala. Por el bien de la escala, hay todo un punto detrás esto es escalar con un propósito. Y eso es para atraer nuevos usuarios o
dar cabida a nuevos usuarios, cabida a
las necesidades y deseos de los nuevos usuarios. Y por lo tanto hay que
escalar con eso en mente. Además, como sigo mencionando
a lo largo de esta clase, no creen elementos
que no sean necesarios. Por ejemplo, si
no estás apoyando avatares, porque tal vez no tengas
perfiles en tu proyecto, en tu producto, en tu
tablero o lo que sea. A lo mejor no
tienes la opción de
que inicien sesión para crear su cuenta, entonces ¿por qué
crearías avatares? Realmente no tiene mucho
sentido. No los creas
sólo para estar aquí, creando porque son
necesarios para tu proyecto. Y no tengas demasiado miedo. Si, por ejemplo,
acaba de crear una punta de herramienta y no
creaste 50 información sobre herramientas diferentes. A lo mejor no lo son necesariamente. Y Tooltip, como
su nombre indica, es realmente así de simple porque es solo un
poco de información. Así que no prestes demasiada atención a todas estas pequeñas cosas. Asegúrate de obtener las cosas grandes
como el diseño, como rejillas, como la cuadrícula de espaciado y el ritmo
horizontal y vertical, todas estas cosas antes de
preocuparte por la información sobre herramientas. Y una cosa final que
quiero contarte sobre escalar tu sistema de diseño
es con estas plantillas. Entonces si acercamos aquí
mismo y
te mostramos aquí mismo es Futures
llamado a equipos de acciones. A lo mejor tenemos cuadrículas de contenido, tal vez tengamos portafolio,
tenemos precios. Y por ejemplo, estás
creando un dashboard. Dentro de ese dashboard, vas a tener
una sola página que es solo una
visión general, por ejemplo. Dentro de ese panorama, les
vas a dar
la posibilidad de ver a Madonna, digamos gastos mensuales
o algo así. No entre en
demasiados detalles al adoptar nuevos componentes
para trabajar con esto, tal vez puedas usar
componentes existentes y luego solo deja los desarrolladores integren la
solución que no es nativa. Si es nativo, a diferencia de por ejemplo, Gráficos, entonces tienes que
crear un diseño para un solo gráfico y no te molestes con crear
múltiples gráficos, haciendo múltiples cosas solo
para el en aras de tener todos estos gráficos se asegura de
enfocar en lo necesario
para ese proyecto. Y luego a medida que
se agregan nuevas características más adelante, asegúrate de escalar junto con esas nuevas características y
tu sistema de diseño. No te molestes en crear
aquellos elementos que no son necesarios
o no necesariamente, porque solo
va a desorden tu sistema de diseño y en
realidad va a
ralentizar tu progreso en este proyecto en particular y
sus desarrolladores progresan. Porque recuerda,
sea cual sea que seas el diseño de un diseñador dentro
de tu sistema de diseño, los desarrolladores tienen que desarrollarte, así que no uses su
valioso tiempo si esos elementos no están
necesariamente en el momento. Y puedes crear un atraso. Entonces, por ejemplo, estos elementos, digamos, son necesarios
en este momento. Estos elementos son
necesarios en tres meses, estos elementos son
necesarios en seis meses. Para que puedas crear
atrasos de elementos. Y a medida que avanza el proyecto, a
medida que avanzas, entonces puedes abordar esos
elementos un poco más tarde porque en este momento no son
necesarios. Así que una vez más, y
finalmente, escalar, ya que necesita ser escalado,
no se limite a escalar por
el bien de la escala.
8. Tu proyecto de clase: Tu proyecto de clase
para esta clase es crear un
sistema de diseño propio y subir una imagen del
mismo a tus proyectos de clase. Ahora, no inviertas demasiado
tiempo en este sistema de diseño. Simplemente crea algunos elementos aquí y allá e
intentó organizarlos y pensarlo como
un sistema de diseño. Puedes crear una captura
de pantalla de ellas o puedes exportar toda la
mesa de trabajo como una anterior, mostrarte en uno de
los videos anteriores y simplemente adjuntarla a
tus proyectos de clase. Realmente me encantaría ver
lo que ustedes han creado. Entonces si vuelvo a cambiar a mi
sistema de diseño de inicio debe tener archivo. Tal vez puedas crear
algo como esto. Entonces, por ejemplo, puedes crear tres botones diferentes en
tres variaciones diferentes. O puedes crear una
entrada de texto, por ejemplo, tal vez puedas mostrar
diferentes variaciones de esa entrada de texto o un selector abierto y cerrado
en tres tamaños diferentes. Así que no inviertan demasiado
tiempo en este proyecto, pero todavía me encantará
ver lo que ustedes
pueden llegar. Por eso espero ver tus diseños en tus proyectos
de clase.
9. Conclusión: Entonces ahí vamos. Hemos
llegado al final de esta clase. Muchas gracias
por verlo. Realmente espero que le hayan
sacado algo de valor y realmente espero
que entiendas cómo funcionan los sistemas de
diseño. No te dejes intimidar
por estas grandes empresas están haciendo cuando
buscas inspiración sobre los sistemas de
diseño, asegura de empezar a pequeña medida y asegúrate de evolucionar con el tiempo. Incluso si estás creando
un sistema de diseño para que trabajes
como freelancer, por
ejemplo, en sitios web
o proyectos móviles. Asegúrate de crear solo los elementos
que sean necesarios. Haz tu propia investigación, que son los elementos que
estás usando todo el tiempo, que son los elementos
que nunca usas. Quizás puedas
crear un atraso como te expliqué en la
lección anterior y luego abordar ese atraso de
elementos a medida que
avanzas y a medida que avanzas y
construyes tu sistema de diseño, tienes todos los
recursos, que mencioné. Por lo que todos estos sistemas de
diseño para inspiración y mucha más
información dentro del PDF. Y también tienes el enlace
al sistema de diseño de Inception. Si te interesa,
puedes comprobarlo y adaptado para trabajar a tus
necesidades y para tu proyecto. Muchas gracias por
ver este curso. Muchas gracias
por inscribirse en ella y hasta la próxima vez, cuídate.
Aleksandar Cucukovic, Improving lives, one pixel at a time.
