Transcripciones
1. Introducción a la clase: Hola creativos. Adobe XD es una herramienta súper
útil para los diseñadores de
sitios web
que desean crear prototipos
interactivos que puedan colaborar
con otros creativos,
obtener comentarios de sus
clientes y, finalmente, preparar la obra de arte para que un desarrollador
web la Esto significa que todos involucrados pueden visualizar
cómo
se verá y funcionará el sitio web se verá y funcionará antes de que realmente
empieces a construir Esto ahorra mucho, esto ayuda a evitar cualquier
confusión entre usted, el cliente y los
desarrolladores e incluso
le permite descargar activos directamente
desde el prototipo en sí. Hola, mi nombre es Malin
y trabajé como marca y
diseñadores web desde 2015 Dirijo un estudio de diseño junto
con mi esposo Jeremy, y nos enfocamos en ayudar a empresas
sustentables
con su comunicación. Trabajé con una gama de marcas
y diferentes industrias, desde
organizaciones benéficas hasta universidades y empresas
privadas En esta prueba,
te llevaré a través de cómo aprovechar
al máximo Adobe
XD como diseñador y te mostraré cómo trabajar de manera
más eficiente y crear diseños
más atractivos que a tus clientes les encantarán Comenzaremos cubriendo
los conceptos básicos de Adobe XD, como configurar mesas de trabajo
y usar los diferentes paneles y usar los diferentes Luego pasamos a
temas más profundos como estilos, estados y componentes que te ayudan a crear prototipos más rápidos y
mejores Finalmente,
cubriremos la colaboración y cómo compartir sus
diseños con socios, clientes y desarrolladores para ambos
comentarios de co-creación sobre el desarrollo También cubriremos complementos
útiles y otros consejos profesionales que te
ayudarán a llevar Adobe XD aún más lejos Esta clase es para cualquiera que quiera comenzar
con Adobe XD o simplemente quiera
recoger algunos consejos y trucos que quizás te
hayas perdido hasta ahora Espero que esta
clase te ayude a
sentirte más seguro trabajando en Adobe XD y
que te ayude a crear un proceso
creativo eficiente y agradable No puedo esperar a ver
lo que creas. Vamos a saltar a la clase
2. ¿Por qué crear prototipos?: Antes de empezar Con todas las grandes
características de Adobe XD, solo
quería
compartir un poco por qué creo que es
una gran herramienta y por qué es realmente
importante tener una herramienta de creación de prototipos cuando
estás diseñando Si estás diseñando
sitios web y creando diseños con solo crear imágenes que estás compartiendo
con tus clientes. Eso puede llegar a ser bastante
difícil cuando llega a iteraciones de retroalimentación Y realmente queremos un proceso donde el cliente se sienta muy emocionado y comprometido y
parte de su proyecto. Entonces ahí es donde entran estas
diferentes herramientas. La primera razón por la que me
gusta Adobe XD es
porque es parte
del paquete Adobe Si ya tienes
licencia para Adobe, entonces podrás usar
Adobe XD sin costo adicional También funciona con todos los diferentes atajos
e Integraciones. Y te sentirás muy
familiarizado con la interfaz, que creo que puede ayudar con la curva
de aprendizaje al principio. La segunda razón por la que me
gusta mucho Adobe XD es que nuestros clientes y
colaboradores en
realidad no necesitan una
cuenta para hacer cosas como comentar
y descargar archivos Esto lo hace muy fácil
porque no tienes esa barrera extra de tratar de
explicar por qué necesitarían crear una cuenta
para algo. Adobe XD también te permite recibir comentarios directamente
sobre tu Prototype Y puede ser una
gran manera de obtener comentarios que hayan identificado
áreas específicas Así que es mucho más fácil tratar descifrar lo que
necesitas hacer en áreas específicas en
lugar de tener un correo electrónico largo con
mucha información Crear un
prototipo interactivo
también es una muy buena
manera de asegurarse que está minimizando
cualquier fricción entre la idea del cliente, su diseño y la implementación
real de sus desarrolladores. Porque en realidad todos
pueden ver cómo funcionaría prácticamente, en lugar de poner imágenes
o textos y decir, bueno, esto se movería o
esto funcionaría de esta manera. Entonces esta es una manera de cerrar
esa brecha realmente bien. Por último, Adobe XD es
un estándar de la industria. No el único,
sino uno de los grandes. Y eso significa que si, digamos que otro
Creativo quisiera continuar trabajando
en tu proyecto, sería muy fácil
para ellos integrarse en él porque lo más probable es que los
ya estén familiarizados con él. Ahora que sabemos por qué
Adobe XD es una herramienta útil, vamos a saltar a cómo
funciona realmente
3. Adobe Xd tour: Si es la primera vez que
usa Adobe XD, puede ser muy
útil comenzar a familiarizarse con lo que son
los diferentes paneles y cómo configurar
sus documentos Lo primero que debes hacer
al crear un nuevo documento es
crear una Mesa de Trabajo Las mesas de trabajo pueden ser del
ancho de un dispositivo específico, como un escritorio estándar o
un modelo de teléfono específico O puedes crear un tamaño personalizado. Cualquier proyecto puede tener muchas mesas de trabajo
diferentes
o diferentes tamaños. Por lo que suelo empezar
con un formato, ya sea de escritorio o teléfono. Y luego una vez que el diseño
esté listo para ese formato, agrego un segundo tamaño
para cada página para mostrar cómo funciona el diseño en
un formato responsive. Ahora usemos un formato de escritorio y vamos a guardarlo en la Nube porque eso
nos permite invitar posteriormente a
colaboradores. Ahora que estamos en el documento, verás que
puedes
moverte por tu mesa de trabajo
agarrándote a los tres
puntitos en la Si queremos expandir o disminuir la altura
de la mesa de trabajo, simplemente
hacemos doble clic
en la
propia mesa de trabajo y luego movemos la
línea aquí en la parte inferior Y también podemos cambiar
el nombre de la mesa de trabajo. Esto nos ayuda a mantenernos un poco más
organizados y el proyecto, una vez que empecemos a tener
muchas páginas diferentes, es posible que hayas
notado esta línea. Esta línea es súper útil
porque nos está
mostrando dónde está el punto de interrupción, lo que
significa que todo lo
que esté por encima este punto será visible
sin un desplazamiento Esto es súper útil porque
queremos asegurarnos de que siempre
estamos agregando
información clave sobre el pliegue, pero también mostrando que
hay más que ver
de manera clara para alentar a
las personas a desplazarse Si quieres agregar
otra mesa de trabajo, simplemente haz clic en este pequeño icono que parece un cuadrado a la izquierda Y luego obtendrás sugerencias con
diferentes tamaños de mesa de trabajo Te habrás dado cuenta de
que tenemos tres pestañas en la parte superior que dicen diseño,
prototipo y compartir. Cuando creamos nuestros diseños, siempre
estaremos
en la pestaña Diseño. Pero cuando queremos que
el diseño sea interactivo, queremos estar en
la pestaña prototipo. Aquí puedes vincular botones y otros elementos para llevarte a otra página cuando haces clic. Otros elementos interactivos como trabajar con el cambio
de estado de desplazamiento, por
ejemplo, son en realidad
parte de la pestaña Diseño Entonces, la pestaña prototipo
será donde hagas clic en
los elementos. Veremos
esto mucho más a
fondo más adelante en la clase. La pestaña Compartir te permite compartir tu diseño con
clientes, desarrolladores y otras personas a
las que quieras revisar el
diseño o implementarlo. Pero también hay una manera de compartir el archivo de diseño
para la colaboración. Para ello, tienes un botón
arriba en la esquina superior derecha. Verás a una
personita con un ícono más. Aquí. Puedes invitar a
alguien por correo electrónico que luego
pueda editar el
documento contigo. Esto es muy
útil si tienes un equipo multipersona e incluso
puedes trabajar en el
diseño al mismo tiempo A continuación se encuentra el
icono de compartir. En realidad tenemos dos opciones más útiles. El primero es
esta pequeña carpeta. Aquí. Este es un tipo de vista previa donde puedes conectar
tu teléfono y mirar el
prototipo de diseño a través un dispositivo para previsualizaciones, también
tenemos este pequeño botón
Reproducir que te
permite previsualizar el
diseño directamente en tu escritorio. Volvamos a la pestaña
Diseño y echemos un
vistazo a lo que podemos encontrar en el
panel del lado izquierdo Esta es una
parte realmente olvidada de Adobe XD, pero tiene tantas herramientas
útiles En la parte superior
tienes formas básicas, la opción de agregar textos, y la herramienta pluma
que funciona muy similar a la que tenemos
en Adobe Illustrator. Para las opciones
de cuadrado y círculo. Están bastante limitados
por el triángulo en realidad te permite establecer
el número de puntos. Si quieres tener bordes
redondeados. Otras opciones realmente agradables
para que sea súper fácil
crear fondos y
otros elementos de diseño. Si miras la parte superior aquí, también
puedes ver la herramienta
pathfinder en Adobe XD, donde puedes unir formas Pero en Adobe XD en
realidad me ha ayudado mejor. Si porque puedes
mover las formas independientemente si haces
doble clic en las formas. Entonces no es destructivo
la forma en que es en algunas otras herramientas de Adobe. También hay una gran
opción que puede ser muy útil si estás creando un diseño con los elementos
repetitivos, como una cuadrícula de imagen, por ejemplo. Todo lo que tienes que hacer es seleccionar la forma que
quieras repetir. Haga clic en la cuadrícula y, a continuación,
saque los bordes para
crear más elementos. Un poco más abajo, tenemos tres iconos. Y voy a hablar del
medio ahora mismo porque vamos a
cubrir
los otros dos en otros capítulos. Pero la del medio es
esencialmente tu pestaña de capas. Aquí podrás ver
todas tus mesas de trabajo. Y si tomas una mesa de trabajo, la verás resaltada
en el espacio de trabajo Esto puede ser muy
útil si tienes un proyecto realmente grande con
muchas páginas diferentes. Ahora que sabemos nuestra espera
un poco más alrededor, volvamos a entrar en la pestaña
Diseño y echemos un vistazo a agregar
algunos textos e imágenes
4. Imágenes y texto: Genial, Así que
comencemos a trabajar con el texto y las imágenes en Adobe XD, puedes agregar texto haciendo clic el pequeño icono de texto y en el panel de
la izquierda Y luego solo puedes
hacer clic y arrastrar para obtener el tamaño del libro de texto que
quieras cuando se trata de texto, muchas
de nuestras opciones van a estar aquí en el panel de la derecha Lo primero que
quiero mostrarte son solo las cosas básicas con las
que empiezan, que es donde
cambias tu fuente. Por ejemplo, sus
tamaños de fuente, su Espaciado, Kerning y el espacio
entre las oraciones, por
ejemplo, las diferentes filas Pero también tienes muchas otras opciones geniales como cómo
cambiar a todas las mayúsculas y estilizar
tus textos y otras formas Realmente quiero llamar
su atención sobre estas tres cajitas de aquí. Porque
realmente pueden determinar cómo trabajas con el
texto en Adobe XD Si miramos aquí ahora mismo, se establece en este cuadro de texto
normal, lo que significa que el texto está
confinado a esta casilla de aquí. Entonces, si tuviera que, digamos, copiar todo este texto y
seguiría agregando más. Verás que está ahí, pero cuando haga clic de
distancia está oculto. Entonces esos serían textos que no
serían visibles en tu diseño a menos que
realmente extiendas la caja. Y esto puede causar algunos problemas cuando realmente diseñamos y se
lo entregamos a un desarrollador
porque tal vez
no se den cuenta de que el texto está ahí. Por lo que en realidad no terminan apareciendo en el sitio web del
desarrollador final. Lo que podemos hacer en cambio es que
podemos ir a esta opción aquí, lo
que significa que responde a la altura de tus textos. Entonces, si sigues agregando texto, el cuadro de texto seguirá haciéndose más grande en tu opción aquí, tienes
lo mismo, pero responde al ancho. Entonces antes, si seguimos agregando cosas y las
teníamos de esta manera, en realidad no
va a ir más amplia. Pero si lo cambiamos
para que sea horizontal, entonces en realidad somos
capaces de ir y hacer cosas agregadas al
ancho también. Genial. Lo siguiente de lo que
vas a hablar son estas cosas básicas alrededor los colores para que puedas establecer el relleno. Podrías hacer una frontera
si quieres. Y también puedes trabajar
con la opacidad de tu texto. Si lo desea. También puedes hacer cosas
como sombras internas,
sombras paralelas o difuminaciones de
fondo. Una cosa que también puede ser bueno saber es que en realidad puedes vincular las cosas directamente en tu
texto, en tu Prototipo. Digamos, por
ejemplo, que tienes textos que serán
enlazados en el sitio web. En lugar de enviar a
tu desarrollador y vincularte con estas cosas
diferentes, en realidad
puedes
simplemente vincularlo aquí y ellos sabrán
exactamente dónde ponerlo. Entonces ahora pasemos a las imágenes. Cuando estamos agregando imágenes, hay algunas
formas diferentes de hacerlo. Una forma es simplemente arrastrar
la imagen a tu mesa Y se mostrará como el
tamaño que en realidad es. Y si
en realidad lo estás redimensionando, mantendrá las
proporciones que tiene. Pero como ves, es un poco complicado empezar
a copiarlo o
cambiarlo tanto. Entonces lo que prefiero
hacer es crear un contenedor real
para esta imagen. Entonces podrías
hacerlo usando las formas. Entonces digamos, por
ejemplo, una caja. Y luego tomamos
la imagen y la
arrastramos directamente a la caja, y luego vamos a
heredar esas propiedades Podrías hacer exactamente el mismo nombre si quieres usar
una forma diferente. Como por ejemplo, si
hiciéramos esta forma de triángulo, bueno, la
cambiaríamos a cinco esquinas. Y luego hacemos
exactamente lo mismo de arrastrar una imagen dentro de ella. Una cosa a notar
aquí es que Adobe XD normalmente como un
contorno o un borde Entonces eso es algo que
quizás quieras echar un vistazo y desmarcar si
no quieres usarlo, si haces clic en las
imágenes también verás este pequeño círculo en las esquinas y
esas te ayudarán a correr
las esquinas la imagen si
lo prefieres Si quieres
crear algo que tenga una forma muy diferente, sugiero usar la
herramienta pluma y simplemente usarla para trazar el área que te
gustaría que fuera el contenedor de imágenes. Entonces solo haces
exactamente el mismo nombre de arrastrar la imagen
a esa forma Hay un par de funciones realmente
interesantes que puedes usar con imágenes que pueden hacer que tu prototipo sea mucho
más interactivo. Lo primero es el desplazamiento. Entonces digamos esta sección aquí donde
realmente nos gustaría que alguien pudiera
desplazarse para ver esta imagen completa. Pero podemos hacer es que
podemos seleccionar las imágenes y luego subir a esta
pequeña zona de aquí. Aquí es donde realmente podemos crear estas diferentes opciones de
desplazamiento Entonces podrías hacer un scroll
horizontal, un scroll vertical o ambos. Entonces digamos que queremos
hacer scroll horizontal. Da click aquí y podemos ver
que marcará estas secciones. Entonces ahora si hacemos clic en
el botón Reproducir, podemos desplazarnos hacia abajo y podemos ver que en realidad podemos
desplazarnos para
revelar esa imagen que anteriormente
estaba fuera
de la mesa de Otra gran función puede ser alinear texto e imágenes
entre sí. Entonces digamos esta
sección, por ejemplo, digamos que esta imagen estaba un
poco apagada y quería
asegurarme de que todas las
imágenes para la misma altura, podamos subir a las
herramientas de alineación en la parte superior. Y en este caso,
elegiríamos alinearnos a la cima. Haga clic en este, y
automáticamente los
alineará entre sí. Si tienes una imagen
que es casi perfecta, pero en realidad te
gustaría voltearla. Entonces digamos vertical
u horizontalmente. Simplemente puedes ir a
estos pequeños iconos aquí y simplemente hacer clic en ellos para voltearlos vertical
u horizontalmente. Lo último que quieres
compartir contigo en este capítulo es cómo arreglar realmente
algo para que
quede en la
posición del asiento cuando te desplazas. Y esto puede ser útil
para cosas como, digamos una navegación. Digamos que en este
caso nos gustaría que la navegación fuera pegajosa. En ese caso,
es posible que queramos crear este fondo
para asegurarnos de que sea visible en
diferentes fondos. Y luego seleccionamos
el propio menú. Podemos agruparlos a todos. Y luego solo elegimos una posición
fija al desplazarnos. Ahora que hacemos clic en
el botón Reproducir, podemos ver que
álgebra desplazándose, el menú se
fijará en la parte superior Y esto es algo
que podrías hacer de muchas maneras diferentes para jugar con imágenes
y texto para digamos, características del
blog u otros elementos que te gustaría destacar
5. Estilos: Cuando creamos sitios web, queremos que todos los
diferentes elementos
sean consistentes en
diferentes páginas. Al igual que podrías tener un
tamaño de fuente para cada uno de los títulos y uno para los títulos H2 y uno
para el body copy, por ejemplo. Incluso podrías tener una
fuente diferente para los testimonios. Entonces, ¿cómo nos aseguramos de que sea realmente consistente
sin que tengamos que
entrar y cambiar todos
los diferentes
activos individuales si algo cambia? Aquí es donde entran los estilos. Los estilos esencialmente te ayudan a
crear reglas para que
sepamos que todo lo
que tenga
ese estilo será
formateado de la misma manera. Digamos, por ejemplo,
que tu cliente regresa y quiere actualizar el
color de los botones, entonces no tienes que ir y actualizar
manualmente
cada botón. Simplemente puedes actualizar los estilos. Entonces, para crear tus estilos, todo lo que tienes que hacer es
seleccionar
el texto o el color que te
interesa hacer estilo. Después vas a la pestaña de
tu biblioteca aquí
en el lado izquierdo Y entonces todo lo
que tenemos que hacer es hacer clic en el pequeño Plus para crear
un estilo de personaje. Esto automáticamente nombrará el nombre de la fuente y el tamaño de la fuente. Pero también puedes cambiarle el nombre a esto simplemente
haciendo doble clic
y diciendo, por ejemplo, Títulos, edad uno De esta manera podrás hacer un seguimiento de todo en caso de que
tengas, digamos, diferentes de la misma
fuente pero de diferentes tamaños. Si quieres hacer lo
mismo con los colores, todo lo que tienes que hacer es
seleccionar el bloque de color, ir a colores y
hacer clic en el más. Y aquí vamos a
exactamente lo mismo. Podemos llamar a esto pie de página y
fondo, por ejemplo. Ahora bien, si iría a
este bloque de color y de hecho
haría clic en
mis colores en mis estilos. Se puede ver que lo
cambia a ese Color. Exactamente lo mismo para el texto. Si elegimos un trozo
de texto que no es el título y damos click
en el título aquí. Verás que lo cambiará
automáticamente. Esto viene junto con todos
los diferentes estilos
que tienes aquí. Pero si
cambiaras de opinión, siempre
puedes ir a
cambiarlo sin realmente actualizar
los estilos aquí. Veamos cómo
funciona esto prácticamente. Entonces digamos, por ejemplo, que hacemos todos estos títulos
diferentes, esta era uno. Ahora bien, si me gustaría ir y me
gustaría cambiar esto, voy a tener que hacer como mercado, clic derecho y ir a editar. Ahora, puedo cambiar esto
a un tamaño más grande, digamos en para que podamos
verlo y verán que todas estas
instancias diferentes se han actualizado todas. También podrías hacer
cosas como actualizar el color y otras
propiedades del mismo también. También puedes ver que
si haces clic derecho, puedes resaltarlo en Canvas. Eso te mostrará todos
los diferentes lugares donde se aplica
ese estilo.
6. Componentes: Al igual que con los estilos, los componentes te
ayudan a establecer reglas para que el diseño pueda repetirse sin que tengas que cambiar las cosas
manualmente. Pero con los componentes,
estamos sacando mucho más allá de
solo fuentes y colores. Aquí puedes crear
un conjunto completo de diferentes elementos juntos
que se convierten en uno de los componentes. Con los componentes, las secciones enteras pueden ser elementos recurrentes. Pero con esta
cosa realmente inteligente llamada anulaciones, aún
podemos personalizar los activos
individuales sin tener que editar el maestro
para crear nuevos componentes O tienes que hacer es seleccionar los diferentes elementos que te gustaría que formaran parte de él. Entonces en este caso,
vamos a tener este gráfico de tipos de apertura. Y sólo voy a
agruparlos por simplicidad. Entonces lo que vamos a hacer
ahora es que vamos a clic en el pequeño
componente más aquí. También puede hacer clic con el botón derecho
y hacer clic en Crear componentes. O podrías hacer
el hockey con K. Hagamos este componente. Ahora verás que tiene este pequeño borde verde por
ahí con este pequeño diamante. Ahora significa que son
los componentes maestros. Y si ves aquí de lado, dirá componente y principal. Y eso quiere decir que
este es el maestro. Entonces esa es una manera súper
fácil de hacerlo. Ahora, todos los cambios
que hagamos a éste poblarán a
todos los demás. Digamos, por ejemplo,
que queremos
tener estos componentes exactos
en otro lugar. Digamos en el
pie de página por ejemplo. Entonces, deshagámonos de
éste y agreguemos. Así que sólo podemos hacer click aquí. Podemos cambiar el nombre de esta
apertura, horarios de apertura. Y podemos simplemente hacer clic
y arrastrar eso aquí para tenerlo
en esta ubicación. Ahora bien, todos los cambios
que le hagamos
al maestro van a ser
poblados sobre esto también. A veces puede ser un
poco complicado cuando tienes muchas
mesas de trabajo pasando para
saber dónde está el maestro Lo que puedes hacer es
hacer clic derecho aquí y simplemente resaltar en Canvas que te
mostrará dónde está eso. Entonces en este caso lo
resaltará aquí. Pero si haces clic en
este de aquí abajo, simplemente
puedes hacer clic en
Editar componentes principales. Y eso te llevará
al MainComponent. Entonces esa es una excelente
manera de
navegar si tienes un
poco más de complejidad. Digamos aquí que en realidad
vamos a cambiar el
color de este título. Por ejemplo, hago
doble clic aquí. Voy a cambiar esto a
un color diferente solo para que podamos tener súper claros qué es
lo que estamos haciendo. Hagámoslo como un
verde realmente brillante para que podamos ver
lo que está pasando. Ahora, si te desplazas
hacia abajo hasta nuestras otras instancias, veremos que el color también
ha cambiado aquí. Si hacemos clic en este
, lo verás antes de
que dijera principal. Y aquí dice instancia, porque éste no es
el componente principal, eso significa que
en realidad podemos hacer anulaciones ¿Qué significa eso?
Entonces, básicamente, si estás haciendo cambios en instancias
reales, en realidad
puedes hacerlo
independientemente del maestro, y solo se aplicará
a esta instancia. Esto es para cosas estilísticas. Digamos que queremos que
esto sea un poco más alto. Podemos ver los datos,
algo que no se
ha impactado aquí arriba. Lo mismo ocurre si estamos cambiando de color o
haciendo otras cosas. Entonces digamos para este, en realidad
me gustaría cambiar
esto a una fuente diferente. Podemos hacer eso y podemos
ver que no ha cambiado. El que es el maestro. Esto se llama anulaciones, y esto ayuda a que sea súper fácil si queremos
cambiar algo Lo bueno es que seguirá
heredando todos los personajes que no
hemos ido ajustando Entonces digamos por ejemplo, en este caso hemos ido
cambiando el título aquí. Así que hemos cambiado
la fuente y hemos cambiado la altura de las cajas, pero no hemos cambiado el
color del fondo. Así que vamos a cambiar
el color del maestro. Se puede ver cómo los elementos que
en realidad no hemos cambiado en realidad
seguirán
vinculados al propio maestro. Entonces ahora puedes ver que
todavía hemos hecho este gris porque
este estilo particular no
se ha sobrescrito
en esta instancia
7. Trabaja con los estados: Para que tu diseño
se sienta mucho más real, en realidad
podemos agregar estados hover directamente en tu prototipo Esto puede ser un cambio realmente
simple, como, por
ejemplo, cambiar el color de un botón cuando
pasas el cursor sobre él O cambios más complejos. Entonces hay dos
estados diferentes con los que podemos trabajar. Tenemos el estado hover
y el estado toggle. Y el primero que quiero
mostrarles es el estado hover. Entonces queremos asegurarnos de
que este botón se
convierta en un contorno en lugar
de tener el relleno sólido. Entonces echemos un vistazo a
eso no fue muy primero. Como puedes ver, este
botón es un componente, por lo que cualquier cosa que te
gustaría agregar un estado T2 tiene que ser primero un componente. Entonces lo que puedes
ver es que adherir tiene un estado predeterminado
y un estado de hover Entonces comencemos de nuevo solo para poder
mostrarte cómo funciona. Entonces es un componente. Lo que vamos a hacer es hacer clic en este pequeño plus y
elegir el estado de desplazamiento Cualquier cosa que hagamos
al estado de desplazamiento va
a ser visible cuando se pasa el
cursor sobre el botón Y cualquier cosa en
el estado predeterminado es lo que verás
antes de pasar el cursor Queremos asegurarnos de que
estamos en el estado hover. Y luego voy a bajar
y me voy a
asegurar de hacer doble clic
en el relleno. Quiero
asegurarme de desmarcar
eso y elegir frontera en su lugar Voy a elegir este color verde
oscuro. Voy a subirlo
por unos dos más. Después voy a
hacer doble clic en el texto, desplazarme hacia abajo hasta el relleno, volver a
usar el cuentagotas y
elegir el mismo color verde Entonces ahora podemos ver
que el botón tiene esa apariencia que
queremos tabular cuando se pasa el cursor Y si hacemos clic en todo
el componente ahora y hacemos clic en el estado predeterminado, podemos ver
ese signo que queremos que tenga. Antes de pasar el cursor. Puedes alternar entre
estos dos para asegurarte que tu diseño aparezca
como quieras. Vamos a previsualizar y
ver si conseguimos ese efecto. Sí, entonces está funcionando perfectamente. Entonces ahora quiero
mostrarte el estado toggle. Entonces el estado de alternancia es genial para cosas cuando quieres que ocurra
una acción, cuando haces clic, por ejemplo, cuando tienes un
toggle típico y te
gustaría que eso se mueva
de izquierda a derecha. Pero en este caso, me
gustaría que la gente pudiera votar por qué
evento deberían tener en agosto haciendo
clic en el corazoncito en los diferentes cursos
que les gustaría ver. Lo que quiero que suceda es que cuando alguien hace clic en este corazón, pasa de un
contorno negro a un relleno rojo. Así que voy a hacer es
que voy a hacer clic en un nuevo toggle estados. Voy a asegurarme de que
estoy en estados Toggle. Al tomar el borde,
haga clic en el relleno y elija un bonito color rojo. Entonces ahora si haces clic en
este corazoncito, puedes ver que se pone rojo. Entonces funciona exactamente de la manera
que a nosotros también nos gustaría. Dado que los componentes
funcionan de todos modos. Ahora digamos que
querías cambiar esto de un corazón rojo a un corazón verde porque no es un huerto urbano. Asegúrate de nuevo, estás
en los estados de toggle. Cambia de color y elige
un bonito color verde. Ahora, si vamos y revisamos de nuevo, podemos ver esa aspirina haciendo clic en las otras
que también se vuelven verdes. Y también tiene el
efecto inverso, lo cual es genial. Para que puedas ir y
venir entre tus
diferentes estados.
8. Agregar videos: Agregar video directamente tu prototipo ayudará a que se sienta mucho más interactivo
y mucho más vivo. Esto es algo
que no
usaste para poder
hacer en Adobe XD Entonces es realmente emocionante
que seas capaz de hacerlo. Ahora, digamos, por ejemplo, que nos gustaría agregar
un fondo de video a esta sección para crear un poco más de
engagement en el sitio, lo que necesitas hacer es solo crear algún tipo
de cuadro delimitador Así que acabo de crear
una plaza aquí. De hecho, podemos ir
a nuestra pestaña Capas para que podamos ver lo que estamos haciendo. Solo vamos a
asegurarnos de tener nuestras pestañas de capa abiertas y luego podemos hacer clic en este cuadrado aquí para que podamos ver
lo que estamos haciendo. Entonces todo lo que vas a
hacer es hacer clic y arrastrar tu video a
este cuadro delimitador E inicialmente, no pasa nada cuando lo
previsualiza porque solo se pone a jugar
cuando haces clic en él. Y eso no es lo que queremos. Nos gustaría que fuera autoplay. Bueno, al menos en este caso, lo que vamos a hacer es
volver atrás y mirar la configuración
de este video. Algo más Eso es
bueno recordar es que tu video tiene que ser en este momento
máximo 25 mb. Entonces, si es más grande
que eso, tal vez tengas exportarlo a una resolución menor. Entonces, si hacemos doble clic sobre
él y hacemos doble clic nuevamente, se
puede ver ahora que en
realidad estamos entrando en
el grupo de masas un rectángulo donde nuestro ratón de cuadro
delimitador, y luego tenemos el video de riego del
jardín urbano Así que ahora tenemos todas
estas diferentes opciones. Entonces, si hacemos clic aquí, podemos ver que es
ahora mismo play on top. Pero también podrías haber
jugado automáticamente, que es lo que me gustaría. Entonces también podemos hacer clic en
este pequeño icono aquí donde realmente
tenemos la personalización. Lo primero que puedes
hacer es que puedes ver tu video haciendo clic en
este pequeño botón Reproducir. Y también eres capaz de silenciarlo. Si hay algún audio. En este caso, no la hay, pero aún puedes
hacerlo si solo
quieres asegurarte de que también
puedes recortarlo. Entonces, si quieres recortarlo a, digamos que sea un poco
más corto. Eso está bien. Sólo puedes
aprobarlo. Entonces también
puedes hacer algo
que siempre me gusta hacer, que es la reproducción en Loop. Veamos cuál es el
resultado ahora. Ahora hemos dicho que es reproducción
automática y loop. Vayamos a previsualizar nuestro diseño. Podemos ver que se reproduce automáticamente. Y si esperamos un poco, también
vamos a ver que
va a hacer un bucle. Perfecto. Así que eso es todo lo que
necesitamos saber para simplemente agregar un video simple a nuestro archivo XD
9. Complementos: Adobe XD tiene
mucha flexibilidad, pero a veces solo
hay cosas que puedes hacer con
la propia aplicación Aquí es donde entran los plugins. A pesar de que Adobe XD puede hacer
tantas cosas diferentes. Hay un montón de
plugins que simplemente hacen nuestra vida mucho
más fácil día a día. Entonces quería mostrarte un
par de mis favoritos. Entonces primero veamos cómo podemos
instalar plugins. Entonces los complementos son la
pestaña lenta en la parte inferior. Pero lo vamos a hacer si no
hemos instalado ningún
plugin antes es solo hacer clic en este plus,
una vez que
estés aquí mismo, podrás
buscar diferentes plugins, o simplemente puedes navegar
para ver si encuentras algo que se ajuste
exactamente a lo
que es que te gustaría. Simplemente puedes hacer clic en
el botón Obtener y eso automáticamente lo
descargará a tu Adobe
XD una vez que esté instalado, solo
quiero
mostrarte estos
que son mis favoritos absolutos Entonces el primero
que
te voy a mostrar se llama Colour In SPO Y la razón por la que me gusta es que no solo
tienes cosas como paletas de
colores donde
realmente puedes explorar
diferentes paletas de colores, lo cual es súper útil cuando estás creando
algo nuevo Pero mi característica favorita
es el verificador de contraste. Entonces, si seguiste alguno de mis otros trabajos o mi canal de
YouTube, sabes que estoy súper
entusiasmado por asegurarme de que los
diseños sean accesibles. Entonces digamos, por ejemplo, que nos gustaría comprobar
si este texto aquí que tenemos sobre este fondo coloreado va a ser visible
y accesible. Bueno, podemos hacer es simplemente
copiar el código de color aquí. Yo sólo voy a hacer eso. Entonces voy a
elegir mi texto, lo voy a seleccionar aquí. Y sólo voy a pegar
esto para el color de fondo y va a aparecer aquí para que podamos ver cómo
se ve. Entonces también veremos la relación y veremos si pasa. Digamos, por
ejemplo, que
cambiaríamos esto a
otro color. Digamos que lo
cambiaríamos algo
que
es mucho más oscuro. Ves, tal vez esto y luego
subimos un
poco la opacidad así nos acercamos mucho más a ese color verde
oscuro Así que vamos a copiar ese
relleno ahora y pegarlo en. En cambio. Elige nuestra portada. Entonces elegimos nuestro color ahí. Ahora pegamos eso. Ahora
verá que todas estas comprobaciones diferentes fallarán porque el contraste
es realmente bajo. Por lo que se vuelve muy difícil
para alguien leer. Esto es súper importante
para todos los sitios web porque queremos
asegurarnos de que todo sea inclusivo Pero claro, extra importante si estás
trabajando con, por ejemplo, un sitio web para personas mayores o personas con diferentes formas
de discapacidad visual. El siguiente plugin que
quiero mostrarte es uno llamado Lorem Ipsum, que es simplemente uno súper fácil porque no sé ustedes, pero cuando estoy
diseñando algo, lleva
demasiado tiempo solo
ir a un fondo de sitio web Laura, o escribir mi propio texto Entonces si queremos un poco de Lorem, voy a que podamos hacer es
simplemente ir y crear una forma donde nos
gustaría que se llenara eso Y luego podemos rellenar
con texto marcador de posición. Hay muchas opciones
diferentes, pero esta primera
en realidad te permite elegir, por ejemplo, si
quieres un idioma diferente. Entonces solo voy a ir con
la versión en inglés. Puedes elegir si
quieres que sea un punto, punto,
punto o punto al
final o simplemente nada. Voy a elegir
periodo porque me
gustaría tener una parada completa. Y luego sólo
vamos a ir Insertar texto. ¿Esto es realmente pequeño? Así que todo lo que voy a hacer aquí ahora es que en realidad soy
capaz de personalizar esto. De hecho, puedo
ir y cambiarlo a mi formato real,
lo cual es genial. Así que sólo podemos ir aquí
e ir así. Y de repente somos
capaces de tener un lorem muy agradable
en nuestro diseño El siguiente plugin, que
es súper útil, se llama maqueta rápida Y éste tiene tantas cosas
diferentes en una. El primero que
quería mostrarte es si empezamos con
la pestaña de elementos, aquí es donde tienes todos
tus pequeños iconos geniales, todas tus pequeñas etiquetas. Y me gustó que este
no solo tenga los íconos, sino que también tenga cosas
como un toggle por ejemplo. Digamos que nos
gustaría usar esta. De hecho, podemos
después de que lo
pusimos para ir y personalizarlo en XD Entonces digamos que nos
gustaría cambiar el color. Todo lo que tenemos que hacer
es hacer doble clic y todas las propiedades
serán editables aquí, en realidad
podemos cambiar esto a, digamos, un color verde Entonces todo esto es
realmente visible en XD, lo que facilita mucho las cosas Otra cosa que me encanta
es cuando estás haciendo wireframes y simplemente pones como marcador de posición para una imagen Entonces, en lugar de tratar de hacer que algo
parezca una imagen, así un cliente va a entender que va
a vencer a una imagen. Simplemente puedes usar un gráfico
como este, por ejemplo. También tienes activos. Entonces esto es un
poco más complejo. Ilustraciones para
ejemplos, o fotografía, o incluso gráficos y tablas. Así que estos son realmente
útiles cuando estás creando un poco
más de un diseño complejo. Todo lo que tenemos que hacer es ir y de hecho mirar cifras, por ejemplo, o en acción. Y esto está vinculado a
los sitios web de humanos que podrías
haber visto antes. Y eso me gustó mucho. También tienen muchas ilustraciones
más inclusivas
que podemos usar. Muchas opciones diferentes. Y también eres capaz de hacer más como escenas y
otras opciones también. Cuando entres por primera vez
a la maqueta rápida, vas
a poder elegir un tema Esto es súper útil si, digamos que estás haciendo un
tema oscuro y realmente quieres trabajemos para ese en
particular, siempre
puedes volver atrás y
elegir un tema diferente Y vas a conseguir todos
tus diferentes ácidos aquí. El siguiente que quiero
mostrarles se llama globular en realidad encaja perfectamente porque recientemente
hice un proyecto donde teníamos
muchas formas orgánicas Y así llegué a
pensarlo para este tutorial. En básicamente cuando quieras, como una forma de fondo
o cualquier otra cosa que te gustaría tener
una forma orgánica. Puedes entrar en este
plugin y podrás
ajustarlo para que como puedas cambiar, la complejidad vendrá más redondeada, menos bordes diferentes. Y como tú arriba en esto, va a tener más lados
diferentes. También puedes hacer singularidad. Por lo que volverá a ser más
blobby en el lado izquierdo. Y si lo subes, se
volverá mucho más angular y tendrá
diferentes formas. Puedes jugar con esto
y crear manchas únicas. Y cuando te sientes feliz con ella, todo lo que tienes que hacer es
hacer clic en
estas pequeñas manchas Puedes crear, hacer clic en blob
y luego todo lo que tienes que hacer es ir
a buscarlo, que suele ser jugar
el exterior de tu mesa de Entonces a veces solo hay
que alejar un poco. Otra vez, igual que
con los demás. Este es totalmente
editable aquí. Entonces puedes ir y
digamos que me dejan caer los colores. Entonces digamos que nos gustaría
usar este
color de fondo que tenemos. Eso es muy agradable. Ahora en realidad podemos
colocar esto aquí y ponerlo atrás y tener un poco de elemento de diseño
pasando aquí. Entonces creo que esta es
una muy útil cuando
quieres crear un poco
más de capas a tu diseño. El último que quiero
mostrar se llama anima. Y esta es
súper útil cuando estás haciendo ciertas
animaciones y cuando también quieres exportarla
a código para la creación de prototipos como
un sitio web en vivo Entonces lo que puedes hacer es crear diferentes cosas que antes no
pudiste hacer en Adobe XD, pero recientemente con lo que
resolvemos, por ejemplo, con estados y componentes, realmente capaces de hacer ahora Entonces algunos de estos no son tan
útiles como solían ser. Lo que es realmente útil es
la función get code. De hecho, puedes descargar HTML
completo del diseño que has construido para
que puedas enviarlo a un desarrollador
o usarlo tú mismo. Esta es una característica realmente útil si quieres algo
que sea súper rápido y que la vida sea un poco más fácil
para tu desarrollador. Recomiendo encarecidamente ir a la sección de complementos y
navegar un poco porque probablemente
encontrarás algo que sea realmente útil
para tus proyectos. Así que ve y echa un vistazo a tu alrededor
10. Uso de la pestaña de prototipos: Ahora que tenemos un diseño con un par de mesas de trabajo
diferentes, y estamos contentos con las
diferentes herramientas básicas Queremos comenzar a conectar estas diferentes mesas de trabajo
utilizando la herramienta de prototipado Así que vamos a
la pestaña Prototipos. Así que ahora vamos a ayudar en la pestaña Prototipo y
vamos a echar un vistazo a algunas
cosas diferentes que son posibles con la capacidad de
prototipado Y esto en realidad es
súper emocionante. Entonces, básicamente, la pestaña
Prototipos se verá muy similar
a la pestaña de diseño Y si seleccionas un
tablero de arte o si seleccionas, digamos un elemento diferente, puedes crear un vínculo entre él y otro tablero de arte. Así es como creamos
diferentes traducciones y cambiamos entre mesas de trabajo cuando digamos que haces clic en un botón Entonces digamos, por ejemplo, que me gustaría que
este botón de contacto nos llevara
a nuestra página de contacto. Todo lo que tengo que hacer es seleccionar
el botón y luego tirar esta pequeña flecha
azul hasta el
gráfico del tablero de arte me gustaría que fuera. Ahora podemos ver que en el
lado derecho tenemos un poco de algunas opciones
diferentes con las que podemos jugar Lo primero que podemos hacer es echarle un vistazo al gatillo. En este caso, me gustaría
que fuera un toque porque me
gustaría que alguien
haga clic en el botón y luego venga a la página de contacto. Entonces podemos ver cómo nos
gustaría que esto sucediera. Entonces más adelante vamos a
mirar auto animar. Pero por ahora sólo
vamos a ir por la transición porque nos gustaría pasar
de una posición a otra. Queremos asegurarnos de que
el destino sea correcto. Y podemos ver si nos
gustaría tener alguna animación. Así que vamos a ver cómo se ve
eso
cuando lo previsualicemos. Entonces ahora si hacemos clic en
el botón Contacto, llegamos directamente a
la página de contacto, que es exactamente
lo que nos gustaría. Entonces esa es una muy sencilla. Pero, pero por ejemplo, si quisiéramos
crear algunas animaciones. Entonces lo que voy a hacer
es
mostrarte si duplicamos
este tablero de arte, vamos a volver al diseño. Me gustaría que pasaran un par
de cosas cuando aterrice en
la página de contacto. Lo primero que me gustaría
hacer es que me gustaría que se revelara
esta cajita. Así que voy a
elegirlo y luego lo
voy a arrastrar directamente para que podamos ver un
poquito así. Entonces voy a cambiarlo. Entonces me gustaría que esta imagen realmente
se mueva hacia abajo. Entonces me gustaría que pudiéramos
ver a mucha más
gente de la foto. Y entonces me gustaría que
el texto fuera mucho más pequeño para que
podamos ver mucho mejor a la
gente cuando tenemos este diseño
diferente. Vamos a poner 63, por ejemplo, cambiar un poco el texto para que se vea un
poco mejor los diseños. Entonces ahora podemos comparar
estos dos y nos
gustaría hacer la transición de
este verde a este verde. Todo lo que tienes que hacer es
volver al prototipo. Hacemos clic en todo el tablero de arte, así que el nombre aquí arriba. Y luego vamos a
detenerlo al siguiente,
que es el destino final. Ahora bien, vamos a
elegir el tiempo, que es una opción que tenemos cuando tenemos todo un tablero de arte. Voy a poner esto con
muy poco tiempo exterior 0.4 s. entonces vamos a elegir auto animar porque nos
gustaría que se animara Podemos tener algo
como Ease Out, que es una opción muy
agradable y fluida. También podemos tener algunos
diferentes como snap. Pero me voy a
quedar con esta. Voy a ponerlo a 3 s solo para que tenga un
poquito de duración. Así que lo hacemos muy rápido. Podemos poner 1 s si
queremos ser realmente largos, para ponerlo más tiempo para que
podamos experimentar ahí. Entonces ahora veamos qué
pasa cuando vamos a jugar. Increíble que ocurra la animación. Entonces los textos se hicieron
más grandes la imagen se mueve hacia abajo y salió un poco de horarios de
apertura. Entonces ahora lo último que quiero
mostrarles es una superposición. Esto es súper práctico para las cosas que
quieres tener pop up. Por ejemplo, como un boletín
o digamos un teclado. Entonces en este caso, me
gustaría crear un boletín informativo. Y lo que vamos a
hacer es que sólo
voy a crear un nuevo tablero de arte. Puede ser de cualquier tamaño realmente, siempre y cuando vaya
a encajar en nuestro pop-up, voy a cambiar el nombre de
este boletín. Genial. Entonces, lo que voy a hacer ahora es crear el
diseño real para ese pop-up. Voy a elegir un
color de fondo para esto solo para
poder ver en qué es lo que realmente
estoy trabajando. Me gustaría que este diseño
tuviera un borde solo porque no
sé en qué fondo va a
aparecer
este en cada instancia. Entonces voy a
elegir este borde
como este color verde y agregar un par de tallas más grandes
para el contorno. Genial, Así que ahora sólo voy
a agrupar todos estos. Lo siguiente que queremos
hacer es asegurarnos de que nuestro
tablero de arte sea básicamente del tamaño de lo real que nos gustaría sobreponer
para ser. Entonces no tiene que ser exacto, pero quiero
acercarlo bastante. Genial. Entonces ahora tenemos un boletín
emergente aquí y podemos reutilizarlo para cualquier instancia donde nos
gustaría que surgiera. Y luego voy a
pasar al prototipo. Entonces me gustaría aquí
en el enlace del boletín aquí para que realmente
tenga este pop-up que aparezca. Así que voy a
hacer clic y arrastrar por aquí. Vamos a hacer que
el Trigger sea un golpecito. Y vamos a
elegir Overlay. Vamos a asegurarnos de que
el destino sea el correcto. Y no creo que me
gustaría ninguna animación para esto. Entonces ahora veamos qué pasa. Escojamos éste
y luego vamos a jugar. Entonces, si bajamos por aquí,
damos clic en newsletter. Ya podemos ver que este
pop-up viene en pantalla. Me gustó mucho que
en realidad sea transparente
como fondo. Sólo muestra las cosas que
nos gustaría que mostrara. Si hacemos clic en algún lugar fuera
de él, desaparecerá. Entonces esas son algunas interacciones realmente
útiles que puedes usar para
tu prototipado
11. Obtención de comentarios: Increíble. Así que ahora tu diseño
está listo y
quieres compartirlo con tus
clientes donde los comentarios, es donde nos
dirigimos a la pestaña Compartir. Para compartir tu diseño. Todo lo que tienes que hacer es hacer
clic en la pestaña Compartir. Y luego vamos
a echar un vistazo a estas diferentes opciones aquí. Así que tenemos un par
de opciones diferentes para la forma en que
realmente estamos compartiendo nuestro diseño. En este caso, cuando
queremos recibir comentarios de nuestros clientes, nos vamos a quedar con este
llamado Design Review. Y podemos elegir aquí. Entonces, o solo invitó a la gente, lo que significa que necesitamos
agregar su correo electrónico. Cualquier persona con contraseña, lo que significa brocar una contraseña, o cualquier persona con el enlace Entonces cuál
elijas realmente
depende de la configuración del proyecto. Si, digamos que estás
trabajando uno a uno con una persona y solo quieres
que esa persona tenga acceso. Y quieres asegurarte de que otras personas del
equipo no puedan acceder a él. Se puede elegir el único invitado o el eje
con contraseña. Pero veamos qué
pasa cuando muchos de nuestros proyectos es que tenemos un equipo con el que
estamos trabajando. Así que podríamos enviarle esto a
un cliente y luego lo
compartan con su redactor para verificar todo a través, tal vez con su comercializador para asegurarse de que
todo esté Y así quieren poder reenviar esto a otra persona. Entonces tiendo a ir
con cualquiera que tenga un enlace a menos que haya un alto riesgo de
que algo que necesite muy privado
pueda salir. Así que voy a ir
con esto y luego simplemente haga clic en Crear enlace. Una vez creado este enlace, todo lo que tenemos que hacer es hacer clic en este pequeño icono aquí
y copiar el enlace. Y esto es exactamente lo que verá el
cliente cuando haga clic en el enlace que le
envíes en un
correo electrónico, por ejemplo. Lo que vamos a ver aquí es la mesa de trabajo del
lado izquierdo Y luego vamos a ver un campo
común a la derecha. Si tenemos diferentes
mesas de trabajo como en este caso, también
verás una de seis Y si, digamos que has vinculado estas cosas diferentes en
el menú o diferentes elementos, se podrá hacer clic en
ellos Entonces como puedes ver aquí, si hacemos
clic en este botón de Contacto, nos llevará
al sitio aquí, que es la página de Contacto. También puedes recorrer con estas flechas para
navegar por las diferentes páginas. Esto es súper fácil
para tu cliente ver todas las diferentes
páginas que has diseñado. Lo bueno aquí
es que pueden comentar directamente sobre el diseño. Porque muchas veces cuando
obtenemos comentarios de los clientes, pueden escribir un correo electrónico largo con muchos
nodos diferentes y estás tratando de descifrar qué comentarios
se aplican a diferentes secciones de
un sitio web, incluso Y así cuando
tienes grandes proyectos, esto es muy útil. Entonces lo que podemos hacer es que
nuestro cliente pueda tener esta función pin
y puedan
colocarla para cualquier sección para la que
este comentario sea relevante. Digamos, por ejemplo, que lo colocamos en esta foto. Y ellos comentarían. Por ejemplo, ¿podríamos tener una imagen de un
térmicamente en su lugar? Ellos enviaron y luego
puedes entrar
y responder directamente para que
puedas hacer clic en Responder aquí. Y esto hace que sea
muy fácil tener discusiones sobre los diferentes
comentarios y comentarios sin tener que saltar a
una llamada o intentar tener esto de
ida y vuelta a través Así que me gustó mucho esta característica. Entonces, si volvemos a
nuestro archivo XD real, y digamos que ahora
estamos empezando a implementar algunos de estos comentarios Puede que en realidad no
queramos que nuestro cliente vea en vivo qué es lo
que estamos haciendo. Y aquí es donde entra en juego esta función de
Enlace de actualización. Adobe XD solo mostrará cosas
nuevas que
le hayan pasado al Diseño si
haces clic en Actualizar enlace Así que nunca tendrás que preocuparte
realmente tu cliente vaya al enlace y vea
la mitad de las cosas de progreso
porque
solo se actualizará si haces
clic en Actualizar enlace. A continuación, echemos un vistazo a cómo trabajar con un desarrollador
12. Compartir con un desarrollador: Bien, genial. Entonces tu
cliente ha aprobado tu diseño y es hora de que lo compartas con
tu desarrollador. Aquí es donde
volvemos a esa pestaña de acciones, pero en cambio vamos
al desarrollo. Estas opciones hacen
que sea muy fácil para nuestro desarrollador
entrar y tomar todos los códigos de color, tamaños de
fuente y
estilos que hayas configurado. Pero también pueden
descargar todos
los diferentes activos que has creado directamente
desde el prototipo. Así que estamos de vuelta en la pestaña de acciones. Y ahora queremos compartirlo
con nuestro desarrollador porque
nuestro cliente lo ha aprobado todo y estamos
listos para comenzar a construir. Lo que vamos a hacer es
que vamos a cambiar esto de Design Review
a desarrollo. Y aquí también podemos
elegir exportar para web. Y esto es muy importante
porque queremos asegurarnos de que cualquier activo que hayamos marcado para la
exportación
pueda ser descargado directamente por
nuestro desarrollador. Pero para hacer eso, en realidad
tenemos que
ponerlos como listos para la exportación. Así que vamos a hacer
eso volviendo a la pestaña Diseño y haciendo clic
en cualquiera de los activos. Entonces digamos esta
imagen por ejemplo, todo lo que tienes que hacer es
desplazarte hasta esta pequeña sección aquí
y hacer clic en marcar para exportar. Ahora déjame volver
a nuestra pestaña de acciones. Veremos que esto ya tiene disponible y
dirá un activo. Entonces, si tomamos esto,
dirá activos descargables. Esto permite esta
función para que alguien pueda descargar
los activos directamente. Entonces, lo que vamos a hacer ahora
es simplemente hacer clic en Actualizar enlace para que tengamos esos activos y todos nuestros nuevos
ajustes allí. Podemos ver que a pesar de que
actualizamos el enlace, los comentarios que tenemos anteriormente siguen ahí,
lo cual es súper útil Pero ahora en realidad hay
otra función. Entonces, si vamos a esta pequeña pestaña de
desarrollo a la derecha, veremos que tenemos una lista de los activos que
están disponibles, los diferentes colores,
incluyendo los códigos de color, lo cual es súper útil. También tenemos los diferentes estilos de
caracteres que se establecen que estamos
usando a lo largo de esta página. Y también tenemos
diferentes interacciones. Entonces disparadores diferentes,
diferentes destinos. Entonces todo el Xd
es súper útil para alguien que está
desarrollando el sitio Si volvemos a los activos aquí arriba, lo que alguien podría hacer ahora es hacer
clic en esta imagen aquí, y en realidad podemos
ir y descargarla. Eso descargará
ese activo directamente. Si tienes muchos de ellos, podrían marcarlos todos y luego descargarlos todos a la vez. Una vez que
abramos esto, realmente veremos que pesar de que se trata de un
activo creado y XD, creará dos archivos
que se han descargado Siempre crea uno
a la vez el tamaño, y uno a dos veces el tamaño. Y esto es para que tu
desarrollador tenga opciones porque obviamente quieres un archivo que sea lo suficientemente
alta calidad. Pero no
quieres que ralentice tu sitio o tome demasiada
energía para cargarlo. Si desea que
diferentes activos que en realidad están separados en su diseño se
adhieran al diseño exacto. Y te gustaría que realmente
exportaran como una imagen única. Todo lo que tienes que hacer es hacer
clic en ellos y
agruparlos y luego marcar
para exportar juntos. De esta manera si volvemos a
compartir, actualice nuestro enlace. Y ahora podemos ver que tenemos aquí
este activo
que es un grupo. Entonces, a medida
que descargamos, en realidad descargará estos dos activos
agrupados como una sola imagen. Y esto es súper útil
cuando intentas
tener una manera de controlar cómo se compone
el diseño Si tienes una situación en la
que no quieres que estén,
digamos, animando de forma independiente
o haciendo cualquier otra cosa. A veces solo necesitamos que
las cosas estén en una posición fija. Y esta es una característica realmente
genial
13. Sitios web sostenibles e inclusivos: Un tema que está muy
cerca de mi corazón es sostenibilidad y la
accesibilidad para los sitios web. Debido a que
los sitios web son puramente digitales, muchos de nosotros no pensamos la huella ambiental, pero en realidad
hay mucho que podemos hacer para tener un
impacto realmente bueno cuando estamos integrando cosas
como contenido de video,
animaciones, desplazamiento de paralaje Muchas de estas cosas requieren mucha más energía que si
tuviéramos una sola página estática. Por ejemplo, cada vez que
estamos diseñando un sitio web, siempre
queremos comenzar
con un básico y solo agregar cosas si están agregando algo a la experiencia real del
usuario Y se siente muy importante
para el viaje del usuario. Donde podamos,
podemos asegurarnos de que tamaños de
nuestros archivos sean lo más
pequeños posible. En lugar de subir un video, podemos usar un
enlace de YouTube, por ejemplo Así que hay muchas maneras
de
pensarlo donde podemos minimizar la energía real necesaria para cargar esa página cuando se trata
de accesibilidad, también por supuesto queremos
pensar en cosas como todas las etiquetas, Contraste de color, qué fuentes y tamaños
usamos para que las personas con
diferentes habilidades y diferentes experiencias
de la web
van Incluso pequeñas cosas como poner la descripción
cuando estás haciendo un formulario fuera del campo
en lugar de como marcador de posición, significa que un texto a voz en realidad
puede leerlo a alguien para entienda
lo que Hay muchas
cosas diferentes que podemos aprender. Entonces realmente
te animo a que investigues eso. Y creo que
también hay algunos cursos geniales sobre Skillshare que
puedes explorar También me aseguraré de
vincular un par de herramientas y aplicaciones
realmente geniales en la descripción. Para que puedas ir y comenzar
tu viaje de aprender más sobre sitios web sostenibles
e inclusivos
14. Consejos de bonificación: Entonces, antes de sumergirnos en
el proyecto de clase, solo
quería
compartir un par de consejos y
trucos
diferentes que me he ayudado en el camino. Cosas que he aprendido
como diseñador web. El primero es establecer expectativas
muy claras a lo largo de tus proyectos. Siempre que estés
trabajando en un sitio web o en muchas partes móviles. Si lo pensamos,
cualquier proyecto necesita primero
tener los objetivos
que debemos establecer. Tenemos que asegurarnos de que tenemos todos los diferentes
activos que podrían ser proporcionados por diferentes personas. Digamos que el sitio web
copia las imágenes, las fotos de la página acerca de. Entonces pueden ser todos estos activos diferentes
que debemos considerar. Y tenemos que asegurarnos de que
todos los que están involucrados,
que necesitan proporcionar activos, sepan exactamente cuándo debe suceder
eso, sepan exactamente cómo
proporcionar esos activos, qué se supone que deben ser. Y entonces tenemos
que asegurarnos de que eso sea súper claro. Es por eso que siempre me gusta tener una línea de tiempo muy
clara y luego configurar un portal de cliente donde siempre se muestre
esto. Puedes configurar
tu portal de clientes y muchas formas diferentes, incluyendo lugares como Trello,
Asana, campamento base, noción Milano Hay tantos lugares
diferentes que puedes visitar. Así que también podrías elegir
una herramienta con la que ya
trabajaste y que estés muy
feliz y con la que estés familiarizado. Una forma de asegurarse de que el proyecto funcione sin problemas es
recordarle a todos a lo largo
del proyecto el siguiente paso. Digamos, por ejemplo,
que hemos tenido la reunión sobre los
objetivos del sitio web, y estamos justo antes de que estemos a
punto de entrar en wireframes Sabemos que después de
los wireframes vamos a necesitar todos
los diferentes activos como imágenes y textos
para que podamos
pasar de wireframe
a terminar Entonces no queremos
terminar en una situación en
la que los wireframes estén
terminados y estemos esperando todos los activos Podríamos decirle a nuestros clientes o a
las personas involucradas diciendo:
Oye, ahora estamos en la etapa, estamos a punto de
entrar en wireframes Quiere que esos wireframes
estén listos, digamos dentro de dos semanas, necesitamos tener todos
los demás activos listos para que comencemos a
implementar el diseño Así es como puedes hacerlo. A lo mejor compartes un enlace
para que lo suban, o de cualquier otra forma que
creas que sería la forma más fácil para
todos los involucrados. Otra gran cosa en
la que pensar es en quién tiene poder de decisión en este proyecto y quién es capaz comentar y lanzar ideas. Entonces lo que queremos
asegurarnos es que
no estamos acabando en una
situación en la que haya, digamos 510 personas
diferentes de acompañar comentando y
teniendo pensamientos diferentes Pero que a lo mejor no siempre
han sido parte de cada reunión. Digamos que alguien
entra en la etapa que no ha sido
parte de la estrategia, pero ahora está viendo
el sitio web terminado. En este punto. Realmente no estamos buscando comentarios sobre la
estructura del sitio web. Tal vez solo estemos buscando pequeños comentarios sobre cosas que hemos estado
arreglando en el camino. Queremos
asegurarnos de saber quién tiene el cierto
poder y asegurarnos de que están haciendo
el tipo correcto de retroalimentación en cada
etapa del proceso. Todo esto de nuevo se reduce
a pedir comunicar esto. Así que uno de nuestros trabajos más importantes como diseñadores
web es
asegurarnos de que tenemos muy claras en nuestra comunicación y expectativas de nosotros
y otras personas. La colaboración es una parte muy DIVERTIDA de cualquier proyecto y te
recomiendo encarecidamente
asociarte con
otros profesionales en tu espacio que
complementen tus habilidades. Y creo que
solo hay que fortalecer todo
el proceso del Diseño
del Sitio Web. Otros creativos pueden incluir redactores, estrategas
desarrolladores web,
marketers, cualquier persona que
creas que será
una fortaleza para el proyecto y
complementará una fortaleza para el proyecto y También creo que es una
muy buena idea traer gente
en etapas muy
críticas. Incluso antes de mostrar
algo al cliente, puedes colaborar con estas
personas detrás de escena. Entonces, digamos, por
ejemplo, estás creando wireframes y quieres
crear esta característica realmente agradable Pero no estás
seguro de si va a ser difícil de construir. Puedes discutir con
tu desarrollador y ver cuál
es la mejor manera de hacerlo para que tengamos ese pensamiento antes de
presentarle algo a nuestro cliente que potencialmente podría ser bastante
difícil de construir. Ahora pasemos a
los proyectos de clase
15. PROYECTO DE CLASE: Ahora es tu turno. Quiero ver qué tipo de
sitio web estás creando. Si también quieres crear un
sitio web para un huerto urbano, igual que yo hice aquí. He agregado el brief en
la sección de proyectos de clase. Si prefieres trabajar en un proyecto cliente o proyecto
personal, sería increíble
y me encantaría ver tu trabajo en
la pestaña Proyectos. Si te quedas atascado en algún momento, solo avísame en los comentarios y me encantará ayudarte. No olvides compartir tus
proyectos y comentar proyectos de
otras personas
para que podamos ayudarnos
unos a otros en esta comunidad
creativa. Muchas gracias por
trabajar conmigo en este proyecto de diseño de sitios web y perdonar el apoyo
mutuo Espero que se sienta más seguro
y entusiasmado con el uso Adobe XD y que pueda ayudarle con
su trabajo diario Muchas gracias y los
veré en las discusiones.
Malin Lernhammar, Designer and teacher
