Cómo diseñar tu primer sitio web

1. Te doy la bienvenida a la clase: Entonces dime, ¿te gustaría aprender a diseñar y prototipo de un sitio web usando Adobe XD? Bueno, si estás aquí, claramente lo harías. Y quería agradecerte por elegir este curso. Oye, soy David, y aquí aprenderás a diseñar y prototipo tu primer sitio web usando Adobe XD. Y si eres completamente nuevo en el tema, déjame solo decirte que con XD, puedes diseñar un sitio web interactivo para que puedas mostrar a tus clientes no solo cómo sería el sitio, sino también cómo funcionaría. Y la mejor parte es que XD viene con una versión gratuita full flat que estaremos utilizando en este curso. Entonces realmente no hay excusa para no probarlo al menos. Por lo que he dividido este curso en dos partes principales. En la primera, aprenderás todo lo que hay que saber para empezar con el software. Entonces aprenderás cosas como cómo usar la interfaz, cómo crear archivos, cómo usar las herramientas, plugins y activos. Cuáles son las diferencias entre el diseño y el prototipado y solo aspectos del mundo real de la tipografía web, las mejores prácticas en el diseño web. Y en la segunda parte, nos enrollaremos las mangas y nos ensuciaremos las manos y diseñaremos y prototipo de una página web. Y vamos a crear un escritorio y una versión móvil de un sitio web freelancers de diseño web. Y en el proceso, vamos a profundizar en agregar y usar elementos que es más probable que uses en una vida real proyectos de diseño web. Entonces cosas como menús móviles, deslizadores, testimonios, carteras, y mucho más. Y cuando eso se haga, aprenderá a guardar y compartir su diseño ya sea con un cliente o con otros interesados. lo que el curso te llevará paso a paso de aprender los conceptos básicos del uso de XD a través del diseño y creación de prototipos de un sitio web, hasta guardarlo y compartirlo. Entonces si quieres convertirte en freelancer de diseño web, o tal vez quieras aterrizar un trabajo en una agencia de diseño web. Aprender Adobe XD es realmente una necesidad. Así que salta a la derecha y realmente espero verte por dentro. 2. Lo que encontrarás en esta clase: Adobe XD es una pieza de software extremadamente popular que te permitirá diseñar diseños de interfaz de usuario interactivos profesionales. Si quieres aterrizar un trabajo como diseñador web o diseñador de aplicaciones móviles, o si quieres convertirte en freelancer de diseño, XD es definitivamente uno de los programas que necesitarás conocer, ya sabes, solo echa un vistazo a las ofertas de empleo para diseñadores o proyectos de diseño disponibles para freelancers. Muchos de ellos esperan el conocimiento de Adobe XD. Por supuesto que hay alternativas. Pero si ya estás utilizando programas como Photoshop, Illustrator, InDesign, añadiendo, salir de tu cartera de habilidades es algo natural. Por lo que quiero que este curso te ayude a empezar crear diseños web lo más rápido posible. Quiero que en última instancia te conviertas en un diseñador web independiente y usuario XD. Entonces por eso he dividido esto en dos partes principales. Entonces primero aprenderás los conceptos principales como qué es x y cómo descargarlo. Además, conocerás el programa explorando la pantalla de inicio, el espacio de trabajo, y entendiendo la diferencia entre diseño y prototipado. También entenderás cómo crear nuevos archivos, cómo administrar mesas de trabajo y las herramientas. Y también te familiarizarás con plugins y ácidos. Entonces una vez que sepamos todo esto, pasaremos a crear el diseño. Y en esta segunda parte del curso, aprenderás a encontrar inspiración de color y diseño para tus proyectos. Cómo diseñar y luego prototipo de un layout web, y cómo guardar y compartir tu diseño final. Vamos paso a paso desde aprender a instalar y usar las funcionalidades básicas de XD pasando por el diseño y prototipado hasta finalizar su proyecto. Y al final de esta guía, deberías poder diseñar y prototipos de diseños web de forma independiente en Adobe XD. 3. Qué es Adobe Xd: El diseño con experiencia de Adobe, o Adobe XD para abreviar, le permite diseñar y crear prototipos diseños digitales interactivos como sitios web y aplicaciones móviles. Entonces estamos de vuelta en el día con el fin de obtener la funcionalidad que permitiría a tus clientes y desarrolladores ver la interactividad que se te ocurrió para el diseño, tendrías que usar una aplicación para diseño y otro a prototipo. Por ejemplo, como Marvel App. Con Adobe XD. Puedes hacerlo todo en una sola aplicación. Pero también hay una cosa más que puedes hacer aquí. Después de que hayas diseñado y prototipado tu proyecto, puedes compartirlo con clientes y desarrolladores. Y la funcionalidad de uso compartido InDesign no se limita solo al guardar y luego enviar el archivo más. Pero también viene con una potente característica de generar código necesario para recrear la funcionalidad de su diseño. Y esto puede ayudar en gran medida a que los desarrolladores en hacer que su diseño cobre vida en un servidor web. Entonces, en pocas palabras, XD te permite diseñar tus proyectos como sitios web o aplicaciones móviles. Prototipo de su diseño, lo que significa que puede agregar diferentes efectos y funcionalidades a sus elementos de diseño. Y también puedes compartir tus proyectos con código generado automáticamente utilizado en el desarrollo web y app. Dado que x D viene de Adobe, coopera bien con otros programas de la Creative Cloud Suite, especialmente Photoshop, ilustrador, y After Effects. Entonces, si estas herramientas de diseño no son suficientes para ti, puedes usar otras piezas de software para diseñar tus activos y luego imprimirlos en XD. Por lo general, diseñarías un logotipo o elementos gráficos personalizados como iconos o ilustraciones. En Illustrator, editarías las fotos en Photoshop o tal vez Lightroom, y luego las agregarías a tu proyecto XD para crear un nuevo prototipo y compartirlo con desarrolladores y clientes. Por supuesto, no significa que puedas diseñar tu diseño de principio a fin usando solo XD. Estoy seguro que puedes. Si, por ejemplo, ya te entregan todos los activos de los clientes , solo puedes saltar a la derecha en XD y empezar a diseñar el layout usando las herramientas que se proporcionan, que por cierto, nosotros hablará más un poco más tarde. Y si has estado usando otros programas de Creative Cloud Suite, especialmente Illustrator y Photoshop. Algunos aspectos del uso de XD serán mucho más fáciles de entender para ti. Por ejemplo, el diseño de los usuarios interfaces similares. El concepto de tableros de arte, opciones específicas dedicadas a las herramientas, las propias herramientas, etcétera Si sin embargo, este es tu primer encuentro con el software de Adobe, no te preocupes, lo llevaremos agradable y lento. Entonces te vas a familiarizar con XD y ojalá puedas empezar a usar el programa de forma independiente. Por lo que definitivamente vale la pena probar Adobe XD, sobre todo desde finales de 2021. Además de solo probar en el programa out, puedes descargar e instalar la versión de arranque gratuita y casi sin cortar, que hablaremos a continuación. 4. La versión de inicio: Desde finales de 2021, Adobe XD viene con un plan Starter gratuito. Así que echemos un vistazo rápido a lo que se trata todo. El plan de arranque te permite hacer todas las cosas que puedas. En la versión premium. Significa que no existen limitaciones al número de archivos que puedes crear. Las herramientas que puedes usar dentro del programa, la biblioteca de plugins y todas las demás extensiones disponibles, las herramientas y opciones de creación de prototipos, y guardar y exportar tus proyectos como imágenes. Entonces parece que conseguirías todo lo que necesitarías, ¿verdad? Pero tiene que haber una captura. Y por supuesto que hay uno o unos pocos. Incluso en el plan de puesta en marcha, están compartiendo funcionalidades son limitadas. No es que no puedas compartir tus proyectos o que el archivo compartido esté de alguna manera deteriorado. Pero puedes estar compartiendo solo un archivo a la vez. Adicionalmente, puedes exportar tus diseños a PDF solo hasta dos veces. El historial documental se limita a tan solo diez días, frente a tres días en el plan pagado. Se llega al acceso solo a fuentes básicas de Adobe. Y su almacenamiento en la nube está limitado a dos gigabytes. Entonces, si estás trabajando en un equipo de diseñadores, desarrolladores y gerentes de proyectos, lo más probable es que estés manejando muchos proyectos diferentes al mismo tiempo. Esto significa que tener un solo archivo se comparte dentro de un equipo es una gran limitación. No obstante, si apenas estás empezando como diseñador web o si te gustaría encontrar un trabajo como uno solo, puedes aprender XD simplemente usando el plan estándar. Y esa es una gran noticia, sobre todo teniendo en cuenta que los productos de Adobe son un estándar de la industria y que no son baratos. Entonces, en resumen, puedes aprender una pieza de software que está en alta demanda en el mercado laboral y puedes usarlo libremente. Entonces supongamos que eres una de esas personas que quieres aprender o simplemente probar Adobe XD. Estás pensando en convertirte en diseñador gráfico, freelancer. O estás pensando en encontrar trabajo como diseñador gráfico. Y solo quieres ver si X d es algo para ti. Para esos fines, el plan de inicio será más que suficiente para ti. Y en este curso, Eso es lo que vamos a utilizar. Entonces veamos ahora cómo puedes descargarlo e instalarlo. 5. Cómo descargar Adobe Xd: Ya sabes, tengo que decir que no es tan fácil llegar a la página de descarga de x, el plan de inicio. El sitio web de Adobe realmente se esfuerza por conseguir la versión de prueba o la versión completa, pero eso no es nada que no podamos manejar. Entonces la mejor manera de encontrar la página de descarga es simplemente por Google Adobe XD Starter plan de descarga. Puedes hacer clic en el primer enlace que aparece y serás dirigido al sitio de Adobe. Ahí verás un botón de enlace azul que dice get XD, que al hacer clic, intentará abrir un enlace de descarga. Si ya tienes instalado el Creative Cloud Desktop, tu sistema intentará abrir el archivo usando esa aplicación. De no ser así, se te puede pedir que lo descargues, aunque te aconsejaría instalarlo de todos modos. Puedes igual que antes, Google Creative Cloud Desktop App y simplemente haz clic en el primer resultado de búsqueda en la página que se abrirá, basta con hacer clic en el botón de enlace de descarga Creative Cloud, y en la descarga se iniciará proceso. Entonces, una vez instalada la app, tendrás que iniciar sesión o registrarte si no tienes una cuenta de Adobe. Y al siguiente podrás instalar XD a través del escritorio de Creative Cloud, o simplemente seguir ese enlace de descarga directa, no de la forma que elijas XD se instalará y estará lista para usar. Creo que la forma más fácil de todo esto sería instalando primero su aplicación Creative Cloud Desktop y luego solo instalando XD. De esta manera evitarás toda la molestia de buscar el enlace directo en algún lugar y la página de Adobe y accidentalmente instalar reloj, realmente no querías. 6. La pantalla de inicio: Cuando abras XD, primero verás la pantalla de inicio, que generalmente se divide en dos espacios principales. Entonces a la izquierda, verás algunos enlaces útiles que te permitirán realizar tareas específicas. Y dependiendo del enlace que haga clic a la izquierda, el espacio de la derecha cambiará y le permitirá controlar sus archivos. Así que vamos a echar un vistazo rápidamente a esos enlaces. Entonces primero nos dieron nuevo archivo. Este es este gran botón azul que Taylor, al hacer clic en él, creará un nuevo archivo con un tablero de arte predeterminado. Después obtuvimos el enlace abierto, que le permitirá abrir un Photoshop como un archivo PSD, e Illustrator, que es un archivo AI, o un archivo de boceto o un archivo XD. También tenemos el enlace home que te permitirá volver a la pantalla de inicio. También tenemos el enlace Learn que básicamente te llevará a la guía oficial de Adobe para empezar con XD. A continuación en la pestaña Archivos, encontrarás tus archivos. Y aquí encontrarás todos tus archivos creados previamente. Entonces si solo haces clic en alguno de ellos, esa phi se abrirá. No obstante, si seleccionas el archivo usando la casita en la esquina superior izquierda, podrás usar una de las opciones de control que aparecerán en la parte superior derecha. Por lo que aquí puedes renombrar, eliminar y mover tus archivos seleccionados. Y si no se selecciona ningún archivo en la esquina superior derecha, verás una opción para crear una nueva carpeta a la que puedas mover tus archivos. Por lo que se hace clic en uno, verá un cuadro de diálogo Crear nueva carpeta. Así que sólo nombra tu carpeta y pulsa Guardar. Una vez creada la nueva carpeta, puedes seleccionar los archivos que quieras poner en ella y simplemente pulsa mover para vincular que verás en la esquina superior derecha. Esto abrirá una nueva ventana donde solo puedes presionar Mover para mover los archivos. O puedes crear rápidamente una nueva carpeta usando el enlace que encontrarás en la esquina inferior izquierda. Entonces a continuación nos hemos compartido con ustedes. Entonces si alguien comparte un archivo contigo, se mostrará aquí. También hemos gestionado enlaces. Entonces, al hacer clic en este enlace, serás redirigido a tu cuenta de Adobe. Más específicamente a una sección donde las fuentes que compartiste serán visibles. Y debajo de esa pestaña eliminada, aquí se almacenarán los archivos que eliminaste. Por si acaso cambias de opinión y quieres devolverlos a la vida, para hacerlo, sólo tienes que seleccionar el archivo y se le dará la opción de restaurar o eliminar. Debajo de los presets de mesa de trabajo, puede elegir uno de los archivos predefinidos con presets de tableros de arte. Si hace clic en alguno de ellos, obtendrá un archivo con el tablero de arte predeterminado. Si sin embargo, haces clic en una pequeña flecha gris a la derecha, verás una lista de otras mesas de trabajo disponibles. Alternativamente, puede seleccionar el preset personalizado e ingresar los valores de ancho y alto a continuación. Y en los últimos tiempos, verás todos los archivos en los que has estado trabajando recientemente. Basta con hacer click en uno para abrirlo. Como puedes ver, estas pantalla de inicio se ha simplificado enormemente para permitirte trabajar en tus archivos y compartirlos sin pensarlo demasiado. Si apenas te metes en este tipo de entendimiento que lo que haces clic a la izquierda, efectos, que ves a la derecha. Trabajar con esta pantalla será muy, muy fácil e intuitivo. 7. El espacio de trabajo: Ahora echemos un vistazo a XD es espacio de trabajo. Después de todo, este es el lugar donde pasarás la mayor parte de tu tiempo con el programa. Entonces si has estado usando como cualquier otra pieza de software de diseño antes, especialmente las últimas piezas de software de diseño de Adobe. Entendiendo x, este espacio de trabajo podría ser un poco más fácil para ti. Es un muy lógicamente dividido en dos partes principales y muy aerodinámico, Tal vez a veces un poco sobresimplificado a mi gusto. Pero todo hace que el proceso de diseño sea un servidor no tan suave como sea posible. Entonces en la parte superior, tienes el menú principal. Y aquí encontrarás todos los comandos principales que están separados en dos pestañas como archivo, added, object, plugins, view, window, and help. Y por supuesto sus nombres corresponden con lo que podría encontrar una vez que haga clic en ellos. Por supuesto, en medio llegamos al, ya sabes, el espacio de trabajo principal de diseño, ese es el primer espacio de trabajo que verás una vez que inicies un nuevo archivo. Y por supuesto, todas tus herramientas de diseño están aquí. Pero por supuesto también tenemos el prototipo de espacio de trabajo. Y este espacio de trabajo te permitirá agregar y controlar las opciones interactivas que puedes asignar a tus elementos de diseño. Y también tenemos el espacio de trabajo compartido. Y aquí encontrarás todas las herramientas y opciones que son esenciales para compartir tu proyecto. También escuchamos, como en la esquina superior derecha, se puede ver esta vista previa en una opción de dispositivo. Y puedes conectar un dispositivo móvil a tu computadora. Y luego usando esta función, puedes previsualizar tu diseño. Ahora también tenemos esta vista previa en botón XD que te permitirá previsualizar tu diseño con mayor interactividad. Tu proyecto se comportará como si fuera visto en vivo en un navegador web. Y a la derecha, verá como opciones contextuales y configuraciones que se llaman Inspector de propiedades. Por lo que este dolor cambiará cada vez que seleccione un elemento de diseño, herramienta o espacio de trabajo diferente. Por lo que sólo te dará las opciones y ajustes que corresponden con el elemento o la herramienta que selecciones. Entonces por supuesto, en el centro tendrás tu mesa de trabajo y todo lo que hay en ella se renderizará en el expediente final. Todo lo que cae afuera no será visible una vez que exportes tu archivo y todo lo que está fuera de tu mesa de trabajo, puedes verlo como simplemente tus garabatos, algo así. La mesa de trabajo básicamente se encuentra en una tabla de pastelera. Es básicamente un lugar donde guardarías tus elementos de diseño como tus imágenes, tu, tu, tus iconos o ilustraciones, tal vez algunas piezas de texto, cosas así. Aquí en la parte inferior izquierda, tienes tu gestor de plugins. Y aquí es donde puedes gestionar todos tus, todos tus plugins, de los cuales por cierto, hablaremos más adelante. Entonces subiendo un nivel, tenemos nuestras capas. Y por supuesto, verás aquí todos tus elementos como mesas de trabajo, grupos, elementos de diseño, todas esas cosas. También tenemos aquí mismo ese patrimonio documental. Y aquí puedes agregar y administrar colores, estilos de personaje, componentes y videos. Y por supuesto, tenemos nuestras herramientas aquí mismo. Pero hay algunas herramientas que no son visibles aquí, pero a las que se puede acceder usando atajos de teclado. Y de nuevo, hablaremos de esos más adelante. Entonces conocer el espacio de trabajo es esencial para un proceso de diseño rápido y productivo. Te animo a que pases al menos un poco de tiempo con él solo para familiarizarte con los aspectos más importantes de x, este espacio de trabajo. 8. Diseño vs. prototipo en Xd: Al trabajar dentro de un equipo de diseñadores y desarrolladores, o cuando simplemente no trabaja en solitario con tus clientes, es algo muy importante poder presentar cómo querrías que tu diseño interactúe con el usuarios. Y diseñar, aplicar esas interacciones se llama prototipado. Entonces, en pocas palabras, cuando estás agregando elementos visuales de tu proyecto, estás diseñando y cuando estás agregando interacciones entre esos elementos, o lo más importante, entre el usuario y los elementos de diseño. Estás prototipando y Adobe XD te da la capacidad de hacer ambas cosas. Utilizando el espacio de trabajo de diseño. Puedes agregar elementos visuales a tu proyecto. Y usando el espacio de trabajo prototipo, puedes presentar cómo imaginaste las interacciones entre el usuario y tu diseñador. Y esto por supuesto puede ayudar en gran medida pasar tus ideas a personas que desarrollarán tu proyecto o simplemente al cliente si vas a estar desarrollando ese proyecto tú mismo. Por lo que el prototipado es realmente importante desde un punto de vista UX. Quiero decir, piénsalo. Tú, como diseñador no solo eres responsable cómo será tu proyecto, también eres responsable de cómo funcionará tu proyecto en el mundo real. Entonces por eso es una buena idea pensar lo que sucederá cuando alguien haga clic en un botón, pestañas en un enlace o desplaza la página hacia abajo o hasta X d es herramientas de prototipado te ayudarán a visualizar todos esos eventos, incluidos estados de desplazamiento, transiciones, clics y más. Y que a su vez, dejaremos que otros te den retroalimentación sobre cómo quieren que se comporten los proyectos. Y puede ser un gran ahorro de tiempo. Ahora en XD, tenemos la capacidad de diseñar y prototipo en una sola pieza de software. Entonces a medida que diseñamos nuestro proyecto, también lo haremos, medida que avanzamos y las características de interactividad al mismo. Ahora, como dijo un Wiseman, un viaje de mil millas comienza con un solo paso. Y nuestro viaje de diseño comienza con la creación de un nuevo archivo. Entonces hagámoslo a continuación. 9. Crea un archivo nuevo: Todo lo que vamos a hacer a partir de ahora nos permitirá empezar a diseñar nuestro sitio. Entonces echemos un vistazo a cómo crear nuevos archivos en XD. Primero. Puedes hacerlo como ya sabemos desde la pantalla de inicio. Y básicamente tienes tres formas de hacerlo. Para que pudieras hacer clic en el botón Nuevo archivo y eso creará rápidamente un documento predeterminado con un tablero de arte predeterminado. Podrías usar uno de los tableros de arte predefinidos para crear un nuevo archivo con ese cartón específico. O simplemente puede introducir valores personalizados para ancho y alto para crear un documento con una mesa de trabajo personalizada. Ahora cualquiera que sea la opción que elijas, verás un nuevo archivo apareciendo en tu pantalla. Y justo, déjame darte una palabra de precaución aquí. Si creas un solo archivo y por cualquier motivo decides cerrarlo, saldrás del programa. No volverás a la pantalla de inicio. En cambio, tendrás que reiniciar XD. Entonces si estás trabajando en un archivo, quieres cerrar, es mejor hacer click primero en el botón Inicio en la esquina superior izquierda. Después crea un nuevo archivo y solo entonces cierra el archivo anterior. Esto te permitirá mantener el programa funcionamiento y cancelar fuera del archivo. Ya no necesitas. La forma más rápida de guardar tu archivo usado para presionar una combinación de teclado de control más S. Si es la primera vez que lo estás haciendo, verás un cuadro de diálogo apareciendo pidiéndole que nombre tu archivo que se almacenará en la Creative Cloud. Verás el mismo cuadro de diálogo cuando activemos el comando Guardar como pulsando control más shift plus combinación de teclado S, o usando la opción de menú correspondiente, puedes encontrar bajo el menú Archivo. Y los archivos guardados así se almacenarán en la Creative Cloud. Sin embargo, podrías guardar tus archivos en tu disco duro local. Y para ello, debes elegir la opción de menú guardar como documento local. O podrías usar la combinación de teclas de control más shift más Alt plus S. Y es posible que veas un mensaje diciéndote que guardando tu archivo localmente encendido, te dejaremos usar algunos de los opciones que normalmente obtendrías. Y eso está bien, solo pulsa continue y podrás guardar tu archivo o un archivo que guardaste localmente no será visible en la pestaña de tus archivos en la pantalla de inicio. Será sin embargo, visible en la pestaña reciente. Por cierto, también puedes guardar rápidamente tu archivo en Creative Cloud haciendo clic en el nombre de tu archivo en la parte superior de la ventana del documento. Entonces ahí vas. Así es como puedes crear y guardar archivos en XD. Como notaste, todos ellos vienen con tableros de arte, que son realmente importantes en el diseño para pantallas específicas. Por eso es fundamental entender cómo agregar y administrar mesas de trabajo, que por cierto, vamos a echar un vistazo a continuación. 10. Gestión de mesas de trabajo: Ahora, entender cómo trabajar con mesas de trabajo es esencial para un proceso de diseño rápido y suave. En XD, cualquier documento tendrá al menos un tablero de arte. Aunque la mayoría de las veces querrás crear más de una sola. Tu herramienta de tablero de arte. Tendremos un nombre predeterminado basado en su tamaño. Puede, sin embargo, cambiarlo haciendo doble clic en su nombre arriba y simplemente escribiendo un nuevo nombre, o cambiando el nombre en el panel de capas. Entonces como vamos a estar diseñando para web, nuestro tablero de arte debe ser lo suficientemente alto como para acomodar diseños modernos, verticalmente largos. Y por defecto esa cotización, unquote art board creado en XD estará en 1920 píxeles por 1080 píxeles, cual no es suficiente. Por supuesto podemos hacerlo un poco más largo. Entonces podemos, en el Inspector de Propiedades, simplemente introducir un nuevo tamaño o simplemente agarrar la mesa de trabajo por su asa inferior y arrastrarla hacia abajo. Lo que es un poco peculiar de administrar tamaño del tablero de arte es que una vez que tienes algunos elementos de diseño añadidos, no puedes acceder a las propiedades de las mesas activando la herramienta de mesa de trabajo. Si hace clic con él en cualquier parte de la ventana del documento, simplemente agregará un nuevo tablero de arte. Entonces para llegar a las opciones de mesas de trabajo, usa la herramienta de selección y haz clic en el sname de Mesa de Trabajo o simplemente no seleccionado en el panel de capas. Ya que estamos en el tema de agregar nuevos tableros de arte, así es como podemos hacerlo. Podemos duplicar un tablero de arte existente pulsando Control o Comando si estás en una combinación de teclado Mac plus d. Y esto hará que la nueva mesa de trabajo se sienta al lado de la anterior. Con la herramienta Mesa de trabajo seleccionada. También podemos hacer clic en cualquier parte la tabla de pastelera para agregar una nueva mesa de trabajo. Y el tamaño de este nuevo tablero de arte se basará en qué plantilla selecciones del panel de propiedades. En el otro extremo de crear tableros de arte, aliados, eliminándolos para poner esto algo poéticamente. Y eso es tan fácil como simplemente seleccionar una palabra impar y ocultar ya sea esa eliminar o la tecla de retroceso en tu teclado. Alternativamente, puede hacer clic con el botón derecho en un tablero de arte sname en el panel de capas. Y desde el menú contextual, simplemente elige Eliminar. Como se puede ver, los tableros de arte son una parte esencial del proceso de diseño aquí en XD, cada nuevo documento vendrá con uno, pero puedes agregarlos, modificarlos y eliminarlos completamente en cualquier momento. 11. CAPAS: El concepto de capas es tan común en el mundo del software de diseño. Eso es realmente difícil imaginar un programa que no lo estaría implementando, al menos de alguna forma. Y por supuesto que es la misma historia con XD. El panel de capas debe estar encendido por defecto. Pero si lo puedes ver en tu espacio de trabajo, puedes activarlo haciendo clic el icono de pequeñas capas en la esquina inferior izquierda. También encontrará un elemento de menú llamado las capas en el menú Ver. También viene con un práctico atajo pequeño de Control o Comando. Además. Si echas un vistazo al panel de capas, notarás que el nivel superior de tu organización de activos son tus mesas de trabajo. Por lo que una vez que haga clic en cualquiera de ellos, sus objetos serán revelados. Y cada objeto que creas obtendrá un nombre genérico. Con base en su naturaleza. Estoy en un objeto creado con la herramienta rectángulo se llamará rectángulo. Y objeto creado con la herramienta elipse se llamará elipse, etcétera Siempre es una buena idea. Quiero decir, es una gran práctica de producción cambiar el nombre tus objetos para que puedas agregar una etapa posterior del proceso de diseño. Reconozca fácilmente elementos específicos dentro de su proyecto. Otra buena práctica de producción es agrupar elementos similares y luego cambiar el nombre del grupo para que sus nombres indiquen lo que se está poniendo dentro. Puede cambiar el nombre de un objeto o grupo haciendo doble clic en nombre de un elemento determinado o haciendo clic con el botón derecho y seleccionando Cambiar nombre. Y por supuesto, puedes eliminar fácilmente una capa presionando una de las teclas Eliminar o Retroceso en tu teclado, o haciendo clic con el botón derecho y seleccionando la opción eliminar. También podría duplicar un elemento eligiendo la opción duplicada en el menú contextual. Entonces haciendo clic derecho sobre ese elemento o usando la combinación de teclado Control o Comando más d. En el panel de capas, puedes administrar todos tus tableros de arte, grupos y elementos. Manejarlos es una parte muy importante del proceso de diseño. Por lo que es una buena idea familiarizarse con el panel. Sobre todo que una vez que empecemos a diseñar nuestro proyecto, nos estaremos refiriendo al panel muy, muy a menudo. 12. Descripción general de las herramientas: Ahora veamos rápidamente las herramientas que tienes a tu disposición en Adobe XD. Ahora no vamos a estar pasando por ellos en detalle todavía. Lo haremos una vez que iniciemos el proceso de diseño, pero rápidamente descubriremos qué puedes hacer con ellos. El panel de herramientas se sienta en el lado muy izquierdo del espacio de trabajo. Como ya hemos mencionado brevemente, cada herramienta se nombra de una manera que hace fácil adivinar simplemente lo que hace. Por lo que primero conseguimos la herramienta Select. Para mover un objeto. En primer lugar, hay que seleccionarlo. Y lo puedes hacer con la herramienta Seleccionar. Pero esto todavía hace mucho más que eso. No es la forma más rápida de cambiar el tamaño y rotar tus objetos. Entonces para hacerlo, simplemente mueve el cursor cerca de los objetos seleccionados, puntos de anclaje, haga clic y arrastre para comenzar esa transformación. Y con esta herramienta, también puedes cambiar la redondez de las curvas. Dentro de un objeto seleccionado. Verás pequeños rotuladores redondos. Entonces haz click en uno de ellos y arrastra para redondear todas las esquinas a la vez. También puede hacer clic y presionar Alt u Opción y arrastrar para redondear solo la esquina seleccionada. Adicionalmente, la herramienta Seleccionar permite controlar y comprobar las distancias entre objetos. Todo lo que necesitas hacer es seleccionar los objetos en cuestión y luego presionar la tecla de opción Alt para ver guías y medidas indicando que las distancias entre los objetos seleccionados y el tablero de arte. Entonces a continuación conseguimos la herramienta Rectángulo y la Elipse. Y estoy hablando de ellos juntos porque trabajan básicamente de la misma manera. Por supuesto, la herramienta rectángulo te permite crear rectángulos y la Herramienta Elipse, puntos suspensivos, sobre la forma que puedes crear esas formas es básicamente la misma. Si solo estás presionando y mantén presionado la tecla Shift, crearás una vieja elipsis perfecta, o básicamente cuadrados. Si presionas y manteles presionadas la tecla Alt, comenzarás eso, bueno, la transformación de la creación desde el punto central. A continuación tenemos la herramienta polígono. Y puedes usar los mismos modificadores de teclado para crear triángulos, cuadrados, pentágonos, etc. La mayor diferencia es que puedes presionar las teclas de flecha arriba o abajo para aumentar o disminuir el número de lados. Con la herramienta polígono, también puedes crear formas de estrella. Entonces para convertir una forma de polígono en una tienda, hay que hacer clic y arrastrar la estrella que Rachel manejó en la esquina superior derecha de la forma. Entonces arrástralo hacia adentro y cambia el número de lados. Entonces a continuación tenemos la herramienta de línea. Entonces, si solo haces clic y arrastra, crearás una línea recta. Y si mantiene presionada la tecla Shift, creará una línea en incrementos como de 45 grados. Si mantiene presionada la tecla Alt, volverá a iniciar el proceso de creación desde el punto central. A continuación, tenemos la herramienta pluma. Y la herramienta Pluma como la famosa batalla. Es una de esas herramientas que conoces, realmente tienes que usarla para entender sus beneficios. Es aprender, podría ser un poco difícil, pero hay algunas cosas que podemos hacer o entender para que todo este proceso de aprendizaje sea un poco más fácil. Por lo que aquí en XD, puedes hacerlo activo ya sea haciendo clic en su icono en el Panel de Herramientas o simplemente pulsando la tecla P en tu teclado. Así que para hacerte las cosas fáciles, solo recuerda que puedes hacer clic para crear líneas rectas conectadas. Puede hacer clic y arrastrar para crear curvas. Puede hacer clic y luego hacer clic y arrastrar. Para combinar líneas rectas con curvas. Puede utilizar la herramienta pluma cuando necesite formas personalizadas que le permitan no crear con ninguna otra de las herramientas disponibles. A continuación tenemos la herramienta de texto. Y por supuesto, manejar el texto es una de las habilidades clave. Necesitarás cuando trabajes en tus diseños. Y básicamente hay dos formas en las que funciona esta herramienta. Así que primero puedes hacer clic para agregar una sola línea de texto o una sola palabra. Y de esta manera funciona mejor cuando solo quieres agregar un texto de logotipo, un enlace o una pieza de texto como artística. También puede hacer clic y arrastrar para crear un campo de texto. Entonces si necesitas párrafos de texto, esta manera sería tu mejor opción. Ahora, lamentablemente, en XD, no podemos crear un campo de texto y simplemente usar una opción que nos permita poblar el campo con algún texto ficticio, como algún texto de Lorem Ipsum. En cambio, tendríamos que usar un plugin para eso, pero hablaremos de eso más adelante. Así que una vez que nuestro texto artístico esté establecido, por supuesto todavía se puede ajustarlo. Simplemente puedes hacer doble clic en el interior para introducir un nuevo texto. O también puede arrastrar el controlador inferior para cambiar rápidamente el tamaño de ese texto. Si arrastra los controladores del texto del párrafo, cambiarás el tamaño del campo de texto, no el texto en sí. Ahora manejar mecanografía x D mediante el uso de la herramienta de texto es solo una punta del iceberg. Vamos a ver el tema mucho más de cerca. Una vez que lleguemos a la etapa de diseño de este curso, también tenemos la herramienta del tablero de arte y como ya sabemos, cada nuevo documento que creas vendrá con una mesa de trabajo. Desafortunadamente, no se puede definir cuántas mesas de trabajo desea al crear un nuevo archivo, pero puede agregarlas y por supuesto eliminarlas posteriormente utilizando la herramienta Mesa de trabajo. Y tal vez te estés preguntando por qué necesitarías más mesas de trabajo en un solo documento. Bueno, en XD, las mesas de trabajo pueden simular experiencias y pantallas. Por lo que una experiencia sería su diseño puesto en una pizarra de arte, simulando un teléfono móvil o una tableta. Y una pantalla sería una instancia de tu diseño dentro del mismo diseño, como una sub página de blog, una página sobre nosotros, etcétera. Y se puede asimilar a todos aquellos con mesas de trabajo. Por lo que la forma más fácil de agregar un tablero de arte es haciendo clic con la herramienta Mesa de trabajo en cualquier lugar de tu pasta. Y si hace clic sobre el tablero de pedidos existente, ahí se agregará el nuevo. Si hace clic a la derecha, la nueva mesa de trabajo aparecerá a la derecha y así sucesivamente. Y luego en el Inspector de Propiedades, verás todos los presets disponibles que puedes usar para crear tu nueva mesa de trabajo. Así que simplemente seleccione uno y luego haga clic en cualquier lugar dentro su documento para crear un tablero de arte basado en ese preset. Como ya sabes, puedes ver rápidamente un acceso a tus tableros de arte en el panel de capas. Y todos ellos obtendrán nombres genéricos que allí se pueden cambiar. Adicionalmente, cuando presionas un pequeño tablero de arte como ícono a la izquierda del tablero de arte sname. Serás dirigido a ella y podrás empezar a agregar tus elementos de diseño allí. A continuación tenemos la herramienta de zoom. Y con esa herramienta podrás acercar o alejar un área específica. Entonces con esa herramienta activa, basta con hacer clic una vez para acercar, alt, clic una vez para alejar, o hacer clic y arrastrar para indicar un área en la que deseas acercar. Ya que estamos hablando de zoom, aquí hay algunos atajos prácticos que quizá quieras usar. Entonces, si utilizas la combinación de teclado Control plus 0, encajarás en la pantalla todos tus tableros de arte. Y si presionas Control más uno, establecerás el nivel de zoom en 100. Si utiliza Control más dos Combinación de Teclado, establecerá el nivel de zoom en 200. Y si presiona Control más tres combinaciones de teclado, no establecerás el nivel de zoom en 300, sino que se acercará y centrará en un objeto seleccionado. Y por cierto, si quieres cambiar rápida pero temporalmente a la herramienta de zoom, mantén presionado el Control o Comando si estás en una barra espaciadora Mac más. Esto te permitirá acercar un área seleccionada. Y si le agregas la tecla Alt u Option, podrás alejar. No todas las herramientas disponibles se muestran en el Panel de Herramientas. Por ejemplo, la herramienta de mano. Si presionas y manteles presionadas la Barra Espaciadora, harás activa. Y luego si haces clic y arrastra, puedes mover el espacio de trabajo alrededor. Y también está la herramienta cuentagotas, que te permite recoger un valor de color desde cualquier lugar dentro de tu espacio de trabajo. Y lo único que hay que recordar al respecto es que antes de poder activarlo, es necesario tener algunos otros objetos seleccionados. Porque si no presionas en el IQ, no inicializarás el cuentagotas. En pocas palabras, la herramienta cuentagotas le permite agregar rápidamente un color personalizado al, al objeto seleccionado. No obstante, esta no es la única forma en que se puede utilizar la herramienta cuentagotas. Siempre que tenga un objeto seleccionado en el Inspector de Propiedades, verá pequeños bocadillos de ícono de cuentagotas a las opciones de relleno y borde. Y basta con hacer click en el icono y podrás probar cualquier color que te guste. Las herramientas en Adobe XD son realmente simples de usar. Lo que obtienes es básicamente lo esencial en un escenario de diseño típico. Y esta simplificación significa que si quieres realizar algunas operaciones más avanzadas como unir rutas u objetos, tendrás que usar el inspector de propiedades o los plugins, cuales hablaremos siguiente. 13. Agregar y gestionar complementos: Si no estás familiarizado con el concepto de plugins, esto es lo que necesitas saber. Entonces los plugins son básicamente pequeñas aplicaciones que amplían la funcionalidad estándar de XD. Puede instalarlos, deshabilitarlos o desinstalarlos. Por supuesto, hacen que tu vida de diseño sea mucho más fácil. Entonces, por ejemplo, puedes agregar imágenes de stock gratuitas o pagadas a tu proyecto. Puedes agregar elementos de interfaz de usuario como iconos, botones, deslizadores, pedazos de textos, todas esas cosas. Incluso puedes agregar plantillas de bloque entero. Acerca de mí la página es páginas de inicio. Y puedes agregar activos personalizados como ilustraciones. Puedes encontrar inspiración de color, generar código HTML y CSS, y mucho más para administrar los plugins, XD utiliza la aplicación de escritorio de Creative Cloud. Así que una vez que seleccionas los plugins y luego navegues plugins o plugins administrados si lo prefieres. Verás que esa app aparece. Cuando abras esta aplicación, de esta manera, esencialmente se convertirá en un navegador plug-in. Así que tenga en cuenta que por defecto verá plugins para todos los programas. Pero puedes revisar la marca XD a la izquierda. Entonces solo vas a ver los plugins creados solo para esta app. Y a la derecha verás todos los plugins disponibles. Por lo que simplemente haga clic en él para instalar rápidamente ese plug-in. Y por supuesto, si no estás seguro lo que hace ese plugin específico, solo puedes hacer clic en cualquier parte dentro del auto para ver más detalles al respecto. Entonces una vez instalado el plugin, será visible tanto bajo el menú de plugins como en el panel Plugins. Así que una vez que ya no necesitas o simplemente, no te gusta ese plugin específico. Puede desactivarlo o desinstalarlo. Entonces para hacer eso, vuelve a tu navegador de plugins. Solo para encontrar el plugin que ya no necesitas, y simplemente haz clic en el ícono de los tres pequeños puntos en la parte inferior, y obtendrás las opciones para deshabilitar o eliminar ese plugin. Los plugins son una gran manera de ampliar las capacidades de XD está diseñado. Y con el tiempo definitivamente encontrarás los que más te gustarán y los que necesitarás casi con cada proyecto de diseño. 14. Los complementos que más te suelen usar en tus diseños: Bueno, ya he mencionado que los plugins te permiten expandir habilidades XD de numerosas maneras. Así que ahora echemos un vistazo rápido a los que recomendaría al menos familiarizarse. Por cierto, todos los plugins que voy a mencionar. Ahora puedes simplemente descargarlas libremente. Todos son gratuitos. Puedes instalarlos desde la x, este plugin, por lo Repositorio. Entonces el primero es el icono para el diseño. Y éste te permite agregar varios iconos a tus diseños. Y llegué a decir, no puedo imaginar un proyecto de diseño web en el que necesitarías usar iconos, especialmente para enlaces a redes sociales, cosas así. Por lo que a menudo es un poco tedioso buscar los iconos correctos y luego agregarlos al diseño. Y aquí es donde entra en juego este plugin. Aquí para buscar iconos, basta con introducir cualquier palabra clave que desee. Y verás una lista de diagonales coincidentes de varios iconos gratuitos, repositorios. Y una vez que hayas encontrado lo que buscabas, simplemente haz click en él y verás ese ícono apareciendo en tu tablero de arte. Y por supuesto, todos esos iconos son editables para que puedas cambiar su color, tamaño, rotación, etcétera Entonces al siguiente se llama maqueta rápida. Y te permite construir rápidamente diseños utilizando un solo elementos de diseño o incluso un conjunto de plantillas. En primer lugar, solo necesitas escoger un tema para tu maqueta. Una vez que hagas eso, verás tres bibliotecas separadas. Entonces el primero son elementos que sostienen como iconos, botones, etiquetas y cosas por el estilo. El siguiente se llama activos con las ilustraciones, gráficos y formas. Y la última se llama plantillas. Y éste tiene como sostén diseños para páginas individuales como la página principal, la página del blog, la página sobre nosotros o la página de contacto. Entonces lo que solo tienes que hacer aquí es solo hacer click en cualquier activo para ponerlo en tu tablero de arte. De esta manera puedes construir fácilmente secciones dentro de tu diseño, pero también mantener páginas y encendido solo para visualizar rápidamente cómo podría parecer tu diseño. Bueno, este plugin también es una forma fantástica de construir tus wireframes, que no están familiarizados con el concepto de wireframes. Son como representaciones muy esquemáticas de tus elementos de diseños. Y simplemente te dejan visualizar el diseño y presentarte al cliente de una manera muy, muy, muy simplificada. Solo para enfocarse primero en los flujos de usuario en lugar de colores, fuentes, imágenes, etc. Ahora con fines wireframing, sugeriría usar plantillas del tema mínimo. Están despojados de colores. Se ven muy aerodinámicos. Necesito bastante elegante. Para que tu cliente pueda entender tu visión como toda la UX. Por lo que es más importante entender eso más que los elementos artísticos de tu diseño. Y agregar como plantillas enteras, no significa por supuesto que no puedas cambiarlas de ninguna manera que quieras. Aún puedes agregar diferentes activos o eliminar los elementos que no necesites. Solo creo que agregar un conjunto de plantillas te ayudará a entender todo el concepto de wireframing y hacer que el proceso de construcción de estos flujos de usuario esquemáticamente solo sepa mucho más rápido y más fácil. Entonces el siguiente plugin que realmente me gusta se llama UI Faces. Casi todos los aspectos empresariales tienen una sección donde presentan algunos miembros del equipo o algunos testimonios. Esas secciones suelen venir con tarjetas que contienen una foto y una breve descripción. Y este plugin es absolutamente genial en generar y agregar fotos de avatar en esas situaciones. La forma en que funciona es extremadamente simple. Entonces primero, hay que tener una forma, no un grupo creado y seleccionarlo. Y esto será como un contenedor para la imagen. Entonces solo elige cuál es tu repositorio deseas usar y haz clic en Aplicar al azar si estás trabajando solo en una versión maqueta de tu diseño. Esto sacará una imagen de la base de datos de repositorios y pegará justo dentro de su diseño. Y ni siquiera necesitas cambiar el tamaño o ajustar nada. El plugin hará todo el trabajo pesado por ti. Por supuesto, no te limitas a ciertas solo algunas fotos al azar. En ocasiones cuando se quiere agregar una foto de una mujer, se aleatoriamente en una foto de un hombre y viceversa. Y eso podría ser un problema. Por eso puedes usar la opción Seleccionar fotos para elegir una imagen que te guste desde una nueva ventana que aparecerá. En la nueva ventana, verás muchas fotos de retratos al azar. Desafortunadamente, no se puede cambiar el repositorio del que se están sacando las imágenes. Entonces, si no te gusta alguno de los que ves, tendrías que volver atrás y seleccionar una fuente diferente de imágenes. No obstante, si te gusta una foto específica y quieres agregarla, solo tienes que seleccionar y pulsar Aplicar. Y esa foto se agregará al contenedor de imagen seleccionado. El siguiente se llama Lorem Ipsum, que es un nombre muy genérico para un plugin muy genérico. Y tengo que decir que agregar impuesto ficticio es algo tan común en un escenario de diseño típico. Estoy realmente bastante sorprendido. Es realmente difícil creer que en XD, no tengamos ninguna funcionalidad nativa para eso. Entonces por eso tenemos que usar un plugin como, como Lorem Ipsum. Funciona de manera similar a IU Faces, como en. Primero tienes que seleccionar un rectángulo para poder agregar algún texto aleatorio. Y una vez que hagas eso, puedes optar por agregar una pieza de Lorem ipsum, o puedes abrir una nueva ventana seleccionando relleno con texto de marcador de posición. Y los textos de edición serán completamente personalizables. Puedes cambiar su tamaño, color de font-family, line-height, etcétera Entonces el siguiente se llama Pexels, y te permite buscar en el repositorio de Paxos.com de imágenes de stock gratis. Y es uno de los sitios web más populares donde puedes encontrar. Ahora somos fotos realmente de alta calidad y gratuitas sobre básicamente cualquier tema. Entonces una vez instalado el plugin, solo puedes introducir tu palabra clave, seleccionar una forma o quieres agregar una imagen, y luego simplemente haz clic en esa imagen seleccionada para agregarla. Y al igual que con las caras de la interfaz de usuario, esa forma que seleccionaste básicamente funcionará como un marco de imagen que limitará esa imagen agregada. Entonces el siguiente se llama OnDraw. Y es absolutamente uno de mis plug-ins favoritos porque el propio Android, este repositorio, te permite buscar ilustraciones personalizadas, de aspecto profesional. Y en muchos diseños modernos, notarás ilustraciones personalizadas en las secciones de héroes sobre nuestras secciones y casi cualquier otra sección. Creo que esas ilustraciones con mucha personalidad a los diseños web. Y las ilustraciones que aquí encontrarán son gratuitas e incluso libres de atribución. Y puedes utilizarlos en tus proyectos personales y comerciales. Entonces todo lo que tienes que hacer aquí es introducir una palabra clave si estás buscando algo específico, claro. Y luego simplemente haz clic en una de las ilustraciones para descargarla a tu portapapeles. No se va a agregar directamente a su tablero de arte una vez que haga clic en esa ilustración. Pero a una vez que se descarga y se sienta en su, en su portapapeles, y luego simplemente puede pegarlo en cualquier lugar que desee en su tablero de arte. Y adicionalmente, puedes seleccionar un color primario para que coincida con la ilustración con el esquema de color de tu diseño. Estos son los plugins más comunes que podrías querer usar en X d Seguramente hay mucho más para elegir, pero eso depende de ti explorar y decidir cuáles necesitarás y cuáles eres saltará. Los que te mostré aquí definitivamente te ayudarán a agregar activos personalizados como imágenes, iconos y textos, que son esenciales en cualquier diseño de maquetación. 15. Cómo usar los recursos de documento: Ya hemos hablado de usar capas y plugins en XD y en la esquina inferior izquierda de la ventana principal, también encontrarás bibliotecas. Dentro de esos se sientan sus activos documentales. Y aquí, encontrarás los grifos para las fuentes que faltan. Si hay algunas fuentes, las fuentes meten en su documento. Verás los nombres de tus fuentes que no están instaladas en tu sistema, pero se están utilizando en el documento. También encontrará los colores con códigos de color utilizados en su documento. Entonces tendrás estilos de caracteres con familias de fuentes en colores y tamaños específicos. Verás componentes con las secciones de tu diseño. Y también encontraremos videos que contengan videos usados en tu documento. Por lo que hacer clic derecho en cada uno de estos activos revelará un menú contextual de aspecto ligeramente diferente que le permitirá realizar diferentes acciones. Entonces, por ejemplo, si haces clic en el activo de fuentes que falta, encontrarás una opción de reemplazar fuente que te permite reemplazar los fondos que faltan en tu documento. Por supuesto, puedes hacerlo con una fuente diferente. Y una vez que hagas eso, faltan la pestaña de fuentes desaparecerá de los activos del documento. También verá un punto culminante en Lienzo, que le permitirá encontrar rápidamente los activos específicos dentro de su documento. También encontrará un color de relleno de aplicar o aplicar un color de borde. Si hace clic con el botón derecho en a, en un color agregado a sus activos de documentos. Y eso simplemente te permitirá agregar ese color como borde o relleno a un elemento seleccionado. Y por supuesto, además de eso, podemos realizar más opciones estándar aquí como cambiar el nombre, eliminar o simplemente agrupar. Entonces lo que realmente necesitas saber sobre Activos documentales en este punto es que este panel es una gran manera de simplemente organizar tu proyecto y todo lo que tienes en él. Ahora a veces, especialmente cuando estás creando un diseño que requiere muchas páginas diferentes, colores, fuentes, componentes, trabajar forma rápida y efectiva podría llegar a ser un poco difícil. Ya sabes, va a ser difícil controlar todos los activos que tienes dentro de tu documento. Y el panel de Activos del documento definitivamente te ayudará a mantener tu proyecto lo más consistente posible. 16. Introducción rápida a los sistemas de diseño en Xd: Los sistemas de diseño son una gran manera de hacer que tu diseño y sea consistente, no solo en todas sus partes, sino que también ayudan a otros miembros del equipo a mantener los diseños lógicos. Y pueden ser bastante elaborados y vienen con una extensa documentación sobre todos y cada aspecto de cualquier pieza de diseño que pueda diseñar también en el futuro. Pero para nuestros propósitos, simplemente mantengamos las cosas simples. Entonces para construir tus propios sistemas de diseño, puedes usar estas herramientas y almacenar los elementos de diseño. Puede utilizar los activos del documento. En un sistema de diseño típico, tendrías los colores primarios y secundarios. Tendrías la tipografía para encabezamientos y el texto corporal. Y también tendrías varios componentes como botones, listas, iconos, etcétera. Así que he montado rápidamente un sistema de diseño simple, simple, muy simple que contiene esos elementos. Entonces por supuesto, podrías agregar tantos elementos como quisieras. Pero el propósito principal de este ejercicio es que entiendas lo que diseño un sistema y cómo utilizar los activos del Documento para gestionarlo. Lo que hice aquí es que primero agregué algunos rectángulos simples y los llené de colores que estoy usando en mi proyecto. Entonces he añadido algunos elementos tipográficos como encabezados y texto corporal. Por supuesto, usando la fuente que normalmente estaría usando en mi proyecto. Y por último, con la ayuda del complemento de maqueta rápida, he agregado algunos componentes como etiquetas y botones. Entonces, una vez que los elementos de diseño estén listos, puedes agregarlos a tus activos documentales, y el proceso es súper simple. Todo lo que necesitas hacer es seleccionar los elementos que deseas agregar a los Activos Documentativos. Y luego haga clic en el pequeño símbolo más junto al nombre de la pestaña. Por ejemplo, colores, estilos de caracteres, componentes, videos, etcétera. Y el panel de Activos de Documentos se completará en última instancia con el, con los elementos que puedes reutilizar dentro de tu diseño. Entonces cuando pasemos a la parte de diseño de este curso, crearemos elementos de diseño para nuestro layout. Y a medida que vayamos añadiremos los colores, tipografía, y otros elementos que guardaremos en el panel de Activos Documentarios. Los sistemas de diseño son un gran fin. La mayoría de las veces forma esencial de mantener tu diseño consistente a lo largo de todas sus iteraciones y en todos los pasos. No tienen que ser como súper elaborados, pero deben contener al menos la información sobre los colores y fuentes que usas en tu proyecto. Simplemente te va a ayudar a ahorrar mucho tiempo a la hora de crear tus diseños. 17. Cómo elegir los colores adecuados para tus diseños: Elegir el esquema de color adecuado para tu próximo diseño web es, supongo, junto con la topografía, el más importante para hacer. Los colores que elijas serán lo primero que captará la atención del visitante. Y si se elige correctamente. Y simplemente no harán que le duelen los ojos. Y no van a hacer que sus dedos busquen rápidamente eso. Sácame de aquí. Botón vasto. Hay toda una teoría detrás del significado de los colores, pero no creo que en este punto es algo esencial discutir. En mi opinión, la única regla general que debes seguir la suya apropiadamente. Todo lo que realmente necesitas hacer es pensar en el color que elijas es apropiado para el tipo de servicio o negocio que estás diseñando. Y luego piénsalo. Sería David rosados o amarillos lucir bien en un sitio para abogados son arquitectos y greens oscuros son de gran tiro la amabilidad o energía de un jardín de infantes o parques de diversiones. Entonces, a menos que vayas por alguna estrategia de marketing inteligente y arriesgada aquí, la respuesta es una nota obvia. Entonces apropiadamente es una cosa. Pero ¿qué hay de encontrar un esquema de color para tu diseño? Ahora, eso simplemente funciona. Así que por suerte, en este día y edad podrías estar totalmente coloreado, ignorante y aún así llegar a magníficas paletas de colores. Imagina un escenario en el que tengas un cliente que necesita un sitio web y él o ella te dice que el naranja quemado es el color de su elección ahora, solo les encanta. Es un color fácil de emparejar. Pero se podría empezar con agarrar la rueda de color y comprobar cuáles son el contraste en colores de naranja. Y por el contrario en, quiero decir, sentado en el lado opuesto de la rueda de color. En este caso, se puede ver que violetas, azules, y verdes, los greens más oscuros, serían una buena base para su paleta de colores. Pero puede ser aún más fácil que eso. Simplemente puedes Google quemado paleta de colores naranja y solo ver los resultados de la imagen que obtienes. Y confía en mí, vas a conseguir mucho. Una vez que hayas encontrado algo que te guste, solo puedes copiar la imagen y traerla a XD. Y ahora puedes probar los colores y agregarlos a los activos del Documento. Así que hagamos eso ahora. Entonces, una vez que esa paleta de colores la esté pegando, podemos crear un rectángulo cuyo ancho va a ser más o menos el mismo que un color, una muestra de color. Y ahora sólo podíamos copiar y pegar el rectángulo unas cuantas veces, solo para hacer que el número de formas sea igual al número de colores en la paleta. Pero hay una mejor manera de esto. Podríamos simplemente usar la rejilla de repetición para esto. Y esta función le permite crear una cuadrícula de múltiples instancias del objeto seleccionado. Entonces para crear una cuadrícula, solo tienes que seleccionar el rectángulo y luego pulsa la opción de repetición de cuadrícula. Entonces simplemente arrastremos el mango derecho para crear más anastomosis del rectángulo. Si luego coloca cursor en cualquier lugar entre los rectángulos, podrá controlar el espacio entre los objetos. Así que una vez que todo esté hecho, solo presione el botón de desagrupar cuadrícula que verá reemplazando la rejilla de repetición uno. Y ahora podemos agarrar cada rectángulo, presionar la tecla I en el teclado para inicializar la herramienta cuentagotas y probar todos los colores que puedes agregar a los Activos del Documento. Creo que esta es la forma más fácil de encontrar primero la paleta de colores adecuada para tu proyecto y luego convertirla en ácidos de tus documentos. No obstante, si quieres crear más paletas personalizadas, hay tantos lugares y herramientas que puedes usar y hablaremos de ellas a continuación. 18. 5 herramientas para encontrar los colores adecuados para tus diseños: Ya sabes lo que es la web, enjambre y con herramientas que apuntan y te ayudan a encontrar los colores adecuados para tu próximo diseño. Y algunos de ellos son útiles. Algunos de ellos son más confusos que útiles. Entonces aquí está la lista de las herramientas que creo que simplemente funcionan. Entonces el primero ahora en nuestra lista son los refrigeradores. Entonces para mí, cooler dice decidir ir cada vez que necesito una interesante paleta de colores auto-generada. Y es la primera herramienta que puedes elegir bajo el menú Herramientas en la parte superior derecha. Entonces para generar una paleta, simplemente presiona la Barra Espaciadora y cada vez obtendrás un resultado completamente diferente. No obstante, si te gusta un solo color y quieres usarlo, puedes copiar el código hexadecimal. Pero si quieres generar toda una paleta a su alrededor, simplemente bloquearla presionando un pequeño icono de candado. Verás una vez que pases sobre una muestra de color dada. Una vez que esté bloqueada, puedes volver a presionar la barra espaciadora para cambiar solo los colores no seleccionados. Y por supuesto que coincidirán con el que eligiste, el que mantengas encerrado. Si te gusta la paleta de colores, puedes exportarla pulsando el botón Exportar en la parte superior derecha. Y esto abrirá un nuevo cuadro de diálogo con una plétora de formatos de exportación. Uno de ellos es el ASE propio de Adobe, que significa Adobe Swatch Exchange, que permite importar paletas de muestras. Y desafortunadamente, XD no soporta esta funcionalidad. Por lo que solo recomendaría exportar el paladar como una imagen y crear una muestra bibliotecas dentro de XD. Si eliges la imagen como método de exportación, verás otra ventana pidiéndote un nombre para tu nueva paleta. Esencialmente se convertirá en su nombre de archivo de imágenes. Una vez que lo guardes en tu computadora, posteriormente podrás importar la imagen con las paletas de color a tus proyectos XD. El curso viene con algunas grandes herramientas de selección de color. De ellos. Creo que más me gustaron los palets explore. Entonces aquí, puedes encontrar muchas paletas de colores ya hechas para inspirarte. También puede encontrar una paleta buscando un nombre de color específico, código hexadecimal o incluso un tema. Enfriadores que el carbón realmente podría ser el único lugar que tendrías que visitar para conseguir todo lo que necesitarías. En cuanto a generar paletas de colores o colores individuales o muestres o gradientes, etcétera Pero por supuesto, también hay otras fuentes que vale la pena visitar. uno de ellos se le llama el punto de color. Y éste es realmente divertido. Puedes crear rápidamente un esquema de color usando tu mouse o touchpad. Así que aquí sólo arrastra a la izquierda o a la derecha para cambiar el tono y arrastrar hacia arriba o hacia abajo para cambiar la ligereza. Y también puedes desplazarte hacia arriba o hacia abajo para cambiar la saturación. Entonces si estás contento con el color, haz clic para guardarlo y repite el proceso con otro color. Y la herramienta solo te mostrará los colores que funcionan bien con el que eligiste antes. Y por supuesto, puedes repetir el proceso tantas veces como quieras. En cuanto a exportación en tus colores, supongo que sería mejor simplemente guardar tu pantalla y luego copiarla en tu proyecto XD porque esta herramienta no viene con la exportación en características como colors.com. El siguiente se llama palatable. Y aquí puedes elegir tu propio color o simplemente hacer clic en el botón de aversión. Entonces el programa elige ese color para ti. Y si te gusta, haz clic en el botón Me gusta y mira si el siguiente color Supongamos que coincida con el anterior coincide con tu gusto. Por supuesto, también puedes eliminar un color particular para encoger toda la paleta. Entonces el siguiente no es en realidad una aplicación como una web, pero es un plugin XD y se llama colores en alcance. Es realmente una pequeña herramienta fantástica que la ayuda y información que puedes encontrar aquí es básicamente invaluable. Por ejemplo, puede navegar a través la biblioteca de paletas de colores prefabricadas. También podrías dejar que la IA genere paletas de colores para ti. Puedes consultar la accesibilidad del color que lo seleccionas. También puede generar gradientes y tonos de degradado. También puedes agregar paletas de colores utilizadas por algunas de las mejores marcas del mundo. Básicamente, lo que puedes hacer aquí es hacer clic en una funcionalidad específica y luego solo agregar colores. O bien puedes consultar alguna información adicional proporcionada. Entonces, por ejemplo, si quieres agregar una paleta de colores, haz clic en la opción de paletas de colores, y verás muchas paletas de colores predefinidas. Por lo que sólo podemos copiar un palet o simplemente hacer clic un icono de poco más en la parte superior derecha para agregar el paladar al tablero de arte. También podrías simplemente hacer clic en editar esta paleta para colorear el botón de ácidos. Y esa paleta por supuesto se va a sumar a tus activos documentales. Entonces los colores en el deporte es un plugin fantástico. Para agregar y crear paletas de colores. En una pequeña app, obtienes toneladas de opciones y ayudantes. Entonces el último de nuestra lista son los colores de Canadá. Y creo que probablemente has oído hablar de Canva, pero ¿has usado sus herramientas de color? Realmente puedes crear y ver paletas de colores aquí. También puedes descubrir el significado de cada color elegido. Por lo que ahora todas estas herramientas generadoras de colores son solo se reubican, representación humilde de una era de recursos de color que puedes encontrar en línea. La mayoría de ellos trabajarán más o menos de la misma manera. Entonces si solo encuentras tus favoritos, solo quédate con ellos. Eso es realmente todo lo que vas a necesitar. 19. Cómo elegir el tipo de letra adecuado para tus sitios web: Ahora que ya sabes elegir los colores adecuados para tus diseñadores, es hora de aprender a elegir las mejores fuentes para ellos. Sin embargo, antes de empezar, hay una cosa importante que saber, la diferencia entre una tipografía y una fuente. Por lo que mucha gente usa estos términos indistintamente, que es, que está mal. Y la diferencia es en realidad muy fácil de entender. Una tipografía es una familia de pesos y estilos específicos. Por ejemplo, input surf. Y encontraron es una instancia particular de la tipografía. Por ejemplo, el medio de servicio de entrada. Bueno, eso es fácil, ¿no? Todo se complica un poco más cuando se intenta clasificar las caras de tipo. Pero por suerte, solo hay cuatro variantes principales de tipos de letra. Entonces el primero es serif, que son tipografías e incluyendo letras con esos pequeños adornos diminutos. Al igual que Laura Libre, Baskerville, o simplemente el viejo Times New Roman. También hay tipografías san-serif, que incluye letras sin esos ornamentos, por ejemplo, Open Sans, Roboto o Montserrat. También tenemos serif losa con serifs que son realmente audaces y una gruesa, como losa o Roboto Slab. Y también hay tipos de letra Script que simplemente no se asemejan a la escritura a mano como grad, París, yen, o America's see. Por lo que estas son las principales categorías de tipos de letra. Pero también hay otro que de alguna manera se relaciona con todos ellos. Y estoy hablando de mostrar caras de tipo. Pero uno de los mayores errores cometen los diseñadores es que usan tipografías de visualización para largos pasajes de texto. tanto que están destinados específicamente a encabezamientos y tal vez subencabezamientos. Para demasiados diseñadores usan estos tipos de letra para el texto principal del cuerpo, lo que esencialmente lo hace legible. Eso no es lo que deberías querer para tus diseños. Así que ahora probablemente te estés preguntando, acuerdo, pero ¿qué fuentes debo usar? Todo lo que podríamos simplemente tratar de encontrar los mejores rasgos de los tipos de letra que deberían, eso debería ayudarte en encontrar la tipografía adecuada para el trabajo. El primero será legibilidad. Quiero decir, solo elige el tipo de letra que sea simplemente legible. Su sitio web debe comunicar piezas de información muy específicas. Por supuesto, a menos que sea solo un proyecto de arte. Por lo que la gente debe poder leer tu mensaje y no quieres que se lo haga difícil para ellos. La prueba más fácil es solo hacer que la fuente sea más pequeña a alrededor de diez puntos y comprobar si puedes inculcarlas distintas , las letras simples, por ejemplo, e minúsculas desde una c. minúscula y también con bastante frecuencia la, la capital podría parecer minúsculas l. general, más caracteres abiertos serán más visibles en tamaños más pequeños. Y de ser así, por supuesto, también serán visibles en tamaños más grandes. Por ejemplo, en encabezamientos. Ahora para los encabezados, puede usar tipos de letra de visualización o los tipos de letra de texto del cuerpo. Aunque tanto serifs como sans serifs e incluso scripts funcionarán bien. Se trata más de tu elección de diseño aquí en lugar de encontrar una fuente perfectamente legible. Ahora los encabezamientos suelen ser bastante grandes. Por lo que no deberías encontrar problemas con la legibilidad. Y de nuevo, por favor no utilices letra de visualización para el texto del cuerpo. Pasajes de texto más largos necesitan una tipografía que sea en primer lugar legible. Y en segundo lugar, va bien con tus encabezamientos y objetivos de diseño. Algunas personas trataron de argumentar que para la lectura de pantalla, tipografías san-serif son mejores y las fuentes serif son mejores para la lectura fuera de pantalla, como libros o folletos. Y no creo que sea tan simple. Quiero decir, si un tipo de letra se puede llamar legible, significa que es bueno para pantallas y páginas. Serif o sans-serif. Si es fácil de leer, puedes usarlo donde quieras y tu elección estará verdaderamente basada en la estética que vas a buscar. Tener una silla de montar que hay cualquier tipo de caras que puedas usar y estar absolutamente seguro de que tomaste la decisión correcta. Bueno, supongo, pero el método que estás a punto de aprender viene con una trampa un poco efectiva. Así que digamos por tu diseño, quieres usar una de las Fuentes de Google. Y una vez que decidas si quieres serifs, sans serif, o scripts, puedes refinar tu búsqueda por popularidad, eligiendo más popular a la derecha. Esto ordenará los tipos de letra por el número de descargas a partir del valor más alto. Los tipos de letra más populares serán los primeros en la lista. Además, algunos de ellos como el último, Open Sans o refutación, fueron comisionados por Google y creados por experimentados, como diseñadores bien establecidos. Por lo que puedes estar seguro de que esas caras tipo son simplemente buenas. Entonces, si esas tipografías son las más populares, deberían ser las mejores, ¿verdad? Bueno, podrían ser malos. También pueden ser muy sobreutilizados. Tomar Langosta y Langosta Dos, por ejemplo, es una tipografía realmente genial, pero se ha usado tantas veces que se le ha llamado el interruptor New Comic Sans. Al mismo tiempo es un indicio de su éxito. Y la razón de los medios, por supuesto, no estás limitado a las fuentes de Google. También puedes visitar fuentes de Adobe donde encontrarás tipografías de Adobe mismos, pero también de muchos diseñadores de tipo y fundiciones. Para que pueda hacer clic en el nombre de la tipografía. Te gusta ver todas las variantes disponibles. Entonces para agregarlo a x dy, clic en activar fuente en la esquina superior derecha. Y en última instancia verás esas fuentes agregadas a tu biblioteca de fuentes dentro de XD. Por lo que estos son los fundamentos de buena tipografía que puedes aplicar en tus propios diseños. Pero qué pasa si eres una topografía completa nueva y no sabes qué fuente o tipo de letra es. Vayan bien juntos. Hay dos fuentes que tiendo a usar con mayor frecuencia cada vez que estoy en duda o solo necesito algo de inspiración. Y el primero se llama Font Pair.co. Y aquí encontrarás un emparejamiento de fuentes, inspiración de fuentes, y muchos ejemplos de diferentes usuarios de fuentes. Las fuentes que encontrarás aquí son directamente descargables. Pero también puedes consultar los sitios de creadores de tipos de letra para aprender un poco más sobre ellos. La otra fuente que uso se llama tipo woof.com. Y este lado tiene una gran cantidad de grandes recursos y clasificaciones de fuentes, como un top sans serif fuentes, top fuentes serif, top fuentes de Adobe a fuentes de Google, etcétera Así que si alguna vez estás en duda, si la tipografía que eligió su bien, sólo puede consultar tipo of.com. Entonces creo que hemos cubierto bastante en cuanto a encontrar los tipos de letra adecuados para tus proyectos. Ahora ya sabes que la distinción entre san-serif sirven como tipografías de script y serif losa. Conoces la diferencia entre mostrar y fuentes de texto corporal. Ya sabes dónde encontrar fuentes para tus proyectos, y sabes a dónde ir si alguna vez tienes dudas sobre tu elección de fuente. Tan buena tipografía es uno de los elementos clave de un diseño de sitio web exitoso. No obstante, hay algunos otros elementos que pueden hacer o romper un buen diseño. Entonces hablemos de ellos a continuación. 20. Las mejores prácticas del diseño web moderno: Con cada nuevo diseño web que creas, tus habilidades van a mejorar. Crearemos más rápido. Te meterás en algunos hábitos saludables. Pero hay algunas cosas que podrías emplear en tu flujo de trabajo desde el principio. Y estoy hablando de las mejores prácticas del diseño web. Entonces, antes que nada, recuerda acerca de agilizar la experiencia. Agilizar tu diseño para obtener la mejor experiencia de usuario debe ser la regla general de tu proyecto. No sólo para proyectos de diseño web para ese asunto. Ahora, esto puede sonar duro, pero la mayoría de las personas que visitan un sitio web que diseñaste no vendrán a ver todos los hermosos colores y fuentes que usas. Visitaremos por un servicio específico que brinda el sitio web. Entonces si el usuario no puede obtener lo que quiere rápidamente, irán a otro lugar. Y realmente la pesadilla de los negocios en cuanto a sus sitios web, es la alta tasa de rebote, lo que significa que los usuarios dejan sus ovocitos muy rápidamente y no interactúan con él como se esperaba. Entonces por eso es tan importante presentar todos los elementos y datos innecesarios de una manera fácilmente comprensible. Entonces, ¿qué significa todo en la práctica? Bueno, es una buena idea minimizar el texto, por ejemplo. Así que crea breves, como dos o tres párrafos de frase que serán fáciles de leer tanto en dispositivos de escritorio como en dispositivos móviles. Además, trate de no usar más de tres a cinco colores y tal vez dos adicionales para estados de flotación. Y definitivamente evitar el desorden. Así que solo recuerda hacer cada sección sobre una idea y tratar de minimizar el número de llamadas a acciones a una por sección. Entonces la simplicidad es la clave para bajar las tasas de rebote. Un diseño simple será más fácil de desarrollar y requerirá menos recursos para cargar en el dispositivo del usuario. Entonces a continuación tenemos consistencia. Así que una vez que hayas encontrado tus fuentes y colores, solo quédate con ellos. No hay nada más poco profesional que botones y piezas de texto que tengan diferentes colores a través de diferentes páginas de tu sitio. Por lo tanto, es una buena idea usar los recursos del Documento para mantener sus estilos de texto, colores, componentes y fuentes en un solo lugar. También tenemos jerarquía visual, y ésta está estrechamente ligada a la noción de usabilidad. Si estamos de acuerdo en que el objetivo principal de nuestro diseño es alentar a los usuarios a realizar una determinada acción en el sitio web. Tenemos que hacerlo fácil para ellos. lo que podemos hacerlo por ejemplo, por el uso correcto de colores, posicionando pesos de fuente variables, agregando botones fácilmente clicables, etcétera También debes recordar acerca de la amabilidad móvil. La mayoría de los diseñadores afirman que cuando crean sus diseños, lo hacen primero con unas versiones de escritorio en mente. Yo lo hago así yo mismo. Supongo que es más fácil trabajar así en lugar de primero llegar a versión móvil de la interfaz de usuario. Pero eso no significa que debas descuidar las versiones receptivas de tu diseño. Ahora cuál es la mayor parte del tráfico web que viene de los dispositivos móviles en estos días, es un maestro absoluto, teniendo en cuenta cómo va a verse tu diseño en smartphones y tablets. Y una preocupación humana incluso tomando el primer enfoque móvil, lo que significa primero diseñar la versión móvil del sitio web y luego construir la versión de escritorio encima de eso. Entonces, ¿qué haría un diseño móvil amigable? Entonces, dado que el costo de los datos móviles sigue siendo un tema en muchas partes del mundo. Intenta hacer que tu diseño sea ligero en el móvil. Significa que tal vez tu sitio no necesite tantas imágenes o videos. Uno se muestra en un teléfono inteligente. Tal vez el deslizador no sea tan fresco y efectivo en un dispositivo más pequeño como lo está en una pantalla más grande. Además, es posible que los necesites más espacios en blanco o brechas más grandes entre los elementos. Por lo que son simplemente más fáciles de tocar. Y también el texto podría necesitar algunos ajustes en cuanto a su tamaño, posicionamiento, y tal vez la altura de línea. Por lo que estas son las cosas que debes considerar a la hora de hacer que tu diseño sea amigable con el móvil. Por lo que también tenemos accesibilidad, que está estrechamente ligada a toda la experiencia. Los usuarios lo están obteniendo de su sitio. Y si estás diseñando tu lead web con la accesibilidad en mente, tienes que hacerlo, quiero decir, el layout accesible para todos los usuarios. Si quieres profundizar en el tema, debes las pautas de accesibilidad de contenido web de Google. No obstante, puedes usar las siguientes cuatro pautas generales para ayudarte a entender este tema. Por lo que un sitio web accesible sería primero permisible. Por lo que los usuarios deben poder percibir tu contenido usando una de sus frases. Por ejemplo, las personas con discapacidad visual podrían tener problemas con ver los campos requeridos en su formulario de contacto si sólo están marcados con un borde rojo. Entonces se debe agregar algo así como un asterisco y un trozo de textos como requerido. Además, los usuarios deben poder operar la interfaz de usuario de alguna manera. Por ejemplo, al hacer clic en los botones, detener o pausar el video con algunos controles proporcionados. Usando al menos dos formas de sistemas de navegación, como tal vez navs superiores, enlaces de fotos, o incluso migas de pan. Además, el contenido debe ser comprensible para los usuarios. Entonces, por ejemplo, el estilo de menú y el posicionamiento deben ser consistentes entre diferentes páginas o vistas de la página. Además, el sitio necesita ser, necesita ser robusto, lo que simplemente significa que los signos deben ser compatibles con los navegadores actuales, pero también con sus versiones futuras. Pero eso es más un reto de desarrollo web. Y hay ciertas convenciones al usar un sitio web. Es decir, en estos días, los usuarios están bastante acostumbrados a operar en sitios web de una manera específica. Por ejemplo, solían usar el sistema de menús. Y eso incluye el menú móvil estilo hamburguesas que se puede encontrar en la parte superior o izquierda de la página. Están acostumbrados a ver el logotipo en la parte superior izquierda o en la parte superior centro de la página. Y se utilizan para hacer clic en el logotipo. Y por supuesto que puede ser una imagen o una imagen más yo gravé y que bueno, esa imagen, ese logotipo, al hacer clic, los va a llevar a la página de inicio. También entienden que los enlaces tienen cuando se pasa el cursor sobre ellos o hacen clic en ellos, van a cambiar su apariencia. También entienden una navegación pegajosa, que básicamente aparece cuando un usuario anota, desplázate esto hacia abajo en la página. Y también entienden algo así como un patrón de bolsa a top que se mostrará cuando el usuario desplaza la página. Y entonces es entonces cuando un clic, los llevará a la parte superior de la página. Todas estas reglas pueden parecer al principio como una enorme limitación al proceso creativo. Pero creo que hay mucho espacio para diseñar diseños originales mientras los hace fáciles de entender para los usuarios. 21. Prepararte para empezar a diseñar: Desde que asumo que eres un aspirante a diseñador web, y por supuesto el próximo usuario de D. Pensé que sería una buena idea crear un diseño que simplemente mostrara tus habilidades. Y puedes usar el diseño para que en última instancia crearás aquí como base para tu propio sitio web. Si quieres convertirte en diseñador, freelancer, o elementos de cartera. Si quieres conseguir un trabajo como diseñador web. Por eso vamos a sumar los elementos y secciones que son más comunes en los diseños creativos que también están un poco más orientados a los negocios. Solo quiero encontrar el equilibrio adecuado entre incluir las cosas que necesitas saber sobre XD y cosas que son lo suficientemente interesantes para las personas que querrían contratarte. Por lo que diseñaremos de la versión de escritorio de la portada junto con ella. Entonces versión móvil, pero también una sola página de entrada de blog. Y por supuesto es la versión móvil dos. Y por cierto, es una buena práctica utilizar algo que llamo medley de diseño. Entonces una vez terminada la versión de escritorio de una sección específica, creo que deberías crear su versión móvil justo después de esto, te dejaremos controlar mucho mejor tu diseño y simplemente mantenerlo consistente. Pero por supuesto, también prototilizaremos nuestro diseño, lo que significa que le agregaremos interactividad. Solo para imitar lo que se vería, lucir y comportarse como si fuera como un sitio web en vivo. Entonces al final del proceso de diseño y prototipo, debes tener creado tu propio proyecto. Y no lo más importante, debes entender cómo construir un proyecto completo de diseño web XD. Y sí te animo a experimentar. Te animo a tratar este diseño como un puntero, como un ejemplo que podrías usar para tu propio diseño, tus propias variaciones de este diseño. 22. Primero vamos a crear un archivo nuevo: Entonces estoy aquí en XD en la pantalla de inicio. Así que empecemos con la creación de un nuevo archivo. Por supuesto, podríamos usar igual que un preset web 19201920 predeterminado, pero voy a ir con un tamaño personalizado. Creo que podemos empezar con como 1920s de ancho y 4 mil de altura. Y sólo voy a hacer click sobre este tipo. Y por supuesto, por supuesto, como ya sabes, siempre puedes simplemente agarrar este fondo manejado aquí mismo y cambiar el tamaño de tu documento y notar cómo afecta el tamaño de nuestro diseño aquí en ellos. En el Inspector de Propiedades, por supuesto, si acabamos de agarrar a este tipo así, también afectará el ancho. Y por cierto, lo estamos haciendo con la herramienta de selección. Para que como se puede ver, esta herramienta es bastante poderosa. Puedes transformar objetos con él, seleccionar los objetos, por supuesto, y también puedes agarrar. Pero claro, siempre y cuando sea, si está vacío, puedes agarrar un tablero de arte y solo puedes cambiar su tamaño así. Puedes hacerlo más grande, puedes hacerlo más pequeño. Entonces por supuesto, quiero volver a mi talla anterior de manera tan diferente, necesito usar la década de 1920 porque es como, sabes, como un Full HD estándar. Ancho de pozo. Y voy a volver a 4 mil así. Otra, creo que realmente, realmente, realmente importante que hay que entender aquí antes de empezar a diseñar algo es que se puede utilizar el diseño de cuadrícula aquí mismo en el Inspector de Propiedades, si sólo lo sabemos, activarlo, se puede ver que tenemos estos todos estos. Déjame simplemente acercar hacia atrás. Tenemos todas estas columnas que simplemente nos permitirán decidir qué tan amplios van a ser nuestros elementos o nuestro diseñador en total. Y por supuesto, podría ayudarnos a posicionar los elementos dentro de nuestro diseño. Ahora, esto aparece lista basada en como una cuadrícula de 12 columnas que puedes, puedes ver como en Bootstrap por ejemplo. Y si no estás familiarizado con Bootstrap, es simplemente un entorno como un desarrollo, es un entorno CSS y JavaScript que es muy, muy popular en el mundo del desarrollo. Y eso, ese sistema utiliza 1212 columnas. Y por supuesto, puedes cambiar el color si quieres hacer eso. Y puedes cambiar el número de columnas a otra cosa si lo prefieres. Pero creo que de la forma en que se ve, es bastante estándar y no invitaría no aconsejaría anchura como no meterse con el número de columnas o con el ancho de la canaleta. Y por cierto, el ancho de la canaleta es como este margen entre estas dos, estas dos columnas aquí mismo. Entonces, una vez que empezamos a crear en nuestros elementos de diseño, podemos, por ejemplo, como adjuntarlos a la izquierda, como la columna más izquierda y la columna más derecha. Pero honestamente, no soy que si se echa un vistazo a los diseños como diseños contemporáneos, no son estrictamente ser un apegado a todas estas columnas internas. Al igual que cada vez más diseños como el diseño web 3, verás que muchos elementos como superponerse entre sí. No son como, como pegados a cualquier estructura, a cualquier tipo de diseño como una cuadrícula. Pero es un, es un buen indicador de cómo, cuán amplio debería ser tu diseño, realmente debería ser. Y podría ayudarte en posición en tus elementos si estás teniendo problemas con su posicionamiento en relación entre sí, a diferencia de los otros elementos de diseño. Pero esto es opcional. Voy a volver y volver a esta opción de layout. Ahora durante el proceso de diseño, creo que sí ayuda un poco. Y si quieres seguir, puedes, puedes, siempre puedes mantener este diseño como estas columnas y encendido, si no lo haces, no tienes que hacerlo. Pero para que sepas, me voy a referir a estas, a estas columnas como durante el proceso de diseño bastante. Entonces por supuesto que es bueno guardar nuestro documento. A lo mejor voy a guardarlo localmente porque quiero compartirlo contigo como más tarde, más adelante. Entonces voy a guardarlo como documento local. Y lo voy a llamar como un nuevo diseño ellos para estudiantes, por supuesto que debes nombrarlo, darle un nombre que corresponda con tu, con tu, con tu propio diseño. Así que sólo voy a salvar a este tipo. Y ahí vamos. Podemos, supongo que podemos empezar con nuestra sección de cabecera. Por lo que vamos a empezar con agregar algo así como logotipo y tal vez agregaremos algún tipo de navegación de manera. Y tal vez, y tal vez voy a añadir una imagen, pero hagámoslo en el siguiente video. 23. Encuentra los colores adecuados para nuestro diseño: Así que tenemos listo nuestro nuevo archivo. Así que supongo que ahora podríamos, por ejemplo, empezar con agregar un logotipo aquí en la esquina superior izquierda y tal vez agregando su navegación aquí en la parte superior derecha. Pero como quiero hacer como prototipado y diseñar al mismo tiempo, para prototipar la nuestra navegación, tendríamos que tener algunos colores, ¿verdad? Quiero decir, no lo quiero No quiero que me guste el estado de flotación cuando estoy flotando sobre los enlaces de navegación. No quiero simplemente subrayarlos en mayo o hacerlos más audaces. Quiero cambiar el color porque también nos permitirá aprender a prototipos un poco mejor y también tener esos colores, tendríamos que encontrarlos. Y si no lo hacemos, si lo estamos diseñando nosotros mismos, y si no lo hacemos, si no tenemos ninguna pista de nuestro cliente, entonces solo necesitamos encontrar esos colores nosotros mismos. Por supuesto, si ya tenías algunas imágenes o activos que te envían, te enviaremos desde, desde tu cliente. Deberías usarlos como un puntero en cuanto a buscar los colores. O tal vez a tu cliente le encantaría un color específico en quién sabe. Pero si no lo hicieras, creo que sería una buena idea encontrar primero tal vez como una imagen de héroe para nuestro diseño y luego basar nuestro esquema de color en los colores que puedes ver en eso, en ese héroe específico imagen. Y lo que quiero es que quiero encontrar como una, como una imagen falsa básicamente de un retrato, foto de un diseñador o un freelancer que no tendría ningún fondo, pero aún así tendría algunos colores agradables que podemos simplemente utilizar en nuestro diseño. Entonces para eso, voy a usar el sitio que se llama píxel crudo. Y solo necesitas configurar una cuenta gratuita aquí mismo. Y entonces puedes buscar, bueno, si quieres buscar fotos premium, puedes, pero por supuesto tendrías que pagar por ellas. Pero también tenemos como dominio público y fotos gratis aquí mismo. Entonces lo que voy a, bueno, lo que podrías hacer es buscar simplemente algo como retrato, añadiría PNG. Y esto, esto va a saber como tratar de encontrar algunas fotos de retratos que simplemente no tienen fondo. Por supuesto, las más bonitas son la sección premium, premium. Así que probemos el retrato aquí, retrato P y G. Y por supuesto, estos van a ser un poco más agradables. Pero lo que he encontrado aquí es este tipo de a, no es como una imagen. Es, parece un, como un scat como una ilustración hecha a partir de una imagen, pero creo que se ve muy bien. Es, esta chica es como una cadera, creativa, algo que hay bastantescolores aquí mismo que simplemente podemosrecuperar de este diseño que podría ser una colores aquí mismo que simplemente podemos recuperar de este diseño que podría gran base para nuestro diseño. Así que acabo de decidir descargar esta imagen. Y si vamos a XD, y sólo voy a tratar de encontrar esa imagen, como se puede ver, experimenté con otra. Y sólo voy a simplemente impreso por aquí. Y creo que voy a dejarme simplemente seleccionar el tablero de arte y simplemente voy a apagar el diseño. Y por supuesto que vamos a tener que hacerlo, hacerlo más pequeño así. Pero esta, esta imagen o esta ilustración, creo, va a ser una gran base para nuestro diseño para encontrar los colores correctos, los correctos. Pero en realidad empecemos a hacer eso en el siguiente video. 24. Vamos a agregar el logotipo y la navegación: Entonces cuando se trata de añadir en el logo a tu disciplina, a tus diseños, por supuesto, tienes diferentes opciones. Podrías añadir como un logotipo gráfico que tal vez hayas diseñado tú mismo. Podrías agregar un logotipo que tu cliente te dio porque ya tienen un logotipo. O nos vendría bien algún logotipo tipográfico muy, muy rápido suerte, como lo vamos a hacer en este caso. Porque de nuevo, solo estamos diseñando un logotipo simple, como un simple para nuestra, para nuestras celdas, básicamente porque somos los freelancers que somos como mostrar nuestro trabajo. Así que sólo voy a agarrar la herramienta de texto y déjame simplemente acercar. Por ahora, sólo voy a deshacerme de la grilla. Y sólo voy a hacer click en algún lugar aquí. Y digamos que nuestro nombre, no quiero escribir a diferencia de Jane Doe. Hagamos como Tiffany Jones. Espero que sea lo suficientemente genérico. Así que simplemente voy a agarrar ahora el apellido aquí mismo. Creo que tengo un espacio aquí, así que sólo voy a agarrar el LastName y vamos cambiar el color a tal vez este color rojo como este. O tal vez las sangrientas azules dejan el color azul así. Así que ahora simplemente puedo simplemente cerebro nuestro diseño de nuevo. Y ahora podemos ver que necesitamos simplemente poner este tipo hace en algún lugar, en algún lugar aquí contra nuestra columna izquierda, izquierda. Ahora por supuesto, este logo no tiene por qué ser tan grande. Por lo que ahora podemos simplemente previsualizar nuestra página usando esta opción de vista previa de escritorio. Ahora se puede ver que como básicamente lo que gusta esto, este logo va a verse como si se puede comprobar a cada rezago del tamaño o no. Creo que es un poco demasiado grande, así que sólo voy a hacerlo más pequeño. Voy a dejarlo caer a algo como 24 quizá. Y ahora vamos a prever a este tipo. Creo que se ve mucho mejor así. Conseguimos el logo. A lo mejor voy a deshacerme de la grilla así. Así que ahora es una buena idea simplemente agregar la navegación como en el, la derecha, aquí mismo. Entonces como quiero mantener todo consistente, solo voy a agarrar a este tipo. Entonces el logo, voy a presionar y mantener presionada la tecla Shift y la tecla Alt es simplemente clonar a este tipo a un costado. Sólo voy a deshacerme de este logo de Tiffany Jones y sólo voy a escribir algo como en casa. Ahora tenemos este logo y conseguimos nuestro primer link. A lo mejor voy a dejarlo caer a algo así como 18 puntos. Y simplemente podemos previsualizar a este tipo. Ahora podrías estar pensando que, que simplemente podríamos agarrar este elemento y tal vez solo clonar, clonar a este tipo unas cuantas veces a la derecha para simplemente construir nuestra navegación y podríamos usar la rejilla de repetición para eso si quisieras. Y será sólo mucho, mucho más rápido. Pero como dije, no sólo vamos a estar diseñando algo aquí en XD, también vamos a ser prototipado. Y lo que pasa con clonar cosas aquí dentro del XD es que si lo estás haciendo ya sea simplemente agarrando y arrastrando algo con la tecla Alt seleccionada y bien presionada. O si estás usando la rejilla de repetición, también vas a ser como no clonar los elementos prototipo que se asignan a un elemento específico. Porque queremos trabajar no duro sino inteligente, creo que sería buena idea guste la primera característica prototipo a nuestro elemento y luego clonarla con esa característica prototipo añadida a ese elemento. Entonces simplemente significaría que estaríamos trabajando un poco más rápido y un poco más inteligente. Así que en realidad aprendamos a agregar los elementos de prototipado en el siguiente video. 25. Vamos a hacer prototipos de nuestro primer elemento: Así que empecemos a sumar en nuestro primer prototipo en función. Y lo vamos a hacer con simplemente cambiar el color de este enlace casero cuando simplemente alguien está rondando sobre él. Y con el fin de agregar algunas características de prototipado a un elemento. Y aquí dentro de XD, necesitamos convertir ese elemento en un componente primero. Y podemos hacerlo aquí en el Inspector de Propiedades simplemente haciendo clic este símbolo plus en esta pestaña de componente. O si lo desea, puede utilizar el atajo Control más K. Por lo que sólo voy a hacer clic en él. Y como pueden ver, ahora tenemos nuestro componente y también aparece aquí mismo en nuestros componentes, en el documento, en los activos documentales. Entonces, ¿qué es un componente? Componente básicamente es un elemento aquí en XD que le permite agregarle algo de interactividad. Esa interactividad puede ser como pasar el estadizo o tal vez como cambiar la apariencia. Estoy cambiando la posición, todas esas cosas. Y esos se pueden hacer dentro de 11 componentes o una serie de componentes. Ahora, nuestro primer componente va a ser ultra, ultra simple. Todo lo que realmente necesitamos es cambiar el color de nuestro enlace cuando pasamos el cursor sobre él. Y esto es como el comportamiento típico de un enlace en un menú que verías en un sitio web. Entonces en nuestro estado de incumplimiento, nada cambia. Esto es sólo un avión como un gris muy, muy oscuro. Básicamente texto. Voy a hacer click en este símbolo plus que dice Agregar estado. Y aquí quiero sumar el estado de hover. Entonces, por supuesto, puedes cambiar su nombre si quieres. Pero creo que ese estado de hover es bastante autoexplicativo y solo hace el truco aquí. Entonces en nuestro estado de hover, como mencioné antes, todo lo que necesitamos es simplemente cambiar el color. Y podríamos usar el mismo color azul que tenemos en nuestro logo. Entonces este color azul. Pero también podemos usar otro color justo ahora, solo para agregar alguna variedad, solo para que entiendas lo que está pasando aquí un poco mejor. Entonces en el estado de hover, sólo voy a hacer que el texto se lea así. Estado por defecto. Permítanme simplemente acercar. Entonces por defecto estado gris, estado de flotar rojo. Y podemos comprobar y entender esta funcionalidad un poco mejor una vez que golpeamos eso, una vez que golpeamos la vista previa del escritorio. Así que ahora si pongo sobre este tipo, se puede ver que se convierte en, se vuelve rojo así. Ahora, si está utilizando la vista previa del escritorio y si desea comprobar el estado de desplazamiento o cualquier otro estado, solo recuerde volver primero al estado predeterminado de un componente específico. Porque si vuelves al estado de desplazamiento y luego si hacemos clic en la Vista previa, siempre vas a ver este estado de hover en OB y como activada activa. Y no vamos a poder simplemente ver el efecto flotando. Así que solo recuerda volver al estado predeterminado cuando quieras previsualizar algo. Entonces como dije, supongo que ahora, ahora es una buena, es un buen momento para tutelar para convertir este componente en una rejilla de repetición. Por lo que sólo voy a hacer clic en Repetir Cuadrícula. Y cuando hacemos eso, se puede ver que aquí tenemos básicamente dos opciones que nos permiten o repetir a este tipo verticalmente así, que no queremos. Quiero decir, no estamos construyendo un menú vertical ni repetimos a este tipo horizontalmente, así, y sólo tenemos que decidir cuántos enlaces queremos. Ahora, normalmente lo estarías, si no estuvieras construyendo este sitio web por ti mismo, obtendrías algunos punteros de tu cliente. Pero digamos que queremos tener un Blog Inicio, Contact portfolio y sobre Nosotros, algo así. Así Inicio Blog cartera sobre nosotros y póngase en contacto. Entonces un eslabón más como ese. Y ahí vamos. Esta es nuestra, esta es nuestra navegación. Tenemos que cambiar la longitud. Pero si acabamos de previsualizar a este tipo, se puede ver que todo eso como prototipo nueva funcionalidad se clona con el, con las películas de diseño. Entonces ahora, supongo, creo que podríamos simplemente agarrar nuestra rejilla de repetición y podemos desagruparla. Y como pueden ver, aquí tenemos todos estos componentes. Entonces estos son todos los enlaces que tenemos. Así que sólo voy a agarrar este primer componente y lo voy a llamar hogar. El siguiente se va a llamar blog así. A éste se le va a llamar cartera. Este va a ser como sobre nosotros, Acerca de Nosotros. Y éste va a ser algo así como tacto Kong. Y por supuesto, todos estos elementos siguen siendo componentes, por lo que tienen el estado de desplazamiento y ese estado predeterminado. Si ahora solo queremos agarrarlo, esto como este enlace de blog aquí mismo. Y solo queremos cambiar este texto de casa a blog. Observa que si vas al estado de hover, aún tenemos ese texto anterior. Entonces no sólo en el estado de hover, el gen del color, sino también tenemos un texto separado para ese estado de hover. Por lo que aquí, también tenemos que simplemente escribir en el blog. Entonces ahora si vamos al componente y al estado predeterminado sólo que el color cambia. Entonces esto es, esto es algo que tienes que saber dejes tener en cuenta. Recuerdo que cuando estaba aprendiendo esto, el vendedor, esta característica, estaba realmente tan confundido. ¿ Por qué, por qué no está cambiando como la forma en que quiero que cambie porque ahora, ¿por qué funciona así? Y entonces acabo de darme cuenta del hardware que tienes que conocer, tendrás que cambiar estos elementos en todos los estados porque si no lo haces, vas a conseguir algunas sorpresas desagradables. Entonces el Sobre Nosotros, voy a ir al estado de hover y voy a escribir sobre nosotros así. El último se suponía que era el contacto. Así que voy a cambiar esto para contactar así. Y por supuesto lo mismo va a ir por el estado de hover. Por lo tanto contacto. Ahí vamos. Y vamos a ver, predeterminado, estado predeterminado. El color cambia, solo cambia el color y solo cambia el color. Solo queremos advertir que quieres cambiar, cambiar el color, no el texto. Lo último que hay que hacer aquí sería simplemente agarrar tal vez nuestro diseño, como nuestra, nuestras columnas. Y sólo voy a unir a este tipo al lado derecho y tal vez simplemente mover a estos tipos un poco a un lado. Tal vez en algún lugar de aquí. Y luego voy a seleccionar todos estos componentes. Y sólo voy a usar este elemento justo aquí que dice distribuir horizontalmente. Y si hago eso, se puede ver que nuestra, nuestra navegación está simplemente muy bien, bien, muy bien distribuida. Por lo que ahora podemos simplemente agarrar todos estos elementos y simplemente no ver cómo está funcionando esta funcionalidad. Y podemos ver que tenemos este bonito, básicamente muy bonito efecto de hover, supongo. Y lo que es más, más importante, vamos a aprender a usar eso. Bueno, básicamente, cómo agregar las primeras características similares de prototipado a nuestros elementos. Así que ahora puedo, ahora supongo que simplemente podemos gustar agarrar todos estos elementos. Voy a agruparlos. Voy a presionar Control G en mi teclado. Y sólo voy a llamarlo navegación así. Y esta Tiffany Jones. Sólo voy a llamarlo logo. Ahí vamos. Ahí vamos. Básicamente tenemos nuestros primeros, primeros elementos de encabezado, completos. 26. Vamos a agregar el estado activo y los primeros elementos héroes: Antes de pasar a sumar como algunos Elementos Héroe, selecciona la imagen, tal vez algún fondo y algunos como principal, encabezado principal, llamada principal a la acción, todas esas cosas. Creo que es importante entender una cosa. Y esa cosa son los estados activos. Y en realidad no estoy hablando de las características de prototipado aquí dentro de XD, sino algo que es importante en carecía del mundo del desarrollo web y del diseño web también. Y esa cosa es importante desde el punto de vista de la usabilidad, un punto estándar o punto de vista UX. Entonces en tus diseños, vas a tener, vas a tener que indicar a los usuarios qué elemento es actualmente. Digamos como si estuviera funcionando como si estuviera activo en este momento. Y en este caso, en este caso específico, cuando estamos hablando de nuestra navegación, queremos indicarles, bueno, queremos decirles a los usuarios en qué página se encuentran actualmente. Entonces en este caso se encuentran actualmente en la página de inicio, ¿verdad? Por lo que tendríamos que decirles a los usuarios que esta es la base en la que se encuentran actualmente. Y por lo general se va a indicar de la misma manera o usando los mismos atributos los enlaces que se están volando o algo así. Entonces en mi caso, sólo voy a agarrar el enlace de casa. Y quiero, solo quiero denotar, cambiar el color del texto de este gris. Déjame simplemente volver a mis activos, a esto a este color rojo que tú bien, usamos hace apenas un segundo para crear el estado de hover. Entonces si ahora sólo vamos a nuestro diseño, se puede ver que tenemos nuestro enlace casero siendo como muy bien indicado por este color rojo. Y luego cuando pasamos el cursor sobre estos elementos, puede ver que están muy bien estado, bueno, cambiaron los colores cuando se cierran así. ¿ Sabes qué? Cuando lo estoy mirando, edita la luz en este momento, creo que voy a cambiar rápidamente el color de esto, de este texto justo aquí solo para mantener las cosas consistentes y tal vez va a ser solo un poco más llamativo. Déjame ver. Sí, va a estar bien. Supongo. Sé que es, es algo genérico. Pero no, se trata más de aprender XD, aprender a diseñar y prototipo en lugar de cómo hacerlo el mejor diseño del mundo. Así que está bien, tenemos el logo, tenemos la navegación. Ahora vamos a añadir nuestra imagen. Y como ya sabéis, esta es esta imagen de aquí mismo. Y supongo que debería haber guardado esa imagen antes. Así que déjame simplemente rápidamente otra vez agarrar el Rectángulo. Sólo voy a enmascarar muy, muy rápidamente esta imagen así. Voy a ir a mis capas. Voy a agarrar este rectángulo y la imagen, y voy a presionar Control Shift M en mi teclado para simplemente enmascararlo. Así que ahora sólo podría entrar, tal vez ponerlo en algún lugar aquí. Así que ahora lo que quiero hacer es simplemente quiero agregar, tal vez sólo voy a hacer un poco más grande. Simplemente voy a añadir tal vez como un, como un fondo aquí mismo. Y para eso, solo voy a agarrar la herramienta de la pluma. Y simplemente voy a marcar algunos puntos y estoy presionando la tecla Shift, voy a tratar de encontrar estos bordes aquí mismo. Por supuesto, siempre podemos, siempre cambiarlo un poco más tarde, tal vez en algún lugar aquí. Y entonces solo voy a cerrar la forma para que parezca algo así. Y quiero llenarlo con mi color de tono de piel. Y por supuesto, este tipo tiene que ir todo el camino hacia atrás. Por lo que voy a agarrarlo y presionar el turno de Control más izquierda, Soporte Izquierdo. Entonces teclado, tecla en mi teclado. Y ahí vamos. Tal vez, tal vez éste sea un poco demasiado, demasiado grande. Esta imagen es de ella demasiado vaga, algo así, y vamos a moverla ligeramente hacia un lado. Ahora vamos a prever nuestro, nuestro diseño. Entonces empieza, empieza a verse bastante bien. Ahora por supuesto, no tienes que hacer como un fondo como este, pero se está convirtiendo en una tendencia de diseño común. Podrías simplemente agregar un simple como un rectángulo. No tienes que hacerlo también. No. Tengo que hacerlo como no lo sé. Es una trampa ya que tengo trapecio o algo así. Pero ahora es sólo una, creo que es sólo un bonito toque de diseño. Y también nos permite tener un poco más de espacio, como aquí a la izquierda para agregar algo así como, Hola, soy Tiffany, soy diseñadora. Gracias por pasar por aquí para conocerme esas cosas. Pero antes de que en realidad sumemos todos esos elementos, todavía tenemos que hacer una cosa. Es decir, tenemos que cuidar la capacidad de respuesta de nuestros diseños hasta ahora. Y lo más importante aquí es cuidar la capacidad de respuesta de nuestro menú. Y bien por hacer eso, vamos a tener que agregar una diferente una separada, un tablero de arte separado. Y por supuesto, añadir bien construido un menú completamente nuevo en realidad. Pero ¿sabes qué? Empecemos a hacer eso en el siguiente video. 27. Empecemos la versión móvil del diseño: Entonces para sumar nuestro diseño móvil, necesitamos tener algo para ponerlo, ¿verdad? Por lo que necesitamos una nueva mesa de trabajo. Entonces para eso, solo voy a agarrar la herramienta Artboard. Y desde los presets móviles, creo que voy a ir con el iPhone 13, Twelve Pro. Y no quiero que sea frío así. Voy a ir a mi panel de Capas y notar que ya tenemos esto, bueno, este nombre se presenta aquí mismo. Entonces conseguimos nuestra mesa de trabajo Página principal, conseguimos nuestro iPhone 13, 12th Pro casa bien, mesa de trabajo. Así que sólo voy a llamarlo un móvil doméstico así. Antes de que por supuesto añadamos la navegación, voy a agarrar el logo. Y simplemente voy a agarrar esta mesa de trabajo es mesa de trabajo móvil casa. Y aquí también podemos usar el diseño de cuadrícula. Y si ahora pegamos a ese tipo y se puede ver donde tenemos que adjuntarlo. Entonces para significar hacia el lado izquierdo, izquierdo. Y creo que es un poco demasiado grande. Vamos a probar algo así como 18. Y ahora vamos a deshacernos de la superposición. Y quizá hasta preestemos a este tipo. Creo que debería quedar bien. Y también antes en realidad añadimos esa navegación aquí tenemos dos. Creo que sería una buena idea sumar nuestros antecedentes, este fondo aquí mismo. Antes de hacer eso, antes de sólo copiar eso, se puede ver que no creo que haga clic en mi correctamente aquí mismo. Y podemos arreglarlo fácilmente. Entonces con esto, lo que la herramienta selecta activa, lo que podríamos hacer es que simplemente podríamos hacer doble clic dentro una forma y tal vez nada realmente pase. Pero se puede ver que estos son como estos limitadores, estos cambios de cuadro limitador lo tienen. Se puede ver que tenemos estas líneas aquí indicando que acabamos de seleccionar toda la forma. Pero cuando hacemos doble clic en el interior, esos se han ido. Y ahora simplemente podemos agarrar los puntos de anclaje y simplemente moverlos. Entonces es básicamente como la herramienta Seleccionar se está convirtiendo en una herramienta como un punto de anclaje, algo, algo así. Déjame ir, Oh hombre. Es uno grande. Así que vamos a bajar aquí. Y sólo voy a moverla a algún lugar aquí. Y luego veamos, supongo que estos chicos estarán bien, pero tal vez deberíamos mover esto, este elemento un poco a la cima. Y veamos justo aquí, este tipo se ve bien. Ahora podemos tal vez en lugar de simplemente copiar a este tipo y luego jugar con esos puntos de anclaje, solo puedo agarrar todas las capturas móviles, agarrar la herramienta rectángulo. Y simplemente vamos a crear un rectángulo que se ha ido y que se extiende a través de toda nuestra primera pantalla dispersa. Por supuesto, no necesito la frontera. Solo necesito llenar y cuál sería la herramienta Cuentagotas que estoy inicializando presionando la tecla I, simplemente podemos probar ese color. Y de nuevo, voy a presionar el soporte izquierdo de Control Shift para ponerlo todo el camino a ellos, al fondo de la pila, que básicamente sería como usar el menú Objeto, arreglar y luego enviar a la espalda. Por lo que ahora tenemos que añadir nuestro ícono de menú aquí en el lateral. Y creo que la forma más fácil de hacerlo sería no agarrando la herramienta pluma y simplemente dibujar en todo nosotros mismos, pero podemos usar los iconos para el plugin de diseño para eso, el eigentlich, el plugin que ya conocemos. Y vamos a tratar de escribir algo así como el menú. Y como se puede ver, aquí tenemos todo tipo de menús diferentes y diferentes. Así que tal vez sólo voy a asegurarme de que estoy en la mesa de trabajo correcta. Vamos a probar este menú. No recuerdo el fondo, sino el menú. Vamos a probar otro. Este es un poco más pequeño, Definitivamente. Y éste creo que voy a ir con éste y ahora se ve bien. Por lo que ahora también podríamos cambiar el color de este menú para que coincida con nuestro, con nuestro logo. Pero si crees que es tan fácil como simplemente hacer clic en el color, bueno, desafortunadamente no lo es. Es decir, se puede ver que la frontera está comprobada aquí mismo. Por lo que debería ser lógico que si solo hacemos clic en un color, ese color del borde deba cambiar. Es. Como se puede ver, no funciona así. Creo que lo que sugeriría es simplemente agarrar el menú de objetos, ir a la ruta, y simplemente elegir Esquema Trazo, que haría que todos estos elementos se conviertan caminos llenos en lugar de simplemente no fronteras. Y como puedes ver ahora, en esto, el Inspector de Propiedades, obtienes el relleno seleccionado. Y ahora podemos realmente cambiar este color a algo que coincida con nuestro, nuestro logo. Podríamos elegir el color rojo, podríamos elegir No, como este color gris. El punto es aquí que a veces si no sabes por qué algo está funcionando como en el caso de estos, estos iconos, tal vez sea una buena idea simplemente intercambiar los trazos con los rellenos a Además, este momento se puede ver que si mantengo presionada la tecla Shift, no íbamos a tener ningún problema con como cambiar el tamaño de este ícono. Y tendríamos problemas con si solo puedo mostrarte lo que quiero decir. Si vuelvo a gustarme, solo voy a agregar este menú. Voy a moverlo. Si ahora solo trato de agrandarla o hacerla más pequeña, se puede ver que estamos perdiendo eso. Bueno, en realidad ahora estamos distorsionando las distancias entre ellos, entre estos elementos de este menú de hamburguesas. Obtenemos este menú justo aquí. Permítanme simplemente comprobar rápidamente si todo está muy bien alineado a la rejilla. Como se puede ver no lo es. Entonces lo voy a trasladar a algún lugar aquí. Y de nuevo, voy a agarrar el logo y asegurarme de que todo esté bien, esté muy bien alineado. Entonces conseguimos el logo, conseguimos el menú, y tenemos el fondo. Así que ahora supongo que ya es hora de simplemente agregar nuestro menú como un móvil, móvil que dispararíamos una vez hacemos clic en este ícono del menú de hamburguesas. 28. Vamos a agregar el menú móvil: Así que ahora construyamos nuestro menú. Entonces para eso, creo que simplemente voy a reutilizar lo que ya tengo. Quiero decir, necesitamos un tablero de arte separado para que este efecto funcione correctamente. Así que sólo voy a agarrar toda esta mesa de trabajo móvil y simplemente la voy a duplicar. Ahora, no voy a necesitar este logo aquí mismo. Por supuesto, tampoco voy a necesitar este ícono de menú. Así que simplemente voy a ir a mis iconos para el plugin de diseño. Y aquí, sólo voy a tratar encontrar algo así como un botón de cierre. Creo que éste debería estar bien, éste debería ser suficiente. Y simplemente lo voy a mover a algún lugar aquí. Entonces solo coincide con este ícono, como el icono del menú principal del que por supuesto me voy a deshacer. Entonces esta es mi like a super, super simple, como una estructura de huesos desnudos de nuestro menú móvil. Y voy a llamar como el menú móvil activado o tal vez superponer así. Pero por supuesto, no tiene que parecerse a nuestro fondo principal aquí mismo. De hecho, creo que me gustaría que no sea tan significativo. También sólo para ahora mostrarte cómo, um, cómo estos pronto vienen en interacciones, cómo se verían. Entonces voy a ir a mis activos y creo que voy a cambiar el montículo como el color de fondo a este color azulado. Y también voy a cambiar los colores, el color de esto, este símbolo cercano. Quizá revise cómo va a lucir este tipo. Creo que va a quedar bien. Ahora vamos a construir rápidamente nuestros enlaces. Por lo que tenemos cartera de blog casa sobre nosotros y contacto. Así que permítanme simplemente rápido, tratar de escribir rápidamente eso en. Entonces en casa. Y hagámosme revisar este color. Este bucle debería verse bien. Y quizá hagámoslo un poco más grande, algo así como 22. Por lo que va a ser el blog casero. Yo sé qué, vamos simplemente rápidamente a Repetir Grid Home Blog. Entonces va a ser portafolio, Bowers y contacto. Por lo que 12345 en total, simplemente podemos no, acaba de cambiar los enlaces. Entonces en casa. Había blog de lo que era creo que era cartera de lo que era sobre nosotros. Y por último, tenemos contacto así. Y ahora solo voy a desagrupar todos estos elementos. Y si quieres, puedes dejarlos así, o simplemente podrías simplemente alinearlos al centro. Y tal vez podamos agruparlos. Entonces estoy presionando Control G en mi teclado porque ahora si acabamos de alinear presidente medio de verticalmente, es este grupo va a estar alineado en relación a nuestra mesa de trabajo subyacente. Entonces tenemos nuestra superposición de menú móvil, y tenemos nuestro primer logo y este ícono de menú. Y conseguimos nuestro segundo tablero de arte con solo el efecto de superposición de menú móvil. Pero claro aún tenemos que entrar a ese afecto conoció a Ted algún tipo de interacción entre este ícono y el menú móvil y el ícono de divulgar y nuestra pantalla primaria, primaria. Así que voy a ir al panel prototipo. Y como aquí, lo que quiero hacer es que quiero hacer este ícono y cuando se activa, cuando, bueno, cuando tocado, quería que me gustara abrir este menú. Primero. Voy a tratar de seleccionarlo. Supongo que va a ser más fácil seleccionarlo aquí. Y como se puede ver, tenemos este pequeño, el pequeño marcador que aparece. Y simplemente podemos agarrarlo y llevarlo a nuestra superposición de menú móvil. Y como se puede ver, ya creó una animación para nosotros, así que tenemos un gatillo configurado para tocar. Podemos cambiar el tipo de esta animación de transición a auto animate y u otra. Usualmente uso auto animate. Sólo se ve lo más bonito, supongo. Entonces esta es una forma de hacerlo, pero también puedes agarrar el ícono, seleccionar este ícono, revelar ícono. Y entonces podemos apenas desde este Inspector de Propiedades, sin siquiera tocar esta flecha azul blanca, blanca contra el fondo azul, podemos elegir la pestaña. Pero primero tenemos que establecer la interacción AD, y luego tenemos los mismos elementos. Por lo que obtenemos, podemos agregar el auto animate y luego podemos simplemente elegir el tablero de arte, que en nuestro caso es el móvil de casa. Si ahora acabamos de iniciar esta funcionalidad de vista previa, déjame ponerla a la cima. Se puede ver que ahora todo está funcionando correctamente. Entonces cuando hacemos clic en este icono de menú, se puede ver que este elemento de superposición, superposición mesa de trabajo en realidad está apareciendo muy bien. Entonces todo está bien y bien. Todo está funcionando. Pero a mi gusto ellos, es un poco aburrido. Quiero decir, en estos días se pueden ver tantas opciones diferentes como superposición como las interacciones entre, como el menú de superposición y el icono que lo está activando. Así que vamos, vamos a ver en realidad cómo podríamos al menos imitar esas interacciones aunque era formas más modernas de mostrar una superposición de menú móvil. 29. Aprendamos una mejor forma de animar el icono del menú: De acuerdo, entonces sabemos cómo crear transiciones entre básicamente tableros de arte. Pero como mencioné antes, creo que eso es, bueno, eso se rompió a lo moderno. Eso fue, eso es un sabor un poco aburrido al menos. Así que en realidad hagamos algo más divertido. Permítanme que apague eso. Y voy a estar reutilizando algunos de estos elementos, pero la mayoría de ellos, bueno, algunos de ellos ya no voy a necesitar, así que sólo voy a agarrar este fondo y esto como este menú. Y lo voy a poner tal vez en algún lugar aquí. Por ahora. No voy a estar usando esto bien, toda esta mesa de trabajo en realidad, así que sólo voy a quitarla. También voy a deshacerme de este ícono. Sólo quiero empezar desde cero. Lo que voy a hacer es que yo mismo voy a crear un menú, icono de menú. Entonces voy a crear como, tal vez algo como esto. Entonces es sólo un simple rectángulo que voy a llenar con el color apropiado como ese. Y quiero que este tipo tenga como esquinas redondeadas. Vamos, digamos algo así como 50. Pero tal vez la altura seis es un poco demasiado. Veamos, tres. Esto debería estar bien. Y entonces sólo voy a presionar y mantener la tecla Alt para simplemente imprimir este tipo está en algún lugar aquí. O también podríamos simplemente usar la opción Repetir Cuadrícula para solo crear dos elementos más. Y entonces podemos simplemente como hacerlo algo como esto. Déjame ver. Se ve un poco bien, Aunque tal vez sea un poco demasiado grande así que podemos simplemente desagrupar estos elementos y simplemente hacer que este tipo sea un poco más pequeño. Esto debería ser suficiente. Ya sabes, simplemente no quiero dividir los pelos aquí, pero sí quiero encender ese trazado y solo quiero, déjame solo agarrarlos y los voy a poner en algún lugar aquí. Esto debería ser, esto debería estar bien. Entonces lo que quiero hacer aquí, sí quiero crear una transición entre así, como todo este estado que sería desencadenado por este ícono y este estado aquí mismo, que básicamente es nuestro fondo y nuestros, y nuestros vínculos. Entonces para hacer eso, primero, voy a agrupar tal vez estos elementos y los voy a llamar como icono del Menú Principal. Ahí vamos. Y quiero que sea como arriba justo aquí. El siguiente paso sería agarrar así, este menú. Agarra estos elementos. A lo mejor los agruparé también. Así que de nuevo, este menú y esto, este tipo de aquí mismo, y voy a crear un componente a partir de estos dos elementos. En el estado predeterminado. Este menú de aquí mismo se ha ido. ¿ No podemos verlo bien? Pero también podemos sumar un nuevo estado que voy a llamar como tal vez, no lo sé, tocado y en este estado y este tipo, déjame agarrar a todo el grupo. Este tipo va a ir hasta aquí abajo. Entonces se va a cubrir todo. Pero tiene que ser así, este ícono. Así que de nuevo, el estado predeterminado como este, mantenido así. Pero en el estado tocado, también quiero cambiar este ícono aquí mismo. Déjame simplemente deshacerme de estos elementos. Sólo quiero convertir estos 33 marcadores tres, básicamente tres líneas. Entonces estos, déjame justo, déjame simplemente abrir este grupo. Entonces estos elementos, quiero convertirlos como un símbolo X. Y para hacer eso, voy a agarrar este medio y voy a dejar caer su opacidad todo el camino a 0, pero también voy a cambiar su color de relleno. Déjame volver, ir a mis bienes. Y luego voy a agarrar este elemento. Voy a volver a mi capa. Entonces esta es, esta, esta línea. Básicamente, lo que quiero hacer es que quiero girar y por rotar por 45 grados, creo. Y quiero ponerlo como derribarlo un poco. Por lo que voy a aumentar este y valor. Y luego voy a agarrar este elemento de fondo. Y también voy a rotar, pero creo que voy a tener que rotarlo por menos 45. Y este tipo tiene que subir un poco. Déjame simplemente, déjame simplemente acercar. Vamos a ver a algún lugar aquí. Y por supuesto que también necesitan tener sus colores cambiados. Por lo que voy a ir a mis activos documentales. Y de nuevo, este rectángulo de nuevo Document Assets. Y así tenemos algo como esto. Así que déjame volver a mis componentes. Entonces capas componente N, estado predeterminado como este, y luego tocado estado como este. Y también es importante el posicionamiento de estos elementos, también es importante porque esto, este menú de superposición viene de la parte superior, en este caso, a la derecha. Pero podemos jugar con él en tan solo un segundo. Voy a agarrar este componente, ¿verdad? Y voy a ir a tal vez llamémoslo como menu f x, así. Y voy a ir al prototipo. Y en mi espacio de trabajo prototipo, solo voy a tratar de encontrar este icono del menú principal. Y de nuevo, sólo voy a, lo que quiero es que quiero asegurarme de que todo esté muy bien alineado. Así que voy a agarrar este ícono del menú principal y quiero ponerlo, quiero ponerlo encima de mi top de mi stack aquí mismo. Y quiero que sea lo mismo por defecto y para tocado. Así que vamos a ver. Sí, vale, así que está bien. Así que de nuevo, espacio de trabajo prototipo predeterminado. Y en el estado predeterminado, de nuevo, solo voy a tratar de encontrar mi icono de menú principal. Y quiero darle un gatillo por bien, que va a ser un tap auto animate. Pero aquí podemos, como pueden ver, elegir entre un tablero de arte en un estado para el estado que quiero elegir tocado. Y luego voy a ir a mi, vamos a volver al espacio de trabajo de diseño. Y luego voy a ir a mis estadías golpeadas prototipo estatal. Y en este estado, solo quiero encontrar mi icono principal, de menú principal. Quiero agregar un disparador de tap, que me va a llevar de vuelta a mi estado predeterminado. Y de nuevo, voy a volver a Diseño. Hay mucho clics, pero realidad eso es bastante importante aquí. Entonces. Ahora, si acabamos de previsualizar nuestro diseño, si ahora tocamos a este tipo, se puede ver que tenemos así, como esta bonita animación. Así que básicamente los estamos haciendo como esta línea media, media, la línea del menú medio justo aquí para simplemente desaparecer. Y estamos haciendo que todos esos elementos como esos, esos marcadores restantes simplemente se conviertan en símbolos x o están girando y están cambiando ese color. Y en realidad eligiendo el, volvamos a volver al prototipo. Elegir la función auto animate aquí es en realidad bastante importante porque simplemente, solo hace que todo sea mucho más agradable. Por supuesto que puedes jugar con la flexibilización. A lo mejor no sé si quieres. Puedes elegir como los límites si quieres. Y entonces quizá podamos comprobar si va a cambiar algo. Sí, pero si es mejor, no estoy seguro. Pero ya sabes, siempre puedes, siempre jugarás con él. Como mencioné, también es importante el posicionamiento de nuestros elementos. Entonces, por ejemplo, si quieres que sea aún más cool buscando, podríamos dejarme simplemente agarrar mi componente en el estado predeterminado. Podríamos agarrar así a todo el grupo y simplemente moverlo a algún lugar aquí así. Y ahora, si sólo despedimos nuestra animación, se puede ver que es como entrar de arriba, arriba a la derecha, algo así. También podríamos, por ejemplo, jugar con la opacidad de algunos estados. Entonces en este estado predeterminado, mi trasfondo es el fondo del grupo y sé qué, déjame llamarlo fondo. Este antecedente. Es opacidad se establece para anotar al 100 por ciento, pero podemos llevarla todo el camino hasta el 0 por ciento. Pero cuando volvemos a nuestro estado aprovechado, estos antecedentes, opacidad necesita remontarse al 100 por ciento. Entonces si ahora solo volvemos al estado predeterminado y ahora activamos nuestro menú, se puede ver que este efecto de opacidad también está ahí. Es muy, muy sutil, pero lo es, está ahí. Ahora. Creo que me gustó más cuando este hombre que venía de, como de arriba. Entonces para mi estado predeterminado, solo quiero moverlo. Déjame volver a mis antecedentes. Quiero moverlo a algún lugar aquí, y quiero volver a traer la opacidad al 100%. Ahora también, si quieres hacer las cosas aún más interesantes, podrías, por ejemplo, jugar alrededor de la rotación. Así que si solo agarro mis antecedentes en el estado predeterminado, podríamos, por ejemplo, rotar a este tipo. Qué Hagamos 360. Sé que no vamos a ver un cambio se puede cambiar aquí porque es un círculo completo. Pero entonces solo nos aseguremos de que esto esté configurado en 0 cuando volvamos a nuestro estado golpeado. Entonces BG se estableció en 0. Vayamos a, volvamos al estado predeterminado. Y veamos si eso realmente hace alguna diferencia. Como pueden ver, tenemos aversión, funky poco como bolígrafo de rotación pasando aquí mismo. Podría ser un poco demasiado. Tal vez nos podría gustar cambiarlo de tres-dieciseisavos para decir como 118. Y creo que va a funcionar muy bien. Todavía tendremos algunas cosas como algunas cosas funky pasando, pero no lo es, no lo es, creo que no es demasiado. Espero que no sea demasiado. Pero de todos modos, así es como también se puede crear un efecto de transición como este o hacer clic en un hecho aquí dentro de X, Z y medio para simplemente moverse entre, entre varias, diversas mesas de trabajo diferentes. Puedes hacer todo dentro, dentro de un componente, no solo agregando como esas interacciones entre mesas de trabajo aquí dentro de tu diseño de prototipo, sino simplemente agregando interacciones entre elementos dentro de un componente. 30. Vamos a agregar más elementos para héroes: Ahora agreguemos un poco más como Héroe Elements. Y voy a traer de vuelta esta rejilla de diseño. Lo que quiero hacer es simplemente quiero saber, hacer algo así como una breve introducción. Entonces voy a agarrar la herramienta de texto y voy a escribir algo así como hola ahí. Soy yo soy algo así. Y entonces sólo voy a ponerlo como rojo. A lo mejor voy a hacer que sea un poco más pequeño. Así que vamos a gustar 18. Y creo que tal vez voy a aumentar el seguimiento aquí mismo. Hagamos algo como tal vez dos. Puede que no sea suficiente, eso es como 20 o tal vez incluso como 60. Ahora vamos a dejarlo a los 60. Esto debería estar bien. Y luego por supuesto que necesito escribir el nombre. Así que tal vez clonemos a este tipo aquí mismo. Y voy a hacerlo significativamente más grande. Y sólo voy a cambiar este color al mismo. Entonces creo que va a ser de este color. No estoy seguro. Déjame apagar a este tipo. Sí. Entonces tenemos que hacerlo tal vez así o así. Ahí vamos. Y ahora hagamos algo así como un, como un subtítulo, algo así. Así que sólo voy a pedir prestado a este tipo. Y voy a escribir algo así como diseñador gráfico freelance. Y voy a hacerlo significativamente más pequeño, algo así como 16 o 18 debería ser suficiente. Voy a ponerlo en algún lugar aquí. Tal vez sólo un poco hasta el fondo. Y ahora vamos a crear algo así como un cuadro de texto aquí para nuestros textos de Lorem Ipsum. Sólo voy a crear un rectángulo. Va a estar buscando más o menos así. Y desde nuestro plugin Lorem Ipsum, solo voy a añadir algo de Lorem Ipsum. Ahora por supuesto, necesitamos cambiar este texto para que coincida básicamente con nuestro documento. Así que vamos a tratar de cambiarlo a nuestra fuente. No estoy seguro si esto está bien, um, creo que es un poco vamos también a cambiar esta altura de línea de 18 a algo como tal vez 26. Esto se va a quedar un poco mejor así. Por último, quizá agreguemos un botón aquí abajo. Entonces para hacer eso, solo voy a agarrar la herramienta rectángulo, crea algo así como un botón con algunas esquinas quizás redondeadas también. Vamos a intentarlo como tal vez 48. Y solo quiero que la gente aprenda más. Así que sólo voy a pedir prestado a este tipo. Y voy a escribir algo. O tal vez voy a pedir prestado, bueno, veamos cómo va a verse. Voy a pedir prestado a este tipo. Y voy a escribir como aprender más. Y lo vamos a poner en algún lugar en el medio. Y quizá cambiemos el color de este tipo para que le guste este azul. Esto debería ser suficiente. Esto debería estar bien. Y vamos, hagamos tal vez estas pilas como blanco liso. Así que vamos a cambiar el color a blanco y ponerlo en algún lugar aquí. Y quizá nos aseguremos de que todo esté muy bien alineado con el centro. Creo que se ve bien. No quiero seleccionar pelos partidos aquí, pero también me gustaría añadir algo de interactividad a mi, a mi botón. Y supongo que sería nuestro como nuestro botón primario aquí. Por lo que sólo vamos a agarrar ambos elementos y tal vez voy a agruparlos y voy a convertirlos en un componente. Déjame solo revisarlo en mi, en mi panel de capas. Entonces va a ser como Saber más btn. Y sólo quiero agregar un estado de hover. Ahí vamos. Y en este estado de hover, mis botones simplemente van a cambiar. Es como este color de fondo a tal vez este color rojo. Así que cada vez que alguien pasa el cursor sobre este botón, así que vamos a prever eso. Simplemente va a cambiar el color. Y tal vez sólo voy a hacerlo un poco más pequeño. Voy a hacer que se vea algo así. Y ahora vamos a prever. Se ve bien. Yo sólo, simplemente no quiero que me gusten los pelos partidos aquí. Esto no es como lo más importante aquí mismo. Supongo que ya entiendes cómo agregar este tipo de interactividad. Ahora supongo que lo siguiente que hay que hacer aquí para terminar en esto, esta parte sería agregar como íconos de redes sociales, como tal vez en algún lugar aquí en la parte inferior. Pero vamos, hagámoslo en el siguiente video. 31. Vamos a agregar los íconos de las redes sociales: Entonces ahora agreguemos los iconos de las redes sociales. Y creo que la forma más fácil de esto sería simplemente agarrar los iconos para plugin de diseño y simplemente podríamos escribir en Facebook. Yo sugeriría mantener, mantener sus iconos como iconos de redes sociales, como dentro de un conjunto. Así que si quieres utilizar Awesome Font Awesome, solo puedes usar Font Awesome. Si quieres usar iconos de iónicos o de cualquier otro, ya sabes, te aconsejaría que simplemente mantengas tus, tus iconos consistentes. Así que tal vez vayamos con lo sencillo. No sé por qué me gusta. Tal vez porque es simple. Este icono de Facebook. Y voy a, voy a tratar de ponerlo aquí abajo, tal vez en algún lugar, en algún lugar aquí abajo. Y voy a hacerlo más pequeño. Pero primero voy a asegurarme de que se revise esta relación de aspecto de bloqueo. Entonces no obtenemos ninguna distorsión cuando somos electrones formando nuestros activos. Así que ahora agreguemos Instagram. Este es este tipo de aquí mismo. Déjame sólo tratar de agarrarlo. Y mantengamos las cosas consistentes. Hagámoslo 24. Ahora agreguemos tal vez Twitter. Este es este tipo de aquí mismo. Nuevamente, altura 24. Tal vez agreguemos, agreguemos LinkedIn. Veamos si lo tenemos aquí. Nosotros lo hacemos. Entonces 24, pero bloqueemos la relación de aspecto. Entonces 24, supongo que tal vez podríamos sumar como Pinterest. ¿Lo tenemos aquí? Nosotros lo hacemos. Entonces hagamos otra vez Relación de aspecto, relación aspecto de bloqueo y 24. Oh, tenemos que hacer ahora es simplemente ponerlos a donde necesitan ir. Así que sólo voy a tratar de agarrar a todos y alinearlos al centro. Y tal vez vamos a distribuirlos para que se vean más o menos así. Voy a ponerlos tal vez aquí abajo. Y voy a traer, este patrón puede estar en algún lugar aquí. Esto va a saber, sólo vamos a estar usando más espacio que tenemos disponible aquí mismo. Y creo que todos estos iconos, déjame solo tratar de agarrar todos deberían tener, deben ser consistentes en su apariencia como en su apariencia primaria. Pero hagamos que se enciendan este gris claro. Esto va a lucir un poco mejor a mi gusto. Pero creo que sería un bonito toque de diseño, como un bonito toque de diseño si hiciéramos Estos chicos on hover cambian los colores para que coincida, al menos como vagamente emparejar los colores de su marca. Entonces para hacer eso, simplemente necesitamos convertir a estos chicos en componentes. Así que primero voy a hacer este tipo componente, vamos a llamarlo. Aunque supongo, supongo que es bastante autoexplicativo. Entonces el estado predeterminado de este tipo es como está, pero es estado de hover va a ser simplemente, déjame simplemente quizá agarrar este relleno y tratar hacerlo como más como Facebook, azul. Y este zapato. Creo que esto debería estar bien. Así que hagamos ahora Instagram. Creo que solo voy a usar algo así como color morado muy, muy claro. Como sólo un rosa loco. Esto debería ser, esto debería ser suficiente. Ahora para el Twitter de nuevo, Control K, crea un componente. Y vamos a crear un estado de hover. Y en el estado de hover, hagamos a este tipo como azul claro. Creo que esto es hover. Este es un, este es el color de Twitter, algo como esto. La mayoría de estos son, la mayoría de estas redes sociales. Los logotipos de redes sociales son más o menos parecidos en el reino de algo azul. Porque ahora cuando agregamos el color para LinkedIn, creo que también es así azul. Y luego hagamos Pinterest. Agreguemos un estado de hover desde Pinterest. Y creo que este tipo es, el logotipo es algo rojo. Esto debería ser, esto debería ser suficiente. Entonces vuelve al estado predeterminado ahora, LinkedIn, Volvamos al estado predeterminado, Pinterest también, y el estado predeterminado de Instagram. Así que ahora sólo vamos a prever a estos tipos. Como se puede ver cuando pasamos el cursor sobre estos elementos, simplemente cambian sus colores para coincida con más o menos los colores de la marca. Entonces, está bien, ahora tenemos algunos elementos como diseño. Tenemos algunos como prototipo afecta agregado. Y antes de llamarlo un día, al menos con esta sección de héroes, creo que sería una buena idea que acaba de terminar la capacidad de respuesta. Entonces tenemos dos en este momento. Basta con agarrar esta imagen y todos estos elementos y transformarlos o transponerlos a nuestra, a nuestra mesa de trabajo móvil, móvil. Pero hagamos eso en el siguiente video. 32. Hagamos que la sección principal sea responsiva: Entonces para que nuestra sección responda, básicamente lo que tenemos que hacer es simplemente agarrar todos estos elementos, estos elementos a la izquierda y a la derecha, y simplemente apilar aquí a la derecha. Entonces empecemos con estas piezas de textos. Sólo voy a agarrar a todos ellos. Al igual que estos tipos de aquí, sólo voy a copiarlos. Y en toda mi mesa de trabajo móvil, voy a encender la rejilla. Y sólo voy a pegar todos estos elementos. Así que simplemente podríamos tratar de hacer a estos chicos más pequeños así. Pero no creo que vaya a funcionar perfectamente. Si le agregamos la tecla Shift, se puede ver que empieza a verse un poco mejor. También sería una buena idea simplemente como no, alinearlos al centro. Entonces este tipo, así que el botón ahora, este texto, todos estos elementos aquí mismo. Sólo voy a alinearlos al centro. Se va a quedar un poco mejor. Creo que también este pedazo de texto tiene que estar centrado así. Voy a agarrar el botón, pero puede que sea en algún lugar aquí. Y permítanme simplemente apagar la visibilidad de este diseño. Y como se puede ver, como estos íconos, como estos chicos de aquí mismo, no son como los mejores visibles. Entonces creo que simplemente podríamos no, sólo por el estado predeterminado, tal vez como simplemente cambiar sus colores a algo así como muy, muy gris claro. Normalmente voy con un destino de 88. Ahora no me gustó este color. Y entonces solo tendremos que hacerlo por todos los demás. Entonces para el estado predeterminado, rellena, solo copia y pega este F8 afecta, afecta valor. Por supuesto que puedes. Puedes usar algún otro valor si quieres. Si crees que algún otro color simplemente se vería mejor. Pero creo que se ve, se ve decente. Y ahora solo podemos agarrar nuestra, esta, nuestra imagen, esta imagen de aquí mismo. Y entonces sólo voy a pegarlo. Y por supuesto que necesita ser significativamente más pequeño. Estoy manteniendo presionada la tecla Shift y simplemente la voy a poner en algún lugar aquí en el centro. Pero creo que también podemos usar esta vista como máscara de cultivo de suerte. Máscara de recorte más bien ser herramienta de recorte y tal vez hacerlo algo como esto solo para que sea más visible así. Y ahí vamos. Creo que se ve un poco, un poco bien. Entonces ahí vas. Así es como simplemente sabrías, hacer como versiones receptivas de tu al menos, tus secciones de casa. Básicamente lo que teníamos que hacer es crear como un menú móvil para nuestro, para nuestro sitio. Y luego acabamos de tomar todos los elementos de nuestro menú de sección, sección héroe, y luego los agregamos. Los apilamos en realidad verticalmente, como aquí, por lo que simplemente coinciden con nuestro, nuestro puerto de vista. Entonces el siguiente paso aquí sería simplemente empezar a sumar algunos como ningún punto principal de nuestro diseño, como tal vez algunos como algunos de nuestros servicios o cosas así. Entonces básicamente tenemos que empezar otra sección, pero hagámoslo en el siguiente video. 33. Empecemos la sección de elementos de equilibrio: Correcto, Así que tenemos la sección principal creada, tenemos la sección de héroes creada. Así que supongo que ahora podríamos empezar la siguiente sección. Y éste simplemente estará mostrando lo que podemos hacer por nuestros clientes. Por lo que simplemente queremos enumerar nuestros servicios. Y ya sabes qué, antes de que yo haga eso, antes sólo crea como un bonito fondo aquí mismo. Y tal vez antes simplemente tal vez me guste No mueva este lado hacia arriba para que podamos tipo de seguir esto, como este esquema de diseño aquí mismo. A lo mejor me gustaría encontrar un color diferente para esta sección. Entonces es como, como muy visualmente distintivo de la sección anterior. Porque aquí tenemos muchas cosas pasando. Tenemos todos nuestros colores principales, principales. Y en realidad si los miro, siento que tal vez haya algo que falta algo, algún acento en color, tal vez algo así como más vívido, algo más brillante. Y yo sólo, sólo quiero tratar de encontrar algo interesante. Entonces para hacer eso, sólo voy a copiar todos estos códigos hexagonales. A lo mejor no todos estos, pero como los más prominentes, como el azul, esto como el tono de piel y tal vez el rojo. Y entonces sólo voy a ir a coolers.co, pegarlos en, esos valores en y solo tratar de encontrar algo así como más interesante. De acuerdo, así que como dije, estoy aquí en coolers.co. Empecé el generador de energía. Sólo voy a empezar a traer los colores. Entonces primero este azul que sólo voy a pegar ese valor, n así. Y entonces solo quiero bloquear este color y luego el siguiente color, el tono de piel. Sólo voy a copiarlo. Y sólo voy a pegarlo en algún lugar aquí. Y otra vez, encierra a este tipo. Y el tercer color, por lo que este rojo. Sólo voy a volver a pegarlo, registrar a este tipo. Y ahora sólo podemos presionar el bar para intentar, para, tratar de encontrar algo, algo así como interesante. Creo que estos greens, ellos, en realidad podrían funcionar muy bien. Y no estoy seguro si me gusta este verde más oscuro o este verde más claro mejor. Entonces supongo que simplemente podemos copiarlos. Por lo que sólo voy a hacer clic Copiar hacks. Entonces voy a volver a XD. Así que aquí sólo voy a añadir ese color verde para gustar este oleaje básico, este fondo. Y sólo voy a añadirlo aquí mismo. Y voy a agarrar el segundo verde. Entonces este tipo de aquí, sólo podemos copiar el código. Y de nuevo, sólo voy a añadirlo a este relleno. Voy a volver a mis activos, aros una vez más y añadir esos verdes. Por lo que ahora tenemos esto, esto, bueno, esta nueva sección con un nuevo fondo. Y podemos estar seguros de que tanto como este verde más claro como este verde más oscuro, ambos trabajan con los colores de los que extraemos, básicamente de nuestra sección de héroes. Antes de decidirnos, en realidad vamos a ir con, solo voy a hacer doble clic aquí simplemente agarrar uno de estos puntos de anclaje. Y estoy manteniendo presionada la tecla Shift para hacer a Bill, igual que un viejo cerebro, este tipo sólo un poco arriba para tal vez como en algún lugar aquí. Y esto debería estar bien, déjame ver sólo si tengo todo correcto. Tal vez como en algún lugar aquí y sólo vayamos abajo. No estoy seguro si creo que se ve bien, Así que ahora podemos básicamente decidir si queremos, queremos este verde o tal vez este verde. Creo que voy a ir con éste. Es sólo un poco más como medios de vida, su poco más animado. Y porque estos colores son, o tal vez como un poco aburridos. Entonces creo que sólo podemos saber como amenizar las cosas con este color verde aquí mismo. Por lo que ahora simplemente podemos sumar como algunos como rho, ver mis servicios o cómo puedo ayudarte. Una especie de título y luego podemos sumar las tarjetas. Pero empecemos a hacer eso en el siguiente video. 34. Vamos a agregar los servicios: Por lo que voy a empezar con sumar el título. Así que sólo voy a agarrar la herramienta de texto. Y voy a hacer click en algún lugar aquí. Y sólo voy a escribir algo como cómo puedo ayudarte. Ahí vamos. Normalmente me gusta hacer como no, estos títulos que son un poco más como las expectativas de ningún cliente orientadas. Entonces un sub semi negrita, supongo que se ve bien, pero déjame ver que éste era medio, el medio aquí también. Tan medio como eso. Y voy a agarrar la Herramienta Rectángulo, y sólo voy a crear un rectángulo en el que sólo voy a añadir algo de texto. Entonces voy a tratar de encontrar mi Lorem Ipsum Plugin y solo voy a agregar algún texto así. Y de mis activos sólo voy a elegir esto cuanto antes 16, pero ya sabes qué, tal vez podríamos hacerlo como 22. Y aumentemos la altura de la línea a algo así como 30. Normalmente me gusta hacerlo. Para la altura de línea, generalmente me gusta el tamaño de fuente más seis u ocho. Ahora desde mi práctica, acabo de darme cuenta de que suele funcionar, funciona mejor en términos de legibilidad como. Y también, vamos a cambiar el relleno a simplemente blanco liso. Y hagamos que estos tipos se centren. Y tal vez sólo necesito como dos líneas de texto. Y voy a tratar de ponerlos en el medio. Así que sólo voy a usar esta opción Align Center. Voy a hacer lo mismo por este texto. Déjame ponerlos en algún lugar aquí. Entonces ahí vamos. Tenemos básicamente nuestro título. A lo mejor podemos hacer, hacerlo un poco, moverlo a la cima. Tenemos el título, tenemos el subtítulo. Por lo que ahora podemos simplemente añadir, como, como mencioné antes, algunas cartas. Y esas tarjetas simplemente serán como iconos, títulos, y algunos subtítulos de las cosas que podemos hacer por nuestros clientes, como diseño web, desarrollo web y Blake, SEO, diseño de logotipos en negro, marketing en redes sociales, todas esas cosas. Así que de nuevo, voy a usar uno de mis plugins para comenzar al menos este proceso como agregar servicios. Entonces voy a ir a los iconos para el diseño. Y digamos que quiero hacer como el diseño web primero. Entonces si solo escribes un diseño web, no estoy seguro si vamos a encontrar algo. Bueno, no vamos a encontrar nada. Así que hagamos algo como tal vez laptop. Veamos, laptop. Hagamos tal vez como laptop, Mac. Pero solo voy a hacer clic en este fondo para asegurarme de que vamos a estar agregando este ícono en algún lugar cercano. Así que sólo voy a tratar de agarrarlo. Permítanme simplemente acercar. Y digamos que este ícono se supone que es un poco más grande. Hagámoslo así, tal vez como 36 de altura. Y sólo voy a tratar de moverlo a algún lugar aquí a un costado. Y creo que si sólo si solo lo volvemos blanco, sería que sería aburrido, creo. Entonces. En lugar de simplemente hacerlo blanco, lo voy a hacer blanco, pero estoy en el fondo también. Así que sólo voy a agarrar esta herramienta de rectángulo y solo voy a mantener pulsada la tecla Shift para crear un cuadrado perfecto que va a verse más o menos así. Entonces no necesito los antecedentes. Y para el relleno, déjame simplemente agarrar mis activos agarrados y tal vez empecemos con este azul. Y vamos a aumentar el radio de esquina justo aquí a algo como tal vez 12. Observe que en este momento estamos ajustando el radio para todas estas esquinas. Entonces si quieres hacer eso, puedes tener que revisar este mismo radio para todos los valores de las esquinas y luego puedes ingresar ese radio de esquina aquí mismo. Pero si quieres añadir como diferentes radios para diferentes trimestres, tienes que hacer click en este radio diferente para cada esquina primero. Y ahora puedes hacer como valores diferentes, diferentes para diferentes rincones. Entonces si no me equivoco, el primero va a ser de arriba a la izquierda, entonces vamos a tener arriba a la derecha, abajo a la derecha, justo aquí, y abajo a la izquierda. Entonces vamos a entrar como en el las agujas del reloj con esta tasa, con estos irradian. Entonces supongo que 12 puntos deberían ser suficientes. Ahora volvamos a este tipo blanco así. Y veamos si esto va a funcionar bien. Entonces por supuesto que necesito mover a este tipo un paso por debajo. Así que solo voy a mantener pulsada la tecla Control o mantener presionado el comando si estás en un Mac. Y luego la llave del soporte izquierdo para mover a este tipo un paso, un paso hacia abajo. Así que quizá aumentemos el tamaño de este tipo a algo como tal vez 4040 debería ser suficiente. Por lo que ahora solo voy a mantener pulsada la tecla Mayús y hacer clic en este fondo para agregarla a la selección. Entonces todo lo que tenemos que hacer ahora es simplemente agarrar el icono y luego agarrar el fondo subyacente haciendo clic en él. Y sólo voy a asegurarme de que todo esté muy bien alineado con el centro. Y una vez que sea, solo voy a presionar Control G para agrupar. Ambos elementos y podemos simplemente moverlo tal vez como en algún lugar aquí. Por lo que ahora todo lo que necesitamos es solo agregar el subtítulo aquí o el título. Y luego como algunos, como algunos textos. Entonces para eso, puedo simplemente, y voy a seleccionar el título y el subtítulo. Y ahora si mantengo pulsadas la tecla Shift y la Alt, y voy a simplemente ejecutarla aquí abajo. Voy simplemente a Cloud ambos elementos. Por supuesto, si estás en un Mac, solo puedes usar la tecla de opción para eso. Así que vamos a escribir algo así como el diseño web. Ahí vamos. Y por supuesto que necesita ser significativamente más pequeños sólidos hacer algo así como 28. Y pongámoslo en algún lugar aquí. Y hagamos que estos tipos sean más pequeños. Hagamos tal vez algo como esto y lo voy a poner en algún lugar aquí. Y como notaste, cuando movemos estos elementos por ahí, puedes ver que obtenemos, obtenemos estos marcadores mostrándonos estos indicadores nos muestran las distancias entre elementos específicos como en esta región. Entonces ahora podemos estar seguros de que estos tipos no son como entre sí en distancias iguales, iguales, ¿verdad? Entonces conseguimos diseño web. Por lo que ahora sólo podemos agarrar todos estos elementos. Nuevamente. Voy a mantener pulsada la tecla Alt y la tecla Shift para simplemente clonar a estos tipos a algún lugar por aquí. Y voy a empezar con cambiar el fondo y recordar que es un grupo. Entonces tenemos que hacer doble clic para llegar a ese rectángulo. Y de mis colores, tal vez vamos con, esto, debe ir con el tono de piel. Y ahora tenemos que cambiar el ícono porque esto va a ser, digamos que esto va a ser un desarrollador web. Significó desarrollo web. Y tratemos de encontrarme algo así como el icono de código o codificación y código. Hagamos tal vez así. Y tiene que ir a algún lugar por aquí abajo. Y este tipo tiene que ir dentro de este grupo. Y creo que fue, sí, es este grupo 20. Así que sólo voy a agarrar este ícono y simplemente voy a imprimirlo por aquí. Y ya no necesitamos este ícono, así que sólo voy a deshacerme de él y su altura es de 40. ¿ De acuerdo? Entonces voy a ir con este ícono, cambiar su color a blanco, y voy a cambiar su tamaño a 40. Analogista, agarra el rectángulo para que el fondo y el icono. Así que simplemente voy a Shift-click sobre este elemento restante aquí en mis capas. Y sólo voy a asegurarme de que todo esté muy bien alineado con el centro. Y entonces podemos simplemente, ya sabes, como mover a este tipo a algún lugar de aquí. Y por supuesto simplemente podemos asegurarnos de que estos son, estos chicos están muy bien alineados también. Y los voy a mover a algún lugar aquí. Así que voy a hacer, voy a repetir el proceso. Y por supuesto hasta que depende totalmente de mu, cuántos servicios quieres, quieres compartir, quieres mostrarte. Pueden ser tres, pueden ser cuatro. Eso depende totalmente, totalmente de ti. Ok. Así que hice un poco de limpieza básica. Como se puede ver, tengo un grupo como a la izquierda al que en realidad podemos llamar una tarjeta de diseño web. Y tiene nuestro ícono y tiene nuestro texto de fondo y el título aquí mismo. Y este top va a ser web, la tarjeta. Y tiene los mismos elementos. Entonces ahora simplemente podemos gustar agarrar, digamos éste. Podríamos simplemente clonarlo a un lado y crear otra carta. O podríamos simplemente hacer clic derecho en esto, bueno, esta entrada de capas y simplemente elegir duplicar. Pero como se puede ver, simplemente lo apilará en la anterior. Entonces supongo que sería una mejor manera. Mejor técnica de producción sería simplemente mantener pulsada la tecla Alt y, y mover a este tipo a un lado. Para que puedas decidir cuántos, cuántos elementos quieres aquí. Pueden ser tres, puede ser para, ya sabes, es, es totalmente, totalmente depende de ti. Puedes tener como SEO, cosas, puedes tener como el marketing en redes sociales, tal vez como la creación de cursos online de y nada. Eso depende totalmente de ti. Así que cambié el color y cambié el título. Por supuesto, necesitamos cambiar el ícono. Entonces voy a ir a mis plugins y SEO. No creo que vamos a tener como un ícono para SEO, pero podemos hacer algo como buscar. Veamos, Tal vez sólo voy a ir con esto como este ícono de lupa. Y de nuevo, esta es mi tarjeta copiada. Eso por supuesto que necesito cambiar su nombre. Así que va a ser como tarjeta SEO. Y voy a agarrar este ícono y voy a ponerlo en el interior de este grupo. Y no necesito este ícono. Nuestro icono Metro, va a tener como 40 píxeles de altura. Y va a tener un color diferente. Tan blanco. Y simplemente tenemos que tratar de ponerlo dentro. Entonces veamos si solo puedo saberlo. Creo que se ve. Muy bien. Por supuesto que vamos a tener que alinear estas cartas. También. Pero por ahora, sólo voy a tal vez copiar a este tipo una vez más. Sólo quiero tener como otro comodín aquí va. Sólo quiero hacer algo como tal vez diseño de logotipos, algo, pero es más como lo que el diseño web también es como el diseño gráfico de una manera, pero ningún diseño de logotipo sería, supongo un poco más específico. Y este tipo, por lo que este rectángulo, voy a cambiar su nombre a diseño de logotipos. Ahí vamos. Entonces este rectángulo va a pasar. Tal vez revisemos este color, tal vez como el color negro. Vamos con este diseño oscuro, gris oscuro y logo. ¿ Qué tipo de icono debemos buscar, como el diseño de logotipos. Vamos a probar algo así como una herramienta de bolígrafo. Tal vez. No estoy seguro si vamos a tener algunas plantas o menos es como pluma. Tenían lápiz de la suerte, un bolígrafo. Se ve un poco bien. Me gusta. Y no necesitamos este ícono. Hagámoslo, vamos a asegurarnos de que este ícono alto esté establecido en 40, al igual que los demás. Y sólo voy a tratar de moverlo dentro de mi fondo. Ahí vamos. Ahora, lo que haría es simplemente agarrar el tablero de arte y traer de vuelta el diseño. Y ahora podemos ver si en realidad podemos gustar hacer estas, como estas cartas tan grandes, por ejemplo, como nuestras columnas. Entonces si ahora solo agarro estos y voy a mantener pulsada la tecla Shift. Tal vez podamos gustar hacerlos tan grandes y este tipo también. Así que sólo voy a ser impreso en algún lugar aquí. Tal vez un poco más pequeño, algo así. Y entonces vamos a hacer lo mismo con éste. Por supuesto, no es como obligatorio. Si tienes si tienes algún tipo de tamaño establecido, definitivamente puedes usar eso porque solo quiero mostrarte cómo puedes usar esta cuadrícula de columna y columna fin de ahora definir como cómo, cuán grande debe ser el tamaño. Tal vez imprimimos a este tipo en algún lugar de aquí. Creo que este tipo debería ser pero más grande. Por supuesto, simplemente podríamos saber, ver el tamaño de nuestros primeros grupos. Entonces, lo que es este tamaño de grupo, 398 por 353. Para que podamos tratar de hacer lo mismo aquí. Entonces tres, 98353. Entonces vamos a hacer 353. Este 1398 por tres, creo que fue 3353353. Y luego este tipo, por lo que 398353. Déjame ponerlo en algún lugar aquí. Por lo que ahora sólo podemos agarrar todos estos elementos y simplemente como alinearlos, los distribuirá horizontalmente. Tal vez alinearlos a la parte superior. Y permítanme ahora apenas hacer clic en el editor de maquetación. Se va a ver algo, algo como esto. Ahora por supuesto, tal vez podríamos simplemente mover algunas cosas por ahí. Digamos que creo que este tipo debería ser un poco, sólo este texto debería ir a algún lugar aquí. Y el resto creo que se ve bien. Ahora, si quieres, puedes agarrar solo estas piezas de texto y tal vez más que un poco arriba. Al igual que el resumen aquí. Esto debería ser, esto debería estar bien. Y tal vez vamos a asegurarnos de que también estén bien ajustados a la cima. Y creo que se ve bien. Nuevamente, no tienes que hacer que estos iconos sean tan grandes como las columnas. Así que solo quería mostrarte cómo puedes usar esa cuadrícula para, por ejemplo, colocar tu gusto, tus elementos aquí mismo. Entonces antes de llamarlo un día con esta sección, creo que sólo voy a hacer doble clic en el interior y agarrar estos dos puntos de anclaje y simplemente moverlos hacia abajo. Sólo quiero gustar, añadir como un botón aquí abajo. Al igual que un llamado a la acción va a decir algo como ver más o aprender más. Pero vamos, en realidad hagamos eso en el siguiente, en el siguiente video. 35. Vamos a agregar el botón de llamada a la acción: Entonces nuestro botón de llamada a la acción va a ser como muy, muy sencillo. Podemos ir a agarrar éste. Así que déjame tratar de encontrar el botón dentro de este grupo va a ser éste. Sólo voy a copiarlo. Y voy a tratar de pegarlo en algún lugar aquí. Vayamos aquí abajo. Y si ahora acabamos de previsualizar nuestro, nuestro diseño, simplemente podemos tener todo consistente. Y, ya sabes, y básicamente agrega un botón como este. Pero tal vez sólo voy a moverla un poco hacia arriba. Y creo que podría ser, podría hacerlo un poco más grande. Entonces en lugar de esconder 72 capas, vamos puede ser como 96. Y pongámoslo al centro. Veamos ahora cómo va a verse. O no quiero estar dividiendo los pelos aquí. Pero creo que se ve bien. A lo mejor podríamos añadir más espacio para respirar aquí abajo. Así que sólo voy a agarrar primero por supuesto necesitamos hacer doble clic dentro de este elemento, el fondo. Shift, da click en estos dos puntos de anclaje inferiores, y sólo voy a correrlos abajo. Así que ahora podemos agarrar este botón y moverlo tal vez como aquí abajo para mantener el espaciado, el espaciado consistente. Así que ahora si solo verificamos cómo se ve ahora mismo, sí, supongo que se ve bastante bien. A lo mejor estos elementos, estos hidrógenos, son sólo un poco demasiado grandes. Entonces si no te gustan estos, siempre puedes hacerlos más pequeños, pero al menos son prominentes y así todo lo hará, todo el mundo se dará cuenta, se dará cuenta de estos. Permítanme solo comprobar el tamaño de este texto. Entonces son 18 y creo que esto también es 18. Así que tal vez desde que hicimos el botón más grande, quizá aumentemos el tamaño de esta fuente a algo así como 26. Eso va a ser un poco demasiado. A lo mejor 22. Y por supuesto que necesitamos hacer que este tipo vaya al centro. Así que veamos ahora, supongo que se ve un poco, un poco mejor, supongo, que lo último que hay que hacer aquí en cuanto a crear esta sección sería simplemente agregarla, como hacerla sensible. Por lo que necesitamos aún añadirlo a nuestra mesa de trabajo móvil en casa. Empecemos a hacer eso en el siguiente video. 36. Hagamos que los servicios sean responsivos: Apertura a hacer en este momento es agarrar toda la pizarra de arte móvil. Y en realidad hagámoslo significativamente más alto. Vamos a brillar. Todo el camino hasta aquí tal vez. Y sólo voy a empezar con agarrar, agarrando el fondo. Así que sólo voy a copiarlo. Y voy a ir a mi mesa de trabajo móvil de casa. Y sólo voy a pegarlo y traerlo a tal vez como, solo quiero saber, simplemente no quiero que esta chica sea como flotando en el aire así y parece que está cortada por la mitad. Así que sólo voy a tratar de traerlo tal vez como en algún lugar aquí. Lo cual debería estar bien. Ni siquiera quiero saber, como molestarme o tal vez, ya sabes, tal vez sí quiero no quiero que molesten como hacer a este tipo un poco más pequeño. Así que vamos a traerlo como a algún lugar aquí. Y de nuevo, sólo voy a hacer doble clic en el interior para bajar a este tipo a tal vez como en algún lugar aquí, esto debería ser o k Y creo que vamos a tener que tal vez como extendido, aún más para acomodar todos, todos los elementos restantes. Pero por ahora, solo voy a agarrar ambos elementos y de nuevo, ir al móvil de mi casa. Por lo que estos tipos se copian en mi portapapeles Control V para pegarlos. Así que ahora simplemente puedo agarrar aversión a este grupo aquí mismo. Y fíjate que obtuvimos este tamaño sensible, como comprobado aquí mismo. Está activo. Entonces cuando lo hagamos más pequeño lo hará receptivo. Nosotros bien, podemos hacer llevar a XD, hacer el levantamiento pesado por nosotros y hacerlo como un dos al tamaño de nuestro tablero de arte. Bueno, a veces puedes obtener resultados similares que realmente no querías obtener. Quiero decir, si ahora sólo tratamos de hacer que estos tipos les guste adaptar los libros. Así que sólo voy a tratar de hacer a estos chicos que puedan ver que el tamaño se está volviendo como demasiado pequeño, así. Esto está bien, como este texto de aquí abajo. Pero definitivamente no queremos tener como este texto para ser tan pequeño. Y supongo que la diferencia es, es porque esto es como el Texto Artístico. Y esto se hace de usar, bueno, primero creándolos el marco con la herramienta rectángulo, y luego agregar algún texto dentro. Y aquí, acabamos de agregar algún texto con la herramienta de texto. Y no, no se ve tan genial. Entonces lo que haría es que solo agarraría a este tipo aquí mismo. Quiero decir, solo sabría como entrar, colocar mi cursor aquí mismo y presionaría Shift más Enter. Y ahora simplemente puedo agarrar como este tipo desde abajo y tal vez hacerlo algo más grande así e imprimir a este tipo por aquí. Pero vamos a ver si justo ahora tal vez nos guste agarrar, como quitar ese. ¿ Va a mirar, voy a quitar ese duro entrar. ¿Se va a quedar bien? Vamos, vamos a traer de vuelta la cuadrícula de diseño. Como se puede ver, es un poco demasiado grande. Así que hagamos que sea más pequeño a tal vez algo como esto, como 35, tal vez 34 y abajo. Vamos a traer a este tipo. Y vamos a ver si 34 es suficiente. Supongo que sería suficiente. No es más grande que éste y éste es 41. Pero si hacemos esto 141 para mantener las cosas consistentes, creo que va a ser demasiado grande. Definitivamente va a ser demasiado grande. Entonces aquí, podríamos volver a hacer eso duro, duro Enter y ver cómo va a quedar. No creo que se vea no creo que se vea genial, pero este es nuestro rumbo para que no tenga que ser tan grande como éste, que sería nuestro rumbo uno. Entonces éste podría quedarse así, y éste se fijó en 22. Tal vez intentemos hacer como 18. A lo mejor se va a ver un poco, un poco mejor. Pero si hacemos eso, necesitamos aumentar o disminuir la altura de línea de 30 a 18. Vamos a seleccionar más seis va a ser un 24. Y veamos cómo se ve. Saber qué vamos a hacer. Tal vez como 26, así que 18 más ocho. Creo que se ve un poco mejor. Así que de nuevo, ahora podemos simplemente agarrar como este icono de Diseño Web. Y creo que voy a traer de vuelta la rejilla de lay-out. Y voy a tratar de simplemente pegarlo y ponerlo en algún lugar aquí en el centro. Y ahora veamos si nuestro tamaño sensible o características van a funcionar correctamente. Así que intentemos hacer que este tipo más pequeño a algún lugar como aquí. Tratemos de ponerlo al sol, al centro. Creo que todavía tiene que ser un poco más pequeño, algo así. Y creo que me va a gustar tal vez tío, este tipo. Entonces hicimos este 1800s. Esto es 22. Creo. ¿ Sabes qué? Hagamos a este tipo igual que básico, básico 16. Entonces voy a agarrar ese estilo de personaje de mi. De mi pozo, básicamente de mis activos. Pero claro que necesitamos cambiar el color y veamos cómo se ve. Y creo que lo voy a hacer significativamente más pequeño, algo así. Y supongo que debería quedar bien, solo quiero mantener aquí algo así como una jerarquía, así que quiero hacer más grandes a estos tipos. Y no quiero que este subtítulo sea tan grande como estos tipos de aquí mismo. Creo que si los mantenemos así, debería estar bien. Entonces otra cosa que creo que podríamos hacer es que tal vez podríamos hacer esto así. Puedo un poco más pequeño a algo tal vez como esto. Esto debería estar bien. Y por supuesto que tal vez deberíamos gustar traer a estos tipos un poco arriba. Sólo para que parezca un poco más limpio, tal vez como aquí en nuestra, en nuestra versión móvil. Así que vamos a ver rápidamente cómo va a verse. Aquí. Creo que se ve bien, Así que básicamente lo que tenemos que hacer en este momento es que necesitamos agarrar todos los elementos restantes y simplemente apilar verticalmente aquí mismo. Entonces como ejemplo, solo voy a agarrar aquí la parte de desarrollo web y tal vez estar, antes de hacer eso, de nuevo, voy a hacer doble clic en el interior, agarrar estos dos puntos de anclaje y simplemente jugo en nuestro cerebro y tonto, alfilarlos abajo, tal vez como dos en algún lugar aquí. Sólo para, sólo para estar seguros. Y voy a volver, déjame simplemente apagar eso porque ahora podemos simplemente pegar a ese tipo de nuevo. Tal vez ponerlo como gustar en algún lugar de aquí. Y si ahora solo agarramos estos elementos o este diseño web, una tarjeta, podemos ver que su tamaño está ajustado a 269 de altura, 318 de ancho. Así que sólo sepamos, vamos a ver si podemos salir con la suya solo saber como entrar en esos valores. Por lo que fue de nuevo 38269. Entonces veamos 318 y hagamos como 269. Veamos si va a funcionar. No creo que se haya ido. Entonces supongo que sería mejor simplemente saber, simplemente hacer, no hacer esos elementos básicamente como antes. Entonces, antes que nada, voy a agarrar éste. Sólo voy a cambiar el tamaño a 16 y la altura de la línea a 22. Y por supuesto que necesita ser significativamente más pequeño a algo como esto. Y voy a hacer que se vea más o menos así. Ahora, éste se queda aquí, pero este como este ícono y el fondo tiene que ser más pequeño. Si te diste cuenta, estos chicos no están agrupados, así que aquí no tenemos valores como anchura y altura. Si hacemos grupo, ese puede ser nuestro primero. Voy a agrupar estos elementos. Entonces este ícono y este rectángulo, voy a agruparlos. Y ahora podemos ver estos, estos valores aquí mismo. Entonces si ahora solo agarro este rectángulo y este ícono, voy a agruparlos. Y así hagámoslo, creo que fue un 114. Entonces hagamos 114. Ahí vamos. Y de nuevo, sólo voy a asegurarme de que estos tipos estén muy bien alineados con el centro. Ahí vamos. Entonces solo podemos agarrar estos dos elementos y simplemente ponerlos en la parte superior. De nuevo, vamos a nuestro, ahora éste, solo agarremos nuestro diseño móvil casero y veamos cómo se ve. Se ve un poco bien, Así que ahora realmente todo lo que tenemos que hacer es simplemente agregar el SEO y el diseño del logotipo. Así que déjame hacer tan rápido y me pondré en contacto contigo. De acuerdo, así que he agregado todas las cartas y he añadido el botón Saber más. También he cambiado eso pero el tamaño de nuestros antecedentes. Por lo que ahora simplemente podemos previsualizar cómo se vería en nuestro dispositivo móvil. Entonces conseguimos el menú. Y ahora si acabamos de acercar y nos desplazaremos hacia abajo, se puede ver que tenemos todos nuestros elementos añadidos. Ahora claro, si quieres, puedes cambiar el tamaño de esto, tal vez títulos y tal vez los iconos. Será totalmente, totalmente depende de ti. Creo que, se ve bien como se ve en este momento, siempre podemos ajustarlo, ajustarlo más tarde. Pero lo más importante es que entiendas cómo ganar sumar todas las cartas como estas y ¿ cómo agregarlas más tarde? Bueno, cómo apilar en la versión sensible de tu diseño. 37. Empecemos a agregar los elementos del portafolio: Por lo que tenemos nuestra sección de servicios y también por supuesto lo hicimos como móvil. Como se puede ver, simplemente no he arreglado algunos, algún posicionamiento. Acabo de modificar el dimensionamiento un poco solo para que todo se vea un poco, un poco más bonito. Y entonces ahora en realidad podemos empezar a sumar la sección de portafolio. Entonces lo que voy a hacer es que sólo voy a agarrar estos dos elementos. Voy a copiarlos. Ve aquí abajo y sólo voy a pegarlos sobre, claro, lo que me gustaría hacer es cambiar los colores. Entonces de mi de mis activos, sólo voy a elegir tal vez como estos colores, estos colores más oscuros. Y aquí sólo voy a, sólo voy a escribir algo así como echar un vistazo a mis proyectos o algo así. Esto debería ser, esto debería estar bien. Entonces por supuesto, lo que nos gustaría hacer aquí es agregar ítems como portafolio. Y lo puedes hacer de numerosas maneras. Por lo general, entonces las carteras que verías en las páginas de inicio se presentarían en forma de galería. Y esa galería se puede apilar bien, se puede presentar pasante. Me gusta una rejilla o tal vez como un diseño de mampostería, diseño de azulejos, y cosas por el estilo. Pero en lo que nos vamos a centrar aquí es agregar interactividad a los ítems de tu portafolio para que alguien flotando sobre su miniatura de cartera vaya a ver algún tipo de algún tipo de un interacción. Pero antes de hacer eso, voy a traer de vuelta el diseño así. Porque solo quiero saber, solo quiero basar mi, mi grid básicamente en mi, en mi sistema de columna 12. Entonces primero, sólo voy a añadir tal vez como un simple rectángulo. Y eso va a ser como si fueran primero, primer elemento de cartera, miniatura, y luego vamos a agregarle interactividad. Así que sólo voy a agarrar la herramienta rectángulo. Y voy a crear un rectángulo que va a estar abarcando estas tres columnas. Hagámoslo un poco más grande, algo así. Y sólo voy a llenarlo con una no creo que necesite una frontera. Sólo voy a llenarlo con algo del color, pero sólo para que lo veas mejor ahora mismo, sólo voy a encajar con este color. Pero en última instancia solo quiero llenarlo con algún tipo de foto. Entonces estoy usando el plug-in Pexels aquí. Sólo voy a escribir en diseño. Las imágenes aquí realmente no son tan importantes. Se trata de, se trata del hecho de que vamos a por, pero tal vez sólo voy a añadir como diseño gráfico. Y sólo voy a añadir éste. ¿Por qué no? Por lo que sólo voy a hacer click en él. Y como se puede ver, ya tenemos esta imagen de aparecer aquí y estar en muy constreñidos por nuestro rectángulo que básicamente está funcionando como una máscara. Así que sólo voy a burnout click en este layout para que puedas ver todo un poco mejor. Voy a moverla un poco hacia abajo. Entonces lo que quiero hacer aquí es cada vez que pase el cursor sobre esta imagen, solo quería ver como un título de este proyecto apareciendo. Y vamos a pedir algún subtítulo que sería más, tal vez más como algunas categorías o alguna información adicional. Con este rectángulo seleccionado, sólo voy a añadir tal vez otro rectángulo que va a ser como, ya sabes, como, tan grande. A lo mejor sólo voy a agarrar mi herramienta rectángulo y simplemente crear un rectángulo que va a ser algo así. Nuevamente, sin frontera. Déjame solo comprobar si el tamaño está bien. Entonces es 5366285366 a ocho. Y sólo voy a cubrirlo así. Y ahora solo les voy a agarrar un color más oscuro, tal vez como éste. Y lo que estoy haciendo ahora es, bueno, este finalmente va a ser nuestro estado de hover. Pero por ahora, solo quiero que entiendas lo que está pasando aquí. Entonces conseguí esta ligera llave. Como un cubierto que también va a ser un fondo. Pero bueno, está cubriendo la imagen de abajo y va a ser el fondo para el título y el subtítulo. Entonces voy a agarrar la herramienta de texto. Y sólo voy a hacer click en algún lugar aquí. Y voy a escribir algo así como ítem de cartera. Y tal vez eso es un poco demasiado grande. Probemos algo así como 42. Quizás incluso algo más pequeño, más pequeño como 36. Y lo voy a poner en algún lugar aquí en el centro. Y sólo voy a clonar y bajar algunas manteniendo presionadas las teclas Shift y Alt para clonar. Estos, este tipo y restricción, es, su movimiento. Y aquí abajo va a ser como, ya sabes, alguna marea, algún título aquí. Y este tipo va a ser más pequeño y tal vez como más ligero. Probemos como 22. Creo que debería quedar bien. Y voy a tratar de ponerlos en algún lugar del centro. Esto debería ser, esto debería ser suficiente. Esto se ve, esto se ve bien. Entonces lo que estás viendo en este momento es el estado de flotación de esto pronto para ser componente. Voy a seleccionar todo y voy a presionar Control. O si estás en un Mac, presiona Comando K para crear un componente de este tipo. Por lo que incluso podemos llamarlo como elemento de cartera así. Entonces en el estado predeterminado, inactivo quieren ver estos elementos. Entonces este rectángulo subyacente. Así que este tipo de aquí, este tipo tiene que irse. Entonces voy a sacar esto, llevar su opacidad todo el camino a 0. Y estos chicos, yo quiero, soy Paul, quiero traer su opacidad a 0 también, pero también quiero moverlos. Entonces voy a llevar a este tipo a un lado, al borde de este componente. Y vamos a imprimir su opacidad todo el camino hasta el 0. Y con este tipo, lo voy a llevar a un costado, al lado derecho. Y voy a imprimir su opacidad a 0 también. Entonces ahora este es nuestro estado predeterminado, pero cuando le agregamos el estado de hover, así que en el estado de hover, solo voy a volver a mi, a mis capas. Entonces aquí, quiero agarrar el, este es el rectángulo subyacente. Por lo que quiero llevar esta opacidad todo el camino al 100%. Y luego el artículo de la cartera, este tipo necesita ir al centro. Por lo que debería ser como en algún lugar aquí. Ahí vamos. Y por supuesto que es opacidad también tiene que ir al 100 por ciento. Por supuesto, siempre podemos simplemente comprobar, no me gustaría artículo de cartera. Este tipo, siempre podemos simplemente hacer click en este Align Center, pero creo que lo alineamos bastante bien. Y este tipo necesita también tener su opacidad fijada al 100 por ciento. Y de nuevo, podemos hacer lo mismo. Podemos simplemente alinearlo al centro así. Por lo que ahora en el estado predeterminado, bueno, no vemos nada más que en el estado de hover. Estos tipos están de vuelta, hacia atrás aquí, así que sólo voy a ir rápidamente al modo de vista previa. Por lo que voy a presionar Comando o Control y Enter en mi teclado. Si estás en un Mac, presiona Command Return. Y esto se va a ver algo así, así que no podemos ver todo y nada en este momento. Pasa el cursor sobre él. Se puede ver a estos tipos como entrar. Entonces conseguimos nuestro como este fondo subyacente, recuperando su opacidad. Y estos dos elementos. Entonces al igual que el ítem de cartera, nombre y algún tipo, bueno, algún subtítulo debería estar aquí escrito en realidad. Por lo que estos tipos son como volar desde los costados y también están recuperando su opacidad. Entonces lo que podemos hacer en este momento es que simplemente podemos clonar este elemento para saber, para crear básicamente como una cuadrícula de básicamente miniaturas de elementos de cartera. Y no tendríamos nuestra, nuestra sección de cartera creada. Pero en realidad empecemos a hacer eso en el siguiente video. 38. Terminemos el portafolio: Entonces antes de añadir más como elementos de cartera, lo que podríamos hacer es que simplemente podríamos añadir algunos como, como, como un sistema de filtrado simplemente desconocido solo para indicar qué nos gustaría lograr aquí. Entonces cada vez que alguien hace clic en ese filtro, como categoría, que, bueno, él o ella vería ajustados los elementos correspondientes. Así que sólo voy a clonar rápidamente a este tipo justo aquí. Y voy a escribir algo como todo primero. Y por supuesto que tiene que ser mucho más pequeño. Así que se va a ver algo así. Y tal vez hagámoslo como 18. Esto debería estar bien. Y entonces sólo voy a clonar a un lado y escribir algo como el llamado diseño web puede ser. Y por supuesto que lo voy a hacer un poco más grande. Y de nuevo, Colonia para decidir voy a escribir algo como tal vez algo así como desarrollo web. Cuando la adjudicación. Y por supuesto lo último sería agregar, agreguemos diseño de logotipo. Creo que teníamos un diseño de logotipo en nuestros servicios. Entonces diseño de logotipos, y sólo voy a hacer que se alineen muy bien. Pero creo que necesitamos tal vez arreglar estos textos, estos marcos de textos. Por lo que estos chicos están realmente muy bien alineados. Esto debería ser mejor así. Voy a ponerlos en algún lugar aquí. Y a lo mejor también podríamos disgustar, no indicar cuál como qué categoría está activa. Por lo que la categoría, mientras que la categoría activa sería como no más prominente. Por lo que sólo podemos agarrar todos estos elementos. Podemos de nuestros activos, tal vez podamos igual que podemos simplemente cambiar el color para ser menos prominente. Y tal vez sólo voy a traer a estos tipos. Estos tipos tienen que acercarse juntos y ponerlos al centro en algún lugar de aquí. Así que voy a traer de vuelta mi diseño de cuadrícula así. Ahora lo que podemos hacer es simplemente como clonado a este tipo a este lado, algunos de nuevo sosteniendo tanto las teclas Shift como las Alt. Y voy a simplemente tal vez hacerlo un poco más grande y tal vez más alto a algo como esto. Entonces vamos a estar creando como un diseño de mampostería. Así que ahora vamos a cambiar esta foto aquí mismo, pero primero vamos a asegurarnos de que estamos en el rectángulo derecho de que en realidad está seleccionado. Entonces este es este tipo de aquí mismo. Y escojamos algo un poco más como algo diferente. O éste es funky. Entonces escojamos éste. No sé qué tipo de diseño web o proyecto de desarrollo web sería, pero se ve bien. Ahora si acabamos de previsualizar nuestro elemento, se puede ver que efectivamente tenemos como esos los mismos elementos sucediendo aquí cuando pasamos el puntero sobre este tipo. Pero son exactamente los mismos, los mismos valores que agregamos a este componente. Por lo que tenemos que cambiar esos, como el estado de hover también aquí con este componente. Entonces para hacer eso, agarremos nuestro componente y vayamos al estado de hover. Entonces lo primero que voy a hacer es simplemente agarrar mi artículo de cartera o este ítem. Voy a ir al estado predeterminado y solo quiero revisar su tamaño. Por lo que dice 674997. Creo que sólo voy a copiar el ancho y voy a tratar de recordar la altura, así que 997. Por lo que ahora en el estado de hover, de nuevo, tenemos que agarrar este rectángulo y realidad podemos agarrar este rectángulo también y simplemente pegar eso en y escribir en 997 y en el estado de hover, también estos chicos necesitan ir al centro. Entonces creo que deberían ir a algún lugar por aquí. Y si sólo voy a mi estado predeterminado, entonces podemos comprobar si todo está funcionando correctamente. Creo que todavía tenemos que trabajar como en el posicionamiento de estos elementos en como en ellos. A pesar de que se ve bien así. Pero para ahora gustar mantener el mismo efecto que aquí, necesitamos trabajar definitivamente en el posicionamiento por defecto del argumento posicional de estos elementos. Entonces si vamos al estado de hover, creo que se ve genial, así, se ve bien. Creo que es como la forma más prueba de errores sobre como arreglar el posicionamiento de estos elementos Cuando simplemente copiando los valores y luego pegarlos de nuevo en. Entonces si vas al estado de hover, solo podemos agarrar, agarremos este ítem de portafolio. Entonces este título aquí mismo, y realmente todo lo que necesitamos es el valor y, entonces la posición, como la posición vertical, por así decirlo. Así que sólo voy a copiar eso. Voy a volver al estado predeterminado. Voy a agarrar ese título de artículo de cartera, y sólo voy a pegar eso en. Y luego voy a volver al estado de hover, agarrar ese subtítulo, agarrar esta posición y vertical, ir al estado predeterminado del artículo de cartera. Es un poco como si fuera muy laborioso algunos pero creo que para mantener las cosas consistentes, creo que es creo que es la mejor manera. Entonces conseguimos esos valores, pegarlo en. Y si ahora solo pasamos el cursor sobre este tipo, se puede ver que estos en realidad, estos tipos están en realidad en la posición correcta. Pero claro creo que olvidé cambiar esta imagen. Entonces vamos a eso. Tratemos de encontrar que esa imagen funky era este tipo. Así que de nuevo, si ahora realmente no estropeé nada, si volvemos al modo de vista previa, se puede ver que todo está funcionando como se esperaba. Todo lo que realmente necesitamos en este momento es simplemente mantener, seguir creando nuestro, nuestro diseño para que solo podamos saber, clonar a este tipo en algún lugar para decidir. Y entonces tal vez como disminuir el tamaño a tal vez como algo como esto. Puedes hacerlo aún más pequeño de lo que podemos clonar y tal vez aquí abajo y aumentar el tamaño de esta guía a algo así. Entonces podríamos, tal vez no, quizá incluso hagámoslo un poco más grande. Así que ahora que podemos, ahora solo bajamos a este tipo. Déjame construirlo muy bien. Entonces se ve más o menos así. Creo que este tipo debería ser, debería subir un poco. Pongámoslo en algún lugar aquí arriba. Y sólo voy a hacerlo un poco más pequeño, pero aumentar su tamaño, algo como esto. Y por último, este tipo va a bajar, aquí abajo y sólo voy a hacer que se vea algo así. Por supuesto. Ahora, si sólo hago clic en eso, si vamos a nuestra vista previa. Entonces conseguimos este elemento, añadieron elementos. Pero como se puede ver, de nuevo, necesitamos simplemente arreglar el posicionamiento, fijar las imágenes, y nuestro portafolio debe ser, debe estar completo. Así que déjame hacer eso ahora muy rápido y te responderé lo antes posible. Para que como se puede ver, todo lleva bastante tiempo. Necesitas hacer bastantes ajustes y algunos ajustes. Pero una vez que hayas terminado, creo que el efecto se ve bastante, bastante interesante. Cuando terminemos, simplemente podemos saber tal vez solo algo de posicionamiento. Cuando terminemos, aún necesitamos usar, ya sabes, poner nuestro portafolio en nuestra mesa de trabajo móvil. Y creo que va a ser bastante largo. Pero en realidad empecemos a hacer eso en el siguiente video. 39. Hagamos que el portafolio sea Reponsive: Entonces al igual que con todas nuestras secciones anteriores, lo que tenemos que hacer ahora es simplemente poner nuestra, nuestra sección de portafolio en ellas en la mesa de trabajo móvil. Así que sólo voy a agarrar este primer título de diapositiva y el subtítulo. Y de nuevo, déjame simplemente traer a la rejilla de diseño. Y aquí, sólo voy a pegar a esos tipos. Y vamos a ver si en realidad podemos salir con la suya con Lucknow haciendo a estos chicos un poco más pequeños, tal vez algo así. No creo que podamos dejar, sólo quizá ahora veamos lo que tenemos aquí. Así que vamos, vamos a revisar este es 34 medio y este tipo es tienda regular de 800s. Por lo tanto 34 medio. Tal vez. Sólo revisemos. Haz esto duro. Corazón entra aquí mismo. Y este tipo se suponía que era un equipo. Y supongo que debería verse, acuerdo, tal vez sólo voy a hacerlo un poco más pequeño. Y esto debería estar bien, dejémoslo así. Entonces a continuación agreguemos esos filtros. Sonido solo copia, va a copiar estos elementos o Control C o Comando C si estás en un Mac y luego simplemente pegarlos aquí. Así que ahora simplemente no pongamos estos chicos como una lista que va a estar buscando más o menos así. Quiero mantener como mayores brechas entre estos elementos porque simplemente haría, hacer tocarlos más fácil en un dispositivo móvil, móvil. Pero claro que necesito ponerlos al centro y a todo el grupo también. Esto debería verse bien, pero por supuesto que aún necesitamos agarrar todos estos elementos y distribuirlos adecuadamente. Entonces se ve más o menos así. Por lo que ahora solo podemos agarrar ese artículo de cartera copiado y pegado aquí y ponerlo en algún lugar aquí. Y de nuevo, vamos a tener que jugar con el posicionamiento así. Y no olvides que vamos a tener que hacerlo por todo el mundo, como todos los estados. Entonces no voy a ser como retener las variaciones en tamaños solo para hacer las cosas un poco más limpias y más fáciles de hacer para nosotros. Entonces. Sólo voy a rápidamente quizá añadir estos elementos. Así que copia y pega en algún lugar aquí. Y voy a hacerlo, hacer que este tipo sea más pequeño. Así que sólo voy a ver cuán grande es este tipo. Entonces es 454, y por supuesto tenemos que adjuntarlo con las columnas. Entonces para 54, así, tal vez lo voy a sacar a la vista. Nuevamente. Este tipo copia pegó aquí, hazlo más pequeño. Y de nuevo, ¿fueron cuatro o 54? Creo que lo fue. Y entonces tal vez hagamos este tipo. Entonces copia pegada aquí. Nuevamente hazlo más pequeño. Y cuatro o 54. Y aún nos quedan como estos dos tipos. Entonces péguelo aquí. Hacerlo más pequeño para cuatro o 54. Y sube. Y de nuevo, este tipo lo pega aquí, ponlo donde necesita ir. Entonces cuatro o 54, así. Pero claro, no estamos terminados porque, ya sabes, una vez que una vez pasamos el cursor sobre estos tipos, así que si acabamos de prever a este tipo, voy a bajar aquí. Se puede ver que cuando pasemos el cursor sobre él, no va a quedar bien. En realidad va a parecer bastante terrible. Entonces tenemos que volver a hacer, hacer todas estas cosas por todos los estados. Entonces al menos conoces el tamaño. Entonces hazlo como más pequeño. Y por 54 así, nuevo con este tipo, por el estado de hover. Tan pequeños y cuatro o 54. Y creo que todavía tiene que ser más pequeño, este tipo así así. Y por supuesto tendremos que arreglar esto. Bueno, el texto. Entonces este tipo se ve bien. Vamos a agarrar a este tipo. Y veamos, como en el estado predeterminado, Hagamos algo así como 38. Veinticinco, eso podría ser un poco demasiado. Vamos u1. Mayo 0 ser un poco más. Así que sólo voy a hacer uno aquí y luego voy a, no, no voy a ser como aburrirte sin como revisar las distancias de todos los demás elementos. Lo voy a hacer rápidamente como fuera de la cámara. Pero sólo para ver a qué va, cómo hay que hacer. Entonces el estado predeterminado, vamos a hacer sólo tres. Tal vez copié a ese tipo. Ahí vamos. Entonces el estado predeterminado debe buscar, debe mirar. De acuerdo, así que déjame ahora simplemente hacerlo rápidamente por todos los elementos restantes. ¿ Verdad? Entonces cuando todo está hecho, cuando básicamente se rastrean todas las distancias y tamaños, y por supuesto, también me gusta cambiar ligeramente el tamaño de estos elementos. puede ver cómo se ve, se ve un poco mejor en este momento. Hasta ahora, tan bien, pero no queremos que sólo alguien pase el puntero para ver. Me gustan estos elementos, como estos elementos interactivos. También queremos indicar que cuando alguien haga clic en uno de estos elementos, bueno, el usuario realmente será llevado a una página como una sub para con ellos, con nuestras imágenes de cartera de luz o a un galería separada que esté de alguna manera conectada con uno de estos elementos aquí mismo. Entonces podemos, por supuesto, podemos hacer eso aquí dentro, dentro de Adobe XD y en realidad vamos a hacer eso. Pero en el siguiente video. 40. Vamos a agregar un carrusel de imagen: Entonces el efecto que quiero lograr aquí no es sólo alguien flotar, pasar cursor sobre cualquiera de estos artículos. Y va a ver algún título y un subtítulo, ese tipo de efecto. Pero también cuando esa persona hace clic en cualquiera de estas miniaturas, él o ella va a ser como no redirigirlo a él, a un carrusel de imagen de imagen que por supuesto va a ser también interactivo. Así que hagamos eso ahora mismo. Entonces lo que voy a hacer es algo que acaba de ir a crear una nueva mesa de trabajo. Entonces voy a agarrar la herramienta Mesa de Trabajo. Y quiero que este carrusel de imagen cubra toda la vista. Entonces voy a elegir como web desktop 19, 1920s. Quiero sumar algunos elementos aquí. En primer lugar, sólo voy a crear una impresión de que en realidad todavía estamos en el mismo tablero de arte. Entonces voy a simplemente copiar todos estos elementos y voy a pegarlos aquí mismo en este carrusel de imágenes. Porque siempre que te guste en una página web típica, cuando haces clic en algo así como un elemento de cartera, como la cama, el telón de fondo se queda pero es como, como cubierto con ese carrusel de imagen. Entonces esto es lo que quiero lograr aquí. Entonces este tipo se queda. Pero lo voy a cubrir con un rectángulo como un simple que cada borde. Pero va a tener un negro afortunado y luego llenarlo. Y probemos algo así como 90% tal vez de opacidad. Entonces básicamente se vería algo así. Tal vez hagamos ochenta y cinco, así. Entonces sobre este fondo, quiero añadir como básicamente como alguna imagen, carrusel de imagen. Y voy a crear algo así como muy, muy simple, igual que un slider donde las tres imágenes sólo para que entiendas cómo crear un carrusel de imagen o un slider como este aquí dentro de XD. La primera imagen que voy a usar va a ser esta imagen de aquí mismo. Quizás en realidad intentemos copiarlo. Entonces voy a copiar a este tipo y tratar de pegarlo aquí. Y por supuesto, me gustaría hacerlo significativamente más grande. Entonces se ve más o menos así. Tal vez un poco más alto. Algo como esto. Esto debería ser suficiente. Ahora aquí en la parte inferior, solo voy a escribir algo así como el título del proyecto. Entonces título del proyecto, pero quiero que sea significativamente menor lista de algo así como 26. Y voy a cambiar su color a simplemente blanco liso. Y voy a tratar de ponerlo en algún lugar del centro, en algún lugar aquí. Para que todo funcione, necesitamos agregar más imágenes y necesitamos enmascararlas. Así que déjame agarrar este rectángulo y lo voy a copiar a un costado, tal vez como en algún lugar aquí a la izquierda. Y tal vez ya sabes qué, eso es en realidad como, agarrar todo, todos estos elementos y voy a ir junto con el tablero de arte y este tipo. Así que primero voy a sólo tratar de agarrar la mesa de trabajo. Voy a ponerlo en algún lugar aquí. Apenas sono, las imágenes no están cubriendo estas mesas de trabajo aquí mismo. Y veamos si qué vamos a copiarlo una vez más a un lado. Y sólo voy a tratar de cambiar esta imagen. Hagamos algo como tal vez, no lo sé, Diseñador. Y agreguemos una imagen. Recuerda, como tal vez intentemos encontrar algunos como el diseño web. Y vamos en realidad tal vez normal, como Vamos a agregar esta imagen. ¿ Por qué no? Y volvamos a copiar esto, ir a este lado. Los muchachos lo pusieron en algún lugar aquí, y vamos a tal vez, agreguemos este. ¿ Por qué no? Entonces ahora tenemos que, como mencioné antes, tenemos que enmascarar a estos tipos. Así que de nuevo, voy a agarrar la Herramienta Rectángulo y voy a crear un rectángulo que va a estar cubriendo esta imagen. No hace falta tener frontera, pero tenemos que sumar todos estos elementos. Entonces estas dos imágenes y también los, los elementos subyacentes, o tal vez en realidad sería más fácil simplemente agarrar a estos dos tipos. Voy a ponerlos en algún lugar aquí a la cima, sólo para que puedas ver todo mejor. Y este tipo se va a ir, tal vez pongámoslo a la cima también, en algún lugar aquí. Y este elemento también va a ir a la cima a algún lugar aquí. Y sólo voy a asegurarme de que todos estos tipos estén muy bien alineados. Entonces por supuesto, esta suma, como este rectángulo blanco necesita ir a la cima. Esta va a ser nuestra máscara en elemento. Así que voy a agarrar todos estos elementos y podemos ir al menú Objeto y elegir Máscara con Forma vieja simplemente o simplemente usar el atajo Shift plus Control más M. Entonces no es esto, esto está enmascarado. Así que lo voy a traer aquí. Entonces aquí abajo a algún lugar, a algún lugar por aquí, esto debería ser, esto debería ser un poco mejor. Por lo que ahora necesitamos algún tipo de navegación aquí. Así que sólo voy a agarrar la herramienta de la pluma. Y simplemente voy a crear, manteniendo presionada la tecla Shift como una, como una cabeza de flecha que va a verse así. Hagámoslo blanco. Y hagámoslo significativamente más grueso, pero tal vez más pequeño a algo como esto. Y lo voy a poner en algún lugar aquí. Por supuesto, también podríamos ponerlo aquí a un lado. Pero yo sólo, solo, sólo me gusta aquí. Entonces siguiente, sólo voy a clonar a un costado. Así que mantengo presionadas tanto las teclas Shift como las Alt. Y desde el panel de transformación aquí mismo, solo voy a elegir flip horizontal. Y cuando seleccionamos todos estos elementos en este momento, podemos simplemente como distribuirlos horizontalmente. Y a lo mejor voy a agruparlos por ahora porque solo quiero asegurarme de que estén bien en el centro. Y ahora podemos desagruparlos. Ahí vamos. Lo que tenemos que hacer en este momento es que necesitamos crear un componente a partir de nuestra máscara. Y esta pequeña flecha y estas pequeñas flechas en las flechas izquierda y derecha. Así que sólo voy a hacer que sea un componente. Y en efecto este es nuestro estado predeterminado, pero necesitamos un par de estados más en realidad. Así que voy a añadir un nuevo estado que se va a llamar diapositiva uno. Y en este estado, si sólo tratamos de llegar a nuestra máscara, sólo tenemos que agarrar este rectángulo, este rectángulo, y este rectángulo. Entonces todas estas imágenes y simplemente moverlas a un lado a algún lugar aquí. Entonces a continuación, voy a sumar un nuevo estado. Y va a ser nuestra diapositiva a través de re no porque el estado predeterminado es en realidad nuestra diapositiva, diapositiva para gustar en este grupo. Entonces nuestro tobogán tres va a ser, déjame agarrar de nuevo la máscara, todos estos tipos y simplemente moverlos a un lado a algún lugar aquí. Entonces estado predeterminado, diapositiva uno, por lo que el izquierdo, imagen izquierda, diapositiva tres, la imagen de la derecha. Por lo que ahora podemos ir al panel prototipo. Y aquí, todo lo que tenemos que hacer esto. Tenemos que gustar decirle a las flechas que apunten a un estado específico. Entonces en el estado predeterminado, quiero agarrar esto. Empecemos con la flecha izquierda. La flecha izquierda cuando estamos en este estado, al hacer clic, necesita ir a la diapositiva, la primera diapositiva. Entonces voy a sumar una interacción. Va a haber tap, auto animate, y voy a elegir Slide uno. Y este camino, esta flecha va a tener una interacción y auto animar, elegir tablero de arte. Y vamos a ir con el tobogán tres. Así que ahora cuando hacemos clic en la Flecha Izquierda, vamos a ir a la diapositiva uno. Y la flecha derecha, al hacer clic, nos va a llevar a esta diapositiva tres. Pero tenemos que hacerlo por todas las diapositivas. Así que voy a ir al modo de diseño. Y en el componente, voy a elegir diapositiva uno de vuelta al prototipo. Y aquí, cuando hacemos click en esta diapositiva, esta flecha izquierda. Entonces cuando se hace clic este tipo se supone que nos lleve a nuestra tercera diapositiva porque estamos creando algo así como un bucle infinito aquí. Y este tipo, por lo que la flecha derecha, al hacer clic, se supone que nos lleva al estilo predeterminado, que es nuestra segunda diapositiva. Y el último tipo es nuestro tobogán tres. Por lo que de nuevo prototipo. Y aquí, cuando pinchemos, bueno, vale, empecemos con éste. Entonces cuando hacemos clic en la flecha derecha, se supone que nos lleva a esta diapositiva, una. Y cuando hacemos click en ese camino cinco, así que nuestra flecha izquierda, este tipo se supone que nos lleve a nuestro estado predeterminado y yo estoy, no estoy jugando con estas cosas. Ahora como la duración cuando se establece por defecto así, creo que se ve bien. Así que ahora podemos en realidad, cuando vuelvo al diseño, diseño y lo configuro al estado predeterminado, simplemente podemos comprobar cómo va a verse. Entonces este es nuestro estado por defecto. Vamos a hacer clic una vez. Vamos a volver a con respecto a la diapositiva a la diapositiva uno, haga clic de nuevo, deslice tres de nuevo, nuevamente. Y como se puede ver, todo está muy bien, muy bien funcionando. Pero aún hay dos cosas que tenemos que hacer bien, en primer lugar, necesitamos poder cancelar fuera de este carrusel de imagen. Entonces para eso, voy a ir al prototipo. Y aquí podíamos sumar como un, como un símbolo X. Pero quiero que aprendas como otra, una técnica diferente. Estoy seleccionando todo mi tablero de arte y voy a añadir una interacción. Pero en lugar del gatillo del grifo, voy a ponerlo a perder y ganar Pad. Y aquí podemos simplemente presionar una tecla para básicamente hacerla como un disparador para nuestra interacción. Así que quiero simplemente, quiero que el usuario pueda simplemente presionar la tecla Escape en el teclado para simplemente cancelar fuera de esto, de este tablero de arte. Así que sólo voy a presionar Escape. Y nuestro destino es nuestra página de inicio. Y también cuando vayamos a nuestro, voy a ir al diseño y voy a agarrar este componente, ir al estado de hover, entonces, y luego volver al prototipo. Entonces cuando alguien hace clic en este componente, voy a agregar una interacción. Y esa interacción va a ser aprovechada. Quiero que él o ella sea dirigido a nuestro carrusel de imagen. Así que voy a volver al diseño. Por lo que ahora solo quiero que entiendas que todo este patrón de interactividad aquí. Así que sólo voy a desplazarse hacia abajo a nuestra cartera. Cuando pongo el cursor sobre él, se puede ver que esta animación está sucediendo. Haga clic en él. Vamos a ir a nuestro carrusel de imágenes. Y por supuesto aquí, tenemos nuestro carrusel funcionando y presionamos Escape para volver a nuestra página principal. 41. Empecemos a agregar la sección de blog: Muy bien, así que tenemos nuestra sección de portafolio creada aquí mismo. Y si te das cuenta, ya me he gustado simplemente alargar mi, mi tablero de arte. Así que acabo de agarrar el tablero de arte y simplemente lo hice un poco más largo. Porque aquí, ahora mismo quiero añadir otra sección. Y esa sección va a ser nuestro blob. Pero como estamos empezando a agregar bastantes cosas aquí, creo que es una buena idea hacer alguna limpieza básica en esta etapa de nuestro diseño. Entonces si queremos y seleccionar todos estos elementos e ir a nuestras capas, se puede ver que tenemos, todos estos elementos simplemente se están poniendo en nuestra página de inicio, su tablero de arte. Y no lo quiero no quiero que se vea así. Sólo quiero agruparlos. Así que sólo voy a presionar Control G en mi teclado. Y lo voy a llamar como cartera, sección, así. Entonces voy a tratar de agarrar todos estos elementos. Por lo que no les gusta la sección de servicios. Entonces estos son todos estos elementos. Voy a agruparlos de nuevo. Y este tipo va a ser como Sir, sección de servicios. Y luego voy a agarrar todos estos elementos. Entonces estos tipos de aquí mismo, voy a agrupar y los voy a llamar como nav plus sección héroe. Y de esta manera, cuando tengas esto, bueno, cuando vas a estar trabajando con ellos con este expediente específico que te voy a proporcionar. De esta manera, estoy manteniendo las cosas organizadas, pero también lo mantengo organizado para ti. Así que como vas a estar trabajando con este expediente, creo que va a ser más fácil para ti entender lo que es todo aquí. Por lo que ahora en realidad podemos empezar a crear nuestra sección de blog. Y quiero que sea diferente a esto de la sección de cartera anterior. Así que sólo voy a la Herramienta Rectángulo, crear un rectángulo que se vea más o menos así. No quiero que tenga ninguna frontera, pero sí quiero que tenga un relleno. Estoy pensando que va a ser un poco más oscuro. Entonces cuando nos desplazamos hacia abajo, puede ver que simplemente se ve mucho más diferente que en la sección anterior aquí mismo. Y por supuesto, todo lo que tenemos que hacer aquí es agregar algún tipo de título con la herramienta de texto. Sólo voy a escribir algo como aquí está mi blog. Y me gusta el color blanco, pero quiero asegurarme de que el tamaño sea igual que los títulos de sección anteriores. Entonces es un sub cuatro medio. Y por supuesto que se sienta aquí mismo en nuestro, en nuestros activos. Pero si hacemos clic en los activos, se puede ver que el color cambia. No quiero eso. Me gusta esto. Bueno, el pulmón blanco va a cuello blanco aquí, color claro. Y quiero que vaya al centro, tal vez como un poco a la cima. También podríamos agarrar esto, este tipo de aquí mismo. Entonces el subtítulo, y también tal vez cuando esté aquí, solo voy a agarrar estos elementos también. Y voy a copiarlos y pegarlos aquí abajo y ponerlos en algún lugar aquí. Entonces, por supuesto, el color de este tipo tiene que ser blanco también. Y por lo que van estos chicos, lo que quiero hacer con estos es simplemente quiero convertirlos en categorías similares de mi blog. Solo quiero mostrar que, ya sabes, que tengo posts como ahí como categoría de diseñador web, desarrollo web, SEO, todas esas cosas. Entonces sí quiero tener como este botón Todo aquí mismo, pero voy a cambiar su color a tal vez como este tipo. Y estos tipos. Veamos. Creo que este es este color gris. Sí, lo es. Creo que se ve bien. ¿Sabes qué? Creo que se ve bien y definitivamente va a ser consistente. Pero sólo voy a cambiar el texto a categoría, tal vez como uno. Ahí vamos. Y por supuesto que necesita ser un poco más grande. Este tipo. A lo mejor podemos simplemente copiar a este tipo y pegar el, pegar a este tipo n Y van a ser dos. Y este tipo va a ser de categoría tres. Ahí vamos. Y por supuesto que necesita ser un poco más grande así. Entonces todo lo que tenemos que hacer en este momento es simplemente seleccionar todos estos elementos. A lo mejor sólo voy a traerlos y seleccionarlos y simplemente asegurarme de que estén bien distribuidos al centro. De acuerdo, así que tenemos nuestros primeros pasos en creación de esta sección de blog detrás de nosotros. Y creo que en el siguiente video realmente podemos empezar a agregar los extractos de la entrada del blog. 42. Empecemos a agregar los fragmentos de las publicaciones del blog: Por lo que al igual que en el caso de nuestro portafolio, podemos agregar nuestros extractos de post de blog. Primero, encienda la cuadrícula de diseño así. Y ahora simplemente podemos decidir cuántos, cuántos fragmentos de publicación de blog queremos aquí. Así que vamos a crearlos rápidamente como una, como una maqueta de nuestros extractos de post de blog. Sólo voy a agarrar la herramienta rectángulo. Y digamos que voy a crear algo como esto, tal vez sólo un poco más pequeño así. Y entonces solo puedo agarrar mi rectángulo y tal vez imitar algo así como un título. Y entonces solo lo voy a agarrar una vez más y simplemente hacerlo como más grande, algo así. Entonces esto sería básicamente nuestro como un nulo. Esta será nuestra imagen, este sería nuestro título y este sería nuestro, básicamente dejar algunos, algo así como un extracto de nuestra entrada de blog. A lo mejor voy a traerlo un poco aquí abajo. Pero también creo que podríamos añadir algo que antes no nos gustaba. Así que sólo voy a copiar a este tipo a la cima y lo voy a hacer más pequeño, como significativamente más pequeño. Y esto básicamente podría imitar nuestro nombre de categoría a la izquierda y tal vez como una cita a la derecha. Y tal vez sólo voy a traer a este tipo sólo un poco aquí arriba. Y entonces lo que podríamos hacer es que simplemente pudiéramos agarrar todos esos elementos, Klong ellos a un lado. Y entonces una vez más para ver si en realidad sí queremos uno de estos tipos para mirar algo, algo como esto, cualquier cosa que tres será suficiente. Pero quiero agarrar estos elementos. Entonces simplemente los elementos del texto, por así decirlo. Voy a traerlos a algún lugar aquí. Y voy a hacer a este tipo sólo un poco más de tiempo. Así que tal vez incluso un poco más o algo así. Sólo para que lo sepas, sólo para que no se vea como en una parrilla super, súper uniforme, incluso, quizá incluso un poco más. Entonces dos, algo así. Y también voy a agarrar estos elementos, llevarlos a algún lugar aquí, e imprimir a este tipo a algún lugar aquí. Entonces esto básicamente sería nuestro como un diseño de cuadrícula. Pero también podríamos agarrar todos estos elementos a excepción del fondo. Y creo que mi trasfondo no se está poniendo correctamente así. Así que permítanme ahora solo hacer este fondo un poco más largo. Entonces se ve más o menos así. Ahora simplemente podríamos gustar jugar con el posicionamiento de nuestra celda de rejilla sin el fondo. Así que sólo voy a clonar a estos tipos. Mantengo presionada la tecla Alt. Voy a clonar para que me guste a algún lugar aquí. Entonces voy a agarrar a estos tipos. Entonces estos elementos a excepción del fondo, supongo que tal vez podríamos gustar bloquear el fondo. Entonces este es nuestro rectángulo aquí mismo. Este es nuestro trasfondo. Así que sólo voy a cerrarlo. Y ahora solo podemos agarrar a estos tipos y simplemente clonarlos en algún lugar para decidir. Esto debería ser, esto debería estar bien. Ahora déjame agarrar estos elementos y clonarlos a la pared, al fondo en algún lugar de aquí. Entonces esto básicamente sería algo así como una, como una grilla para nuestra, para nuestros elementos. Y puedes jugar con, con rejillas como estas para que lo sepan, por lo que se ven justo como te gustaría que se vean. Y básicamente lo que necesitamos aquí es simplemente convertir estos como estos elementos superiores en imágenes destacadas. Y por supuesto, no quiero que este tipo tenga frontera. Yo tampoco quiero que este tipo tenga frontera. A lo mejor sólo voy a seleccionar a todos ellos y simplemente asegurarme de que ninguno de estos tenga fronteras realmente así. Así que ahora sólo puedo seleccionar tal vez como este rectángulo. Nuevamente, paxos. Así que vamos, intentemos no me gusta encontrar algo así como un diseñador tal vez esta vez. Hagamos tal vez como este tipo. Ahora tal vez hagamos a esta chica aquí mismo. Entonces veamos, tal vez hagamos algo. Tal vez como este tipo. Entonces vamos a hacer, vamos a cargar más. Y agreguemos el diseñador de moda aversión Angus. Y nada, claro es sólo la representación es sólo una maqueta. Tal vez hagamos este tipo. Y por último, este de aquí mismo. El siguiente paso aquí sería simplemente agregar texto a nuestros títulos, como títulos de maqueta y maqueta como acepta. Así lo haría el plug-in correcto. Por lo que Lorem Ipsum plugin, solo podemos llenarlo con texto de placeholder. Y por supuesto que necesita ser más grande. Entonces vamos a nuestros activos. Vamos a intentar así, un sub medio 36, y hagámoslo blanco así. Y supongo que como en este punto, tal vez podríamos simplemente encender, apagar la rejilla de diseño así para que puedas ver mejor cómo es lo que está pasando aquí mismo. Supongo que lo es. Vale, tal vez incluso podríamos añadirlo como un activo así. Hagámoslo, en lugar de como SF-36, hagamos blog post o me gusta x, o tal vez el título de la publicación del blog. Así. Podríamos hacer lo mismo aquí. Entonces plugins, última configuración, este tipo. Nuevamente, mi título de entrada de blog. Tal vez intentemos encontrar algo así como un texto diferente. Pero de nuevo, voy a ir a mis plugins residuo como Lorem Ipsum. Y hagamos nuestro título de publicación de blog. Hagamos lo mismo aquí. Entonces Lorem Ipsum, Alice, acaba de agregar, agregó aquí y luego aquí. Y entonces podemos simplemente cambiar click sobre estos chicos. Tal vez eso va a ser un poco más rápido y simplemente cambiar el color. Entonces se ve más o menos así. Ahora podemos hacer lo mismo con estos tipos. En realidad vamos a ver si yo, si selecciono todos estos elementos, todos estos rectángulos, voy a ir al plugin. Veamos si es lo suficientemente inteligente como para agregar texto a todos estos. Entonces hagamos un rápido Lorem ipsum. El a fue sobre cómo podemos asumir sentirse como tal vez encontrar una mejor fuente para esto. Así que sólo voy a empezar con como tal vez un sub 16. Y voy a cambiar el color a blanco. Pero supongo que como este extracto es tal vez como un poco demasiado grande. Y tal vez probemos algo así como 22. Y hagamos como 32k, tal vez eso se vea un poco mejor. Entonces del 20 al 32, vamos a añadirlo a nuestros estilos de personaje, y hagamos un extracto de blog así. Entonces entonces sólo podemos seleccionar estos elementos subyacentes mientras esto, estos fragmentos. Y solo hagamos un extracto de entrada de blog así y se ve mal. De acuerdo, tal vez, tal vez estos resultados extra son un poco demasiado largos, pero siempre podemos saber como tal vez transformarse de ellos, los hizo lucir un poco diferentes, algo así. Y tal vez este tipo también a algo como tal vez como tres líneas o dos líneas. Lo mismo con estos tipos. Por supuesto. Entonces tendríamos que simplemente no como traerlos un poco arriba. Lo mismo para estos tipos y lo mismo para estos tipos. Por supuesto, lo último que hay que hacer aquí sería agregar como fecha y nombre de categoría silicico. Estos como metadatos suelen ser como más pequeños. Y también se pueden escribir en una fuente diferente, pero en un lípido, diferente color de fuente. Entonces voy a conservar estos elementos, por lo que estos dos rectángulos. Y sólo voy a añadir como un pedazo de texto en algún lugar aquí en el centro. Y voy a escribir como nombre de categoría. Ahí vamos. Voy a cambiar su color a tal vez, vamos a ver si este tipo va a trabajar. Por supuesto, necesitamos cambiar el color de fondo, pero por ahora, sólo voy a ponerlo en algún lugar aquí. Y voy a hacerlo significativamente más pequeño, como algo así como 12 quizá, o tal vez 14. Esto debería ser suficiente. Y hagamos que estos tipos se vean algo así como esta frase. Este tipo es como realmente, muy pequeño. Sólo voy a ponerlo en algún lugar aquí. Y voy a escribir en fecha. Esto debería estar bien. Tal vez como podría este nombre de categoría. Sólo voy a escribir como un espacio. Y entonces creo que se llama como un símbolo de pipa y no algo así. Y tal vez ahora sólo voy a escribir en fecha. Eso sería quizá un poco más fácil para nosotros. Y veamos si va a ser realmente visible. Es algo visible, pero tal vez podamos hacerlo un poco más visible. Así que hagámoslo un poco más ligero a algo así. Entonces todo lo que realmente tendríamos que hacer es tal vez traer a este tipo. Entonces, pero hasta llegar a algún lugar aquí. Y creo que se ve bastante bien. Entonces en realidad, todo lo que podíamos hacer ahora es simplemente agarrar tal vez incluso todos estos elementos y simplemente copiarlos. Y simplemente podemos reemplazarlos por estos tipos aquí mismo. Sé que estamos dando tal vez incluso como un poco demasiados pasos aquí, pero solo quería mostrarte el proceso de conceptualizar las cosas, cosas como estas. Por supuesto, con el tiempo, vas a encontrar como, ya sabes, tus propias mejores formas de hacer estas cosas. Así que sólo voy a agarrar a estos tipos y quitar todos estos elementos así. Sólo voy a pegar a estos tipos. Pero solo creo que es simplemente como un buen ejercicio para nosotros simplemente pasar por estos pasos que saben como tal vez con el tiempo, vas a pensar que son como innecesarios, que sean excesivos. Pero ya sabes, esto es, creo que es sólo una buena manera, una buena manera de aprender a, cómo crear rejillas, cuadrículas como estas. Así que déjame asegurarme de que estoy copiando todo lo que necesito para copiar. Voy a basarlos en algún lugar aquí y tienen que ir aquí. Así que sólo voy a ponerlo así. Esto debería estar bien. Voy a cortar a estos chicos, quitar estos elementos y luego pegarlo en. Sam va a ir por estos elementos. Así que de nuevo, voy a sólo pegar a estos tipos aquí y llevarlos a un lado. Debe lucir bien, y de nuevo, cortarlos, quitar estos elementos, pegarlos de nuevo. Y sólo voy a pegar a estos tipos, ponerlos aquí, cortarlos, y reemplazarlos con estos L, quitarlos y reemplazarlos por bote con nuestro, con nuestros elementos de rejilla. Entonces el último paso aquí será agregar como un botón que diría que no, como aprender más o como leer más, tal vez eso sería mejor. Así que sólo voy a pedir prestado eso de nuestra sección de servicios. Y déjame asegurarme de que estos tipos estén bien establecidos al centro. Entonces en lugar de aprender más tierras tipo dolor, vamos a teclear y leer más. Esto debería ser, esto debería estar bien. Y ahora solo veamos cómo se ve cuando lo previsemos en nuestro diseño principal. Creo que se ve, vale, claro. Entonces lo que necesitamos en este momento es simplemente prototipo algunas de estas cosas. Quiero decir, queremos, por ejemplo, cuando hacemos click en cualquiera de estos elementos, queremos ir a nuestro blog principal, entrada de blog. O cuando hacemos clic en el botón Leer más. Y como pueden ver, necesito cambiar a ese tipo por el estado de hover también. Entonces cuando hacemos clic en el botón Leer más, déjame simplemente copiar a este tipo. Queremos ir a nuestra, a nuestra sub página del blog. Pero eso es algo que creo que vamos a hacer en el siguiente video. 43. Pongamos páginas de blog: Genial, Así que tenemos nuestro blog post extractos aquí en nuestra portada. Y cuál ahora sería el momento adecuado para crear realmente un solo diseño de entrada de blog. Y también como una sub página con nuestras publicaciones de blog. Entonces normalmente eso es lo que haríamos. Pero lo que pasa es que al hacer eso no nos gustaría, aprender más cosas nuevas para crear ese tipo de páginas. Podrías usar todas las técnicas que ya hemos aprendido. Pero por supuesto, no significa que no vamos a estar mirando alguna publicación de blog las páginas y no, no las vamos a explorar y explicar cómo crearlas. Entonces lo que hice fue, es que rápidamente he creado para ti páginas de bloqueador separadas. Así que pasemos rápidamente, pasemos por esos diseños. La primera página de blog que he creado, se puede ver aquí mismo. Entonces por supuesto, en la parte superior conseguimos nuestro logo y tiene el mismo logo que agregamos a nuestra portada. Y lo mismo va para la navegación. Y necesitamos eso. Tenemos una simplemente una foto. Estoy con una opacidad volteada a algo alrededor del 15 al 16 por ciento. Por supuesto, un sobre que nos dieron como un título de página y subtítulo. Entonces esto sería como un ejemplo de Héroe, sección héroe para nuestra subpágina del blog. Ahora debajo de eso, se puede ver que he creado todo que básicamente han agregado las categorías. Por lo que estas son básicamente las mismas categorías que podemos ver en primera página. Y estado por debajo de eso, he añadido simple como un mosaico de esos post de blog o extractos. Pero aquí abajo, he creado algo un poco diferente. Entonces en algunas páginas, en algunos diseños, se puede ver algo así como un botón Load More. Existen diversas formas de cargar más publicaciones de blog. Se puede ver algo así como una técnica de carga perezosa pasando. Lo que significa que una vez que desplácese hacia abajo, verá cada vez más publicaciones de blog que se están cargando. Pero también puedes ver algo así como un botón Load More. Y en realidad este es un componente, como se puede ver aquí mismo. En realidad podríamos llamarlo como botón Load More. Y este componente tiene dos estados. Entonces este es el estado predeterminado y tenemos la carga estado Morris, que básicamente nos muestra algunos posts más. Y ese botón cambia de cargar más para conocer más posts mostrándonos que ahora básicamente hemos llegado al final de la lista. No hay más publicaciones disponibles. Y si acabamos de prever este diseño, así que vamos a bajar, por cierto, como se puede ver, este tipo, esta navegación está funcionando igual que las anteriores. Entonces cuando bajamos, cuando hacemos clic en este botón Cargar más, se puede ver que tenemos más publicaciones se presentan aquí mismo. Y por supuesto, he dejado un poco de espacio aquí abajo para nuestro básicamente nuestro pie de página. Todavía no lo creamos. Pero una vez que lo hagamos, vamos a hacerlo, lo vamos a añadir a nuestro post de blog. Bueno, blog, blog sub página. Y por supuesto que tiene que ser igual en todas las páginas. Así que acabo de dejar alguna habitación aquí abajo desde mi página de blog, diseño alternativo. Básicamente añadí la misma sección de héroes. Pero cuando bajamos, se puede ver que tengo algo así como una publicación de blog destacada aquí. A la izquierda obtenemos nuestra imagen de héroe. Después nos dieron este nombre de categoría y fecha marcador de posición, nos dieron el título, nos dieron el subtítulo sub. Y a la derecha aquí abajo tenemos el seguir leyendo un botón que al hacer clic. Y si bien este enlace nos llevaría a una sola, una sola entrada de blog. Por lo que aquí abajo conseguimos las categorías. A lo mejor sólo voy a venir a algún lugar aquí. Y luego tenemos básicamente el mismo mosaico que antes. No obstante, aquí abajo vas a ver que tenemos, bueno, no tenemos ese botón Load More yano tenemos ese botón Load Morepero tenemos una paginación. Así que cuando nos demos una vista previa a este tipo en ti baja. Se puede ver que cuando se pasa el cursor sobre estos elementos, estos chicos se ven como este elemento activo aquí mismo. Entonces como dije, cuando hacemos clic en este botón seguir leyendo aquí mismo, vamos a ser dirigidos a una sola, una sola página de entrada de blog. Y este es el diseño que se me ocurrió. Sólo un viejo condimento cosas arriba, o al menos hacerlas un poco más diferentes. No tan aburrido. Esto ya no es como oscuro. Es como más ligero justo ahora, solo para que tengamos alguna variedad aquí. Pero por supuesto, esta navegación y logotipos son los mismos. Aquí tenemos la imagen destacada. Y aquí abajo conseguimos nuestros marcadores de posición de nombre de categoría y fecha. Tenemos el título, tenemos el texto principal aquí abajo. Y luego conseguimos algunos elementos típicos de la entrada de blog individual. Tenemos el número de me gusta. Llegamos a los iconos de las redes sociales, luego nos dieron el cuadro de comentarios, obtuvimos el básicamente los comentarios. Entonces tenemos como una simple navegación. Entonces para los posts relacionados, podemos, tal vez si solo acerco a estos chicos, se puede ver que tenemos como un enlace post anterior con un título maqueta del post anterior. Y nos dieron el siguiente enlace post también con un título. Aquí a la derecha. Tenemos la barra lateral. Y aquí simplemente conseguimos conocer nuestra, digamos que esto es, este es nuestro este es nuestro diseñador freelancer. Sé que esta es una foto diferente entonces de antes, pero en nuestra disciplina es simplemente agradable. Tenemos algunos sobre mí, bueno, tenemos básicamente estos títulos y sobre mí buscar los últimos posts, que son básicamente títulos para estos como subsecciones. Y por supuesto que tenemos la barra de búsqueda, tenemos las últimas publicaciones, tenemos las categorías, conseguimos la únete a mi newsletter, y nos dieron sígueme en redes sociales y estos enlaces aquí mismo. Y por supuesto, estos enlaces, si sólo hacemos clic aquí, estos son, estos son de la misma longitud que están en nuestra primera página y lo mismo va aquí. Entonces estamos básicamente, estoy tratando de mantener las cosas consistentes. Una vez que tenemos se crean todos estos elementos. Y como dije antes, ya sabes, no hice nada que no usáramos antes. No usé ninguna técnica que fuera como tú desconocida. Entonces solo quería mostrarte las variaciones que puedes hacer. Lo que puedes, qué puedes cambiar en tus diseños y cómo deberían ser tus diseños. Y por supuesto, tendrás este archivo de diseño de publicaciones de blog entregado a ti para que puedas simplemente descargarlo y ver cómo se configuró todo. Pero por supuesto, todavía necesitamos prototipos de algunas cosas. Entonces digamos eso. Digamos que queremos usar la página del blog para nuestra página de blog. Así que simplemente voy a tratar de simplemente seleccionar todo este tablero de arte y voy a copiarlo. Y aquí, sólo voy a tratar de pegarlo. Supongo que se puede sentar en algún lugar aquí. Por supuesto, también vamos a tener que gustar última instancia hacer que todo no responda. Entonces esta es nuestra página de blog, este tipo de aquí mismo. Y voy a hacer lo mismo por el solo post de blog. Así que voy a agarrar a este tipo y pegaré en algún lugar de aquí. Por lo que ahora en realidad podemos empezar a prototipar algunas cosas. Entonces primero voy a agarrar esto. Bueno, mi página principal, voy a ir al prototipo. Y aquí, solo quiero intentar agarrar mi enlace de blog. Así que este tipo de aquí, quiero agregarle una interacción y va a ser tap. Y este tipo, hagamos auto animar a este tipo que se supone que nos lleve a nuestra página de blog para nuestros extractos de post de blog. Tratemos de agarrar tal vez como éste. Como pueden ver, hice algunas cosas organizando. Habré organizado mis elementos en grupos. Entonces digamos que esta guía es blog extracto uno, va a tener una interacción que va a ser pestaña. Y nos va a llevar a un solo post de blog. Entonces esto es ahora, esto es algo que podríamos hacer por todos estos chicos, pero solo estoy mostrando, mostrártelo como ejemplo, como todos estos chicos quieren hacer click, deberían llévanos a una sola, sola página de blog. También creo que deberíamos agarrar como este enlace domiciliario, este tipo de aquí mismo. Y deberíamos agregarle como una interacción a ella. Y estoy pestaña, debería llevarnos a nuestra página de inicio. Página de inicio aquí mismo. Lo mismo para nuestro único blog. Así que de nuevo, la interacción no en el hover, en el grifo. Llévenos a la página de inicio. Y creo que también podríamos agarrar nuestro logo y también agregarle interacción de tap. Y nos debe llevar a una página de inicio es como una funcionalidad estándar. Ya sabes, cada vez que, cada vez que alguien está haciendo clic en el logotipo, esa persona debe ser llevada a la página principal. Y creo que sería mejor si lo hiciéramos como un componente normal para nuestro diseño principal, principal aquí mismo. Pero desde que me olvidé de ello, bueno, ahí vas. Esto, bueno, esto debería funcionar correctamente. Ahora. Veamos ahora cómo podrían verse nuestras interacciones. Así que vamos a mi blog. Entonces vamos a hacer clic en, digamos éste. Como puedes ver, estás siendo transportado a través de nuestra página principal, principal. Si hacemos click en el enlace Inicio, vamos a volver a nuestra página. Si hacemos click en el Blog, vamos a ser nuestro blog. Y claro que hay, este tipo también está trabajando. Y además si hacemos clic en el Logo, vamos a volver a nuestra página de inicio. Entonces supongo que el siguiente paso sería simplemente no hacer que todo responda. Pero en nuestro caso, sería como agarrar esto, agarremos a este tipo, este tablero de arte, haciéndolo como mucho más tiempo. Y entonces solo tendríamos que agarrar estos elementos y simplemente no apilar horizontalmente. Supongo que podríamos empezar con tal vez como hacer este fondo más pequeño. Y entonces podríamos simplemente traer a estos tipos al centro. Veamos cuán grandes eran estos tipos. Por lo que 34. Entonces hagamos 34. Hagamos a estos tipos más pequeños. Ahora básicamente, no estoy haciendo aquí nada que no habíamos hecho antes. Y creo honestamente que sería como un gran trabajo independiente para ti. Quiero decir, simplemente podrías hacer todo lo que se supone que debe hacerse en términos de hacerlos, estos tipos son receptivos. Y creo que sería como una gran tarea para ti hacer básicamente por tu cuenta. Sólo voy a mover rápidamente a estos tipos al centro, poner esto, poner a estos tipos al centro también, estas categorías. Y ahora podemos simplemente agarrar todos estos elementos y simplemente ponerlos, hacerlos sensibles, hacerlos más pequeños. Es sólo los tamaños. Y luego podemos simplemente pasar a nuestra siguiente sección. Por supuesto, una vez hecho esto y una vez que estos chicos también respondan, y de nuevo, por supuesto vas a tener este archivo para simplemente puedas ver cómo se verá todo. Y luego podemos simplemente pasar a nuestra sección. Siguiente sección que creo que va a ser algo así como un símbolo de Nike Acerca de mí. Sección. 44. Aprendamos algunos efectos de paginación: Lo que he decidido que tal vez sería una buena idea mostrarte cómo lograr esos efectos de paginación. Entonces, sí, así que empecemos con el botón Cargar Más primero. Como se puede ver, simplemente he copiado todos esos elementos de nuestro diseño principal aquí. Simplemente, sólo creo que podría ser un poco más limpio para nosotros trabajar con. También acabo de tener como tres extractos de entrada de blog justo aquí. Así que vamos, hagamos que empiece rápidamente agregando muchos más botones. Voy a agarrar la herramienta de texto, haga clic en algún lugar aquí, y sólo voy a escribir en carga más así. Por supuesto que lo voy a hacer un poco más visible para ti. Entonces hagámoslo blanco. No me preocupa demasiado la fuente en esta etapa porque, ya sabes, no es tan importante. Aunque supongo que simplemente podríamos imprimirlo a gusto lo antes posible. Y tal vez hagamos medio. Y hagamos como algo así como 26. Quizás aumentemos la pista a algo llamado U5, o tal vez viviendo como 50. Y también sólo voy a añadir un simple rectángulo que va a tener como un borde blanco. Ahí vamos. Y vamos a asegurarnos de que estén muy bien alineados con el centro. Entonces voy a agrupar a estos tipos. Entonces lo que queremos hacer aquí es que queremos mostrar más posts una vez que hacemos clic en este botón Cargar más, ¿verdad? Entonces creo que deberíamos empezar con sumar esos más post. Voy a derribar a este tipo aquí mismo porque queremos crear un componente con dos estados, ¿verdad? Así que sólo voy a mantener presionada la tecla Alt con este tipo seleccionado y la voy a traer aquí abajo a algún lugar aquí. Esto debería ser suficiente. Este tipo va a ir a algún lugar aquí. Y este tipo va a ir a algún lugar aquí. Esto debería estar bien. Lo que podríamos hacer es simplemente convertir todos estos elementos en este botón y estos tres fragmentos de post de blog en un componente. Entonces voy a sólo mantener presionada la tecla Shift, haga clic en todos estos tipos. Y simplemente voy a presionar Control K en mi teclado para crear un componente de este tipo. Vamos a llamarlo como cargar más publicaciones. Ahí vamos. Entonces este tipo necesita tener como dos estados para nuestro estado predeterminado, no queremos ver como estos elementos, así que no queremos ver a este grupo. Esto, en realidad, queremos ver a este grupo porque este es nuestro botón. Pero no queremos ver estos, estos tres grupos restantes. Entonces estas publicaciones, ¿verdad? Entonces estos tipos de aquí mismo, lo que voy a hacer es simplemente voy a bajar la opacidad todo el camino así. Y podríamos hacer cosas diferentes. Así que tal vez podríamos, veamos, quizá agarremos a este tipo correcto. Y lo voy a mover a un costado por aquí. Y voy a agarrar al tipo izquierdo y lo voy a mover a un costado solo para que parezca fuera de límites aquí mismo. Y el botón Cargar más tiene que ir a algún lugar aquí. Entonces este es nuestro, este es nuestro estado por defecto. Pero quiero sumar un nuevo estado. Y lo voy a llamar como tal vez como cargado, back post cargado. Hagámoslo como postes, deuda baja. Y en este estado, déjame agarrar el botón. El botón tiene que ir a algún lugar aquí y tiene que decir como no más publicaciones. Y por supuesto, esto tiene que ser más grande también, como algo como esto. Y por supuesto que necesitan ser puestos al centro. Este elemento necesita que su opacidad retorne al 100 por ciento. Lo mismo para este tipo. Y por supuesto que también necesita ir al centro. Me gusta, es como el lugar anterior, que sería como en algún lugar aquí. Y este tipo también. Entonces opacidad al 100 por ciento y su posición para colocarse, para que se ponga como en algún lugar, en algún lugar aquí. Y este tipo tiene que bajar significativamente, tal vez como en algún lugar aquí. Entonces este es nuestro cargado más estados. Por lo que ahora podemos prototiparlo en realidad. Así que voy a ir al espacio de trabajo prototipo. Y aquí, lo que quiero hacer es que quiero poner nuestro gatillo a nuestra carga más botones. Así que déjame agarrar este botón. Y en el grifo, quiero que este tipo se anime auto. Y quiero que vaya a puestos cargados, ¿verdad? Por lo que ahora cuando vamos a nuestro modo de vista previa, si futuro, si sólo hacemos clic en este botón Cargar más, se puede ver que estos barcos están muy bien animados en. Entonces esta es nuestra primera forma de sumar el efecto pozo como paginación. Añadamos ahora el segundo. Ya ves que tengo mi paginación estándar aquí mismo. Y lo que está pasando aquí es, bueno, antes que nada, tenemos nuestra página activa siendo indicada aquí mismo. Y cuando pasamos el cursor sobre cualquiera de estos números como este, sobre el efecto subyacente, como un efecto de fondo está sucediendo. Entonces veamos cómo podemos lograr eso. Así que sólo voy a agarrar la herramienta de texto y simplemente voy a recrear esta paginación. Hagamos como uno y tal vez repitamos grid. Entonces va a ser 12345. Esto debería ser suficiente. Voy a hacer que parezca algo tal vez como esto. Y voy a desagrupar la grilla porque ahora mismo solo voy a sumar rápidamente los números adecuados aquí. Entonces 12345. Por lo que nuestra página actual necesita ser como , bueno, necesita tener un fondo adecuado. Y simplemente podemos agarrar una elipse. Podemos crear una elipse. Y sólo voy a pedir prestado rápidamente ese color. Ahí vamos. No necesito frontera. Y este tipo tiene que ir todo el camino hasta allí, bueno, al menos detrás de nuestros números. Entonces esto debería ser, esto debería ser suficiente. Supongo. Esto debería verse bien. Así que ahora quiero gustar cada vez que pase el cursor sobre cualquiera de estos números, quiero ver como este círculo aparece debajo. Y de hecho, puede ser un círculo, aunque también nos podría gustar hacer, como un rectángulo redondeado siendo completamente redondeado Till forma un círculo. Hagamos eso en realidad. Entonces voy a agarrar un rectángulo y voy a crear uno que se vea más o menos así. Esto debería estar bien. Y por supuesto que quiero que este tipo tenga un Phil adecuado. Y quiero que vuelva a ir por debajo de mis números. Así que vamos a moverlo a algún lugar aquí. Y será buena idea hacer que estos chicos se centren y deberíamos convertirlo en un componente, ¿verdad? Entonces voy a agarrar ambos elementos y voy a presionar Control K en mi teclado para convertirlo en un componente. Vamos a tener un estado por defecto. Vamos a tener un estado de flotación. Entonces en el estado por defecto, nuestros antecedentes. Entonces este tipo, este rectángulo de aquí mismo, va a tener su opacidad girada simplemente a 0. Pero en el estado de hover, este rectángulo va a tener su opacidad girada todo el camino al 100 por ciento. Y es como el radio de esquina establecido a, vamos como 100% o 100. Piensa que esto debería ser suficiente. Así que ahora vamos a asegurarnos de que estado de este tipo esté configurado en defecto. Y vamos a prever a este tipo. Voy a bajar aquí. Y como pueden ver, cuando pasamos el cursor sobre él, este tipo se está convirtiendo en, bueno, podemos ver este círculo aquí mismo. 45. Pongamos la página de publicación única y terminemos la sección: Cuando hacemos clic en este botón seguir leyendo, aquí mismo, vamos a ser dirigidos a una sola, una sola página de entrada de blog. Y este es el diseño que se le ocurrió F. Simplemente, ya sabes, condimentar las cosas o al menos hacerlas un poco más diferentes. No tan aburrido. Esto ya no es como oscuro. Es como más ligero justo ahora, solo para que tengamos alguna variedad aquí. Pero por supuesto, esta navegación y logotipos son los mismos. Aquí tenemos la imagen destacada. Y aquí abajo conseguimos nuestros placeholders de nombre de categoría y fecha, y nos dieron el título. Tenemos el texto principal aquí abajo. Y luego conseguimos algunos elementos como, típicos de una sola entrada de blog. Entonces tenemos el número de me gusta. Llegamos a los iconos de las redes sociales, luego conseguimos el cuadro de los comunes, nos dieron el básicamente los comentarios. Y luego tenemos como una simple navegación. Entonces para los posts relacionados, podemos, tal vez si solo acerco a estos chicos, se puede ver que tenemos como un enlace post anterior con una maqueta, un título del post anterior. Y nos dieron el siguiente enlace post también con un título. Aquí a la derecha. Tenemos la barra lateral. Y aquí simplemente conseguimos conocer nuestra, digamos que esto es, este es nuestro este es nuestro diseñador freelancer. Sé que esta es una foto diferente entonces de antes, pero en nuestra disciplina es simplemente agradable. Tenemos algunos sobre mí, bueno, tenemos básicamente estos títulos y sobre mí buscar los últimos posts, que son básicamente títulos para estos como subsecciones. Y por supuesto que tenemos la barra de búsqueda, tenemos las últimas publicaciones, tenemos las categorías, consigue la únete a mi newsletter y nos dieron sígueme en redes sociales y estos enlaces aquí mismo. Y por supuesto, estos enlaces, si sólo hacemos clic aquí, estos son, estos son de la misma longitud que están en nuestra primera página y lo mismo va aquí. Entonces estamos básicamente, estoy tratando de mantener las cosas consistentes. Una vez que tenemos se crean todos estos elementos. Y como dije antes, ya sabes, no hice nada que no usáramos antes. No usé ninguna técnica que fuera como tú desconocida. Entonces solo quería mostrarte las variaciones que puedes hacer. Lo que puedes, qué puedes cambiar en tus diseños y cómo deberían ser tus diseños. Y por supuesto, tendrás este archivo de diseño de publicaciones de blog entregado a ti para que puedas simplemente descargarlo y ver cómo se configuró todo. Pero por supuesto, todavía necesitamos prototipos de algunas cosas. Entonces digamos eso. Digamos que queremos usar la página del blog para nuestra página de blog. Así que simplemente voy a intentar simplemente seleccionar toda esta mesa de trabajo y voy a copiarla. Y aquí, sólo voy a tratar de pegarlo. Supongo que puede sentarse en algún lugar aquí. Por supuesto, también vamos a tener que gustar última instancia hacer que todo no responda. Entonces esta es nuestra página de blog, este tipo de aquí mismo. Y voy a hacer lo mismo por el solo post de blog. Así que voy a agarrar a este tipo y pegaré en algún lugar aquí. Por lo que ahora en realidad podemos empezar a prototipar algunas cosas. Entonces primero voy a agarrar esto. Bueno, mi página principal, voy a ir al prototipo. Y aquí, solo quiero intentar agarrar mi enlace de blog. Así que este tipo de aquí, quiero agregarle una interacción y va a ser tap. Y este tipo, Hagamos auto animar. Se supone que este tipo nos lleve a nuestra página de blog para nuestros extractos de post de blog. Tratemos de agarrar tal vez como éste. Como pueden ver, hice algunas cosas organizando. Hubiera organizado mis elementos en grupos. Entonces digamos que esta guía es blog extracto uno, va a tener una interacción que va a ser pestaña. Y nos va a llevar a un solo post de blog. Entonces esto es un extraño, esto es algo que podríamos hacer por todos estos tipos, pero solo estoy mostrando, mostrártelo como ejemplo. Al igual que todos estos chicos, cuando hice clic, deberían llevarnos a una sola página de blog. También creo que deberíamos agarrar como este enlace domiciliario, este tipo de aquí mismo. Y deberíamos agregarle como una interacción a ella. Y estoy pestaña, debería llevarnos a nuestra página de inicio. Así homepage aquí mismo, lo mismo para nuestro único blog. Así que de nuevo, la interacción no en el hover, en el grifo. Llévenos a la página de inicio. Y creo que también podríamos agarrar nuestro logo y también agregarle interacción tap, y debería llevarnos a una página de inicio. Esto es como una funcionalidad estándar. Ya sabes, cada vez que, cada vez que alguien está haciendo clic en el logotipo, esa persona debe ser llevada a la página de inicio. Y creo que sería mejor si lo hiciéramos como un componente normal para nuestro diseño principal principal aquí mismo. Pero ya sabes, desde que lo olvidé , bueno, ahí vas. Esto, bueno, esto debería funcionar correctamente. Ahora. Veamos ahora cómo podrían verse nuestras interacciones. Así que vamos a mi blog. Entonces vamos a hacer clic en, digamos éste. Como puedes ver, estás siendo transportado a través de nuestra página principal, principal. Si hacemos click en el enlace Inicio, vamos a volver a nuestra página. Si hacemos click en el Blog, vamos a ser nuestro blog. Y claro que hay, este tipo también está trabajando. Y además si hacemos clic en el logo, vamos a volver a nuestra página de inicio. Entonces supongo que el siguiente paso sería simplemente no hacer que todo no responda. Pero en nuestro caso, sería igual que agarrar esto. Vamos a agarrar a este tipo. Por lo que este tablero de arte haciéndolo como mucho más tiempo. Y entonces solo tendríamos que saber, agarrar estos elementos y simplemente no apilar horizontalmente. Supongo que podríamos empezar con tal vez como hacer este fondo más pequeño. Y entonces podríamos simplemente traer a estos tipos al centro. Veamos cuán grandes eran estos tipos. Por lo que 34. Entonces hagamos 34. Hagamos a estos tipos más pequeños. Ahora básicamente, no estoy haciendo aquí nada que no habíamos hecho antes. Y creo honestamente que sería como un gran trabajo independiente para ti. Quiero decir, simplemente podrías hacer todo lo que se supone que debe hacerse en términos de hacerlos, estos tipos son receptivos. Y creo que sería como una gran tarea para ti hacer básicamente por tu cuenta. Sólo voy a mover rápidamente a estos tipos al centro, poner esto, poner a estos tipos al centro también, estas categorías. Y ahora podemos simplemente agarrar todos estos elementos y simplemente ponerlos, hacerlos sensibles, hacerlos más pequeños. Es sólo los tamaños. Y luego podemos simplemente pasar a nuestra siguiente sección. Por supuesto, una vez hecho esto y una vez que estos chicos también respondan, y de nuevo, por supuesto vas a tener este archivo para simplemente puedas ver cómo se verá todo. Y luego podemos simplemente pasar a nuestra sección. Siguiente sección que creo que va a ser algo así como un símbolo de Nike Acerca de mí. Sección. 46. Vamos a agregar la sección de "Acerca de mí": Antes de pasar a sumar en nuestra sección Acerca de mí, déjame simplemente mostrarte rápidamente lo que hice en términos de capacidad de respuesta con nuestros diseños de blog. Entonces en nuestro principal diseño de blog. Entonces este blog principal, ¿qué diseño móvil? Simplemente no me gusta configurar todo verticalmente. Así que yo sólo por supuesto, adaptado sobre el tamaño de las fuentes de las imágenes. Todas esas, todas esas cosas. Y he decidido simplemente ningún anuncio como este, botón Read More en el mismo que tenemos aquí mismo. En cuanto a nuestra página móvil del blog, como se puede ver, he añadido el logo aquí arriba y he agregado el menú móvil. Y luego acabo de ponerlo básicamente sobre las ideas de diseño de la página principal. Así que acabo de añadir la misma imagen en el fondo. He añadido el mismo texto y subtexto o subtítulo. Y luego acabo de agregar las categorías y por supuesto, las he apilado verticalmente. Y luego nos dieron los extractos del blog. Y esta vez acabo de agregar el botón Load More para que sepamos si alguien solo en un dispositivo móvil quiere ver más páginas, quiere cargar más publicaciones. Simplemente pueden hacer clic en el botón Cargar más. Y en cuanto a ellos, un solo bloque inmóvil. Así que déjame ir rápidamente. Ve aquí. Ahí vamos. Entonces tenemos, por supuesto, nuestro logo, obtenemos el menú, y luego tenemos la imagen destacada. A continuación. Acabo de agregar los metadatos, el título, y por supuesto el texto en sí. Y luego nos dieron nuestra sección de comentarios con los nombres, por lo que la posibilidad de agregar un comentario aquí mismo en este cuadro. Y luego conseguimos los elementos de la barra lateral que por supuesto ahora son como no en el lateral sino por debajo de estos elementos. Entonces conseguimos nuestra sección Acerca de mí, la sección de búsqueda, ese blog post extractos. Por supuesto obtenemos las categorías que el cuadro de búsqueda y por supuesto los iconos de las redes sociales. Y acabo de dejar rápidamente algún espacio para los elementos de pie de página que eventualmente vendrán a nuestro diseño. Una vez hecho todo lo que se hace, ahora estamos listos para pasar a sumar en nuestra sección básicamente, ya sabes, sobre nosotros. Entonces no va a ser como nada super, super funky. Aquí adentro. Sólo quiero añadir una imagen como tal vez a la derecha, algunos textos a la izquierda. Y a lo mejor voy a añadir algo de fondo a la imagen. Entonces lo primero que voy a hacer es simplemente voy a arrastrar en una imagen, y esta es una imagen que he tomado del pixel crudo. Entonces el mismo lado que usamos el antes, tal vez sólo voy a hacerlo un poco más grande. Y lo voy a poner como tal vez en algún lugar aquí. Quiero añadir un fondo a esta imagen. Y no quiero que sea un simple rectángulo, saber, ni una elipse. Sólo quiero, quiero que la forma sea un poco como irregular. Así que voy a agarrar la herramienta pluma y sólo voy a empezar a hacer clic como en algún lugar aquí tal vez ahora estoy manteniendo presionada la tecla Shift a algún lugar aquí. Y tal vez hagamos algo como esto. Y entonces así, entonces siempre podemos cambiarlo después. No creo que tengamos como un color de relleno como un relleno que sería como ideal para esto, para esta imagen. Y déjame simplemente mover esto de vuelta un paso al, bueno, al fondo. Tenemos algunos como algunos colores que podrían funcionar. Pero no estoy realmente seguro si hay grandes para este tipo de n, este tipo de imagen. Entonces lo que podríamos hacer es que quizá podríamos simplemente agarrar este trasfondo. Y sólo voy a presionar la tecla I en mi teclado para inicializar la herramienta cuentagotas. Y simplemente busquemos algo como esto. Esto podría verse tal vez un poco mejor. O tal vez solo intentemos conseguir algo del cabello. Tal vez algo más ligero, tal vez algo un poco más oscuro. Ahora podríamos estar haciendo esto. Sólo estoy tratando de encontrar como color que lo haría a la vez, como ir muy bien junto con el esquema de color que tenemos aquí en esta imagen. Pero al mismo tiempo, un poco como realmente ser como un fondo que separaría la imagen del fondo. Así que nos vamos a quedar con este tipo. Pero creo que podríamos trabajar un poco bien en esta imagen, en este fondo justo aquí. Así que simplemente voy a hacer doble clic en el interior, lo que básicamente me permitirá controlar los puntos de anclaje. Tal vez podríamos como tal vez traer a este tipo a algún lugar aquí. A lo mejor podrías seleccionar a este tipo y simplemente voy a presionar Eliminar para simplemente ir y deshacerme de él. Y voy a mover a este tipo a un lado incluso un poco más. A lo mejor este tipo también y hablar con el fondo. Podríamos tal vez el tipo de Brenda un poco arriba. Y entonces tal vez voy a agarrar la imagen y voy a hacerla significativamente más grande. Entonces se ve. Más o menos así. Ahora solo quiero tener algo así como diferente. Sólo quiero no quiero tener como solo líneas rectas como la nieve, como dividir nuestras secciones además, ya tenemos alguna sección ligera dividida, dividida aquí mismo. Entonces supongo que podría, podría funcionar así. Ahora por supuesto, podríamos, podríamos saber simplemente tratar de encontrar el equilibrio perfecto entre, entre este ser funky. Y ahora a diferencia de no demasiado llamativo, quiero decir, es, no quiero que atraiga demasiada atención. Esto es ahora, esto es sólo el fondo, pero no quiero que sea demasiado aburrido al mismo tiempo. Entonces a veces solo es cuestión de encontrar el equilibrio adecuado. Por lo que ahora voy a agarrar la herramienta de texto y voy a hacer clic en algún lugar aquí y simplemente teclear algo así como de mí. Y hagamos esto un poco más grande. A lo mejor voy a hacerlo un poco más audaz esta vez. Voy a hacerlo como 54. Y hagámoslo como tal vez leer. Tal vez déjame ver con este tipo. Era medio 54 sólidos, el medio. Creo que la diferencia entre medio y negrita no es tan enorme. Entonces supongo que podemos dejarlo así. Voy a ponerlo en algún lugar aquí. Y entonces tal vez sólo voy a pedir prestados algunos textos de estos tipos. Así que sólo voy a agarrar este rodillo y epsilon. Voy a pegarlo como en algún lugar aquí. Por supuesto, este tipo necesita ser un poco más visible. Así que voy a lograrlo, hagamos que este tipo como 22. Voy a hacerlo un poco como Boulder. Y vamos a mentir vienen 30 en cuanto a su altura de línea. Y puede ser que lo voy a hacer un poco más pequeño y ponerlo en algún lugar aquí. Y entonces tal vez podríamos gustar clonar y abajo en algún lugar aquí y hacerlo un poco más grande. Y luego clonarlo una vez más. Pero hacer a este tipo tal vez como pero más pequeño. Entonces se ve más o menos así. Entonces digamos que tenemos suficiente texto, Suficiente sobre mutex. Y a lo mejor sólo voy a agarrar la herramienta pluma de nuevo. Y tal vez sólo voy a crear algo así como una línea recta. cierto, mantengo presionada la tecla Shift. Y esa línea se va a ver más o menos así. Y quizá hagamos la frontera. Vamos a darle un color adecuado. Pero como se puede ver, desafortunadamente, no podemos simplemente cambiar el color del borde así. Así que voy a copiar y pegar ese código hexadecimal en una ambulancia para parecer algo así como 33 puntos por el tamaño. Esto debería ser suficiente. También me voy a agarrar nuestros iconos, así, íconos de redes sociales, estos chicos de aquí mismo, déjame probarlo. Agarralos correctamente. Tal vez sería mejor si solo los agarráramos del panel de capas. Así que creo que va a ser este tipo, así que sólo voy a copiarlos. Voy a bajar a algún lugar aquí y pegarlos. Y muévalos aquí abajo a algún lugar aquí. Ahora, si quieres que tal vez te guste hacer este tipo Justin boulders. Así que tal vez sea como algo así como una pista aquí, pero creo que debería ser aún más audaz que esto. Supongo que se vería bien. Tal vez quisiera romper la monotonía de estos, de estos párrafos. Y creo que se ve, se ve bien, así que a continuación por supuesto, todo lo que necesitamos es simplemente agarrar estos elementos, tal vez sin la imagen por ahora. Y tenemos que ponerlos aquí en nuestra versión móvil. Pero antes de que hagamos eso, solo agarremos todos estos elementos. Entonces todos estos tipos, voy a agruparlos y los voy a llamar por mí así. Y también voy a agarrar tal vez como sólo estos, tratar de agarrar sólo estos elementos. Así que va a ser como iconos y este Lorem Ipsum. Creo que estos son estos párrafos. Y el camino sin la imagen, creo que va a estar bien, así que no este camino, sino este camino. Y voy a agrupar a estos tipos. Vamos a llamarlo como de mi texto. Y sólo voy a copiar esto sobre mi texto. Y voy a tratar de pegarlo en algún lugar aquí y vamos a moverlo hacia abajo. A lo mejor podríamos traer de vuelta la, nuestra cuadrícula de diseño. Vayamos aquí abajo. Y simplemente voy a agarrar a este grupo y voy a tratar hacer todo más pequeño que se vea más o menos así. Supongo que deberíamos agarrar esto como intermareal y son 34 medios. Entonces hagámoslo 34 medio. Y pongámoslo exactamente en el centro. Entonces voy a tratar de ponerlo en el centro. Lo mismo para este tipo. Quizás también podríamos agarrar estos párrafos y ponerlos al centro también. Creo que los íconos están bien. Por lo que ahora tenemos que agarrar la imagen. Entonces este tipo de aquí mismo y los antecedentes. Así que sólo voy a copiar esos y romperme como tratar de encajarlo aquí así que sólo se ve bien. Entonces voy a tratar de hacer que estos tipos sean más pequeños. Mezcla, algo así. Y vamos a moverla aquí arriba. Vamos a llevar a este tipo sólo a la avería. Puede tal vez sin la, sin la rejilla de diseño móvil, se verá un poco mejor. Tal vez incluso podrías intentar hacer que la imagen un poco más grande. Ahí vamos. Tenemos creada la sección Acerca de Nosotros. Y sé que no es nada demasiado elegante, pero al menos tuvimos la oportunidad de aprender a modificar puntos de anclaje dentro de las formas personalizadas. 47. Agregar la sección de contacto: Hey chicos, tenemos la sección Acerca de mí. Supongo que podemos pasar a sumar los elementos de la sección Contáctenos. Entonces lo que quiero hacer es a la izquierda, voy a añadir como un simple algo como ponerse en contacto o contactarme, textos que algún subtítulo afortunado. Y luego por supuesto tal vez algunos les guste alguna información de contacto. Y debajo de eso podríamos agregar un formulario de contacto. Y a la derecha, creo que voy a simplemente añadir algún tipo de imagen. Así que de nuevo, antes de empezar, solo voy a traer de vuelta mi grid de diseño así. Sólo voy a pedir prestado tal vez esto sobre mi mensaje de texto a este tipo de aquí mismo. Y simplemente voy a copiarlo. Y lo voy a pegar en algún lugar aquí y lo voy a mover a algún lugar aquí. Y tal vez podríamos traerlo todo el camino para decidir. No estoy seguro si quiero mover esta sección como toda esta sección también a un lado, nos va a dar un poco más de espacio aquí. Pero, ya sabes, si se supone que es como este diseño Web 3, no tiene que ser eso, que alineado. Entonces aquí, voy a teclear algunos, como ponerme en contacto y nos vamos y tal vez voy a cambiar el color. Simplemente vuelve a mis colores y B a este color gris. Y por ahora nos deshacemos de la cuadrícula de diseño. Sólo quiero ver cómo va a verse. Y luego a continuación, vamos a añadir un poco de texto. Nuevamente. Permítanme sólo quizá pedir prestados algunos textos de aquí, como este párrafo. Voy a pegarlo y lo pobre lo que necesita para ir a algún lugar aquí. Y voy a hacerlo significativamente más pequeño. Ahora, simplemente nos gustaría ir a algunos como generadores de direcciones falsos, generadores de números de teléfono falsos. Pero para eso, solo voy a usar mi como mi cosa estándar, estándar de Lorem Ipsum. Tenemos que cortar a estos tipos para que no estén en el mismo grupo. Entonces éste y éste, voy a cortarlas , pegarlas de nuevo. Entonces primero voy a ir a mi plugin de iconos. Así iconos para el diseño. Y aquí solo voy a escribir algo así como el teléfono tal vez. Y tal vez esta vez vayamos con los iconos de plumas. Sólo me va a gustar pegar este tipo n le hará clic en él. Y como se puede ver, a veces van a ser pegados como, no, en realidad no lo que quiero que se peguen. Y voy a agarrar el mismo color, pero tiene que ser para la frontera. Así que sólo voy a copiar ese código hexadecimal, pegarlo, y simplemente ponerlo en algún lugar aquí. Y como dije, simplemente puedo pedir prestado el Lorem Ipsum. Voy a copiarlo, pero sólo para que simplemente no puedo retener el mismo, el mismo color, las mismas características de fuente. Pero sólo voy a escribir como un falso falso número de teléfono 123, tal vez algo así como cuatro o 56789. Esto debería ser suficiente. Y sólo voy a hacer este cuadro de texto más pequeño y voy a ponerlo en algún lugar aquí. Entonces vamos. Y tal vez sólo voy a imprimirlos en alguna parte. Tal vez empecemos con un ícono de dirección. Así que vamos a escribir algo así como mapa. Y vamos a ver si tenemos algo aquí con unos iconos de plumas. Veamos si acabo de hacer clic en este tipo y luego haga clic en el icono. Sí, va a venir a algún lugar aquí. Así que de nuevo, creo que ya no tengo mis colores en mi portapapeles. Quiero decir, no tengo ese código hexadecimal, así que voy a pegarlo en una vez más y lo voy a poner, tal vez esté en algún lugar aquí. Y vamos a derribar a este tipo. Y eliminemos este texto. Se va a ver algo así. Y por último, hagamos como una dirección de correo electrónico. Así que solo tomemos un correo electrónico tal vez para eso, la pluma sólo tendrá esto. Probemos como un sobre. Por lo general hay muchos iconos de envolvente, no realmente en este caso. Hagamos algo así como el correo. Y de nuevo, voy a simplemente marcar este ícono y voy a, Hey, ¿este tipo n? Y veamos si podemos pegar ese color de nuevo. Y voy a tratar de agarrar este ícono. Y por cierto, si es demasiado difícil para ti agarrar un elemento, porque XD está actuando, siempre puedes presionar y mantener la tecla Control o Comando. Eso va a ser licenciado como una selección directa de una técnica de objeto. Y voy a cerrar a este tipo. Por supuesto que estoy presionando y manteniendo presionadas las teclas Alt y Shift juntas. Y aquí, hagamos algo así como desnudarnos o quizá no dos mayúsculas. O hagamos algo como info en mi email.com, algo así. Esto debería ser suficiente. Y permítanme justo tal vez ahora asegurarme de que todo esté muy bien alineado. Pero sí quiero hacer estos cuadros de texto lo más pequeños posible para que nuestra transformación sea lo más precisa posible mientras nuestra alineación, quizá no la transformación. Así que hagamos algo como esto. Entonces en realidad vamos a asegurarnos de que tenemos a estos chicos muy bien alineados con el centro horizontalmente así. Y diciendo, lo mismo con estos tipos. A lo mejor sólo voy a hacer esta caja un poco más pequeña. Entonces al centro, ahí vamos. Ahora podemos tal vez igual que agrupar estos elementos. Pero antes de eso, déjame solo quizá comprobar si estos chicos están muy bien alineados a la izquierda también. Creo que lo son. Y vamos a asegurarnos de que estos tipos estén muy bien alineados con el centro así. Y ahora voy a agruparlos en realidad. Entonces grupo, agrupa a estos tipos también. Ahí vamos. Y ahora simplemente podemos asegurarnos de que estén bien distribuidos. Y sólo podemos ponerlos en algún lugar aquí. Tal vez un poco arriba así. Por lo que ahora que tenemos estos elementos, en realidad podríamos empezar a crear nuestro formulario de contacto. Y va a ser súper fácil. Todo lo que realmente necesitamos es sólo un simple rectángulo. Primero eso se va a ver más o menos así. Y luego por dentro, voy a escribir algo así como un Primero hagamos tal vez como tu nombre. Así que voy a hacer tu nombre. Entonces este va a ser nuestro marcador de posición y generalmente los marcador de posición son más pequeños. Entonces voy a hacer algo como 14 o tal vez 16. Y voy a ir a mis colores y hacerlo más claro, algo como esto. Y lo voy a poner en algún lugar aquí y tal vez este tipo va a ser más pequeño así. Y voy a asegurarme de que estén muy bien alineados a la tubería central. Todos estos elementos están muy bien alineados con el centro. Entonces estoy pensando que voy a deshacerme del relleno y también voy a aumentar el like el valor de la redondez, esquinas redondeadas. Hagamos algo como 16 o tal vez incluso un poco más grande como 26. Hagamos 32. Vale, dejémoslo así. Se ve bastante decente. Por lo que ahora solo puedo agarrar estos elementos y solo voy a elegir Repetir Grid. Voy a bajar a Mike Uno, dos. Creo que esto va a ser suficiente porque lo que quiero aquí es simplemente agregar como una dirección de correo electrónico y luego el área de texto aquí abajo, podríamos ir como un paso hacia abajo nuevo para crear como un botón, pero ya tenemos un botón, así que no creo que necesitemos esto, así que tres deberían ser suficientes. Ahora lo que es realmente genial de la rejilla de repetición es que a pesar de que lo tengamos, estamos manipulando solo un elemento. Todavía se puede ver eso. Ahora eso es, bueno, básicamente es como un efecto vivo hasta que desagrupa la cuadrícula. Entonces todos los cambios que ahora harán a nuestro elemento principal se van a reflejar o sumar a todos ellos elementos repetidos. Entonces si ahora queremos igual cambiar el valor de redondez de las esquinas, se puede ver que está muy bien cambiando para que podamos manipularlos también. Entonces voy a hacer en negro 32, y luego solo voy a agarrar este elemento y voy a desagrupar así la rejilla. Ahora sólo voy a seleccionar al último tipo y voy a hacerlo significativamente más alto, algo como esto. Y creo que íbamos a tener que cambiar la redondez también. Tim, para emparejarlo con los elementos restantes. Entonces en lugar de 32, quizá aumentemos ligeramente. El 64, como el doble el, el doble de ese tamaño. No creo que se vea tan genial. Hagamos algo tal vez como, hagamos como 16 con estos tipos. Por lo que estos dos elementos, los estoy seleccionando manteniendo presionadas las teclas Control y Mayús. Hagamos como 24 con ellos o tal vez 20. Oh, parece, se ve bastante decente. Por lo que ahora todo lo que necesitamos es simplemente cambiar este impuesto de tu nombre a tu correo electrónico. Y aquí va a ser algo así como tu mensaje. Y por supuesto este tipo tiene que ir a algún lugar como resumen aquí. Y ahora sólo vamos a ir a nuestros como nuestros componentes. Y sólo voy a tratar de encontrar mi botón. Entonces este es este tipo de aquí mismo. Así que sólo voy a ponerlo en algún lugar de aquí y aquí. Y en lugar de aprender más, vamos a escribir algo como enviar mensaje así. Y por supuesto que vamos a tener que alinear estos elementos muy bien. Así que permítanme sólo tratar de hacer click en, sobre estos elementos y alinearlos al centro. Y no se olvide, tenemos que hacer lo mismo por el estado de hover. Así que permítanme sólo tal vez copiar este texto. Y luego voy a ir de nuevo a mi componente. Así sucesivamente y pasar el estado. En lugar de aprender más, vamos a escribir enviar mensaje. Y de nuevo, tenemos que asegurarnos de que todo esté muy bien alineado con el centro así. Por lo que ahora cuando previsuemos nuestro diseño, vamos a bajar aquí. Se puede ver que cuando pasamos el puntero sobre este tipo, cambia de color y se ve, se ve bien. Así que ahora realmente todo lo que necesitamos es solo agregar el like alguna imagen ahora solo para que no se vea así, esta aburrida. Quizás nos gustaría agregar un Google Map si quisieras, solo para mostrar dónde se encuentra tu oficina, es algo bastante común que hacer, pero tal vez solo voy a agregar, en lugar de eso. En lugar de eso, solo voy a añadir algo así como una, como una simple, como una imagen simple que va a mostrar como enviar, enviar un proceso de mensaje. Y voy a ser empezar en alguna parte por aquí. Entonces voy a añadir un rectángulo. En algún lugar aquí. Ahí vamos. No necesito una frontera. Yo tampoco me siento realmente, pero sí necesito una imagen. Así que voy a volver a ir a Pexels y voy a escribir algo como tal vez contacto. No estoy seguro si voy a encontrar algo interesante. O tal vez solo agreguemos esta imagen. Realmente no es tan importante tener la mejor imagen del mundo. Aquí mismo. Es más para fines de presentación. Entonces ahí vamos. Tenemos nuestra sección de ser tocada creada. Creo que ahora mismo todo lo que necesitarías hacer es simplemente agregarlo a nuestra página principal, quiero decir, nuestra página principal de diseño móvil. Así que sólo voy a hacer eso rápidamente. Para que como se puede ver, rápidamente he hecho estos como ponerse en contacto con la sección responsiva. Y realmente no hay como la ciencia de los cohetes aquí. Todo lo que tenemos que hacer es simplemente ajustar el posicionamiento y el espaciado para que se vea bien en los dispositivos móviles. 48. Vamos a agregar el pie de página: Así que ahora agreguemos un pie de página. Y para eso, solo voy a agarrar rápidamente un rectángulo porque quiero hacer mi pie mental o un poco más prominente, un poco más visible. Y voy a cambiar su color de relleno a, digamos este rojo. Y lo voy a hacer más pequeño. Por lo que se ajusta a nuestro lienzo. Y lo voy a poner en algún lugar aquí. Ahora, los pies de página han crecido en los últimos años en el mundo del diseño, mundo del diseño web. Pero por supuesto, si no tienes mucho que poner dentro de tu pie de página, siempre puedes dejarlo como simplemente como realmente, realmente simple. Puedes agregar igual que tu nombre, como la información de copyright, y eso es todo. Pero en realidad hagamos ambas cosas. Así que hagamos como un pie de página más largo. Y hagamos probablemente información simple, más pequeña, como básica, como básica,básica para como en el mismo, muy abajo. Entonces voy a empezar con tal vez como pedir prestado algunas piezas de textos. Así que sólo voy a agarrar a estos tipos y voy a tratar de pegarlos en algún lugar aquí. Y por supuesto que necesitan cambiar sus colores. Así que tal vez hagamos el blanco simple. Entonces este tipo va a ser blanco. Así es este tipo. Pero tal vez sólo voy a añadir un poco más de texto aquí. Y voy a escribir algo como estoy cerca algo así como gracias por visitar. Porque, ya sabes, estoy asumiendo que alguien como ningún se desplaza hacia abajo a esta parte de la página, por lo que es un buen gesto agradecerles. Entonces voy a dejarlo así. Y aquí en la parte inferior, quizá agreguemos nuestros como nuestros iconos. Pero permítanme que primero trate de encontrarlos dentro de mis activos. Así que voy a seleccionar a este tipo primero. Así que empecemos a agregar algunos iconos. Así que como este tipo de aquí. Y hagámoslo blanco. Ahí vamos. Y agreguemos los restantes. Ahora por supuesto, tenemos que asegurarnos de que estén muy bien alineados. Y será genial si pudiera seleccionarlos adecuadamente. Y yo sólo voy a distribuirlos. Y a lo mejor voy a agruparlos. Así que tal vez sólo voy a hacer esta fuente más pequeña también. Entonces voy a algo así como 16. Y lo voy a traer de vuelta, bajar la altura de la línea a algo así como 24. Y aquí a la derecha, me gustaría crear última instancia tres listas que contienen alguna información como nuestros proyectos, últimas publicaciones de blog, y tal vez nuestros servicios. Así que sólo voy a pedir prestados los textos de la izquierda. Y para este tipo como este tipo va a ser significativamente más pequeño tan poco más simple como 26 tal vez, o tal vez 32. Esto debería ser suficiente. Y digamos que esto va a ser como, vamos a recolectar los últimos proyectos. Y ahora vamos a listar de, bueno, hacer una lista de, digamos como enlaces de nuestros últimos proyectos. Así que básicamente lo que voy a hacer es que simplemente voy a agarrar como un pedazo de textos como éste. Y los ponemos, tal vez podríamos simplemente clonar y bajar a algún lugar aquí. Y sólo voy a tratar de agarrar algún otro como Lorem Ipsum fragmento así. Justo así, sólo para que no tenemos exactamente lo mismo las mismas piezas de textos aquí. Y voy a alinear estos elementos. Y de nuevo, sólo voy a clonar a este tipo abajo. Voy a hacer lo mismo. Entonces digamos que voy a empezar con esta frase. Y luego vamos, como pueden ver, nuestro marco de texto simplemente está limitando eso, ese texto. Por lo que no tenemos que preocuparnos como todos estos textos desbordados. Pero esto es sólo para presentación. Pero a lo mejor voy a hacerlos un poco más cortos, algo así. Creo que esto debería ser suficiente. Por lo que ahora solo voy a seleccionar ambos, como todos estos elementos, cambiar alt, presionar y mantener presionado el Shift Alt. Y este tipo va a ser como las últimas publicaciones tal vez. Ahí vamos. Y yo voy a hacer lo mismo aquí. Por lo que sólo voy a quitar algunos de estos elementos. Y lo mismo aquí. Así que tal vez vayamos a gustar en algún lugar aquí. Y otra vez, así. A lo mejor sólo voy a asegurarme de que este tipo luzca correctamente. Y hagamos, hagamos algo como esto. Y ahí vamos. Tendrías como los últimos proyectos, últimas publicaciones. Y tal vez hagamos como nuestros servicios son mis servicios en realidad. Entonces como ¿por qué los servicios? Y tecleemos en diseño web. Y luego hagamos como el desarrollo web, tal vez desarrollo web si puedo deletrearlo correctamente. Así que vamos a bajar aquí. Hagamos algo así como tal vez diseño de logotipos. Y por último, hagamos algo como tal vez SEO. Voy a clonar a este tipo abajo. Porque como en la parte inferior, solo quiero agregar algo así como una información de copyright. Tal vez como un enlace a nuestra política de privacidad o cosas así. La información de los derechos de autor comienza con el símbolo de copyright, ¿verdad? Entonces si estás en una Ventanas, Aquí tienes un pequeño truco que puedes hacer. Simplemente puedes presionar y mantener presionada la tecla Alt y luego solo 0169. Si tienes un teclado numérico y esto agregará un símbolo de copyright en un Mac. Es, es mucho más simple. Todo lo que tienes que hacer es presionar y mantener presionado la tecla Opción, luego solo presiona la tecla G. Y si no tienes un teclado numérico en tu teclado, simplemente puedes ir a Google y simplemente escribir el código de símbolo de copyright. Y simplemente selecciona y copia el símbolo de copyright y luego simplemente pegarlo en el interior de XD. Entonces aquí vamos a escribir algo así como 20192022. Por supuesto, si acabas de crear este sitio web como hoy, este año, por supuesto te irías así como esta fecha actual. Y por supuesto, porque agregamos aquí este símbolo de copyright, es, bueno, es básicamente una fuente. Para que como se puede ver, los valores son los mismos, pero voy a pensar que voy a cambiar eso tal vez a regular. Voy a escribir algo como ¿cuál era nuestro nombre? No me acuerdo. En realidad. Tiffany Jones. Tiffany Jones. Ok. Entonces el copyright pertenece a Tiffany Jones. Y lo voy a hacer más pequeño. Y creo que me va a gustar darle este bonito, gran color gris. Y lo voy a clonar para que decida. Y voy a escribir algo así como la política de privacidad. Ahí vamos. También podríamos tener que era como un lado más grande, más grande. Podrías tener algo así como términos, términos de servicio. Y por supuesto que ambos enlaces tienen que ir al lado derecho. Voy a ponerlos tal vez en algún lugar aquí. Así que van a ir a un lado. Y por supuesto, por último, lo que debemos hacer es asegurarnos de que esta todas estas piezas de información estén muy bien alineadas a nuestra, a nuestra red. Así que tal vez sólo voy a hacer esto más pequeño y poner a este tipo en algún lugar para decidir. Entonces voy a agarrar estos elementos y ponerlos tal vez en algún lugar aquí. Y lo mismo para estos tipos. Vamos a asegurarnos de que estén muy bien alineados a la rejilla. Entonces voy a agrupar todos estos elementos en este momento. Entonces estos tipos también, estos tipos están agrupados. Por lo que ahora voy a simplemente seleccionar todo y simplemente distribuirlos así. Lo mismo para estos elementos. Simplemente voy a agarrar esos enlaces y ponerlos a la derecha. Y este tipo está casi correcto. Así que básicamente la última cosa a usar para simplemente agarrar todos estos elementos. Entonces el fondo y los enlaces, y simplemente ponerlos al centro así. Entonces, por supuesto, lo último que hay que hacer aquí sería agregar nuestro pie a las partes restantes de nuestro sitio y por supuesto, hacerlas receptivas. Pero en realidad hagamos eso en el siguiente video. 49. Hagamos que el pie de página sea responsivo: Sabes qué, he decidido que tal vez no es la mejor idea aburrirte con otro, otro video de solo apilar elementos verticalmente. Por lo que acabo de tomar la libertad de añadir los elementos de pie de página a nuestras versiones receptivas del diseño. Pero sólo hay una cosa que me gustaría señalar. Quiero decir, para algunos de los algunos de los diseños, también he decidido añadir no sólo este elemento de pie de página, sino también que los elementos de información de contacto. Entonces cuando vamos a, por ejemplo, a nuestra página de blog móvil, móvil, lo que este modo de blog por uno bajamos. Se puede ver que también he agregado la sección de ser tocado así como la foto. Y por cierto, como se puede ver, todo es simplemente no hay columnas de elementos apilados. Por lo que he agregado la información de contacto, los he agregado en el pie de página. Pero no lo hice por nuestra sola entrada de blog porque acabo de decidir que tal vez sería demasiado. Quiero decir, ya tenemos como estos iconos que se repiten aquí abajo, como los iconos de las redes sociales. Pensé que ya le hemos dicho lo suficiente a nuestros usuarios, ¿cómo pueden contactarnos? Así que básicamente, como se puede ver, sumar en los pies de página, es sólo cuestión de agregar estos elementos como verticalmente, como con todos los demás elementos. Y también puedes decidir si quieres agregar por la información de contacto o alguna otra información que preceda a la comida o para ese asunto, a tu móvil. Versiones móviles del diseño. 50. Los toques finales: Vale, entonces creamos nuestro, nuestro proyecto y en el camino creamos nuestra sección principal de héroes con la imagen. Por supuesto, agregamos el logo, agregamos la navegación. Y así la información aquí a la izquierda. Después pasamos a sumar los servicios. Entonces agregamos los iconos, por supuesto, mucho texto y un botón. Después agregamos esta sección de portafolio con miniaturas animadas de cartera. Después pasamos a agregar un blog. Después agregamos la, la, la sección Acerca de mí, seguida de la sección de contacto y el pie de página. Y por supuesto en el camino hicimos que todo respondiera. Y recuerda que es una buena idea cuándo, una vez que creas una versión like a desktop de una sección y luego la sigas con una versión móvil de esa sección. Y también agregamos que como un efecto slider aquí mismo, este carrusel de imagen. Agregamos una página de blog. Agregamos, por supuesto, la versión móvil de la página del blog. Y agregamos una sola entrada de blog. Y por supuesto es solo blog post versión móvil. Por supuesto que podríamos seguir y crear como una sección Acerca de Nosotros, como una sección como una sección Contáctenos. Pero honestamente, simplemente repetiríamos los elementos que ya tenemos aquí. Entonces para la sección Acerca de mí, solo agregaremos básicamente los mismos elementos más el logotipo y la navegación. Por supuesto, siguió bien con el pie de página. Para la sección Contáctenos, básicamente solo agregaremos su logotipo, la navegación, esta parte aquí mismo y el pie de página. Entonces creo que debería ser como un reto de diseño para ti además de agregar o crear tu variación, tu versión de un sitio como este. Y por supuesto, una vez que todo esté hecho, debemos comprobar si todo el texto, si el espaciado, si los tamaños de fuente están bien, podríamos por supuesto, agarrar como la página de inicio y ver la interactividad. Entonces digamos que tenemos nuestro botón Aprender más. Tenemos este botón aquí mismo. Tenemos elementos de nuestra cartera como este. Botón Leer Más. Estos iconos funcionan igual que lo hacen al igual que la sección anterior. En la sección de héroes, conseguimos nuestra sección de contacto, quedando tocada sección. Y por supuesto, podríamos comprobar si, por ejemplo, si nuestros enlaces funcionan. Por lo que este enlace de blog funciona correctamente. Y si hacemos click en el logo, nos va a llevar de vuelta a nuestra página de inicio. Entonces, en general, creo que hicimos bastante. Cubrimos bastante. Así que como siempre, te animo a crear tus propias variaciones del diseño o tal vez crear algo completamente más. Siempre y cuando estés utilizando todas las técnicas y los hechos y trucos que has aprendido a lo largo de este proceso de diseño. 51. Compartir exportando: La forma más fácil y obvia de compartir tu proyecto y elementos individuales del mismo es simplemente exportando en él. Entonces veamos cómo podemos hacer eso en XD. Por lo que tal vez te estés preguntando cómo exportar es diferente a ahorrar. Así que déjame simplemente explicarle. Quieres guardar tu archivo cuando estés o algún otro usuario va a estar trabajando en eso, en ese mismo archivo, quieres exportar tu proyecto cuando ya sea terminado o simplemente quieres compartir algunos elementos de ella, como algunas imágenes o iconos, Exportar TI. Los activos pueden ser cerrados, lo que significa que ya no son editables o pueden seguir siendo editables. Todo depende del formato de archivo que elijas al exportar. Entonces en realidad cómo exportar tu proyecto. Entonces bajo el menú Archivo, encontrarás que la función de exportación que contiene aún más opciones. La opción por lotes te permitirá exportar múltiples activos de una sola vez. Solo hay que marcarlos para su exportación, ya sea en el Inspector de Propiedades o haciendo clic en el pequeño icono de exportación junto al nombre del ácido en el panel de capas. Si lo eliges, selecciónalo. Se pueden exportar activos específicos simplemente seleccionándolos sin tener que marcarlos para su exportación. Y puedes elegir Todas las mesas de trabajo si quieres exportar todas nuestras tablas, incluso sin seleccionarlas primero. Si está utilizando After Effects, puede exportar sus activos son a esa aplicación utilizando la última opción After Effects. Entonces, cualquiera que sea el método que elija, verá un cuadro de diálogo de exportación de activos, que le permite controlar aún más el proceso de exportación. Dependiendo del formato de archivo que elija, verá un conjunto diferente de características disponibles. Y por defecto, puedes guardar tus activos como P y G. Y usar este formato te permitirá controlar el tamaño de las exportaciones. Y puedes elegir entre un tamaño de exportación personalizado predefinido que oscila entre 0.5 y cuatro. O puedes elegir un preset experto, como web, Android e iOS. La primera herramienta es simplemente exportar tus activos utilizando tamaños personalizados predefinidos. Pero el preset de iOS exportará los activos utilizando densidades de pantalla predefinidas. El exportar a la opción te permitirá decidir dónde guardarás tus activos exportados. Así que haz clic en el botón Cambiar para seleccionar el lugar correcto en tu disco duro. Entonces el siguiente formato de archivo es AVG. Se utiliza principalmente para almacenar gráficos vectoriales, pero también se puede utilizar para exportar imágenes y textos. Y cuando lo selecciones, obtendrás muchas más opciones como el estilo. Y aquí puedes usar la opción de atributos de presentación cuando quieras exportar tus activos para ser usados en Android Studio. Y también puedes usar la opción CSS interna, que resultará básicamente en un tamaño de archivo más pequeño. En su opción Guardar imágenes, puede usar el embed para encerrar la imagen dentro del archivo. O puede utilizar el enlace para agregar una referencia a la imagen almacenada por separado. En tamaño de archivo, puede usar la opción optimizada y minificada para mantener el tamaño del archivo más pequeño. En Opciones de trazado, puede usar Trazo de contorno para convertir trazos dos trazados con el fin de evitar que se vean distorsionados. El experto a, de nuevo le permite decidir dónde guardará sus activos de TI de exportación. Por lo que el siguiente formato de archivo es PDF. Y aquí puedes decidir principalmente si quieres exportar tus activos como múltiples archivos PDF o un solo archivo. Y r es que si estás utilizando la versión de inicio del programa, puedes exportar solo hasta dos archivos PDF. Y el último formato de archivo de dos es JPEG. Es el único formato que permite controlar la calidad de la exportación su tamaño. El menor calidad significa mayor compresión. Y eso resulta en un tamaño de archivo más pequeño. Y una mayor calidad significa que se usa menos compresión y se produce un tamaño de archivo más grande. Por lo general un buen equilibrio entre el tamaño del archivo y la calidad es algo alrededor del 75 por ciento. Ahora creo que en la mayoría de los casos, vas a estar usando los formatos de exportación PNG y JPEG, especialmente para presentaciones rápidas. No obstante, XD viene con un espacio de trabajo compartido completamente separado que te permite compartir tus proyectos para diversos escenarios. 52. El espacio de trabajo de compartir: Por lo que este espacio de trabajo es particularmente útil cuando se trabaja con un equipo de partes interesadas, como diseñadores, desarrolladores o simplemente revisores. Por lo que aquí puedes crear enlaces que se pueden usar, editar y revisar para colaborar en tu diseño. En el Inspector de propiedades, puede elegir uno de los ajustes de vista dependientes de con quien desee compartir el diseño. Uso de esa revisión de diseño para obtener comentarios sobre su diseño de otros diseñadores dentro del equipo. Por lo que de forma predeterminada para comentar hotspot ahí y los controles de navegación estarán activos y utilizarán su desarrollo presente para compartir su diseño con los desarrolladores. Por defecto, comentar hotspot, por lo tanto, se compartirán los controles de navegación y las especificaciones de diseño. El preset de presentación optimizará tu diseño para que se presente mejor a las partes interesadas. Y por defecto, hotspot, de ahí, los controles de navegación y la opción de pantalla completa estarán activos. Y el preset de pruebas de usuario permitirá a otros usuarios probar su diseño. Y aquí por defecto, solo estará activa la opción de pantalla completa. Y por supuesto, puedes personalizar la experiencia del diseño que estás compartiendo y opciones de intercambio de conocimientos e interacción pueden agregarse o eliminarse libremente. Así que una vez que hayas establecido todas tus opciones de configuración de vista, puedes establecer los permisos de acceso al enlace. Entonces las opciones aquí son alguien con el enlace? Bueno, eso básicamente significa que cualquiera que tenga el enlace podrá ver el proyecto. Pero también se puede restringir el archivo para que sea visto solo por personas seleccionadas. Por supuesto, si eliges la única opción de personas invitadas. Y cualquier persona con contraseña, que significa que cualquiera que conozca la contraseña que has dicho puede acceder al archivo. Entonces, cuando estés listo para compartir tu archivo, simplemente presiona el botón Crear enlace. Y después de algún tiempo, se creará el enlace, encontrarás que el enlace en sí, junto con algunos botones que te permitirán copiar el enlace del proyecto incrustado en un iFrame código o compártelo en Behance. Puedes hacer clic en el enlace generado y serás redirigido a una página donde verás el diseño junto con paneles adicionales a la derecha. Así que de nuevo, si estás utilizando la versión inicial de XD, solo puedes compartir un proyecto a la vez. Y si necesitas compartir más, tienes que actualizar a un plan premium. No obstante, siempre puedes simplemente eliminar el que compartes y nieves simplemente comparte otro. Y para ello, tenemos que seleccionar la opción de enlaces administrados, que abrirá la pestaña de archivos publicados en tu cuenta de Adobe. Y aquí puedes eliminar permanentemente el archivo. Por supuesto, el diseño original se mantendrá intacto y puedes simplemente, ya sabes, compartir otro. Ahí vas. Así es como puedes compartir tus archivos dentro de un equipo de partes interesadas en XD. Ahora concedido, si apenas estás empezando y quieres aprender el programa, puede estar trabajando dentro de un equipo no será tu rutina diaria. Pero sigo pensando que esta es una funcionalidad importante y es simplemente una buena idea familiarizarse con ella. 53. Compartir con un cliente: Una pregunta que realmente consigo mucho de mis alumnos es, ¿ en qué formatos de archivo debo entregar mi diseño al cliente? Y la respuesta es en última instancia una de las más frustrantes. Y es, um, depende. Quiero decir, en primer lugar, si aceptaste entregar al cliente todos los derechos del proyecto, entonces deberías entregarte en la mayoría de los formatos. Y eso incluye el archivo fuente. Así que típicamente exporto el proyecto en JPEG, PNG. Añado el archivo fuente, por ejemplo, p XD, XD o AI. También uso PDF y si el proyecto no se hizo usando Photoshop, lo exporto a PSD porque es tan ubicua. Cada, todo el mundo entiende P como el n Cuando eso se hace, comprimo todos los archivos. Si, sin embargo, no estuvo de acuerdo con el cliente en ceder los derechos de autor al proyecto. No tienes que compartir el archivo fuente. Ahora, en ese caso, simplemente me apegaría a JPEG, PNG y PDF. Además, si tu proyecto está usando múltiples tableros de arte, los guardaría como archivos JPEG o PNG separados y un solo archivo PDF. De esta manera, hará que sea más fácil para su cliente obtener una vista previa del proyecto. Entonces, en pocas palabras, si alguna vez estás en duda qué formatos de archivo usar, simplemente usa PNG, PDF, y opcionalmente el archivo fuente. Entonces como mencioné, siempre es buena idea comprimir tus archivos. Y la mayoría de los sistemas operativos modernos te permitirán hacer eso sin ninguna aplicación separada. No obstante, si necesitas un programa independiente para archivar, puedes usar siete zip que sea gratuito, código abierto y que se pueda instalar en Windows, PC, macOS y Linux. Compartir tus archivos es siempre el último paso en el proceso de diseño. Entonces, una vez que el proyecto ha sido aceptado y desplazado, puedes llamarlo una felicitación completa y total por un trabajo bien hecho. 54. RESUMEN: Por lo que realmente espero que hayas disfrutado aprendiendo XD y espero que lo uses para en tus futuros diseñadores web. Es una pieza de software realmente importante tener en tu cartera de habilidades. Así que resumimos rápidamente lo que hemos aprendido aquí. Así que primero hemos cubierto los conceptos básicos absolutos como la pantalla de inicio y moverse por el espacio de trabajo y entender la diferencia entre el diseño y el prototipado. Después creamos nuestro primer documento nuevo. Aprendimos a administrar obras de arte, capas y herramientas. Y en la siguiente sección aprenderemos a usar plugins y activos. También compartí contigo mis plug-ins favoritos están usando XD. Después aprendimos un poco sobre la teoría del diseño web, a saber, los colores, la tipografía y las mejores prácticas del diseño web moderno. Después de eso, pasamos a la parte principal de diseño y creamos un proyecto de sitio web personal para un diseño de freelancer. Por último, aprenderemos cómo compartes tu proyecto? Así que gracias por hacerlo todo el camino a esta parte del curso. Espero que con algo de tiempo y práctica, puedas crear tus propios diseños de forma independiente. Y si este curso te ayuda a embarcarte en un diseño exitoso de carrera freelance o prestarte un trabajo de diseñador web. Significará que fue útil y que sirvió a su propósito. Y eso me haría realmente feliz.