Curso De Adobe Xd
Tabla de contenidos
Curso Gratis Intro
Hola y bienvenido al curso de adobe x de el curso en el que aprenderán a diseñar bocetos y prototipos profesionales de páginas web y aplicaciones móviles en este curso aprenderás a usar el programa gratuito de adobe llamado experience design mejor conocido como adobe quiz de ado x es un programa que cada vez más diseñadores utilizan y que nos permite crear bocetos prototipos dinámicos y diseño de interfaces de usuario fácilmente en este curso aprenderás a usar adobe x desde cero empezaremos por ver cada una de sus herramientas y aprenderás cómo utilizarlas con ejemplos prácticos y reales además durante el curso realizaremos dos proyectos reales para poner en práctica todo lo aprendido para el final del curso ya habrás realizado el diseño de dos sitios web y una aplicación móvil el curso consta de más de cuatro horas de vídeo y 30 lecciones en las que aprenderás todo lo necesario para realizar tus propios bocetos prototipos y diseño de interfaces no importa que no tengas conocimientos previos de diseño desarrollo o cualquier otro así que no esperes más inscríbete ahora.
Introducción y que Aprenderemos en el Curso
Hola que tal bienvenido al curso de adobe xd en este capítulo introductorio me gustaría presentarme de forma breve para que sepas quién es la persona que está detrás del micrófono y de todas estas lecciones también me gustaría enseñarte un poquito sobre qué es lo que vas a estar aprendiendo en este curso y te voy a estar mostrando los dos proyectos que vamos a estar realizando entonces te voy a explicar de forma breve mi nombre es carlos arturo yo soy el creador de varios proyectos en internet uno de ellos vendría siendo tres cursos que tengo aquí en judy mí que son de los más vendidos sobre diseño y desarrollo web son estos dos cursos que tienes aquí en pantalla son cursos muy buenos son cursos completos yo te recomiendo que entres a cualquiera de ellos para que veas lo que otras personas dicen sobre mi contenido y bueno sepas que estás en buenas manos dentro de este curso entonces esto es dentro de jour de mí también tengo un canal de youtube en el cual tengo 243 mil suscriptores actualmente es un canal en el cual también enseñó diseño y desarrollo web pero mediante tutoriales así que bueno experiencia en estos temas la verdad es que tengo pues creo yo bastante así que bueno simplemente era para darte un poquito de confianza sobre quién soy yo y bueno qué es lo que vas a estar aprendiendo en este curso pero bueno dejemos de lado quién soy yo y pasemos a qué es lo que vas a estar aprendiendo en el curso.
Como Descargar Adobe XD y Primeros Pasos
Hola que tal bienvenidos a este siguiente capítulo del curso de adobe xd en este capítulo vamos a estar aprendiendo cómo descargar el programa y vamos a estar dando nuestros primeros pasos en él así que bueno vamos a empezar con la pregunta que todo el tiempo me hacen las personas cuando escuchan sobre este programa y es si es gratuito o es de pago bueno los programas de adobe suelen ser de pago pero afortunadamente para nosotros los diseñadores adobe xd es completamente gratuito entonces no vas a tener periodos de prueba no vas a tener que pagar nada es algo bastante genial porque es un programa estupendo que nos va a ayudar muchísimo y bueno ya lo vas a ir viendo en este curso entonces para descargarlo vamos a ir a la página de adobe x de la cual la vas a tener en los recursos del vídeo y dentro de esta página bueno aquí tienes lo que sería una landing page con un vídeo que yo te recomiendo mucho que veas para que te des una idea mejor sobre lo que puedes hacer con el programa aquí tenemos un resumen de lo que podemos hacer y demás bueno a nosotros lo único que nos interesa es entrar aquí y presionar el botón para descargarlo una vez que presionemos nos va a enviar una página en la cual tenemos que iniciarse en adobe ahora si tú no tienes una cuenta de adobe no te preocupes simplemente la haces como cualquier otra cuenta de página de internet y bueno una vez que ya la haces inicia sesión y debe enviar esta página en la cual te va a pedir que descargues un programa que se llama creative cloud este programa lo que te va a permitir es descargar otros programas de adobe.
Herramientas de Forma
Hola que tal bienvenidos a este siguiente capítulo el curso de adobe xd en este capítulo vamos a estar viendo las primeras herramientas del programa y es que vamos a estar hablando sobre las herramientas de forma que tenemos aquí que como ya te comentaba son la base para poder diseñar básicamente cualquier cosa que queramos entonces voy a irme aquí a lo que sería mi árbol voy a presionar control 3 para que me lo ponga en un tamaño por así decir completo de toda mi pantalla ahora aquí no es el tamaño real como lo va a ver el usuario o el cliente para el tamaño real recuerda que es control 1 vale así este sería el tamaño real escala 11 bueno lo voy a seleccionar control 3 ahí lo tengo entonces vamos a empezar con estas tres herramientas la primera de ellas es la de rectángulo y si ya has trabajado con otros programas como por ejemplo photoshop vas a saber de qué sirve básicamente lo que nos permite es hacer rectángulos hacer cuadrados y bueno hacer formas para poder empezar a diseñar prototipos por ejemplo supongamos que nosotros aquí en nuestra ipad queremos empezar a diseñar nuestro menú de navegación cómo le podemos hacer bueno simplemente tomamos herramienta y hacemos aquí un simple rectángulo que sería el menú de navegación.
Importando y Trabajando con Imágenes
Hola que tal bienvenidos a este siguiente capítulo del curso de adobe xd en este capítulo vamos a estar aprendiendo cómo trabajar con imágenes dentro del programa que es algo realmente muy fácil así que este vídeo va a ser muy cortito entonces yo lo que voy a hacer es que voy a aquí borrar esta herramienta de línea que había creado o más bien la voy a bajar para que no me estorbe en el documento para lo que voy a hacer y es que supongamos más bien suponíamos que aquí teníamos lo que era nuestra aplicación de ipad bueno qué pasa si queremos agregar por ejemplo una galería como le podemos hacer bueno para ello es muy fácil lo único que tienes que hacer es irte a que tu herramienta de rectángulo y lo único que tienes que hacer es agregar una forma supongamos un pequeño cuadrado de esta forma le voy a quitar aquí lo que es el borde y el color se lo voy a poner de un gris un poquito claro simplemente para identificar que aquí vale una imagen ahora esto aquí lo puedes alinear un poquito mejor ya después te voy a mostrar cómo se pueden crear sistemas de columnas.
Herramientas de Texto
Hola que tal bienvenidos a este siguiente capítulo del curso de adobe xd en este capítulo vamos a continuar viendo las herramientas y ahora vamos a pasar a la herramienta de texto que es fundamental a la hora de diseñar cualquier prototipo de página web de aplicación de lo que sea es una herramienta muy fácil de trabajar así que bueno vamos a empezar para usarla simplemente tenemos que dar un clic como siempre y después nos va a cambiar lo que sería el cursor aquí como puedes ver ya lo tengo hecho hacer un poquito de zoom en lo que sería nuestro prototipo y aquí por cierto ahí está o hacer zoom está perfecto entonces selecciono mi herramienta de texto también la puedes seleccionar con la tecla de de tu teclado y simplemente das un clic en cualquier parte del documento y te va a parecer lo que sería este curso en el cual tú puedes escribir texto.
Herramienta de Pluma y Fusión de Capas
Hola que tal bienvenidos a este siente capítulo de nuestro curso de adobe xd en este capítulo vamos a estar trabajando con la herramienta de pluma que no te había explicado en los capítulos anteriores es una herramienta que no se usa mucho pero sí que te puede servir cuando quieres hacer cosas un poco más complejas que normalmente en photoshop arias muy fácilmente pero aquí en lado x después no tenemos una herramienta tan precisa entonces tenemos esta herramienta de pluma que lo que nos permite es básicamente crear formas personalizadas como nosotros queramos por ejemplo yo aquí voy a dar un clic y podemos crear la forma que nosotros queramos y nos queda algo como lo siguiente después si tú seleccionas otra es tu herramienta de selección das un clic afuera ya vas a poder volver a seleccionar tu forma y te va a quedar algo como lo siguiente ahora tú te puedes estar preguntando buena ti de qué te sirve crear esto en estas formas personalizadas.
Alineación de Elementos y Organización de Capas
Hola que tal bienvenidos a este siguiente capítulo del curso de adobe xd en este capítulo vamos a continuar aprendiendo sobre las herramientas que tiene este programa y ahora vamos a estar viendo cómo alinear elementos dentro de nuestros prototipos y bocetos si recuerdas nosotros teníamos aquí lo que era el un ipad o al menos una aplicación de ipad que de momento no se ve muy bien todavía es un poquito fea no tiene ningún detalle pulido bueno de momento no te preocupes por eso porque esta práctica yo he estado haciendo aquí todo en el documento para que aprendas cómo funcionan las diferentes herramientas pero más adelante en el curso vamos a estar haciendo dos proyectos que se van a ver bonitos y van a quedar bien entonces de momento no te preocupes porque esto no se ve tan bien entonces lo que vamos a hacer en este vídeo es arreglar un poquito algunas cosas que tenemos como por ejemplo los nombres de las capas vamos a ordenar las debo enseñar alguna otra cosa sobre las capas y muy importante te voy a estar enseñando cómo alinear elementos entonces vamos a empezar aquí teníamos por ejemplo lo que era nuestro menú de navegación de la aplicación este logotipo estaba centrado pero qué pasa si yo lo quiero a la izquierda oa la derecha como lo puedo alinear bueno para alinearlo en este caso simplemente lo puedes arrastrar y aquí como puedes ver te aparece una regla aquí a la izquierda del logotipo que nos va a permitir alinearlo con esta imagen que tenemos aquí esta es una forma de alinear un poco rápida no es muy exacta porque nosotros no estamos calculando el espaciado que va a haber aquí entonces para calcular el espaciado lo que puedes hacer que yo te recomiendo es que utilices reglas las reglas ya te voy a estar mostrando cómo funcionan más adelante o lo que puedes hacer de forma rápida es simplemente seleccionar tu herramienta de rectángulo hacer un rectángulo con el espaciado que tú quieras por ejemplo éste y le vamos a poner supongamos 60 píxeles le voy a quitar el borde y le voy a poner un color negro y de esta forma ya puedo aquí seleccionar mi imagen y acomodar la por ejemplo el texto lo va a hacer un poquito más grande perfecto y el logotipo también lo va a poner a la izquierda de esta forma estoy centrando en base a lo que era esta franja y tenemos un margen de esta forma ahora esta es una forma un poquito sucia de hacerlo te digo hay una forma mucho mejor pero toma más tiempo y para eso necesitamos crear reglas yo te lo voy a enseñar después porque es todo un tema pero de momento esta es una de las formas rápidas que tenemos para acomodar elementos por ejemplo la franja ahora la pongo a la derecha y la imagen simplemente la acomodo también aquí el texto también lo hago un poquito más grande y ahí está ahí ya tenemos lo que sería un espaciado a la izquierda ya la derecha exactamente igual.
Herramienta de Repetición
Hola que tal bienvenidos a este siguiente capítulo del curso de adobe xd en este capítulo vamos a estar viendo solo una herramienta pero que es una de las herramientas que a mí más me gusta de este programa y es una de las razones por las cuales yo ya dejé de trabajar en lado de photoshop a la hora de realizar prototipos entonces vamos a empezar aquí tenemos lo que era nuestra práctica voy a hacer un poquito de zoom para que lo puedas ver un poquito mejor ya lo tenemos en esta práctica nosotros teníamos unas imágenes y teníamos un párrafo de texto bueno este texto principal como le yo le llamé lo que voy a hacer es que lo voy a seleccionar y luego a poner un poquito más abajo simplemente para que no me estorbe para lo que voy a hacer ahorita y entonces lo que nosotros teníamos aquí era una pequeña galería pero esta galería solamente tiene fotos no está galería se puede mejorar mucho más y de hecho una cosa que me estoy fijando es que aquí como puedes estar viendo tenemos un espaciado que es que no es proporcional al que tenemos aquí entonces para corregirlo si recuerdas teníamos nada más que seleccionar los tres elementos que teníamos aquí dentro y presionar en este botón y ahí está ya me corrigió el espaciado probablemente se me pasó en el capítulo anterior así que bueno lo hago ahorita entonces lo que te comentaba es que esta galería es muy simple nosotros lo que queremos hacer es ponerle por ejemplo un texto aquí debajo que diga supongamos el nombre de la foto o el nombre del autor que tomó la fotografía por ejemplo entonces para hacerlo es muy sencillo y en este caso como ya tenemos acá passió lo que te recomiendo es que selecciones la carpeta selecciones después tu herramienta de texto y aquí le pongas el texto que tú quieres.
Exportando Elementos
Hola que tal bienvenidos este 7 capítulo del curso de adobe xd en este capítulo vamos a estar viendo un tema muy sencillo y es cómo podemos exportar elementos de nuestro boceto y cómo podemos exportar todos nuestros árboles entonces vamos a ver qué pasa si por ejemplo yo aquí tengo lo que sería mi práctica de lo que sería esta pequeña aplicación de ipad y qué pasa si yo quiero por ejemplo esta galería que hicimos quiero exportar la quiero por ejemplo tenerla en un archivo png para utilizarla en otro proyecto o hacer lo que yo quiera con ella bueno aquí también lo puedes hacer en este programa para ello lo único que tienes que hacer es seleccionar la galería y darle clic derecho y seleccionar esta opción que dice marc por bach export en este caso yo ya la tenía así que lo voy a volver a hacer le voy a dar aquí y para confirmar puedes ver que aquí tiene lo que sería este pequeño icono marcado ese icono es lo que te va a permitir indicar qué es lo que vas a exportar.
Símbolos
Hola que tal bienvenidos a este siguiente capítulo del curso de adobe xd en este capítulo vamos a estar viendo otra de las herramientas que a mí más me gusta de este programa que son los símbolos los símbolos nos van a permitir tener elementos duplicados por así decirlo y cuando nosotros modifiquemos uno se modifiquen todos para explicártelo te lo voy a mostrar con un ejemplo que yo creo que es la mejor forma de que lo puedas entender para ello aquí tenía una vez más lo que era esta pequeña aplicación que realizamos y teníamos lo que era nuestro menú de navegación perfecto que pasa que nosotros aquí teníamos también lo que sería otra sección supongamos que es cuando el usuario da un clic en la imagen y lo envía a esta página o es alguna otra sección de nuestra aplicación qué pasa si yo quiero poner este menú a quien lo que sería ésta ipad2 en esta sección número 2 de hecho para que lo entiendas mejor aquí vamos a cambiarle por sección 2 bueno podemos hacerle una forma muy fácil y es que puede no podemos irnos aquí seleccionar el menú hacemos control c nos vamos aquí y control uve ya lo tenemos así de simple ahora vamos a hacer algo y es que nuestra aplicación voy a bajar un poquito y aquí tenemos esta opción voy a subir lo que sería el texto un poquito y vamos a hacer un pie de página también entonces selecciono mi herramienta de rectángulo aquí hacemos un pequeño pie de página yo lo voy a poner que no tenga borde y que sea de color negro.
Como hacer columnas
Hola que tal bienvenidos a este siguiente vídeo tutorial en este capítulo vamos a estar viendo cómo crear columnas dentro de adobe xd y es que las columnas nos van a ser muy útiles a la hora de estar diseñando cualquier boceto o prototipo para darles tamaño a los elementos y que toda nuestra página se vea uniforme y quede más profesional entonces por ejemplo yo aquí tengo lo que sería el proyecto de la página y la aplicación de libros y aquí yo trabajé con columnas para los tamaños por ejemplo te las voy a mostrar aquí las voy a activar y como puedes ver aquí tengo estas columnas estas columnas me sirven a mí de guía para darle tamaño a las diferentes cosas por ejemplo aquí como puedes ver el logotipo abarca dos columnas luego en la barra de búsqueda aquí abarca cuatro luego cada botón abarca dos y así con cada uno de los elementos de esta forma mi página se ve mucho mejor e incluso a la hora de pasar la código puede utilizar frameworks como whatsapp para que me quede exactamente del mismo tamaño como la tengo aquí por ejemplo aquí en la parte de categorías también cada botón como puedes ver abarca dos columnas aquí también en la parte los libros abarca dos columnas y todo me queda estupendo entonces te voy a enseñar cómo se hacen estas columnas en adobe xd porque se hacen de forma diferente a como lo haríamos en programas como adobe photoshop e illustrator entonces para mostrarte lo que voy a hacer es que voy a crear un nuevo documento le voy a poner que sea un tamaño web aquí lo tengo perfecto y lo que voy a hacer es que le voy a cambiar un poquito el tamaño porque porque a mí no me gusta trabajar con un tamaño tan grande esto no significa que tu web vaya a ser más pequeña simplemente significa que cuando yo abra este archivo en el prototipo no va a abarcar tanto entonces a mí me gusta por preferencia propia aquí cambiarle por 1600 esto es una preferencia mía tú lo puedes hacer o no si tú quieres porque es opcional bueno porque realmente mi página web yo quiero que abarque mil píxeles es decir esto que tengo aquí este cuadrado que voy a poner aquí de color gris este rectángulo va a ser mi página web.
Presentación del Proyecto
Hola que tal bienvenidos a este siguiente capítulo del curso de adobe xd en este capítulo vamos a estar empezando con nuestro primer proyecto que consta de un pequeño blog en el cual vamos a estar realizando lo siguiente vamos a estar realizando lo que es una landing page y para mostrarte lo voy a seleccionar aquí en mi herramienta de preview y entonces este es el proyecto que vamos a hacer tenemos una landing page o también una página de inicio en esta página de inicio tenemos nuestro logotipo y un simple botón para visitar el blog entonces yo te voy a estar enseñando cómo se hace te voy a estar enseñando cómo se hace este efecto también del fondo que es un efecto realmente muy sencillo pero es un efecto que muchas personas no saben realizar cuando están empezando con el programa así que bueno esta es otra de las razones por las cuales estamos haciendo este proyecto sencillo porque es el primer proyecto que realizamos y es el que más te va a servir para entender cuál es el orden de las herramientas que tienes que utilizar y bueno cómo trabajar con proyectos reales entonces en este ve en esta página de inicio si presionamos el botón no se envía a la página del blog es un blog sencillo simplemente tiene los elementos para aprender cómo se hace y tenemos todos los artículos de nuestra página web si por ejemplo nosotros damos un clic en uno por ejemplo en este nos va a enviar en lo que sería la página del artículo es decir la página completa en la cual tienen todo el texto y por último si presionan en el botón del logotipo los va a enviar a la página de inicio entonces esto es lo que vamos a estar haciendo en este proyecto es un proyecto sencillo pero que te va a ayudar muchísimo te lo aseguro para que entiendas cuál es el orden de las capas que tienes que seguir porque bueno tú ya conoces las herramientas pero saber utilizarlas correctamente en qué orden y cómo organizar todo tu proyecto es diferente a lo que ya hemos visto así que bien es lo que vamos a estar viendo y bueno pues nos vemos en el próximo capítulo.
Presentación del Proyecto #2
Hola que tal bienvenidos a este siguiente capítulo del curso de adobe xd en este capítulo te quiero presentar lo que sería el segundo proyecto que vamos a estar realizando este ya es un proyecto completo en el cual vamos a estar haciendo una página completa vamos a estar haciendo varias secciones de la página y vamos a estar haciendo también lo que sería la aplicación móvil entonces este es un proyecto completo que nos va a tardar varios capítulos yo te recomiendo que lo veas porque vas a aprender muchísimo y te aseguro que vas a poder tomar muchas ideas para tus propios proyectos entonces lo que vamos a estar realizando es lo siguiente te lo voy a mostrar aquí vamos a estar realizando lo que sería la página de venta de libros entonces esta página es una página muy bonita que consta con muchos elementos tenemos desde el logotipo tenemos una barra de búsqueda tenemos varios botones y tenemos varios elementos como por ejemplo un slider tenemos secciones para categorías libros populares y por supuesto su pie de página entonces cómo puede ver es una página completa y esta página te va a ayudar para que tú entiendas cómo puedes organizar sobre todo tu proyecto y cómo puedes agregar cierto tipos de elementos.
A Punto de Comenzar Nuestros Proyectos
Hola que tal bienvenidos a este siguiente capítulo del curso de adobe keys de ya estamos listos para empezar con lo que son nuestros dos proyectos el primero que sería este proyecto que teníamos para el blog y el segundo proyecto que era el proyecto completo que era el de la página de la aplicación de libros que este es un proyecto fantástico y estoy seguro de que te va a gustar mucho pero bueno en este vídeo simplemente quería hacer un pequeño anuncio que es importante y es que seguramente es porque estás viendo tú el curso en youtube bueno si estáis viendo el curso en youtube bueno comentarte que el curso es completamente gratuito pero a partir de ahora el curso va a estar disponible desde lo que sería mi perfil de ayúdeme entonces para acceder al curso es completamente gratis lo único que tienes que hacer es acceder al link que vas a tener la descripción del vídeo que te va a enviar a esta página en la cual tienes todo el curso completo incluyendo los siguientes dos proyectos que van parte dentro de este curso.
Como hacer Animaciones
Hola que tal bienvenidos a este vídeo tutorial mi nombre es carlos arturo y el día de hoy vamos a estar aprendiendo cómo trabajar con animaciones dentro de adobe xd que es una de las características nuevas que tenemos en el programa y que nos va a permitir hacer prototipos más interactivos animados y bastante geniales así que bueno en este vídeo vamos a estar haciendo un efecto que yo ya había enseñado en otro de mis vídeos en el cual habíamos hecho esta ventana emergente que estaba animada como puedes ver esto yo lo hice con código mostré cómo hacerlo con html css y javascript pero antes antes de yo hacer el código primero la diseñé en adobe xd para ver cómo es que me iba a quedar antes de enseñarla en el vídeo entonces vamos a estar aprendiendo cómo hacer exactamente este mismo efecto pero en adobe x de te lo voy a mostrar aquí tengo lo que sería mi ventana de previo y cuando presione el logotipo que bien podría ser un botón o cualquier otra cosa lo que va a suceder es que va a aparecer mi ventana y como puedes ver todo entra con una animación entonces vamos a ver cómo se realiza que realmente es bastante fácil así que bueno pues vamos a empezar [Música] entonces lo primero que tenemos que hacer es lo siguiente tenemos que crear un documento en mi caso yo aquí ya tengo uno con el ejemplo que te acabo de mostrar en el cual tengo las diferentes fases de la animación ahorita te las voy a mostrar tengo algunos ejemplos de algunas ventanas emergentes.
Efectos Hover en Adobe XD + Como hacer un Slideshow
Hola que tal bienvenidos a este vídeo tutorial mi nombre es carlos arturo y el día de hoy te voy a estar enseñando cómo puedes agregar a tus prototipos los efectos de tipo joven y de tipo active para que puedas hacer prototipos mucho más dinámicos y bueno que den mucho mejor entonces si no sabes qué es esto te explico yo aquí tengo esta pequeña aplicación en la cual estoy simulando que es una aplicación para ver imágenes y tengo lo que sería un pequeño carrusel donde el usuario va a poder ver entre diferentes imágenes si esto fuera una aplicación real lo que sucedería es que el usuario con en este caso el dedo podría cambiar de derecha a izquierda las imágenes podrían desplazarlas de una u otra y después debajo tenemos dos botones bueno nosotros anteriormente con adobe x de sólamente diseñábamos esto pero teníamos un problema y es que no podíamos por ejemplo este carrusel animarlo lo podíamos hacer pero era un poquito feo y tenemos que agregar varios árboles bueno ahora ya podemos hacerlo gracias a que tenemos esta posibilidad de agregar efectos de tipo joven y de tipo active ahorita te lo voy a mostrar con este carrusel pero además también tenemos el efecto hover que lo que nos va a permitir es que el usuario cuando por ejemplo pase el cursor sobre algún botón tenga algún cambio entonces te lo voy a mostrar aquí en el prototipo yo ya lo tengo diseñado para ello lo voy a ejecutar aquí lo tengo lo voy a poner aquí para que se vea mejor en el vídeo y entonces lo primero que te quiero enseñar es el efecto hover cuando yo paso el cursor quiero que veas como ahora en los botones sí que cambian de color esto era algo que anteriormente no podíamos hacer con adobe xd y ya lo tenemos ahorita te voy a estar enseñando cómo se puede agregar y además de esto también te voy a estar enseñando cómo podemos hacer este carrusel que funcione en un solo árbol y para ello para demostrar te lo voy a dar un clic y quiero que veas cómo cambiamos de imágenes vuelvo a dar otro clic y me muestra la tercera imagen y podría agregar cuántas imágenes yo quiera simplemente tendríamos que seguir el mismo proceso y si vuelvo a dar un clic me va a regresar a la primera imagen así que esto es lo que vamos a estar aprendiendo en este vídeo esto es algo muy importante sobre todo si diseñas interfaces páginas web.
Diseña una página web estilo NETFLIX en Adobe XD
Hola espero que te encuentres bien el día de hoy vamos a estar aprendiendo cómo diseñar o cómo maquetar una página web desde cero utilizando adobe xd en específico vamos a estar aprendiendo cómo hacer esta página estilo netflix esto lo estoy haciendo como una pequeña práctica es simplemente para mostrarte cuál es el proceso que yo sigo para diseñar un sitio web desde cero y cuáles son algunos consejos y tips que te puedo dar para que bueno tú puedas diseñar un poquito más rápido entonces vamos a estar diseñando esta página que ese estilo netflix es una página realmente muy sencilla que cuenta pues con su su género su menú de navegación cuenta con una portada de alguna película que tú quieras por ejemplo recomendar alguna película principal y después tenemos esta sección de películas recomendadas como estamos trabajando con adobe quiz de podemos hacer uso de algunos efectos como por ejemplo cuando pasamos el cursor poder agregar efectos hover a los botones a lo mejor estos efectos a lo que sería este carrusel e incluso podemos hacer que esta galería de imágenes o carrusel funcione por ejemplo aquí voy a presionar en este botón y quiero que veas cómo entran nuevas películas bueno yo aquí tengo estas repetidas pero como puedes ver tenemos esta animación bastante bonita y que puedes utilizar para tus prototipos entonces vamos a estar viendo cómo se hace y también una de las razones por las cuales te quiero enseñar cómo se hace es porque voy a estar haciendo el tutorial más adelante de cómo programar esta página web desde ser utilizando html css y javascript que realmente es muy sencilla pero te quiero enseñar cómo se va a programar este carrusel el cual tiene este efecto para lo que sería la imagen y tenemos lo que sería los indicadores tenemos el control para cambiar y bueno esto lo vamos a estar haciendo con javascript pero bueno me voy a dejar de rodeos vamos a empezar con el tutorial donde vamos a empezar a crear este sitio desde cero con adobe xd.