El curso completo de Adobe XD UI/UX: aplicaciones de diseño y prototipos

1. Introducción: Hola ahí. Bienvenido al curso completo de Adobe XD UI UX. En este curso, vamos a aprender a diseñar hermosas interfaces tanto para móviles como para web, y cómo convertirlas en prototipos interactivos que podemos compartir con los miembros de nuestro equipo, con nuestro compañeros y nuestros clientes cuando era Nemo Tommy y yo soy tu instructor para este curso. Durante los últimos 12 años premio a decenas de proyectos móviles y web por servicio por mi cuenta y otros clientes, salvage se ha destacado en sitios web como Forbes. Crear productos es mi pasión y me encanta compartir algo de eso contigo en este curso. En este curso vamos a trabajar en proyectos reales para una empresa de reparto de alimentos llamada picaduras saludables. El primero va a ser una aplicación móvil donde los usuarios realmente puedan usar esta app para pedir comida para entrega. Y el segundo va a ser un sitio web para mostrar lo que las mordeduras saludables tiene para ofrecer a los clientes potenciales. Vamos a hacer todo eso en Adobe XD si vas a empezar a doler Sin preocupaciones en absoluto. Este curso está destinado a principiantes todo el camino a través de expertos que estamos diseñando desde hace varios años. Pero ahora quieren aprender un nuevo software. Vamos a empezar instalando un mar, pasando por todas las características para acabar con las herramientas a las que tenemos acceso. Y luego vamos a saltar directamente los proyectos y aprender cómo usas cosas como componentes, repisas cuadrículas y estadísticas para que nuestro proceso de diseño sea más rápido. Incluso vamos a usar esa plantilla de Apple para armar los diseños de apps para iPhone. medida que pasamos aprendiendo a hacer eso, vamos a seguir adelante y también explorar branding y aprender a crear un logotipo, cómo armar un esquema de color y tipografía acostumbrada para nuestro proyecto. Una vez que pulimos nuestros diseños, vamos a estar aprendiendo a exportar realmente esos diseños fuera de XC, compartirlos con tal vez miembros del equipo, llamar a estos tus clientes y también aprender cómo podemos crear prototipos interactivos que incluso podemos probar en nuestros propios dispositivos móviles, que son super cool. Ya sea que estés buscando integrar esa próxima pasantía de diseño o ese próximo cliente de diseño para tu firma. Y este curso es exactamente para ti. Si estás listo para empezar, entonces salta directamente y te veo en este curso. 2. ¿Qué es Adobe XD?: Estamos casi listos para saltar y explorar Adobe XD. Pero antes de hacer eso, queremos pasar rápidamente por lo habrá Stephen es para que tengamos una idea de lo que vamos a estar esperando y unas futuras conferencias. Entonces, ¿qué es Adobe XD? Adobe ICSI es un software de diseño basado en aplicaciones que esencialmente le permite diseñar aplicaciones móviles y web en un entorno fácil de usar construido específicamente para el diseño de aplicaciones móviles y web. Ahora por supuesto, puedes usar Adobe XD para otras cosas como un diseño de juegos o simplemente un diseño gráfico general. Pero el propósito principal de ello es para aplicaciones móviles y web. Y eso es exactamente en lo que vamos a estar trabajando también en este curso. Adobe XD viene con una función de prototipado en tiempo real realmente potente que exploraremos. Una vez que diseñemos nuestra app, seguiremos adelante y crearemos un prototipo fuera de ella. Esencialmente, tu prototipo te permite tener una idea de cómo se sentirá o se verá esa aplicación móvil o web para un usuario una vez que se haya completado. Entonces eso incluye conectar todas las pantallas que diseñaste para que podamos darle una idea a un cliente o a un colega sobre cómo ese producto o esa app se verá ese producto o esa appuna vez que se desarrolle, esta función te ahorrará toneladas de tiempo a la hora de crear una aplicación móvil, especialmente para los desarrolladores, iban a estar realmente poniendo en acción este diseño. Porque con un prototipo, en realidad podemos tener una idea de lo que realmente queríamos la aplicación antes escribir realmente una sola línea de código. Y será XT hace que sea realmente fácil para ti compartir tus diseños con clientes y colegas. Para que incluya compartir mesas de trabajo específicas si quieres, o todo un proyecto, o incluso poder compartirlo, tu prototipo con otras personas y crear múltiples pisos para ellas para ver de qué se trata la app. Y luego exploraremos todas las funciones para compartir y exportar características a lo largo del curso. Ahora Adobe XD está disponible de forma gratuita, prueba de siete días, cual puedes inscribirte y usar, y luego realmente lo puedes conseguir por 999 dólares estadounidenses al mes. Y eso es solo una sola cuota de suscripción a la aplicación por solo Adobe XD. Pero si quieres más de Adobe, si quieres instalar Photoshop o Premiere u otras herramientas, también puedes hacerlo por un poco de un precio más alto. Pero podría valer la pena si realmente estás explorando otro diseño o cualquier otro software es de Adobe. Y luego siguiente conferencia pasaremos por los diferentes precios así como cómo instalarlo realmente en tu computadora. Entonces te veré ahí. 3. Cómo instalar Adobe XD: Listo para comenzar instalando Adobe exceed. El primer paso es seguir adelante y abrir tu navegador. Podemos inscribirnos en Adobe XD a través de la página web de Adobe. Por lo que todo lo que necesitas hacer es dirigirte a Adobe.com slash delantero XD y golpear enter. Una vez que se cargue el sitio web, se te traerá a esta página para Adobe XD, que es donde te explican cómo funciona y te dan un poco de videos de cómo puedes hacer apps o el diseño web o el diseño de apps, marca y diseño de juegos con Adobe XD, que es bastante cool, puedes ver esas animaciones para ver lo que va a pasar. Esto es impresionante. Y si vienes por aquí, en realidad puedes seguir adelante y descubrir algunas de las características que tiene desde aquí. Ahora por supuesto, no entraremos en demasiados detalles con las características de la página web porque realidad estaremos revisando todas estas características a lo largo del curso. Así que volvamos a la página principal aquí. Y después de desplazarse hasta aquí, se puede ver que este es el precio que mencioné en la conferencia anterior. Si quieres simplemente usar Adobe XD en sí mismo, está disponible en 999 dólares estadounidenses al mes, lo que creo que vale la pena considerando que un US, tú un tonelada de características. Y puedes usar la aplicación única. No necesitas suscribirte a todas las apps, Adobe Creative Cloud. Pero si quieres usar todas las apps y Creative Cloud, incluyendo Photoshop, Illustrator y así sucesivamente. Puedes seguir adelante y suscribirte a esta opción por aquí, que comienza a las 5299 al mes. Ahora claro, como mencioné, el Adobe XD viene con una prueba de siete días. Así que ahí es donde vamos a estar usando para este curso aquí. Si no tienes Adobe XD y solo lo estás probando. O quieres pasar por este curso y aprenderlo antes de comprarlo, que es lo que sí te recomiendo puedes seguir adelante y simplemente hacer click en las pruebas gratuitas. Lo que vamos a hacer. Una vez que hayas hecho eso, te haría un par de preguntas para particulares, para estudiantes y profesores, que podrías usar para obtener algún descuento educativo. requiere una identificación válida, por lo que es posible que tengas que enviarle una identificación para demostrar realmente que eres estudiante. O también puedes inscribirte como negocio. Pero vamos a seguir adelante y solo usarlos para individuos. Y haga clic en Continuar. Quién te pidió que eligieras un plan de nuevo, puedes elegir solo Adobe XD o todas las aplicaciones de Creative Cloud. Por ahora, sólo somos una especie de pick XD para el propósito de este curso. Al hacer clic en Continuar, te preguntará si quieres una opción mensual o un año, la opción para la facturación. Vamos a continuar en lo mensual. Y por supuesto, vamos a usar este juicio de siete días para empezar. Por lo que en realidad no va a seguir adelante y cobrar. ¿ Carter es algo en este momento? Hacemos click en No, gracias a esta oferta adicional que te da. El siguiente paso, solo te pedirá dirección de correo electrónico. Entonces voy a seguir adelante e ingresar aquí mi dirección de correo electrónico. Te acabamos de configurar con una cuenta. Si ya tienes una cuenta de Adobe, te pedirá tu contraseña. De lo contrario, te pedirá que te registres aquí y añadas una contraseña. Adelante y tómate ese tiempo para configurar tu cuenta. Si aún no tienes una cuenta de Adobe, una vez que llegues a la página de pago, seguirá adelante y en realidad te pedirá que ingreses métodos de pago. Entonces déjame seguir adelante y haga clic en suscribirse. A partir de aquí, podrás ver cuándo comenzarás a cobrar. Por lo que tengo la prueba gratuita disponible hasta el 16 de diciembre. Por lo que esencialmente tienes acceso gratuito a Adobe XD hasta la prueba y la fecha que ves por aquí. Hasta entonces se puede utilizar totalmente el producto de forma gratuita. Y luego después de eso, será, comenzaremos a cobrarte en base a tu suscripción. Así que sigamos adelante y haga clic en Empezar. Ahora, para que Adobe XD se instale, en realidad necesita instalar Creative Cloud, lo que le permite instalar. Serán productos y manténgalos actualizados en tu máquina. Adelante y permita que Creative Cloud se abra para instalar por aquí. Una vez que Creative Cloud se abra, se verá así. Y podrás ver desde aquí que se está instalando XD. Ahora claro, porque ya lo tengo instalado, seguirá adelante y lo actualizará. Ya que no lo he actualizado, lo está actualizando en lugar de instalarlo. Pero para ti es decir instalar si es tu primera vez instalando XD en tu máquina. Así que dale algo de tiempo y luego una vez que esté completamente terminado y actualizado, seguiremos adelante y lo abriremos y exploraremos en las próximas conferencias. 4. Gestionar tu cuenta de Adobe: Antes de saltar a Adobe XD y explorar de qué se trata y usarlo. Yo sólo quería hacer rápidamente un breve video para explicar que en cualquier momento a lo largo del juicio o antes de que termine tu juicio, si decides que se va a excusar no para ti, o simplemente quieres aprenderlo. Siempre puedes gestionar tu plan es a través del sitio web de la cuenta de Adobe. Por lo que en cualquier momento puedes acudir a la cuenta dot adobe.com en tu navegador. Y desde aquí podrás ver tu plan. Entonces si elegiste la prueba gratuita de Adobe XD, en realidad puedes seguir adelante y ver cuántos días te quedan contados el método de facturación empieza a cobrarte y cuánto te cobrarán , en qué momento. Por lo que antes de ese tiempo, si decides que quieres terminar tu facturación o quieres cancelar o tal vez actualizar para tener acceso a más plantas, puedes seguir adelante y dar click en Gestionar plan por aquí. Y una vez que hagas click en Administrar plan, puedes seguir adelante y ya sea cambiar tu plan o cancelar tu plan desde aquí. Y acabo de hacer este video rápido solo para asegurarme que no te atrapes en ningún ciclo de facturación. Porque odiaba cuando eso pasa con las pruebas gratuitas, cuando el final porque me ha pasado y estoy seguro que le ha pasado a algunos de ustedes. Entonces solo estoy haciendo este video para que sepas que en cualquier momento dentro de tu juicio de siete días, puedes cancelar sin ninguna consecuencia. Pero sí espero que encuentres suficientemente útil Adobe XD allí Sigues usándolo. Ahora si estás listo para saltar, vamos a seguir adelante y explorar Adobe XD en la próxima conferencia. 5. El navegador de archivos: Entonces si tienes Creative Cloud abierto, genial. Si no, asegúrate de seguir adelante y abrirla, puedes seguir adelante y simplemente buscar Creative Cloud desde tu centro de atención. Y seguirás adelante y abrirás eso. Ya lo tengo abierto ahora deberías poder encontrar XD bajo tus apps instaladas. Si no estás en esta página, puedes llegar a ella simplemente haciendo clic en Todas las aplicaciones del lado izquierdo por aquí. Y luego seguir adelante y dar click en Abrir. Y simplemente seguiré adelante y abriré tu Adobe XD. Una vez que sí tienes XY abierto, no necesitas realmente tener Creative Cloud abierto para que puedas seguir adelante y cerrar esta ventana y simplemente tener XD abierto. Por lo que esta es la primera página que ves en XD es tu navegador de archivos y esencialmente donde podrás acceder a todos tus archivos. En qué trabajamos nuestro camino desde la parte superior izquierda aquí hasta la parte inferior derecha, que podamos ir a través de lo que este navegador de archivos tiene para ofrecer. Por lo que en la parte superior izquierda aquí verás una nueva opción de archivo. Por lo que desde aquí podrás crear nuevos archivos donde podrás diseñar tus aplicaciones móviles y web o lo que sea que estés diseñando. Puedes seguir adelante y abrir archivos desde aquí. Entonces si ya lo tienes, sea un archivo de Photoshop, ese archivo de boceto, u otro archivo XD. Puedes seguir adelante y abrirlos desde aquí. Una vez que puedas hacer click en él, seguirá adelante y te pedirá que localices ese archivo y lo abras desde ahí. Esta es nuestra página de inicio, que es donde estamos aquí. Desde la página de inicio podrás acceder iniciando un nuevo documento, pero de forma más rápida. Entonces si ya sabes qué dispositivo vas a estar diseñando. Entonces vamos a ver. Voy a estar diseñando para un iPhone 12 Pro Max tamaño de pantalla. Puedo seguir adelante y dar click en esto. Y lo que eso hará es abrir el archivo y generar esos formatos precisos o el dimensionamiento para las mesas de trabajo para mí, cual haremos en la próxima conferencia. Entonces, vamos a aguantar eso. Pero esto es genial porque esta manera era todo el dimensionamiento por aquí. Realmente no necesitas buscarlo en línea. Y así eso hace que nuestro proceso de diseño sea mucho más rápido. De igual manera, si estás diseñando para un proyecto web, este es típicamente el tamaño que diseñamos para 1920 por 1080 píxeles. Ahora puedes seguir adelante y usar estas otras dos opciones que son menos comunes pero también disponibles. Puedes seguir adelante y crear un documento para las historias de Instagram. Posts de Instagram, twitter, post de Facebook, incluso portadas de videos de YouTube. Por lo que tienes acceso a esos también. Si estás trabajando para un tipo de diseño de branding, o puedes seguir adelante y crear un diseño personalizado introduciendo el ancho y la altura de tus mesas de trabajo. Y seguiremos adelante y generaremos eso para ustedes. Aquí abajo, será x t te dará un enlace a algunos de sus artículos donde en realidad podrás explorar algunas de las características disponibles. Pero claro, vamos a pasar por esas características y mucha más profundidad a lo largo del curso. Bajando por aquí, por el lado izquierdo, verás tus archivos. Entonces ahora mismo porque no tengo ningún archivo creado, no voy a ver nada aquí. Pero una vez que sí empiece a trabajar en nuevos archivos, aparecerá por aquí. Y podré crear nuevas carpetas desde aquí para organizar mis archivos o verlos como listas o cuadrículas. Y si otras personas han compartido proyectos conmigo con mi cuenta de Creative Cloud, los puedo ver desde aquí. Si tengo diseños publicados, puedo gestionar los enlaces por aquí para proyectos que he creado, publicado, o compartido. Y si tengo algún archivo borrado, saldrá adelante y aparecerá aquí. Lo cual es genial porque si accidentalmente borras un archivo en el que estás trabajando, puedes acceder a él desde preocuparte aquí, como un cubo de basura en tu computadora. Entonces, sin más preámbulos, volvamos a la pantalla de inicio y aprendamos cómo realmente podemos crear nuevos archivos juntos en la próxima conferencia. 6. El diseño: Entonces ahora que estamos familiarizados con nuestro navegador de archivos aquí en Adobe XD, ¿por qué no seguimos adelante y aprendemos cómo podemos crear nuevos archivos y repasar rápidamente el diseño del software. Por lo que como se mencionó en la conferencia anterior, la forma más fácil de crear un nuevo archivo es haciendo clic en nuevo archivo por aquí. Ahora si estás trabajando con un dispositivo específico, como se mencionó, puedes seguir adelante y click en cualquiera de estas opciones. Si tan solo haces clic en Nuevo Archivo, que era lo que vamos a hacer en este momento, XD seguirá adelante y te abrirá una ventana, igual que esta de aquí. Ahora por defecto, utiliza el tamaño de píxel web de 1920 para las mesas de trabajo. Entonces si me voy rápidamente a casa solo para mostrarte las otras opciones, si quiero seguir adelante y trabajar en un proyecto móvil, entonces doy clic en esta opción para iPhone 12 Pro Max por aquí. Entonces seguirá adelante y generará un nuevo archivo. Y la mesa de trabajo aquí en realidad será un iPhone 12 Pro Max Size en lugar del sitio web. Entonces eso es todo lo que significa, todas las diferencias entre esas opciones en el navegador de archivos. Ahora voy a seguir adelante y cerrar este archivo aquí que tengo y sólo seguir con este expediente que tenemos por aquí. Nuevamente, puedes crear este archivo con solo hacer clic nuevo archivo en tu navegador de archivos XD. Lo primero es lo primero, este es el nombre de nuestro expediente. Por defecto, Adobe genera un sin título, seguido de un guión y la fecha y hora en que se creó el archivo. Para cambiar este nombre de archivo, solo puedes hacer doble clic aquí. Simplemente vamos a llamar a esto nuestro primer expediente. Sólo por el bien de la lección. Vamos a seguir adelante y hacer clic en Guardar. Y ahora como pueden ver, eso ha sido reemplazado por primer archivo, que ahora es el nuevo nombre de nuestro archivo. Este pequeño icono de nube solo indica que estamos conectados a Web y este proyecto se está guardando automáticamente en Creative Cloud, que es donde se almacenan tus archivos por defecto. Enfriar. Por lo que trabajando nuestro camino desde arriba, desde aquí, podemos volver a nuestro navegador de archivos o al hogar. Este es el modo de prototipado que mencioné brevemente donde puedes crear prototipos y conectarte a tus mesas de trabajo. Desde aquí, puedes compartir tus proyectos fácilmente creando enlaces donde cualquiera pueda acceder a él o solo ciertas personas explorarán todo eso a lo largo del curso, vamos a volver al Diseña pestaña y continúa por el lado derecho por aquí, trabajando nuestro camino por el lado derecho, verás un poco Compartir ícono donde puedes agregar la dirección de correo electrónico de alguien que eras trabajando en este ancho de archivo y eso los invitará al proyecto donde podrán colaborar contigo en él. Usando la vista previa del dispositivo, en realidad podemos seguir adelante y ver nuestros diseños en un dispositivo real. Y cuando lleguemos a la sección de prototipos, definitivamente exploraremos esto y es súper genial. O por aquí tienes la opción solo previsualizar tu prototipo en el escritorio que tienes en lugar de abrirlo en un dispositivo real. Y en el lado muy derecho tenemos aquí el nivel de zoom, por lo que podemos seguir adelante y escoger diferentes niveles de zoom. O puedo simplemente desplazarme dentro y fuera usando tu trackpad o tu rueda de desplazamiento en tu ratón. Enfriar. Ahora el lado muy izquierdo por aquí tenemos un pequeño panel de herramientas donde podemos hacer clic en ciertas formas y dibujarlas en nuestra mesa de trabajo. Ahora, por el bien de esta lección, no te preocupes por seguir exactamente lo que estoy haciendo aquí. Solo te estoy mostrando muy brevemente lo que XD tiene para ofrecer. Cuando sí lo repasamos a detalle, tienes alguna idea de con qué estamos trabajando. Continuando desde el panel Herramientas, podemos crear elipses, polígonos, o triángulos, líneas. Podemos utilizar una herramienta de lápiz para crear formas personalizadas. Podemos utilizar un texto para escribir textos en nuestra mesa de trabajo. Podemos usar este pequeño botón para crear nuevo tablero de arte. Entonces si solo vas por el lado derecho por aquí, puedo crear un tablero de arte de mi agrado con el tamaño que quiera. O si quiero un tamaño específico para un tamaño de dispositivo específico, puedo usar el pequeño panel de la derecha de aquí para escoger una talla. Y por aquí tenemos un poco de Zoom. Entonces, esencialmente esto solo te permitirá hacer zoom, poco similar a la opción de zoom por aquí, pero solo darte esta lupa donde puedes acercar a una parte determinada. Y exploraremos algunas de las características de zoom más adelante así con más detalle. Ahora usando estos pequeños tres botones de aquí abajo, puedes cambiar este panel que tenemos. Puedes ir desde el panel de capas que en realidad tiene muestra todas tus tablas de arte así como objetos dentro de esas mesas en este pequeño panel de aquí. Entonces si solo vuelvo a este pequeño ícono, puedo ver todas mis formas como un click a través de este tablero de arte o simplemente todas mis tablas de arte en el panel de capas. Ahora como trabajamos en proyectos, verás lo útil que puede ser este panel de capas para ordenar y organizar tu proyecto. Entonces de aquí abajo tenemos bibliotecas. Por lo que en cualquier momento estamos reutilizando ciertos colores o estilos de carácter son componentes, podemos seguir adelante y agregar eso a nuestra biblioteca y en realidad podemos incluso compartir esta biblioteca o publicarla para que podamos usarlo en otros equipos u otros proyectos. Simplemente super cool, exploraremos eso en un rato. Ahora por fin, tenemos plug-in por aquí donde en realidad puedes descubrir plugins. Y si hago clic en este pequeño icono de plug-in por aquí, vamos a seguir adelante y abrir los plugins. Página. Los plugins generalmente nos permiten automatizar nuestro proceso de diseño o ayudarnos realmente a impulsar nuestra productividad de diseño, explorarán algunos plug-ins a medida que avancemos el curso. Por lo que definitivamente mantener un ojo fuera para eso. Adelante y cerremos esto aquí mismo. Ahora trabajando nuestro camino por el lado derecho por aquí donde tenemos nuestro panel de propiedades. Este panel aquí cambiará de acuerdo a lo que hayas seleccionado dentro de tu Lienzo. Y si no he mencionado esto antes o esta parte media aquí mismo donde sí tienes todas tus mesas de trabajo y tus objetos en tus formas y todo se conoce como lienzo y tu proyecto, este lienzo es realmente infinito, por lo que puedes agregar tantos objetos soy como quieras, y va a seguir adelante y simplemente se va a hacer más grande. Es como un pequeño universo para tus diseños. Si quieres pensarlo de esa manera. No sé por qué, pero eso es sólo una analogía que me gusta usar. Ahora bien, si sigo adelante y selecciono una mesa de trabajo haciendo clic en su nombre aquí, se puede ver que obtenemos algunas opciones incluyendo opciones de transformación. Por lo que puedo cambiar el ancho de este marco por aquí solo introduciendo un nuevo píxel de ancho. Puedo cambiar la altura. Puedo elegir llenar color de este tablero de arte. Incluso puedo crear rejillas a través de mis tableros de arte. Entonces ese es el panel Propiedades para cuando tengas un incómodo seleccionado. Pero si tienes un objeto seleccionado, verás que eso cambiará pronto. Y te daremos más opciones para trabajar con más configuraciones de tu objeto. Ahora, exploraremos todas estas opciones en detalle a medida que pasamos por aprender a crear formas y esas. Y por supuesto, si seleccionas el texto, obtienes diferentes conjuntos de opciones como tu fuente, tu tamaño de fuente, y así sucesivamente. Ahora notarás que hay ciertas cosas que se comparten entre sus más objetos o textos o tableros de arte. Y algunos de ellos podrían incluir efectos o apariencias así como la transformación. Por lo general estos se comparten entre muchos de los objetos, pero hay cosas diferentes como los textos que solo surgirán cuando tengas un texto seleccionado en tu Canvas. Y si no tienes nada seleccionado, entonces va a seguir adelante y simplemente mostrar prácticamente nada. Otra cosa genial, cuando tienes algo seleccionado, puedes seguir adelante y ajustar su alineación dentro de la mesa de trabajo. Y exploraremos esto cuando estemos aprendiendo alineación y distribución en XD. Enfriar. Entonces eso es solo un pequeño resumen de lo que estamos tratando en términos de nuestro diseño aquí. Espero que ahora estés un poco familiar, pero de nuevo, vamos a pasar por cada parte a detalle. Entonces no te preocupes si no entendiste mucho hasta ahora, eso cambiará pronto a medida que empecemos a diseñar y a familiarizarte con XD. Ahora en la siguiente sección, vamos a ir en profundidad con la mayoría de estos paneles de los que hablamos en esta conferencia. Entonces te veré ahí. 7. Las opciones de menú: Sin entrar extremadamente en los detalles, quería también pasar por las opciones de menú que tiene adobe XD en la parte superior. Yo estoy en una máquina Mac obviamente, pero si sí tienes Windows, este menú por aquí, probablemente será diferente para ti. Habrá debajo de un menú de hamburguesas en algún lugar por aquí. Entonces pondré aquí una captura de pantalla de la que podrás ver desde dónde puedes acceder al mismo menú. Entonces si te estás cayendo sobre un Windows, solo ten en cuenta eso un pequeño cambio. Pero las opciones de menú deben seguir siendo similares. Por lo que aún podrás caer por lo mismo, independientemente de si estás usando Excel en un Windows o Mac, trabajando nuestro camino de izquierda a derecha de nuestro menú. En primer lugar tenemos archivo. Desde aquí podemos crear nuevos archivos, abrir archivos, abrir desde su computadora. Si tienes un archivo en tu máquina para abrir, puedes acceder a proyectos recientes. Si tienes múltiples proyectos, puedes cambiar rápidamente entre ellos aquí. Pero debido a que sólo tenemos un proyecto se abre, solo te mostrará este proyecto. Podrás obtener kits de interfaz de usuario desde este menú aquí, cuales pasarán en la siguiente sección de este curso. Podemos gestionar nuestras bibliotecas, que hablamos en la conferencia anterior muy brevemente. Él puede seguir adelante y guardar que tu archivo Adobe XD por aquí. Si quieres guardarlo en algún lugar, los proyectos específicos se guardan de forma predeterminada en Creative Cloud, que aparecerá debajo de tus archivos. Desde archivo, también puedes acceder a tu historial de documentos. Ahora a este historial de documentos también tienes acceso haciendo clic en esta pequeña flecha por aquí. Seguirá adelante y te mostrará las diferentes versiones de tu proyecto ya que has estado trabajando en él a lo largo del tiempo. Para que puedas seguir adelante y dar click en diferentes versiones por tiempo para ver qué ha cambiado. Ahora por supuesto, porque realmente no he cambiado mucho. Es lo mismo ahora mismo entre los dos. Pero a medida que pases por más cambios en tu proyecto, verás que se sumará más Historia del Documento, lo cual es bastante útil si tú, lo cual es bastante útil si tú, digamos que cometiste un error y quieres volver a cierto punto en tiempo. Bajo opciones de edición, tenemos deshacer, rehacer tu corte habitual copiar y pegar. Pero también tenemos algo llamado Pegar apariencia, que es genial. Seguiremos adelante y esencialmente nos permitiremos copiar sólo una apariencia de un objeto, pero no el objeto en sí. Pasaremos por eso mientras estamos explorando nuestras herramientas de forma. Y tenemos la habitual borrar, seleccionar todo, desseleccionar todo, y así sucesivamente. En nuestra opción de objeto, tenemos Grupo, Desagrupar. Entonces si estás trabajando con múltiples objetos, podemos agruparlos y desagruparlos. Y esto también aparecerá en el panel de capas. Puedes bloquear u objetos altos de tus tableros de arte, tu Lienzo. Puede agregar colores a su panel de activos. En estilos de carácter, puedes crear componentes a partir de aquí, lo que nos permitirá crear objetos reutilizables a lo largo de nuestro proyecto. Y exploraremos los componentes porque es una de las cosas más útiles en XD. Si estás trabajando con un componente y queríamos restablecerlo al escenario principal. Podemos hacer eso desde aquí. Podemos marcar las cosas para la exportación. Por lo que para trabajar en múltiples cosas, podemos seleccionar las que queremos exportar y hacerlas listas para su exportación por aquí, podemos crear máscaras o repetir cuadrículas. A partir de aquí. Pasaremos por ambas opciones en este curso. Tenemos algunas opciones de camino por las que pasaremos. Tenemos texto. Entonces si quieres que tu texto sea negrita, cursiva, puedes hacerlo desde aquí. Podemos arreglar las cosas. Entonces, en nuestro panel Capas también, podemos hacer esto, pero si sí quieres un atajo, también puedes venir aquí para llevar cosas al frente o adelantar las cosas. Al revés. Podemos transformar las cosas volteándolas horizontalmente, verticalmente. Aquí, podemos alinear las cosas a la izquierda, centro, derecha, arriba, medio, abajo, que también tenemos acceso. Aquí arriba. Podemos distribuir cosas horizontal y verticalmente. Por lo que esto espaciará uniformemente las cosas. Y vamos a pasar por esto ya que estamos aprendiendo sobre la distribución y la alineación no están bajo nuestro plugin. Según se explicó. Los plugins nos permiten automatizar nuestro trabajo de diseño y hacer las cosas mucho más rápidas para nosotros. Por lo que definitivamente estaremos usando algunos plugins en nuestros diseños. Y una vez que lo hagas instala algunos plugins que seguirán adelante y mostrarán por aquí para que puedas acceder fácilmente a ellos en cualquier momento. Bajo nuestra vista, tenemos nuestras características de zoom, zoom out. Podemos utilizar nuestras opciones de comando o control y número aquí para hacer zoom en ciertos niveles, pasará por hacer zoom todo en una conferencia separada. Podemos entrar al eje de pantalla completa. Nuestras capas de bibliotecas son plugins que esencialmente son iguales a lo que hacen estos botones aquí abajo. Podemos crear maquetación o cuadradas, que exploraremos también. Y bajo una opción de Windows tenemos el habitual minimizar, Zoom, así sucesivamente y así sucesivamente. Ahora podemos previsualizar nuestro proyecto pulsando Command Enter en un Mac o Control Enter. Y va a seguir adelante y abrirla. Pero es esencialmente lo mismo que hacer clic en este icono presente o icono de vista previa de escritorio por aquí. Y bajo Ayuda si en algún momento sí queremos buscar una determinada tarea. Entonces digamos que queremos acceder a nuestras herramientas de Zoom que podemos escribir rápidamente Zoom y acceder a la opción que queremos fácilmente. Y eso sólo hace que sea mucho más rápido para nosotros encontrar exactamente lo que estamos buscando. Por lo que en cualquier momento puedes usar esta función de Ayuda a lo largo del curso porque es solo un poco breve sobre lo que la opción de menú y tiene que ofrecer. Y la próxima conferencia voy a compartir con ustedes algunos atajos a los que se puede tener acceso que son útiles. No tienes que memorizar estos atajos. De hecho, creo que probablemente esa no sea la mejor manera de aprenderlas. El mejor modo es sólo echar un breve vistazo a este documento. Y luego con el tiempo, como trabajamos en el proyecto, los estaré usando y te estaré recordando que los uses también. Y así de esta manera a través de la práctica, podemos utilizar estos atajos, estos atajos de teclado, para hacer mucho más eficiente nuestro proceso de diseño. 8. Crear formas: De acuerdo, estamos listos para saltar a explorar algunas de las herramientas que tenemos en XD. Y lo primero es lo primero las formas. Y por supuesto, las formas es realmente importante porque compone muchos de nuestros objetos en nuestros diseños. Ya sea que estemos trabajando con botones o imágenes de perfil o iconos de menú, todo realmente consiste en formas InDesign. Ahora, por supuesto que podría ser tan simple como un rectángulo o tan complejo como un dibujar de manera única un icono usando la herramienta de lápiz, las posibilidades son infinitas. Entonces, antes de saltar y explorar algunas formas, Vamos a deshacernos de este archivo y crear uno nuevo yendo a nuestra página de inicio y haciendo clic en Nuevo archivo. Ahora podrías notar que XD no cerrará tus archivos originales. Entonces si ya estás en un archivo, seguirá adelante y lo mantendrá abierto y solo crea otra ventana, al menos en el Mac que está. Entonces si quieres, puedes seguir adelante y simplemente cerrar ese archivo. Y no te preocupes, está guardado en la Nube para que siempre tengas acceso a ella en cualquier momento desde la pantalla de inicio. Entonces ahí está tu nuevo expediente. Vamos a seguir adelante y renombrar este por explorar herramientas XD. Yo sólo voy a seguir adelante y titulo eso porque eso es literalmente lo que estamos haciendo con este expediente. Puedes nombrarlo realmente como quieras. Aquí no hay realmente bien o mal. Es solo que me gusta mantener mis archivos organizados para que sepa exactamente a qué se refiere. Primero lo primero, nuestras formas son accesibles a través del panel de herramientas o la muy izquierda de la ventana. Por lo que tenemos acceso a un rectángulo, elipse, unas líneas de polígonos, y podemos crear formas personalizadas con corchetes internos de la herramienta Pluma. Verás el acceso directo para crear estas formas. Entonces si ya estás en tu tablero de arte y quieres crear rápidamente, digamos un rectángulo. Simplemente puede presionar la tecla R de su teclado. Y este pequeño cursor saldrá donde realmente puedas dibujar tu rectángulo. Entonces si sigo adelante y empiezo a hacer clic y arrastrar, ya ves que estoy creando una forma o rectángulo en base a cuál es mi preferencia. Cuando estás creando cualquier forma. Si mantienes pulsada la tecla shift mientras estás creando esa forma, XD seguirá adelante y bloqueará las proporciones del ancho y la altura. Por lo que de esta manera podrás crear un cuadrado perfecto o perfecto o un círculo perfecto si estás trabajando con un círculo. Entonces sigamos adelante y creemos una plaza. Sólo dejarlo ir aquí mismo. Como puedes ver, he creado una forma. Puedo presionar Escape en mi teclado para salir de la herramienta de forma una vez que la presionen dos veces. O otra opción es que solo puedo presionar V, que seleccionará esta pequeña herramienta Seleccionar para que estemos fuera de crear rectángulos. De lo contrario, si te quedas en el modo rectángulo, puedes seguir adelante creando múltiples rectángulos si quieres. Y siempre que quieras dejar esa herramienta, puedes seguir adelante y hacer clic en este pequeño ícono o V en tu teclado. Y ahora estoy fuera de esa herramienta de rectángulo. Y siempre que un drag, solo estoy seleccionando objetos en mi tablero de arte. Simplemente voy a seguir adelante y seleccionar estos y dar clic en Eliminar para deshacernos de ellos porque sólo necesitamos la plaza por ahora. Ahora que mencioné, el panel de propiedades cambiará de acuerdo a lo que haya seleccionado. Por lo que ahora mismo nuestra forma sólo está consistente en esta pequeña frontera por aquí. Pero si queremos agregar, digamos, un color dentro de él, simplemente podemos hacer click en él aquí mismo. Ahora bien, si tiene el panel de capas abierto aquí arriba, que, que sí sugiero tenerlo abierto por defecto. Se puede ver dentro de una mesa de trabajo de mi web 1920, tengo una capa de rectángulo. Ahora si estoy afuera aquí y seleccioné a través del panel de capas, va a seguir adelante y hacer lo mismo y sólo lo seleccionaremos para mí. Y del lado derecho, tengo ciertas opciones. Puedo seguir adelante y repetir esta plaza si quiero múltiples copias de la misma en toda mi mesa de trabajo, que es super cool, esto vendrá muy útil ya que estamos trabajando con nuestros diseños. Se puede escapar de ahí. Y sólo tienes que volver a seleccionar la opción. Si quieres seguir adelante y solo hacer desagrupar y volver a mi rectángulo. Como se discutió antes, puedo seguir adelante y cambiar mi ancho y altura aquí. Entonces si quiero cambiar mi ancho aquí, puedo cambiarlo a 400. Y ahora tengo un rectángulo en contraposición a cuadrado. Pero si sí quieres bloquear la proporción para que cuando lo hagas cambies tu ancho y alto, sí se mantengan igual. Puedes hacer clic en este pequeño icono de aspecto de candado aquí. Y una vez que lo hagas, si cambio mi ancho a 400, ahora tanto mi ancho como la altura lo cambiarán por 100, lo cual es super cool. Eso es un poco x e Y indican dónde está esta pequeña forma en mi tablero de arte. Entonces este pequeño punto por aquí y cada esquina superior izquierda es esencialmente lo que representan estos dos puntos. Este pequeño punto aquí, mi mesa de trabajo es x 0 y y 0. Por lo que esencialmente 88 significa esta pequeña forma o esta parte de la forma es de 88 píxeles horizontalmente y 93 píxeles verticalmente. Entonces si muevo esto, notarás que las pequeñas x e y están cambiando. Y si lo pongo en la esquina, cuál de las cosas geniales es que cuando las cosas se acercan a esquinas o bordes, XD irá adelante y automáticamente lo encajará en su lugar. Y ahora como se puede ver, 0000, y por supuesto me imagino que cambia con sólo escribir el número. Ahora desde cualquier punto, puedo seguir adelante y rotar mi plaza. Y puedo presionar Comando Z para deshacer eso o Control Z en Windows. Está trabajando nuestro camino hacia abajo en el panel de propiedades. Puedo seguir adelante y cambiar el relleno como discutimos. Por lo que al hacer clic en este pequeño icono de fallar, puedo seguir adelante y elegir un nuevo color, como un poco azul por aquí. Y puedo cambiar el tono para elegir exactamente lo que quiero sin quería más claro o más oscuro. Por lo que tenemos ahora una tasa de llenado así como una frontera. El borde de aquí tiene un tamaño de un píxel. Entonces si cambio esto para engañar y 20, en realidad se puede ver la frontera ahora mucho más claramente. Podemos cambiar el color de la frontera también. Entonces si puedes hacer una especie de frontera gris justo aquí. Y yo sólo puedo seguir adelante y cerrar eso. Puedo crear bordes redondos para mi borde. Entonces si miras ahora mismo, si solo hago zoom más, porque un poco difícil de ver en ese nivel de zoom. Si haces clic en esta pequeña ronda unirse, se irá adelante y apenas alrededor de los bordes de nuestra frontera. O puedes hacer esta opción aquí la cual solo creará una unión biselada. O simplemente puedes hacer una unión de fusión, esencialmente solo sin ningún redondeo. Vamos a seguir adelante y alejarnos. Estoy usando mi scroll en mi trackpad para acercar y alejar. Puedes poner algunos efectos en tus formas, pero haciendo sombra interior. Entonces hay esta pequeña sombra interior ahora mismo es un poco difícil de ver porque probablemente está siendo escondida difícil de ver porque probablemente está por mi frontera aquí. Pero si hago un exceso de 20 y un Y de 20, y tal vez cambie este radio de desenfoque a 20 también. Ya puedes verlo aquí atrás. Y si hago clic en él, verás las transparencias tipo de menor tasa hacia abajo. Para que pueda seguir adelante y hacerlo más opaco o más visible. Por lo que a medida que lo oscurecen, se puede ver que la sombra se está haciendo más fuerte, o si te acercas al fondo será más claro. Incluso puedes cambiar el color de tu sombra si no quieres que sea negra. Pero típicamente para las sombras usamos el color negro. Si quieres sombra exterior o sombra caída, puedes hacer esta opción por aquí. Y lo mismo. Puedes seguir adelante y controlarlo. Y como puedes ver ahora en el exterior de mi forma, me estoy poniendo un poco de sombra, lo cual es bastante guay. Puedo elegir la x e y de ella. Entonces si quiero que esté un poco más lejos y más borroso, así que está un poco más borroso. Yo también puedo hacer esa opción. Nuevamente, tienes control total sobre la obesidad de barra de color de tus sombras solo hacer clic en este pequeño ícono de aquí. Y en cualquier momento solo puedes hacer clic en la casita de verificación pequeña para eliminar tus sombras. Explorará el desenfoque de fondo más adelante, así como marcado para la exportación. Pero así es esencialmente como se crean formas. Si quieres explorar con otras formas como círculos, sigue adelante y crea diferentes círculos o triángulos diferentes y explora tus formas. Entonces así es esencialmente como se crean formas en Adobe exceed. La mayoría de estas propiedades son más o menos iguales cuando se trata de diferentes formas. Para que puedas seguir adelante y crear elipses y jugar con el relleno del borde, las sombras, e ir desde ahí. Algo que sí quiero señalar es que si salgo fuera de la forma del camino, haga clic en esta casita de aquí. Esto de aquí es esencialmente la opacidad de esa forma cuadrada en mi mesa de trabajo. Entonces si hago L4, ella, como pueden ver, se irá adelante y se alimentará. Y si pongo otros objetos debajo. Entonces si pongo esta pequeña elipse en la esquina aquí en este momento porque está encima de mi rectángulo, está asumiendo por completo. Si sigo adelante y lo muevo bajo mi rectángulo. Ahora, mi rectángulo está encima de la forma de elipse por aquí. Entonces si cambio la opacidad dependiendo de lo transparente que sea, seguirá adelante y o bien oculte por completo esa elipse porque está encima de ella, o muestro un poco de ella en base qué tan visible quieres tu forma. Y en las siguientes conferencias también vamos a explorar nuestras herramientas de línea y pluma también. Pero antes de que hagamos eso, te voy a hacer un poco de ejercicio. Y eso es para darle a este pequeño círculo un relleno naranja, así como un borde negro, solo para que puedas conseguir un poco de práctica en cuanto personalizar tus formas en XD. Y nos vemos en la próxima conferencia. 9. Solución de ejercicios de formas: Muy bien, así que espero que hayas tenido la oportunidad echar un vistazo a las herramientas de forma y explorarlas un poco. Ahora, sí te di un poco de ejercicio para crear un círculo y darle un relleno naranja, así como Puerto Eso es negro. Entonces vamos a hacer eso juntos y esta conferencia para luego repasar sólo algunas otras cosas que quiero explorarlo con formas contigo. Entonces lo primero es ir adelante y simplemente borrar este círculo que ya creé. Entonces como mencioné antes, hay atajos para crear formas. Entonces el de elipses, que es lo que usas para crear un círculo es E. Así que en cualquier momento, si estuvieras en tu mesa de trabajo, puedes seguir adelante y simplemente presionar la tecla E en tu teclado, um, que te pondrá en el mismo modo que el modo elipse por aquí. Si no, siempre puedes presionar Escape. Voy adelante y haciendo clic en la herramienta de elipse. Ahora bien, no mencioné exactamente qué tamaño debe ser el círculo ni qué tan grueso debe ser el borde. Entonces te lo dejé a ti. Pero por el bien de esta lección, solo vamos a seguir adelante y convertirla en un círculo que 400 píxeles por 400 píxeles. Ahora, una cosa que sí quiero señalar es que si sí quieres hacer un círculo o una forma que sea de un tamaño específico, puedes seguir adelante y simplemente dar click en tu lienzo y luego seguir adelante y empezar a dibujar tu elipse aquí. Ahora, ahora mismo no sé de qué tamaño es mi elipse, pero lo que puedo hacer es que puedo seguir adelante y antes que nada, sostener turnos que es un círculo perfecto. De lo contrario, voy a estar haciendo una forma ovalada. Y luego del lado derecho aquí y el panel de propiedades de transformación, ya que estoy arrastrando mi forma, se puede ver el tamaño, el tamaño de píxel aquí. Entonces si en algún momento sí lo suelto, la forma se creará a ese tamaño. Ahora, lo que pasó aquí, pero a veces se puede pasar es que solté Shift antes de que realmente creara mi círculo. Entonces, si algo así te sucede, simplemente puedes seguir adelante y eliminar o simplemente presionar Command Z para deshacer eso y luego hacerlo una vez más, asegurándote de mantener pulsado shift todo el camino a través mientras arrastras tu forma. Y así si solo me gusta por aquí, este es el perfecto 400 por 400 píxeles. Pero de nuevo, siempre puedes ajustar tu forma u tamaño de objeto desde aquí, el ancho y la altura. que ya tenemos el perfecto para un círculo de 100 pixels por 100 pixels, podemos dejar eso tal como está. Sigamos adelante y seleccionemos nuestra herramienta selecta por aquí. Haga clic en el círculo que ya hemos seleccionado. Y luego adelante a la porción de relleno por aquí, sigamos adelante y le demos un relleno de naranja. Entonces en el deslizador por aquí, solo puedes seguir adelante y escoger una especie de tonalidad naranja, algo así funciona. Y yendo adelante y arrastrando este pequeño selector de color o selector Q en el color que quieras, Hay un buen color naranja. Y luego para la frontera, Vamos también adelante y darle un tamaño de 20 pixel, similar a lo que tenemos con esta plaza por aquí. Y luego para el color del borde, solo podemos seguir adelante y dar click en esto. Y para el negro, simplemente podemos seguir adelante y arrastrar este pequeño selector de color hasta la parte inferior derecha, que vamos a seguir adelante y darnos color de borde negro. Enfriar. Entonces ahora tenemos un círculo o un círculo naranja con un borde negro a su alrededor. Dos cositas que quiero mencionar en este video. Una de ellas es la característica fresca de pegar apariencias. Entonces si recuerdas lo que estábamos pasando por las opciones de menú para XD, hablamos de cómo realmente podemos copiar y pegar apariencias entre diferentes objetos. Entonces digamos que quiero aplicar esta apariencia de círculos anaranjados en esta plaza. Tengo dos opciones. Puedo seguir adelante y dar click en la plaza y luego hacer esos mismos ajustes aquí. Ahora, una cosa genial es que puedo hacer clic en esta pequeña herramienta cuentagotas por aquí, seguir adelante y dar click en esta naranja para darme exactamente ese color. Por lo que esta pequeña herramienta cuentagotas te permite darle color a tu relleno o a tu color de borde mismocolor a tu relleno o a tu color de bordeque tu cursor. Entonces donde sea que esté mirando tu cursor. Entonces si está en este pequeño borde negro de aquí, entonces iremos adelante y cambiaremos el relleno a negro dependiendo de dónde hagas clic. Voy a usar Command Z para deshacer eso dos veces y volver a mi plaza azul. Ahora, te voy a mostrar una manera más fácil de darle realmente a tu cuadrado la misma apariencia que tu óvalo. Y simplemente, puedes hacerlo haciendo clic en el cuadrado, presionando el Comando C, que es lo mismo que copiar o Control C en Windows, clicker cuadrado, pero en lugar de pegar realmente, que pegará otro ovalada. En lugar de hacer eso, solo voy a usar Command Z para deshacer eso. Vamos a seguir adelante y hacer clic en tu cuadrado y pulsa Opción Comando V, donde también puede hacer yendo a Editar, Pegar apariencia en tu menú. Entonces, esencialmente lo que se hace es que se ha ido adelante y dado a mi cuadrado la misma apariencia que el círculo. Ahora si le di a ese círculo una sombra o un blog o cualquier otra cosa, más allá de ese parecer efectos también se copiarán a la forma. Entonces esto es muy útil y nos ahorra mucho tiempo si quieres seguir adelante y usar el mismo estilo entre diferentes formas u objetos. Entonces es un truco un poco aseado para darle las mismas apariencias a tus objetos. Y otra cosa genial que quiero compartirla contigo sobre rectángulos. En realidad puedes ir adelante y dar la vuelta a las esquinas de tu rectángulo. Entonces, ya sea un cuadrado o un rectángulo, puedes seguir adelante e ir a cualquier esquina. Entonces como puedes ver, esta pequeña esquina por aquí, asegúrate de no estar haciendo clic en el círculo exterior fue que vamos a seguir adelante y dejarte cambiar el tamaño de tu forma cuando uses Comando Z para deshacer eso. Pero estoy hablando de este círculo interno por aquí. Este círculo interior, si vas adelante y lo sujetas y arrastras, te permitirá realmente redondear los bordes o las esquinas de tu forma. Por lo que cuanto más arrastre dentro, más se convertirá en una elipse y se redondeará completamente. Sobre todo porque es una plaza. O si sigo adelante y solo hago unas esquinas ligeramente redondeadas, puedo hacer algo así, que podemos usar para botones, formas, iconos de aplicaciones y así sucesivamente y así sucesivamente. Ahora siempre puedes ajustar este radio de esquina, pero yendo hacia el lado derecho por aquí y aquí abajo bajo apariencia, verás esta opción de radio de esquina pequeño. Puedes seguir adelante y cambiar este número por aquí. Por lo que ahora mismo tenemos un radio de esquina de 75. Pero si lo pones a, digamos 25. Y puedo ver tu plaza tendrá una esquina un poco menos redondeada. Y si quieres, el radio de esquina específico es de cuatro esquinas diferentes. Podemos seguir adelante y en realidad hacer clic en este pequeño ícono por aquí. Y entonces nos dará opciones para cambiar nuestro radio de esquina en esquinas específicas. Y esto va en el formato de arriba a la izquierda, arriba a la derecha, abajo a la derecha, e inferior a la izquierda. Entonces si cambias la parte superior izquierda a, digamos 75. Ahora tenemos una esquina superior izquierda más redondeada que los otros lados. Y ahora si sigo adelante y tuiteo esto, seguirá adelante y cambiará de nuevo todas las fronteras, o todos los rincones. El radio es otra vez. Pero si solo deshago eso y sostengo Alt mientras hago eso. Ahora se puede ver sosteniendo Alt, sólo puedo alterar ese radio de esquina por sí mismo sin impactar a los otros. Y yo puedo hacer lo mismo en otras esquinas también. Bastante dulce. Ese es un truco un poco aseado para dar tus formas alrededor de ella frontera. Voy a usar Command Z manojo de veces para simplemente volver a un 25 perfecto en todos los lados o en todas las esquinas para el radio. Y sólo déjalo tal como está. En las siguientes conferencias, vamos a volver y explorar nuestras herramientas de línea y bolígrafo para crear formas más personalizadas. 10. Dibujo de líneas: De acuerdo, Hasta ahora hemos creado un cuadrado, hemos creado un círculo. Y ahora es el momento de explorar nuestra herramienta de línea. Entonces las líneas son realmente útiles si quieres seguir adelante y crear cosas como los iconos del menú de hamburguesas o divisores, o realmente cualquier cosa donde no requieras un objeto como estos con relleno, pero solo quieres alinear simplemente a través de tus diseños. Para que pueda seguir adelante y dar click en esto. Así que sigamos adelante y pinchemos en esta pequeña herramienta de línea por aquí en nuestro panel de herramientas. Y luego seguir adelante y trazar una línea simplemente haciendo clic en nuestra mesa de trabajo y sosteniendo y arrastrando hasta donde queremos que termine nuestra línea. El mientras estás sosteniendo el cursor. Si sigues adelante y mantienes pulsado Shift mientras estás dibujando tu línea, puedes seguir adelante y realmente crear líneas rectas. Entonces si quieres una línea perfectamente recta como esta, puedes seguir adelante y dejar ir por aquí. O si quieres una línea angulada en un ángulo de 45 grados, puedes seguir adelante y girar tu cursor para obtener esos ángulos perfectos en las marcas de 45 grados. Por lo que puedes hacer una línea recta hacia abajo o vertical como esta o un poco angulada quería un ángulo de 45 grados o solo un 0 grados o simplemente una línea recta como ésta. Y como ir por aquí, asegúrate mientras estás dibujando tus formas, si estás usando ese Shift para soltar ese turno después de soltar tu cursor. Así que asegúrate de no hacerlo antes. De lo contrario, toda esa cosa del ángulo se puede estropear si solo sueltas Shift antes de soltar el ratón y crear la forma. Simplemente voy a seguir adelante y borrar esa. Ahora podemos hacer clic en escape para salir de esa herramienta de línea, seguir adelante y hacer clic en nuestra línea por aquí. Por lo que desde aquí se puede ver el ancho de nuestra línea, 368. Entonces cuando sigamos adelante y cambiemos eso a 400, impresionante. Entonces ahora tenemos una línea que es de 400 píxeles y no tiene altura. Si sí te das una altura de forro, como puedes verlo no pasará nada porque una línea está esencialmente alineada. No hay altura a una línea, es solo un ancho. Por lo que si quieres hacer tus líneas más gruesas, simplemente puedes seguir adelante. Y ves que tenemos la frontera por aquí, que es lo que aquí se muestra. Podemos seguir adelante y simplemente agregar tamaño a nuestra frontera. Entonces si lo haces cinco pixeles, ahora ves me sale un poco de una línea más gruesa. Puedes hacer 10 píxeles, por lo que es aún más grueso. Ahora, si quieres darle un pequeño guión a nuestra línea, cada cinco píxeles, podemos seguir adelante y cambiarla así. O digamos 50 píxeles. Podemos crear líneas discontinuas así. Si quieres brechas específicas entre nuestros guiones, podemos seguir adelante e ingresar un número específico. Y ahora nuestros guiones tendrán esta brecha entre sí. Así que siéntete libre de jugar con esos números para ver qué tipo de formas obtienes. Entonces podemos crear, por ejemplo, un guión que sea de 50 píxeles con un hueco de 100 píxeles, o un guión perfecto, eso es de 50 píxeles con una brecha de trazo de 50, y así sucesivamente. Por lo que podemos ajustar esos de nuevo a 0 siempre que queramos restablecer a una línea recta. Ahora con una línea similar a la que teníamos con nuestra opción de frontera para r cuadrado, podemos seguir adelante y en realidad darle un extremo tapas específicas para que podamos hacer una ronda y así tenemos una línea como redondeada ahora en los bordes. Ahora quiero mostrarte algunos trucos, consejos y trucos ordenados mientras estás creando formas. Ahora esto aplica a cualquier forma, no solo líneas, sino si en algún momento quieres dejar decir, haz que esta línea sea más corta o más larga, claro, puedes ir adelante y agarrar cada extremo y hacer que cada extremo sea más corto o más largo. Ahora, porque ahora estoy ajustando mi nota aquí para esta línea. Seguirá adelante y estará en estilos de forma libre, así que ya no es recta, pero de nuevo, sosteniendo Shift, puedo hacerlo recto. Entonces si quieres una línea más corta, tenemos que seguir adelante y agarrar cada nodo y hacer la línea más corta. Pero si realmente deshago eso, ahora mientras estoy sosteniendo un nodo, si sigo adelante y sostengo Alt, puedo seguir adelante y arrastrar un nodo y hacer que ambos lados cambien. Y de nuevo, si quieres mantener juntos Shift y Alt ahora estamos ajustando ese agujero línea recta sin faltar es ángulo recto. Entonces por ejemplo, este pequeño círculo aquí. Si sostengo Alt, puedo seguir adelante y editar todos los lados. Y de nuevo, al sostener Shift, seguirá adelante y constreñirá esa proporción del ancho y la altura. Sólo voy a dejarlo ir y dejarlo tal como está. Y sí, así que eso es crear líneas en XD. Ahora vamos a volver en la próxima conferencia y aprender cómo podemos usar realmente la herramienta de lápiz para crear líneas y formas más complejas para casos específicos donde estamos dibujando ciertos iconos o quieres trazar un objeto y así sucesivamente, así sucesivamente. Entonces te veré en la próxima conferencia. 11. Uso de la herramienta Pluma: Entonces, ¿qué es esta herramienta de bolígrafo de aquí? Seguimos hablando de ello. Se ve bastante elegante. Y a veces en realidad ni siquiera se usa tanto como pensamos. Pero siempre es bueno tener una idea de a qué tenemos acceso en nuestro panel de herramientas. si acaso, hay esos raros casos en los que necesitamos usar ciertas herramientas. Entonces, ¿por qué no seguimos adelante y agarramos una herramienta de bolígrafo con solo hacer clic en este pequeño icono de la herramienta de bolígrafo. O siempre puedes presionar P en tu teclado y te dará el mismo tipo de cursor. Ahora estoy acercado aquí. Entonces voy a ir a este lado de mi tablero de arte aquí. Y solo voy a seguir adelante y crear un poco de forma personalizada aquí con sólo hacer clic y crear nodos. Entonces, cuando se trata de la herramienta de lápiz, piénsalo como creando una forma con múltiples líneas. Por lo que he creado el primer nodo con sólo hacer clic allí. Si vuelvo a hacer clic, va a crear un segundo nodo. Y si vuelvo a hacer clic en otro lugar, va a crear ese tercer nodo y así sucesivamente y así sucesivamente. Ahora una de las cosas geniales es que mientras estás dibujando una forma en la herramienta de bolígrafo , te dará esa pequeña guía, como esa línea azul aquí para decirte que ahora mismo estás en línea recta Vaughn y crear algo que esté dentro de la línea de costura o misma posición y que en otra nota que tengo por aquí. Entonces puedo seguir adelante y ver dónde se encaja esa línea azul. Y ese es mi indicador de que esto está en el mismo nivel que esta pequeña nota de aquí, que es genial. Y lo mismo cuando se trata del otro nodo. Por lo que solo puedo seguir adelante y seguir pinchando. Entonces solo puedo crear algún par de otros nodos aleatorios. Ahora una cosa que sí quisiera mencionar es que a menos que cierres tu nota por aquí para tu forma, la herramienta de bolígrafo, solo seguiremos adelante y sin dejar que te detengas en ninguna punto puedes presionar escape para salir de esa herramienta. Y así ahora solo tienes esto. Y si presiono escape una vez más, solo tengo este camino que es como no cerrado. O siempre puedo volver a hacer doble clic en él y luego seguir dibujando. O simplemente puede ajustar cada nodo que existe. Entonces puedo entrar y retocar ese nodo o retocar este de aquí, o éste. O si quiero seguir dibujando, entonces simplemente puedo volver atrás y hacer clic en la herramienta del lápiz y completar esta forma. Ahora, mientras estoy aquí, puedo seguir adelante y dar click en este nodo aquí. Y ahora estoy de vuelta en mi herramienta Pen frenado, adelante y simplemente cerrar mi forma haciendo clic por aquí. Y así ahora como puedes ver automáticamente, Nos complace fuera de esa herramienta de bolígrafo, no sé si he creado algún tipo de icono de aspecto de diamante aquí. Pero supongo que podemos volver a entrar y arrastrar esta nota aquí abajo para hacer que esto se vea un poco más como un diamante. Entonces eso es esencialmente lo que la herramienta Pluma nos permite hacer es crear estas formas personalizadas. Y una vez que tengas una forma cerrada, por lo que eso significa una forma donde todos tus nodos estén conectados. Puedes darle un relleno como de costumbre. Para que puedas seguir adelante y darle el dar esta pequeña forma. No lo sé. Veamos relleno azul y tal vez hasta quitarle ese borde. Al igual que cualquier otra forma. Y ahora con esta forma, una cosa a tener en cuenta es que siempre puede volver atrás y editarla. Por lo que si haces doble clic para ir dentro de esa forma, siempre puedes editar esos nodos. O incluso puedes hacer cosas como ir en medio de 22 nodos y agregar aún más nodos. Realmente juego con eso y creo formas, formas personalizadas que te gustan. Yo sólo voy a deshacer esos dando click en Comando Z. Quiero mostrarte una cosa más cool cuando se trata de la herramienta de lápiz. Hasta el momento hemos creado una forma usando sólo líneas rectas. Pero si quieres crear una forma más sofisticada que use líneas curvas, siempre podemos hacer doble clic en nuestra forma por aquí para seguir adelante y convertir estos nodos en notas curvas. Y te mostraré lo que eso significa. Entonces, si pasas el cursor sobre alguno de estos nodos por aquí, puedes hacer doble clic en él para convertir eso en un nodo curvo. Entonces ahora si arrastro este punto por aquí, como pueden ver, se une a los otros dos nodos usando una línea curva. Y puedo ajustar esta línea curva usando estos pequeños puntos por aquí. Para que pueda hacer una pequeña curva lateral o curva vertical como ésta. Simplemente manténgalo en la calle sosteniendo Shift. Y como se mencionó antes, mientras mantiene pulsado Shift, seguirá adelante y se ajustará en ángulos específicos. Puedo hacer mi curva más, más redondeada o puede hacerla más sutil así. Los argumentos lo dejan como es así. Y se puede hacer esto con cualquier nodo. Por lo que al hacer doble clic, seguirás adelante y convertirás esos nodos en caminos curvos. Para que puedas hacer cosas como crear formas muy personalizadas. Ahora en cualquier momento, si quieres seguir adelante y deshacer eso y convertir tus notas en línea recta. Simplemente puedes deshacer eso haciendo doble clic en cada uno de esos nodos que están curvos. Y vamos a seguir adelante y te llevaremos de vuelta a esa calle en forma de calle o un camino de bolígrafo forrado de calle que tenías. Entonces no creo haber mencionado esto, pero un camino es esencialmente lo que hemos creado aquí usando la herramienta de lápiz. Entonces del lado izquierdo aquí por defecto, esto se llama Ruta 1, que es por defecto el nombre que se le da a nuestro camino justo aquí. Siempre puedes salir de un camino haciendo clic en Escape o pulsando V para volver a tu herramienta de selección. Y esa es la herramienta de lápiz para ti en XD, donde pueden hacer en la próxima conferencia y mirar herramientas booleanas y cómo realmente podemos combinar o usar múltiples formas juntas para crear, combinar formas. 12. Opciones boolean: Como se mencionó en la conferencia anterior, aún hay más dos formas. Podemos hacer esta cosa realmente genial, que pasamos brevemente en el menú, que se llama camino aquí abajo en el objeto. Por lo que si hace clic en el objeto en nuestro menú y baja a la trayectoria, realidad puede ir adelante y agregar, restar, intersectar, Excluir, solapar, convertir ruta y trazo de contorno. Lo cual en este momento probablemente no tengas ni idea lo que hacen cualquiera de esos, lo cual está totalmente bien. Ese es el punto completo de esta conferencia es que vamos a pasar por estos. Vamos a repasar cada uno de ellos brevemente para que tengan una idea de lo que hacen. Entonces lo primero es lo primero, voy a seguir adelante y sólo juntar mis formas aquí mismo. Que hay una especie de superposición aquí. Esto es solo con el propósito de esta lección para que puedas aprender lo que hacen esas herramientas booleanas. Entonces si solo arrastro y hago clic en ambas formas. Y ahora que ahora puedo ver que ambos están seleccionados porque ambos están resaltados en mi panel de capas. Y aquí mismo puedo ver que ambos tienen este esquema o dentro de lo cual significa que ambos están seleccionados. Otra forma de seleccionar objetos es yendo al panel Capas, haciendo clic en un objeto. Y luego mientras mantiene pulsado turno, puede hacer clic en otro objeto. Y ahora también se seleccionan ambos, por lo que ya sea o palabras. Así que sigue adelante y selecciona tanto tu forma cuadrada y ovalada por aquí, y luego baja a Ruta de objeto y haz Añadir, que también puede hacer manteniendo presionado el comando Alt. Te enfrías. Entonces ahora lo que se hace es que se crea una oveja sindical basada en esas dos formas que son la mitad. Entonces lo que eso significa es que se ha ido adelante y se une a esas dos formas para crear esta forma única que ahora puedo usar como lago. Ahora, esas formas aún están contenidas dentro de esos grupos sindicales. Entonces si hago doble clic en la forma misma, todavía puedo acceder a mi capa de elipse y rectángulo por aquí. Y aún puedo moverlos. Entonces si lo muevo y lo pongopor aquí en la esquina y luego salgo por aquí en la esquina y luego salgo haciendo clic de distancia o presionando Escape, puedes ver las formas ahora cambiadas. Y sigue siendo una oveja. A pesar de que todavía puedo acceder a esas capas individuales, que son súper cool. Esto nos permite crear formas únicas que necesitan crearse a partir de una combinación de múltiples formas o múltiples elipses, cuadrados, triángulos y así sucesivamente. Enfriar. Ahora voy al Comando Z para deshacer eso un montón de veces. Y ahora tenemos nuestras formas de vuelta como dos capas diferentes como era antes. Ahora si hacemos el otro camino que se llama Restar, hará exactamente lo contrario. Seguirá adelante y en realidad restará y, y eliminará cualquier parte compartida entre esas formas. Entonces porque el círculo y la plaza tenían esta pequeña área de medio círculo como este espacio compartido entre ellos. Se ha ido adelante y quita eso de las formas combinadas donde se le restan formas. Lo mismo con la resta. Siempre puedes entrar ahí y editar tu forma para crear diferentes tipos de sustracciones. Ahora por supuesto, si saco este círculo completamente de la plaza, no habrá restación porque no hay lugares donde estas dos formas se combinen. Entonces, para que las opciones booleanas funcionen, tus formas tienen que estar superpuestas, lo contrario no hay nada que agregar o restar. Entonces voy a deshacer eso un montón de veces, volver a mis formas, y luego vamos a probar el cruzado. Entonces lo que hace Intersect es que irá adelante y encontrará la región compartida entre esas dos formas. Entonces si solo vuelvo atrás, como pueden ver, esta pequeña área es lo que ambas formas se superponen. Entonces vamos a seguir adelante y sólo vamos a golpear Command Shift Z aquí para rehacer eso. Entonces como puedes ver, va a seguir adelante y combinar esos dos y encontrar el área donde esas formas cruzan y crear una forma única como esta, que siempre puedo, por supuesto, retocar. Deshagamos eso y volvamos al objeto. Explora, excluye la superposición, que hará lo contrario de intersectar. Seguirá adelante y encontrará el área que se comparte y quitará eso de la nueva forma. Por fin camino convertido. Seguiremos adelante y en realidad convertiremos estas dos formas en un camino, que es lo que teníamos con este tipo de forma se ve diamante por aquí. Entonces ahora si hago doble clic en mi círculo, puedo editar cada nodo. Y puedo hacer unas formas realmente únicas a partir de mi oveja preexistente a la que tenía acceso antes. Recuerda que para acceder a esos nodos, necesitas hacer doble clic en tu forma. Y luego seguir adelante y retocar esa forma. Si no estás dentro del camino y nada cambiará. Entonces tienes que asegurarte de que estás dentro del camino mismo. Y la forma en que haces eso es que una vez que estás dentro del camino, en realidad puedes editar cada nodo. Mandemos Z un montón de veces y volvamos a nuestras formas. Ahora voy a mandar Z hasta ver mi elipse y rectángulo en lugar de los caminos. Por último, por último pero no menos importante, es Object Path Outline Stroke. O puedes lograr esto presionando Shift Command O. Y lo que esto hará es, ahora mismo tenemos las fronteras y las formas. O si realmente retrocede, como se puede ver en el panel de capas, tenemos una elipse. Tenemos esta plaza, y está intacta con su frontera presionando Alt Comando O en lugar de turnos. Entonces si presionas Alt Command 0, ahora ves que he creado un trazo de contorno. Entonces lo que eso está haciendo es que separa mi frontera de la oveja. Entonces ahora la elipse es una forma separada. Y el borde aquí es el trazo, o el borde aquí es una forma separada también, o una capa separada, debo decir. Entonces ahora puedo mover estos alrededor y van a estar separados el uno del otro, entonces realmente están más relacionados. Y si borro uno, te ves que el trazo de contorno sigue ahí. Y si elimino el trazo aquí, la forma está quieta, o supongo que elipse aquí sin su trazo está aquí. Entonces, si en algún momento quieres separar el borde de la forma, puedes hacerlo yendo a Object, Path Outline Stroke. Una vez que tengas seleccionadas tus formas. De nuevo, voy a hacer el Comando Z un montón de veces. Vuelven a tener como palabra a mis ovejas. Y entonces sólo va a seguir adelante y separar eso de eso. Entonces como poco ejercicio antes de pasar de grupos booleanos, quiero que sigan adelante y creen una forma similar a ésta. Supongo que es una especie de forma de mancuerna. Y por supuesto, usa tus opciones de ruta bajo el objeto para lograr eso combinando múltiples formas para lograr este diseño similar. Una cosita ordenada que te quiero decir. Si quieres duplicar formas, siempre puedes presionar Comando D. Y luego iremos adelante y crearemos otra forma, otra copia de esa forma para ti. Un pequeño consejo. Si estás intentando duplicar este pequeño óvalo y colocarlo aquí. Entonces sí, dejaré eso como un poco de ejercicio para ti y luego lo haremos juntos en la próxima conferencia. 13. Solución de ejercicios de opciones booleanas: Muy bien, entonces ¿cómo hacemos esta forma usando nuestras herramientas booleanas? Bueno, en realidad no es tan difícil. Simplemente necesitas tres formas y luego vas a seguir adelante y unirlas o agregarlas usando la herramienta booleana. Entonces tengo dos elipses aquí y un rectángulo para la parte media aquí. Entonces voy a seguir adelante y sólo borrar este y rehacer eso otra vez. Entonces primero sigamos adelante y creemos nuestras elipses. Entonces voy a seguir adelante y presionar E, crear una elipse. Yo soy un poco así. Ancho y altura. No tiene que ser exactamente así. Simplemente haciéndolo por el bien de la solución de ejercicio aquí. Y luego puedes usar el Comando D para duplicar esa elipse. Y luego seguir adelante y moverlo la derecha de este lado por aquí. Y vamos a crear un rectángulo presionando R. Y especie de crear un rectángulo para unir esas dos elipses juntas. Enfriar, escapar de ahí usando su llave de escape. Ahora sigamos adelante y seleccionemos todas las formas juntas. Asegúrate de tener los tres seleccionados. Aquí mismo. Ve al camino del objeto y lo adivinaste, agrega. O también puedes usar Opción de Comando. Ya lo hiciste. Ahora tenemos una forma o una unión barata que combina las tres formas. Y hasta puedo seguir adelante y cambiar el relleno para darle lo que Phil me guste y hacer un poco de acuerdo llenar por aquí. Incluso puedes seguir adelante y quitar la frontera si no lo quieres. Enfriar. Entonces así es como usamos el grupo booleano para crear una especie de mancuerna con aspecto de forma como esta, necesitará saber qué es eso. Que en este momento solo estoy diseñando esta forma fuera de mi tablero de arte. Entonces cualquier cosa que diseñaras fuera de tu mesa irá bajo este tipo de mesa de pasteboard de parte de las capas. Puedo volver atrás y ver todo por aquí, todos mis tableros de arte. O haga click en este pasteboard para ver cualquier cosa que un lugar fuera de mí. Mesas de trabajo. Enfriar. Entonces ahora que tenemos cierta familiaridad con las formas y cómo crear formas, las unimos y usa el panel de propiedades para modificarlas. Cuando volvamos en la próxima conferencia y trabajamos con texto. 14. Agregar texto: Por fin es hora de explorar nuestra herramienta de texto en XD. Por lo que la herramienta de texto esencialmente nos permite, como su nombre indica, agregar texto a nuestro diseño. Entonces en cualquier momento puedo presionar la tecla T de mi teclado o simplemente ir a esta opción de texto aquí. Y luego seguir adelante y basta con dar click en cualquier parte mi mesa de trabajo para agregar texto. Puedes seguir adelante y empezar a escribir. Entonces solo voy a leer esto es texto de punto de muestra. Y luego en cualquier momento puedes simplemente hacer clic en Escape para obtener un cuadro de texto o simplemente hacer clic en algún otro lugar fuera de tu cuadro de texto. Y sigamos adelante y solo volvamos a nuestra herramienta Select. Y ahora como pueden ver, sólo voy a desplazarse hacia adentro. Tenemos este texto por aquí. Y todas las propiedades están listadas en este panel de propiedades aquí. Entonces este es un texto con helvetica nueva fuente. Actualmente es de 20 píxeles en cuanto al tamaño de fuente y tiene un peso de fuente de regular. Y por supuesto podemos cambiar o fuente desplazándonos a las fuentes que tenemos por aquí. Estas son las fuentes que he instalado en mi máquina. Por lo que podría verse diferente a la tuya. Si en cualquier momento deseas instalar nuevas fuentes, simplemente puedes instalar nuevas fuentes y ésta debería cargarse hasta tu XD sin ningún problema. Y a medida que iniciemos nuestro proyecto, exploraremos texto personalizado e instalaremos nuevas fuentes también. Por ahora, sólo voy a cambiarlo a esta otra fuente, Avenir Siguiente eso o cómo no tienes que hacer esto. Solo te estoy mostrando las propiedades de texto de que tienes acceso. Por lo que puedo cambiar estos 20 pixeles a 50. Y voy a seguir adelante y hacer mis textos más grandes. Como se puede ver. Puedo cambiar su camino. Pueden hacerlo cursiva, ultraligera. Lo haces audaz, pesado, así sucesivamente y demás. Ahora, estas opciones serán diferentes en función de qué fuente tienes instalada y qué pesos de fuente tienes instalada para esa fuente en tu máquina. Por lo que no todas las fuentes podrían tener estas muchas opciones. Algunos de ellos podrían simplemente tener el regular el balón, y algunos de ellos podrían tener el medio. Por lo que esto podría ser diferente en función qué fuente tienes instalada y cuál estás usando. A partir de aquí, podemos ajustar el espaciado entre letras. Entonces si pongo 10 píxeles, entonces irá adelante y aumentará el espaciado entre cada una de las letras. Y así hay algunos muy visibles. Pero si hago 50, se puede empezar a ver que el texto está empezando a ser más extendido son el espaciado entre cada letra. Puedo volver atrás, poner eso a 0. Ahora esto es para tu altura de línea porque ahora solo tenemos una sola línea. Realmente no verás que esto marque ninguna diferencia. Y de igual manera, esto es para mi espaciado de párrafos, pero porque esto es solo un texto plano, lo que significa que es solo un texto que está en una sola línea. Realmente no vamos a ver esas opciones. Muchas de otras cosas geniales a las que tienes acceso. Puedes seguir adelante y hacer que tu texto esté totalmente en mayúscula, totalmente en minúscula. Se puede hacer un caso de título. Por lo que cada letra o cada palabra primera letra se convierte en mayúsculas. Puedes superíndice o subíndice tus textos tenían subyacente, e incluso agregar un golpe a través de él. Por lo que estas son algunas características geniales a las que tienes acceso cuando se trata de texto. Todo lo demás es más o menos lo mismo que las formas. Por lo que tenemos nuestra apariencia o transparencia. Podemos cambiar el relleno o el color de los textos reales por aquí y darle un bonito azul. Todavía podemos agregarle un borde también. Incluso podemos seguir adelante y añadir sombras también. Ahora una cosa que sí quiero señalar es que cuando sí tienes un punto x como este, si quieres editarlo, solo puedes hacer doble clic en él y solo te permitirá editar tu texto. Ahora si solo sigo escribiendo y siguiendo y siguiendo, como pueden ver, los textos solo seguirán pasando y continuando sin ningún espaciado. Entonces el texto seguirá y seguirá porque es un punto x. En el punto x realmente no tienen espaciados. Técnicamente podrías presionar Enter. Estoy en ciertos puntos para crear múltiples líneas, pero no hay la mejor práctica porque a medida que tus textos se ajusten, no se verá muy parejo. Entonces. Te mostraré exactamente cómo realmente puedes hacer textos de tipo párrafo también. Una de las características aseadas que si quieres hacer tu texto más grande sin editar el tamaño de fuente por aquí, puedes alguien seguir adelante y arrastrar esta nota por aquí y arrastrarla hacia abajo, o hacia arriba para un tamaño de fuente más pequeño o hacia abajo para uno más grande. Y como se puede ver en el tamaño correcto, ese número está cambiando. Simplemente voy a hacer que eso vuelva a 50 píxeles. Y sigue adelante y solo quita esa parte extra y presiona Eliminar y escapa de ahí. Entonces ahora esta es una etiqueta de punto de muestra. Ahora error para crear un ajuste de texto o un texto de párrafo, simplemente puedes presionar la tecla T en tu teclado y en lugar de hacer clic en esta línea, simplemente sigue adelante y arrastra, igual que arrastrarías con un forma donde quieras que tu párrafo o que esté tu ajuste de texto. Entonces si voy por aquí ahora tengo un cuadro de texto que simplemente puedo seguir adelante y empezar a escribir. Y como estoy escribiendo, puedes ver que va a seguir adelante y entrar en una nueva línea basada en esa forma o ese marco que he creado para mi texto. Entonces así es como se crea ese texto de párrafo. Y ahora si salto de ahí, puedo seguir adelante y aumentar esto en cuanto al ancho. Por lo que puedo tener un cuadro de texto más largo. Yo puedo hacer lo mismo aquí aumentando la altura. Entonces si en algún momento mis textos sí van de la altura, podría estar oculto, así que tendré que seguir adelante y asegurarme de que mi altura coincida con ese texto para asegurarme de que mi altura coincida con que no haya Texas escondido ni se vaya fuera de ese cuadro de texto. Así que asegúrate de que cuando estés agregando texto en tus proyectos, algunas otras cosas geniales a las que tengas acceso, los textos que pasarán. Por lo que ahora tenemos una altura de línea que podemos seguir adelante y editar. Entonces, si cambias esto a 200, verás que la línea o el espaciado entre cada línea se ha incrementado a 200 píxeles. Creo que por defecto fue 68. Así que adelante y manténgalo en 68. Tienes párrafos nuevos, puedes cambiar el espaciado aquí mismo. Entonces si haces 50 pixeles, oops, 50 pixeles. Y voy a ir a un nuevo párrafo. Como puedes ver con cada nuevo párrafo, eso me dará un espaciado de 50 píxeles entre ellos. Ahora, ahora mismo porque tenemos un tamaño fijo, tendré que ajustar mi cuadro de texto en función del tamaño del texto. Pero si hago altura automática por aquí, que en realidad vaya adelante y ajuste altura de mis cuadros de texto en función de cuánto tiempo es todo el texto, el texto dentro de este cuadro de texto. Entonces como puedes ver, la altura se bloquea porque ahora está en altura automática. En cualquier momento puedo volver a la altura fija y luego darle mi propia altura. Seguro que quiero darle una altura específica. En cualquier momento puedo seguir adelante y también hacer ancho automático. Entonces eso sería lo mismo, pero en cuanto al ancho. Por lo que puedes elegir un ancho automático o una altura automática. Entonces si quieres tener un cambio dinámicamente el ancho del cuadro de texto o la altura. Puedes elegir eso en consecuencia. O de nuevo, puedes escoger un tamaño fijo si sabes específicamente tu cuadro de texto necesita este ancho y esta altura. Entonces así es como agregamos texto a nuestros proyectos. 15. Agrupación de capas: Entonces a medida que empezamos a agregar más y más cosas dentro de nuestro tablero de arte por tan solo hacer clic aquí para que podamos ver en nuestro panel de Capas, las cosas comenzarán a ponerse bastante ocupadas por aquí y bastante agitadas si no quiero, tenerlos agrupados. Por eso en nuestro panel Capas, realidad podemos agrupar cosas que son irrelevantes. que más adelante podamos tener ciertos objetos pertenecen a un grupo y podamos hacer ediciones fácilmente y saber exactamente lo que pertenece a Y. Entonces en este caso, podría no tener sentido agrupar todo juntos porque realmente sólo un poco experimentamos con las herramientas de una oveja y las herramientas de texto. Realmente no tenemos ninguna relación entre estas cosas. Pero en realidad vamos a crear otra mesa de arte presionando un, simplemente dibujando una mesa de trabajo por aquí. Acabo de seguir adelante y crear otra mesa de trabajo y voy a dar clic en Escape para salir de esa herramienta de mesa de arte. Por alguna razón creó aquí este tablero de arte. Yo voy a borrar esa. Entonces sí, en lugar de mi mesa de trabajo, solo voy a seguir adelante y crear algunos rectángulos. Ahora. Voy a hacer C rectángulo así. Y luego voy a presionar la tecla T de mi teclado y escribir un título. Y tal vez, y seguir adelante y duplicar este usando Command D. Y voy a presionar V y volver a mi herramienta de selección y tal vez para cambiar esto a descripción. Y tal vez quiero incluir estos en mi tipo de cuadrado por aquí y voy a crear otro rectángulo por aquí. Y así podemos usar este tipo de maquetación para tal vez poner imágenes dentro de aquí y utilizarlas como tipo de tarjetas. Y nuestro diseño fue esencialmente es una organización de ciertas cosas como la descripción, un título, y un montón de imágenes, digamos. Entonces ahora estas cosas son un poco relevantes o relacionadas juntas. Entonces lo que podemos hacer es que podemos seguir adelante y en realidad seleccionarlos a todos. Y podemos asegurarnos de que en nuestro panel de capas izquierdo por aquí tenemos todo seleccionado. Nuevamente, también puedes seleccionar cosas desde aquí. Podemos hacer clic en el objeto más superior por aquí y luego también bajar al objeto inferior. Y mientras mantengo el turno, si hago clic, saldrá adelante y seleccionará todo entre mi primera y última capa aquí, ¿verdad? Más capa superior e inferior. Y luego si sigo adelante y hago clic en Comando G o Control G en Windows, seguirá adelante y en realidad colocará esos objetos dentro de un grupo. Ahora por supuesto, también puedes hacer esto yendo a Objeto y haciendo clic en Grupo. Entonces ahora estos objetos en realidad pertenecen a este grupo, uno por aquí, lo puedo ver en mi lista. Y ahora si realmente muevo esto aquí mismo, todo esto se mueve juntos porque es parte de un grupo. Ahora, sólo porque las cosas sean parte de un grupo no significa que no pueda editarlas individualmente. Entonces si todavía quiero hacer cambios a mi título aquí, Vamos a ver, todavía puedo hacer doble clic en el grupo y luego seguir adelante y seleccionar el título por aquí. Otro truco aseado es que si estamos dentro de nuestro grupo aquí, si quiero seleccionar rápidamente algo dentro, en lugar de hacer doble clic para entrar al grupo, solo puedo seguir adelante y sostener Comando y luego haga clic en lo que quiera. Eso hace lo mismo. Y podemos seguir adelante y por ejemplo, optimistas este título a alguna otra cosa que hacemos, encabezado, no sabemos. Entonces así es como realmente se crean grupos en XD. Ahora por supuesto, mi grupo aquí tiene un grupo un nombre ahora mismo. Pero si sigo adelante y hago clic en este grupo 1 o doble clic en él, realidad puedo ir de cabeza y darle un nombre. Por lo que puedo nombrarlo al carrito. Entonces ahora sabemos qué tiene exactamente este grupo. Y en cualquier momento, si quieres ver los contenidos en lugar de un grupo, solo puedes hacer clic en este pequeño icono de carpeta o volver a hacer clic en él para ocultar aquellas capas que están contenidas dentro de ese grupo. Cosas químicas. Estamos usando esta opción de altura por aquí. Puedo seguir adelante y en realidad simplemente ocultar eso por completo de mi mesa de trabajo. Entonces esto es útil si estás trabajando con algo donde dos capas, vamos a ver, estás encima de la otra o a diferentes grupos están uno encima del otro y solo quieres enfocarte en el uno. Y luego puedes seguir adelante y volver a hacer clic en esto para mostrarlos. Puedes bloquear esta capa en su lugar. Entonces ahora si realmente vuelvo a mi diseño, realmente no puedo hacer un cambio en él. Y si voy aquí ves que hay un pequeño icono de candado y puedo hacer clic en él y luego desbloquearlo de nuevo, o puedo hacer eso mismo desde aquí. Y también puedes marcar cosas para la exportación. Entonces digamos que quiero exportar todo este grupo. Puedo seguir adelante y exportarlo desde aquí, o comercializar para las exportaciones para que una vez que estemos listos para exportar, se incluya como parte de nuestra exportación por lotes. Y también puedes ver este pequeño icono de marca de verificación se mostrará por aquí cuando sí lo tengamos como marcado para exportación. Pero claro que vamos a explorar exportar en futuras conferencias. Entonces así es esencialmente como agrupa las cosas en sus diseños. Y en cualquier momento, si realmente vas adelante y golpeas Shift Command G, Van a seguir adelante y desagrupar aquí a todo el grupo. Y ahora veo que estoy de vuelta a mi diseño anterior donde solo tengo mis capas sin que estén en grupo. Entonces ahora si muevo las cosas, no tendrán ninguna relación entre sí y no se moverán juntos. De nuevo para agrupar cosas, seleccionar todo junto y pulsar Comando G o Control G en Windows. Y eso agrupará las cosas. Justo como ejemplo, si recuerdas, jugamos con esta grilla de repetición. Ahora se puede ver un poco lo útil que será si realmente estamos repitiendo un grupo. Entonces, por ejemplo, digamos que tenemos una app y queremos que aparezcan múltiples tarjetas con diferentes imágenes y diferentes textos. En realidad podemos hacer esto e incluso podemos ir y replicarlos a lo largo también horizontalmente. Entonces eso es algo ordenado que podemos hacer con una grilla de repetición. Y definitivamente lo vamos a usar en nuestros diseños. Golpeando al Comando Z dos veces. Yo sólo voy a deshacer eso y hacer desagrupar cuadrícula por aquí. Tan solo vuelve a tenerlo como grupo. Y sí, así es como agrupas las cosas y organizas tus objetos dentro de XD. 16. Cuadrículas: Entonces, ¿qué necesitamos rejillas en nuestros diseños? Bueno, usando rejillas, en realidad podemos ir adelante y alinear objetos y colocarlos en consecuencia una manera más organizada a lo largo o mesas de trabajo. Al hacer clic en cualquier mesa de trabajo, puedes seguir adelante y en realidad acceder a esas opciones de cuadrícula en el panel de propiedades del lado derecho por aquí. Y tenemos dos tipos de rejillas. Tenemos una cuadrícula de diseño y una cuadrícula cuadrada. Y vamos a pasar rápidamente por los de esta conferencia. Para usar una cuadrícula, puedes seguir adelante y hacer clic en esta casita de verificación de aquí. Y luego seguiremos adelante y crearemos una cuadrícula para nosotros. Y ahora se trata de una cuadrícula de columnas que tiene 12 columnas de ancho o tablero de arte con un ancho de canalón de 16 píxeles entre cada columna, el ancho de columna de 221 píxeles. Y este justo aquí es nuestro margen en los lados de aquí. Entonces la izquierda que la derecha. Si dijo esto a 0, seguirá adelante y eliminará ese margen y creará una columna uniformemente espaciada. Podemos aumentar o una canaleta a, digamos 50 píxeles. Y así ahora hay más espacio entre nuestras rejillas o nuestras columnas de rejillas. Podemos aumentar o disminuir nuestro número de columnas, y así sucesivamente y demás. Ahora un defecto en el tipo web de diseño, 12 columna es bastante típico. Entonces vamos a volver a 12, 16, y 243 y sumar a un margen de 100 en los lados. Entonces si estuviste en esta reaudiencia opcional, realidad puedes seguir adelante y establecer juntos los márgenes izquierdo y derecho, pero también puedes seguir adelante y cambiarlo a esta opción si quieres. Márgenes personalizados de cada lado, la parte superior, la derecha, la parte inferior, y el lado izquierdo. Pero típicamente simplemente hacemos el lado izquierdo y derecho así porque queremos espaciar desde las esquinas izquierda y derecha. Y entonces podemos seguir adelante y realmente alinear nuestros objetos a nuestras rejillas para que creemos una especie de diseño organizado. Y sabemos exactamente cuánto espaciado estamos usando entre cada objeto. Ahora una cosa ordenada es que mientras estás trabajando con objetos aquí, y te seguirá adelante y te mostrará esa pequeña caja rosa entre tus objetos para mostrarte que tienes un espaciado parejo entre todos estos tres objetos aquí. O debería decir grupos, lo cual es bastante guay. Entonces nuevamente, rejillas que nos ayudarán a alinear nuestros objetos a lo largo de nuestro diseño de manera uniforme. Y a medida que trabajamos en nuestro proyecto, nos verás usar rejillas de vez en cuando para asegurarnos de que todo esté alineado y distribuido correctamente a lo largo de nuestros diseños. Ahora, si el color azul aquí es un poco distrayente, podemos seguir adelante y dar click en este pequeño relleno y disminuir la transparencia de las columnas para que estén más escondidas y no interfieran con nuestros diseños. Y en cualquier momento podemos seguir adelante y simplemente apagarlo. Y ahora vemos que nuestros objetos están mucho más bien y ordenadamente organizados a lo largo de nuestras mesas de trabajo. El otro tipo de rejilla es una cuadrícula cuadrada. Y esencialmente esto es un poco como una cuadrícula y uniformemente cuadrada toda cruza ese diseño. Podemos seguir adelante y cambiar el tamaño cuadrado aquí. Puedes lograrlo, digamos 50. Y así ahora tienes un tipo diferente de rejilla donde tiene tanto las líneas horizontales como verticales a través de manera uniforme. Por lo que definitivamente puedes usar una raíz cuadrada si quieres una alineación más específica. Especialmente si tal vez estás armando un icono o algo que requiera más detalle en cuanto al espaciado. Pero de lo contrario normalmente usamos una cuadrícula de diseño. Cuando se trata de aplicaciones web y móviles, siempre se puede encender y apagar de nuevo, como mencioné desde aquí. Si en algún momento desea utilizar esta cuadrícula como cuadrícula predeterminada, puede seguir adelante y hacer de ésta la cuadrícula predeterminada. Y así de esta manera si hago algunos cambios, digamos 20 grilla. Y quiero usar cuadrícula personalizada por aquí. Y quiero, digamos ahora que quiero volver a esa cuadrícula por defecto. Siempre puedo hacer clic en el valor predeterminado de Estados Unidos. Y seguiré adelante y volveré a cambiar a la configuración de mi cuadrícula predeterminada que he establecido, lo cual es bastante útil. Entonces así es como usas las rejillas en Adobe XD. Y en la siguiente conferencia exploraremos cómo alinear y distribuir nuestros objetos a través de sus tableros de arte. 17. Alineación y distribución: Entonces ahora que sabemos cómo podemos usar realmente nuestras rejillas para alinear las cosas un poco mejor dentro de nuestro tablero de arte. También te voy a mostrar las características de alineación y distribución en XD, porque más comúnmente vamos a estar usando esas características con el fin de alinear nuestros objetos dentro de nuestros diseños. Para demostrarme, solo voy a seguir adelante y hacer clic en la tecla a de mi teclado y simplemente dibujar otra mesa de trabajo aquí. Tan solo con el propósito de mostrarte cómo funciona la distribución y alineación. No tienes que seguir este paso si no quieres, pero sí lo animo para que entres cómo funcionan nuestras herramientas de alineación. Ahora usando la tecla R, voy a usar mi herramienta de rectángulo para crear algunos rectángulos, variar aleatoriamente en mi diseño y crear cinco rectángulos. Y yo sólo voy a seguir adelante y escapar de ese rectángulo dos. Y al sostener Shift, voy a seguir adelante y hacer clic en todos mis rectángulos. Y sólo para que lo veas mejor, les voy a dar de acuerdo llenar justo aquí. Enfriar. Entonces ahora tenemos un montón de rectángulos que están todos muy desigualmente espaciados a lo largo de mi tablero de arte. Entonces déjame acercar aquí para que puedas verlo mejor. Entonces lo primero es lo primero, si tienes algún objeto seleccionado, si tienes algún objeto seleccionado,no importa si es un rectángulo o un cuadro de texto o algo así. Pero usando la tecla Alt en tu teclado, realidad puedes ver el espaciado de ese objeto dentro de tu mesa de trabajo. Entonces, por ejemplo, este rectángulo aquí es 270 píxeles desde arriba, 1185 píxeles desde abajo aquí, 5, 11 píxeles desde la derecha, y 2551 píxeles desde la izquierda. Y se puede repetir este proceso. Por lo que no sólo se puede ver el espaciado entre este objeto y su tablero de arte, también se puede ver el espaciado entre este objeto y otro objeto simplemente sosteniendo viejo y flotando sobre un objeto diferente . Por lo que de esta manera se puede ver cuál es el espaciado entre cada objeto diferente. Y a medida que pasas por eso, notarás que mis objetos no están uniformemente espaciados en absoluto. Están muy espaciados al azar. Por lo que aquí es donde las características de una mujer son muy útiles en XD. Por lo que al hacer clic y arrastrar y seleccionar todas mis formas aquí, sí tienes que tener todas tus formas seleccionadas o las que quieras alinear en función de tu tablero de arte. Y luego usando estas herramientas por aquí, en realidad podemos seguir adelante y probar diferentes características de alineación. Por lo que el primero está alineado para escribir hago clic en esto. Xd irá adelante y alineará todos esos rectángulos a la capa más superior entre esos objetos. Entonces si solo deshago eso, porque la capa más superior es este rectángulo por aquí. Dentro de todos mis rectángulos seleccionados se encuentran los objetos seleccionados. Xy seguirá adelante y empujará todos esos rectángulos para que coincida con éste por aquí, ya que éste está en la parte más alta. De igual manera, si hago este aquí mismo, seguirá adelante y hará lo mismo, pero en medio de toda mi caja de padres por aquí. Entonces vamos a seguir adelante y alinearlos verticalmente hacia el medio. Si deshago eso y lo hago en la línea de fondo, vamos a seguir adelante y hacer de manera muy similar lo que se hace con la pestaña alineada, pero al fondo, al objeto de ahí, que era éste de aquí. Usando esta opción, puedo seguir adelante y distribuir todos mis objetos horizontalmente. Entonces eso significa que XD seguirá adelante y creará un espaciado uniforme entre todos mis objetos. Entonces ahora si en realidad hago clic en uno y compruebo el espaciado sosteniendo Alt, puedo ver que tiene un espaciado de 450 píxeles aproximadamente entre cada objeto. Y ahora si los selecciono todos de nuevo simplemente arrastrando por todos los objetos aquí, también puedo hacer una cosa muy similar llamada distribuida verticalmente. Entonces eso va a seguir adelante y en realidad distribuir todos mis objetos son verticalmente para que tengan un tipo similar de espaciado vertical entre sí. Y estas son las alineaciones horizontales. Tan alineados a la izquierda, seguiremos adelante y alinearemos todos mis objetos al lado más izquierdo de esa selección de padres por ahí. Por lo que todo este tipo de visión de los padres que tenemos sobre los objetos, el punto más izquierdo estaría aquí. Entonces vamos a seguir adelante y empujar todo hasta ese punto por ahí. Si lo hago en medio, va a seguir adelante y empujar todo a la mitad de esa caja. Y luego, como cabría esperar con la línea correcta, todo estará alineado el objeto más correcto dentro de mi selección. Entonces de nuevo, una cosa a tener en cuenta es que todo se está alineando en relación con lo que has seleccionado. Entonces si sí tengo sólo estos, digamos tres objetos seleccionados, y entonces estas características van a funcionar manera diferente dependiendo de lo que haya seleccionado. Ahora, ¿y si en realidad quieres simplemente alinear todos estos? Toda la selección aquí horizontalmente dentro de mi mesa de trabajo lo hará, si los selecciono todos juntos y arrastre, por defecto, XD se encajará en su lugar cuando esté en el medio horizontalmente, y luego de igual manera cuando estamos en el medio verticalmente también. Entonces ahora todo este contenedor padre está alineado a la mitad de mi mesa de trabajo, tanto vertical como horizontalmente. Y así esa es tu alineación y distribución en XD. Y la próxima conferencia cuando regrese y explore algunos de nuestros kits de interfaz de usuario de wireframe que harán que el diseño sea mucho más fácil en XD. 18. Kits de Wireframe UI: Entonces espero que te familiarices. Entonces espero que te estés familiarizando con XD. Ahora, estamos casi listos para empezar realmente nuestro proyecto. Y esta va a ser obviamente la parte más divertida de todo el curso. Entonces no puedo esperar para empezar contigo en esa. Pero antes de saltar y hacer eso, en la siguiente sección, mientras habíamos comenzado nuestros diseños brutalmente usando niños wireframe que proporciona Adobe XD, que son súper útiles. Y verás por qué en tan solo un segundo. Qué debes ir a archivar en tu opción de menú y seguir adelante y dar click en Obtener Kits de UI. Una vez que hagas eso, XD en realidad seguirá adelante y abrirá tu navegador. Y debería aterrizar en una página como ésta. Si no estás en esta página, solo puedes seguir adelante y hacer una pausa aquí y asegurarte de seguir este enlace aquí mismo. Pero debes ser llevado a esta página por defecto. Y entonces, ¿qué son los kits de UI? Bueno, los kits de interfaz de usuario son esencialmente niños de interfaz de usuario que ya han sido armados por otros diseñadores para XD, que en realidad puedas usarlos en tus diseños para acelerar tu proceso de diseño. Y entonces lo que eso significa es que empresas como Apple, Google, Amazon, etcétera han creado estos marcos, marco de diseño para que realmente puedas seguir adelante y conseguir a estos chicos. Y así en lugar de tener que reinventar o redibujar una barra de navegación como esta de aquí, realidad puedes seguir adelante y solo usar ésta en tus diseños, que es esencialmente lo que hacen la mayoría de los diseñadores con el fin de imitar cómo se verá la app en una aplicación real de iPhone o iOS. Esto es realmente importante porque he visto que los diseñadores están redibujando o recrean estos desde cero. Pero realmente no tiene sentido porque estos están disponibles para usted de forma gratuita para su uso desde su sitio web de XD UI Kit. Entonces, ya sea que estés diseñando un proyecto Bootstrap para web o estás armando una app para Android. Siempre puedes seguir adelante y usar al niño para poder acelerar tu proceso de diseño. Y por supuesto, estaremos usando esto en la siguiente sección mientras trabajamos en nuestra aplicación móvil. Tan solo dándote una idea de cómo funciona esto, voy a seguir adelante y conseguir el kit en el diseño de Apple. Dependiendo de cuándo estés viendo esto, estos niños pueden ser diferentes o pueden verse diferentes. Entonces, no te asustes si no ves exactamente el tipo de kit que vemos aquí, o estas imágenes podrían ser diferentes. Y dependiendo de lo que iOS esté fuera en ese momento. Entonces sigamos adelante y pinchemos en conseguir el kit, que nos llevará a la página web de Apple. Y desde aquí tenemos acceso a los kits de iOS y iPad OS, que podemos descargar usando este pequeño ícono de aquí para dialogar. Ahora este es un archivo un poco grande, por lo que podría tardar algún tiempo en descargarse, así que ten paciencia con él. Me tomaré su tiempo. Y eventualmente se abrirá. Basta con hacer una pausa aquí si es necesario. Si estás en un Mac, entonces pasa por tu proceso de configuración habitual. Y entonces deberías poder ver este pequeño archivo o carpeta, debo decir. Y una vez que sigas adelante y lo abras, obtendrás estas plantillas de diseño para iPad. Este es para iPhone, creo. Y por último pero no menos importante, esto es para tus textiles. Esta es la que nos interesa si estamos diseñando para una app para iPhone. Así que sigamos adelante y pinchemos en las plantillas de diseño más componentes más guías y dash iPhone dot TXT. Al hacer doble clic en él, XD seguirá adelante y lo abrirá. Ahora si sí se te pide la tecla X para abrir archivos desde descargas, adelante y haz clic en Ok. Podría tardar algún tiempo en abrir este archivo, así que ten paciencia con él. Pero una vez que sí carga, debería verse algo así. Entonces con mi plantilla de diseño abierta, simplemente puedo seguir adelante y vamos a ver, estoy trabajando en agregar tal vez una vista de actividad controlando esta por aquí. Simplemente puedo seguir adelante y copiar éste haciendo clic en él y haciendo clic en Control o Comando C, o Control C en Windows. Volviendo a mi proyecto y luego solo pega el extremo donde quiera. Entonces por supuesto, ahora mismo no estamos trabajando en un iPhone. Apps no es tan relevante. Pero una cosa que sí quiero señalar es que cuando haces importar o pegar algo de otro archivo, puedes obtener esta fuente que falta. Entonces esto es simplemente porque Apple está usando ciertas fuentes dentro del diseño aquí que no tenemos en nuestra máquina. Entonces ahí es donde estamos sacando esa pequeña fuente que falta. Pero puedes seguir totalmente adelante y encontrar estos archivos e instalarlos y luego este error debería desaparecer. Entonces, no te asustes si obtienes algo como esto. Esto suele ser por lo que sucede. Entonces así es como esencialmente usas kits de interfaz de usuario para acelerar tu proceso de diseño. Y esto podría no tener mucho sentido ahora mismo, pero una vez que sí empecemos a trabajar en nuestro proyecto, verás lo útil que será. 19. Atajos de zoom: Sigo diciendo que vamos a llegar al proyecto principal en el que vamos a trabajar y seguimos volviendo a la introducción, pero ya casi terminamos. Esta es en realidad la última conferencia de esta parte de la sección. Mi objetivo aquí es asegurarte de que tengas suficiente familiaridad con el software antes de que realmente saltemos a un gran proyecto. Pero claro que vamos a tomarlo paso a paso y seguir aprendiendo. Toda la idea es no memorizar todo lo que hablamos a lo largo de estas conferencias, sino hacerlo lo suficiente con la práctica que se vuelva natural para ti. Esa es realmente la mejor manera en que me di cuenta de que estos softwares de diseño o cualquier software en general funciona a la hora de aprenderlo. Está bien, así que basta hablar de eso, Hablemos de zoom. Entonces como mencioné, vamos a explorar el zoom en XD. La forma más sencilla de acceder a la opción Zoom es bajo vista y su menú. Entonces tenemos un montón de opciones aquí desde ir de un 100 por ciento, lo que nos mostrará el verdadero tamaño de este proyecto. Entonces, ya sabes, si este proyecto fuera un 100%, esto es lo que realmente verá el usuario. Entonces esto es un poco como el tamaño real si quieres pensarlo de esa manera, entonces cuando sí tienes que 100 por ciento, que por supuesto es incluso un zoom mayor. Y ahora estos son solo presets, pero estos son los más interesantes, que es el comando 0 irá adelante y se ajustará a todo lo que tengas, todas tus mesas de trabajo a toda la vista. Y eso es para acceder a esos un 100 por ciento a un 100 por ciento y encajar en todas las opciones. También puedes hacer Comando 1 para un 100 por ciento comprometido con cuatro a un Comando 100% 0 para responder entre 0 para encajar todo. En cualquier momento, también puedes hacer Command plus y menos si quieres acercar y alejar un poco. Si quieres acercar a una sección específica, digamos que quiero acercarme a esta cosa de mancuernas aquí. Puedo presionar la Z en mi teclado y luego simplemente dibujar un pequeño rectángulo a su alrededor y va a seguir adelante y acercar a esa zona. Voy al Comando 0 para deshacer eso. Otro truco ordenado es que si estamos trabajando, digamos el cierto tablero de arte, lo que sea que haya seleccionado, puedo seguir adelante y hacer clic en ver, acercar a la selección. O puede hacer Comando 3. Y seguiremos adelante y acercaremos exactamente a lo que estamos viendo. Entonces si tengo, digamos que este grupo selecciónelo y golpee Comando 3. Y vamos a seguir adelante y acercar exactamente a ese grupo. Lo cual es genial si estás trabajando con, digamos, solo un cierto diseño. Quieres, ya sabes, enfocarte en el diseño y tal vez en una determinada capa encima o ser más preciso y usar eso. Y luego seguir adelante y volver a tal vez a un nivel de zoom del 100% o 200%. O simplemente usa tu pellizco en tu trackpad o tu desplazamiento en tu ratón para acercar y alejar manualmente. Al igual que así. Y por supuesto a medida que acerco y ahora también puedes ver el cambio de nivel de zoom aquí. Si sí quieres Personalizar Zoom contigo, Zoom valen 25 por ciento. También puedes lograr eso simplemente escribiéndolo aquí arriba. Pero eso rara vez se usa para sí, Esencialmente esas son tus opciones de Zoom. Y las dos más importantes que quiero que recuerden, una simplemente presionando el zed y dibujando alrededor del área que quieres Zoom. Y también haciendo una selección haciendo clic en algo que quieras ampliar y luego presionando Comando 3. Creo que esas son las opciones de Zoom más utilizadas y son bastante prácticas. Y así con eso dicho, saltemos a la nueva sección y empecemos a trabajar en nuestro nuevo proyecto de diseño móvil. 20. Bordas saludables: introducción de el proyecto: Muy bien, Bienvenidos a la nueva sección. Estamos listos para empezar finalmente con nuestro diseño de aplicaciones móviles. Súper emocionado por esta sección, y creo que te va a encantar. Entonces antes de que realmente saltemos al proyecto en sí, sí los animo a seguir adelante y descargar los recursos de esta conferencia. Debería poder encontrar un archivo. Deberías poder encontrar una carpeta como esta aquí mismo, mordeduras saludables, activos de aplicaciones móviles. Por lo que eso incluirá todos los archivos y documentos e iconos y cosas que necesitas para diseñar realmente esta app móvil con nosotros. Entonces tómate un segundo allí para descargar eso, adelante y descomprimirlo y ábrelo. Por lo que dentro de esa carpeta deberías poder encontrar un pequeño archivo como este llamado broches saludables diseño son PDF. Adelante y abre eso desde la carpeta. Entonces esencialmente este es nuestro informe de diseño que nos proporcionó el cliente. Por lo que al cliente en este caso se le llama mordeduras saludables. Y el proyecto en el que estamos trabajando se llama la aplicación móvil de pedidos de alimentos de mordeduras saludables. Entonces si no sabes qué informar no es ningún problema en absoluto. Esencialmente, un breve es lo que nos proporciona la información inicial para el proyecto proporcionado por nuestro cliente. Entonces dentro de ese breve, generalmente tenemos algo sobre el cliente y eso explica lo que hacen. A lo mejor algunas palabras clave alrededor su empresa y sus proyectos, metas y objetivos del proyecto, lo que buscan fuera de este proyecto. Y luego con más detalle, a veces verás a un público de mercado objetivo Slash. Por lo que es a quien están tratando de atender este producto 2. Por lo que esto nos permitirá realmente asegurarnos de que cuando estamos diseñando, estamos diseñando para ese público objetivo específico. A la par de otras cosas como entregables del proyecto. Entonces esto es lo que están buscando para que les entreguemos al final de este proyecto con ellos. Y luego otras cosas como horario, presupuesto, qué dirección lo quieren tomar en cuanto a la dirección creativa, tal vez quién es la persona de contacto principal en esta empresa, y luego algunas otras notas son proporcionados por el cliente. Entonces, ¿este breve suele ser lo que se proporciona inicialmente cuando comienzas a trabajar con clientes o incluso tal vez una empresa en la que estás trabajando? Mi proporciona algo como esto que incluye lo que lo están buscando. Ahora a veces podría incluir más detalles bajo los entregables. Por lo que ahora mismo, vamos a pasar por el breve aquí. Y luego en la próxima conferencia vamos a llegar a las páginas que necesitaremos en nuestra aplicación móvil. Para que podamos diseñar esto para nuestro cliente. Pero a veces incluso esas páginas o características se incluirán en este breve para que te hagan saber exactamente lo que están buscando. O a veces pueden ser más amplios como éste. Y realmente es tu trabajo llegar a esas características y páginas y lo que necesitarán en su aplicación móvil. Pero por ahora, sigamos adelante y pasemos por este breve. Por lo que para las picaduras saludables, las mordeduras saludables proporcionan a los clientes una aplicación móvil de pedidos fácil de usar para alimentos saludables y su ciudad. Por lo que es esencialmente una aplicación móvil de pedidos de alimentos, pero sólo para alimentos saludables. Bastante cool. Aquí te dejamos algunas otras palabras clave de marca. Alimentos saludables, alimentos limpios, bajos en carbohidratos, dieta, etcétera, etcétera. Eso se puede leer con más detalle. Por lo que nuestro objetivo es diseñar una aplicación de pedidos de alimentos sencilla de usar que ayude a los clientes a navegar restaurantes saludables cercanos y a realizar un pedido desde su menú que se muestra en la aplicación. Los clientes deben poder establecer una opción de entrega y ver el progreso de sus pedidos a medida que se están preparando y entregando. Enfriar. Por lo que el cliente objetivo, o jóvenes profesionales de entre 22 y 40 años que buscan opciones de comidas saludables solamente y el cuidado por su condición física y salud obviamente. Y rara vez cocinan comida en casa y prefieren comer fuera la mayor parte del tiempo. Entonces por supuesto, la que esa opción sana. Y así es lo que mordeduras saludables su empresa aquí proporciona. Y ¿los entregables del proyecto estaban diseñando un diseño de aplicación móvil para iOS, así como el prototipo, y luego también un logotipo para su empresa también que armará a lo largo del proyecto. Y había un horario. Tenemos unos maquetas iniciales vencidos en dos semanas, un prototipo en tres semanas, y maquetas finales y entregables. Entonces aquí mismo, debido en cuatro semanas. Ahora por supuesto, estos son sólo un poco conformados por el bien de este proyecto en este curso. Por lo general, estos pueden ser más largos dependiendo de lo grande que sea el proyecto. Y por supuesto dijeron presupuesto de TI aquí de 6 mil dólares estadounidenses. Ahora podrías estar cobrando más o más bajo dependiendo de dónde te encuentres en tu carrera de diseño. Por lo que si estás empezando, podría estar cobrando una cantidad menor por tu proyecto, lo cual está totalmente bien. Y luego todo el camino hasta proyectos más grandes que podrían estar en los rangos de 45 cifras van. Entonces en cuanto a la dirección creativa, queremos desarrollar el branding de una empresa incluyendo logo, color, estilos de fuente. Y luego queremos mantener limpio y moderno el logo y la app. Y sugiere que usamos un color verde, por supuesto, para mostrar la salubridad del producto por falta de una palabra mejor, y así sucesivamente. Y así estos son persona de contacto primaria se acaba de conformar de nuevo para el proyecto. No necesitas preocuparte realmente por esto, pero generalmente tendrás persona de contacto primaria o cualquier otro stakeholders y personas que se supone que aprueben a las personas que serán aprobando el proyecto una vez concluido. Por lo que más nodos, se proporcionarán algunos activos de iconos para la maqueta. Por lo que esto está incluido en esa carpeta que debiste haber descargado de esta conferencia. Entonces volvamos en una siguiente conferencia y armemos con más detalle qué páginas necesitamos diseñar antes de empezar a wireframing y crear nuestros tableros de arte. 21. Obtener la inspiración: Muy bien, entonces, ¿qué necesitamos para esta aplicación móvil? Entonces porque el cliente aquí nos acaba de proporcionar el entregable como el diseño de la aplicación móvil. No nos han dado específicamente qué páginas necesitas requerir o necesitamos tener dentro de ese diseño o dentro de la app. Nos vamos a estar viniendo con esos por nuestra cuenta. Así que he ido adelante y abrí aquí un documento de Word, simplemente puedes seguir adelante y abrir páginas en el Mac o un documento de Word en Windows. Cualquiera que sea la edición de palabras que uses. Yo sólo voy a estar tomando algunas notas aquí para que sepamos qué páginas vamos a incluir en nuestros diseños. Se va a seguir adelante y escribir saludables por requisitos de pedidos de alimentos móviles. Esto también se proporcionará en la carpeta que descargó. Entonces en caso de que no quieras seguir y hacer las mismas notas aquí. Puedes seguir adelante y acceder a ella en tus recursos que también lo descargues. Entonces, ¿cómo sabemos qué páginas necesitamos diseñar para una aplicación móvil, para Web App , para cualquier proyecto estemos trabajando para ese asunto. Bueno, lo que me gusta hacer personalmente es en realidad ir adelante e instalar otras aplicaciones similares que están haciendo funcionalidad similar. Por lo que tenemos toneladas de aplicaciones de pedidos de alimentos por ahí. Ya sea Uber Eats, salta los platos. Hay tantos por ahí que en realidad podemos seguir adelante e instalar, jugar con, tal vez incluso probar y realmente pedir algo con para que podamos ver todos los diseños que se requieren y todos los páginas que entran en una aplicación de este tipo. Entonces ese es el primer paso para hacer esto. Ahora que si ya lo has hecho y buscas más inspiración, bueno, no te preocupes, hay más recursos por ahí. Voy a compartir contigo un par de recursos que puedes usar para idear inspiración cuando estés mirando lo que necesitas en el diseño de tu app móvil. O lo es. Por lo que he abierto tres recursos que puedes usar de forma gratuita para averiguar lo que necesitas o llegar a inspiración cuando estás trabajando en una aplicación móvil o web. Y he incluido los enlaces a los tres y un poco de documentos de texto también pueden descargar de esta conferencia. Por lo que primero es este sitio web llamado moveon dot design. En realidad puedes seguir adelante y navegar aplicaciones de iOS y Android aquí. Por lo que han ido adelante y descargado algunas capturas de pantalla de cada aplicación. Entonces tenemos entrega que es un poco similar a lo que estamos diseñando. Y un montón de otras aplicaciones como LinkedIn y así sucesivamente y así sucesivamente. Puedes seguir adelante y navegar. Esos son filtrados por la categoría app. Entonces si buscamos solo apps de comida y bebida, nos pedirá que primero iniciemos sesión. Entonces voy a seguir adelante y sólo tienes que dar clic en iniciar sesión aquí. Acabo de adelantarme y entrar aquí. Podría pedirte un poco de año de encuesta o así. Voy a ir solo adelante y saltarme eso. Pero esencialmente, una vez que lo haces log n, En realidad puedes seguir adelante y filtrar por el tipo de apps que estás buscando. Por lo que podemos hacer filtrar por categoría, comida y bebida. Y así ahora vemos un montón de apps que hacen comida y bebida. Entonces solo tienes que hacer clic en este primero aquí, Deliveroo. Y así como puedes ver, han incluido todas las capturas de pantalla de diferentes partes de la app. Entonces cualquier cosa, desde su pantalla de presentación hasta compartir ubicación, navegación, restaurantes, páginas de verificación telefónica, así sucesivamente y así sucesivamente, todo el camino hasta los detalles de entrega y tal. Ahora para nuestro proyecto, no vamos a ir tan detallado como una app como esta, porque obviamente una app como esta tardará mucho más en diseñar. Entonces nos vamos a centrar en mantenerlo sencillo. ¿ Podemos obtener básica a la funcionalidad básica de la app, que es solo pedir alimentos, alimentos saludables a través de la app. Ahora por supuesto, siempre puedes llevarla más allá diseñando más páginas y mandar esos diseños para que me hagan comentarios, cual puedes hacer enviando tu proyecto o compartiéndolo con hello clever en gmail.com. Y voy a hacer todo lo posible para responder a cada proyecto y dejar comentarios para ti sobre tus proyectos. Pero sí, vamos a seguir adelante y usar recursos como este para idear inspiración en qué páginas necesitamos y qué necesitamos incluir en esas páginas. A otros recursos a los que tenga acceso o Adobe Stock. Y por supuesto, esto es más para descargar imágenes de stock. Pero si haces búsquedas en algo como la aplicación de pedidos de alimentos, todavía obtendrás un montón de páginas que puedes usar como inspiración en lo que puedes incluir en tus aplicaciones móviles, como esta de aquí. Así que siéntete libre de experimentar con eso y navegar por esos recursos. Por último, dribble es otro genial el cual puedes hacer otra app de búsqueda de pedidos de alimentos que he hecho por aquí. Y tienen toneladas de personas cargando muestras de comida ordenando tipos de apps. Donde una vez que lo haces log n, En realidad lo puedes ver a pantalla completa. O simplemente puedes sacar la idea de las miniaturas de aquí. Bastante cool. Entonces si te estás preguntando cómo voy a estar subiendo con las páginas que vamos a diseñar. Simplemente voy a estar usando esto. Y así volvamos en la próxima conferencia y armemos las páginas que vamos a estar diseñando para nuestra app. 22. Requisitos requisitos de la aplicación: Muy bien, Hagamos tu lista de las páginas que necesitamos diseñar para esta aplicación de pedidos de alimentos aquí. Por lo que a medida que pasamos en la última conferencia, puedes usar sitios web como el diseño móvil para idear inspiración y ver qué páginas podrías necesitar. Entonces basado en este tipo de maquetas y otras maquetas que he diseñado antes para aplicaciones de pedidos de comida o ya conozco un montón de páginas. Por lo que voy a seguir adelante y armar esos en este documento. Por lo que así como recordatorio, este documento está disponible para su descarga. Los recursos al inicio de este apartado. Por lo que la primera página que vamos a necesitar página de pantalla de presentación. Entonces esta es la página que ves aquí mismo que usualmente le muestra un logo y un poco de carga cual actúa como especie de pantalla de carga. Y luego necesitaremos una página de inicio de sesión, que es donde los usuarios seguirán adelante e iniciarán sesión con diferentes cuentas o usando correo electrónico y contraseña. Y entonces probablemente vamos a hacer algún tipo de verificación para poder diseñar una verificación de número telefónico. Ahí vamos. Después tendremos una página principal que muestra los restaurantes. Por lo que podemos o llamar a esta página principal o al restaurante o a la página de navegación, realmente cualquiera que funcione. Simplemente lo llamaré la página principal porque lo es, somos típicamente los usuarios irán cuando sí inicien la aplicación después de que hayan iniciado sesión. Y entonces probablemente querremos algún tipo de página de mapa o ubicación donde los usuarios puedan ingresar su dirección para su entrega. Definitivamente querrá perfil página desde donde los usuarios podrán acceder a su información, su tarjeta de crédito, etcétera. Y hablando de tarjeta de crédito, definitivamente necesitamos una página de pago. Por lo que aquí es donde los usuarios podrán agregar su método de pago para la app. Veamos qué más. Ahora bien, si recuerdas, en nuestro breve, el cliente sí quiere que mostremos el avance del pedido ya que se está preparando y entregando. Entonces en base a eso, después de nuestro tipo de página principal, definitivamente vamos a querer página de menú desde donde los usuarios podrán acceder y menú de ese restaurante del selecto, así como un pedido página, que es donde van a seguir adelante y complacer sus pedidos por la comida que quieren. Y entonces supongo una página de Progreso donde habrá poder rastrear su progreso de su orden, ver cuándo se va a entregar, y así sucesivamente y así sucesivamente. Ahora esta app Deliveroo aquí que he abierto en moveon dot design de la conferencia anterior. Manojo de otras páginas como filtros y ofertas y tantas otras opciones como seleccionar tus opciones dietéticas y esas. No necesitamos todas estas características en este momento porque queremos diseñar una sencilla aplicación de pedidos. Pero como se mencionó, definitivamente puedes diseñar estos y aprovechar la oportunidad aquí para mejorar en el diseño de estas páginas. Entonces tenemos todo lo que queremos para nuestro cliente. A modo de ejercicio, en realidad voy a agregar una página de pedidos pasados también donde realmente se puede acceder a los pedidos que el cliente se coloca en el pasado, por lo que los clientes podrán ver su anterior órdenes. Voy a dejar esta página y página de ejercicios para que lo hagas a medida que pasemos por el diseño de esta app. Por lo que ahí lo tenemos. Esos son nuestros requisitos de aplicación. Por supuesto, siempre es una buena idea enviar esto a tu cliente en doble comprobación con ellos para ver si esto es exactamente lo que quieren, si falta algo, porque este es un proceso de ida y vuelta. Tienes que trabajar y comunicarte con tus clientes sobre lo que estás diseñando y cuáles son sus necesidades para que los encuentres. Y aquí no hay discrepancia entre los dos. Entonces una vez que sí obtenemos nuestra aprobación de nuestro cliente, lo cual podemos suponer que ya lo hicimos. Podemos seguir adelante y avanzar con el diseño de estas páginas. Pero antes de saltar a 16, en realidad diseñándolos, vamos a estar armando lo que se llama un wireframes de baja fidelidad, como este que se ve aquí. Por lo que si haces wireframes de baja fidelidad de Google, podrás ver algunos ejemplos de cuáles son estos. Esencialmente wireframes nos permite crear un blueprint de nuestra app que mencione lo que necesitamos dentro de esa página y a dónde deben ir las cosas. No hay color involucrado, es todo blanco y negro. Incluso puedes seguir adelante y bosquejar esto en un trozo de bolígrafo y papel para empezar. Y creo que eso es lo que vamos a estar haciendo en la próxima conferencia para armar el wireframe para nuestras páginas antes de que saltemos y de hecho empecemos a diseñarlas. Así que agarra un poco de bolígrafo y papel y nos vemos ahí. 23. Dibuja nuestros cuadros Wireframes: Para esta siguiente parte aquí y adelante y agarra un poco de bolígrafo y papel sencillos, porque en realidad vamos a estar dibujando nuestro marco de cable en bolígrafo y papel y luego moviendo eso a XD. Entonces, saltemos y empecemos a dibujar o alicates. Oye, están listos para empezar con nuestro wireframing aquí. Por lo que ojalá a partir de ahí puedas hacerte una buena idea de lo que estamos dibujando aquí. Entonces déjame seguir adelante y sólo abrir mi bolígrafo. Y entonces voy a empezar a escribir el nombre del proyecto de primero. Entonces vamos a hacer mordeduras saludables mockup móvil. Y voy a simplemente seguir adelante y crear un cuadro alrededor de cada página que tengamos para nuestro proyecto. Puedes usar una regla si quieres ser muy preciso con esto, pero solo voy a dibujar a mano estos. No tienen que ser perfectos. Recuerda, solo nos estamos haciendo una idea de lo que queremos dónde. Entonces solo para poder hacerlo un poco más fácil para que lo veas. De nuestra conferencia anterior, tenemos nueve, 10, y 11. Entonces tenemos diez páginas que nos van a diseñar con una como ejercicio. Entonces vamos a estar diseñando las 10 páginas, o al menos las wireframing aquí en nuestro papel. Por lo que voy a tratar de encajar en 4 en esta página. Entonces ella va a seguir adelante y dibujar. Soy una especie de caja de aplicaciones por aquí. Por cada página. De nuevo, no necesitas ir perfecto con esto. Toda la idea es solo tener una idea de lo que estamos diseñando. Entonces realmente no voy a dibujar la página de la pantalla de presentación porque sólo tenemos el logo ahí para que sepamos cómo debería ser eso. Vamos a hacer la página de inicio de sesión. Vamos a hacer la verificación telefónica. Vamos a hacer la página principal y vamos a hacer la página de ubicación. Simplemente voy a seguir adelante y voy a una nueva página. Deja eso a un lado por ahora. Vamos a crear cuatro aquí también. Entonces tenemos perfil, izquierda. Perfil. Contamos con menú de pago. Entonces esta es la página donde estaremos viendo el menú de los alimentos y luego una página de pedidos, solo va a ahorrar espacio. Creo que también puedo caber en la página de progreso aquí. Disculpe si es un poco difícil leer mi letra a partir de ahí, pero la idea es solo armar aquí los wireframes. Entonces a partir de aquí en nuestra página de inicio de sesión, como hemos visto antes en otras páginas de registro. Y de nuevo, puedes inspirarte en las apps que tienes en tu teléfono o simplemente navegar por esos sitios web que pasamos, probablemente quisiéramos o logotipo en algún lugar por aquí. Por lo que podríamos hacer logo, una opción de correo electrónico y contraseña aquí. Entonces como el botón de inicio de sesión. Y si quieres hacer quizá login con Google u otras opciones, podemos enumerarlas aquí abajo también. Entonces solo voy a escribir otras opciones de inicio de sesión. Y entonces tal vez un pequeño texto por aquí para nuestros términos de servicio y política de privacidad. Enlace para que el usuario haga clic si quiere ver sus términos de servicio o su política de privacidad. Por lo general ponen esto en algún lugar de la página de inicio de sesión o tal vez debajo de las páginas de perfil. Para la verificación telefónica es bastante simple. Solo queremos una cajita aquí para que ingresen su número telefónico con un pequeño botón de inicio para ir a continuación. Para que puedan verificar eso. Y bastante directo, podemos poner un pequeño texto aquí para describir exactamente lo que queremos que hagan. Página principal, quiero seguir adelante y golpear una pequeña barra de navegación aquí y tal vez tener un pequeño cuadro de búsqueda ahí para que puedan buscar restaurantes específicos, así como tal vez un pequeño menú de hamburguesas. Para que puedan ver el menú, del cual hablando, en realidad no hemos diseñado una página de menú. Por lo que esta página de menú realmente haciendo nos lleva a la página de perfil y desde ahí pueden tener acceso a otras opciones. Y por aquí sólo vamos a tener tarjetas que van a mostrar los restaurantes. Por lo que podemos tener una pequeña imagen del restaurante aquí, así como el título del restaurante. Entonces sólo voy a apuntar a esto. Podemos incluir un poco de título. Podemos incluir la calificación. Por lo que título slash nombre del restaurante, incluye un poco de calificación, tal vez algunos signos de dólar para incluir el rango de precios, y luego tal vez el tipo de comida de ese restaurante. Y luego vamos a seguir adelante y repetir esto para todos los restaurantes que tenemos y demás, así sucesivamente. Por ubicación, solo queremos seguir adelante y permitirles buscar su vestido. Por lo que este será un pequeño cuadro de búsqueda de direcciones por aquí con un pequeño mapa. Y podrá guardar su dirección. A lo mejor tendremos un pequeño icono de pin para mostrarles dónde está su dirección. Podemos hacer un poco de CurrentLocalización también. A lo mejor aquí tendremos un pequeño cuadro de texto para escribir a la actriz. Entonces eso es un poco como nuestros wireframes de baja fidelidad para estas páginas. Para éste, Volvamos en la próxima conferencia para completarla. 24. Completa nuestros cuadros Wireframes: Ya está hecho aquí. Sigamos adelante y acabemos de completar estos otros cinco maquetas de baja fidelidad para un proyecto también. Entonces, comenzando con un perfil, vamos a seguir adelante y usar este perfil en realidad una especie de página de menú también. Porque como recuerdas en u otra página de la página principal, quería que hicieran click en este pequeño menú de hamburguesas y desde ahí, y podrán ver su menú de barra de perfil. Alguien tal vez podamos hacer un pequeño menú aquí y a la pequeña X para cerrar el menú, tal vez tener su foto de perfil aquí junto con su nombre. Y desde aquí podemos darles acceso a un montón de opciones para que podamos hacer un recuento si quieren seguir adelante y editar detalles de su cuenta y podemos hacer el historial de órdenes de pago. ¿ Qué más necesitamos? Necesitamos la ubicación o dirección que haremos ahora, haremos un pequeño botón de cierre de sesión y creo que eso es todo lo que necesitamos. Recuerda si en algún momento nos falta algo, siempre podemos volver y actualizar estos wireframes. Entonces la idea es solo poner lo que creemos que necesitamos por ahora. Por lo que sí cerraremos sesión. Ahí vamos. Esa es nuestra pequeña página de perfil de barra de menú. Tenemos una pequeña página de pago aquí. Por lo que aquí tal vez podamos tener que puedan agregar un pago. Y entonces podemos enumerar o sus pagos anteriores aquí. Pero los últimos cuatro dígitos. Y entonces podemos decirles tal vez cuáles son los primarios, y luego permitirles que sumen desde aquí también si quieren. Otro pequeño ejercicio, dejaré la página de adición para que lo hagas. Sólo como recordatorio, siempre puedes enviarme estos diseños y te daré algunos comentarios sobre ellos enviándoles un correo electrónico a hola inteligente en gmail.com. Perfecto, Ya casi terminamos aquí. El menú tendrá el nombre del restaurante aquí. Y luego haremos un pequeño tipo de subcategoría donde podamos mostrarles tal vez bebidas y tener cada tipo de opción de bebida aquí. Y entonces tal vez mains. Ya sabes lo que verías típicamente en un menú. Vamos a seguir adelante y apuntar lo que necesitamos en esta cartulina de aquí. Obviamente queremos el nombre de la bebida o elemento de menú. Queremos un poco de descripción. Necesitamos el precio y creo que eso es todo lo que necesitamos por ahora. Podríamos hacer como un recuento de calorías también. Porque recuerda que estamos diseñando esto para nuestros clientes objetivo que son algo conscientes de su ingesta de calorías Probablemente. Por lo que esta no será nada buena característica ahí mismo. Y entonces tal vez podamos tener un pequeño botón más menos para que puedan agregar ese artículo a la orden o moverlo 90. Por supuesto, como una aplicación de pedidos de alimentos podría en realidad ser mucho más compleja que solo estas páginas. Pero aquí lo estamos manteniendo simple por el bien de este curso. Por lo que esta página de pedidos puede entonces incluir su pedido. Por lo que te mostrará lo que has agregado para que puedas ver cada elemento que hayas agregado. Artículo número 1, artículo número 2, podemos tener un poco menos aquí o algo también. Eliminar ese elemento de la lista. Y entonces tal vez en la parte inferior aquí tendremos un pequeño tipo de total mostrando cuánto será tu total, tal vez con impuesto. Y luego un pequeño botón que dice orden con el rojo total aquí dentro. Y el botón puede tener algo así para la página de pedidos. Y obviamente en estas páginas podemos tener un pequeño botón de retroceso para volver a la página anterior, por lo que averiguaremos la navegación a medida que pasemos. Y por último, necesitamos una pequeña página de progreso. Entonces, por lo que en esta página se incluirá el avance. Entonces podemos mostrar un poco, tal vez un pequeño bar aquí que muestre en qué etapa se agrega su pedido desde donde lugar para entregarlo para que podamos mostrarles exactamente lo que está pasando en este momento. Entonces bajo el aquí podemos hacer entrega e incluir la dirección que se está entregando. De lo cual hablando, definitivamente podemos tener esto en algún lugar aquí también. Entonces tal vez un pequeño icono de ubicación para que ellos se aseguren de que estos pedidos sean entregados a la dirección correcta. Y eso podría llevarlos a esa página de localización que dibujamos. Por lo que tenemos la dirección y luego los detalles del pedido. Y aquí pueden dar click para pasar por eso, su página de pedidos para ver cuál es el orden. También podemos incluir una pequeña llamada, opción de restaurante, o tal vez incluso una orden de consejo. Enfriar. Entonces ahí lo tienes. Este es nuestro Wireframe de baja fidelidad para nuestro proyecto. Estos se incluirán en los recursos que hayas descargado. Para que puedas seguir adelante y usar estos diseños en lugar de tener que dibujar los tuyos propios. Y sí les animo a dibujar también esa página extra como ejercicio, que tiene la página de pedidos anterior o página de historial de pedidos. Entonces ahora que tenemos nuestros wireframes, ¿qué regresamos en la próxima conferencia y empezamos a crear nuestro archivo XD? 25. Crea nuestro archivo XD: Entonces si dibujaste los wireframes con nosotros durante el pasado par de conferencias, entonces puedes seguir adelante y usar esos wireframes mientras estás diseñando tu proyecto. Pero de lo contrario puedes seguir adelante y abrir las mordeduras saludables wireframes un PDF de los recursos también. Y por ahí he incluido el boceto que hicimos para nuestros alambres. Por lo que desde aquí podrás ver qué debemos incluir en cada página. Y por supuesto, si hay algo que nos quedamos fuera, regresaremos y lo agregaremos a nuestras maquetas. Pero esto te da una idea general de por dónde empezar. Entonces para esta conferencia, sigamos adelante y armemos nuestros tableros de arte para cada página. Entonces aquí sabemos que necesitamos un total de 1, 2, 3, 4, 5, 6, 7, 8, 9 tableros de arte así como una extra para que hagas la ley del pasado o de las páginas. Por lo que crearemos 10 mesas de trabajo ahí en nuestro proyecto. Pero antes de hacer eso primero, necesitamos realmente seguir adelante y crear un nuevo proyecto en XD. Vamos a seguir adelante y simplemente minimizar esto y seguir adelante y abrir nuestro XD. Por lo que estamos diseñando un proyecto iOS acuerdo a los informes del cliente. Por lo que he hecho una pequeña búsqueda en Google para el modelo de iphone más usado en 2021, y parece ser el iPhone 12. Y la razón por la que he hecho eso es que diseñando para una aplicación de iOS o incluso para Android, quieres averiguar cuál el dispositivo más utilizado es el dispositivo más utilizadoen base a eso. Y luego seguir adelante y crear algún tipo de diseño responsive que vamos a seguir adelante y seguir trabajando en pantallas más pequeñas o ligeramente más grandes. Entonces te mostraré cómo hacer eso a lo largo del proyecto. Pero por ahora, sigamos adelante y creemos un proyecto para el iPhone 12. Seguiremos adelante y cerraremos eso. Y aquí mismo en nuestro XD, dirígete a casa. Si ya estás en un proyecto, adelante y ciérralo y dirígete a casa y, uh, sigue adelante y haz clic en esta pequeña flecha junto al iPhone 12 Pro Max, o lo que sea que los iPhones que se muestren en este momento. Y luego seguir adelante y dar click en el iPhone 12. Ahora, en el momento en que estás viendo este video y el iPhone más usado es diferente. Entonces por supuesto puedes seguir adelante y usar eso como opción. Vamos a seguir adelante y hacer clic en este iPhone 12 coma 12 Pro para nuestra mesa de trabajo. Y XD seguirá adelante y abrirá un nuevo proyecto con ese tamaño de iPhone 12 como nuestro predeterminado. Entonces sabemos que necesitamos 12 o en realidad diez páginas para nuestros maquetas. Entonces sigamos adelante y seleccionemos esta pequeña mesa de trabajo aquí, la primera que ya tenemos. Y luego seguir adelante y golpear al Comando D nueve veces aunque duplicamos nuestro tablero de arte nueve veces. Y ella va a golpear al Comando Cero sólo para ver cuántos tengo. Nueve. Está bien, Perfecto. Voy a hacer eso una vez más por esa página extra para nuestro historial de pedidos. Entonces ahora deberíamos tener 10 mesas de trabajo. Y al golpear al Comando 0, podemos ponerlos a todos en una sola vista. Y ahora solo vamos a seguir adelante y renombrar estas mesas de trabajo en consecuencia, justo después de renombrar primero nuestro archivo real. Entonces sigamos adelante y pinchemos en este nombre de proyecto sin título y quesos a picaduras saludables. Mockup móvil. V uno. Ese pequeño V1 es solo para indicar que esta es nuestra primera versión. A medida que trabajamos en nuestros diseños, podríamos querer crear múltiples versiones. Especialmente si estamos exportando este archivo XD y enviándolo a nuestro cliente. Y eso es si no estamos usando la función de compartir porque lo contrario es un compartir Fisher tipo de hacer eso redundante. O siempre puedes seguir adelante y luego retocar tu archivo a tal vez 1.1 a medida que haces pequeños cambios, o tal vez V2 si haces cambios más grandes. Pero por ahora lo vamos a dejar como V1. Adelante y haz clic en Guardar. Ahora, en cualquier momento si te estás cayendo las conferencias y te pierdes después de cada conferencia, estaré guardando ese archivo maqueta, archivo XD e introduciendo eso en un maqueta de archivos. Por lo que a partir de esta conferencia se puede seguir adelante y descargar esos archivos de maquetas. Y si en algún momento te pierdes, puedes seguir la última o la maqueta que está disponible más cercana a la conferencia en la que lo estás viendo. Entonces digamos que estás viendo conferencia 23. Y se ve en una carpeta maqueta hay una conferencia 22. Puedes seguir adelante y usar esa conferencia 22 para caer en una. De lo contrario, sí te animo a seguir cada paso para que sigas adelante y aprendas todo lo que puedas fuera de XD. Entonces sigamos adelante y renombremos el nombre de cada mesa de trabajo. Haz el primero como pantalla de salpicaduras. Segundo tiene login. Ahora solo estoy haciendo doble clic aquí para editar el nombre. También puedes hacer eso en el panel de capas por aquí. Echa un vistazo rápido. ¿ Qué más tenemos? Tenemos verificación telefónica. Entonces cuando telefonicas verificación, tenemos nuestro perfil de página principal, pago , menú, orden , progreso, o incluso podemos hacerlo con su progreso. Y por último pero no menos importante, o en su lugar llamaremos a este único historial de pedidos. Para este perfil uno realmente voy a hacer perfiles menú slash. Entonces este es el menú de la app, no el menú del restaurante. Por lo que ahora tenemos todas nuestras mesas de trabajo en cualquier momento podemos arreglarlas y moverlas. Pero por ahora sólo voy a seguir adelante y dejarlo como está. Ahora estamos listos para saltar a empezar con nuestra pantalla de inicio y abrirnos camino a través de nuestro diseño. 26. Pantalla splash: Muy bien, Así que primero lo primero vamos a diseñar nuestra pantalla de presentación. Entonces por supuesto, las pantallas de salpicaduras son una de las páginas más fáciles de diseñar. Entonces voy a seguir adelante y sólo presionar zed y acercar ahí. Entonces para nuestra pantalla de salpicaduras, probablemente queramos colorear fondo y luego un logo en el medio aquí con el nombre de esa empresa. Por lo que obviamente aún no tenemos nuestro logo. Vamos a estar diseñando eso en las futuras conferencias. Pero por ahora, podemos darle a esta página un relleno de color verde, ya que eso es un poco como el esquema de color vamos por con este proyecto. Y luego seguir adelante y añadir un poco de texto. Y entonces tal vez un pequeño soporte de lugar para donde irá el logo una vez que lo tengamos diseñado. Entonces lo primero es lo primero, adelante y haga clic en esta página de pantalla de presentación. Asegúrate de tenerlo seleccionado. La mesa de trabajo por aquí. Después sigue adelante y haz clic en apariencia. Y en realidad puedes seguir adelante y cambiar el relleno de este tablero de arte por lo que quieras. Entonces para mí, voy a seguir adelante y seleccionar el poco color verde que creo que se verá bien para esta app. Ahora por supuesto, solo lo estoy viendo aquí. No tengo un color específico que vaya por. Y hay muy buenas posibilidades de que estemos actualizando este color cuando pasemos por nuestra conferencia de activos de color. Pero por ahora vamos a seguir adelante y seguir con un color similar como este de aquí. Y puedo obtener exactamente este color introduciendo este pequeño código hexadecimal en tus selectores de color. Entonces si quieres seguir adelante y escribir esto exactamente por ahí, debes conseguir exactamente este color. Ahora usando este pequeño icono plus, puedo seguir adelante y agregar este color a muestra de color para que puedas seguir adelante y reutilizarlo en otros objetos también. Entonces lo real, tenemos un poco de color para nuestro fondo. Añadamos un texto presionando la tecla t. Y luego justo en medio de la página. Vamos a seguir adelante y hacer bytes sanos, que es el nombre de la empresa, por supuesto. Y hago clic en escapar un montón de veces. Y entonces obviamente el tamaño de la fuente un poco pequeño. Entonces voy a seguir adelante y hacerlo un poco más grande. Por lo que es una especie de ocupar una porción decente del tamaño de la pantalla, pero no demasiado grande. Probablemente quiero darle un relleno blanco en su lugar. Por lo que por defecto, debes obtener esta nueva fuente helvetica. Si no, adelante y cámbiala aquí buscando esta fuente. También estaremos buscando fuentes en las futuras conferencias. Entonces, por ahora, solo vamos a crear esto como marcador de posición hasta que utilicemos nuestras fuentes personalizadas. Y ahora sigamos adelante y especie de traer esto más bajo. Entonces es algo así en el medio, pero no exactamente. Entonces esto está justo en medio de la página porque estos dos tipos de líneas me muestran que esto es al azar medio de la página. Pero si lo llevo un poco más bajo, entonces puedo crear espacio para mi logo aquí. Para que pueda hacer un pequeño rectángulo pulsando la tecla Alt. Y en realidad voy a hacer un cuadrado sosteniendo Shift y sólo un poco dejar que eso pase por encima de su cabeza escapó un montón de veces para salir de esa herramienta de rectángulo. Y luego para el relleno, vamos a seguir adelante y sólo quitarlo y sólo tener un pequeño borde para que sepamos exactamente a dónde va a ir nuestro logo. Y sólo voy a traer esto un poco más bajo. Entonces aquí es donde va a ir nuestro logo. En lugar de este pequeño rectángulo, vamos a volver y añadirle eso a medida que nos diseñen nuestro logo. Pero por ahora, esta es nuestra pantalla de corte. Vamos a pasar a una pantalla de inicio de sesión en la próxima conferencia. 27. Añadir y enmascarar imágenes: Muy bien, Así que ahora estamos listos para diseñar nuestra pantalla de inicio de sesión. Te prometo esto pantallas mucho más emocionantes que la pantalla de display porque incluye mucho más contenidos van a estar aprendiendo mucho. Y también vamos a aprender a usar máscaras de imagen, lo cual es bastante genial para tus imágenes. Así que sólo sigue adelante y zoom en esa zona están aquí. Y desde nuestra carpeta de recursos, deberías poder encontrar una carpeta de imágenes que incluya una carpeta de página de inicio de sesión. Así que adelante y debajo de las imágenes, encuentra esa carpeta de la página de inicio de sesión y ábrela. Y aquí vemos que tenemos dos imágenes que vamos a estar usando en nuestra página de inicio de sesión. Entonces lo que tengo en mente es que por aquí vamos a tener nuestro contenido principal como lo tenemos en nuestros wireframes. Por lo que tendremos nuestro logo o correo electrónico y contraseña y botón de inicio de sesión, así como las condiciones de servicio y todo aquí abajo. Pero lo que tengo en mente es que en las esquinas aquí mismo podemos tener un poco de imágenes de algunos alimentos saludables. Por lo que lo económico va de acuerdo con ese tema también. Y por supuesto, para nuestro botón de inicio de sesión, vamos a usar el mismo color verde y simplemente tener un campo de correo electrónico y contraseña y debería ser bueno para ir a partir de ahí. Por lo que volviendo a nuestro XD, lo primero que quieren hacer es importar esas imágenes a nuestro archivo. La forma más fácil de importar imágenes es seguir adelante y seleccionar las imágenes que desee. Para que puedas seguir adelante y mantener presionada Command y seleccionar ambas imágenes aquí. Ahora, tengo que darle crédito a unsplash.com por proporcionar estas imágenes. Si quieres utilizar imágenes gratuitas en tus proyectos, definitivamente echa un vistazo a Unsplash. Tienen una tonelada de imágenes que puedes buscar y utilizar a lo largo de tus proyectos. Y así lo que he hecho es simplemente buscar alimentos saludables. Y así puedo seguir adelante y filtrar por esas opciones de alimentos saludables. Y así desde ahí he descargado estas dos imágenes y para importarlas a mi XD, voy a seguir adelante y simplemente arrastrarlas a mi página de inicio de sesión. Ahora, como se puede ver, las imágenes son enormes en comparación con nuestra Mesa de Trabajo. Entonces vamos a seguir adelante y simplemente mantenga presionado Shift y redimensionarlos. Y la razón por la que estamos sosteniendo turno es asegurarnos de que no estropeemos las proporciones. Entonces tenemos esta única imagen aquí mismo. Y creí que mi otra imagen entraba en esta página del historial de pedidos por algunas razones. Entonces sigamos adelante y redimensionemos ese también. Y vamos a seguir adelante y moverlo a nuestra página de inicio de sesión también. Whoops. Asegúrate de que cuando estés arrastrando, no vayas encima de estos pequeños botones. De lo contrario, en realidad podría estar editando su imagen en lugar de arrastrarla. Así que asegúrate de estar en el medio o en algún lugar donde no haya nodo. Entonces lo que quiero hacer es seguir adelante y en realidad recortar estas imágenes para que solo tengamos las placas en lugar del fondo. Y la forma más fácil de hacer eso, porque estas bolas son una especie de círculos, usa lo que se llama máscara de imagen. Entonces para enmascarar realmente o imágenes, podemos seguir adelante y crear una forma ovalada. Así que sigamos adelante y presionemos E y creemos un círculo perfecto manteniendo pulsado Shift y arrastrando y luego soltando. Sigamos adelante y escapemos de ahí y solo asegurémonos que esto es algo así encima de esa pelota. Y en cualquier momento puedo bajar la apariencia para asegurarme de que está encima de la pelota y parece que lo es. Y así ahora lo podemos hacer es seguir adelante y dar click en el círculo así como en la imagen. Por lo tanto, mantenga pulsado el turno y asegúrese de tener ambos seleccionados y luego vaya a Objeto, Máscara con forma. Y ahí lo tienes. Por lo que la imagen ha sido una especie de cultivos en sólo esa zona. Todavía puedo seguir adelante y hacer doble clic en esto y editar la imagen y moverla. Pero esta es esencialmente la forma más fácil de crear máscaras de imagen. Por lo que parece que no tengo completamente máscaras que apropiadamente. Entonces si ves que todavía tienes áreas como esta frontera negra aquí, eso en realidad no es parte de la frontera porque no tenemos fronteras en este momento. Entonces si sacamos la frontera, eso sigue ahí, podemos seguir adelante y hacer doble clic y leer círculo Justicia para asegurarnos de que sea un poco más pequeño que la imagen. Y así de esta manera, cuando hagamos cosechar en ella, vamos a seguir adelante y quitar lo que sea que esté en el exterior. Enfriar. Entonces ahí lo tenemos. Vamos a seguir adelante y seleccionar esto y sólo hacerlo un poco más grande y colocarlo tal vez aquí abajo. Y entonces hagamos lo mismo aquí. Creación de una elipse. Ve por encima del plato, es escapar de ahí. Y sigamos adelante y seleccionemos ambos. Ir a Máscara de objetos con forma. También puedes lograr esto presionando comando shift M. Y eso hará lo mismo. Enfriar, y vamos a seguir adelante y hacer esto más grande también. Entonces ahora toda esta capa, como puedes ver, se llama grupo de máscaras. Pero similar a nuestras formas booleanas, todavía podemos acceder tanto al círculo que tenemos como a la imagen debajo como esperamos. Por lo que siempre podemos entrar ahí y ajustar la imagen y hacerla más grande o más pequeña para luego volver. Y lo haremos un poco más grande y lo dejaremos ahí. Entonces volvamos en la próxima conferencia para completar nuestra página de inicio de sesión. 28. Página inicio de sesión: Centrismo derecho, la página de inicio de sesión, sí quiero dejarla con un fondo blanco como está. Y luego vamos a seguir adelante y añadir nuestra contraseña de correo electrónico. Y luego un logo por aquí con el botón de inicio de sesión. Entonces sigamos adelante y sumamos esos elementos ahora. Por lo que necesitamos un rectángulo y un texto para nuestro buzón de correo. Entonces sigamos adelante y hagamos eso presionando R y luego arrastrando un poco de campo por aquí. Voy a hacer de éste unos 50 píxeles en cuanto a la altura. Eso lo veo aquí mismo. Y luego voy a seguir adelante y salir de ahí presionando dos veces Escape y luego golpeando textos y agregando un poco de mensajes de correo electrónico por aquí. Y creo que esto es un poco grande. Entonces vamos a hacer 16 puntos para el centro de correo que son un año y tal vez hacer 20 pixeles tipo de n al cuadro de texto de correo electrónico del desierto. Y lo vamos a poner justo aquí. Y luego usando Comando G, Vamos a hacer de esto un grupo y duplicar el grupo sosteniendo Alt y arrastrando una copia. Entonces esta es otra forma de realmente duplicar objetos. Puede mantener Alt y mientras mantiene presionado Alt, crear otra copia de ese objeto. Yo sólo voy a borrar ese extra. Y sigamos adelante y nombremos aquí el correo electrónico para pasar palabras. Este va a ser el campo de contraseña. Y luego queremos un botón. Por lo que realmente podemos seguir adelante y usar el mismo rectángulo. Sólo lo traeremos aquí abajo. Y en lugar de que este texto haga ping aquí, vamos a seguir adelante y moverlo al medio. Y vamos a llamar a este uno log n. Y así una cosa a tener en cuenta es que a medida tu texto crece o se contrae, No está exactamente en medio. Entonces lo que quieres hacer se ajusta después de haber ingresado tu texto y asegúrate de tener esta opción de texto centrado aquí esta opción de texto centradopara que si lo haces terminas escribiendo más, los textos se mantengan en el centro. Entonces tenemos nuestro botón ahí ahora. Por lo que queremos cambiar el relleno o el fondo de esto a ese color verde, pero asegúrate de que no lo hagas a este nivel porque en este momento estamos editando el grupo en lugar del propio rectángulo. Entonces si sí agregas un relleno a este nivel, realidad estás agregando un relleno tanto al texto como al rectángulo, que no es lo que queremos. Entonces lo que queremos es un texto blanco y un rectángulo verde. Al hacerlo, mantenemos el comando, presionamos el texto, cambiamos éste para esperar y mantenemos el comando. Presione el rectángulo y cambie esto a verde. A lo mejor voy a hacer de mi texto un perno para que sea un poco más creíble. Y también necesitaremos estos por aquí. Entonces sigamos adelante y seleccionemos estos de nuestra pantalla de presentación. Sostenga de nuevo Alt y traiga esto a esta página. Por lo que sólo arrastramos la copia sosteniendo Alt adelante y hacemos un poco más pequeño sosteniendo Shift y la traemos aquí arriba. Y sigamos adelante y cambiemos el texto aquí del peso que tenemos dos negros. Por último, queremos tener aquí nuestras pequeñas Condiciones de Servicio. Entonces sigamos adelante y creemos un nuevo texto, derecho, términos de servicio y privacidad, política. Y escapar de ahí. Y trae esto un poco al lado izquierdo. Y como notan, estoy manteniendo mis cosas alineadas aquí. Entonces es muy importante que te asegures de que todo sea del mismo tamaño y todo esté alineado. Y así eso es visualmente correcto. Vamos a seguir adelante y cambiar este tamaño de fuente 21 a 14. No necesitamos que este texto sea súper grande. Y de hecho, podemos bajar el relleno a una especie de color gris claro. Y sigamos adelante y solo bajamos un poco todo. Por lo que no está totalmente encima el uno del otro. poco se va juntando la cosa. Hagamos un par de pequeños cambios para que esto se vea mucho mejor. En primer lugar, recomiendo hacer esquinas redondeadas cuando se trata de cuadros de texto y botones, um, y también quitar los bordes duros alrededor de los botones al menos. Y luego para los cuadros de texto, puedes seguir totalmente adelante y hacerlo un poco más sutil. Entonces dos cosas aquí. En primer lugar, sigamos adelante y quitemos el borde del botón. Entonces ese botón ya no tiene frontera, lo cual es bueno. Vamos a seguir adelante y seleccionar el rectángulo aquí y traer las esquinas y para tener un radio de esquina de, vamos a hacer 10 y luego aplicar lo mismo aquí. Entonces voy a seguir adelante y seleccionar justo el rectángulo aquí. Nuevamente, en tu panel Capas, puedes asegurarte de que solo seleccionas el rectángulo en contraposición al grupo. Y haz lo mismo aquí. Solo estoy sosteniendo Command para seleccionar ambas capas. Entonces voy a seguir adelante y teclear aquí un radio de 10 píxeles. Y en lugar de este tipo de áspero, tipo de color gris borde más oscuro, Vamos a seguir adelante y ponerlo un poco abajo a tal vez alrededor de este color, tal vez un poco más oscuro que eso. Creo que esto se ve bien. Por lo que poco a poco vamos llegando allí. Obviamente, aún queda mucho trabajo por hacer. Otra cosa que puedes agregar, por ejemplo aquí es duplicar este pequeño texto aquí y tal vez ponerlo aquí. Por lo que podemos tener una opción de contraseña olvidada y simplemente seguir adelante y alinear eso a la izquierda o a la derecha, Lo siento, impreso un poco. Bajar un poco nuestro botón. Creo que eso se ve bien. Otra cosa pequeña es que podemos seguir adelante y tanto el texto aquí, la política de privacidad en los términos de servicio. Incluso podemos seguir adelante y subrayarlos golpeando mando te. De lo que tenemos esa parte del texto seleccionado para que podamos mostrar que estos son enlaces al usuario. Vamos a seguir adelante y sólo mover esta imagen un poco demasiado cerca de ellos. Y creo que eso se ve bien. Entonces ahí lo tienes. Esa es la página de inicio de sesión. Y en la siguiente lección vamos a volver y trabajar en nuestra página de verificación telefónica. 29. Página de verificación del teléfono: Muy bien, Hemos armado la página de la pantalla de presentación, la página de inicio de sesión. Estamos avanzando con nuestra página de verificación telefónica. Déjame seguir adelante y acercar usando esa tecla y luego dibujar la Nuestra vista se deja fuera de ese modo de zoom. Por ahora, sólo voy a volver rápidamente a mis wireframes. Está bien, así que tengo mi alambrada abierta aquí. Entonces lo que queremos aquí dentro es quizá un texto para decir esto es la verificación telefónica con una pequeña descripción de lo que tienen que hacer. Por supuesto poner ahí para la verificación número 4, así como un pequeño campo de texto y un botón siguiente. Por lo que esto debería ser bastante simple y directo. Sólo necesitamos dos líneas de texto. Un cuadro de texto aquí que podemos utilizar desde la página de inicio de sesión y un botón siguiente. Por lo que también podemos usar el mismo botón de inicio de sesión y lo pondremos aquí para el siguiente. Adelante y hagamos eso en nuestra mesa de trabajo para verificación extranjera. Por lo que para empezar, voy a seguir adelante y seleccionar mi campo de correo electrónico, así como mi botón de inicio de sesión. Estoy sosteniendo turno aquí para seleccionarlos a ambos. Por lo que puedes ver ahora están seleccionados tanto grupos de campo como botones. Adelante y peguemos al Comando C para copia. Acude a nuestra página de verificación telefónica y presiona Comando V. Dos cosas que quiero decirte primero una, cuando hagas copia algo y la selecta otra mesa y adelante y pega esos artículos en esa mesa de trabajo . Icsi en realidad lo colocará exactamente donde estaban esos objetos en la otra mesa de trabajo en la nueva mesa de trabajo en la que lo estás pegando. Por eso es que exactamente P establece nuestros artículos exactamente donde lo he tenido en esta página. Entonces eso es bastante útil si digamos que estás pegando artículos similares que quieres en la misma posición, lugar de tener que moverlo y colocarlo en esa nueva posición. Pero porque como puedes ver en nuestros wireframes y tenemos esos, siéntelos pero en el campo tipo de en la parte superior, el botón en la parte inferior. Entonces vamos a seguir adelante y simplemente mover eso alrededor. Entonces vamos a traer esto alimentado hasta que estemos alrededor de tal vez unos 140 píxeles son en realidad unos 170 píxeles. Tenemos algún espacio para nuestros textos de verificación telefónica. Y sigamos adelante y bajemos este botón hasta que se trate. Hagamos 35 píxeles desde abajo. Y de nuevo, mientras arrastras elementos, XD te mostrará esa pequeña línea rosa y azul con un número que te muestra cuántos píxeles eres de abajo o en relación con otros objetos. Y así como recordatorio, también puedes sostener Alt para volver a comprobar todos los lados. Entonces ahora lo veo en medio. Tengo 29 pixeles a la izquierda, 29 y la velocidad, y 35 de abajo. Entonces algo así en el medio aquí. Si sí tienes tu botón, veamos por aquí. Y quieres centrarlo otra vez. Se puede utilizar ese centro de alineación horizontal. Y una vez que haga clic en eso, irá adelante y centrará ese botón respecto a la mesa de trabajo aquí. Lo mismo aquí con este campo. Puedo ver que estoy justo en el medio, así que ahí es exactamente donde quiero estar. Pero sigamos adelante y cambiemos estos mensajes de correo electrónico a número de teléfono. Y sigamos adelante y creemos otro texto presionando T en nuestro teclado. Escribiendo teléfono. Verificación. Ahora porque el último texto dice creado era blanco y relleno, ahí es donde no se puede ver el texto sigue ahí. Es sólo porque es blanco y el fondo es blanco. Es una especie de mezcla el final. Entonces sigamos adelante y elijamos superarchivo dos. Hagamos como un color verde aquí y sigamos adelante y guárdalo a nuestras muestras de color también. Voy a subirme a eso pegando al Comando B. Así que puedes usar un peso de fuente regular y luego seguir adelante y subir la fuente a 25. Perfecto. Adelante y traigamos esto aquí. Por lo que tenemos nuestro total para ahí. Y entonces ahora queremos una pequeña descripción de explicar por qué necesitan poner sus números telefónicos. Hagamos los otros textos esta vez vamos a crear un cuadro de texto. Vamos a seguir adelante y presentar t aquí en nuestro teclado para crear esa descripción. Alimentado. Yo sólo voy a dejar ir justo aquí y vamos a seguir adelante y a la cinta. Por favor ingrese su número de teléfono para verificar su cuenta. Entonces una cosa que sí quiero decirles es que ya que estoy editando el texto en este momento, si sigo adelante y cambio el texto o el tamaño de la fuente aquí, como pueden ver, no está pasando nada. Nada está cambiando. Y eso es porque actualmente estoy en el modo de edición. Entonces lo que sea que tomé de aquí en adelante será una fuente de 15 puntos, pero nada más cambiará. Entonces lo que quieres hacer es asegurarte de que o bien seleccionas todos tus textos en tu cuadro de texto, Adelante y presiona escape hasta estés fuera de esa herramienta de tipo. Y luego sigue adelante y selecciona todo tu cuadro de texto y luego sigue adelante y establece un nuevo tamaño de fuente. Voy a hacer 16 por aquí. Bandeja pensar funciona bien. Y yo sólo quiero dejar eso justo ahí. Eso se ve bien. A lo mejor podemos bajar estos sólo un poco así como la verificación telefónica aquí. Y como puedes ver, las cosas se están encajando un poco en su lugar ya que están espaciadas uniformemente. Por lo que sí animo a que agregues mucho espacio en blanco en tus diseños en lugar de tratar meter tantas cosas que puedas, es solo una buena práctica. Y lo último que vamos a hacer es seguir adelante y cambiar este inicio de sesión a siguiente. Por lo que cuando presionen Siguiente, se adelantará y luego se les pedirá que introduzcan el código de verificación para el número de teléfono. No estaremos diseñando esa pantalla, pero está muy cerca de ésta, excepto que solo les estás pidiendo que pongan el código de verificación que obtienen en su número de teléfono. Siéntete libre de hacer eso como ejercicio si te gusta. Pero voy a seguir adelante y saltarme eso por ahora mismo. Entonces tenemos una pequeña página de notificaciones telefónicas ahora. Muy sencillo, muy sencillo. Y en la siguiente conferencia cuando regrese y solo organice un poco nuestras mesas de trabajo porque este momento no tienen realmente ningún pedido. Entonces volvamos en la próxima conferencia y trabajemos en eso. 30. Organizar nuestras tableros de arte: Entonces cuando empezamos a crear nuestros tableros de arte por todas partes, explicó que vamos a volver y organizarlo un poco porque ahora mismo es sólo una especie de orden aleatorio o en el orden de las páginas que que escribimos en nuestro documento de texto. Pero ahora sí te animo a que sigas adelante y organices tus mesas de trabajo de una manera que tenga sentido para ti, tiene sentido para tus clientes y es simplemente legible si alguien del exterior abre este proyecto y está tratando de darle sentido a lo que va a donde. Entonces la mejor manera de hacerlo, la forma más fácil, primero que nada, pulsa Command 0 para alejar y ver todos tus tableros de arte. Lo que voy a hacer es ir adelante y separar y agrupar mesas de trabajo que sean relevantes entre sí. Entonces esa es para la mejor manera de hacer que las cosas funcionen. Entonces en este momento la pantalla de inicio y la página de inicio van bien juntos porque generalmente desde la pantalla de inicio vamos a la página de inicio de sesión o desde esta pantalla de cinco, si el usuario está conectado, solemos ir a la página principal y luego la página de inicio de sesión y verificación de formularios también están relacionadas porque generalmente después de que el usuario se registra, se le pedirá que verifique su número de teléfono. Por lo que la colocación de estas tres pantallas iniciales son buenas. En mi opinión. Creo que la página principal también es buena donde está. Pero lo que quiero hacer es que quiero separar el perfil y la página de pago, ponerlos juntos en algún lugar y luego el menú y la orden slash progresan juntos. Y entonces el historial de pedidos también debe ir con un perfil porque va a ser accesible desde el perfil como un poco dibujamos en nuestro marco alambrico aquí. Entonces sigamos adelante y hagamos eso. Eso es mover el menú del perfil justo aquí arriba. Un poco de espaciado. Y entonces el pago también debe ir por aquí porque es accesible desde la página del perfil página del menú slash. Vamos a seguir adelante y traer la historia del orden aquí también. Y luego sigamos adelante y seleccionemos a todos estos tres y luego traerlos justo aquí. Entonces ahora hay un poco de relación entre ellos donde vas de la página principal a la página de perfil. Se puede abrir la página de perfil. Y desde esa página de perfil puedes ir a la página de historial de pagos y pedidos si lo deseas. Y luego desde la página principal suele ir al menú del restaurante. Desde la página de menú comienzas a ordenar y luego desde tu página de pedidos puedes ver el progreso de tu pedido. Por lo que este tipo de flujo tiene más sentido. Siéntase libre de añadir también un texto si lo desea. Por lo que podemos, podemos ir totalmente adelante y agregar una herramienta de texto dentro de nuestra mesa de trabajo, que es esencialmente esta área en el exterior de nuestras mesas de trabajo. Podemos hacer opciones de menú. Voy a seguir adelante y darle a eso un relleno negro con un tamaño de fuente de un 100. Opciones de menú. Arrastre una copia usando alt aquí, inicie sesión, y arrastre otra copia por aquí. Pedido de pedido. Adelante y solo bajemos un poco estos. Un truco genial cuando estás moviendo cosas. Si lo haces presionando la flecha abajo, entonces seguirás adelante y moverás las cosas de un píxel a la vez, o la flecha arriba, misma cosa con una derecha e izquierda. Pero si mantienes pulsada la tecla Shift mientras haces eso, seguirás adelante y realmente harás ese proceso por 10 píxeles a la vez. Por lo que es simplemente mucho más rápido mover objetos alrededor. Esto aplica a los tableros de arte, son objetos, textos, cualquier cosa atrapada. Por lo que ahora tenemos especie de organizar nuestras mesas de trabajo en diferentes secciones. Tenemos las opciones de menú, las pantallas de pedidos, y las pantallas de inicio de sesión, mucho más ordenadas y mucho más organizadas. Entonces a continuación, vamos a volver y crear un poco de estructura de navegación para nuestras páginas de orden del menú principal y de progreso de pedidos. 31. Uso de una barra de navegación: Por lo que tenemos nuestras páginas o las mesas de trabajo aquí todas organizadas. Ahora bien, esto es genial. Ahora creo que es hora de que armemos la estructura de navegación. Entonces si echa un vistazo a este wireframe que armamos entre estas páginas de la media o la ubicación o la dirección, PJ, menú de pagos y orden. Tenemos un pequeño tipo de estructura de navegación aquí en la parte superior. Ahora por supuesto que podemos seguir adelante y colocarlos aquí. Pero como te mencioné, Apple tiene ese kit de interfaz de usuario de iOS que puedes usar para pegar realmente barras de navegación de iOS en tu proyecto sin tener que redibujarlo o recrear en tus diseños. Y así eso nos ahorra mucho tiempo a la hora de diseñar y conseguir ese kit de interfaz de usuario. Si sigues la última sección, lo pasamos, pero lo volveremos a pasar. Simplemente, tienes que bajar al archivo, Obtener kits de interfaz de usuario. Una vez que esa página se abra, baja al diseño de Apple. Debería ser el primero aquí. ¿ Y si no, desplázate hacia abajo y encuéntralo? Porque estamos diseñando para un proyecto iOS, vamos a descargar el kit de diseño de Apple. Entonces da click en conseguir el kit y luego baja aquí a XD. Adelante y hagamos dos cosas. Entonces uno, haga clic en Descargar en esta opción X d aquí para la plantilla de diseño iOS y iPad OS XD. Entonces sigamos adelante y hagamos eso. Si ya lo tienes de las conferencias anteriores, puedes usar la misma. Si no, adelante y dale algo de tiempo para que descargue. Y mientras tanto, dirígete a las fuentes. Y si no tienes a los fans de Apple también es un buen momento para seguir adelante y descargar el SF Pro, que es una fuente que Apple usa por defecto en sus apps. Entonces vamos a estar usando esos perfiles SF también en nuestra app. Entonces sigamos adelante y pinchemos. De acuerdo, hay diferentes variaciones de esta fuente sf. Ahí hay un compuestos y ácidos SF, mono, y otros también, pero nos vamos a estar pegando solo al SF Pro. Entonces lo primero para la plantilla de diseño de iOS 15, adelante y pasar por la instalación. A partir de ahora, deberías tener abiertos estos dos. Y son estas páginas podrían verse diferentes en Windows, pero aun así deberías poder obtener la plantilla de diseño de iOS 15 así como un paquete de perfiles SF que puedes seguir adelante e instalar. Entonces primero voy a seguir adelante e instalar las fuentes solo hacer doble clic en esta o aquí. Seguiré adelante y te llevaré a través de una pequeña instalación, melocotón, que es bastante directo. Y yo Watson impresionante. Y adelante y cierra este. Mover a la basura. Y sigamos adelante y ahora haga doble clic en nuestra plantilla de diseño para iOS 15. Ahora abramos éste por aquí. Se llama plantillas de diseño más componentes más guías Plus iPhone o iPhone dot TXT. Abre esa. Ahora podría tardar un segundo en cargarse porque es archivo grande. Pero una vez que se cargue, vamos a seguir adelante y encontrar una barra de navegación para nuestra maqueta. Y ahí lo tienes. Entonces queremos tomar una cosa de aquí, que es la barra de navegación. Así que sigamos adelante y acerquemos al área de bar por aquí. Y nosotros tenemos son estos de aquí, específicamente buscando éste de aquí mismo, que es el que estamos buscando. Tenemos un montón de tipos diferentes también. Entonces tenemos una pequeña búsqueda, una que podemos usar para nuestra página principal. Como recuerdan, tenemos una pequeña oleada aquí, incluso para nuestra ubicación y podemos usar esa navegación estilo cuadro de texto. Entonces, ¿por qué no seguimos adelante y cambiamos nuevo al chico manzana de aquí? Y sigamos adelante y seleccionemos este de aquí, así como éste de aquí. Entonces quiero a estos dos así como de aquí arriba vamos a seleccionar éste también. Sólo estoy sosteniendo Comando y Turno seleccione éste también. Por lo que ahora tenemos a estos tres seleccionados. Adelante y copiemos. Vuelve a cambiar aquí. Y justo de este lado por aquí, voy a seguir adelante y pegar esos n. Adelante y sólo arrastra estos por aquí. Sólo por el ínterin. Muy bien, así que probablemente vamos a usar este de aquí para nuestra página principal. Entonces sigamos adelante y copiemos y peguemos eso ahí dentro y arrástralo a la parte superior. Y probablemente queremos realmente el mismo para nuestra página de menú así en caso de que necesites buscar sort, hacer Command C, pega eso aquí en caso de que quieras buscar ciertos artículos de comida del menú. Para nuestra página de pedidos sin embargo, podemos hacer éste aquí mismo. Realmente no necesitamos una barra de búsqueda para allá. Y luego para el progreso del pedido, voy a copiar este y también pegarlo aquí. Porque entonces estas páginas, realmente no necesitamos buscar nada. No necesitamos esa barra de búsqueda. Y luego bajo perfil, en realidad queremos una navegación personalizada allí. Realmente no necesitamos una barra de navegación. Y aquí, qué podemos copiar este aquí mismo en estas dos páginas, la página de pagos y la página del historial de pedidos. medida que estamos pasando por nuestros diseños, vamos a seguir adelante y cambiar esos títulos y todo en todo el No te preocupes por ello ahora mismo si te preguntas por qué lo dejamos como es por ahora, sólo queremos juntar toda la estructura de navegación. Ahora tenemos la estructura de navegación en todas las páginas que quiero, con excepción de unas pocas páginas que no creo que necesitábamos, como una verificación telefónica y la página de perfil, que tendrá aquí un pequeño exponente para cerrar eso. Y a medida que pasemos por nuestro diseño, vamos a reemplazar cada botón en consecuencia a lo que debería ser. Entonces sigamos adelante y volvamos en la próxima conferencia para seguir trabajando en nuestra página principal. 32. Crea vistas de la tarjeta: Diseñar Vistas de Tarjetas. Esta es una de mis partes favoritas del diseño de UI. Entonces, ¿qué es una vista de tarjeta? Qué vista esencialmente tarjeta como cualquiera de ustedes que suele tener una imagen con un montón de textos e iconos y botones, una especie de piezas organizadas de contenido que incluyen un montón de información que útil o relevante para esa página. Entonces, por ejemplo, si hacemos zoom en esto, entonces estoy de vuelta de nuevo en el diseño móvil. Y si me desplaza hacia abajo a, uh, veamos esta página de orden por aquí. Se puede ver un poco esto aquí es una tarjeta. Esencialmente. Podría no tener mucho de un divisor entre los diferentes, pero puedes crear totalmente cartas donde tenga un divisor completo y una sombra y todo con un borde o simplemente algo así donde tienes una imagen, montón de información aquí, así como incluso podría tener un botón ahí dentro. Por lo que a esto esencialmente se le llama vista de tarjeta. Entonces en esta conferencia vamos a estar diseñando uno para nuestros restaurantes. Por lo que aquí es donde podremos navegar por los restaurantes que se muestran en ese carrito. Volviendo a mi wireframe, sí tenemos ese pH aquí en nuestra página principal. Entonces como pueden ver aquí, como que traté de bosquejar esta tarjeta de muestra aquí. Y ahí dentro queremos un título o recortar el nombre del restaurante. Queremos un poco de calificación para mostrar a los clientes cuál es la lectura del restaurante. Y luego queremos un poco de precio y el tipo de comida que sirven. Entonces en esta conferencia, vamos a armar eso en una bonita interfaz de usuario de cartulina. Así que sigamos adelante y volvamos a XD y acerquemos aquí nuestra página principal. Y usando R, voy a seguir adelante y crear un rectángulo. Justo por aquí. Voy a hacer uno que tenga unos 200 píxeles de altura. Y Vamos a salir adelante y escapar de ahí y sólo medir la distancia y eso no está del todo en medio. Entonces voy a usar la tecla de flecha para centrar eso y eso está bastante centrado ahora. Entonces esa es mi cartulina. Voy a seguir adelante y colocar aquí un montón de textos que queremos. Entonces sólo voy a tomar algunas notas de un costado por aquí. Queremos el tipo. Sigamos adelante y cambiemos eso al tamaño de fuente 14. Entonces queríamos el tipo de comida. Queremos el nombre. Simplemente voy a seguir adelante y a la izquierda alinear esto aquí. Whoops. Yo quiero poner esto en mi pieza deportes, solo puedo escribir lo que quiero leer así como el rango de precios. Entonces estas son las cuatro cosas que quiero. Entonces voy a seguir adelante y crear un cuadro de texto para cada uno de esos. Entonces las primeras cosas primero vamos a hacer el nombre del restaurante. Entonces usando la t aquí, he creado un cuadro de texto aquí. Voy a seguir adelante y salir de ahí y colocar eso en algún lugar por aquí, creo. Y una fila debajo de ella. Y vamos a hacer letreros de 2 dólares solo para mostrar qué tipo de rango de precios puede esperar el cliente. Entonces ese es nuestro rango de precios. Queremos algo para nuestra lectura. Entonces, ¿por qué no seguimos adelante y duplicamos este y hacemos justo como muestra, puedes hacer 4.5. Y luego entre paréntesis podemos poner el número de personas que le han dado a esto un restaurante, ¿cuántas lecturas? ¿ Puedes traer esto de lado? Y estoy pensando que podemos colocar un pequeño ícono de estrella por aquí también. Entonces cuando estemos pasando por los iconos, volveremos y añadiremos esto también. Simplemente voy a seguir adelante y espaciarlo un poco. Y luego estos textos, en realidad quería ser de 12 píxeles. Y el nombre del restaurante, quiero que sean 16 píxeles para el tamaño de fuente. Por último, sólo necesitamos el tipo de alimento. Entonces, ¿por qué no vamos adelante y colocamos eso a la derecha por aquí. Por lo que podemos hacer justo como ejemplo, italiano para el tipo de comida. Y voy a seguir adelante y sólo alinear eso para que sean 14 píxeles de la derecha. Y estoy pensando en el fondo aquí podemos tener una pequeña imagen del restaurante. Y luego vamos a seguir adelante y de hecho introducir algunos datos en esta página. Por lo que no es sólo un tenedor de lugar como este por aquí. Entonces vamos a seguir adelante y deshacernos de esto ahora. Entonces esa es nuestra cartulina. Volvamos a la próxima conferencia. Introducir algunos datos reales y pulir eso. 33. Pulido nuestra vista de tarjeta: Está bien, así que estamos listos para pulir nuestra vista de tarjetas aquí. Entonces vamos a hacer un par de cosas. Voy a pasar por ellos. Entonces siéntete libre de ir por los mismos pasos conmigo aquí. Y entonces te explicaré exactamente lo que estamos haciendo. Entonces lo primero que voy a crear un rectángulo, y aquí voy a usar esto para mostrar la imagen de nuestro restaurante. Entonces voy a seguir adelante y sólo bajar un poco estos textos para que estén un poco centrados a lo largo de ese otro bar. Y entonces vamos a seguir adelante y sólo alinear este con estos textos de aquí. Perfecto. Yo quiero tomar mi alineación, asegurarme de que estamos alrededor del mismo número de píxeles de cada lado. Y de nuevo, estoy usando alt aquí. Entonces voy a redondear nuestra vista de tarjetas aquí. Entonces sigamos adelante y pinchemos a este pequeño, este pequeño rectángulo que está sosteniendo todo aquí. Y luego vamos a seguir adelante y redondear las fronteras a, vamos a hacer 12 píxeles. Y entonces sólo vamos a hacer lo mismo pero con este rectángulo para las imágenes. Pero excepto que sólo lo vamos a hacer a estos dos primeros rincones. Entonces sigamos adelante y sostengamos alt. Lo que también modificamos esos dos. Hagamos 12 y 12 por aquí. Yo también puedo ver esos array aquí, y puedo modificarlos desde aquí. Creo que eso se ve bien. Entonces ahora lo que queremos hacer es, primero que nada, voy a seguir adelante y asegurarme de que mi frontera sea muy ligera bajando la opacidad a tal vez en algún lugar por aquí. Y sigamos adelante y solo guardemos eso a nuestra muestra de color también en caso de que quisieras usarla más adelante para estos textos. Adelante y antes que nada, en atornilarlos presionando Comando B. Y sólo vamos a negrita el texto más pequeño aquí abajo para que haya un poco más fácil de leer. Y a partir de los recursos que has descargado, deberías poder encontrar una carpeta de iconos. Y dentro de esa carpeta Icons debería haber una carpeta principal que puedas abrir. Y luego de ahí, este pequeño ícono de aquí, punto estrella PNG. Entonces vamos a seguir adelante e importar el PNG startup. Y aquí esto es ir adelante y sólo arrástrelo. Ahora el tamaño es demasiado grande, así que sigamos adelante y antes que nada, sigamos adelante y cambiemos esto a 20 píxeles. En realidad, creo que podemos hacer 16 por 16. Y sigamos adelante y traemos eso aquí y sólo reajustemos esos. Entonces todo está algo alineado aquí. Voy a seguir adelante y agrupar a estos dos juntos golpeando al Comando G mientras los seleccionas. Vamos a seguir adelante y realmente crear un grupo fuera de todo el asunto también. Al presionar Comando G en todo, asegúrate de tener todo seleccionado. Ahora esta de aquí es solo mi barra de navegación, por lo que no necesitas seleccionar esa. Ahí vamos. Y ahora tenemos un Card View pulido listo para ser utilizado y estamos listos para agregarle algunos datos de muestra. Pero antes de eso, sigamos adelante y usemos una cuadrícula de repetición y arrastremos esta cuadrícula vertical Repetir 3 veces. Entonces tenemos tres copias de ese grupo. Y así ahora en realidad podemos seguir adelante e ingresar tres restaurantes diferentes aquí. Entonces volvamos a la siguiente conferencia para introducir algunos datos de muestra aquí. 34. Introducción a datos de muestra: Si estás listo, sigamos adelante e introduzcamos algunos datos de muestra para nuestro restaurante Peach aquí o la página principal. Entonces antes de eso, solo voy a seguir adelante y mover un poco a todo este grupo o repetir grilla arriba. Creo que eso se ve mejor. Entonces ahora tengo 25 píxeles de la barra de navegación, que se ve mucho mejor. Entonces aquí está lo realmente genial de Repetir Grid. Cuando lo usas para repetir objetos y puedes ver un poco el poder de los mismos. En realidad puedes seguir adelante e introducir datos muy fácilmente. Si tienes un archivo de texto que tiene los datos de ejemplo con los que estás trabajando. Entonces si abres tus recursos para este proyecto y bajas a la carpeta de datos de muestra. En los datos de muestra de la carpeta, deberías poder encontrar la carpeta del restaurante. Adelante y abre eso. Y en cada archivo de texto, hay un conjunto de datos diferente. Entonces hay uno para los nombres de los restaurantes, hay uno para el precio, uno para las lecturas, y otro para la cinta del restaurante. Y estos están todos en orden. Y entonces lo que vamos a hacer es en realidad usar fácilmente este archivo de texto para generar esos datos de muestra. Entonces en lugar de tener que abrirlo y copiar y pegar cada texto, lo cual podemos hacer totalmente. Introduce y ve y repite ese proceso. Hay una forma mucho más rápida de hacerlo usando la cuadrícula de repetición. Y eso es yendo realmente adelante y arrastrando el archivo de texto aquí. Y te mostraré cómo hacer eso en tan solo un segundo. Adelante y primero, deshacer eso. Como sólo tendríamos nombre de restaurante con un montón de nombre de restaurante aquí. Entonces lo que quieres hacer es que quieras tener estos archivos de texto se abra. Sólo voy a seguir adelante y ponerlo de este lado por aquí. Y voy a reafirmar aquí mi XD. Y ahora lo que puedes hacer es simplemente seguir adelante y arrastrar este restaurante nombres discontinuos puntos TXT al nombre de tu primer restaurante. Y cuando quieras, ve, XD seguirá adelante y en realidad pegará esos datos para cada restaurante. Entonces si miras este archivo de texto, Está exactamente pegado estos nombres. Y eso es porque los hemos separado usando la clave Return o el Enter y poner el nombre de cada restaurante en una nueva línea. Por lo que xc ya está descubierto cómo realmente seguir adelante y pegar esos en el lugar correcto. Y así ahora podemos repetir ese proceso para la fijación de precios al pasar el tiempo sobre el texto del signo del dólar. Ahí vamos. El de la lectura. Ahí vamos. Y por último, por último pero no menos importante, el tipo de restaurante. Entonces ahora todo está pegado como se esperaba y tenemos un conjunto de datos de muestra va a seguir adelante y cambiar el tamaño de mi exterior. Solo hay una cosa que noté es que nuestro archivo de texto aquí o nuestro cuadro de texto para la cinta no es el correcto alineado. Entonces sigamos adelante y escribamos una línea que para que quede alineada al lado derecho. Nota en el centro, Es realmente importante mantener las cosas alineadas para que luzcas visualmente correcta. Y por último, sólo voy a seguir adelante e introducir las imágenes adecuadas para cada restaurante. Debajo de las imágenes, deberías poder encontrar esta carpeta de página principal. Y ahora podemos hacer lo mismo, pero ahora con nuestras imágenes. Por lo que aquí tenemos tres imágenes, cada una para los diferentes restaurantes. Y también son una orden, 123. Entonces sigamos adelante y arrástrelos a este pequeño rectángulo en nuestro archivo XD y no todo el rectángulo porque de lo contrario lo pegará en el lugar equivocado pero justo como parte superior. Y así ahora si vuelvo, eso se ve mucho mejor. Ahora creo que lentamente estamos juntando nuestra página principal. Entonces vamos a volver y completar esta página principal y seguir adelante desde ahí. 35. Completar nuestra página principal: Ya casi terminamos con nuestra página principal aquí. Creo que hasta ahora hemos hecho un gran trabajo. Hemos aprendido a crear una vista de tarjeta y luego usar Repetir Grid para realmente hacer múltiples versiones de esa tarjeta o múltiples repeticiones. Y luego hemos ido adelante e ingresado datos muy fácilmente usando la función de repetición de grilla de pasta en nuestro proyecto. Y espero que hayan disfrutado de esa característica porque ahorra mucho tiempo. Ahora por supuesto aquí sólo tenemos tres restaurantes. Pero si manteníamos esta página continuando y continuando, y la estiramos y usamos, repito grilla, digamos diez o más veces. Se puede ver cuánto tiempo ahorraría eso en lugar de tener que introducir cada dato manualmente. Por lo que espero ahora veas el valor de repetir grilla. Entonces volvamos a esta página y solo terminemos unas cuantas cosas y solo añadamos unas cuantas cosas y deberíamos estar bien para ir. Por lo que sólo quiero volver a revisar mi alambrada para asegurarme de que no me falta nada. Lo único es que vamos a seguir adelante y cambiar ¿se ven bien las tarjetas? Por lo que sólo tenemos que hacer algunas ediciones a nuestra barra de menús para tener aquí un pequeño ícono para el menú, o para acceder a un perfil y luego una pequeña barra de búsqueda que ya tenemos. Entonces sigamos adelante y volvamos a nuestro proyecto. Y en realidad pensándolo bien, creo que esta barra de navegación realmente la aplicaría mejor. Para que podamos tener un título pequeño grande y así el pequeño. Entonces sigamos adelante y copiemos ese. En cambio. Elimina este de aquí y copia esta barra de navegación de título grande. Y entonces podemos seguir adelante y eliminar esta acción. Dejará esa acción porque ahí es donde vamos a poner nuestro icono de menú. Y vamos a seguir adelante y simplemente redimensionar. Simplemente iré adelante y moveré estos hacia arriba. En realidad, dejaremos esa. Simplemente mueve esto un poco hacia arriba y sigue adelante y cambia el tamaño de eso. Y en cambio hay gran título esta tarifa restaurantes. Y vamos a cambiar esto hacia abajo golpeando Shift y la flecha hacia abajo. Por lo que tenemos un espaciado de 25 píxeles. Creo que eso se ve bien. Y en lugar de esta acción's adelante y crea un icono para el menú de hamburguesas. Entonces para esa solo necesitamos tres líneas para que podamos usar L para crear línea. Y sigamos adelante y creemos tres líneas de 30 píxeles de ancho. Ir a salir de ahí y luego usar Comando D para duplicar esa línea. Y luego voy a presionar Shift flecha abajo para espaciarlo por diez píxeles. Y entonces lo he hecho una vez más. Entonces tenemos tres líneas. Vamos a editar esas tres líneas estableciendo un borde de dos píxeles. Y vamos a seguir adelante y hacer clic en esta gorrita redonda. Y ahora vamos a seguir adelante y traer esto aquí. Y en lugar de la acción, o puede seguir adelante y simplemente quitar la acción. Y solo ten estas líneas y solo las estoy seleccionando todas juntas y luego golpeando comando G. Y voy a cambiar el nombre de este grupo ícono del menú bereber. Y cambiemos el color del borde por el color verde que tenemos para nuestro tema de la app. Y se ve bien. Cosa si vas un poco menos ancho, Vamos a golpear, vamos a seleccionar este grupo de chicos aquí. En realidad, usemos el comando y las teclas de flecha para reducir el ancho. Entonces este es un pequeño atajo donde realmente se puede editar el ancho. Y al sostener Comando y presionar a derecha e izquierda. Entonces solo estoy presionando menos a la izquierda para hacer 25 píxeles. Y luego sigamos adelante y cambiemos este tamaño, dos o tres píxeles en su lugar. Ese es el tamaño de la frontera. Y sólo voy a seguir adelante y sólo escribir una línea que asegure que esté en el lugar correcto. Algo que sí quiero señalar es que ese icono de aquí en realidad no está dentro de nuestra barra de navegación aquí. Entonces nuestra barra de navegación aquí es en realidad una instancia de un componente que vamos a hablar en tan solo un segundo. Pero debido a que se trata de una instancia de un componente, no podemos directamente desmontar un icono aquí, y no se incluirá en parte de esa instancia. Por lo que es separado. Entonces si sí mueves esto, éste, muévete con él. Por lo que podríamos hacer algo así como agrupar estos juntos como una solución temporal. Y así ahora está relacionado entre sí, pero de otras maneras, Por eso no se puede introducir nuevos elementos dentro de una instancia. Sólo se pueden introducir nuevos elementos dentro de un componente maestro, que nuevamente, hablaremos en las conferencias que se avecinan. Como un RV zoom hacia fuera. Tengo una bonita página de restaurante y ahora estamos listos para trabajar en nuestra página de menú para que como usuario haga clic en un restaurante, siga adelante y abra el menú para ese restaurante. Entonces volvamos en la siguiente sección y hagamos eso juntos. 36. Componentes: Entonces, ¿qué son los componentes? Entonces hemos estado hablando un poco de ellos aquí y allá. Pero nunca exploramos qué hacen y cómo son útiles. Por lo que en esta conferencia, vamos a pasar por cómo puedes usar realmente los componentes para acelerar tu trabajo de diseño a la hora reutilizar objetos o grupos dentro de tus diseños. Por lo que en un nivel alto, componentes son esencialmente objetos que reutilizas a lo largo de tu diseño, donde tienen algún tipo de elemento compartido entre ellos. Para que cuando sí necesitas usar un objeto en múltiples mesas de trabajo sean múltiples lugares. En lugar de tener que rediseñarlos en cada página. Digamos que si necesitas hacer un cambio, realidad puedes cambiarlos en un solo lugar, que suele llamarse el componente principal. Y luego que cambien en todas sus instancias, que son el hijo de ese componente maestro, que se llama instancias en componentes. Entonces, si miramos a lo largo de nuestro diseño, cosas como campos de entrada, botones, barras de navegación como estas, típicamente se convierten en componentes. Y la razón de ser es que lo hemos usado en múltiples, los hemos usado en múltiples ubicaciones. Entonces digamos que decido hacer un cambio, un pequeño cambio a mi botón aquí y cambiar el color de fondo, el color de fondo, o el tamaño de la fuente, o la colocación de los textos. Por supuesto, ahora mismo, finjamos que necesito cambiar el fondo de este botón. Tendría que ir en dos lugares, establecer un nuevo color, y luego copiar ese código de color, ir al otro botón, y luego seguir adelante y repetir ese proceso por cada en él que tengo en mi diseño. Yo sólo voy a deshacer eso. Yo solo conducía demostrando cómo sería la vida sin componentes. Entonces vamos a seguir adelante y convertir esos botones en componentes en tan solo un segundo. Pero antes de que hagamos eso, sigamos adelante y veamos qué componentes ya tenemos en nuestras mesas de trabajo. Y esas son en realidad las barras de navegación aquí. Y así la razón por la que ves este borde verde alrededor esta barra de navegación es porque es un componente o instancia de ese componente, en realidad podemos seguir adelante y navegar por los componentes bajo nuestro biblioteca. Entonces si vas a la biblioteca, el atajo impactó Shift Command Y. Podemos ver todos nuestros componentes aquí. Ahora por supuesto que no hemos creado estos componentes, pero lo que ha pasado es que cuando arrastramos esa barra de navegación a nuestro proyecto, hemos ido adelante y en realidad los copiamos como componentes de ese Proyecto de diseño de iOS. Por lo que todos estos son componentes y en realidad están contenidos dentro de esta área donde lo cortamos o barras de navegación, no estas barras de navegación que pegamos ni todas las instancias. Ahora cuando se trata de componentes, ¿cómo se puede decir si un componente es el componente principal o si se trata de una instancia donde una instancia con anulación será esencialmente se puede mirar a la esquina diamante en la forma alrededor del borde verde. En la parte superior izquierda, verás un gatillo de diamante como éste. El que se siente así es el componente principal. Por lo que cualquier cambio que realice a este componente se adelantará y se aplicará a las instancias. Y hablando de instancias, tus instancias tendrán una forma de diamante vacía o sin rellenar. Y luego si vas adelante y haces cambios a una instancia específica, así anulas esos cambios y agregas esas propiedades como el texto dentro o los objetos, entonces verás esta pequeña forma con un círculo en el medio. Entonces eso significa que has escrito sobre las propiedades de esa instancia. Entonces si volvemos, podemos ver tenemos aquí mismo éste que se sobrescribirá porque se le hicieron algunos cambios. Vemos éste donde es sólo una instancia. Y así en realidad no tenemos el componente principal. Y así la forma de acceder realmente al componente principal para estos es seguir adelante y hacer clic con el botón derecho y hacer clic en Editar componente medio. Y así ahora estos son los principales componentes para mi barra de navegación. Por lo que cualquier cambio que haga a este componente principal se adelantará y se aplicará a otras instancias. Entonces como ejemplo, si tomo el título grande aquí y vamos a ver, lo hago 25 píxeles. Seguirá adelante y se aplicará a ambos. Crece aquí. Si muevo la barra de búsqueda, saldré adelante y aplicaré a ambos. Para ti, quita el título. Seguiremos adelante y lo aplicaremos a ambos. Ahora por supuesto, si entro aquí porque esta es una instancia, si sigo adelante y realmente elimino algo de una instancia, ahora, no se eliminará de aquí porque este es nuestro principal como se puede ver. Pero porque ahora hemos sobrescrito esa instancia, obtenemos esa pequeña forma y la esquina, lo que significa que ahora hemos anulado o instancia. Entonces si empieza a editar cosas aquí, nada se efectuará aquí porque de nuevo, este es nuestro MainComponent y los cambios solo funcionan de una manera. Pero lo que sucederá es que la instancia aún compartirá ciertas propiedades. Entonces si aún hay ciertas cosas presentes dentro de esta instancia, seguirá adelante y hará esos ajustes como el posicionamiento de estos ítems. Pero claro, si sigo adelante y cambio este gran título, nada va a cambiar aquí porque ya hemos anulado el texto dentro de ese campo de texto, pero no realmente su posición. Ahora si también editamos su posición, veremos que si movemos esto, no pasará nada a la posición de esto y texto aquí porque hemos anulado tanto los textos adentro y la posición ahora. Pero aún podemos cambiar cosas como el relleno, que aún se aplicará a menos que otra vez, vayamos en nuestra instancia y cambiemos ese color también y lo anulamos. Entonces cualquier tipo de anulación en cuanto posición Phil, efectos, así sucesivamente y demás que hagamos, vamos a seguir adelante y aplicar a nuestra instancia a menos que vayamos y anulemos esas propiedades. Pero si quiero seguir adelante y realmente eliminar esas anulaciones, en realidad puedo seguir adelante y hacer clic en esta instancia y luego hacer Restablecer al estado principal. Y entonces lo que eso hará es que vaya adelante y cambie esas propiedades de nuevo a lo que teníamos aquí dentro. Y así ahora esas anulaciones se han ido. Podemos ver en la instancia que la forma está ahora de vuelta a solo una instancia sin sobrescribir alguna, esto tendrá más sentido a medida que empezamos realmente a convertir o botones en componentes. Y si tiene alguna pregunta, por favor háganlo en el camino. Entonces ojalá eso tenga sentido. Voy a deshacer eso un montón de veces para volver a nuestra barra de navegación. Como lo teníamos antes. Ahí vamos. Eso son componentes y hey, en realidad pueden crear instancias a partir de ellos y sobrescribirlas. Volvamos en la próxima conferencia y convertir esos botones en componentes. 37. Conversión de nuestros botones a componentes: De acuerdo, entonces ahora que sabemos qué son los componentes y cómo son tan útiles, sigamos adelante y conviertas nuestros botones en componente para que podamos reutilizarlos en todo tu proyecto. que más adelante si decides hacer cambios ellos o hacer diferente variedad de botones, podamos usarlos más fácilmente sin tener que cambiarlos en múltiples lugares. Entonces voy a seguir adelante y simplemente acercar mi página de inicio de sesión por aquí. Adelante y escapa de mi herramienta de zoom allí. Y lo que quiero hacer es seguir adelante y convertir este botón, que ya está en grupo. Entonces si recuerdas, cuando estábamos diseñando nuestra página de inicio de sesión, convertimos o rectángulo aquí, que es el fondo del botón y el texto en un grupo. Si aún no lo has hecho, no necesitas preocuparte por ello. Simplemente asegúrate de tener tanto el fondo el texto aquí para el inicio de sesión seleccionado porque eso es lo que parte del componente del botón en sí. Y para convertir esto en un componente, simplemente sigue adelante y haz clic derecho en él y pulsa Make Component. Como alternativa, simplemente puedes presionar Comando K en tu teclado o la tecla Control en Windows. Hay múltiples formas de decir que este es un componente ahora. Entonces primero se puede ver que por aquí tenemos un pequeño diamante que está lleno, lo que significa que este es el componente principal. Y por aquí en el panel Propiedades, también hay dice componente y entre paréntesis significan. Y podemos seguir adelante y crear, y este es el estado por defecto del botón. Podemos seguir adelante y crear múltiples estados, que lo haremos en las futuras conferencias y también en nuestro panel de capas se puede ver esta pequeña forma de diamante. Entonces esos son indicadores de que esto ahora es un componente. Y debido a que es un diamante lleno de nuevo, podemos ver que este es el componente principal. Entonces lo que queremos hacer es realmente colocar nuestros principales componentes en algún lugar separado de nuestros diseños. Y la razón de eso es que de esta manera podemos saber exactamente cuáles son los componentes principales y cuáles son solo instancias de ese componente. Por lo que más adelante si quieres hacer cambios a este botón en lugar de venir a la página de inicio de sesión y hacer cambios aquí, podemos hacer nuestros cambios fuera de donde tenemos nuestros componentes y luego seguir adelante y simplemente vea que los cambios se llevan a cabo en todo su diseño. Entonces sigamos adelante y ahora arrastramos este componente principal fuera de nuestra página de inicio de sesión. Y voy a seguir adelante y simplemente colocar mis componentes en la esquina de mi tablero de arte aquí. Entonces en algún lugar por aquí. Y podemos seguir adelante e incluso arrastrar una copia usando todo ese texto aquí y titulo esto nuestros componentes. Vaya, ahí vamos. Simplemente voy a seguir adelante y alinear eso aquí. Al igual que mantener las cosas en línea para que simplemente se vea visualmente mejor. Entonces mientras estamos aquí, voy a seguir adelante y hacer dos cosas. Una es que voy a seguir adelante y cambiar este texto de inicio de sesión a solo botón. Y la razón es que ahora que hemos hecho esto una especie de botón genérico, el texto aquí no debería ser nada específico. Por lo que podría ser algo tan general como un botón para que en cada instancia podamos seguir adelante y editar ese texto. Y entonces eso es lo primero. Y lo segundo que quiero hacer es que voy a seguir adelante y dar click en nuestras bibliotecas por aquí. Y ahora ves este pequeño botón. Ahora veo que este botón se llama componente 14 por aquí. Se puede ver un poco de miniatura de ella. Por lo que sabemos que se trata de un botón y arrastra ese componente 14 a nuestra Mesa de Trabajo. veremos que hemos creado una instancia de ello ahora, pero no necesitamos esa renuncia. Vamos a seguir adelante y renombrar esto haciendo doble clic en este componente 14 título aquí y cambiarlo para solo guardar botón. Perfecto. Y así ahora si vuelvo a mi página de inicio de sesión, simplemente puedo seguir adelante y arrastrar instancia de ese botón a mi página de inicio de sesión. Adelante y sólo alinearlo por aquí. Asegúrate de que sea agradable y alineado. Y luego sigamos adelante y ahora cambiemos nuestros textos haciendo doble clic en él y escribiendo login como teníamos antes. Donde hacer lo mismo. Voy a golpear el comando C en mi instancia aquí y seguir adelante y ir al hit de verificación telefónica Comando V. Vamos a seguir adelante y cambiar el texto de esto a, lo adivinaste a continuación. Adelante y deshacernos de este grupo que tenemos para el botón, porque esto ya no es una instancia. Esto es simplemente un grupo de rectángulo y una capa que tenemos. Vamos a seguir adelante y sólo arrastrar esto hacia fuera. Déjame solo revisar el espaciado para que parezca que estamos a 35 píxeles de abajo. Ahora vamos a seguir adelante y eliminar eso y mover que sobre dos son la misma posición para ese botón. Entonces ahora estamos usando instancias de ese componente. Y como puedes ver, hay un pequeño punto dentro de esta forma de diamante, lo que significa que esta es una instancia con algunas anulaciones. Y esa anulación es que los textos que acabamos de cambiar. Entonces como ejemplo, si vuelvo a mi botón y de repente decido que quiero que tenga mi botón, digamos un fondo azul. Simplemente puedo seguir adelante y cambiar el color de fondo aquí a, digamos que me volaste el botón. Y si hago clic de distancia y vuelvo a mis diseños, puedo ver que esas instancias también han tomado propiedad de ese color de fondo. Y así es realmente por eso que es útil usar componentes para cosas que haces. Repite sus diseños, como estos botones, como los campos de texto de aquí. Y así ahora con eso dicho, sí quiero darles un ejercicio para convertir estos campos de texto en componentes y seguir adelante y crear instancias y arrastrarlos a las mismas posiciones por aquí. Y lo haremos juntos en la próxima conferencia también. 38. Solución de ejercicios componentes: Muy bien, lo primero que quiero hacer es en realidad seguir adelante y simplemente rehacer ese cambio de color para nuestros botones antes saltar a nuestra solución de ejercicio. Entonces, vamos a pasar a nuestro componente. Haga doble clic para seleccionar el rectángulo y cambiar el relleno de nuevo a ese color verde. Si no lo haces, si no has creado una muestra para ese color, adelante e introduce este punto hexadecimal en tu selecker de color y haz clic en este icono más para agregar ese color a nuestra muestra de color. Y así de esta manera podemos acceder fácilmente a ella. Perfecto. Entonces el ejercicio fue convertir estos campos de texto en componentes en lugar de solo grupos aquí. Y así lo vamos a hacer muy rápido simplemente duplicando este campo de texto fuera usando ALT. Solo estoy llevando esto de vuelta a mi sección de componentes aquí. Y voy a seguir adelante y golpear Comando K para convertir esto en un componente. adelante y asegurémonos de tener sus bibliotecas abiertas aquí y renombrar esto a campo de texto para que sepamos a qué se refiere este componente. Y mientras estamos aquí, sigamos adelante y hagamos clic en este campo de correo electrónico y sigamos adelante y tecleemos, Por favor. Por favor titular, ahí vamos. Tan sólo una sola línea. Vamos a seguir adelante y crear instancias en el inicio de sesión y la página de verificación telefónica y reemplazarla por estos grupos que tenemos. Y lo hacemos simplemente yendo a la página de la biblioteca y arrastrando un campo de texto a mi página de inicio de sesión. Y hay otra forma de crear también instancias sin usar el panel de biblioteca. Y eso es ir realmente al componente, a tus componentes principales. Adelante y golpea copia. Al golpear Comando C o Control C en Windows. Entra a tu página de inicio de sesión y luego golpea Comando V. Y así lo que eso se hace es crear una instancia de ese campo de texto en nuestra página de inicio de sesión. Voy a seguir adelante y cambiar el texto aquí por correo electrónico. Y voy a seguir adelante y arrastrar esto aquí y luego crear otra copia de esa instancia por aquí y cambiar esto por contraseña. Pero claro que sí tenemos ese grupo, esos grupos de los campos de texto de correo electrónico y contraseña bajo estas capas. Entonces sigamos adelante y deshacernos de esos también dirigiéndonos a nuestras capas. Y creo que debería ser este grupo 2 y grupo 1, que podemos ver como porque crea ese resplandor azul. Así que vamos a seguir adelante y hacer clic en ambos manteniendo pulsado Shift y golpeando Eliminar. Ahí vamos. Por lo que ahora tenemos instancias de esos textos combustibles. Podríamos hacer lo mismo copiando una instancia en nuestra educación anterior y cambiando esto a cuatro número. Y haciendo lo mismo y borrando este grupo uno. Perfecto. Por lo que ahora tenemos instancias de esos campos de texto. Y veamos en cualquier momento con el sitio para, por ejemplo, hacer el color de este texto de marcador de posición un poco más tarde. Al igual que a este color por aquí, se adelantará y se aplicará a todos mis campos de texto. Perfecto. Tomaremos un descanso rápido aquí y luego volveremos en la próxima conferencia para trabajar en nuestra página de menú. 39. Tarjetas de elementos Menú: Estamos listos para trabajar en nuestra página de menú. Por lo que esta página de menú, no debe confundirse con la página de perfil página de menú slash allí. Esta es nuestra página del menú del restaurante. Entonces lo que queremos aquí dentro, si rápidamente cambio de vuelta a mis wireframes, aquí es simplemente menú que separa las categorías de artículos, como los drenajes y la media, cursos, postre y todo que en diferentes secciones con tarjetas que exhiben esos artículos de comida al cliente para que puedan seguir adelante y navegar por lo que tiene el restaurante. Y de esta manera saben que pueden escoger qué pedir a partir de ahí. Al presentar nuestra página de menú, vamos a utilizar dos herramientas importantes en XD. Una de ellas, que es lo que ya aprendimos, que son los componentes. Vamos a usar componentes para estas tarjetas aquí para los artículos de comida. Entonces si quieres reutilizarlos, Vamos a ver en nuestra página de pedidos o página de Progreso o en cualquier otro lugar, simplemente podemos seguir adelante y arrastrar instancias en lugar de tener que rehacer eso. Por lo que también podemos hacer diferentes estados para ellos ya que diseñamos los componentes. El segundo que vamos a aprender es cómo usar pilas en xy, lo cual es súper útil. Entonces en una vista de tabla como esta donde tenemos artículos después de artículos, también de manera similar a la página del restaurante aquí, que es una TablaVista de artículos o restaurantes. En este caso, las pilas son una herramienta útil, similar a la cuadrícula de repetición, pero diferente de alguna manera. Y te mostraré cómo funciona eso para que aprendas cómo puedes usar diferentes herramientas para crear ese tipo de uso. Entonces, sin más preámbulos, saltemos y trabajemos en nuestras tarjetas de comida de menú por aquí. Ya que esta página se compone principalmente de eso así como de las diferentes categorías que crearán esas secciones también. Entonces primero, trabajemos en nuestras tarjetas de comida, y luego seguiremos adelante y diseñaremos las diferentes secciones. Y luego seguiremos adelante y terminaremos toda la página así como usaremos pilas para organizar nuestros artículos. Entonces, volvamos a XD. Lo primero que quiero hacer es seguir adelante y crear un componente para esos artículos alimenticios en base a lo que necesitamos. Antes de hacer eso, sigamos adelante y anotemos todo lo que necesitamos en nuestra vista de carrito para que podamos seguir adelante y diseñar fácilmente esos campos de texto e imágenes. Entonces por supuesto aquí, necesitaremos una imagen de la comida. Entonces eso es algo que falta en esta lista, pero es como que implica que habrá una imagen de la comida aquí, así como la descripción del nombre, precio, calorías, y un plus a menos bi. Entonces sigamos adelante y tomemos nota de eso simplemente dirigiéndonos a nuestra sección de componentes en nuestros diseños. Y voy a golpear T para crear un campo de texto. Arrastre aquí, haga algunas notas calificando imagen. Un poco oscuro para mis textos aquí. Entonces voy a seguir adelante y hacerlo negro. Adelante y escribamos imagen. Alimentos, artículo de slash, nombre, descripción, calorías, botones para agregar slash, Quitar artículo. Es que creo que eso es todo y el precio, claro, sí. Adelante y agreguemos precio. Por lo que estas son las cinco piezas de datos o contenidos que necesito en mi vista de carrito. Entonces primero vamos a seguir adelante y crear un rectángulo para el fondo de mi vista de tarjeta. Y voy a hacer de este rectángulo unos 100 píxeles de altura, en 325 píxeles de ancho. Y se puede ver que desde el lado derecho por aquí, se puede seguir adelante y retocar estos también. Voy a seguir adelante y acercar aquí y sólo traer este texto por aquí. Acerquemos y decidamos qué poner dónde. Entonces lo primero que quiero hacer es realmente darle a este rectángulo un estilo similar al de mi campo de texto aquí en cuanto a la redondez o los bordes, así como el color del borde. Ahora si recuerdas cómo hacemos eso, simplemente seguimos adelante y hacemos clic en nuestro rectángulo aquí, asegúrate de tener el rectángulo seleccionado y no todo el componente alimentado por texto. Hit Command C. Y yo, adelante y haz clic en tu rectángulo aquí y pulsa Opción Comando V. Y como puedes ver ahora tenemos el mismo estilo. Perfecto. Entonces lo que estoy pensando aquí en términos de la imagen es seguir adelante y crear una especie de imagen por aquí para nuestro artículo de comida del lado izquierdo. Y luego del lado derecho vamos a seguir adelante y enumerar esos textos. Entonces sigamos adelante y duplicemos este rectángulo golpeando al Comando D. Así que ahora tenemos dos de ellos. Y voy a seguir adelante y encogerme este arrastrando de este lado. Eso es todo lo que tengo un ancho de alrededor de uno 35. Algo que sí quiero señalar es que la mayoría de las imágenes tienen una relación de cuatro a tres. Por lo general, cuando estamos creando imágenes o agregando imágenes a nuestro diseño, queríamos realmente ser esa proporción de cuatro a tres. Por lo que si quieres ser preciso, simplemente puedes buscar una calculadora de relación en Google. Y luego voy a seguir adelante y dar click en el primer enlace. Entonces si quieres una relación de aspecto 43, entonces sabemos que nuestra altura aquí es fija, que es de 100 píxeles. Por lo que volver aquí, o la altura representa a los tres de aquí. Por lo que queremos calcular para ver cuál debería ser C. Y como podemos ver, deben ser 133 píxeles. Por lo que eso nos dará una relación de aspecto de 4 a 3. Y así si volvemos, aquí tengo 135. Puedo usar comando y la tecla de flecha izquierda dos veces para reducir eso a 133. Por lo que ahora tenemos casi una perfecta relación de aspecto cuatro por tres. Y la razón por la que esto es importante es que a medida que arrastramos imágenes a nuestra tarjeta aquí, casi como si parecieran descendentes sin que se estire o pareciera que es del tamaño inadecuado. Una de las cosas que quiero hacer aquí es seguir adelante y dar click en mi rectángulo. Bajar a estas dos esquinas que tengo y usar Alt para establecer estas en 0. Así que asegúrate de que estás sosteniendo viejo para arrastrar esas esquinas de nuevo a 0 redondez. Entonces tenemos nuestra imagen y luego vamos a seguir adelante y escribir nuestro otro texto. Y aquí, como tarea de hacer eso, vamos a crear rápidamente un montón de campo de texto. Por lo que el primero será el nombre del elemento. Yo quiero que esto sean 10 píxeles de arriba. Ahora para la descripción, quiero hacer un cuadro de texto golpeando T, arrastrando por aquí. Entonces si miras justo aquí se vería bien. Adelante y escribo descripción. Y voy a cambiar este color de relleno por una especie de color gris más claro, algo así. Y vamos a seguir adelante y cambiar el nombre de nuestro artículo este color que tenemos aquí, que es una especie de gris oscuro. Si no tienes ese color, introduce este código hexadecimal y obtendrás el mismo color. Llevemos una descripción un poco arriba y asegurémonos que tenga una altura fija hasta aquí. Entonces si las descripciones más largas que este cuadro de texto que vamos a seguir adelante y especie de se corten. Entonces quien sea que esté poniendo los datos debería asegurarse de que la descripción sea demasiado larga. Voy a seguir adelante y copiar este otro campo de texto aquí abajo. Y vamos a poner las calorías. Sólo vamos a hacer 0 calorías aquí. Y sigamos adelante y hagamos un tamaño de 10 píxeles para esto también. Y ponlo por aquí con el mismo píxel de abajo, diez píxeles. Entonces nos dieron la imagen, nombre del artículo, descripción, calorías, y los últimos dos artículos que necesitamos son los botones para agregar y quitar este artículo a nuestro pedido, así como poco precio aquí para el artículo. Creo que podemos poner el precio justo a la derecha de las calorías por aquí. Entonces podemos ir justo aquí y poner justo como ejemplo, el dólar 000, ya que esto es sólo un campo de texto, que se ve bien. Y por último, solo necesitamos nuestros botones para agregar y quitar este artículo. Por lo que haremos una pausa rápida aquí, volveremos en la próxima conferencia para trabajar en esos botones y convertirlo en un componente y completar nuestra página de menú. 40. Crea un contador de botones: Entonces debido a que este botón aquí para agregar y quitar elementos como un poco más complicado que un botón normal, queremos mostrar al cliente que está usando esta app la capacidad de no solo agregar y quitar elementos, sino también ver cuántas cantidades de artículos han agregado a su pedido. Por lo que queremos hacer un diseño único que funcione bien y también sea funcional. Entonces solo estoy abriendo mi bloc de notas aquí para hacer un pequeño boceto en mi teléfono. Puedes seguir adelante si quieres, o simplemente puedes ver lo que estoy haciendo aquí. Entonces voy a seguir adelante y sólo me llevo mi herramienta de bolígrafo aquí en esta app de notas que no he abierto. Entonces lo que quiero hacer es por supuesto que tenemos el lado derecho de nuestra tarjeta, que es una especie de que voy a visualizar así. Entonces lo que quiero hacer es seguir adelante y mostrarles el número de artículos que tienen por aquí. Entonces digamos que tienen dos de esos artículos con un pequeño icono de más y menos por aquí, o botones para llevarlos, quitar o agregar artículos a su pedido. A lo mejor haces un poco redondeado tipo de forma por aquí para permitirles agregar y quitar esos artículos. Entonces sigamos adelante y trabajemos en diseñar este botón conjunto aquí en esta conferencia. Entonces sigamos adelante y creemos ese diseño similar en nuestro XD ahora. Por lo que tengo mi XD abierto. Y lo que quiero hacer en realidad es crear un componente separado para que podamos seguir adelante y reutilizar ese tipo de botón de contador. A mí me gusta llamarlo en otros lugares en caso de que necesitemos hacerlo. Entonces sigamos adelante y bajemos aquí en un separado justo en la parte inferior de esta vista de cartas aquí, quiero crear tres rectángulos golpeando a R. Y quiero crear tres cuadrados. Y estoy sosteniendo turno aquí para bloquear las proporciones. Y quería que esto fuera de 28 píxeles por 20 píxeles. Perfecto. Entonces ahora sigamos adelante y salgamos de la herramienta Rectángulo y golpeemos Duplicar o Comando D dos veces para crear dos copias. Y solo voy a seguir adelante y usar Shift y la tecla de flecha abajo para bajar esa copia y la otra copia también. Y voy a seguir adelante y sólo subir ese rectángulo para que estén un poco encima el uno del otro así. Lo mismo con el de aquí. Y solo estoy usando las teclas de flecha para moverlas. Lo primero que quiero seguir adelante y seleccionarlos todos y cambiar este color de borde a un color de borde más claro que tenemos aquí. Segunda cosa para este rectángulo aquí, voy a seguir adelante y hacer clic en este botón para separar los radios fronterizos. Ahora para la velocidad superior izquierda y superior, hagamos un radio de esquina de seis píxeles. Para este rectángulo aquí, Hagamos lo contrario. Por lo que los seis píxeles para la parte inferior izquierda y la inferior derecha. Y ahora quiero seguir adelante y crear un pequeño icono de menos y más. Y lo podemos hacer usando la herramienta de línea. Entonces sigamos adelante y pinchemos L y dibujemos especie de icono menos aquí. Presione Escape para salir en la herramienta de línea. Y voy a seguir adelante y darle una talla 2. En cuanto al borde con tapa redondeada, asegúrate de que eso esté alineado en el centro y no para crear un icono más. Voy a seguir adelante y crear copia de esta línea sosteniendo Alt y arrastrando una copia a este lado aquí. Después golpea el Comando D para duplicar eso y rota 90 grados. Entonces ahora tenemos dos líneas. Uno giró 90 grados para especie de crear ese icono más. Adelante y darle a este rectángulo un relleno de verde, el mismo verde que tenemos. Y este de aquí, voy a hacer una especie de acuerdo color como gris aquí. Puedes copiar este código hexadecimal para recrear el mismo color. Y luego para mis iconos más y menos, cuando mantenga presionado el turno, haga clic en todas estas líneas, asegúrese de tener toda la línea seleccionada y luego cambiarlas para esperar. Y por último, agreguemos un pequeño contador aquí presionando T, entrando aquí en el centro de la misma, y escribiendo 0. Y asegúrate de tener un 16 pixel para tu tamaño de fuente, línea o al centro. Para que si cambias este número, digamos a diez, se irá adelante y se centrará. Pero claro que no está centrado, así que me voy a escapar. Voy a dar clic en Escape para dejar la herramienta de texto y bajar esto hasta que esté centrado. A partir de ahora tenemos un pequeño botón de contador me gusta llamar a esta R que podemos usar para nuestros artículos para que podamos agregar o quitar artículos a nuestro pedido. ¿ A qué vamos adelante y hacemos clic en todo aquí y pulsa tecla de comando para convertir esto en componente principal. Y ahora voy a arrastrar una instancia de este componente principal sosteniendo Alt y traer tu copia aquí con nueve píxeles de cada lado. Vamos a seguir adelante y arrastrar por todo y asegurarnos de que seleccionamos todo y nuestro panel de capas. Y luego golpea el Comando K para hacer este componente también. Dirígete a las bibliotecas y renombró este componente aquí mismo a nuestra vista de tarjeta de artículo. Y entonces este componente aquí también, Hagamos. Pero en mostrador. Perfecto. Una cosa que quiero hacer es volver aquí, seleccionar este texto y darle un relleno de ese color gris que tenemos en lugar del negro. La luz puede ser un poco dura a veces para los textos. Entonces le hacemos un poco de un color un poco más oscuro, un poco más fácil a los ojos. Perfecto. Y eso se aplicará automáticamente aquí también, ya que ésta es una instancia de ese componente. Y ahí lo tienes. Contamos con nuestra vista de carrito. Y ahora vamos a volver en la próxima conferencia para usar pilas con el fin de trabajar en nuestra página de menú. 41. Uso de piedras: Entonces, ¿qué son los ciervos? ¿ Cómo lo utilizamos para hacer que nuestro proceso de diseño sea mucho más rápido y eficiente? Bueno, les voy a mostrar cómo funcionan las pilas a medida que diseñamos nuestra página de menú. Entonces voy a alejarme aquí, deshacerme de este texto aquí, y dirigirme a mi página de menú. Y primero lo primero, voy a seguir adelante y elegir un título aquí a Menú. Y luego cambia este botón de acción aquí al carrito, que también van a hacer un pequeño ícono también más adelante si quieres. Y luego cambia esto a restaurantes. Y así esto ahora es un poco relevante. Y luego aquí abajo, lo que queremos hacer es separar nuestras tarjetas por categoría. Por lo que queremos categorías de bebidas arrendatarias, así como los aperitivos, entrantes, etcétera. Voy a seguir adelante y seleccionar esta página de menú y en realidad la arrastraré para que sea más largo que mi vista aquí, podemos caber más elementos aquí, 1500 píxeles de altura. Entonces lo que muestra este pequeño divisor aquí, esta es nuestra vista primaria aquí. Entonces cuando sí abrimos esta ya sea vista previa de escritorio o previsualizarla y nuestro dispositivo, esto es lo que verá el usuario. Cualquier cosa más allá de esto será corte a menos que hagamos que este contenido sea desplazable para que el usuario pueda desplazarse para ver el resto de los contenidos aquí. Y lo verás a medida que empezamos a crear prototipos. Pero primero, sigamos adelante y creemos diferentes secciones pulsando la tecla T en nuestro teclado y escribiendo aperitivos. Y voy a colocar esto aquí en la parte superior, 30 píxeles de arriba aquí. No lo movió hasta que está a 25 píxeles de arriba. Ahora, porque estaba trabajando en las fuentes por aquí o en los textos por aquí. Xy se ha ido adelante y dado mi texto como estilo similar, que es el texto pro de 17 pixel SF aquí. Por lo tanto, siéntete libre de seguir adelante y aplicar esos cambios. Pero en futuras conferencias repasaremos también textos. Pero por favor asegúrate que sea un tipo similar de tamaño de fuente. El tipo de letra no importa realmente en este punto tanto. Vamos a seguir adelante y cambiar esos en las secciones futuras. Ahora lo que vamos a hacer es seguir adelante y arrastrar aquí una copia de esa vista de carta de artículo. Y adelante y alinearlo también a la izquierda. Y dale un espaciado de 23 píxeles desde la izquierda. Similar a este aperitivo aquí. Simplemente voy a seguir adelante y a la izquierda alinear este texto de aperitivo. Y ahora una cosa que sí notas es que la tarjeta aquí no llena completamente el ancho de la vista que tenemos por aquí. Entonces volveremos y arreglaremos eso en una futura conferencia. Pero por ahora, sigamos adelante y aprendamos cómo podemos usar etiquetas para agregar más artículos. Entonces lo que voy a hacer para usar impuestos, seguir adelante y en realidad agrupar estos textos de aperitivo así como esta instancia. Enfréntate a nuestro panel de capas escucha, podemos ver eso. Y vamos a seguir adelante y agruparlos golpeando el comando G. Para poder usar pilas, necesitamos agrupar elementos para que XD nos dé esa opción de usar esa función de pila. Entonces vamos a seguir adelante y hacer clic en Habilitar pila. Y así ahora lo que pasa es que este grupo se ha convertido en una pila. Podemos ver como funciona eso a medida que empezamos a agregar artículos. Entonces en este momento, nuestros artículos aquí, que son solo o textos de aperitivo así como este artículo tarjeta Vue instancia que tenemos. El espaciado es de 20 píxeles. Entonces ahora verás si seguimos adelante y damos click en esta instancia y golpeamos Comando D. Lo vamos a hacer una vez más. Xd seguirá adelante y en realidad colocó esas instancias 20 píxeles de distancia entre sí en base a este número que tenemos aquí. Entonces si haces clic en todo el grupo basado en este número, que es de 20 píxeles, esto es lo que va a ser el espaciado de todo. Si editamos esto y lo hacemos, veamos, 30 píxeles. Ahora las cosas tendrán un espaciado más grande o podemos ir más abajo y hacer 15. Y creo que para nuestro propósito, 15 en realidad se ve bien. Por lo que ahora tenemos una pequeña sección de aperitivo. Y te mostraré cuál es esta opción de relleno aquí y por qué es útil. Entonces en nuestras pilas, si vas adelante y realmente haces clic en este pequeño ícono, seguirá adelante y cambiará nuestras pilas en una opción horizontal. Entonces como puedes ver, seguirá adelante y encendida horizontalmente en lugar de verticalmente, lo cual es fresco. Si tienes algo que queremos un pergamino horizontal a Brenna, queremos el vertical. Entonces sigamos adelante y cambiemos eso a vertical. Y debido a que lo hemos hecho, hemos movido nuestros textos de aperitivo aquí. Entonces vamos a seguir adelante y mover eso al lado izquierdo de nuestro grupo aquí. Y así ahora si golpeo al Comando D en todo este grupo para que podamos trabajar están en los árboles. Puedo arrastrar esto aquí abajo y puedo ponerlo exactamente en el fondo de este otro grupo. Entonces el problema de hacer esto sin embargo, es que ahora mismo si seguimos adelante y creamos más artículos, mi pila para los aperitivos, esta otra sección o esta otra pila no bajaría. Entonces lo que puedo hacer es realmente crear pilas anidadas, lo que significa que puedo seguir adelante y mantener presionado Shift para seleccionar ambos de estos grupos y luego seguir adelante y golpear Comando G y también convertir esto en una pila. Y así ahora lo que pasa es que tenemos un grupo que tiene dos pilas dentro de él. Uno para aperitivos y éste vamos a cambiar el texto a entrantes. Ahí vamos. Y así ahora lo que puedes hacer es seguir adelante y agregar un relleno a esto en la pila aquí. Entonces si agrego un relleno de 20, irá adelante y dará 20 píxeles de espaciado desde todos los lados. Si quiero sólo el relleno superior, que es el caso principal aquí, podemos seguir adelante y usar este pequeño botón para crear solo el relleno superior de 20. Por lo que de esta manera sólo tenemos espaciado de 20 píxeles. Y la derecha y la parte inferior y la izquierda en realidad no se ven afectados. Y así ahora tenemos un espaciado. Y en este caso, ahora, si sigo adelante y agrego más aperitivos, las entradas serán empujadas hacia abajo. Porque esta es una pila anidada. Ahora puedes ver un poco el valor de las pilas, sobre todo si tienes múltiples categorías de artículos. A diferencia de nuestra página principal del restaurante aquí donde solíamos usar la grilla de repetición. Esto es super cool. Puedes usar esto a través tus diseños y múltiples secciones. Y sí te animo a que juegues con él y veas qué pila tiene para ofrecer. Entonces ahora que tenemos la configuración, vamos a seguir adelante y seleccionar el grupo para los entrantes y duplicarlo golpeando Command D. Y eso automáticamente creó otra pila aquí para mí. Y voy a seguir adelante y cambiar esto por desiertos. Ahí vamos. Ahora tenemos un montón de artículos. Podemos seguir adelante y borrar este tercero por aquí y sólo tener dos aperitivos. Y podemos seguir adelante y duplicar este dos veces para tener dos entrantes más y hacer un desierto más. O sigue adelante y toca Comando Z para deshacer esa. Y así sucesivamente y así sucesivamente. Todo se redimensionará adecuadamente. Vamos a seguir adelante y sólo llevar a todo este grupo a los centros. Por lo que también se ve visualmente tipo de centrado, lo cual creo que se ve bien. Y la siguiente conferencia, Volvamos a llenar o menú con algunos datos de muestra. 42. Completa nuestro página de menú: De acuerdo, ahora que tenemos nuestras pilas puestas en marcha para los artículos que son de menú, ahora estamos listos para llenar finalmente nuestra mini página con algunos datos de muestra. Por lo que no se ve tan soso aquí y prepárate para avanzar a nuestras otras páginas. Por lo que en las carpetas para los recursos de este proyecto, encontrarás dos carpetas. Uno para los datos de muestra, que es donde también accedemos a nuestros restaurantes datos de muestra, así como uno para nuestra página de menú bajo imágenes para que podamos acceder a algunas imágenes para nuestros artículos aquí. Pero voy a seguir adelante y sólo hacer un poco más pequeño para que podamos ver o carpetas aquí. Y lo que voy a hacer es primero ir adelante y llenar nuestro menú aquí con las imágenes y luego seguir el texto. Entonces lo voy a hacer por los anunciantes y luego por los entrantes y desiertos, te lo dejo a ti. Entonces para aperitivo, vamos a pasar por las imágenes debajo los aperitivos y arrastrar esta bruschetta, que es la primera por aquí. Entonces lo que notarás es que el recorte para la imagen no es el mejor. Entonces, lo que puedes hacer es hacer doble clic en la imagen aquí y en realidad moverla. Por lo que la parte principal de la comida, que es lo que queremos exhibir está centrada. Perfecto. Usa la tecla Escape para salir de ese artículo. Adelante y hagamos lo mismo por nuestra imagen de pan relleno con queso aquí. Y luego para el texto aquí, voy a seguir adelante y abrir nuestro archivo de texto llamado aperitivos food dash o TXT. También están los desiertos y los entrantes para que los uses. Y así desde aquí voy a seguir adelante y copiar el nombre de este platillo hasta el nombre del artículo y luego la descripción por aquí. Y así como, como mencionamos, si hay una descripción que es demasiado larga, XD irá adelante y la recortará a ese cuadro de texto que tenemos. Pero una cosa con la que no estoy súper contento aquí es el espaciado entre la descripción y este botón de contador. Por lo que voy a seguir rápidamente y ir a nuestros componentes y asegurarme de que este tamaño de texto descriptivo, poco espaciado desde el botón Contador. Entonces ahora si volvemos, debería lucir un poco mejor. Por las calorías. Nosotros también tenemos eso por aquí. Son 540 para este. Entonces sigamos adelante y pongamos aquí. Y entonces el precio es 999 también. Y de nuevo, como estamos poniendo los datos de muestra, estamos viendo algunos de los problemas con el espaciado. Por lo que esto definitivamente podría ser espaciado un poco más. Entonces voy a volver a pegarle a nuestro componente y hacer esos pequeños ajustes moviendo un poco más el icono del dólar. A lo mejor 25 pixeles. Mucho mejor. Voy a hacer lo mismo para la muestra de pan relleno con queso. Introduzca los datos en. Y de nuevo, todavía se puede ver el mismo tipo de tema con el texto aquí. Entonces por aquí para el nombre del elemento, voy a cambiarlo a un tamaño fijo y luego arrastrar esto a por aquí también. Y a medida que cambiemos eso a tamaño fijo, voy a seguir adelante y también cambiar el tamaño de fuente a 14. Creo que eso es mejor. Si vuelvo atrás. Ahora podemos ver como que es un mejor dimensionamiento. Sigamos adelante y cambiemos la descripción aquí. Perfecto a los precios también. Para éste, que puedo ver aquí es un 99. Las calorías son de tres, 95. Perfecto. Por lo que ahora tenemos nuestros aperitivos. Voy a avanzar rápido, rápido por el resto de estos. Pero como ya te llega la idea y te veré en tan solo un segundo. Ahora solo una cabeza arriba, podrías tener hambre ya que estás trabajando en esta parte de la app. No voy a mentir. A mí también me pasó un par de veces. Así que siéntete libre de tomar algunos descansos aquí a la comida gravitatoria si quieres. Y ahí lo tienes. Adelante y copiado y pegado todo aquí. Entonces sé que es un trabajo un poco tedioso, pero nuestra página definitivamente se ve mejor con datos de muestra reales aquí. Perfecto. Por lo que ahora hemos completado nuestra página de inicio de sesión o página de verificación telefónica o pantalla de inicio de página media y menú. Y listo para pasar finalmente a nuestras páginas de pedidos también. Y el pago del perfil y el historial de pedidos como el ejercicio para ti. Por lo que vamos a tomar un pequeño descanso aquí y volver en la siguiente sección para continuar con el diseño de nuestra aplicación móvil. 43. Recursos UX: Entonces, cuando se trata de diseño de UX y UI, ¿cuáles son las diferencias? Esta es una de las primeras preguntas que muchos nuevos diseñadores hicieron. Y así creo que es un momento apropiado para tomar un descanso para ir por algunos de los consejos de UX que tengo para ti antes de pasar a completar nuestro diseño móvil. Cuando se trata de diseño de interfaz de usuario, potencialmente UI significa interfaz de usuario. Entonces esta es la aplicación o sitio web real o cualquier interfaz que estés diseñando para que el usuario pueda usar. Esto suele consistir en el diseño visual, los colores. Soy diseñador gráfico usualmente funciona en esta interfaz. Y consiste en los diseños de los objetos a lo largo de la página, la tipografía, realmente cualquier cosa con la que puedas llegar a ver e interactuar como usuario. Ahora, la UX es un poco más complicada, esencialmente significa experiencia del usuario. Es así como el usuario realmente interactúa con el diseño. Entonces no sólo el aspecto visual de la misma y cómo se ve, sino más bien cómo interactúan con ella. Por ejemplo, el wireframing y prototipado tiene que ver más con el diseño de UX ya que estás juntando la experiencia para el usuario y la colocación de objetos sí repercute directamente en cómo el usuario utiliza la aplicación y así sucesivamente y así sucesivamente. Así que esencialmente la interfaz de usuario es la parte del diseño que se puede ver y UX es una porción del diseño que el usuario puede sentir. Creo que uno de los grandes recursos disponibles en línea que puedes ver con el fin de mejorar tus habilidades de diseño de UX, lo que podría llevar algún tiempo. Por lo general, el diseño de UX sí toma un poco más de tiempo para perfeccionar y estrechar hacia abajo. Ahora si vas a este enlace leyes de Ux.com, podrás acceder a un conjunto de consejos y trucos como nuevo diseñador de UX que puedes usar. Te voy a dejar esto a ti para que te repases con detalle. Pero en este sitio web encontrarás un conjunto de consejos y trucos todos juntos y formas de leyes de lo que debes hacer en tu diseño. Entonces les daré un ejemplo. Esta ley de proximidad significa que los objetos que están cerca o aproximados entre sí tienden a agruparse. Puedo dar click para leer más sobre esto. Pero esencialmente, se repasa por qué la proximidad es importante en el diseño y qué tipo de relación establece con el objeto cercano y así sucesivamente. Una vez que hayas terminado, puedes seguir adelante y consultar aún más leyes. Aquí hay muchas leyes geniales para el diseño de UX. Por supuesto, puedes ir con más profundidad y echar un vistazo a todas estas leyes por aquí. No voy a pasar por ellos uno por uno. En esta conferencia. Yo sí te animo a hacer una pausa, pasar por esto y recordar esto no es exactamente algo que quieras memorizar, sino algo a lo que quieres tener acceso como recurso mientras estás haciendo su trabajo de diseño. Por lo tanto, siéntete libre de echar un vistazo a este sitio web. Y de nuevo, el link para ello como leyes de UX.com, Muy útil. 44. Diseñar un logotipo: Si has estado siguiendo hasta ahora, hemos reunido nuestras páginas iniciales. Juntamos las páginas de inicio de sesión, la verificación telefónica, la página principal donde se muestran todos los restaurantes disponibles así como una pequeña página de menú o para permitirte pedir o agregar artículos a tu pedido. Estamos listos para pasar a nuestras páginas de pedidos, así como a nuestro historial de pagos y pedidos de perfil. Y una cosa que sí quiero señalar es que creo que me perdí la página de ubicación también mientras estábamos armando los tableros de arte. Entonces voy a seguir adelante y sólo mover esto un poco. Adelante y duplique esta página. Entonces voy a seguir adelante y titularlo ubicación. Entonces esencialmente esta es la página donde se puede llegar a establecer su dirección. Si te acuerdas, si solo abro nuestros alámbricos. Aquí vamos, Ese es nuestro wireframes abrieron esta página de ubicación donde se llega a establecer su dirección para donde debe ir la entrega. Y así diseñaremos esto en esta página, página ubicación por aquí. Una cosa más mientras estoy aquí, solo quiero asegurarme de que todo aquí con mis tablas de arte o como espaciado adecuadamente. Creo que eso se ve bien. Ahí vamos. Perfecto. Entonces sí, estamos listos para pasar a diseñar estas páginas. Antes de hacer eso, se suponía que íbamos a diseñar un logotipo para mordeduras saludables. Y ahora si recuerdas mientras pasamos por el breve, uno de los entregables clave es el logotipo para la empresa también. Entonces vamos a hacer eso juntos en esta conferencia. Ahora por el logo, quiero mantenerlo sencillo. Yo quiero mantenerlo algo relevante para el nombre, que suele ser lo que se quiere hacer en un logo. Entonces voy a venir justo aquí, justo fuera de mi tablero de arte y acercar solo para hacer un logo por aquí antes de llevarlo a mi, A lo largo de mi diseño. Entonces lo que quiero hacer para mordeduras saludables es esencialmente tener un poco, tal vez cada letra y tal vez algún tipo de marcas de mordedura sacadas de esa letra de edad para representar el nombre. Creo que eso podría quedar bien. Y así quiero hacer eso con la ayuda de nuestra herramienta de línea y un montón de elipses. Así que siéntete libre de seguir si quieres crear también una versión del logo tú mismo. Pero la versión final de este logo Walzer se incluya en los recursos para este proyecto. Por lo que simplemente puedes usar eso si quieres. Perfecto. Entonces para nuestro logo, Vamos a seguir adelante y crear una edad mediante el uso de la herramienta de línea. Entonces queremos una línea por aquí, y solo estoy usando Shift para mantenerla recta. Ahora para el tamaño de la frontera, Vamos con 20. Vamos a seguir adelante y redondear las gorras por aquí también. Y luego voy a usar todo para solo duplicar este lado de los dos años. Por aquí. Voy a usar el Comando D para duplicar eso una vez más. Y luego adelante y gírala. Usando este pequeño nodo. Es recto. De esta manera. Simplemente vamos a poner eso en algún lugar en medio de este perfecto seleccionado por completo. Vamos a darle un tamaño de borde de realmente 25. Y cambiemos el color del borde por nuestro color verde. Voy a seguir adelante y en realidad agrupar estas líneas usando Command G o Control G en Windows. Y luego voy a seguir adelante y sólo acercar este lado de la edad. Y voy a crear algunas elipses usando E, va a representar este tipo de marca de mordedura como esta. Ahora voy a seguir adelante y solo agrupar estas elipses juntas, moverlas un poco hacia abajo. Así que asegúrate de estar en grupo. Tu forma H está en grupo. Y en realidad voy a hacer esto un poco más grande también. Por lo que ocupa más espacio aquí. Haz esto un poco más grande. Creo que eso se ve bien. Ahí vamos. Porque esto es este Hs creado de estas tres líneas. Necesitamos usar realmente el trazo de contorno para que esto se convierta en más de una forma. Podemos hacer eso yendo a Ruta de objetos. Y si recuerdas Esquema de trazo, ahora, los trazos aquí se convirtieron en formas. Por lo que realmente podemos seguir adelante y usar nuestras herramientas booleanas para crear esa marca de mordedura fuera de esa edad. Podemos hacer eso asegurándonos primero de que estos estén todos agrupados como lo tengo aquí. Y selecciónalos a ambos juntos. Y hacer Object Path restar. Se ve bien. De nuevo, si quieres hacer cambios en tu forma, siempre puedes seguir adelante, entrar aquí y reorganizar círculos para que parezca más Smith Cole. De verdad haz lo que quieras. Creo que eso se ve bien. Simplemente voy a seguir adelante y en realidad seguir adelante y duplicar este grupo y traer a este grupo también aquí abajo. De este otro lado de la edad también. Creo que eso se ve bien. De nuevo, siéntete libre de modificar tus círculos si no estás completamente satisfecho con dónde tienes. Perfecto. Entonces ahí lo tenemos, Ese es nuestro pequeño logo para este proyecto. Voy a seguir adelante y guardarlo como un rol de recursos para que puedas usar. La próxima conferencia. Volvamos y coloquemos este logotipo a lo largo de nuestro diseño. 45. Colocar nuestro logotipo: De acuerdo, entonces ahora que tenemos nuestro logo listo para salir, Vamos adelante y colóquelo en nuestra pantalla de salpicaduras. Y la página de inicio de sesión, creo que son prácticamente todos los lugares principales que necesitamos para colocarlo. Si no tienes el logo o no lo has diseñado con nosotros en la conferencia anterior. puede acceder a ella acudiendo a los recursos para este proyecto. Y debajo de la carpeta del logotipo, verás que hay un logo verde punto SVG y un logo blanco que SVG. Otra de las razones por las que exportó estos como SVG y no PNG o JPEG, que suele ser lo que usas para las imágenes, es que SVG te da esa capacidad de editar el logotipo y redimensionarlo sin perder ninguna calidad. Entonces esa es una de las razones por las que usamos SVG para algunos iconos y logotipos y cosas así. En tanto que para las imágenes en las que se tiene una foto, digamos que suelen utilizar el JPEG y PNG. repasaremos con más detalle más adelante también cuando exportemos nuestros archivos. Por ahora, puedes seguir adelante e importar ambos a tu proyecto simplemente arrastrándolos a tu proyecto XD. Ahora, vemos que tenemos dos por aquí. Creo que el otro importó aquí. Entonces este blanco que vamos a usar en nuestra pantalla de salpicaduras. Entonces lo vamos a colocar justo en medio de la pantalla así, o donde tengamos nuestro positor. Para el positor, Vamos a seguir y ahora eliminarlo. Simplemente mueve este texto hacia arriba un poco demasiado para que esté cerca del logo. Por el tamaño me gusta, cómo está aquí, que es 91 por 126. Entonces para este verde, Vamos a seguir adelante y arrastrar eso. Lo adivinaste. Una página de inicio de sesión centrada dentro de nuestro placeholder aquí. Elimina este. Creo que también podemos subirlo un poco más, así que tenemos algo de espaciamiento del nombre de nuestra empresa por aquí. Hablando del nombre de la empresa, parece que es un relleno negro, así que voy a cambiar eso este gris que tenemos. Puedes seguir adelante e introducir este código hexadecimal y guardarlo también, igual que yo para nuestra muestra de color, pero no hay problema en absoluto si no lo has hecho porque en las siguientes conferencias, estamos va a volver y hablar de color y cómo en realidad podemos acceder fácilmente a los colores a través de nuestros diseños. Ahí lo tenemos, Ese es nuestro logo, y estamos listos para seguir adelante. 46. Crear un esquema de color: O un esquema de color. Hay mucha diversión porque en realidad llegamos a jugar con un montón de colores y ver qué se ve bien y qué se ajusta a nuestra marca. Cuando se trata de diseño de nuestra app. Personalmente me encanta la sección de selección de esquemas de color del curso porque es donde llegamos a ser realmente creativos y configurar algún tipo de branding para la empresa para la que estaba trabajando. En este caso, porque sólo han dado esos un poco como color verde como parte de sus calzoncillos de diseño. En cuanto al esquema de color. Por supuesto, acaba de mencionar, utiliza un esquema de color verde para mostrar la salubridad del producto, etc. Así que por eso vamos a utilizar esta pequeña herramienta en línea llegar a un esquema de color para ellos basados en el color verde que tenemos. Si te diriges a coolers.co, hay tres O's ahí dentro, así que solo asegúrate de escribirlo correctamente. Coolers.com. Este es un gran recurso que puedes utilizar para generar rápidamente esquemas de color para tus proyectos. Una vez que te dirijas por ahí, simplemente se golpea a este Generador de Inicio, y luego te seguirá adelante y te pondrá en este pequeño generador de esquema de color. Y desde aquí simplemente puedes golpear la barra espaciadora de tu teclado para seguir adelante y generar nuevas paletas de colores que se ven bien juntas. Esto también se puede utilizar a lo largo de tu proyecto. Te da el código hexadecimal para cada color en esa paleta. Porque ya tenemos uno de los colores para nuestra app, jabonosa cabeza sobre XD. Me gustó mucho este color verde que estás usando aquí. Entonces si acabo de golpear sobre, uh, uno de los, digamos la pantalla de salpicaduras aquí, haga clic en el relleno. Puedo seguir adelante y en realidad copiar este código hexadecimal desde aquí que cabeza de nuevo a los refrigeradores para uno de los colores por aquí. Veamos el primero por aquí. Podemos seguir adelante y simplemente hacer doble clic para editar este color también, pegando en ese código. Golpeando Enter. Entonces lo que quiero hacer es seguir adelante y click a este pequeño botón de bloqueo aquí es esto significa que este color se mantendrá igual. No cambiará ya que solo presionamos la barra espaciadora. Y entonces lo que la página web que vamos a hacer es tratar de usar este color para llegar a colores o colores similares que se ven bien en combinación con ese color. Ahora si sigues adelante y haces clic en Espacio Después de asegurarte de bloquear este color en el mundo del sitio web generar esquema para ti. Entonces puedes seguir adelante y escoger la que te guste. No quiero nada que sea demasiado diferente. En cualquier momento, si quieres cierto color, puedes seguir adelante y bloquearlo. Y luego en base a ese color, puedes llegar con más colores para tu paleta de colores. Pero sigamos adelante y sigamos presionando Space para ver qué obtenemos. A mí me gusta este esquema de color por aquí. Creo que se ve bastante bien. Es monocromático, que es lo que me gustó para este tipo de paletas por aquí. Entonces, ¿por qué no seguimos adelante y en realidad usamos este esquema de color por aquí. Incluso podemos seguir adelante y guardar esta paleta iniciando sesión y haciendo clic en Guardar. O podemos seguir adelante y exportarlo copiando la URL. Y así ahora tenemos la URL para esa paleta. Entonces si sí quieres enviárselo a alguien más, o si lo haces la búsqueda en nuestro navegador, seguirá adelante y traerá este sitio web. Entonces voy a seguir adelante y darte un minuto aquí para escribir estos códigos hexagonales si quieres, si quieres usar exactamente este esquema de color, siéntete libre de usar los tuyos si quieres. Pero si sí quieres seguir junto con este esquema de color, puedes seguir adelante y usar esta paleta de colores aquí. Tomemos una pausa rápida y volvamos en la próxima conferencia para aplicar nuestra paleta de colores a nuestro proyecto. 47. Aplicar nuestro estilo de color: Duele así ahora que tenemos una paleta de colores que generamos usando Coors o Ko, he ido adelante y en realidad he colocado un pequeño PDF de este esquema de color en los activos de la aplicación móvil mordeduras saludables también. Puedes acceder como PDF y luego seguir adelante y usar estos códigos hex para generar el mismo esquema de color para tu proyecto. Pero de nuevo, como mencioné, puedes sentirte libre de usar tu propio esquema de color también. Entonces lo que vamos a hacer ahora es ir adelante y volver a nuestro XD. Justo a un lado por aquí, aquí arriba. Voy a seguir adelante y crear otra sección en mi pasteboard aquí y llamar a ésta mi esquema de color. Al igual que así. Adelante y solo alinea eso a la izquierda, alinea eso con los componentes. Nos bajamos un poco y luego lo que quiero hacer es seguir adelante y crear, vamos a ver, 12345. Y vamos a crear cinco elipses aquí para generar ese esquema de color para nuestro proyecto. Yo sólo voy a seguir adelante y poner esto por aquí, la elipse. A partir de ahí voy a quitar la frontera. Adelante y solo crea cinco de esos. Perfecto. Uno por uno. Voy a seguir adelante y sólo introducir esos códigos hexagonales en mis puntos suspensivos. Entonces el primero siendo este código hexadecimal para color uno. Tipo de seguir adelante y cambiar el relleno a ese código. Obtenemos ese color. Lo mismo por aquí. Consigue ese color. Sigue leyendo este proceso para todos los colores. Ahí vamos. Ahí vamos. Contamos con nuestro esquema de color en nuestro proyecto. Ahora, por supuesto, podemos seguir adelante y agregar estos colores a nuestras muestras aquí abajo y usarlos a lo largo de nuestro proyecto. Pero una cosa que XD sí nos da es la capacidad de usar estilos de color en nuestra biblioteca. Si te diriges a nuestras bibliotecas, vemos desde aquí arriba tenemos un poco de colores en nuestro panel de activos. De esta forma, si lo hace agrega nuestro esquema de colores a esta sección de colores del XD en nuestras bibliotecas. Podemos utilizarlos fácilmente a lo largo de nuestro proyecto. Y si necesitamos hacer un cambio a nuestro esquema de color, simplemente tenemos que cambiar nuestro esquema de color por aquí y se aplicará a lo largo de nuestro proyecto. Y verás cómo eso es útil en tan solo un segundo. Para poder aplicar este esquema de color, simplemente puedes seguir adelante y seleccionar cada objeto donde tengas ese color y luego seguir adelante y añadirlo a nuestro color así. O puedes seguir adelante y seleccionarlos todos así. Y haga clic en Plus. Ambos trabajan. Y así XD seguiría adelante y generaría esos colores como una paleta de colores por aquí para nosotros, con un título siendo el código hexadecimal. Es ahora si quieres, podemos seguir adelante y renombrar estos colores. Voy a hacer primaria para esta de aquí. Para la segunda aquí, que es de este color, vamos a hacer secundaria. Y éste va a ser tu acento. Y éste va a ser tu accidente. Para hacer X y tres por este. Ahora nuestros colores tienen un nombre también. Entonces ahora que tenemos nuestro esquema de color configurado por aquí en la belleza de esto es que XD irá adelante y verá dónde usas esos colores. Y ya han estado atados a nuestro esquema de colores o a nuestros estilos de color por aquí en XD. Tan solo para darte un ejemplo, si ahora vas adelante y editas este color primario haciendo clic derecho y haciendo clic en Editar. Si sí decidimos seguir adelante y digamos cambiar este color primario por algún tipo de mirado, digamos, digamos morado. Entonces seguirá adelante y se aplicará en todas partes lo largo de nuestro diseño donde estamos usando ese color. Ahora, con eso, podemos cambiar fácilmente nuestro esquema de color sin necesidad de ir a lo largo nuestro diseño y cambiar cada color, cada objeto usando ese color. Y se puede ver lo útil que puede ser. Ahora con eso dicho, voy a seguir adelante y acaba de golpear a Command Z un montón de veces hasta que volvamos a ese color que tenemos. Por supuesto, como usamos estos otros colores a lo largo de nuestro diseño, podemos seguir adelante y ver lo útil que será este esquema de color y conjuntos de colores y nuestras bibliotecas XD. 48. Degradados: Por lo que todos los colores sólidos son divertidos para trabajar y aplicar para nuestro esquema de color. Aún más divertido que eso son los gradientes. Los degradados esencialmente te permitirán combinar múltiples colores para crear algún tipo de malla entre dos colores. Y verás cómo funciona eso en tan solo un segundo. Si vas adelante y duplicas este pequeño círculo aquí usando Comando D y arrastrando una copia hacia abajo. Si vas a un relleno por aquí, claro que podemos seguir adelante y cambiar ese color por aquí a cualquier color sólido como lo hemos estado haciendo a lo largo de nuestro proyecto. Pero si sí quieres crear un gradiente, simplemente podemos dirigirnos hacia esta flecha abajo por aquí. Contamos con múltiples opciones. Podemos o bien hacer un gradiente lineal, que irá adelante y creará un gradiente entre dos colores. Por supuesto, puedes agregar más colores lo largo del gradiente como quieras, pero se mezclará a lo largo de una línea sólida. Se puede hacer un gradientes radiales, que como su nombre indica, es un gradiente que se desvanece sobre un radio. Puedes seguir adelante y editar ese radio y hacerlo más grande o más pequeño, y así sucesivamente. Podemos hacer un gradiente angular, que es menos comúnmente utilizado, pero esencialmente Es un gradiente angulado como el nombre sugiere. Pero lo más común es que queremos un gradiente lineal. Y con un gradiente lineal, incluso podemos seguir adelante y mover esos dos puntos lo largo de nuestro objeto para esos dos colores. Entonces podemos hacer una especie de ángulo como este. Entonces podemos seguir adelante y establecer el color para cada nodo. Entonces si seleccionamos un nodo por aquí, que podemos hacer desde seleccionar este nodo o éste por aquí en nuestro selector de color, podemos seguir adelante y editar ese lado del gradiente. Y luego si vamos al otro lado o al otro nodo, podemos seguir adelante y editar ese también. Y así es como hacemos gradientes a lo largo de nuestro diseño. Por lo que para nuestro primer gradiente, vamos a seguir adelante y aplicar un gradiente a mi pantalla de presentación. ¿ Qué hacemos? El color verde que tenemos por aquí. Por un lado y por el otro, aquí vamos a hacer el color secundario, que he seleccionado como color de muestra por aquí. Si no, puedes seguir adelante y poner ahí ese código hexadecimal 52796 f. Y vamos a seguir adelante y te daremos el mismo gradiente aquí también. Lo voy a dejar en este ángulo de 45 grados que tengo aquí. Ahora con esto seleccionado, puedes seguir adelante y hacer clic en el pequeño icono más por aquí para agregar un color de esta selección. Por lo que ahora XD ha ido adelante y creado ese gradiente para nosotros. Y podemos seguir adelante e incluso renombrarlo gradiente uno en nuestros estilos de color. Ahora si bajamos a nuestra pantalla de presentación y seleccionamos todo el tablero de arte. Dado que este color de fondo se genera a partir del tablero de arte. En lugar de cambiar el relleno aquí para que coincida con ese gradiente, simplemente podemos hacer clic ese gradiente un color en nuestras bibliotecas. Y seguiremos adelante y aplicaremos ese mismo gradiente a nuestra pantalla de presentación. Es así como se usan los gradientes en XD. 49. Configuración de un estilo de personaje: Similar a cómo configuramos ese estilo de color en nuestro XD. Y ahora podemos usarlo a lo largo de nuestro diseño. Podemos hacer lo mismo con la tipografía. Y si recuerdas antes, mencioné que vamos a volver y aplicar la fuente SF Pro en todo nuestro diseño. Y vamos a usar eso como nuestro fondo primario. Normalmente en una aplicación de iOS, utilizamos esta fuente ya que es la más utilizada por Apple o ellos mismos. Si sí quieres ir un poco más creativo e instalar una fuente personalizada, también puedes hacerlo y aplicar esa fuente en su lugar. Pero creo que nos vamos a apegar a usar SF pro a lo largo de este proyecto de diseño de iOS. Si aún no lo has hecho, dirígete a developer.apple.com. Fuentes de barras inclinadas hacia adelante. Adelante e ingresa esa URL y luego deberías ser llevado a esta página donde podrás seguir adelante y descargar SF pro gratis. Ahora si estás en Windows, sí quiero señalar que podría ser un poco más difícil abrir este archivo porque se descarga como archivo DNG, que es el archivo instalador para Mac. Pero si lo haces adelante e instalas y descargas siete zip dirigiéndote a esta URL por aquí, deberías poder usar 7-Zip para descomprimir esta carpeta donde luego accederás los archivos de fuentes Desde donde puedes seguir adelante y abrir esos archivos de fuentes para tenerlos instalados en tu máquina. Ahora tenemos instaladas esas fuentes, una conferencia anterior, así que no voy a pasar por el proceso de instalación, pero te voy a dar un minuto aquí para hacer una pausa e instalar esas fuentes si no lo has hecho. Y luego seguir adelante y seguir junto con lo que el resto de la conferencia. Una vez que sí tienes esas fuentes instaladas, estoy usando este recurso llamado type-scale.com para realmente elegir una habilidad para nuestros tamaños de fuente. Ahora, cuando se trata de una aplicación, ya sea móvil o web, normalmente queremos configurar algún tipo de tipografía con diferentes tamaños de fuente usando algún tipo de escala. que si quieres, digamos usar unas etiquetas de encabezado, podemos usar una de estas fuentes más grandes. Y luego para nuestros textos corporales y subtítulos, podemos usar algún tipo de fuente corporal que sea más pequeña. Y así en este momento, simplemente he ido adelante a este sitio web. Y nuestro tamaño base es 16 píxeles usando una escala de tercera mayor. Por lo que irá adelante y multiplicará cada tamaño de fuente por 1.25 para generar el siguiente tamaño. Por supuesto, puedes seguir adelante y jugar con otros tipos de escalas para tus fuentes, y simplemente se hará más grande o más pequeño dependiendo de cuál selecciones. Pero creo que este tercero mayor, o el cuarto perfecto funciona bien, para el propósito de este curso, vamos a seguir adelante y usar el tercero mayor. Así que siéntete libre de tomar un segundo para calcular esos tamaños de píxel hacia fuera. Entonces una vez que las tengas, mantén esa ventana abierta, podemos usarla ya que configuramos nuestros conjuntos de tipos en XD, dirígete a la propia XD. Cierra esto. En XD. Vamos a seguir adelante y configurar esa tipografía dirigiéndonos hacia aquí a donde tenemos nuestro esquema de color. Vamos a seguir adelante y duplicar este texto de esquema de color por aquí. ¿ Y dónde vamos a montar una tipografía? Perfecto. Y así ahora vamos a seguir adelante y sólo acercar. Y sigamos adelante y creemos un texto y nombremos a éste, cuerpo uno. Para este, quiero que la fuente sea ECIF pro, quiero que sea de 16 píxeles. Para el relleno. Queremos seguir adelante y usar ese código hexadecimal 333 para mi fuente de cuerpo. Entonces voy a seguir adelante y solo colocarlo aquí abajo, duplicarlo una vez más. Y luego le vamos a hacer cuerpo a éste usando mi habilidad. Debe ser de 20 píxeles de tamaño. Subiendo aquí vamos a hacer la cabecera tres. Este debe ser 31.25. Duplica eso una vez más. Haz el encabezado dos, y éste debe ser 39.6, lo siento, 0.06. Will eso podría suceder mientras estás trabajando en esto. Así que ten cuidado. Por último, vamos a hacer la cabecera uno. Este debe ser 48.83. medida que vamos a lo largo de nuestro diseño, probablemente no usaremos tanto el encabezado, pero es bueno tener acceso a estos conjuntos de tipos a lo largo de nuestro diseño. Ahora sólo voy a colocar estos por aquí. Sólo voy a seleccionar todos estos por aquí ahora. Para mi cuerpo uno voy a crear otro duplicado del mismo, pero éste voy a seleccionar medio para mi font-weight y luego llamar a este cuerpo un medio. Entonces voy a seleccionarlos todos juntos y luego hacer clic en el icono más aquí para traducirlos estilo de personaje por aquí en XD. Vamos a seguir adelante y renombrar esos. Por lo que éste debería ser un cuerpo uno. Creo que éste debería ser el cuerpo un medio. Si no estoy confundiendo en ningún momento, puedes pulsar Editar aquí para asegurarte. Parece que lo conseguí al revés. El medio es éste de aquí. Y entonces el 31.25 debería ser. Entonces tenemos el 20 como mi cuerpo al 31 a cinco como nuestro encabezado tres, SF PRO 39 como encabezado a la fuente más grande aquí como encabezado uno. Puedes seguir adelante e incluso reorganizar estos textiles por aquí o incluso agruparlos. Entonces digamos que quiero agrupar todos mis encabezados juntos. Puedo seguir adelante y seleccionarlos todos y crear nuevo grupo De Selección. Y estas van a ser todas mis fuentes de encabezado. Y luego agrupa a estos otros y llámalos mis fuentes de cuerpo. Puedes seguir adelante y reorganizarlos como quieras. Esto es solo para mantener las cosas organizadas en tu proyecto. Al estar haciendo eso, supongo que estropeé mi tipografía por aquí. Por lo que en cualquier momento puedes ir a la fuente que quieras cambiar. Este para ponerlos a los con los que estás trabajando. Entonces voy a seleccionar el encabezado tres, sitio que un tres encabezado dos debería estar en o dos encabezados uno. Ahí vamos. Vale, Ahora, estos son mis conjuntos tipo que vamos a estar usando un diseño más amplio. Siguiente conferencia, vamos a volver y aplicar esos a lo largo de nuestros diseños. 50. Aplicar nuestros estilos de personaje: Es otra que tenemos nuestra configuración de estilo de personaje por aquí. Vamos a seguir adelante y aplicar eso lo largo de nuestros diseños. Voy a empezar por lo más alto aquí. Para nuestras barras de navegación, vamos a dejar tal cual, porque esto es típicamente lo que se utiliza tipografía o estilo de carácter en las barras de navegación. Realmente no vamos a cambiar eso. Vamos a mantener eso como está. Pero para donde más tengamos nuestros propios textos. Vamos a seguir adelante y usar nuestros propios estilos de personajes. Entonces con eso dicho, a partir de la pantalla de inicio, Vamos a hacer clic en mordeduras saludables por aquí y usar nuestro encabezado dos. Por supuesto que lo que pasa es que por defecto, los estilos de personaje sí vienen con ese color o que Phil se les agrega. Por lo que por defecto, XD seguirá adelante y usará el mismo color para esos estilos que configuramos aquí. Pero podemos seguir adelante y hacer cambios a nuestro relleno para los casos específicos aquí. Entonces sigamos adelante y hagamos eso aquí. Así como pasamos por el cambio de fuente. ¿Recuerdas eso? Debido a que las fuentes o diferentes, sus alineaciones podrían cambiar. Entonces, ten cuidado con eso y sigue realineando las cosas a medida que avanzamos en esto. Entonces para el segundo, vamos a hacer cabecera o cabecera h3. Vamos a seguir adelante y de nuevo, alinear las cosas correctamente. Si es necesario. Vamos a seguir adelante y bajar las cosas un poco también. Por supuesto, tenemos los botones aquí, así que vamos a cambiar esos textos en nuestros componentes reales en tan solo un segundo. Pero para estos dos, vamos a seguir adelante y seleccionarlos a ambos y usar nuestro cuerpo un medio para los dos de aquí. Olvidó Contraseña. Voy a seguir adelante y sólo añadir un pequeño signo de interrogación al final de eso. Muévete. Entonces sí quiero hacer este cuerpo un medio más sutil. Entonces, ¿qué hacemos adelante y hacemos clic en Editar en este cuerpo un medio haciendo clic derecho, dando clic en Editar. Y voy a simplemente seguir adelante y en realidad cambiar el color de la fuente a un poco más sutil, tal vez algo alrededor de ese tipo de color gris claro. Puedes introducir este código hexadecimal para generar el mismo color para tu cuerpo, un estilo de carácter medio. Por aquí. Yo sólo voy a seguir adelante y mover esto a lado para dejar espacio para este texto aquí. Volvamos a nuestros componentes y aplicamos nuestra nueva tipografía a lo largo de este botón, vamos a hacer cuerpo uno. Entonces voy a seguir adelante y cambiar el relleno a blanco y también aplicar un medio. O en realidad vamos a hacer un espesor semi audaz aquí. Voy a seguir adelante y guardar ese estilo y llamar a éste mi trasero en mi estilo de texto de botón. Para este placeholder, vamos a seguir adelante y usar el body uno y simplemente llevar el color a más de un color sutil aquí mismo. Para este, vamos a hacer cuerpo uno. no tenemos una fuente para este tamaño. Así que quería cambiar el tamaño de fuente aquí a SF Pro y crear un nuevo estilo de personaje fuera de eso también presionando plus aquí. Este, vamos a ponerle nombre. Estilo de subtítulos. Recuerda a medida que vas a lo largo de tu diseño, puedes crear totalmente tantos estilos de personajes como necesites. Siempre que creas que hay algo único con tus estilos de personaje. Incluso por las 0 calorías y los 1.1 dólares por aquí, vamos a seguir adelante y usar ese textil de subtítulos. Con la diferencia siendo que íbamos a seguir adelante y cambiar estos a un semi audaz en realidad, para este pequeño 0. Y aquí vamos a cambiar esa también. ¿ Qué es lo que quieres? Nuestros componentes están ahora actualizados con nuestra nueva fuente. A lo largo de nuestros componentes de diseñador deben estar usando ese nuevo conjunto de fuentes y nuestros textiles también. Para la verificación telefónica, que es el título de la página, vamos a hacer el encabezado tres. Para este, vamos a hacer cuerpo uno. Se ve bien. Por supuesto, éste de aquí. No hemos hecho de esto un componente que podamos entrar aquí y poner esos dos para el título. Vamos a hacer. Uno por el dólar. Vamos a hacer el textil de subtítulos. Se. Vamos a seguir adelante y cambiarlo a semi audaz. Lo mismo por aquí. Para este, vamos a hacer estilo de texto de subtítulos, semi negrita, y simplemente moverlo hacia arriba. Por este italiano vamos a hacer también lo mismo. Textil de subtítulos y vamos a hacer públicos semi audaces. Bien. Creo que esas son todas las fuentes que tenemos. Por lo que ya hemos configurado todo como la nueva fuente SF Pro. Y conforme vamos a lo largo de nuestro diseño, vamos a aplicar las mismas fuentes a lo largo de nuestros diseños. 51. Página de pedido: Ahora que hemos pasado por algunos de los elementos esenciales de armar nuestro proyecto, entre ellos configurar un esquema de color, organizar nuestros conjuntos de tipos y agregarlos a nuestros estilos de personajes. En XD, creo que estamos listos para seguir adelante con el diseño del resto de nuestros maquetas. Pasando adelante, tenemos la página de pedidos a continuación, así que vamos a estar trabajando en esta conferencia. Entonces, esencialmente, si levanta nuestro alambrón, en nuestro marco para nuestra página de pedidos, sí tenemos un par de cosas incluyendo los artículos que se añadieron o los usuarios agregados a su orden, así como una pequeña sección que podemos incluir para mostrar la dirección a la que se está entregando en caso de que necesiten realizar cambios en su dirección. Entonces tenemos los artículos aquí donde también pueden agregarlos o retirarlos del pedido, así como poca sección aquí abajo para explicar cuál es su subtotal después de impuestos y todo, tal vez tarifas de entrega y todo lo que es con un pequeño botón de Pedido aquí para que completen su pedido usando. Entonces volviendo a nuestro XD, vamos a seguir adelante y hacer un par de cosas. En primer lugar, sigamos adelante y empecemos cambiando este texto de título grande a cuarto completo. Adelante y deshacernos de este título por aquí. Para botón de acción aquí podemos hacer volver al menú. Y veamos ¿ qué más tenemos aquí? Queremos nuestro icono de ubicación. Entonces lo que vamos a hacer es seguir adelante y deshacernos de este ícono plus aquí. Entonces vamos a seguir adelante y añadir nuestras tarjetas de pedido aquí o tarjetas de artículo aquí. Entonces, ¿por qué no vamos adelante y arrastramos. Veré una copia de estos dos. Hagámoslo. Vamos a seleccionar aquí la instancia de pollo parmesano. Entonces voy a seguir adelante y copiar esa pulsando el Comando C, entra en mi página de pedidos y pegando eso ahí dentro. Entonces solo hagamos uno de los postres. A lo mejor, tal vez el pastel de lava se ve bien. Y pega eso en la página de pedidos. Voy a seguir adelante y sólo reorganizar eso. Por lo que llevo eso a la cima. Queremos mantener el espaciado aquí bastante consistente. Por lo que quería hacer 25 píxeles de la barra de navegación. Y de nuevo, estoy usando Alt para ver la diferencia de espaciado entre objetos mantendrá eso también igual que lo que tenemos aquí, que creo que son 15. Tenemos 15 pixeles de cada pedido. Vamos a tener los artículos aquí y luego vamos a seguir adelante y dibujar un pequeño rectángulo aquí al final de esta página. Para este rectángulo, voy a seguir adelante y seleccionar mi acento para colorear. Eso se ve bien. Vamos a crear un pequeño cuadro de texto aquí y escribir salida subtotal fuera de ahí. Y vamos a usar el, Hagamos cuerpo uno. Cuerpo dos se vería bien. Por esto. Vamos a poner el relleno al acento de tres colores. Bueno, voy a seguir adelante y duplicar eso y poner una copia por aquí y a la derecha alinearla también. Perfecto. Y sólo vamos a seguir adelante y sumar estos números. Por lo que $19.99 en 1999. Eso nos debería dar si no estoy engañando al 2998, entonces vamos a seguir adelante y duplicar esto una vez más. Ambos. Y vamos a hacer impuestos. Voy a seguir adelante y en realidad dejé la línea esto también. El semáforo a la izquierda para el impuesto aquí. Yo sólo voy a seguir adelante y hacer esto. Put 499 es con el propósito de completar esta página. Entonces voy a seguir adelante y duplicar esto una vez más. Bajarlo esta vez porque queremos poner el total que vamos a usar. En lugar del cuerpo dos, vamos a hacer un encabezado tres. Vamos a seguir adelante y cambiar de nuevo el relleno para acentuar tres. Y en lugar de etiquetas en total derecho, whoops. Entonces sumar estos arriba nos debe dar 3497. Algo que podrías hacer aquí es que puedes seguir adelante y agrupar totalmente. Estos objetos son líneas de textos juntos usando Command G y luego puede usar pilas. De esta manera. Primero podemos seguir adelante y establecer un espaciado igual de, digamos 20 píxeles. De esta forma, si quieres dejar decir, duplicar este grupo y crear otra línea, podemos hacerlo fácilmente. Puede crear tantas líneas como sea posible para que incluso podamos agregar, digamos tarifas de entrega. Digamos 299. No seguí adelante y actualizé esto. Como nos plazca. Ahí vamos. Eso es correcto. Entonces sigamos adelante y completemos esta página agregando una o la ubicación de entrega o la dirección y una opción para cambiar eso, así como un pequeño botón de Pedido en la parte inferior. Entonces empecemos con el botón Orden, ya que ya tenemos abierta nuestra biblioteca y podemos arrastrar un botón aquí. Coloca aquí nuestro botón. Déjame asegurarme de que tenemos un espaciado consistente. Por lo que queremos 35 píxeles de abajo. Entonces vamos a seguir adelante y cambiar esto para pedir por favor. Ahí vamos. Y entonces lo que quiero es otra versión de este botón con otro color, potencialmente tal vez nuestro color de acento. Entonces lo que tengo en mente es que dentro de ese botón podemos hacer que vean su dirección de entrega. Entonces voy a hacer una pausa rápida aquí y vamos a volver en la próxima conferencia. Vamos a crear otra variación de ese componente para este botón con un color diferente. Y usan esa para agregar nuestra ubicación de entrega en esta página también. Hagámoslo juntos en la próxima conferencia. 52. Variación Component: Está bien, Así que como se prometió, vamos a completar nuestra página de pedidos y esta conferencia. Pero antes de hacer eso, vamos a seguir adelante y aprender sobre la creación diferentes estados de componentes como prometí en las conferencias anteriores. Pasemos a nuestra sección de componentes de nuestros diseños. Aquí mismo tenemos nuestro botón, por supuesto, que lo creamos y lo convertimos en un componente para que podamos reutilizarlo fácilmente a lo largo de nuestros diseños. En esta conferencia, quiero hacer una versión ligera de este botón y usar ese color de acento para mi botón aquí. Entonces lo que realmente no hemos explorado es este pequeño icono más aquí donde realmente podemos crear diferentes estados para nuestro botón aquí. Si haces clic en Plus, realidad nos da un par de opciones como el nuevo estado, que es lo que quisiéramos que se llamara a nuestro estado. El estado hover común y el estado de alternancia para botones así en ese XD automáticamente nos sugieren. Pero no vamos a crear estos por ahora. Vamos a hacer un nuevo estado. Vamos a llamar a esta versión lite estatal. Esta será la versión ligera de nuestro botón. Para poder editar este estado ahora, sólo tenemos que asegurarnos de que lo tenemos seleccionado en el lado derecho del panel por aquí. Si seleccionamos el estado por defecto, ahora mismo estamos haciendo ediciones a nuestro estado por defecto. Pero si seleccionamos esta versión ligera, repente se está editando mi componente, pero que la versión ligera solamente y no el estado por defecto. Por lo que bajo esta versión ligera, podemos seguir adelante y hacer doble clic en nuestro botón, volver a seleccionar el rectángulo, asegurarnos de tener seleccionado el rectángulo y no todo el componente de botón. Y luego seguir adelante y dar click en X y tres para que nuestro fondo de botón sea que actúe en tres colores. Entonces para el color del botón en sí, quiero seguir adelante y hacer acento también. Ahí vamos. Ahora hemos creado una versión ligera de nuestro botón, que tiene este color. Y en cualquier momento podemos ir a comprar hacia el estado por defecto y terminó ese estado. Es más creativo y más estados como el hover y toggle state también. Pero por ahora, hemos creado dos versiones o estados diferentes de ese componente, no queremos usar esa otra versión. Podemos ir a cualquiera de nuestros botones y seguir adelante y cambiarlo a la versión ligera en su lugar. Y luego seguir adelante y hacer esos cambios a ese botón. Aquí lo que quiero hacer es ahora seguir adelante y encontrar mi botón desde aquí. Arrastra otro aquí a mi página de pedidos. Pero en lugar del estado por defecto, quiero que sea la versión ligera. En realidad pensándolo bien, quiero crear otra versión a partir de mi versión de vida que tenga el texto alineado al lado izquierdo. ¿ Por qué no volvemos a subir a aquí? Acude a nuestra versión ligera y a partir de nuestra versión ligera podemos crear otra versión u otro estado. Y vamos a llamar a esta versión ligera texto a la izquierda, así como a. Ahora en esta versión voy a seguir adelante y en realidad alinear o traer mi texto aquí al lado izquierdo. Pero 25 píxeles del lado izquierdo. Si bien estamos aquí, sigamos adelante y seleccionemos Texto Alinear a la izquierda, luego seguir adelante y salir. Entonces ahora tenemos tres versiones. Estado por defecto, una versión ligera y luego una versión ligera con el texto alineado al lado izquierdo. Al igual que así. Perfecto. Entonces ahora si vuelvo a aquí, esta instancia en nuestra página de pedidos, quería hacer textos a la izquierda y luego seguir adelante e ingresar algún tipo de dirección ficticia, algo así. Por lo que saben a dónde va la entrega y pueden tocar ese botón para cambiar su dirección, lo que nos llevará a esa página de ubicación aquí arriba que vamos a diseñar en las futuras conferencias. Con eso, creo que eso completa nuestra página de pedidos. Entonces volvamos en la próxima conferencia para trabajar en nuestro orden Página Progreso. 53. Página de progreso de la orden: De acuerdo, entonces es hora de seguir adelante con nuestro pedido Página de Progreso. Entonces no califiquen el trabajo con las páginas que armamos. Para mi pedido Página Progreso. Voy a volver rápidamente a nuestra alambrada. Basta con ver lo que tenemos en nuestros bocetos. En la página de progreso, tenemos un poco, por supuesto textos de progreso con un poco tipo de escala mostrando desde el momento en que hacen el pedido Para entregar, uh, donde están actualmente. Estoy pensando quizá un pequeño texto para mostrar el estado actual de la orden y la pequeña marca aquí que podemos crear con una línea y un círculo. Entonces aquí abajo solo queremos poner la dirección de entrega una vez más y tal vez decir entregar dos. Y entonces queremos darles la opción de cambiar su orden llamado el castillo restaurante el orden y tal. Y estoy pensando que podemos poner estos en una pequeña hoja de acción que iOS nos da. Y eso se va a dar como ejercicio al final de esta conferencia. Pero antes de que saltemos ahí, Sigamos adelante y diseñemos las otras piezas. Además, voy a darle a esta página un poco más de espacio en blanco después de lo que esbozé aquí, porque después quiero volver y como estamos trabajando en prototipado, y tal vez vamos a añadir un poco de animación cool para mostrar que el orden se está preparando o algo así. Lo he visto en otras apps de entrega y creo que se ve genial. Por lo que podemos hacer totalmente un poco de animación aquí para que el usuario vea en qué estado sus órdenes. En primer lugar, empecemos con la barra de navegación. Vamos a seguir adelante y quitar este pequeño título de aquí, el ícono más también, y cambiar esto a progreso trimestral. Para este botón de acción, vamos a seguir adelante y vamos a hacer Ver orden. Entonces lo que queremos hacer es ir adelante y poner el fondo de esta página para acentuar también. Por lo que acabo de seleccionar toda la mesa y luego seleccioné accidente tomó para dar todo el fondo este color. Ahora vamos a seguir adelante y usar una línea para crear una línea recta a través aquí y darle un borde de cinco píxeles alrededor de las tapas. Y vamos a seguir adelante y cambiar este color de borde nuestro color secundario, que tiene este código hexadecimal. No podemos, porque esta es línea y las líneas tienen un borde y estos estilos de color son solo rellenos. No podemos usarlos, pero podemos seguir adelante y decirle a los cierres sobre ellos y tomar el código hexadecimal y usar eso como nuestro color de borde en su lugar. Ahora si esto fuera un rectángulo y tuviéramos un relleno, podríamos usar totalmente nuestros atajos de color por aquí. Y por eso lo estoy introduciendo manualmente aquí. Pero de nuevo, también puedes usar tus muestras de color para enfriar. Y luego voy a hacer un poco de elipse con E sobre esto grande. Yo solo voy a usar mi trackpad para centrar eso aquí para este porque tiene un relleno, podemos hacer un color primario, que podamos mostrar dónde están sus puestos de orden. Vamos a seguir adelante y crear un pequeño cuadro de texto aquí y escribir tu pedido está siendo preparado por el restaurante. Quieres seguir adelante y darle a este cuerpo un medio y usar x y tres para el color. Sustitúyalo en la parte superior de la báscula y en la inferior. Vamos a duplicar esto y escribir, por favor. Y otra copia por aquí. derecha alinearlo y alinearlo aquí y orden correcto o en realidad secado entregado. Para que sepan dónde están parados. Vamos a seguir adelante y copiar este botón o esta instancia de ese botón en nuestra página de Progreso de pedidos. Lo voy a dejar como está, y luego voy a seguir adelante y hacer la T Heat y orden correcta se está entregando para salir de ahí y sólo traer eso aquí. Perfecto. Veamos qué más tenemos. Vamos a hacer un pequeño botón para que editen su orden desde aquí. Cuando sigamos adelante y copiamos este botón también aquí. Y en lugar de hacer orden, vamos a cambiar eso para editar orden. Perfecto. Entonces otra vez, vamos a dejar el medio vacío aquí para un poco de animación que vamos a armar más adelante. Pero por ahora, te voy a hacer un poco de ejercicio. Si aún tienes abierto este documento o lo tienes en tu XD, adelante y ábrelo. contrario, puedes acceder a ella desde developer.apple.com recursos de slash design y luego seguir adelante y descargar la versión XD. Y luego abre eso en XD. Y una vez que lo tengas abierto, debería volver a verse así, donde arrastramos la barra de navegación. Y así a partir de esto te voy a dar un ejercicio para arrastrar la barra de estado a todos tus tableros de arte. En la parte superior, quiero que lo hagas, que coloques esto en la parte superior de tus tablas de arte donde se aplique. Y además, sigamos adelante y encontremos la hoja de acción. Ahí vamos. Está bajo vistas, vistas de un componente de interfaz de usuario. Entonces esto es un tramposo de acción. Se puede seguir totalmente adelante y usar este. Entonces una vez que lo presionan ordene aquí en nuestro diseño que podría aparecer y mostrarles las diferentes opciones que tienen. cual volver a nuestras maquetas, podría incluir editar el pedido en sí o llamar al restaurante o cancelar ese pedido. Por lo que como ejercicio, quiero que uses esta hoja de acción para encubrir esas opciones en el diseño ahí, puedes sentirte libre de seguir adelante y duplicar esta mesa de trabajo y luego colocar esa hoja de acción en top. O puedes simplemente diseñar por separado la hoja de acción o traer la hoja de acción aquí en el costado de nuestro tablero de arte y colocarla por ahí. Si no creo que la segunda opción sea más fácil porque realmente no necesitas duplicar toda esta página. Dejaré eso como ejercicio además poner la barra de estado en todos los tableros de arte. Y luego la próxima conferencia vamos a volver y hacer eso juntos. 54. Solución de ejercicios: Ojalá tuvieras la oportunidad de echar un vistazo a esos dos pequeños ejercicios que te di. Si no, no te preocupes por ello. Eso vamos a hacer juntos en esta conferencia, empezando por la barra de estado en todos nuestros tableros de arte. Y luego volver aquí y usar una hoja de acciones que una vez que el usuario hace clic en Editar orden, les da algunas opciones. Lo primero es lo primero, volvamos a nuestro kit de interfaz de usuario de Apple. Porque tenemos mayormente un fondo claro a través de nuestras barras de navegación. Vamos a usar la barra de estado aquí en lugar del punto oscuro por aquí. Entonces sigamos adelante y simplemente copiemos la barra de estado desde aquí. Vuelve aquí, y sólo voy a seguir adelante y pegarlo con nuestros otros activos de Apple aquí para que tengamos nuestra instancia aquí. Entonces vamos a seguir adelante y simplemente copiar eso a nuestra, todas nuestras páginas. No necesariamente lo necesitamos en nuestra pantalla de inicio, pero sí lo queremos en nuestra página de inicio de sesión. Adelante y haga clic en Página de inicio de sesión. Pega eso ahí dentro. Usando Command V. Voy a seguir adelante y solo usar turno y las flechas arriba un montón de veces hasta que esté totalmente en la parte superior ahí. Perfecto. Vamos a volver y añadir un poco de efecto de desenfoque fresco a eso en un rato. Es un muro. Estamos en nuestra página de inicio de sesión. Lo que voy a hacer es ir adelante y seleccionar la barra de estado. Pero esta vez, asegúrate de que solo seleccionas la barra de estado aquí que este grupo aquí sin la capa BG por aquí, que es el fondo. Así que asegúrate de solo copiar la barra de estado. Y luego seguir adelante y seleccionar la verificación telefónica, mantener pulsada Mayús, seleccionar el menú principal mientras mantiene pulsado turno, ordenar ligeramente y ordenar páginas de progreso para seguir adelante y hacer clic en Comando V. Todo a través es lo haré adelante y pega nuestra barra de estado a través de nuestras páginas, todo en la misma ubicación que tenemos aquí. Lo único que quiero hacer aquí en la verificación extranjera es simplemente traer o cambiar todo hacia abajo en 20 píxeles. Ya hay suficiente espacio. Podemos incluso hacer 30. Creo que eso se ve mejor. Cuantos más espacios en blanco tengas entre cosas que mejor. No quieres meter tu diseño en una pantalla pequeña, como una pantalla de iPhone. Entonces vamos a hacer lo mismo. Vamos a seguir adelante y copiar la barra de estado. Vamos a hacer lo mismo. Adelante y hazlo una vez más copiando a todo este grupo de barras de estado a nuestras páginas de ubicación de pago de perfil o historial también. Ahora, todos nuestros cuadros tienen esa barra de estado en ellos, que es lo que buscamos. Ahora estamos listos para pasar a nuestra hoja de acción por aquí. Y así para eso, vamos a volver a cambiar aquí e ir a nuestra hoja de acción que debería estar aquí abajo. Ahí vamos. Voy a copiar toda la hoja de acción por aquí. Asegúrate de seleccionar este grupo. Adelante y cópiala a tu diseño aquí. Yo lo voy a pegar aquí en el pasteboard a un costado. Y luego vamos a seguir adelante y editar el título para editar orden. En esta pequeña descripción solo vamos a escribir hacer cambios orden para esta primera acción. Vamos a hacer orden de edición. Para la segunda acción vamos a hacer orden de cancelación. Y para este tercero vamos a hacer contacto restaurante. Perfecto. Es ahora si hacen clic en este orden Editar, abrirá esta alerta o hoja de acciones sobre la que no tenemos que preocuparnos ahora mismo. Pero cuando estamos prototipando, verás por qué esto es útil. Ese es el ejercicio. Vamos a hacer una pausa rápida aquí antes de volver y seguir con nuestros diseños. 55. Añadir desenfoque: Muy bien, Así que hasta ahora hemos hecho un gran trabajo. Estamos casi terminados con nuestra maqueta aquí. Tenemos un par de páginas más aquí para diseñar. Y entonces estamos bien para ir en cuanto a nuestras maquetas móviles. Seguidamente avanzamos exportándolo y compartiéndolo con nuestros compañeros y miembros del equipo. Ahora antes de pasar a completar estas páginas, quería mostrarles algunos de los efectos que XD tiene para ofrecer y cómo funcionan en objetos e imágenes y así sucesivamente. Para ello, la página de inicio de sesión, quiero seguir adelante y simplemente acercar. Justo ahí. Tenemos esta pequeña barra de estado aquí, por supuesto, que armamos en las conferencias anteriores. Esta barra de estado en esta página viene con el fondo por aquí, que es lo que queremos porque aquí hay esta imagen. Y si no tuviera este trasfondo, como que interferiría o este reloj de aquí interferiría con esta imagen. Entonces no queremos eso, y por eso queremos aquí este fondo. Ahora uno de los efectos geniales que puedes aplicar en una página como esta o una barra de estado como esta es aplicar lo que se llama un desenfoque de fondo. Xc tiene dos tipos diferentes de desenfoque que ofrece. Uno de ellos siendo desenfoque de fondo, el otro siendo objeto desenfoque. Y los vamos a explorar a ambos en esta conferencia aquí. El primero que quería explorar como un desenfoque de fondo, que se aplica a la barra de estado. Entonces sigamos adelante y seleccionemos la barra de estado. Y en lugar de seleccionar todo, Vamos a hacer doble clic para seleccionar sólo el BG o la capa de fondo por aquí. Asegúrate de que en tu panel Capas solo tengas seleccionada esa capa de fondo. Una vez que tengas seleccionada esa capa de BG, entonces sigo adelante y habilito el desenfoque de fondo. Ahora si aquí mismo es esta periferia de objetos, vas adelante y lo cambias a desenfoque de fondo en su lugar, luego seguir adelante y habilitarlo. Aquí hay tres propiedades que podemos editar. El primero es lo fuerte o desenfoque que es. Cuanto mayor sea el número que pongamos aquí, más desenfoque se aplicará. momento, no estamos viendo mucho por que la transparencia de esta capa de fondo está al 100% ya que la hacemos menos transparente, verás que el desenfoque se aplicará en lo que se verá así. Entonces para hacer eso, voy a seguir adelante y bajar la transparencia de esto. Entonces ahora si miras la parte superior, puedes ver un poco el desenfoque. Ahora mismo, mi fondo ya ni siquiera tiene un color, es sólo un desenfoque. Y si lo selecciono de nuevo y bajo el desenfoque, puedes ver que se vuelve cada vez menos borroso. Y si lo hago más alto, se pondrá cada vez más borrosa. Entonces lo que esto está haciendo esencialmente es tomar esa capa de fondo y hacer cualquier cosa debajo de ella y agregar un desenfoque a cualquier cosa debajo de ella. Y eso es lo que hace el desenfoque de fondo. Ahora esta opción por aquí, si voy adelante y la bajaré y haremos que esta capa de fondo sea más oscura y viceversa. Si voy por el otro lado, seguirá adelante y lo hará cada vez más ligero. Pero es una especie de lo que queremos en este caso, que creemos suficiente contraste para que el usuario pueda ver la barra de estado. Entonces, ¿por qué no ponemos esto a los 25 con un desenfoque de fondo en sí estando a los 15, creo que se vería bien. Ahora si lo miras desde el poco más alejado, verás que se ve bastante bien. Antes de seguir adelante, también quiero mostrarles cómo funciona el desenfoque de objetos. Entonces si selecciono este logotipo por aquí, si seguimos adelante y en lugar de desenfoque de fondo, seleccionamos el desenfoque de objeto, y seguimos adelante y habilitamos eso aquí mismo. Lo que sucederá es que XD seguirá adelante y difuminará sólo esa capa en sí. Entonces no estamos difuminando nada debajo de eso. Estamos difuminando el logotipo en sí. Por supuesto, con esto, puedes crear algunos efectos geniales si realmente te gusta. Justo como ejemplo, podrías hacer algo como esto donde creas tal vez un tipo de fondo para el logo y tal vez lo hagas un poco más grande. Y luego adelante y por ejemplo, duplicado y éste, puedes quitar el desenfoque y hacerlo un poco más pequeño. Puedo ponerme realmente creativo y crear cosas así con un desenfoque de objetos. E incluso puedes seguir adelante y hacerlo menos visible. Por lo que no es totalmente transparente. Algo así como papá podría parecer genial. Pero de nuevo, eso depende realmente de ti y de lo creativo que quieres llegar con tus difuminaciones. Y yo sólo voy a seguir adelante y sólo mandar a Z para deshacer eso. Un montón de veces realmente no quiero eso. Solo quieren mostrarte lo que el desenfoque de objetos tiene para ofrecer. Ese efecto que creamos para el logo parece una sombra. Entonces lo que vamos a hacer en la próxima conferencia es volver y aprender cómo realmente podemos crear sombras para objetos en XD. 56. Agrega sombras: Otro efecto realmente útil y práctico que puedes añadir a tus diseños para pulir realmente las cosas se llama sombras. Ahora por supuesto, puedes aplicar sombras a cualquier objeto que quieras. Y el propósito de la sombra es realmente separar tu primer plano, que es las partes principales de tu interfaz, como botones, texto, campos, etcétera del resto de la página, del fondo. ¿ Algo más detrás de esos objetos? Ahora una cosa que quieres hacer, sobre todo si eres un diseñador principiante, es ser más sutil con las sombras. Me di cuenta de muchos diseñadores entonces para hacer las sombras un poco demasiado fuertes. Entonces el propósito de la sombra no es crear un efecto realmente fuerte en el objeto. De hecho, estamos tratando de ser lo más sutil posible mientras nos aseguramos de que el servicio de sombras sea su propósito y también hace que nuestro diseño se vea más pulido. Y verás cómo se ve eso en tan solo un segundo. Voy a seguir adelante y como ejemplo, aplicar aquí una sombra a mi botón. Ahora por supuesto, debido a que nuestro botón es una instancia aquí de esos componentes, en realidad podemos ir al componente simplemente haciendo clic aquí y haciendo clic en Editar componentes principales. Por lo que sólo nos lleva hasta ese componente donde lo tenemos. Entonces este es nuestro MainComponent. Y la belleza de los componentes es que podemos seguir adelante y agregarles sombras y se aplicará a lo largo de nuestros diseños. Así que como ejemplo, voy a seguir adelante y agregar sombras a este botón aquí haciendo doble clic y seleccionando la capa de fondo o esta capa de rectángulo. Cuando se trata de las sombras, tenemos dos opciones. Podemos hacer una sombra interior, por lo que esta será una sombra dentro del botón. Ahora esto se usa típicamente cuando estás tratando de crear un tipo de botón 3D o quieres crear tal vez un estado táctil. Así que cuando un usuario toca el botón, seguirá adelante y mostrará esta sombra interior que típicamente vemos en las sombras, más en el diseño del juego en lugar del diseño de la interfaz de usuario de la aplicación. Pero por supuesto, esto depende realmente de ti como diseñador. Pero de nuevo, podría haber hecho es ir sutil con él. Pasaremos por lo que las sombras tienen para ofrecer. Sombra esencialmente tiene una posición x e y. Entonces la exposición es donde cae esa sombra en relación a ese rectángulo. Si cambiamos esto a, digamos que 20 o sombra moverá 20 píxeles hacia la derecha. Y si lo hacemos, digamos lo mismo para la y. verás que nuestra sombra mueve por completo 20 píxeles hacia la derecha y 20 píxeles hacia abajo como efecto. Y esto de aquí mismo, similar a los efectos de desenfoque, es lo borrosa que es nuestra sombra. Si cambiamos esto a 20 o sombra se vuelve más mezclada a. sí. Y si hubiera dicho esto a 0, será muy duro y solo un tipo de cosa en línea recta. Nuevamente, sombras internas, no tanto lo que estamos buscando, pero estamos buscando una sombra paralela, que se usa más típicamente en el diseño de la interfaz de usuario. Entonces si se habilita sombra paralela, seguirá adelante y creará una sombra fuera de ese rectángulo aquí, que es lo que estamos buscando. Xd se establecerá por defecto en 0, x, tres píxeles para el y y seis píxeles para el desenfoque en sí. Pero puede jugar con estos números. Entonces solo para ver cómo sería esto en sí mismo, puedes volver a tus diseños. Ya podemos ver como que se verá esa sombra. Creo que lo que me gustaría hacer es crear un desenfoque más grande alrededor esa sombra y tal vez bajarla unos cuantos píxeles más. Solo para aplicar esos efectos, vamos a seguir adelante y hacer doble clic en él, seleccionar el rectángulo, cambiar este blanco y tal vez un seis, y cambiar este desenfoque a tal vez a los 15. Probemos eso y veamos qué pasa. Eso se ve un poco mejor. Vuelve aquí arriba. Una cosa que sí quiero señalar es que en realidad puedes seguir adelante y cambiar el color de la sombra haciendo clic en este icono del selector de color por aquí. Por supuesto, puedes aplicar un color a tus sombras. Podemos hacer una sombra roja o podemos hacer esa sombra verde. Pero típicamente querrías ir con una sombra negra. Eso es de uso más común. Y quieres volver a ir, muy sutil con ella. No quieres una sombra fuerte donde el OPCD esté demasiado alto. Quieres algo donde la opacidad esté quizá en cualquier lugar entre cinco a, voy a decir tal vez del 20 al 30%. Pero esto por supuesto varía con lo que tienes pasando en el resto de tu página. Me gusta usar el 10% aquí o en realidad incluso los lípidos más bajos, tal vez 8% porque quiero que sea muy sutil. Pero como se puede ver, sigue siendo un muestra ese efecto. Aún es, todavía se puede ver el efecto de esa sombra aquí. Podemos hacer lo mismo con nuestro TextField aquí. Para que podamos ir y seleccionar los campos de texto de fondo a una sombra paralela y hacer los mismos cinco píxeles, 15 píxeles, y establecer la opacidad en 8%. Ahora si voy aquí, verás que mis campos también tienen sombra ahora también. Pero como se puede ver, es un poco fuerte robado de mí. Entonces lo que voy a hacer es volver aquí, seleccionar esto y ajustar esto un poco. Por lo que quiero realmente bajar un poco el desenfoque y cambiar la opacidad a la baja, hagamos 4%. Creo que eso se ve un poco mejor, más sutil. No queremos que realmente tipo de salir de la página demasiado. Queremos que sea sutil. Y así creo que eso se ve bastante bien. Algunas otras cosas a las que podemos aplicar sombras en nuestro diseño incluye estas tarjetas aquí. Así que típicamente vemos diseños de tarjetas o tarjetas UIs tienen alguna sombra sutil, solo un poco separada del resto de la página. Lo que haré es dejarlo como ejercicio para que hagas. Adelante y agrega una sombra a nuestra tarjeta de aquí y la cancha de aquí y asegúrate de que ésta es un componente para aplicarla al componente principal. Y de nuevo, manténgalo sutil. Hacer una sombra paralela con una opacidad del 8%. Y puedes dejar el XY como es 03, y luego puedes seguir adelante y aplicar un desenfoque de diez píxeles. Entonces te dejaré eso y luego lo haremos juntos en la próxima conferencia. 57. Ejercicio de sombra: Por eso espero que hayas podido aplicar esa sombra para nuestras cartas aquí. Vamos a hacer eso juntos en la próxima conferencia si no lo has hecho. Entonces no se preocupe en absoluto. Los efectos que queremos agregar en cuanto a estas tarjetas UI está por aquí, éste en la página del restaurante y los de nuestra página de menú. Ahora la belleza de ambos es que porque aquí estamos usando la rejilla de repetición, solo necesitamos aplicarla a ésta. Y se aplicará a todas las demás UIs duras. Y luego de igual manera aquí, porque estamos utilizando instancias de un componente, solo necesitamos aplicarlo de una vez y se aplica a lo largo del resto de nuestros diseños. Y así esta es otra razón por los componentes y las rejillas de repetición son tan útiles porque realmente reduce el trabajo de necesitar seguir repitiendo el mismo patrón, contestar la misma sombra una y otra vez y otra vez. Empecemos con la página del restaurante. Acerca aquí, selecciona nuestra tarjeta. Lo que quieres hacer es volver a seleccionar la capa de fondo, y luego haremos una sombra paralela. Guarde la x e y a menos que sea. Haremos clic en la ciudad policial, bajándola al 8%. Creo que se ve sutil y limpio. Y luego haremos diez por el borroso. Genial, creo que eso se ve bastante bien. Ahora por supuesto que puedes jugar por ahí. No hay bien ni mal en cuanto qué números te sientas aquí mientras se vea bien. Si quieres añadir más desenfoque, definitivamente puedes seguir adelante y hacer eso. O si quieres hacerlo más visible, tu sombra, lo hace totalmente mientras lo guardes. Bastante sutil. Entonces yendo a esta interfaz de usuario de tarjeta, volvamos a nuestra página de componentes y simplemente aplicarlo aquí. Es más fácil de esa manera seleccionar esa capa de fondo. Y solo estoy haciendo doble clic para entrar en ese componente a ese MainComponent, seleccione aquí mi capa de rectángulo, la que está cubriendo todo el componente. Y luego vamos a hacer una sombra paralela. Y lo mismo. Diez píxeles para el desenfoque y 8% para mi opacidad. Veo que se ve bastante bien, también, bastante limpio, Muy bonito. Ahora puedes ver que estamos agregando esos detalles sutiles que realmente hacen que nuestro diseño destaque y luzca genial y hecho profesionalmente. Esto es muy clave cuando se trata de armar maquetas que los clientes lago. Así que como se puede ver, realmente empezando a pulir nuestros diseños, empezando a lucir realmente bien ahora, realmente como lo que hemos hecho hasta ahora. Entonces cuando volvamos en la siguiente conferencia y continuamos trabajando en nuestra página de menú de slash de perfil. 58. Página de perfil: De acuerdo, por fin estamos listos para empezar con nuestro próximo diseño, que es nuestra página de perfil. Para una página de perfil, si acabo de sacar nuestros wireframes que armamos, vemos que queremos tener básicamente un fondo simple y luego esencialmente tener una imagen del usuario aquí con el nombre y apellido, pequeño X. Para cerrar aquí la ventana o cerrar el menú o el perfil. Unos botones para que pasen por diferentes páginas. Desde la página Count hasta el historial de órdenes de pago, actualizando su vestido, y finalmente a la ley Yacc desde la app. Por lo que queremos seguir adelante y armar una foto de perfil, un pequeño cuadro de texto aquí, poco icono de cerca aquí, y luego el resto de los botones aquí, los vamos a colocar. Y sé que en mi wireframe aquí no hemos puesto ningún ícono en el lado izquierdo aquí para estas opciones. Pero lo que sí quiero hacer es seguir adelante y en realidad agregarles algunos iconos a medida que estamos diseñando esta página. Volvamos a XD y configuramos eso aquí en nuestra página de perfil. Ya tenerlo listo para ir con nuestra página de perfil seleccionada o el propio tablero de arte. Voy a seguir adelante y abrir nuestras bibliotecas y luego seguir adelante y seleccionar el axón un color para el fondo. En este momento, poco tema que tenemos es que nuestra barra de estado ahora es la versión oscura. Y así queremos realmente la versión ligera como un pequeño consejo aquí. Por supuesto, podemos volver a nuestros archivos de apple y tirar esa versión blanca o la versión ligera de esa barra de estado. Pero hay una manera fácil de moverse por eso. Y eso es para seleccionar nuestra barra de estado aquí. Y sólo voy a cambiar por panel de dos capas y asegurarme de que lo tengo seleccionado. Y luego adelante y solo dale un relleno blanco que hará lo mismo aquí. Eso se ve mucho mejor. Queremos un pequeño icono de X cerrar por aquí es vamos a diseñar eso mediante la creación de dos líneas. Así que sólo voy a seguir adelante y acercar a esta área aquí. Simplemente crea dos líneas. Voy a hacerles 35 píxeles de ancho. Y voy a seguir adelante y cambiar el color del borde a cuatro pixeles y hacer una gorra redondeada y un color que es blanco. Voy a seguir adelante y duplicar eso al golpear el comando D. Para uno de ellos, vamos a establecer un ángulo de 45 grados. Y para el otro, vamos a hacer un ángulo negativo de 45 grados. Eso va a seguir adelante y crear una especie de este icono de x buscando, supongo, para nuestro botón cerrar. Y voy a seleccionar a ambos juntos. Y tal vez más tarde queremos usar esto en otro lugar. Vamos a seguir adelante y crear un componente de esto al golpear Comando K. Entonces este es el componente principal y solo vamos a seguir adelante y arrastrar éste, ya que es un componente medio aquí a mis componentes . Ponlo aquí por ahora. Entonces voy a seguir adelante y volver a nuestra página de perfil y desde nuestras bibliotecas, sigamos adelante y arrastremos esta por aquí. No tenemos nombre para ello. Vamos a seguir adelante y renombrarlo. Botón Cerrar. Sólo para que esté un poco más organizado aquí. Voy a colocar eso aproximadamente en algún lugar por aquí. No queremos ser no queremos que esté demasiado cerca de la cima y tampoco queremos ser demasiado bajos. Eso es eso. Ahora necesitamos una pequeña elipse. Entonces vamos a hacer E en nuestro teclado y arrastrar una pequeña elipse aquí para nuestra foto de perfil. Y luego vamos a golpear la tecla T en nuestro teclado y crear un pequeño cuadro de texto aquí, justo primero y último aquí. Por ahora vamos a, no vamos a poner ningún dato de muestra volverá más tarde para hacer eso. Pero por ahora solo estoy creando los campos que necesitamos. Y voy a crear éste, dejar un espaciado de 20 pixeles. Creo que mi ícono de perfil es un poco demasiado grande, así que voy a seguir adelante y simplemente encogerlo hasta 80 píxeles de ancho y alto. Adelante y alinearlo a la mitad de eso. Ahí vamos. Para mi fuente aquí voy a seguir adelante y seleccionar. Volvamos a nuestros conjuntos de tipos. Seleccionemos el encabezado h3. Cabecera tres, se ve bien. Y voy a cambiar el relleno a blanco. Vamos a seguir adelante y crear. Veamos cuántos botones necesitamos? 12345. Vamos a seguir adelante y crear cinco botones o incidencias, nuestros botones aquí y luego bienvenidos de nuevo En la próxima conferencia. Para completar esta página. Vamos a seleccionar nuestro botón que tenemos aquí. Adelante y encontremos el botón que se lleva a cabo aquí. Vamos a seguir adelante y centrar eso a lo largo de nuestra página. Y voy a seguir adelante y en realidad traer estos para que coincidan con el mismo tipo de píxeles del lado izquierdo aquí. Y voy a seguir adelante y duplicar eso un montón de veces y usar Shift y las teclas de flecha abajo para bajarlas. Entonces necesitamos cinco botones aquí, 12345. Y luego voy a seguir adelante y sólo seleccionarlos todos y llevarlos un poco abajo. Voy a agruparlos juntos para poder usar pilas. Así que sigamos adelante y habilitemos pilas solo para que podamos establecer fácilmente el espaciado entre ellas. Por lo que quiero establecer un espaciado de, creo que 15 píxeles se veían bien. Y por supuesto queremos que sea vertical y no horizontal. Vamos a seguir adelante y hacer eso y dejarlo como está. Creo que eso se ve bien por ahora. Entonces vamos a volver en la siguiente conferencia para asignar estos botones, título, y crear una versión diferente que tenga un ícono también. 59. Añadir iconos: Es hora de agregar algunos iconos a nuestros botones y luego seguir adelante y envolver o una página de perfil. Personalmente me encanta usar este sitio web llamado flat icon.com te permite acceder a millones de iconos vectoriales y stickers que puedes usar de forma gratuita. Siempre y cuando le des la correcta atribución a los autores o a los creadores de esos íconos. Y es genial porque puedes buscar cosas. Digamos que estás trabajando en un ícono de perfil. Puedes buscar perfil y serás golpeado con toneladas de iconos de perfil y vectores y así sucesivamente. Pueden descargarlo fácilmente y utilizarlo en tu proyecto. Ya he ido adelante y descargué los iconos que necesitamos para nuestra página de perfil. Y los he puesto en la carpeta Iconos para los recursos de esta conferencia o de este proyecto. Debajo de la página de perfil debería poder encontrar estos cinco iconos SVG que podemos utilizar para nuestros botones de página de perfil. Pero primero lo primero, vamos a seguir adelante y establecer una nueva etapa para nuestros botones para que podamos usar ese estado o cuatro iconos. De esta manera tenemos botones que permiten iconos. Así que voy a seguir adelante y pasar por mi componente aquí. Entonces voy a seguir adelante y seleccionarlo y crear un nuevo estado. Al igual que así. Y vamos a llamar a esta versión lite porque vamos a hacer que sea una versión ligera de ésta y llamarla Icon left. Entonces en esta versión, voy a seguir adelante y primero seleccionar nuestro fondo aquí mientras mantengo el comando. Recorre nuestra biblioteca y selecciona ese color de acento para nuestro botón. Y vamos a seleccionar acento a color. Y voy a seguir adelante y llevarlo a la oreja izquierda en algún lugar por aquí por ahora. Entonces vamos a seguir adelante y arrastrar uno de esos iconos. Vamos a hacer el recuento uno por aquí y traerlo, vamos a sacarlo fuera de aquí. Entonces voy a seguir adelante y simplemente mover éste. Muévelo dentro del botón aquí. Vamos a seguir adelante y seleccionar tanto el rectángulo como el icono. Alinearlo hacia el medio verticalmente. Y voy a hacer lo mismo con los textos de los botones también, pero eso ya debería estar centrado. Por lo que quiero que este sea a 15 pixeles de la izquierda. Y quiero que mis textos de botón sean de 15 píxeles del icono. Se ve bien. Ahora para el ícono, vamos a seguir adelante y también cambiar el relleno a ese acento también. Debido a que este es un ícono SVG, podemos cambiar el color fácilmente. Ese no es el caso del icono PNG. Así que cuando estás usando iconos, lo mejor es usar SVG por esa razón. Una última cosa mientras estamos aquí, vamos a seguir adelante y asegurarnos de que nuestro texto aquí se quede alineado también. Y luego podemos volver, y volvamos a nuestra página de perfil. Voy a seleccionar cada uno y seleccionar la versión ligera con un icono a la izquierda. Lo mismo aquí. Hasta que todos ellos tengan esa versión. Y voy a seguir adelante y cambiar el botón de este botón textos aquí para dar cuenta. Vamos a cambiar esto a pago, seguido del historial de pedidos, dirección, seguido por último pero no menos importante, abogado. Si bien tenemos ese botón de pago seleccionado, voy a seguir adelante y seleccionar el icono de la cuenta por aquí. Si bien tienes eso seleccionado, sigamos adelante y arrastremos la tarjeta de crédito SVG y aquí. Entonces ahora este Dios se secó en el botón mismo, que es lo que queremos. Y lo voy a colocar directamente encima del ícono del perfil, que es lo que deberíamos tenerlo. Y luego borra el perfil o el icono de la cuenta. Por último, vamos a seguir adelante y asignarle ese acento al color. Ahí vamos. Ahora para el historial de pedidos, lo mismo. Adelante y selecciona el icono de cuenta, asegúrate de que esté seleccionado en el panel de capas. Y luego arrastra esta vez punto SVG y aquí, muévelo por dentro. Estoy muy contento con el tamaño del ícono, así que asegúrate de tener un tamaño similar para tus iconos. Éste es 22 por 20 para seguir adelante y eliminar el otro. Y por supuesto seleccionado, ve a Colores, selecciona x y dos. Ya casi terminamos aquí, dos botones más y estamos bien para ir. Así que sigamos adelante y seleccionemos el icono de la cuenta por aquí. Ve a nuestra carpeta y arrastra el lápiz dot SVG. Arrástralo. Ahora puedes acercar para que sea un poco más fácil arrastrar cosas alrededor. Vamos éste, seleccionamos éste y le asignamos un accidente al color. Y por último pero no menos importante, me gustó el ícono de tu cuenta aquí. Arrastre el desconexión SVG. ¿ Qué? Este tiene, pegarlo como un icono enorme. Vamos a seguir adelante y bloquear las proporciones aquí y cambiar el ancho a 22 píxeles. Y lo movemos por aquí. Eso se ve bien. Ahora cambia las huelgas y para ir al panel Capas, cuenta y eliminar. Solo voy a asegurarte de que éste esté centrado porque parece un poco apagado en este momento. Un poco, creo que es un centro o tan alineado al medio como podamos. Ahí vamos, Esos son nuestros botones para la página de perfil. Creo que se ve bien. seguir adelante y derribar estos un poco más. Creo que en algún lugar justo aquí se verá bien. Tal vez en realidad en segundo pensamiento, puedo agregar más espaciado, tal vez hacerlo 20 píxeles entre ellos. Creo que eso es bastante bueno. Ahora una cosa a tener en cuenta es que debido a que hicimos cambios estos botones y hubo instancias de componentes, hemos anulado a todos. Así que si bien los iconos en sí no cambiarán entre ellos, si aún volvemos a nuestros estados para este ícono de versión ligera que queda, todavía podemos cambiar las cosas. Por ejemplo, podemos cambiar la ubicación del botón. Y seguirá cambiando en esa instancia también. Si en algún momento, digamos que decidimos cambiar el fondo del botón aquí para que siempre podamos volver a nuestro botón aquí y seguir haciendo ese cambio, porque no hemos anulado el color de cada uno instancia. Seguirá adelante y lo aplicará a mi página aquí. Así que siéntete libre de jugar y usar el color que te guste. Creo que me gusta este color por aquí. Así que me quedaré con éste en lugar de la versión ligera. De esta manera puedo seguir adelante y en realidad incluso llevar mis textos por aquí para eliminar esta versión ligera y simplemente decir icono a la izquierda. Entonces este es mi tipo de botón predeterminado con un icono a la izquierda. Se ve bien. Volveremos en la siguiente conferencia y trabajaremos en nuestra página de pagos. 60. Página de pago: Es hora de trabajar en nuestra página de pago. Y sólo voy a seguir adelante y traer nuestras maquetas a o los wireframes para ver lo que tenemos. Entonces lo que tenía en mente para esta página es permitir al usuario ver sus opciones de pago o sus tarjetas premium que han agregado con la capacidad de elegir cuál es la principal, como se muestra con esta pequeña marca de verificación por aquí. Puedes elegir entre las diferentes opciones de pago o pueden seguir adelante y añadir una nueva. Y si recuerdas, como ejercicio, una asignación para ti, quiero que hayas diseñado esa página de pago donde el usuario seguirá adelante e ingresará información de la tarjeta de crédito en esa página. Y ahora te daré más detalles sobre lo que necesitas para esa asignación. Pero antes de llegar a eso, diseñemos juntos esta página de pago. Lo que queremos aquí es simplemente un rectángulo que muestre los últimos cuatro dígitos de esa tarjeta. Y luego una pequeña marca de verificación para indicar que esta es la tarjeta primaria seleccionada. Necesitamos un plus por aquí, icono de espalda y un botón Agregar en la parte inferior. Así que vamos. Abramos XD. Contamos con nuestra página de pago. Vamos a seguir adelante y deshacernos de este título por aquí y cambiar nuestro gran título a pago. Para el botón Atrás aquí, sólo vamos a escribir de nuevo. Ya tenemos un ícono más por aquí, lo cual es genial. Y entonces ahora vamos a seguir adelante y diseñar aquí un rectángulo. Y voy a hacer de éste unos 65 pixeles de altura. Si no tienes exactamente 65 píxeles, puedes seguir adelante y dejarlo ir en cualquier punto y usar el comando y las teclas de flecha para acortar o hacer que tu rectángulo sea más alto. Puedo hacer lo mismo con una tecla de flecha derecha para hacerlo más largo o con la tecla de flecha izquierda para que sea más corto. Entonces con eso dicho, vamos a seguir adelante y hacer este rectángulo 29 píxeles de cada lado. Así que utilicemos la otra vez, las teclas de flecha de comando para moverla hasta que tengamos esa porción que queremos. Se ve bien. Así que voy a seguir adelante y redondear las fronteras y poner el radio de la esquina fronteriza a diez. Voy a dar el fondo, al accidente un color. Y luego voy a añadir un texto aquí usando el Alt y el octavo Aquí. Voy a generar estos puntos, iconos y luego solo teclear 1234. Y así eso es una especie de representar los últimos cuatro dígitos de la tarjeta. Por lo general, así es como se muestra en las apps. Para que podamos seguir adelante y también dar nuestro texto ahí. Hagamos el cuerpo un medio y cambiemos el color de la fuente a siguiente. Y tres. Voy a seguir adelante y poner éste en el lado derecho por aquí y alinearlo a la derecha tal como está. Voy a seguir adelante y duplicar ese texto, ponerlo a la izquierda. Y para éste, vamos a seguir adelante y a la izquierda alinearlo. Y sólo vamos a escribir lo que es esta tarjeta. Vamos a hacer visa. Y en lugar de poca marca de verificación, en realidad estoy pensando que podemos seguir adelante y simplemente escribir si esta es la tarjeta primaria de aquí. ¿ Por qué no movemos esto hacia arriba, duplicamos este texto, lo bajamos, y usamos el textil del título aquí arriba. Vamos a seguir adelante y cambiar el color el axón tres. Y aquí vamos a escribir primaria en todas las tapas. Al igual que así. Sólo voy a seguir adelante y alinear estos al medio y tener 25 pixeles del lado izquierdo por aquí. Creo que eso se ve bien. Vamos a seguir adelante y agruparlos juntos arrastrando y seleccionando el comando G. Vamos a seguir adelante y simplemente moverlo un poco por aquí. Duplicar eso. Tráelo aquí abajo. Para éste, vamos a seguir adelante y quitar esta primaria y bajar la visa. De esta manera el usuario sabe cuáles son la tarjeta principal. Y si quieren hacer de esta tarjeta primaria u otra tarjeta primaria, pueden seguir adelante y seleccionar esa. Y en la página de detalles del pavimento pueden seguir adelante y hacer esa comida primaria como o incluso podemos hacer algo donde puedan seleccionar la tarjeta y una hoja de acción como ésta pueda aparecer preguntándoles si quieren reemplazar eso como su método predeterminado de opciones de pago. Hay realmente interminables. Antes de ahora. Tenemos nuestra página de pago tipo de completado aquí. Sólo necesitamos un botón en la parte inferior para, para que ellos agreguen una nueva tarjeta. Así que sigamos adelante y encontremos el botón. Arrastre uno por el medio y alinéelo a la parte inferior con 35 píxeles de la parte inferior y cambie esto. Pero en texto para agregar tarjeta. Se agregó tarjeta haciendo clic en esa. Ahora, te voy a dar esa asignación armar la página de pago. Yo sí sugiero que eche un vistazo a algunos ejemplos o inspiraciones diferentes para llegar a esa página de pago. Uno que hemos abierto por aquí desde entregado a través en móvil. Por lo que aquí se puede ver tenemos un número de tarjeta, y por supuesto puede agregar otros campos como el nombre del titular de la tarjeta, la fecha de caducidad, el CVE, y así sucesivamente. Así que toma una pausa aquí, Google, algunos pagos, página de pago móvil para obtener inspiración. Con eso dicho, te dejaré esa página y si quieres mis comentarios y la enviaré a hola inteligente en gmail.com. Y también te proporcionaré comentarios y podrás seguir adelante y subir tu proyecto. Y me encantaría echar un vistazo, pero sí, siéntase libre de tomar una pausa aquí, trabajar en esa página. Puedes seguir adelante y duplicar tu tablero de arte por aquí y colocarlo tal vez en otro lugar, tal vez aquí arriba o en algún otro lugar. Una vez que hayas terminado con eso, vamos a seguir adelante y pasar a nuestra página de ubicación. 61. Página de ubicación: Estamos listos para trabajar en nuestra página de ubicación. Adelante y abre nuestros wireframes para ver lo que tenemos aquí. Por supuesto, tenemos la búsqueda de la dirección aquí arriba. Lo que podemos hacer aquí es que podemos seguir adelante e intercambiar esta barra de navegación por una de estas búsquedas. Y luego seguiremos adelante y usaremos nuestros plug-ins para crear un mapa en las siguientes conferencias. Y luego necesitamos un bolígrafo para mostrar su dirección en el propio mapa, así como un pequeño tipo de rectángulo para mostrarles la dirección exacta que han ingresado, así como un pequeño botón para que encuentren su ubicación actual en el mapa. Un poco, pequeño botón de guardar aquí abajo. Para el propio mapa, vamos a seguir adelante y usar plugins y las siguientes conferencias para generar un mapa en segundo plano aquí. Pero por ahora, sigamos adelante y coloquemos estos elementos en la pantalla. Y luego iremos de ahí. Entonces primero lo primero, vamos a seguir adelante e intercambiar esta barra de navegación que tenemos. Cuatro. Este de aquí mismo. Vamos a seguir adelante y eliminar ese y colocar éste en su lugar. Te darás cuenta porque hemos colocado esa barra de navegación en nuestro panel Capas encima de la barra de estado. Actualmente está cubriendo la barra de estado. Podemos ver eso en nuestro panel Capas también. Otra forma en que puedes reorganizar capas aparte de arrastrarlas por aquí. En realidad puedes seguir adelante y hacer clic derecho y hacer click en Enviar hacia atrás, que iremos adelante y le enviaremos una capa hacia atrás o enviarla al revés. Vamos a seguir adelante y enviar este objeto todo el camino a la capa más inferior en ese tablero de arte. Entonces puede seguir adelante y hacer lo contrario llevando las cosas hacia adelante y llevando las cosas al frente mismo. Como acceso directo, puede hacer Command open bracket para bajar las capas, o ordenar cerrar el corchete para subir las capas. Voy a seguir adelante y usar el comando open bracket, tomar esa capa todo el camino hacia abajo. Y luego vamos a seguir adelante y cambiar el título a dirección. Ahí vamos. Veamos. Realmente no necesitamos la parte de atrás por aquí. Vamos a seguir adelante y simplemente deshacernos de eso y acaba de cambiar este botón de acción aquí para hacer. Ahí vamos. Podemos buscar su dirección aquí. Pueden hacer clic en Hecho cuando hayan terminado. Y luego sigamos adelante y arrastremos el botón para mis bibliotecas aquí abajo con 35 píxeles para la parte inferior, y luego cambiemos el título para guardar la dirección. Muy vamos. Entonces desde tus recursos, desde la carpeta Iconos, puedes encontrar la carpeta de ubicación donde puedes abrirla y arrastrar estos dos iconos en nuestra pantalla. Perfecto. Éste. Vamos a seguir adelante y colocarlo en algún lugar por aquí abajo y darle un espaciado generoso desde el botón. Este botón es para ayudar al usuario a encontrarse en el mapa. Y luego vamos a seguir adelante y darle a este botón o icono de ubicación color secundario. Intentemos el accidente uno. Lo mismo para este bolígrafo de aquí. Vamos a usar este para mostrarle al usuario el vestido que está mirando en el mapa. Por lo que sólo vamos a poner fuera en el centro y darle también los actos y un color. Veamos qué más necesitamos? Casi terminamos aquí. Sólo necesitamos nuestro rectángulo con nuestra dirección aquí. Entonces, ¿por qué no seguimos adelante y creamos un rectángulo. Y sólo voy a seguir adelante y algo así alinearlo con mi botón de ahí abajo. Ahí vamos. Voy a seguir adelante y salir de ahí. Le daré a esto un radio de esquina de diez píxeles. Junto con un relleno de mi accidente, un color reemplaza muy cerca del alfiler aquí. Y luego vamos a seguir adelante y crear un cuadro de texto. Y aquí por éste, sigamos adelante y arrastremos un texto por aquí, porque podría ser multi-línea. Así que vamos a seguir adelante y simplemente escribir una dirección falsa al azar. Pero en un formato completo. Entonces vamos a hacer postal de ciudad. Eso debería ser bueno. Voy a la izquierda alinear eso por aquí. Y vamos a establecer esto como el título ilustrado. Nada que sea demasiado pequeño. Entonces hagamos el cuerpo uno. Tal vez cuerpo un medio funcionaría todavía. Y luego para el relleno, Hagamos accidente tres. Vamos a seguir adelante y sólo centrar eso por aquí y estirarlo por si hay una segunda línea. Creo que eso se ve bien por ahora. Por qué no volvemos en la próxima conferencia para crear un mapa usando plugins para esta página. 62. Uso de plugins: Mencionó brevemente los complementos y cómo pueden ayudarnos en nuestros diseños y hacer que nuestro proceso de diseño sea mucho más rápido. En esta conferencia, vamos a ver realmente el poder de eso y utilizar los plug-ins disponibles para generar un mapa para nuestra página de ubicación aquí. Para acceder a plugins en cualquiera vaya a la barra de menús aquí arriba y haga clic en plugins y acceda a una vez que haya instalado o gestione o navegue por ellos. Por supuesto, esto podría estar bajo un menú de hamburguesas si estás en Windows. De lo contrario también puedes acceder a su panel Plugins por aquí o presionar Shift Command P. Y seguiremos adelante y abriremos lo mismo. Entonces puedes seguir adelante y hacer clic en Discover plugins para descubrir los plug-ins que están disponibles en el mercado. a disposición toneladas de desarrolladores pusierona disposición toneladas de desarrolladores que han reunido todos estos plugins que puedes usar para generar iconos para tus diseños y simplemente acceder a una tonelada de plug-ins que son útiles para diferentes casos de uso. Ya sea que quieras automatizar algo o quieres encontrar plugins para publicar en colgando de tus proyectos. Hay toneladas de plug-ins disponibles que puedes navegar. Adelante y navega por todos los plugins disponibles desde aquí, y realmente pasa por él y ve lo que cada uno puede hacer. Por ejemplo, este de aquí. Puedes usarlo para generar avatares para un ícono de perfil, o puedes seguir adelante y obtener complementos haciendo clic. Ven aquí una vez que lo abras, así. Una vez que hayas instalado, es posible que te pida tu contraseña. Así que adelante y entra eso y seguirá adelante y comenzará a instalar ese plugin. Puedes acceder a ese plugin estirando el perfil de usuario. Estoy aquí arriba bajo plugins destacados. Y en esta barra de búsqueda, queremos instalar que una vez podamos utilizarlo en nuestra página de perfil. Pero por ahora, sigamos adelante y busquemos mapas. Creo que quiero probar este elegante mapa uno y ver para peor para nosotros, vamos adelante e instalemos este plugin de mapa de lujo. Y si no puedes encontrar éste, sigue adelante y busca mapas de lujo e incluso puedes buscar el nombre del autor y debería surgir. Parece que también tiene calificaciones decentes, lo cual es genial. Se pueden ver las calificaciones de diferentes plugins que dejan los usuarios. Por lo que esto está instalado aquí. Ahora, podemos volver a nuestra XD. Estamos introduciendo cosas aquí. Y ahora en bajo plugins, lo puedes ver, los plug-ins que no hemos instalado. Vamos a seguir adelante y haga clic en ese plugin de mapas de lujo. Para que este plugin funcione, solo tienes que seguir adelante y crear una cuenta de Mapbox, que es gratuita. Y luego seguirás adelante e ingresarás aquí tu token de acceso. Este plug-in requiere eso para poder generar un mapa para usted. Una vez que hagas eso, cargará esta página. Adelante y rellene este formulario para inscribirse en una cuenta. Una vez que hayas hecho eso bajo tu cuenta, deberías poder encontrar tokens de acceso para seguir adelante y copiar este token público predeterminado en el que puedes usar para generar mapas que estén usando ese plugin. Entonces, una vez que hayas copiado eso, sigue adelante y pegarlo aquí en XD. Y luego una vez que hayas terminado, puedes seguir adelante y navegar diferentes ciudades desde aquí que puedes ingresar. Puedes crear un destino sorpresa, pero por ahora solo seleccionemos Nueva York. Entonces seguirá adelante y generará este mapa para nosotros. Nos dirá qué nivel de zoom queremos. Por lo que queremos el tipo de nivel de zoom cercano en algún lugar por aquí. A lo mejor podemos incluso tener un marcador generador, pero ya tenemos eso por aquí. Y podemos elegir un tipo de mapa satelital, diferentes tipos de mapa basados en lo que buscamos. Vayamos con uno predeterminado por aquí. Y luego tendrá que crear un rectángulo para que el mapa entre. Así que vamos a seguir adelante y crear un rectángulo por aquí desde la parte superior hasta aquí. Lo saca de ahí y luego da clic en aplicar mapa. Ahí vamos. Por lo que tenemos el mapa generado. Ahora, quiero usar Command Shift y el corchete abierto para enviarlo todo el camino a la parte posterior de las capas. Perfecto. Sólo necesitamos unos toques finales y entonces esta página debería ser buena para ir. ¿ Por qué no volvemos en la próxima conferencia para pulir esta página e ir de ahí. 63. Terminar nuestra página de ubicación: Estamos listos para completar nuestra página de ubicación. Por lo que sólo necesitamos añadir unas sombras aquí para separar el primer plano del fondo aquí. Y deberíamos ser buenos para ir primero las cosas, voy a seguir adelante y sólo salir de los plugins de ahí y acercar. Acude a nuestro panel Capas aquí. Ahí vamos. Voy a empezar con este bolígrafo y solo haga doble clic ahí para poder seleccionar ambas formas aquí. Y mientras mantengo el turno, he seleccionado ambas líneas aquí o formas. Voy a seguir adelante y habilitado drop shadow. Para la sombra de gota, Hagamos un desenfoque de diez y una y de cinco. Y tal vez hacerlo, Es un poco más oscuro. Entonces creo que algo así como el 20% debería funcionar. Vamos a seguir adelante y aplicar lo mismo para el fondo de este cuadro de texto aquí. Hacer una sombra gota con y de cinco y un desenfoque de 10, 20% de opacidad. Eso se ve bien. Ahora, me di cuenta de que este rectángulo tiene un borde, así que voy a seguir adelante y sólo quitarle eso. Realmente no lo necesitamos. Entonces sigamos adelante y aplicamos la misma sombra a este icono del cursor por aquí. Por lo que voy a hacer doble clic para seleccionar mi forma habilitado drop shadow con cinco como por qué, diez como el desenfoque y 20% como la opacidad. Creo que eso se ve bien. Está ligeramente separado de los objetos aquí están ligeramente separados ahora del fondo, que es exactamente lo que queremos. Ahora, con esta página completada, estamos listos para pasar a nuestra página del historial de pedidos, que si recuerdas, durante los wireframes di esta página como un ejercicio para que completaras. Así que adelante y trabaja en esta página. Entonces para darte una idea de lo que necesitas en esta página, esencialmente queremos una lista de pedidos que los usuarios colocaron en el pasado. Entonces lo que necesitarías hacer es idear un nuevo diseño de tarjeta de interfaz de usuario. En este, vas a seguir adelante e incluir parte de la información del pedido. Se pueden incluir cosas como el total, el restaurante al que ordenaron, y tal vez cuántos artículos había en ese orden. Y por supuesto, la fecha y hora en que hicieron ese pedido. Entonces, si pones esos cuatro conjuntos de datos en una interfaz de usuario de tarjetas como estos de aquí, puedes seguir adelante e incluso duplicar esta interfaz de usuario de tarjeta y crear un componente fuera de ella, y usar eso en tu página de historial de pedidos. Entonces la idea es que los usuarios puedan ver sus pedidos anteriores desde aquí con esos cuatro conjuntos de datos importantes en esa interfaz de usuario de la tarjeta. Entonces de nuevo, los cuatro conjuntos de datos que querrías es el nombre del restaurante, el pedido del monto total en dólares para su pedido. A lo mejor cuántos artículos estaban en su orden, y qué fecha y hora, el lugar que ordenan. Entonces haremos una pausa aquí y te dejaré hacer eso por tu cuenta. Y luego en la próxima conferencia también lo haremos juntos. 64. Página de pedidos pasados: Es hora de armar nuestra página de historial de pedidos. Espero que tuvieras la oportunidad armar algo para ello también. Si no, no se preocupe en absoluto, lo haremos juntos en esta conferencia. Y eso debería terminar más o menos nuestra maqueta para este proyecto de diseño móvil. Y luego estamos listos para avanzar lentamente con la exportación, el animo y la creación de prototipos. Pero antes de hacer eso, sigamos adelante y trabajemos en nuestra página de historial de pedidos. Y lo que quiero hacer es deshacerme de este pequeño título de aquí y cambiar el título grande a la historia, o en realidad podemos hacer órdenes pasadas. Creo que eso suena mejor. Con eso, voy a seguir adelante y cambiar este historial de pedidos para también pasar las órdenes. Creo que eso suena mejor. Vamos a seguir adelante y cambiar este botón de acción a retroceder. Podemos eliminar este ícono plus o podemos dejarlos crear un nuevo pedido pulsando este ícono plus. Entonces creo que solo vamos a dejar eso ahí en caso de que quieran, digamos empezar un nuevo pedido desde esta página. Ahora, voy a seguir adelante y copiar una de las tarjetas del restaurante por aquí. Voy a usar eso para crear un nuevo componente e ingresar esos cuatro puntos de datos que hablamos en la conferencia anterior. Vamos a asegurarnos de seleccionar todas las capas aquí en su panel Capas. Y luego vamos a seguir adelante y copiar uno aquí y vamos a usar Comando K para convertir eso en componentes. Vamos a cambiar el nombre de eso para pedir carrito. Sabemos que esa es la tarjeta para pedidos. En lugar de esta imagen aquí, quiero seguir adelante y crear un rectángulo encima de ella. Y que tome la misma anchura y altura y después dáselo sosteniendo Alt, voy a darle el mismo radio de esquina de, creo que fueron 12 pixeles. Entonces vamos a seguir adelante y asegurarnos de que este punto sea de 12 píxeles así como este de aquí. Perfecto. Vamos a quitar el borde y darle a esto un relleno de este color gris. Puedes introducir este código hexadecimal igual que un placeholder para nuestras imágenes. Con eso, podemos seguir adelante y deshacernos de esta capa de imagen por aquí. Ahora tenemos un placeholder para nuestra imagen de restaurante. Eso no es totalmente necesariamente en la página de historial de pedidos, se podría eliminar totalmente eso de ahí. Pero creo que es agradable para ellos ver de qué restaurante pidieron la comida. Entonces esa es realmente tu llamada. Dejará esto donde está, el nombre del restaurante. Vamos a simplemente hacer doble clic y eliminar el grupo de calificación de aquí y cambiar este signo de dólar a los montos totales. Así que vamos a hacer $1. En lugar de este italiano quería que ingresara cuántos artículos pedían. Así que como ejemplo, voy a escribir un artículo. Por último, necesitamos la fecha y hora en que hicieron ese pedido. Entonces, ¿por qué no movemos a estos dos por aquí, asegurarnos de que quede alineado a la izquierda, y luego seguir adelante y duplicar eso. Y vamos a seguir adelante y asegurarnos de que el espaciado sea el mismo, 14 píxeles y éste va a estar bien alineado y vamos a escribir el mes, el día, el mes y el año. Entonces el tiempo aquí, igual que un placeholder, para que el usuario pueda ver cuándo realizó ese pedido. Creo que se ve bastante bien. Todavía tenemos espacio si quieres agregar a alguien más por aquí, otro punto de datos, pero creo que por ahora esto es bastante bueno. Ahora para la imagen del restaurante, creo que podemos hacerla un poco más pequeña ya que en realidad no es tan importante aquí. Y después podemos seguir adelante y mover estos artículos hacia arriba. Sólo estoy sosteniendo Turno. Ahí vamos. Vamos a seguir adelante y encoger todo el rectángulo por aquí también. Eso se ve bien, bastante limpio. Podemos usar esto ahora en nuestra página de historial de pedidos. Volvamos a nuestra página de historial de pedidos. Haga clic en el historial de pedidos. Y luego vayamos a nuestras bibliotecas desde aquí y descubramos que parece que no nombré correctamente ni componentes. Así que vamos a seguir adelante y nombrar esta tarjeta de pedido. Ahí vamos. Ahora en nuestro historial de pedidos, voy a arrastrar ese carrito de pedidos aquí. Perfecto. Entonces podemos seguir adelante y solo usar la rejilla de repetición aquí para repetir esto un montón de veces. Y voy a quitar ese espaciado in-between a 0 porque creo que el espaciado, ya tenemos esto bastante bueno. Creo que hasta podemos añadir un nuevo botón aquí, aquí arriba. Y para éste vamos a empezar un nuevo trimestre. Ahí vamos. Si quieren iniciar un nuevo pedido, también pueden hacerlo desde aquí. Ahora bien, si utilizas esta cuadrícula de repetición para llegar a nuevas cartas, este botón chocará con la vista. Así que voy a crear un poco de fondo degradado aquí para desvanecerse cualquier carta. Y podemos hacerlo creando aquí un rectángulo desde en la parte inferior de la pantalla. Ese tipo de cubre el botón hasta aquí. Y vamos a bajar esta capa para que el botón esté encima. Vamos a seguir adelante y quitar primero el borde y cambiar el relleno a, en lugar de un color sólido ser un degradado lineal. Ahora para este color por aquí, el nodo inferior, vamos a ponerlo en blanco. Para el otro nodo vamos a configurarlo. Lo vamos a dejar en peso y vamos a bajar el OPCD todo el camino a 0. Voy a seguir adelante y solo intentarlo un poco más alto. Creo que eso es bastante bueno. Ahora como se puede ver, detrás de este botón, cualquier carta que se muestre se desvanecerá , que es lo que queremos. No queremos que ese botón choque con esa tarjeta. Y así creo que eso se ve bastante bien. Y ahora para nuestros datos, Volvamos en la próxima conferencia o dos entradas, algunos datos de muestra aquí. Sólo una cosa que voy a hacer es volver a la tarjeta aquí y reemplazar esto por un nombre genérico de restaurante. Simplemente haremos el nombre del restaurante porque es un componente. Realmente no queremos un nombre específico de restaurante ahí. Y así creo que eso se ve bien. Ahora vamos a volver en la próxima conferencia para ingresar algunos datos de muestra aquí. 65. Añadir datos muestra con hojas de Google: Es hora de introducir algunos datos en nuestra página de pedidos pasados. Puedes entrar y rellenar cada tarjeta con algunos datos de muestra corrida y agregar algunas imágenes aleatorias para diferentes restaurantes. Pero en esta conferencia quiero mostrarte algo realmente genial que pueden hacer con los plugins que proporciona ECC. Y vamos a utilizar un plugin específico llamado Hojas de cálculo de Google, que te permitirá introducir datos de una hoja de Google en tu diseño. Y verás lo genial y lo útil que podría ser para introducir algunos datos de muestra en tus proyectos. Por aquí, he reunido una hoja con cinco restaurantes y conjuntos de datos que incluyen el día, el precio total de artículos, e incluso la imagen y el nombre del restaurante por aquí. Vamos a estar usando esta hoja con el fin introducir algunos datos de muestra en nuestro diseño. Y para poder utilizar esta hoja, vas a seguir adelante y yo voy a seguir adelante y copiar este enlace por aquí, que también se proporciona bajo los recursos de este proyecto. Si vas por debajo de los datos muestreados, deberías poder encontrar un historial de pedidos, enlace de Google Sheets, dxdy. Si abres eso, puedes seguir adelante y copiar este enlace. Deberíamos abrir esta hoja de cálculo para usted. Y vamos a usar eso para generar los datos muestreados. Así que vamos a seguir adelante y simplemente minimizar eso y volver a XD. Ahora para que este plugin funcione, antes de seguir adelante e instalarlo, necesitaríamos hacer un pequeño cambio, necesitaremos realmente seguir adelante y convertir nuestro componente de nuevo en grupo en lugar de que este plugin funcione realmente y use Repetir Grid. Entonces primero lo primero, tengo cinco datos muestreados ahí dentro. Y por aquí sólo tenemos tres con un cuarto detrás de esta pantalla por aquí. Así que lo que voy a hacer es que voy a seguir adelante y solo sacar esta página un poco y estirarla. Y luego sigamos adelante y llevemos estos a la capa del rectángulo con el degradado y el botón todo el camino hasta la parte inferior de la página. Y luego vamos a seguir adelante y usar la rejilla de repetición para asegurarnos de que tenemos cinco ítems aquí. 12345, Perfecto. Eso debería ser bueno por ahora. Perfecto. Entonces y entonces lo otro que queremos hacer es ir a nuestro componente para esta tarjeta de pedido, que está justo aquí. Y lo que vamos a hacer es que vamos a hacer clic derecho y hacer desagrupar componente que vamos a seguir adelante y esencialmente hacer lo contrario de hacer los mismos componentes. Entonces ahora esto ya no es un componente. Y lo que vamos a hacer es que vamos a seguir adelante y arrastrar esto aquí en lugar del que tenemos por aquí. Entonces sigamos adelante y eliminemos éste aquí. Y vamos a seguir adelante y arrastrar éste en su lugar. Pero primero vamos a seguir adelante y agrupar eso juntos e insumar eso aquí. Solo voy a seguir adelante y mantener el Espaciado 25 pixeles desde la parte superior y asegurarnos de que también estemos en el centro. Perfecto. Y ahora vamos a usar Repetir Grid y hacer eso una vez más. Pero esta vez solo voy a seguir adelante y asegurarme de que también minimizamos tu espacio a 0 aquí mismo. Perfecto. Ahora en realidad podemos usar ese plug-in. Y para instalarlo, vamos a seguir adelante y abrir plugins. Aquí abajo. Vas a seguir adelante y hacer clic en el signo más. Y vamos a buscar hojas de Google. Presione enter. Y el primero de aquí por impermeable, debe ser el que vamos a utilizar para seguir adelante y hacer clic en el botón Obtener más de un año para instalarlo. Ya lo tengo instalado, así que voy a seguir adelante y saltaré este paso. Una cosa más que quiero hacer es seguir adelante y hacer doble clic para seleccionar este rectángulo y cambiar el nombre de esta capa nuestro restaurante de imagen. Por favor sostenla solo para que sepamos para qué sirve esto. Ahora, listo para introducir esos datos de muestra. Así que seleccionemos aquí todo el grupo Repetir Grid. No sé dónde están los plug-ins del panel de plugins. Vamos a seguir adelante y haga clic en el panel Hojas de cálculo de Google. Y luego por aquí nos pedirá una fuente de archivo para que puedas subir un archivo CSV o iniciar sesión en Google Sheets lo que vamos a hacer pegar enlace URL porque estamos trabajando con un archivo público sobre ahí. Así que adelante y copia ese enlace que está disponible en los recursos para los datos muestreados de esta página parece que había algo mal con mis cuadrículas repetidas. Por lo que acabo de volver a volver a leerla esa parte. Si ves algo que está ahí fuera, tómate un segundo para arreglarlo también por ti mismo. Pero por alguna razón mi rejilla de repetición estaba usando el mismo carro que el de aquí, que no es lo que queremos. Queremos esta tarjeta para los pedidos pasados. Así que asegúrate de que estás repitiendo las rejillas funcionando correctamente y luego sigue adelante y haz clic en ella. Y debajo de los plug-ins de nuevo, querías pegar el enlace URL y hacer clic en Importar. Esto podría tardar un segundo ya que el plugin está importando todos esos campos. Lo que queremos hacer es seguir adelante y mapear cada conjunto de datos al campo correcto o a los ángulos rectos correctos. Entonces el primero de un rectángulo es 17. Realmente no necesitamos nada ahí como fondo para el nombre del restaurante. Vamos a seguir adelante y mapearlo al nombre del restaurante en las Hojas de Google para el $0, queremos seguir adelante y mapear eso al precio total. Por lo que muestra el precio total para el único artículo, que es el de aquí. Vamos a seguir adelante y mapear eso a nuestros artículos. Y este campo de fecha por aquí. Vamos a seguir adelante y mapearlo hasta la fecha. Y por último pero no menos importante, para el marcador de posición del restaurante de imagen, que es éste de aquí como lo cambiamos de nombre. Vamos a seguir adelante y dar click en la imagen del restaurante. Realmente no necesitamos seleccionar contenido aleatorizado, lo contrario lo pondría en un orden aleatorio. Vamos a mantener el mismo orden y simplemente haga clic en Aplicar y asegurarnos de que tenga toda su cuadrícula de repetición seleccionada mientras está haciendo esto. Entonces el plugin funcionará correctamente. Podría tomar algún tiempo, pero wallah, seguirá adelante e ingresará los datos como esperaríamos. Y creo que eso se ve muy bien. Mucho más rápido que introducir datos manualmente. Y como se puede ver, las URL de imagen terminaron funcionando bastante bien también. Voy a seguir adelante y simplemente seleccionar mis capas por aquí y traerlas usando comando y los corchetes de cierre. Y simplemente hazlo esta página un poco más pequeña. En cuanto a la altura. Realmente no necesitamos que sea tan largo. Solo asegúrate de que mi putin tenga 35 píxeles desde abajo y lo haga. Perfecto. Por lo que ahora tenemos nuestra página de historial de pedidos lista para ir también. Sólo voy a seguir adelante y reorganizar algunas cosas moviendo estos tableros de arte aquí abajo un poco. Ahí vamos. Incluyo estas etiquetas, esta hoja de acción aquí sólo para tipo de mantener organizados nuestros diseños. Y ahí lo tenemos. Así es como ingresas datos de muestra usando Hojas de cálculo de Google. Y con eso dicho, nuestros diseños más o menos listos para ir. Vamos a volver en la próxima conferencia y simplemente echar un vistazo a todo y hacer un retoque final de unos hacer un retoque final de pequeños detalles que quizá hayamos olvidado. Y luego a partir de ahí vamos a seguir adelante y pasar a exportar este proyecto y compartirlo con los miembros de nuestro equipo o compañeros o clientes y así sucesivamente. Volvamos en la próxima conferencia para pulir y terminar esta maqueta. 66. Cómo pulir nuestros diseños: Al final de cada proyecto, me gusta una especie de echar un vistazo a todo el proyecto, cosas organizadas si están fuera de lugar o polaco cada página un poco desde donde veo que podría haber mejoras. Y sólo es esta buena práctica, pero también te permite tipo de conseguir ese ojo para el detalle para tus diseños. Vamos a pasar por esto y ver dónde podemos hacer algunas pequeñas mejoras. Esta conferencia juntos. En cuanto a la organización, creo que hemos hecho un trabajo bastante bueno. Todo es una especie de donde queremos que esté, sólo para mantener las cosas organizadas. Voy a seguir adelante y llevar estos activos de Apple al lado derecho por aquí junto a mis componentes. Sólo para mantener estos juntos. Nuestro esquema de color, conjuntos de tipos, todo se ve muy bien. Aquí están todos los componentes están organizados por aquí. Tenemos un logo extra aquí, así que vamos a seguir adelante y eliminarlo. Ahora. Vamos a trabajar nuestro camino desde la pantalla de presentación hasta todo el camino hacia la derecha. Y luego en la parte superior, vamos a ir por la página de perfil todo el camino a la derecha también. Así que a partir de la pantalla de presentación, creo que las cosas se ven muy bien aquí. Página de inicio de sesión se ve bien. Vamos a asegurarnos de que el espaciado o todo sea correcto y parece que las cosas son bastante buenas. Sólo voy a seguir adelante y espaciar un poco mi contraseña olvidada, tal vez 15 píxeles del campo y bajar este botón un poco también. Y hazlo 30 pixeles de la contraseña olvidada. Por aquí. Solo vamos a seguir adelante y establecer la política de privacidad en semi audaz, así como nuestros términos de servicio. Ahí vamos. Nuestra verificación telefónica se ve bastante bien. Simplemente derribar eso. Todo está alineado correctamente. Podemos seguir adelante y solo revisar eso también. Verifica dos veces la alineación de todo aquí. Una cosa que quería hacer es que voy a seguir adelante y copiar este botón Menú y colocarlo en mis otras barras de navegación también. Desde aquí, también se podrá acceder al menú. El discurso me parece bien. En cuanto a nuestra página de menú, lo único que quiero hacer es simplemente espaciar las cosas un poco más. Así que vamos a seguir adelante y simplemente espaciar las cosas también. 25 pixeles. Por aquí. Voy a seguir adelante y simplemente seleccionar toda la pila por aquí y cambiar este espaciado a 25 desde aquí. Lo mismo para mi pila de desiertos. Hacer 25 en lugar de 15. El motivo de eso es que queremos más espacio para respirar. Queremos más espacios en blanco. No queremos que las cosas estén demasiado abarrotadas aquí. Vamos a seguir adelante y estirar esa página de menú un poco más para que se ajuste bien a todo. Vamos a seguir adelante y cambiar el número de pedidos para este artículo a uno. Y lo mismo por aquí. Nos olvidamos de hacer eso en la conferencia anterior, así que solo lo haremos aquí y revisaremos dos veces el espaciado de todo. Y lo mismo por aquí. Voy a seguir adelante y derribar esto un poco. Entonces son 25 píxeles en el espaciado. Esto me parece bastante bien. O ordenar La página de Progreso también se ve bien. A lo mejor sólo voy a derribar estos un poco más, un poco más espaciados. Y todo lo demás se ve bien. Vamos a volver y añadir un poco de animación aquí más adelante. Vamos a lucir bien. Y en la parte superior de aquí, en lugar de tener el primer y el año pasado, solo vamos a seguir adelante e introducir un nombre aleatorio. Así que sólo vamos primero a la izquierda, alinearlo, derecha. John Doe. Para el icono de perfil aquí. Voy a usar ese plugin que instaló anteriormente en llamado perfil de usuario. Si no lo tienes Ticket pausa aquí para instalar ese plug-in, pero eso nos permite insertar alguna foto aleatoria aquí y podemos seguir adelante e incluso aislar el género. Ahora podemos seguir adelante y seleccionar aquí la elipse y dar click en insertar foto aleatoria. Si no te gusta la foto, puedes ir totalmente adelante y seguir presionando hasta que tengas cuatro. Te gusta usar. El plugin aquí generará tantas fotos como quieras. Lo dejaré igual que eso. Y entonces el botón R aquí se ve bien. Todo lo demás se ve bien en esta página son página de pago que se ve bien. O la página de direcciones también se ve bien. Y nuestra página de Pedidos pasada también se ve bien. O bien se ve bien por aquí. Y creo que eso es bastante bueno para nuestro proyecto aquí. Está bastante pulida y bastante agradable. No creo que haya nada más que tengamos que añadir en este punto. Ahora vamos a volver en la próxima conferencia para hablar sobre el cambio de tamaño sensible, lo que permite que tu diseño sea receptivo a diferentes tamaños de dispositivos. Vamos a hacer eso juntos y luego la próxima conferencia. 67. Resize responsive en el repaso: Si bien nos estamos preparando para pasar a exportar nuestro proyecto y crear prototipos. También quiero mostrarte una característica más cool que tiene adobe XD. Esto es realmente útil cuando se trata de trabajar con múltiples tamaños de pantalla y tamaños de dispositivo, y sobre todo cuando estás trabajando en un proyecto web. Pero lo que esto, lo que esta característica llamó redimensionamiento responsive, permite que tus diseños funcionen en varios tamaños de pantalla en lugar de solo el de aquí. momento hemos configurado aquí este tamaño de pantalla de iPhone para nuestras obras de arte, y todas son iguales en cuanto al ancho. particular sugiero como ejemplo, si nuestros dispositivos funcionan un poco más grandes, ahora mismo ves nuestros diseños, un cierto tipo de desmoronamiento, realmente no llenaron toda la sección. Entonces si lo haces empiezas a estirar el ancho de nuestros dispositivos en función de qué dispositivo estás mirando. Este diseño on. Es posible que el diseño no empiece a funcionar. Y por eso adobe ha reunido esta función llamada resize responsive. Y lo que realmente me gustó XD es que hace mucho del trabajo por ti usando el modo de redimensionamiento automático responsive. Entonces, esencialmente, con redimensionamiento responsive, puedes permitir que tus elementos dentro de la pantalla puedan, como sugiere el nombre, puedes permitir que tus elementos dentro de la pantalla puedan, como sugiere el nombre,cambiar el tamaño en función de cuál sea el tamaño de la pantalla. A modo de ejemplo, en su página de menú de perfil, vamos a seguir adelante y encender el redimensionamiento responsive. Y entonces lo que sucederá es que ahora nuestros objetos en este tablero de arte, vamos a seguir adelante y redimensionar como un encogimiento o expandir el tamaño de mi pantalla. Y como puedes ver, el modo auto hace un trabajo bastante bueno. Hay ciertas cosas que podrían mejorarse, pero en general, está bastante bien hecho en cuanto cómo maneja la respuesta del re-tamaño. Pero entonces cuando se trata de ciertos elementos como este nombre por aquí y el texto en estos botones. Podemos seguir adelante y arreglarlos para que realmente funcione a la perfección. El modo de hacerlo es realmente seguir adelante y dar click en un determinado elemento en ese tablero de arte. Y luego por aquí, como podemos ver, para cada elemento, agregamos una opción auto en cuanto a responsive redimensionar cualquier opción manual o podemos seguir adelante y en conjunto apague eso. Pero por defecto, todos los tamaños de respuesta están encendidos y en el modo automático para cada objeto dentro de tu tablero de arte. Pero si sigues adelante y haces clic en esta opción manual, ahora, de repente obtienes algunas opciones ciertas para tu objeto aquí con el fin de ser redimensionado y manualmente por cómo te gustaría. Y usando estas opciones por aquí, podemos seguir adelante y arreglar este objeto a ciertos sitios como una pantalla. Entonces, esencialmente si hacemos esta opción por aquí, cuando se pone azul, esto significa que ahora este objeto se fijará a la izquierda. Y por supuesto podemos combinar múltiples correcciones juntas como la izquierda y la parte superior. Ahora lo que sucederá es que este text-box, sin importar cuál sea el ancho y la altura de esta mesa de trabajo, siempre mantendrá este cierto píxel desde el lado izquierdo en este cierto píxel desde la parte superior del diseño. Con estas opciones habilitadas. Ahora si seguimos adelante y expandimos o diseñamos, verás que el cuadro de texto no se moverá porque está manteniendo ese espaciado desde la izquierda y la parte superior. De igual manera, si sí encoges el diseño, como puedes ver, el cuadro de texto ahora ya no se moverá hacia arriba. Seguiremos adelante y mantendremos dónde está en cuanto al espaciado desde arriba. Pero si vas adelante y desactivas eso ahora y solo haces fija izquierda. Ahora como puedes ver, el cuadro de texto comenzará a moverse independientemente de su espaciado desde la parte superior. Por ejemplo, para este botón aquí. Ahora de nuevo, la mayoría de las cosas las haremos manualmente XD, por lo que no necesitas hacer muchos ajustes. Pero podemos seguir adelante y aplicar redimensionamientos de respuesta manual para ciertos lugares. Y si quieres mantener los elementos juntos, como estos botones conjuntos por aquí. Cuando haces agrupar algo, va a seguir adelante y mantener ese espaciado o la proporción entre esos botones. Entonces en ese caso, si lo hacemos, por ejemplo, encogemos el tamaño del tablero de arte, el grupo estará intacto y no estropeará el espaciado entre ellos. Ahora, ¿qué pasaría si seleccionamos esta imagen, por ejemplo, hacemos un redimensionamiento manual y en realidad seguimos adelante y apagamos el ancho fijo y una altura fija. ¿ Qué pasará entonces? Bueno, bueno, te darás cuenta ahora es que a medida que el tablero de arte se encoge o se expande, esa imagen irá adelante y en realidad escalará con respecto al tamaño del dispositivo. tanto que si seguimos adelante y deshacemos eso y en realidad seguimos adelante y arreglamos su ancho y altura. No importa cuánto estiremos este tablero de arte, el tamaño de esa imagen no cambiará. Eso es lo que el ancho fijo y una altura fija dos. Por lo que de nuevo, podemos seguir adelante y habilitar el redimensionamiento receptivo y múltiples tablas de arte y ver cómo el entrenamiento en algunos tableros de arte, es casi impecable y no necesitas hacer ningún cambio en absoluto . En tanto que en otros tableros de arte, es posible que necesites hacer algunos ajustes, como este de aquí para la dirección. Podemos seguir adelante y agrupar a estos dos juntos. A continuación, conjunto de respuesta manual, conjunto de cambio de tamaño manual y fijar el ancho. Pero entonces un tema será que ahora está alineado al lado izquierdo porque siempre se va a arreglar al lado izquierdo porque como puedes ver, tenemos la izquierda fija. Entonces vamos a seguir adelante y apagar eso para que esté centrado en toda la pantalla, través de la pantalla, que es lo que queremos. Ahora eso se ve mucho mejor. Como ejercicio, puedes pasar totalmente por el diseño. Adelante y habilita redimensionamiento de respuesta en cualquier mesa de trabajo que desees. Y sigue adelante y juega con él hasta que se vea bien. Obtienen páginas inciertas en ciertos diseños que puede que necesites hacer ajustes y cambiarlo, mientras que en otros, funcionará igual que esperabas. Por ejemplo, podríamos ver totalmente en una pantalla de iPad algo como esto se vería bien para la página de pedidos pasados. Entonces esa es una de las razones por las que el redimensionamiento sensible es tan poderoso. Así que adelante y tómate este tiempo para hacer una pausa y explorar más de las mesas y tratar de aplicar responsive, cambiar el tamaño hasta que las cosas se vean bien. No tengas miedo de saltar y hacer ciertos ajustes a tus objetos. Entonces como ejemplo en esta página de menú, verás que las cosas empiezan a desmoronarse con estos textos aquí. Por supuesto, lo que te gustaría hacer es aplicar una izquierda fija manualmente a todos estos cuadros de texto. Entonces como ejercicio, dejaré esta página en esta página de menú para que lo hagan. Y recuerda, puedes aplicar el componente enemigo de redimensionamiento sensible ellos mismos. Por lo que puedes entrar aquí y cambiar el retamaño de respuesta de cada elemento en tu componente. Y eso se aplicará igual que todo lo demás con componentes a todas tus instancias de ese componente. A modo de ejercicio, hacer una pausa aquí, seguir adelante y aplicar redimensionamiento responsive a la página del menú y a los carros aquí específicamente. Entonces lo haremos juntos en la próxima conferencia. 68. Ejercicio responsivo de resize: De acuerdo, espero que hayas podido aplicar ese cambio de tamaño sensible para la página del menú. Y vamos a hacer eso juntos esta conferencia. Si sigues adelante y habilitas ese redimensionamiento sensible para el tablero de arte, lo que ya he hecho. Así que adelante y amplíe ese diseño y podemos especie de ver qué elementos hay que arreglar. Y en particular, son estos textos por aquí. Entonces lo que queremos hacer es asegurarnos de que esos textos se peguen al lado izquierdo de esa tarjeta y no redimensionen con el tamaño de la pantalla. Al hacerlo, tenemos que ir al componente principal de estas cartas. Podemos seguir adelante e ir Editar MainComponent, y eso nos llevará al propio componente explicado por defecto, sus componentes tendrán redimensionamiento responsivo. Pero si lo desea, al igual cualquier otro tablero de arte u objetos dentro de nuestros tableros de arte, puedes seguir adelante y hacer clic en objetos dentro de un componente y ajustarlo es sensible, redimensionarte tú mismo. Ahora, lo que queremos hacer es que queremos seguir adelante y arreglar este ítem a la parte superior y al lado izquierdo para que a medida que el componente se estire, siga adelante y mantenga su pixel, estos muchos píxeles, 145 pixeles desde el lado izquierdo de la vista de su tarjeta. Queremos hacer lo mismo con esta descripción aquí. Como se puede ver por defecto era tasa fija, lo cual no es correcto. Y luego vamos a seguir adelante y seleccionar estos dos sosteniendo turno como podamos. Adelante y establece el mismo para ambos, que se fija a la izquierda y inferior fijo. Para esto aquí mismo, ya está ajustado correctamente tanto a arriba abajo fijo así como a tarifa fija lo que estamos aquí, podríamos hacer dos cosas más por estos elementos por aquí, podemos ir adelante y quitar el ancho fijo. Por lo que ahora de vuelta en nuestra página de menú, podemos seguir adelante y expandirnos o encogernos. Este diseño funcionará, casi me duermen, pero voy a seguir adelante y simplemente volveré a poner el ancho a mi ancho original aquí, 390 y dejarlo así. Ese es nuestro ejercicio para el redimensionamiento sensible. Y eso casi envuelve la parte de diseño de nuestra aplicación móvil. Así que vamos a volver en una siguiente conferencia es aprender cómo podemos exportar nuestros diseños y compartir con los miembros del equipo en XD. 69. Selecciona la exportación: Por lo que hemos hecho un gran trabajo diseñando nuestra maqueta móvil aquí. Las cosas realmente se ven bien y estoy bastante contento con cómo resultó. Esta es la parte donde preguntamos, De acuerdo, Entonces, ¿qué sigue? ¿ Qué podemos hacer desde aquí? ¿ Cuáles son las opciones en términos de exportar nuestros activos fuera de aquí, nuestros tableros de arte, o compartirlo con otras personas y crear prototipos fuera de ellos. Bueno, eso es lo que vamos a explorar juntos en las siguientes conferencias. Empezando con la exportación de artículos así como tableros de arte de nuestra XD. Xd te ofrece opciones para exportar artículos individuales o elementos de tus diseños, así como exportar un lote de artículos a la vez que te permite exportar tableros de arte enteros. Así que vamos a pasar por esos tres uno por uno. El primero es un selecto Exportar, que te permite exportar un solo objeto o tal vez un grupo fuera de tus diseños. Entonces como ejemplo, si acerco y quiero exportar un determinado objeto aquí es si es el logo o digamos esta imagen aquí para que los desarrolladores puedan usarlo en su desarrollo trabajo. Podemos exportar eso de forma individual. Entonces como ejemplo, vamos a seguir adelante y exportar una de estas tarjetas de menú fuera de XD a nuestros archivos antes para hacerlo, puedes seguir adelante y seleccionar lo que te gustaría exportar. Y recuerdo lo que sea que exporte, esa cosa exacta será exportada. Entonces si selecciono aquí todo el grupo, todos estos se exportarán en un solo archivo. Pero si quieres exportar algo específico, ya sea solo un texto aquí o toda la vista de tarjeta de elemento aquí, que es lo que queremos. Entonces adelante y asegúrate de tener lo quieres seleccionado porque sólo eso, porque sólo esa capa será explotada. Para exportar esto fuera de aquí, podemos seguir adelante y bien ir a Archivo, Exportar y hacer seleccionado, o como atajo, puedes pulsar Comando E o Control E en Windows. Y XD ahora seguirá adelante y preguntará dónde desea que se exporte el archivo . Y si ves algo como esto y un Mac, puedes seguir adelante y hacer clic en esta pequeña flecha que puedas elegir exactamente dónde quieres guardarlo y puedes cambiarle el nombre también si quieres. Una vez que estés listo, puedes seguir adelante y hacer clic en Exportar Por. Tómate un segundo aquí dependiendo de lo que estés exportando. Pero una vez que tengas esa exportarla, si lo haces abrir esa ubicación o esa carpeta donde está tu artículo, entonces puedes ver la vista de tarjeta marido exportado como verías. Ahora una cosa que quiero señalar es que XD seguirá adelante y exportará exactamente a esa resolución porque ese acorde era originalmente del tamaño. Si voy adelante y estiro la imagen, perderá la calidad. Entonces una cosa que podrías hacer es cuando estás exportando, puedes seguir adelante y retocar el tamaño de tu exportación para que tenga una resolución más alta. Si hago un a3x ahora y seguir adelante y guardar lo mismo. Pero voy a hacer en a3x en el nombre. Entonces lo que sucederá es que XD seguirá adelante y exportará el mismo ítem, pero ahora a tres veces la resolución de lo que ves por aquí. Ahora si miras la vista de tarjeta de artículo original y la vista de tarjeta de artículo en a3x, es una resolución mucho mayor. Así que típicamente querrías compartir algo de alta resolución con los desarrolladores para que no tengan que mirarlo a este tamaño. Por supuesto, ten en cuenta que el tamaño de tu archivo también será mayor si lo haces establecer una resolución más alta. También hay otras opciones disponibles donde puedes exportar para web, iOS y Android. Así es como exportas artículos individuales fuera de aquí, puedes hacer lo mismo. Entonces digamos que exportas un solo objeto o elemento o grupo fuera de XD. Ahora recuerda que puedes hacer eso con cualquier cosa otra vez. Entonces si selecciono justo como ejemplo, todo este grupo de texto aquí y acabo de exportar eso. Verás que XD solo exportará esas capas de textos con la misma fuente, del mismo color que un PNG aquí, y no hay fondo aquí ya mis textos por aquí realmente no tienen fondo de TI. Entonces así es como exportas artículos individuales de XD. Volveremos en la siguiente conferencia y aprenderemos cómo podemos exportar múltiples objetos al mismo tiempo usando la exportación por lotes. 70. Exportación de lotes: Entonces ahora que sabemos cómo podemos exportar artículos únicos fuera de XD, ¿y si quieres seleccionar varios artículos para exportar desde XD? Ahora por supuesto, puedes seguir adelante y seleccionar un determinado elemento, digamos aquí este botón y luego mantén presionado shift y selecciona otro elemento. Y luego adelante y exporte los juntos. Eso funcionará como se esperaba también. Pero la otra opción aquí, que lo hace mucho más fácil, especialmente si estás haciendo este proceso una y otra vez se llama exportación por lotes. La exportación por lotes permite exportar múltiples cosas juntas marcando ciertos objetos para su exportación. Entonces como estamos pasando por nuestros diseños, digamos que elegimos exportar un determinado objeto, esta imagen que dicen, puedes seguir adelante y hacer click en este poco marcado para exportar en el panel Propiedades para eso objeto. Ahora de nuevo, lo mismo que una sola Exportación. Asegúrate de tener seleccionado el elemento correcto. Podemos seguir adelante y marcar eso para exportación y luego seguir adelante y seleccionar algo más como marcado para la exportación. Y a medida que estamos creciendo a través de nuestros diseños, podemos seleccionar múltiples cosas. Digamos que queremos exportar este botón de menú aquí. Podemos seguir adelante y volver a seleccionar este ícono del menú de hamburguesas para asegurarnos de que tienes esta cosa seleccionada y luego hacer marcar para exportar y así sucesivamente, así sucesivamente. Ahora, una vez que tenga varios objetos seleccionados, entonces simplemente puede seguir adelante y bien presionar Shift Command E, o bien puede seguir adelante y seleccionar Archivo, Exportar y hacer exportación por lotes. Exportación por lotes. Obtienes las mismas opciones. Vamos a seguir adelante y pedirte que elijas PNG como formato, o puedes seguir adelante y realmente cambiarlos a SVG, PDF o JPEG. Ahora típicamente me gusta usar SVG para que nuestro icono de aquí, se pueda redimensionar sin estropear su calidad. Y voy a seguir adelante y simplemente crear otra carpeta aquí llamada artículos de exportación por lotes, para que sepa exactamente dónde la estoy guardando y luego seguir adelante y haga clic en Exportar. Y como era de esperar, esos artículos ahora se han exportado como SVG. Y por eso se ven así en la vista previa en Mac. Pero tal y como se esperaba, importante esto de nuevo en XD y un funciona sin problemas. La calidad no será masacada en función del tamaño o el cambio de tamaño aquí. Así es como puedes exportar múltiples objetos al mismo tiempo usando XD. Ahora recuerda, porque seleccionamos esos artículos como marca para la exportación, realidad no han sido un no seleccionado. Por lo que como seguimos agregando artículos a nuestra exportación por lotes, esos artículos se exportarán una y otra vez. Por lo que esto podría ser bueno para algo que quieras hacer ajustes a una exportación diferentes versiones de la misma y enviarlo a los miembros de tu equipo o compañeros de trabajo para que lo hagan retroalimentación. Pero si quieres deshacer eso, simplemente puedes desmarcar cosas para exportar. Y ahora solo las cosas seleccionadas para exportación serán exportadas fuera de tu XD. Y así es como usas la exportación por lotes en XD. Ahora, ¿y si quieres exportar aquí toda la mesa de trabajo? Bueno, vamos a volver en la próxima conferencia y explorar eso juntos. 71. Exportar nuestras tableros de arte: Ahora sabemos exportar artículos individuales fuera de XD, cómo exportar múltiples artículos usando la exportación por lotes. Pero qué pasa si realmente quieres seguir adelante y compartir todos nuestros diseños de tableros de arte para otra persona. Exportar mesas de trabajo es tan simple como exportar objetos. Todo lo que necesitas hacer es simplemente seleccionar la Mesa de Trabajo que quieran exportar. Y por supuesto puedes seguir adelante y sostener Shift y seleccionar múltiples tableros de arte. Y adelante y haga clic en Comando E seguirá adelante y lo guardará como PNG, que va a crear una carpeta llamada mesas de trabajo. Aquí, puedes seguir adelante y hacer clic en Exportar. Y ahora XD exportará tus tableros de arte a esa carpeta. He elegido la resolución a3x, y por eso es que es de tan alta calidad. Así es como exportas múltiples o si quieres tableros de arte individuales y puedes seguir adelante y simplemente hacerlo en lo que nuestro tablero. Ahora, ¿y si quieres exportar todos los tableros de arte en nuestros diseños? Bueno, XD te lo hace fácil porque simplemente puedes dirigirte a File Export y hacer todos los tableros de arte aquí. Al hacer exportar todos los tableros de arte. Porque ya tenemos esos tres tableros de arte ahí. Xd nos preguntará, ¿ Quieres reemplazar esos? ¿ Estás seguro ya que sobrescribirá esos? Pero vamos a seguir adelante y hacer clic en Reemplazar. Por lo que ahora XD ha ido adelante y exportado todos fueron tableros de arte aquí en esa carpeta que seleccionamos, que es perfecta, se ve muy bien. Y estas mesas de trabajo no se pueden compartir con nadie. Puedes enviarlos a tus desarrolladores o compañeros diseñadores o clientes o quienquiera este proyecto que estés trabajando en inquietudes. Pero por supuesto, hay una forma mucho más fácil de compartir mesas de trabajo. No es necesario seguir enviándoles PNGs actualizados una y otra vez porque ese proceso puede volverse realmente tedioso. Y terminarás con muchos nombres de versiones como VU en V1, T1, T2. Pero el software de diseño es hoy en día realmente nos facilita poder compartir o proyectos con clientes u otros miembros del equipo sin necesidad de exportar realmente cosas de XD. Entonces esencialmente si quieres exportar tus tableros de arte, sobre todo si sabes que esta es la versión final de tus tableros de arte, puedes hacerlo así en XD. Pero si realmente quieres compartir tus tableros de arte dentro de la propia XD, vamos a estar haciendo eso juntos en la próxima conferencia. Y creo que es una de las características realmente geniales que proporciona XD que realmente no vemos y muchos otros softwares de diseño. Pero creo que XD hace un muy buen trabajo al permitirte compartir tableros de arte o compartir activos con otros diseñadores y desarrolladores o clientes. Y así vamos a hacer eso juntos en la próxima conferencia. 72. Cómo compartir paneles de arte: Ahora sabemos exportar múltiples cosas incluyendo tableros de arte fuera de nuestros diseños y enviarlos a tal vez miembros del equipo o clientes. Pero hay una manera más fácil de compartir nuestros tableros de arte con otras personas y tal vez obtener sus comentarios o preguntar cómo podemos mejorar nuestros proyectos de ellos. Ya sean sus clientes o miembros del equipo. Xd realmente nos da esa habilidad usando la pestaña Compartir de aquí. Así que si te has estado preguntando todo este tiempo qué hace esta camiseta, vamos a estar explorando eso juntos en esta conferencia. Al dirigirse a la pestaña Compartir aquí. Xd nos permitirá compartir nuestros tableros de arte con otras personas dentro del propio XD. Lo que quiero decir con eso es que va a seguir adelante y crear un enlace para ti donde puedas compartir este enlace con otras personas. Puedes obtener sus comentarios sobre ellos. Puedes pedirles que dejen comentarios dependiendo de qué configuración de vista tengas. Y vamos a explorar esos ajustes de vistas en tan solo un segundo. Antes de hacer eso, vamos a explorar lo que tenemos por aquí en nuestra pestaña de cizallamiento. Dentro del panel de propiedades, XD hará activos para elegir un flujo o un nombre de flotador. Desde aquí puedes seguir adelante y renombrar esto donde quieras. Entonces digamos que hacemos maquetas de mordidas saludables. Y por lo que ahora este enlace se llamará maquetas de mordeduras saludables. Y podemos seguir adelante y gestionar nuestros enlaces haciendo clic en este enlace gestionado aquí. A partir de ahí, XD nos llevará a la página web de Creative Cloud donde podremos seguir adelante y eliminar flujos que ya no queremos y ver todos los archivos o los enlaces publicados que tenemos. Así es como puedes gestionar tus enlaces desde ahí. Pero lo que realmente nos interesa es explorar lo que realmente hace esta característica. Entonces ese es el nombre del enlace. Podemos seguir adelante y establecer el ajuste de vista. Si querías simplemente obtener comentarios sobre nuestros diseños, podemos seguir adelante e ir con la opción predeterminada, que es revisión de diseño. Si quieres compartir este diseño o nuestro prototipo con el desarrollador, podemos seguir adelante y seleccionar esta opción, que vamos a explorar en la siguiente conferencia. Si quieres simplemente presentar nuestro proyecto y mantenerlo lo más sencillo posible. Esto es lo mejor para la presentación. Las pruebas de usuario son geniales para cuando estás probando tu prototipo, en el que también estaremos trabajando en futuras conferencias. También podemos establecer una experiencia de visualización personalizada donde puedes seguir adelante y elegir exactamente lo que quieras. Ya sea que desee permitir comentarios o desea que el archivo se abra en pantalla completa, incluya especificaciones de diseño y así sucesivamente. Por simplicidad, sigamos adelante y escojamos una revisión de diseño y exploramos qué hace eso. Puedes seguir adelante y elegir quién tiene acceso a este enlace. Por lo que ya sea puedes invitar a personas específicas a este proyecto, seguir adelante y escribir una dirección de correo electrónico e invitar a esa persona a ver este archivo si solo quiero compartirlo con una persona específica. Por lo que en ese caso, puedo seguir adelante y establecer el acceso de enlace solo a personas invitadas. Pero si queremos que alguien con ese enlace acceda pueda ver mis tableros de arte y puedo seguir adelante y elegir a cualquiera que tenga un enlace. Cada vez que hagas cambios aquí arriba, puedes seguir adelante y hacer clic en Actualizar enlace, y XD seguirá adelante y generará un enlace para ti que puedas compartir con tus compañeros. Y así una vez hecho eso, puedes seguir adelante y simplemente hacer click en este enlace Copy donde seguiremos adelante y copiaremos ese enlace a tu portapapeles. Y así ahora, si lo hago adelante y abro una ventana del navegador e ingreso esa URL ahí. Pondremos nuestros diseños en su página web aquí, donde de nuevo, solo las personas con este enlace pueden acceder a él. Si has seleccionado que alguien con una opción de enlace. Y así ahora pueden pasar por tus diseños todas las páginas y dejar comentarios por aquí si lo desean. Por supuesto, si quieren hacer eso, ya sea pueden continuar como invitado o iniciar sesión con una cuenta de Adobe. Puedes seguir adelante y simplemente continuar como invitados y dejar comentarios sobre estos diseños. Y seguir adelante y realmente navegar por todos esos tableros de arte. La belleza de esto es que si haces algún cambio de diseño y regresas a tu parte, puedes seguir adelante y actualizar ese enlace haciendo una simple actualización. Ahora esa actualización se ha aplicado también a nuestros activos compartidos, voy a seguir adelante y simplemente deshacer eso y dejaré el enlace aquí. Pero ahora realmente se puede ver el poder de compartir tableros de arte en lugar de exportarlos y enviarlos a otros para su retroalimentación. Ahora si estoy registrado, puedo seguir adelante y ver todos mis comentarios para mi proyecto y seguir adelante y dejarles respuestas. Bastante genial. Mientras estás aquí, también puedes seguir adelante y navegar por todos los activos que se comparten contigo. Nosotros somos ese enlace. Puedes ir a una página específica si quieres. Y lo que es genial es que incluso puede compartir prototipos. Así que una vez que empecemos a crear prototipos, estas páginas seguirán adelante e incluso se volverán interactivas para que en realidad puedan usarlo como una aplicación. Pero vamos a explorar eso en las futuras conferencias. Por ahora. Solo queremos aprender a compartir nuestros tableros de arte con otras personas. Entonces, ¿qué pasa si solo quiero compartir realmente mesas de trabajo específicas y no todos mis tableros de arte. También puedes hacerlo simplemente dirigiéndote a la pestaña de diseño, seleccionando los tableros de arte que quieras compartir. Entonces digamos que solo quiero compartir mi página de restaurante y la página del menú y nada más. Entonces puedes seguir adelante y mantener pulsada Shift, seleccionar esos tableros de arte, y luego seguir adelante y hacer clic en este pequeño icono Compartir aquí arriba. Y XD otra vez, vamos a seguir adelante y te llevaremos hasta esa camisa. Pero ahora, solo dejándote con estos dos tableros de arte, nada más se selecciona, lo que significa que nada más se compartirá a través de ese enlace. Ahora el único tema aquí es que porque ya creé un enlace, no puedo crear otro enlace. Porque XD, con una cuenta básica solo te permitirá compartir un enlace a la vez. Si quieres compartir más enlaces, necesitas actualizar al siguiente nivel. Necesitas actualizar tu cuenta. Pero vamos a seguir adelante y simplemente deshacernos de esto. Voy a seguir adelante y simplemente borrar permanentemente este enlace aquí para poder crear nuevos enlaces. Por lo que ahora puedo volver atrás, volver a seleccionar esas dos páginas. Ahora, XD me permitirá crear un enlace para esas páginas y renombrarlo como quisiéramos. Si has creado un enlace de vez en cuando adelante y copia ese enlace y compartido con otros. Adelante y vuelve a ingresar esa URL, ingresa esa URL en. Ahora como se puede ver, sólo tenemos dos páginas aquí, las dos que lo exportamos. Entonces así es como puedes compartir tableros de arte específicos. En lugar de todos tus tableros de arte con otras personas. Sólo vamos a seguir adelante y eliminar eso también. Realmente no lo necesitamos. Adelante y deshacer eso también. Así es como puedes compartir tus tableros de arte usando XD. Hay una cosa más que quiero mostrarte sobre compartir tableros de arte, y esa es la entrega de desarrolladores de la que hablamos. Entonces, ¿por qué no volvemos en la próxima conferencia para explorar eso también. 73. Handoff para desarrolladores: ¿ Qué hace la entrega del desarrollador y cómo podemos hacer la vida de un desarrollador más fácil como diseñador cuando estamos compartiendo activos con ellos? Bueno, vamos a explorar eso juntos en esta conferencia porque creo que esta es una característica súper genial que tiene XD. Eso es realmente genial junto con sus otras capacidades para compartir. Así que para pasar por esto, vamos a seguir adelante y volver a nuestra pestaña Compartir. Entonces, en lugar de Design Review en el entorno de vista, vamos a seguir adelante y en realidad seleccionar el desarrollo. Una vez que hagas eso, XD seguirá adelante y te preguntará, ¿ es este un proyecto web, un proyecto iOS o un proyecto Android? Para que en consecuencia le dará al desarrollador o los activos adecuados o el código adecuado para ciertas plataformas, y haga clic en los activos descargables. Entonces si hay algún activo que puedas descargar, pueden hacerlo desde ahí. Cualquiera que tenga el enlace. Vamos a dejar eso como está y crear el enlace un segundo aquí. Y una vez que esos enlaces se generen, vamos a seguir adelante y copiarlo. Ahí vamos. Ahora en mi navegador, voy a seguir adelante e introducir eso en. Y ahora vamos a ver cuáles son las diferencias entre simplemente compartirlo como una revisión de diseño frente a una revisión de desarrollador. Ahora XD seguirá adelante y te mostrará que tienes este modo de especificaciones aquí podemos seguir adelante y cambiar y ver las cosas útiles como desarrollador cuando estás trabajando con un diseño. Yo puedo por supuesto, seguir adelante y dejar un comentario como de costumbre. Y puedo seguir adelante e incluso colocar un alfiler en una parte específica del diseño donde puedo dejar comentarios sobre esa parte específica. Entonces por supuesto que tenemos esa opción como lo hicimos antes. Pero ahora tenemos esta pequeña pestaña por aquí y podemos seguir adelante y ver las especificaciones de esta página. Por lo que en realidad vamos a seguir adelante y mostrarnos una pantalla detalles como el tamaño, los colores disponibles en esta página. Y podemos seguir adelante y dar click sobre esto para copiar ese color a nuestro portapapeles. Podemos ver qué tamaños de fuente se están utilizando y qué fuentes. Podemos seguir adelante e incluso cambiar estos valores de hex a RGBA y así sucesivamente. Y aún más fresco, podemos seguir adelante y seleccionar artículos individuales dentro de nuestro diseño y en realidad ver incluso el componente y cómo se ve ese botón en diferentes estados. Podemos seguir adelante y ver más información respecto a este pero o este texto. Para esta imagen, realmente podemos seguir adelante y seleccionar cualquier cosa y nos dará esa propiedad. Podemos seguir adelante y por supuesto ir a diferentes páginas y ver diferentes propiedades basadas en esa pantalla y alguien más, eso es genial. Si vuelvo a mi XD, digamos que estamos diseñando esto para un proyecto web. Así que voy a seguir adelante y cambiar eso a web y actualizar el enlace. Algo genial. ¿Qué pasó? Debido a que XD tiene capacidades CSS y para seguir adelante y actualizar esto ahora, seguirá adelante y en realidad me dará un código CSS aquí mismo. Si estoy trabajando en un proyecto web a diferencia de un proyecto iOS, puedo seguir adelante y en realidad copiar el código CSS y usarlo en mis proyectos de desarrollo web como desarrollador. Esto aparecerá en todas las páginas. Y hasta se obtiene esta nueva pestaña por aquí cuando se está trabajando con un proyecto web llamado variables, que vamos a seguir adelante y permitirle acceder a esas variables que creamos en nuestras bibliotecas, como los colores de acento, los colores primarios, y así sucesivamente. Los tamaños de fuente. Puedo seguir adelante y descargarlo desde aquí. Como proyecto CSS. En realidad, esa es la diferencia entre diseño y revisión de desarrollo. En modo desarrollo, tenemos acceso a mucho más. Incluso podemos seguir adelante y acceder a nuestros activos y descargar, por ejemplo, imágenes, lo cual es genial porque de esta manera no tienes que enviar realmente imágenes y artículos ida y vuelta entre tus desarrolladores. Eso es realmente lo que hace que las funciones de uso compartido de XDS sean tan útiles. Con eso dicho, vamos a volver en las próximas conferencias y aprender cómo podemos realmente trabajar en proyectos XD con un miembro del equipo o con varios miembros del equipo trabajando en ello con nosotros. Así que di aquí una pausa rápida y aprenden juntos en la próxima conferencia. 74. Invitación a editores: Entonces si estamos trabajando en un proyecto de diseño con otras personas, veamos compañeros o miembros del equipo en este proyecto. ¿ Cómo podemos compartir nuestro proyecto y colaborar con él al mismo tiempo? Bueno, en realidad tiene una función de invitación donde puedes seguir adelante y compartir tu proyecto, tu archivo XD con otros diseñadores. En realidad pueden seguir adelante y unirse a usted y co-editar este proyecto contigo. Debido a que tus archivos están guardados en la Nube, entonces puedes seguir adelante y simplemente invitar a la gente a tus documentos para que te ayuden a editarlo también. Error para hacer eso, simplemente puedes seguir adelante y hacer clic en este pequeño botón Compartir por aquí o botón Invitar por aquí. Xd seguirá adelante y le permitirá ingresar una dirección de correo electrónico aquí. Podemos seguir adelante e invitar a sus compañeros o miembros del equipo a este proyecto. Puedes seguir adelante y escribir un pequeño mensaje si quieres, o simplemente puedes seguir adelante e invitarlos a editar. Una vez que hayas hecho eso, la mutación será enviada a ese usuario. Y recibirán un correo electrónico al respecto donde seguirán adelante y abrirán ese proyecto y tendrán la capacidad de co-editar ese proyecto contigo. Si en algún momento quieres quitar a esa persona de tu documento, puedes seguir adelante y simplemente hacer click en Eliminar aquí. Y ahí será removido del proyecto. Y así es como puedes invitar a los miembros del equipo a trabajar contigo y co-editar proyectos contigo en XD. 75. Historia digital: A medida que estás trabajando en tu proyecto y estás haciendo cambios en tus diseños. Xd seguirá adelante y realizará un seguimiento de diferentes versiones para sus diseños. Entonces digamos si quieres comparar dos versiones diferentes que tengas o volver a una determinada etapa de tu diseño. Puedes hacerlo usando la función Historial de documentos que tiene. Si subes aquí en la barra por aquí donde te muestra tu nombre de archivo y pasa el cursor sobre esta flecha, verás que tienes acceso al historial de documentos, donde podrás acceder a auto guardado y marcador versiones de su documento. Entonces el equilibrio que va a seguir adelante y te mostrará las diferentes versiones en diferentes momentos para tu proyecto. Debido a que tu proyecto se está guardando automáticamente, XD seguirá adelante y guardará automáticamente tu proyecto y te dará ciertos a los que puedes volver. Incluso puedes subir hasta los últimos diez días. Y si quieres mantener ciertas versiones, puedes seguir adelante y en realidad marcarlas, marcarlas y acceder a ellas en cualquier momento. Por ejemplo, si acabo de retroceder a una de mis versiones aquí, que pueda seguir adelante y hacer click en este pequeño tres puntos para abrir esta versión en una nueva ventana, puedo nombrar esta versión de lo que quiero. Puedo seguir adelante y marcarlo usando este botón por aquí. Adelante y ábralo en una nueva ventana. Xd seguirá adelante y abrirá eso. En ese punto en el tiempo, que ahora está a nombre del expediente también. Se puede ver que este es el punto en el que estábamos trabajando en nuestra página de historial de pedidos. Por lo que tipo de retrocedimos en el tiempo con este proyecto en este momento. Ese es realmente el caso de uso de esta función de historial de documentos. Se puede ir aún más atrás. Si no quieres seguir adelante y cambiar el nombre de esta versión, puedes nombrar esto trabajando en el historial de pedidos como ejemplo. Incluso pueden seguir adelante y poner aquí la fecha si quieres. Adelante y haz clic aquí en el botón Okay, y seguirá adelante y guardará esa versión para ti. O si quieres simplemente guardar cualquier versión sin cambiarle el nombre, puedes hacerlo haciendo clic en el marcador aquí. También puedes acceder a tus versiones marcadas desde aquí arriba para que tengas un acceso más fácil a ellas. Este es uno de los beneficios de tener su archivo guardado en la nube, lugar de guardarlo algún lugar localmente en su máquina. Xd te dará acceso a ese historial documental, que ha sido muy útil, sobre todo si, digamos que cometes grandes errores en tu diseño que quieres volver a una determinada versión del pasado, o desea guardar diferentes versiones para diferentes partes del proceso de diseño. Digamos que puedes usar un historial de documentos en XD. 76. Cómo compartir bibliotecas: medida que pasábamos por el curso y empezamos a armar las cosas en nuestras bibliotecas por aquí. Somos capaces de ver cuán útil este panel de Bibliotecas B. Y realmente podemos seguir adelante y aprovechar estas bibliotecas y utilizarlo en múltiples proyectos también. Una cosa que podrías hacer es que puedas seguir adelante y realmente compartir tus bibliotecas o publicar tus bibliotecas en un activo de documentos de Cloud. Podemos usarlos a través múltiples proyectos o con múltiples personas. Si armas un sistema de diseño que quieres compartir al otro lado del mar, múltiples proyectos para tu empresa o para tus proyectos de clientes. Puedes seguir adelante y publicar esta biblioteca yendo por aquí y haciendo clic en este pequeño ícono por aquí. Y luego seguiremos adelante y en realidad iremos adelante y abriremos sus bibliotecas desde donde podrá publicar su biblioteca. Ahora, una cosa es que esta es una característica para la que necesitas actualizar para poder usar. Xd te pedirá que actualices si quieres tener acceso a bibliotecas editoriales y utilizarlas entre proyectos y con Teams. Junto a un par de otras características como tener editores ilimitados compartieron documentos, triturar enlaces, y así sucesivamente. Si tienes la cuenta actualizada haciendo clic en publicar, podrás seguir adelante y publicar esta biblioteca e incluso invitar a la gente a ella. Adelante e invitar a cierta persona a ello. Puedo seguir adelante y ya sea darles permisos de visualización o permisos de edición si quería tener la capacidad de editar esta biblioteca. De lo contrario al invitarlos, tendrán acceso a la biblioteca aquí a través de sus proyectos. Y recibirán un correo electrónico desde donde van a seguir adelante y tener acceso a esa biblioteca. Entonces es así como puedes publicar bibliotecas usando XD y compartirlas con otros miembros del equipo. 77. Importar archivos de bocetos: Ahora si has trabajado con otro software de diseño como antes, puedes seguir adelante e importarlos a XD en cualquier momento. Si estás en tu navegador de archivos como yo estoy por aquí, por supuesto puedes seguir adelante y crear nuevos archivos, pero en realidad puedes seguir adelante y abrir otros archivos incluyendo archivos de Photoshop o Illustrator, archivos boceto u otros archivos XD. Si estás trabajando en un proyecto de boceto donde tienes un proyecto de boceto que estás trayendo a XD. Simplemente puedes seguir adelante y hacer clic en esta opción de boceto. Y luego XD te pedirá que localicen ese expediente. Y una vez que lo hayas hecho, puedes seguir adelante y hacer clic en Abrir. Ahora a partir de ahí, dependiendo de lo grande que sea el tamaño del archivo, podría tardar un minuto aquí para EC2, importarlo, pero como puedes ver, uh, iremos adelante e importaremos tu proyecto a un proyecto XD. Se puede seguir adelante y usarlo tal y como se esperaba. Xd seguirá adelante e incluso pasará por encima sus componentes desde el boceto a los componentes XD también. Y él seguiría adelante y editaría esos componentes tal y como cabría esperar. Así es como puedes importar archivos de boceto a Adobe XD y usarlos como quieras. Ahora puede notar que las cosas están en diferentes páginas. En Sketch. Podrían aparecer como diferentes secciones dentro de tu Lienzo que tienes aquí. Por eso las cosas se desglosan en diferentes secciones, pero todo lo demás debe ser igual. Una cosa que sí quiero notar que si no tienes instaladas las fuentes adecuadas, puede que no funcione correctamente. Por lo que tal vez quieras seguir adelante y asegurarte de tener instaladas todas las fuentes en ese archivo de boceto antes de importarlo a tu XD. Digamos que puedes importar archivos de boceto a XD. 78. ¿Qué es el prototipo prototipo?: Mencionamos brevemente el prototipo. Y luego las conferencias anteriores hablamos de volver a nuestros diseños y armar tu prototipo que realmente podamos usar un pero ¿qué es un prototipo en software de diseño? ¿Qué hace? ¿ Para qué sirve? ¿ Y por qué deberíamos crear prototipos a partir de nuestras maquetas? Bueno, como en pocas palabras, un prototipo es esencialmente una muestra o un tipo de modelo de producto creado para probar cómo se verá el proceso de ese producto cuando realmente esté programado y construido. Juntamos estos diseños, pero en realidad no tienen ninguna relación entre sí. Todavía no son un producto. Usando un prototipo, en realidad podemos seguir adelante y crear o imitar cómo sería un producto real desarrollado a partir de este diseño y se sentiría como cualquier cosa desde crear conexiones entre los botones a las diferentes páginas, todo el camino hasta mostrar qué diferentes tipos de animaciones pop-up en nuestros diseños o abrir superposiciones en la parte superior sobre el diseño y así sucesivamente y así sucesivamente es parte de la creación de prototipos. Pero utilizó prototipos para compartir nuestra visión de este producto o para este diseño, que luego se convertiría en un producto real con la ayuda de un desarrollador de software. El motivo por el que el prototipado es tan importante es que cuesta mucho menos armar un prototipo utilizando un software de diseño como XD, lugar de seguir adelante y realmente desarrollar tal aplicación o producto, lugar de codificar realmente dicho producto. Y luego darse cuenta de qué cambios hay que hacer. Y a medida que enviamos este prototipo para retroalimentación, podemos seguir adelante y mejorarlo antes de entregar esto a un desarrollador potencial para armar usando código. Así que vamos a seguir adelante y conectar estas páginas juntas en la próxima conferencia y crear un prototipo a partir de nuestros diseños. 79. Crea una transición: Entonces, ¿cómo realmente creamos un prototipo y creamos conexiones entre nuestras páginas en XD? Bueno, simplemente sigue adelante y dirígete a la pestaña Prototipo aquí arriba. Ahora una vez que estés en la pestaña Prototipo, como puedes notar, el panel de propiedades cambiará por completo. Y ahora puedes seguir adelante y crear interacciones entre diferentes páginas, diferentes botones, etcétera y así sucesivamente. Y vamos a hacer eso juntos en esta conferencia. Y la forma en que vamos a trabajar a través de esto En cuanto a trabajar nuestro camino de izquierda a derecha, que es esencialmente el orden de las páginas que esperamos pasar o el que esperamos que pase el usuario. Lo que estamos tratando de hacer aquí es crear un flujo que lleve al usuario desde las páginas iniciales de la app hasta el final de las páginas, que en este caso estarán viendo el progreso de cualquiera de los pedidos, entonces teniendo la posibilidad de abrir también el menú y acceder a estas otras diversas páginas también. Así que nos vamos a tomar nuestro tiempo, pasar por cada página cuidadosamente y agregar conexiones adecuadas entre los botones y las páginas. Quiero seguir adelante y simplemente presionar eso y acercar esta sección por aquí y trabajar nuestro camino desde aquí. Ahora en un prototipo, siempre hay una pantalla de inicio que puedes elegir. Entonces lo que esto significa es que cuando haces abrir tu prototipo, esta es la primera página en la que comenzará el prototipo. En nuestro caso, queremos hacer la pantalla de presentación, la página de inicio. Por lo que vamos a seguir adelante y hacer clic en la Mesa de Trabajo para la pantalla de presentación, y seguir adelante y hacer clic en esta página de inicio. Ahora hemos creado un flow one. La primera conexión que vamos a hacer es desde esta página de aquí, la pantalla de inicio de sesión a nuestra página de inicio de sesión simplemente arrastrando este nodo por aquí desde la página y arrastrándolo a la página que queremos el usuario a pasar una vez que haya visto esa pantalla de presentación. Ahora o el lado derecho por aquí, obtenemos un montón de opciones sobre cómo queremos que esta transición suceda. Así que uno por uno, vamos a pasar por los tipos de acción que tenemos por aquí. El primero es la transición, que simplemente como su nombre indica, llevará al usuario de una página a otra. Tenemos auto animate, que esencialmente trata de hacer lo mismo, pero animar esa transición. Entonces si hay algo que sea similar entre las dos páginas, el auto anima hacia adelante y crea una transición suave que parece que hay alguna animación plateada entre esas páginas. Y debido a que estas páginas no están relacionadas, en realidad, no tengo ningún elemento compartido. Realmente no queremos animarlo automáticamente. Podemos optar por abrir una superposición, que esencialmente lo que esto hará es abrir la página a la que estamos señalando, que es esta de aquí encima de esta página de aquí en contraposición a, en contraposición a la transición del usuario de una página a otra. Por lo que de nuevo, en la página se abrirá en la parte superior de esta página. Y por lo general vemos superposiciones utilizadas en hojas de acción y Vistas de alerta y pantallas más pequeñas que solo aparecían temporalmente y se iban. Exploraremos eso también cuando pongamos una superposición para nuestra hoja de acción. Mesa de trabajo anterior llevará al usuario de vuelta a la mesa de trabajo anterior de los prototipos o dondequiera que se encontraran previamente. Los llevaremos de vuelta, su reproducción de audio, como su nombre indica, reproduce un audio. Por supuesto, cuando seleccionamos eso, podemos seguir adelante y elegir un archivo de audio y reproducción de voz. Vamos a seguir adelante y en realidad reproducir un discurso como su nombre sugiere. Y puedes seguir adelante y escribir ese discurso y aquí. Entonces eso es genial si necesitas retocar su discurso, pero realmente no necesitamos eso ahora mismo. Solo queremos transitar uno por aquí. Con cada una de estas opciones, obtendrás un conjunto diferente de opciones justo debajo de ella o propiedades justo debajo de ella. Para editar, vamos a pasar por ésos en más profundidad. Por ahora. Solo queremos seguir adelante y crear una conexión de símbolo desde nuestra pantalla de inicio de sesión a una página de inicio de sesión después de cierto tiempo. Entonces vemos que nuestro destino es la página de inicio de sesión, como ya hemos señalado a dos. Ahora si en algún momento queremos cambiar esta conexión, podemos seguir adelante y arrastrar esto a otra página que queremos nombrar dos. Pero por ahora vamos a seguir adelante y crear estas dos conexiones. Por supuesto, puedes crear múltiples conexiones si quieres. Podemos crear una conexión entre la pantalla de presentación y la página de inicio de sesión y una entre una pantallas de splash defender la siguiente replicación. Pero voy a seguir adelante y simplemente eliminar esa conexión simplemente haciendo clic en Eliminar. Si en algún momento no desea conectarse y desea eliminar esa conexión, simplemente puede seleccionar la conexión y hacer clic en Eliminar en su teclado. Entonces para esta transición, queríamos iniciar sesión como destino. Y para la animación queremos tener un disolver. Estas son las animaciones disponibles para la transición entre dos páginas. Ahora, algunos de ellos se aplicarán en diferentes lugares de nuestra Apple para esta página, disolver es la adecuada, que esencialmente se desvanece de esta página a esta página. Ahora por aquí para más fácil, obtenemos diferentes tipos de opciones de flexibilización para elegir cómo queremos que se vea nuestra animación. Por lo general vemos facilidad dentro o facilidad dentro y fuera excusado. Pero por supuesto se puede seguir adelante y probar los diferentes tipos de animaciones, facilitando ver cuáles son las diferencias. Así que sigamos adelante y escojamos facilidad dentro y fuera. Para la duración, quiero seguir adelante y seleccionar cero punto cuatro segundos. Por lo que esencialmente esto es cuánto tiempo tomará esa animación. Cuanto más tiempo lo establezcas, 1 segundo o más, seguirá adelante y la transición entre estas dos páginas en más tiempo. Mientras que si usted dijo que es más corto, sucederá más rápido. Eso es esencialmente lo que hace esa región. Así que vamos a seguir adelante y en realidad previsualizar nuestros prototipos hasta ahora mismo, porque nuestro gatillo es una pestaña, si voy adelante y toco en esta página, se irá adelante y animará a esta otra página. Pero lo que quiero hacer es en vez de tap, queremos seguir adelante y elegir tiempo. Queríamos seguir adelante y que cambiara a esa página automáticamente sin que el usuario tuviera que tocar en ella después de 0.6 segundos. Ahora si seguimos adelante y abrimos la vista previa de escritorio una vez más, como se puede ver, sin que yo tocando la transición ocurriera automáticamente. Eso es lo que hace el gatillo aquí arriba. Entonces tienes otros desencadenantes como la voz. Para que puedas usar una demanda de voz si quieres. Puedes usar llaves y gamepads. El usuario presiona cierta tecla, luego seguirá adelante y animará o un arrastre y ataque. Por lo que típicamente usamos una pestaña. A qué hora también es, por supuesto útil en un caso como este, hemos creado nuestra primera conexión aquí, lo cual es impresionante. Ahora vamos a volver en la próxima conferencia es crear más conexiones entre el resto de nuestras páginas. 80. Cómo conectar nuestras páginas: Felicidades por crear tu primera conexión para el prototipo en nuestra app móvil. Creo que se ve bastante bien, pero entra en la vista previa de escritorio arriba, aquí arriba, puedes seguir adelante y previsualizar esa animación que hemos creado o esa transición. Creo que se ve bastante bien. Ahora desde aquí queremos seguir adelante y pasar por cada página y ver qué conexiones hay que hacer entre las diferentes páginas. Ahora por supuesto, se puede obtener más detallado con el tipo de reportero si lo desea. Por ejemplo, si te gustaría seguir adelante e imitar al usuario poniendo una dirección de correo electrónico o contraseña, y luego tal vez un teclado aparece usando los activos de Apple, obtienes totalmente más páginas diseñadas sobre aquí, tal vez justo debajo de esta página de inicio de sesión y tener cada uno de esos tipos separados de diseños y luego transición entre ellos. Si quieres crear tal vez un tipo de prototipo más realista. Pero en este curso vamos a mantenerlo sencillo y crear conexiones entre las páginas que ya hemos diseñado. A partir de aquí, quiero seguir adelante y crear una conexión desde el botón de inicio de sesión a la siguiente página de la app, que será la verificación telefónica. Entonces vamos a suponer que es la primera vez que los usuarios inician sesión. Por lo que acreditaremos la conexión desde la página de inicio de sesión a la página de verificación telefónica. Ahora una cosa que es genial, pero los prototipos es que no necesariamente necesitas crear conexiones entre páginas. En realidad puedes seguir adelante y crear conexiones entre cualquier elemento de tu diseño. De esta manera en realidad puedes seguir adelante y conectar este botón con esta página para que cuando un usuario toque este botón, vaya adelante y navegue al usuario a esta página. Y eso es lo que vamos a hacer. Vamos a hacer clic en nuestro botón de inicio de sesión. Asegúrate de estar en la pestaña prototipo por aquí y no en el diseño. De lo contrario esto no funcionaría. Después sigue adelante y arrastra un nodo para crear una conexión entre ese botón, el botón Iniciar sesión y nuestra página de verificación telefónica. Ahora llegamos a ver el gatillo. Queremos que sea un grifo, este caso. Así que cuando un usuario toque se va a seguir adelante y desencadenar esa transición. Y queremos seguir adelante y dejar esto como está. Y para la animación, en lugar de disolver, vamos a seguir adelante y recoger diapositiva a la izquierda. Y verás cómo se verá eso en tan solo un segundo. Quiero dejar el resto como es facilidad dentro y fuera a 0.4 segundos para la duración. Ahora si seguimos adelante y previsualizar eso por Crick, al hacer clic en el login, adelante y transitarnos hacia entonces para su verificación. Pero como se puede ver desde aquí, realmente podemos hacer clic en cualquier otra cosa porque necesitamos ahora crear conexiones dentro nuestra página de verificación telefónica. Algo genial de la previsualización de escritorio que hemos abierto aquí es que al hacer click en diferentes páginas, podemos seguir adelante y previsualizar cómo se verá eso en nuestro prototipo sin necesidad en realidad cierra esta ventana y abre un yen. Eso es realmente bonito porque puedes ir a diferentes páginas y realmente repetir ese prototipo si quieres, o repetir esas transiciones si quieres. Y esto es genial porque no necesitas seguir recargando la vista previa de tu escritorio. Sólo voy a seguir adelante y minimizar eso. Bendice nuestra vista previa y seguir adelante. Y vamos a seguir adelante y crear una conexión entre la página de replicación telefónica a nuestra página principal. Porque una vez que el usuario haya terminado de agregar un número de teléfono, seguirá adelante y abrirá la página principal de la aplicación. Y vamos a dejar esto igual que la transición anterior, que queda leve. Está entrando y saliendo y 0.4 segundos y en grifo. Desde aquí, porque sólo tenemos un menú, sólo podemos realmente crear una conexión entre uno de estos restaurantes y el menú de aquí. Ahora si quieres volver a complicarte con esto, puedes seguir adelante y diseñar diferentes menús para diferentes restaurantes, pero habrá un poco redundante porque de nuevo, cuál es el objetivo de este prototipo no es hacerlo perfecto y no hacer que todas las conexiones funcionen. El punto principal del prototipo es hacer pasar nuestra idea, nuestro punto a través de lo que tenemos. En este caso, queremos seguir adelante y seleccionar aquí el restaurante italiano, Frank pasó por la Casa. La primera opción y sección crítica a esta página por aquí. Y vamos a dejar todo lo demás como está. En cualquier momento, también puedes presionar Comando Enter para abrir esa vista previa del escritorio o Control Enter en Windows. Login. Siguiente. Entonces más te darás cuenta es que si haces click en estas otras opciones, nada va a aparecer. Pero si pasas el cursor sobre éste porque hemos creado una conexión para ésta, mi cursor cambiará a este tipo de cursor de enlace. Entonces sabemos que hay una conexión aquí. Para que podamos seguir adelante y dar click sobre esto. Abre el menú para nosotros, una parte hermosa porque esta página es un poco más larga. Los ejes ya se adelantaron y crearon ese desplazamiento, desplazamiento vertical para nosotros, lo cual es increíble. Pero el único problema como nota es que la barra de navegación en la barra de estado también se desplaza, mientras que deben estar pegando a la misma parte de la página. Independientemente de cuánto nos desplazemos hacia abajo o hacia arriba. Volveremos en la próxima conferencia para aprender cómo podemos seguir adelante y bloquear esos elementos en la página. No se mueven mientras nos desplazamos hacia arriba y hacia abajo. Una vez que hagamos eso, vamos a seguir adelante y seguir creando conexiones en nuestro prototipo. 81. Scrolling vertical: Entonces como mencioné anteriormente, se van adelante y crearon un desplazamiento vertical para nosotros. Por el hecho de que esta página de aquí, nuestra página de menú es demasiado larga en cuanto a la altura. Ahora, usando esta opción por aquí, cuando sí selecciono nuestra página de menú, verás que esta es en realidad la línea de la ventanilla. Al ajustar esto, en realidad podemos seguir adelante y elegir cuánto de nuestra página se muestra en nuestro prototipo. Entonces si lo estiramos, veremos más y más en una página. Lo que queremos hacer es que queremos seguir adelante y establecer esto para que sea la misma altura que los sitios reales del dispositivo iPhone son nuestro caso. Eso sería justo aquí donde estaba antes. Y así es lo que muestra esta línea de aquí. Ahora, un tema con un desplazamiento vertical, como mencioné, es el hecho de que nuestra barra de navegación y barra de estado aquí no deberían moverse mientras nos desplazamos hacia arriba y hacia abajo. Entonces, ¿cómo solucionamos eso? Pues bien, XD te da la opción seleccionar ciertos elementos en la página, independientemente de si tienes seleccionada la pestaña Diseño o el prototipo mientras tienes la barra de navegación somos seleccionado, obtendrá esta posición fija al desplazarse por debajo de la parte de desplazamiento. O si tu InDesign, verás esta posición fija al desplazarte. Ambos en realidad hacen lo mismo. Entonces si avanzas y haces click en eso, lo que va a pasar ahora es que si voy adelante y me desplazo en nuestro prototipo, la barra de navegación o la lana se quedan ahí. Pero por supuesto que nuestra barra de estado aún necesita repararse. Ahora la razón por la que esas barras de navegación en este momento detrás todas las otras cartas aquí es porque hemos complacido al principio y en nuestro panel Capas, debe ser menor que estos otros ítems. Y podemos confirmarlo yendo a nuestro panel Capas aquí. Y como mencioné aquí, como se puede ver, en la parte más baja de las capas, mientras que queríamos estar realmente en la parte superior. Y como pueden ver, ahora iremos adelante y cubriremos en nuestro prototipo, lo cual es impresionante. Ahora, una cosa que queremos hacer es subir la barra de estado porque eso debería estar encima de la barra de navegación. Y haz lo mismo. Hacer posición fija al desplazarse. De nuevo, puedes hacer lo mismo en modo prototipo y puedes seguir adelante y hacer clic en posición fija y al desplazarte, y lograré el mismo resultado para ti. Perfecto, Entonces así es como arreglas objetos. Entonces, cuando estás desplazando y prototipo, ahora ¿qué conexiones necesitamos de aquí? Necesitamos una conexión para llevarnos vuelta a la página del restaurante de aquí. Y necesitamos uno para llevarnos a la página del carrito o a la página de pedidos en realidad tal vez conecte una de estas tarjetas para ir también a esa página de pedido. Ahora que estoy pensando que aquí un botón estaría bien en nuestra página de menú. Tan similar a la que tenemos en nuestra página de historial de pedidos. Por lo que en lugar de iniciar un nuevo pedido, pueden ir a su carrito o pueden seguir adelante y completar los pedidos. Así que volvamos a cambiar hacia la pestaña Diseño. Y de nuevo, la gran parte de prototipos es que a medida que estás pasando por el prototipo, empiezas a darte cuenta ciertos elementos de experiencia de usuario que te faltan. De esta manera, puedes seguir adelante y copiar esos elementos o crear esos elementos en tus diseños medida que estás pasando por prototipos. Así que vamos a seguir adelante y copiar estas dos capas ese rectángulo, eso es un degradado por aquí y el botón usando el Comando C y volver a la página del menú y copiar esas o pegarlas aquí. Debido a que esto está fuera de nuestro puerto de vista por aquí, realmente no podemos verlo. Por lo que queremos seguir adelante y llevar esto por encima de esta línea a la derecha cuando toque esa línea. Y vamos a seguir adelante y hacer posición fija al desplazarse por ambos para que de esta manera no se muevan. Creo que eso se ve bastante bien. Ahora en lugar de un comienzo, entonces en lugar de comenzar un nuevo pedido, esto debería decir ir al carrito o ir a la orden. Ahí vamos. Para que puedas seguir adelante y presionar esto del trimestre o un año para ir a la misma página. Vamos a crear esas conexiones con el botón aquí abajo y una de las cartas de aquí. Para ello, vamos a ir a la opción de restaurante por aquí, cambiar por dos prototipos. Ahora recuerda, puedes crear otro tipo de interacción en lugar de eso, que es crear esa interacción. Y en la parte superior en lugar de transición, puedes hacer Mesa de Trabajo Anterior que hará lo mismo. Por lo que eso llevará al usuario de vuelta a la mesa de trabajo anterior de la que provenían. En este caso, si presionan este botón y presionan restaurante, los llevará de vuelta a esta página. Entonces, en lugar de crear una conexión de nuevo a esta página, también puedes hacerlo. Eso es super cool. También crea una conexión entre nuestras tarjetas a la página de pedidos o una alfombra. Y por aquí y el botón de ir a Pedido de aquí, haz clic en ese botón del carrito aquí arriba, arrastra la conexión. Y voy a dejar todo como está por aquí. Para la página de la orden go-to. Voy a hacer lo mismo. Ahora nuestras conexiones para esa página deben completarse ahora. Ver, Perfecto. Eso es bastante bueno. Volvamos en la próxima conferencia para seguir creando más conexiones. 82. Crea conexiones componentes: Entonces con esas conexiones creadas entre el menú y la página de pedidos, ahora incompleta o página de pedido y las conexiones en modo prototipo. Vamos a seguir adelante y dar click en eso de vuelta a Menu y seguir adelante y haga clic en este botón aquí para crear una conexión. Y vamos a seguir adelante y dar click en mesa de trabajo anterior. Y mientras estamos aquí, ¿por qué no seguir adelante y conecta nuestro botón de menú por aquí a ese perfil de barra de menú aquí arriba. Adelante y minimiza eso para que podamos ver aquí. Y vamos a hacer una transición aquí. Y lo vamos a hacer, en lugar de disolver, vamos a hacer deslizarnos hacia arriba. Por lo que se desliza hacia arriba de la pantalla. Ahora que hemos creado esa conexión, por supuesto puedo seguir adelante y añadir la misma conexión entre nuestro botón de menú en esta página y el menú aquí arriba también. Pero una cosa que podemos hacer porque estamos creando la misma conexión entre ese botón y la misma página, es que en realidad seguimos adelante y creamos un componente de ese ícono de menú. Ya que lo hemos usado en múltiples lugares también. Y luego solo crea la conexión una vez y se hace con ella y todas las demás páginas. Entonces para hacer eso, volvamos a pasar a nuestra pestaña Diseño. Vamos a seguir adelante y copiar uno de los botones de menú a nuestros componentes aquí. Vamos a seguir adelante y golpear al Comando K para que eso sea un componente. Y me gustó el nombre tal como es, icono del menú de hamburguesas. Y ahora por aquí, vamos a seguir adelante y ahora vamos a seguir adelante y arrastrar aquí este ícono del menú de hamburguesas. Y simplemente colóquelo encima de aquella otra que tenemos. Y voy a seguir adelante y primero copiar éste, y luego volver a las capas y eliminar este otro grupo debajo de él para el otro, para el que no es una instancia. Y hagamos lo mismo por nuestra página de pedidos. Vamos a seguir adelante y eliminar esto y hacer clic en toda la mesa de trabajo y golpear Comando V. Lo mismo para el orden Página de progreso Comando V, porque hemos eliminado esa ahora esa conexión que teníamos sobre ya se ha ido. Pero lo que podemos hacer ahora es seguir adelante e ir a nuestro componente, volver al prototipo y conectar este botón o este componente a esta página de perfil. Vamos a dejar las opciones que se deslizan hacia arriba, facilitan entrar y salir y 0.4 segundos. Y así ahora lo que sucederá es en todas partes que estemos usando ese botón tendremos esa conexión entre la parte inferior y esa página de menú. Acabo de notar que no copié correctamente la instancia en mi página principal. Así que voy a seguir adelante y simplemente borrar ese aquí y copiar uno de aquí a nuestra página principal, así que es la adecuada. Ahora, si realmente haces clic en cada uno de esos botones de menú, verás que la conexión se ha copiado desde esa conexión de componente que hemos creado. Adelante y simplemente mueve esto por aquí con mi otro botón de cerrar y luego haga clic en la página principal y presione la vista previa del escritorio. Puedo ir al menú desde aquí. Si hago clic en la página de pedido, puedes ir a la conexión desde ahí. Lo mismo de la página de progreso de la orden , que es impresionante. Entonces así es como realmente puedes usar componentes para crear una conexión y hacer que todas tus instancias copien o lleven esa interacción a lo largo de tus diseños. Ahora vamos a seguir adelante y completar la página de pedidos y las conexiones por aquí. Queremos seguir adelante y conectar la orden policiaca a la página de Progreso de la orden. Para la transición, vamos a hacer ligeramente a la izquierda. Mantén todo lo demás tal y como está en nuestra página de progreso de orden. Vamos a seguir adelante y dar click en esta nota y crear la acción anterior de mesa de trabajo. Entonces esas son las conexiones para nuestra página de pedidos. Volvamos en la siguiente conferencia para trabajar en nuestra página de progreso del pedido y aprender cómo podemos abrir superposiciones usando prototipos. 83. Crea superposiciones: Creo que es hora de que intentemos la superposición porque en nuestro orden Página de progreso aquí, como mencioné en las conferencias anteriores, queremos seguir adelante y crear una conexión entre nuestro orden de edición sobre aquí y esta hoja de acción de la interfaz de usuario por aquí. Para hacer eso. En lugar de tener esto abierto como una página separada, lo cual no sería correcto. Lo que queríamos que hiciéramos es aparecer encima de esta página como superposición. Para ello, simplemente podemos crear una conexión en nuestra pestaña de prototipo entre nuestro orden de edición y nuestra hoja de acción por aquí. Pero una cosa que podrías notar es que si intentas crear una conexión en este momento, no funcionará porque nuestra hoja de acción es en realidad en lugar de nuestra pasta y no está en un tablero de arte. Así que en cualquier momento que quieras crear una conexión, necesitas tener un tablero de arte alrededor de ese objeto. Así que para arreglar eso, volvamos a dar vuelta a nuestra pestaña Diseño y golpear. Adelante y dibuja un tablero de arte alrededor de esta hoja de acción. Vamos a seguir adelante y quitar el relleno porque no queremos sentirlo. Voy a seguir adelante y salir de esa mesa de arte y simplemente asegurarme de que nuestras hojas de acción centraran aquí una mesa de trabajo más larga. Creo que eso es bastante bueno aquí mismo. Vamos a seguir adelante y cambiar el nombre de esta hoja de acción o editar orden. Y ahora podemos seguir adelante y crear esa conexión en el modo prototipo entre ese orden de edición y nuestro tablero de arte de hoja de acción. Pero en lugar de transición, vamos a seguir adelante y hacer clic en la superposición. Y para que como se puede ver la línea aquí, cambió algo a una línea discontinua para mostrar esto como una superposición y no una transición. Las opciones aquí son más o menos las mismas. Es preguntarte de dónde quieres animar? Y por lo general las hojas de acción se animan hacia arriba desde la parte inferior de la página. Y entonces lo que sucederá es que vas a conseguir este pequeño pop-up por aquí donde va a seguir adelante y preguntarte, ¿ dónde quieres que esa superposición salga realmente para que en realidad pueda seguir adelante y elegir. Estamos exactamente en mi página. ¿ Quiero que eso salga? ¿ Quiero que esté en el centro, pero quería estar en la parte superior o quiero que sea en el fondo. Puedo mover eso como me gustaría. Normalmente tenemos esto en la parte inferior y como se puede ver, creará ese tipo de efecto de superposición. Así que me va a mostrar cómo sería eso en realidad incluso una vez que se hace ligero en mi página, creo que por aquí es perfecto. Ahora por defecto obtendrás esta conexión aquí, que por encima, vamos a seguir adelante y te llevaremos a la Mesa de Trabajo Anterior. Entonces si haces clic en cualquier parte de la hoja de acción, se irá adelante y esencialmente te llevará a la mesa de trabajo anterior, lo que significa que seguiremos adelante y cerraremos esa superposición. Podemos probar esa superposición previsualizando todavía por aquí. Y adelante y da clic en esta página. Por lo que saltamos directamente a esta página haciendo clic en Editar orden, esa hoja de acción va a aparecer y haciendo clic en cualquier lugar. Vamos a seguir adelante y descartar eso. Usted hace clic en cualquier lugar fuera. También desestimará esa hoja de acción. Entonces en este punto, si vas adelante y asignas alguna conexión que quieras, por lo que si quieres crear, digamos una página para que cancelen su pedido o contacten con restaurante. Se puede hacer eso también. Pero esencialmente así es como creas superposiciones en tus diseños. Esta es una manera genial de tableros de arte pop uno encima del otro lugar de transicionar entre ellos. Ahora, viene en la próxima conferencia para explorar auto animate en prototipado. 84. Uso de Auto-Animate: Con el propósito de mostrarte cómo funciona el auto animate en prototipo. Porque creo que es super cool y puede ser realmente útil en las UIs más complejas. Lo que quiero hacer es seguir adelante y duplicar este pedido Página de progreso y crear otro estado de ese orden Página de progreso. En esencia, podemos tener otra etapa donde el avance de este pedido podría ser entregado o tal vez en su camino al cliente. Entonces vamos a seguir adelante y solo hacer dos pequeños cambios y ver cómo funciona el animate automático. Y para hacer eso, voy a seguir adelante y simplemente mover esta hoja de acción aquí abajo. Adelante y haz clic en mi pedido Página de progreso, cambia a pestaña de diseño y pulsa Comando D. Lo que quiero en esta página es seguir adelante y mover el círculo a algún lugar por aquí, más cerca entregado usando Mayús y las teclas de flecha derecha. Y en lugar de decir que su pedido está siendo preparado por el restaurante o vamos a seguir adelante y cambiar esto a su pedido está siendo entregado a usted por Sam. Adelante y sal de ahí. Ahora el resto de las cosas aquí, queremos seguir adelante y mantenerlo igual que en nuestro agua y nuestra página de progreso de orden. Vamos a seguir adelante y crear una conexión entre el orden de RVU. Adelante y haz clic en el nodo aquí y hazlo en la parte superior. Adelante y dirígete a la Mesa de Trabajo Anterior. El menú ya está conectado porque es un componente. Y dos conexiones que queremos crear aquí es seguir adelante y crear una conexión entre la dirección de aquí a nuestra página de ubicación aquí arriba. Y en lugar de superposición quería transición, quería deslizarme hacia arriba. Pero lo genial con los prototipos, si tienes la misma conexión entre los mismos objetos en diferentes páginas, puedes seguir adelante y presionar Comando C en esa conexión. Haga clic en su otro tablero de arte donde tenga ese botón y pegue esa conexión ahí también. Y adelante y pega esa misma conexión entre todas tus páginas. Ahora ese botón está conectado y todo lo que necesitamos hacer es crear una conexión entre este orden Página de progreso al guión de progreso de la orden uno. Vamos a seguir adelante y en realidad cambiar el nombre de esto para arrojar siendo entregado. Ahora, sigamos adelante y creemos una conexión desde esta página a esta página por aquí. En lugar de tap, vamos a seguir adelante y hacer tiempo. Y para el retraso, escojamos aquí cinco segundos. Por supuesto, es una gran velocidad de entrega si eso fuera en tiempo real. Vamos a seguir adelante y elegir tipo auto animate. Eso es lo que sucederá es que XD intentará animar todos los ítems y los objetos en esa página Hacia los ítems de esta página. Entonces si los mismos ítems están presentes, seguiremos adelante e intentaremos crear una animación entre esos ítems, posiciones o texto y así sucesivamente y así sucesivamente. Porque nos movemos, por ejemplo, esta elipse por aquí, XD seguirá adelante y entenderá que es la misma elipse y vamos a seguir adelante y animarla entre esas páginas. Así que sigamos adelante y cerremos aquí nuestro prototipo. Selecciona la página Progreso de pedidos, y luego sigue adelante y haz clic en esta nuestra vista previa. Y voy después de cinco segundos, esta página debe animarse automáticamente hacia esa otra página, lo cual es impresionante. Como se puede ver, la elipse se movió aquí y los textos se desvanecieron entre esos dos estados diferentes. Esto es bastante genial. Realmente puedes jugar con eso y mover objetos alrededor. Una cosa que sí quieres notar es que no quieres leer las páginas animadas automáticas que no tienen nada que ver entre sí. Porque va a seguir adelante y crear alguna animación de aspecto extraño que en realidad no es realista. Desea utilizar la función de animación automática entre páginas similares donde se comparten la mayoría de los elementos. Es por eso que estas dos páginas tienen sentido en términos de usar auto animate. Pero no me dejes tanto. Las páginas entre el restaurante y la página de menú. Eso es esencialmente auto animate y cómo podemos crear algunas animaciones geniales con la ayuda de XD haciendo la mayor parte del trabajo en modo prototipo. Cuando volvamos en las próximas conferencias y completemos las conexiones aquí arriba. 85. Completa nuestro prototipo: Hemos hecho un trabajo increíble. Entonces por armar el prototipo para nuestras mordidas saludables maquetas móviles. Déjame seguir adelante y completar nuestra maqueta creando el resto de las conexiones en nuestras otras páginas. Subimos aquí para ver qué más nos queda, empezando desde la página de menú muy arriba a la izquierda o de perfil. Vamos a seguir adelante y vincular cada botón el lugar adecuado. En primer lugar, noté que hay un error aquí por un botón de inicio de sesión de cierre debería estar en realidad en la parte inferior. Vamos a seguir adelante y simplemente arrastrarlo todo el camino hasta el fondo. Una cosa genial de las pilas es que puedes seguir adelante y reemplazar fácilmente tus botones. Se romperá a la derecha en su lugar. Vamos a seguir adelante y asegurarnos de que esté en el lugar correcto. Por lo que ahora vamos a seguir adelante y vincular cada botón a donde deben ir. No tenemos una página de cuenta que vamos a dejar ese botón en paz para nuestro pago. Queríamos ir a la página de pago Y vamos a seguir adelante y cambiar el auto animate a transición. Te vamos a mostrar la animación para deslizar a izquierda para nuestros pedidos pasados. Vamos a seguir adelante y vincularlo a nuestra página de Pedidos pasados. Y dejar todo como está para dirección. Vamos a seguir adelante y enlazar a nuestra página de ubicación. Deja todo como está, y nuestro cierre de sesión nos llevará de vuelta a la página de inicio de sesión de aquí. En lugar de deslizar a la izquierda. Y vamos a seguir adelante y elegir disolver para la animación hacia la página de cierre de sesión para la x de aquí, vamos a seguir adelante y hacer clic. Yo seguiría adelante y seleccionaría. En lugar de transición, vamos a hacer Mesa de Trabajo Anterior. Por lo que seguiremos adelante y cerraremos esa ventana y regresaremos a donde sea que viniera. Para nuestra página de pago, sigamos adelante y conectemos el botón Atrás para seguir adelante y hacer clic y hacer. Escriba mesa de trabajo anterior también para agregar una página de pago. Si has juntado esa página de pago que se dio como una asignación, puedes seguir adelante y vincularla a tu página de detalles de pago. Si no, puedes dejar eso como es lo mismo con la tarjeta add. Vamos a seguir adelante y pasar a nuestra página de ubicación y vincular nuestro botón Hecho para agregar una interacción aquí y hacer tipo Mesa de trabajo anterior. Lo mismo con esta dirección de aquí. Vamos a sumar una interacción y a la Mesa de Trabajo Anterior. Todo lo demás se ve limpio. Y para nuestra página de Pedidos pasada, la única conexión es que queremos hacer aquí es el botón de retroceso aquí arriba. Por lo que vamos a hacer de nuevo tap y Mesa de Trabajo Anterior para nuestro anuncio. Queríamos ir al restaurante pegar ellos pueden navegar por los restaurantes y comenzar nuevo pedido. Vamos a hacer disolver para la animación e iniciar un nuevo orden. También haremos lo mismo. Volver a nuestra página principal se disolverá como la animación. Sigamos adelante y previsualicemos nuestro prototipo en el modo de escritorio y solo veamos si les falta algo aquí. Así que por aquí vamos a seguir adelante y presionar login. Haga clic en Siguiente en nuestra verificación telefónica. Ahora porque sólo tenemos tres opciones, no hay desplazamiento aquí verticalmente. Podemos seguir adelante y dar click en el menú aquí para probarlo, cierra el menú. Vamos a seguir adelante y haga clic en esta primera opción, orden del navegador. Y vería que ya tenemos un tema aquí. Así que vamos a seguir adelante y asegurarnos de que nuestro botón ir al Pedido se pegue a la misma posición verticalmente. Así que seleccionemos el botón y hagamos posición fija al desplazarse. Y eso debería arreglar eso. Ahí vamos. Podemos hacer ir a pedido o tarjetas para ir a la página de pedidos. Desde aquí podemos hacer clic en la dirección para cambiar la dirección si lo desea o hacer clic en Listo. Veamos. Sí, para guardar dirección funciona demasiadas palabras de aquí para estar en su lugar. Nuestro orden, CR orden progresa, y luego después de un par de segundos debe cambiar a otro estado, lo cual es impresionante. Usando el auto animate. Esto debería funcionar demasiado perfecto. Por lo que no hemos vinculado ni reordenado botones. Vamos a seguir adelante y seleccionar eso en tipo. Anterior Mesa de Trabajo. Eso también debería funcionar. Ahí vamos. Colocar trabajos de orden. Muchas palabras de aquí también. No tenemos una página de cuenta. El pago funciona como se esperaba. Pasar órdenes funciona como se esperaba. Lo único que tenemos que hacer es simplemente bloquear esos, la barra de navegación y el botón de aquí. Entonces sigamos adelante y hagamos eso por aquí. Seleccionemos aquí el botón, mantengamos presionada la tecla Mayús y seleccionemos el rectángulo debajo. Hacer posición fija al desplazarse. Y lo mismo con nuestra barra de navegación y barra de estado aquí. Y asegúrate de traer estos dos todo el camino hacia arriba en nuestro panel de capas. Si te das cuenta, tenemos que traer nuestro nuevo pedido Start hasta aquí para que esté dentro de nuestro marco de viewport. Ahí vamos. Ahora eso debería preocuparse. Podemos empezar un nuevo pedido y golpear bocado a la página del restaurante y repetir ese proceso otra vez. Por último, si cierras sesión y seguiremos adelante y nos llevaremos de vuelta a esta página de inicio de sesión aquí. Entonces ahí lo tenemos. Ese es nuestro flujo para nuestro prototipo. Hemos reunido un prototipo realmente guapa y vamos a volver en las siguientes conferencias para probarlo en nuestro propio dispositivo móvil. Y luego aprende cómo podemos compartir ese prototipo con otros. 86. Vista previa de dispositivos móviles: Muy bien, Así que armamos nuestro prototipo y lo probamos en nuestra vista previa de escritorio, y se veía bastante bien. Ahora quiero seguir adelante y mostrarte cómo realmente puedes previsualizar tus prototipos en tu dispositivo móvil real. Si vas por aquí y haces clic en la vista previa del dispositivo, XD seguirá adelante y te pedirá que conectes tu dispositivo iOS o Android a XD usando un cable USB para seguir adelante y previsualizar tus diseños en tiempo real. Ahora para hacer eso, puedes seguir adelante y dirigirte a este enlace, o en tu App Store o Google Play Store, puedes seguir adelante y buscar Adobe XD. Y voy a cambiar rápidamente a mi teléfono ahora para mostrarte cómo funciona eso. Una vez que estés en tu App Store o Google Play Store, sigue adelante y busca Adobe XD. Este debería ser el que estás buscando. Es el Adobe XD. Podemos seguir adelante y previsualizar sus prototipos. Adelante y descarga eso. Una vez que haya terminado de instalar, vamos a seguir adelante y abrirla. Ahora puede avisarle acerca de las notificaciones y tal. Sólo voy a seguir adelante y omitir este paso por ahora. No, te van a pedir que ingreses dentro de la cuenta. Por lo que quiero continuar con Adobe e iniciar sesión con mi cuenta de Adobe. Una vez que hayas iniciado sesión, te llevarán a través del tutorial aquí donde podrás seguir adelante y aprender cómo puedes usar esta aplicación. Una cosa importante es tener cuenta que en cualquier momento se puede triplicar tap para acceder al menú mientras estamos probando o maquetas. Mientras estamos preparando nuestro prototipo, puedes hacer triple clic para ir al menú. Entonces eso es algo de lo que vamos a tomar nota. Entonces vamos a seguir adelante y hacer clic en OK, una vez que estés aquí, vamos a seguir adelante y hacer clic en esta pequeña pestaña aquí llamada Vista previa en vivo. Y luego voy a seguir adelante y agarrar mi cable USB. Tú haces lo mismo. Conecta eso a tu laptop y luego conecta tu teléfono. Una vez que está enchufado, x es automáticamente realmente lo abrió en la app como se puede ver, y nos está impulsando aquí que no señalé. Podemos triplicar tap para acceder al menú. Voy a seguir adelante y hacer clic de distancia. Por lo que en este momento nos llevó directamente a la página de inicio de sesión de mordeduras saludables. Por supuesto, al igual que antes, puedo seguir adelante y seleccionar unas páginas diferentes y ver esas páginas en mi dispositivo. Puedo seguir adelante e incluso hacer cambios. Por ejemplo, puedo seguir adelante y cambiar a mi pestaña Diseño aquí en XD, mover las cosas y al mismo tiempo ver esos cambios en vivo suceden en nuestra app, lo cual es super cool porque puedes hacer pequeños cambios y ver cómo se ven en un dispositivo real lugar de solo en un escritorio. Ya que esto realmente te da la representación visual de lo que el usuario verá y sentirá mientras está usando esta aplicación móvil. Ya que está destinado a un dispositivo móvil. Desde aquí, puedes seguir adelante e interactuar con tu prototipo. Como lo haces normalmente. Adelante para ir al menú, navegar por diferentes páginas tal y como esperarías, dos cosas a tener en cuenta es que si lo haces desplázate hacia la izquierda y la derecha, seguirá adelante y te mostrará diferentes páginas. puedas hacer eso también o puedes pasar por el prototipo real como lo harías. Podrías notar algunos de los botones aquí y cosas así podrían no aparecer correctamente. Si ves ese botón de signo de interrogación, generalmente significa que el ícono no era importante correctamente o que se mostrara correctamente aquí, una de las otras cosas geniales es que si haces clic en cualquier lugar aleatoriamente, XD lo mostrará o resaltará exactamente dónde debe estar haciendo clic para interactuar con el prototipo aquí. Entonces si hago clic en cualquier parte fuera de eso, se irá adelante y me mostrará. Sólo se puede tocar en estas áreas para interactuar con su prototipo en este tablero de arte específico, que es super cool. Entonces si voy adelante y triple toque en la pantalla, voy a seguir adelante y darme algunas opciones. Podemos seguir adelante y compartir ese verde como imagen de su vida. Hay un par de otras opciones para ocultar esos hotspots de los que acabamos de hablar o deshabilitado sitio para navegaciones para que puedas deslizar para navegar por este prototipo, tienes que en realidad interactúan con él. Puedes seguir adelante y jugar con esas opciones o puedes agregar cualquier punto, solo tienes que seguir adelante y salir del prototipo. Así es como puedes previsualizar tu prototipo en un dispositivo real. Volvamos en la siguiente conferencia para aprender cómo realmente podemos compartir ese prototipo con otros. Por lo que también pueden previsualizarlo también. 87. Compartir prototipos: Hemos creado este gran prototipo interactivo y funciona muy bien con eso. Siéntate en nuestra vista previa de escritorio y también en nuestros dispositivos móviles. Entonces, ¿cómo compartimos este prototipo con alguien más? También pueden explorar alrededor y ver cómo funciona este producto, ya sea un cliente o un miembro del equipo. ¿ Cómo compartimos realmente ese prototipo con ellos? Bueno, en realidad es súper simple. Dirígete a la pestaña Compartir. Y desde aquí, si lo hace simplemente crea un enlace para su piso por aquí. Entonces porque ya tenemos este flujo uno que creamos presionando crear enlace, no sólo estamos llevando aquí los diseños y los tableros de arte, sino también esa interactividad entre todos las páginas que creamos. Entonces una vez que se genere ese enlace, voy a seguir adelante y copiar ese enlace a tu navegador desde donde puedes ingresar esa URL en. Y ahora esta vez alrededor, como se puede ver, este diseño ahora funciona como un prototipo, similar a nuestra vista previa de escritorio. Si tocas en cualquier parte exterior, nos mostrará exactamente dónde está ese hotspot, donde podemos tocar e interactuar con nuestro prototipo. Esto es super cool, es, es exactamente lo que queremos para compartir con alguien. Y aún pueden dejar comentarios como lo harían con solo los propios diseñadores. Pero ahora este diseño es interactivo y el prototipo está disponible a través de ese enlace también. Ahora recuerda, ahora hemos creado un flúor. Entonces este es el flujo para los usuarios que son nuevos en la app. Pero también podemos crear otro flujo, por ejemplo, para un usuario que ya ha iniciado sesión en la app y no necesita pasar por las páginas de registro inicial. En la próxima conferencia vamos a explorar cómo podemos crear otro flujo. Pero antes de hacer eso, también quiero mencionar que puedes compartir totalmente este enlace con alguien que esté usando un navegador en tu dispositivo móvil y en realidad pueden previsualizar esta app en tu dispositivo. Ahora, la experiencia puede no ser tan buena como tenerla en la aplicación Adobe XD en tu teléfono o en el teléfono del cliente. Pero estará muy cerca de ella en cuanto a la interactividad y abriendo los diferentes enlaces y cosas al ver las diferentes conexiones que hemos hecho y tal. Entonces así es como compartes tu prototipo con otra persona. Y vamos a volver la siguiente conferencia y crear nuevo flujo para nuestro prototipo. 88. Flows múltiples: Aprendimos a crear un flujo en prototipo. Esencialmente, un flujo nos permite escoger dónde arrancan nuestros prototipos y dónde termina. Este flujo de corriente, que por defecto tiene el nombre de uno. usuario pasa por la pantalla de inicio de sesión, va a la página de inicio de sesión y así sucesivamente. Pero digamos que queremos crear otro flujo para un usuario que ya haya iniciado sesión y queremos que vayan directamente a la página principal. ¿ Cómo hacemos eso? Bueno, volvamos a nuestra página de prototipos y vamos a seguir adelante y hacer click en esta página principal y dar click en este pequeño ícono Home justo al lado de la página principal. Así que ahora hemos creado otro flujo que está en adelante ahora desde aquí, realidad podemos seguir adelante y elegir dónde estará nuestro punto de partida en ese nuevo flujo. Y si quieres seguir adelante y previsualizar ese flujo, podemos seguir adelante y dar click en el flujo. Y podemos seguir adelante y renombrar el flujo. Entonces en lugar de flotar a, podríamos hacer usuarios firmados. Podemos cambiar este flujo hacia nuevos usuarios. Ahora, en nuestros usuarios de inicio de sesión, podemos seguir adelante y previsualizar cómo sería eso. Como se puede ver, fuimos directamente al restaurante lugar del nuevo flujo de usuarios. Si haces click en el nuevo flujo de usuario nos llevará por el flujo de registrarte y todas esas páginas antes de llegar a la página principal. Ahora podemos incluso seguir adelante y compartir ese flujo específico con otra persona. Al elegir los usuarios de inicio de sesión, puede crear un enlace y compartir ese enlace en lugar del nuevo enlace de flujo de usuario. Ahora una cosa que sí quiero señalar es que si no tienes la cuenta actualizada, podrías estar limitado a un solo flujo. que puedas seguir adelante e ir a los enlaces gestionados por aquí y seguir adelante y eliminar cualquier otro flujo y asegurarte de que eres solo tienes un piso para poder compartirlo o crear eso enlace en Adobe XD para ello. Así es como puedes crear múltiples pisos para tu prototipo, dependiendo de qué etapa pueden agregar los usuarios o qué tipo de usuario son y así sucesivamente y así sucesivamente. Cosas bastante cool que podemos crear esos múltiples flujos. De esta manera podemos proporcionar a nuestros clientes que accedan a ciertos flujos diferentes. Cuál podría ser la diferencia entre cada estado. Con nuestro prototipo y marcas durante las prisas que se completan, solo nos faltan algunas cosas. Aquí hay algunos retoques que prometí que volveremos y eso es un poco de animación en nuestras páginas de progreso de pedidos. Entonces, ¿por qué no volvemos en la próxima conferencia y usamos un plugin llamado Lottie para agregar esas animaciones en. 89. Animación en Lottie: Son nuestros prototipos que se ven geniales. Quiero seguir adelante y añadir un poco de animación al orden de la página Progreso. Si te acuerdas. Para la página de progreso del pedido, dejé un poco de espacio aquí para mostrar al usuario en qué etapa se les ordenan los preparativos. Agregar un poco de animación a tu diseño realmente puede mejorar la calidad de la experiencia del usuario y todo el diseño. Y un gran recurso para hacer eso es la herramienta aquí llamada archivos de Lottie. Puedes ir al lobby files.com, deletreado así. Una vez que estés ahí, vamos a seguir adelante e inscribirnos para una cuenta. Una vez que hayas iniciado sesión, vamos a seguir adelante y continuar aquí. Puedo seleccionar Diseñador. Vamos. Ahora estamos logueados aquí. Y ahora vamos a seguir adelante y vamos a ir a la pestaña de plugins de aquí. Vamos a seguir adelante y añadir un plugin y buscar Lottie. Una vez que lo hagas buscar que el primero deba subir archivos Lori hacia adelante, nosotros XD, adelante e instalarlo. Podría tardar un segundo aquí. Una vez instalado, puedes seguir adelante y hacer clic en Open XD y utilizarlo desde aquí. Ahora te pediremos que ingreses a través de tu navegador. Así que adelante y da clic en Iniciar sesión. Y una vez que haga clic en eso, le pedirá que otorgue acceso a sus archivos. Para seguir adelante y dar click en conceder acceso. Ahí vamos. Estamos iniciados sesión en nuestro plug-in de Adobe XD. Lo que estamos aquí, vamos a seguir adelante y pinchamos en la Búsqueda y búsqueda de cocina. Pensándolo bien, voy a usar esta de aquí o la comida de aquí. Así que vamos a seguir adelante y haga clic en el progreso del pedido y haga clic en eso un poco de animación. Ahora algunas de las animaciones tienen un fondo blanco. Entonces este que encontré no lo tiene. Entonces, que es lo que me gusta. Vamos a seguir adelante e insertar eso aquí. Queremos insertarlo como latae, que vamos a seguir adelante y ser jugables. Quieres que sea más pequeño para que esté encajando aquí. Ahora podemos prever esto para ver cómo se ve en tan solo un segundo. Ahora, debido a que se trata de un medio interactivo, puedes seguir adelante y elegir que reproducción en bucle, que es lo que queremos. Ya que queríamos seguir jugando una y otra vez y queríamos jugar automáticamente. Y luego podemos seguir adelante e incluso optar por editar la reproducción y agregar cualquier retraso o disparador o algo así. Pero realmente no queremos cambiar eso. Así que vamos a seguir adelante y volver a nuestro diseño y elegir jugar automáticamente, y luego seguir adelante y previsualizar esa página en nuestra, voy a seguir adelante y simplemente volver aquí y previsualizar esa página en nuestro escritorio vista previa. Creo que eso se ve bastante guay. Hacemos que parezca un poco más pequeño para que no interactúe ni se superponga con las otras partes de nuestros diseños aquí. Entonces creo que eso se ve mejor, Así que sí, eso se ve mucho mejor. Perfecto. Por lo que te dejaré la página de progreso del pedido que te entregaré como ejercicio para hacerlo, adelante y usa Lottie para encontrar una animación para tu página de entrega, y luego lo haremos juntos en la siguiente conferencia. 90. Añadir una animación de entrega: Veamos si podemos llegar a una animación para usar en nuestra página de ser entregados también. Adelante y minimiza esto y regresa a los archivos de Lottie. Y voy a seguir adelante y hacer clic atrás y vamos a buscar la entrega. Veamos qué viene ahí arriba. Ese se ve genial. En realidad. También lee la versión por aquí. Así que sigamos adelante y seleccionemos éste por aquí e insertarlo en nuestra página de ser entregados como Lawdy, yendo a seguir adelante y hacerla un poco más pequeña. Y colóquelo en medio de nuestra pantalla por aquí. Asegúrate de que esté centrada. Perfecto. Ahora. Ahora vamos a seguir adelante y cerrar esto. Y ahora el tema aquí con la vista previa del escritorio es que si hacemos bucle esa animación, no nos llevará a esa otra página después cinco segundos como teníamos antes. Entonces una cosa que voy a hacer en la pestaña Prototipo es que voy a seguir adelante y cambiar esta vez para tocar en su lugar para que cuando tocamos en la página, vamos a seguir adelante y llevarnos a esa otra página. Al igual que con las animaciones en su momento, característica en la interacción prototipo no funciona tan bien. Adelante y prueba eso. Ahora, tenemos esta página y luego si hace click, tenemos la página para la entrega. Creo que esto se ve bastante bien. Como se puede ver, la animación es realmente condimentar nuestros diseños. Y me gusta mucho lo que hemos hecho hasta ahora. Una cosa que noté es que nuestro orden de vista aquí no funciona tan bien porque se supone que nos lleva vuelta a la página de pedidos, pero no lo hace. Entonces en lugar del grifo a Mesa de Trabajo Anterior, en realidad vamos a enviarlo al tablero de arte de pedidos. En lugar de disolver, vamos a hacer tasa leve. Vamos a probar eso. Vale, eso se ve bien. Ahora funciona como se esperaba. Siéntete libre de pasar por tus diseños y tus prototipos. Y si hay pequeños cambios que debes hacer en el camino, por favor haz esos y asegúrate de que tu diseño esté pulido antes de enviarlo a un cliente o a un colega. Ahí lo tenemos. Así es como puedes usar las animaciones de Lottie para crear pequeñas animaciones geniales dentro de tus prototipos con bomba falsa. Otra cosa genial que puedes hacer es realmente importar videos y usar videos similares a cómo usamos estas animaciones en tus diseños. He puesto un video en los recursos para este proyecto como un pequeño ejercicio, quiero que sigas adelante y uses ese video como fondo en esta página de inicio de sesión. Y luego adelante y también poner una superposición encima de ella para que no se mezcla con nuestro primer plano aquí, que son los campos y los botones y el logotipo. Entonces adelante y tómate un segundo para hacer eso. Y luego la siguiente conferencia, vamos a insertar ese video juntos también. 91. Cómo agregar videos: Bien, así que vamos a seguir adelante e insertar un video en nuestra página de inicio de sesión. Entonces, en los recursos o los activos de la aplicación para este proyecto, deberías encontrar una página de inicio de sesión, dash video dot mp4. Este video ha sido descargado cortesía de Pexels.com. Proporcionan grandes recursos. Ahora, tengo que darle crédito a pixels.com por brindar este video. Tienen toneladas de videos que puedes buscar para tus proyectos y son uso completamente gratuito, lo cual es increíble. Entonces te dejaré explorar este recurso. Pero mientras tanto, sigamos adelante y aprendamos cómo podemos insertar este video en nuestra página de inicio de sesión. Así que al igual que las imágenes, importar videos es tan simple como arrastrar un video a tu archivo XD. Ahora una cosa a tener en cuenta es que tu video tiene que tener un máximo de 15 megabytes. Por lo tanto, es posible que necesites comprimir tus videos si es un poco más grande en tamaño. Este, como puedes ver, ya es enorme, así que quizás tengas que seguir adelante y antes que nada, asegurémonos de que estamos en nuestra pestaña Diseño y sigamos adelante y encojamos o video para que se ajuste a nuestro marco por aquí y luego seguir adelante y centrarlo a lo largo. Asegúrate de que esté cubriendo completamente la altura. Queremos seguir adelante y colocar este video todo el camino en la parte inferior de la página. Probablemente sea un buen momento para cambiar nuestro logotipo de mordiscos saludables. Ve a la biblioteca y establece esto como nuestro color de acento. Y lo mismo para nuestra contraseña olvidada aquí. No queremos que se fusione y queremos crear ese contraste entre el fondo y el primer plano. Ahora bien, si juegas a esto, veamos cómo sería esto en nuestra vista previa de escritorio. Y una cosa más queremos seguir adelante y configurar play on top, que reproduciría este video. Cuando tocamos el video, queríamos reproducirlo automáticamente. Quierohacer clic en esto. Y ahora desde aquí en realidad puedes seguir adelante y recortar el video. Podemos hacerlo más corto si quieres. Elige exactamente cuánto tiempo queremos que sea. Y podemos seguir adelante y optar por bucle, y si queremos que el audio se esté reproduciendo o no. Así que vamos a ir a silenciarlo. Podemos elegir incluso la foto en miniatura para ello desde aquí también. Entonces queremos hacer loop la reproducción e incluso podemos probar para ver cómo se verá a partir de aquí. O podemos seguir adelante y simplemente jugar nuestro nuevo flujo de usuarios y ver cómo resultaría eso. Hermoso. Creo que se ve increíble. Ahora está un poco abarrotado aquí. Entonces, si decides usar el video, sí te recomiendo sacar estas dos imágenes de los cuencos de comida para que podamos deshacernos de esos y solo hacerlo un poco más limpio aquí dentro. Ahí vamos. Mucho más agradable y mucho más ordenado. Y si quieres agregar una superposición a esta página, o podemos seguir adelante y simplemente crear una capa rectangular en parte superior para cubrir todo el tablero de arte. Da click en él y cambia el relleno a negro. Quitar la frontera y marcar el ritmo de la ciudad como queramos. Pero queremos seguir adelante y asegurarnos de que traemos esa capa rectangular encima del video y debajo de todo lo demás. Y así podemos seguir adelante y controlar esto basándonos en lo oscuros que queremos que sea el overlay versus el video. En este caso, en realidad podemos incluso seguir adelante y cambiar tu barra de estado a blanca. Ahí vamos. Creo que eso se ve mucho mejor. Entonces ahí lo tenemos. Así es como podemos agregar videos y fondos con Adobe XD. Ahora con eso, eso envuelve nuestro proyecto de diseño móvil. Hemos hecho un trabajo increíble y vamos a volver en futuras conferencias para trabajar en el sitio web o página de destino para picaduras saludables. 92. Requisitos requisitos de aterrizaje: O es así que hemos hecho un trabajo increíble con nuestra aplicación móvil y armando un prototipo y aprendiendo cómo podemos compartirlo con los miembros de nuestro equipo y compañeros y clientes y así sucesivamente. En esta parte del curso, vamos a seguir adelante y aprender cómo podemos realmente armar una landing page usando Adobe XD para el mismo cliente, mordeduras saludables. En esta conferencia, vamos a pasar rápidamente por algunos de los requisitos que tenemos para esta landing page, que esencialmente es un sitio web para esa empresa que permite a los usuarios aprenda más sobre lo que hace esa empresa en una especie de diseño de página web de una sola página. que puedan aprender más sobre las picaduras saludables antes de que decidan descargar la aplicación e inscribirse y utilizarla. Por lo que nuestros clientes nos han pedido que armemos cuatro secciones para esta landing page. Por lo que la parte superior y la primera sección, que suele ser lo que se ve en los sitios web hoy en día, es una pequeña sección de encabezado, que típicamente incluye algún tipo de imagen o video en el fondo, o algún tipo de diseño con logotipo, con una barra de navegación que nos permite ir entre diferentes partes de la landing page y un pequeño eslogan de empresas, que se proporciona todo en los recursos para la conferencia. Así que adelante y tómate un segundo para descargar ese recurso, que incluye todos los activos que necesitamos para nuestro diseño de landing page. También queremos un poco de sección Download Apps. Por lo que en esta sección tendremos una pequeña captura de pantalla de la app con Insignia Descargar para la App Store. Puedes seguir adelante y hacer clic en eso para descargar la app en su dispositivo. Y luego también quieren que incluyamos algunos otros restaurantes populares como pequeñas tarjetas. En una sección de restaurantes. Tendrá una pequeña sección de restaurantes donde presentaremos tal vez tres o cuatro de sus restaurantes y les permitiremos ver cualquier restaurantes o bytes poco saludables en una vista de tarjeta poco fresca. Y luego tendremos un pequeño formulario Contáctenos al final con algún nombre y campo de correo electrónico y una pequeña foto de su equipo. Bastante sencillo, bastante simple para la página de aterrizaje de Sección. Entonces cuando comenzamos nuestro proyecto de diseño móvil, como recuerdas, descargamos los activos de diseño completos de la aplicación. Ahora para este proyecto web, en realidad vamos a seguir adelante y usar la plantilla o el kit de plataforma bootstrap para XD. Si baja a este enlace por aquí, o si simplemente google Bootstrap, Adobe XD, deberías poder encontrar esta página donde podrás sacar a los niños desde aquí. A partir de aquí, vamos a seguir adelante y hacer click en conseguir el kit. Voy a seguir adelante y guardar ese expediente. Y eso debería descargar este kit de arranque XD por aquí, dxdy. Para que puedas seguir adelante y hacer doble clic para abrir eso usando Adobe XD. Una vez que se abra, podrás encontrar estos activos de framework bootstrap por aquí. Ya han reunido muchas de las cosas que vamos a usar en nuestros sitios web como carruseles o encabezados, pies de página, tarjetas de imagen, etcétera y así sucesivamente. Vamos a volver en las futuras conferencias para usar activos fuera de este marco en nuestra landing page para picaduras saludables. Bootstrap es un framework muy popular que te permite diseñar sitios web mucho más fácilmente porque muchos de los componentesya están diseñados y por lo que no necesitashacer un ya están diseñados y por lo que no necesitas trabajo redundante cuando estás diseñando. Ahí es donde estamos usando Bootstrap en este proyecto. Así que volvamos en la siguiente conferencia para esbozar un poco de pan en todo el tipo de alambres, a la derecha, con un XD en sí. Antes de seguir adelante y diseñamos lo real. 93. Cómo hacer Wireframing la página de aterrizaje: Ahora que sabemos son requisitos para este proyecto, y hemos ido adelante y descargado ese archivo Bootstrap XD. Vamos a seguir adelante y armar un wireframe de baja fidelidad para nuestro proyecto, correcto, con un XD en sí. Por supuesto, puedes seguir adelante y esbozar el wireframe al igual que lo hicimos para el diseño de aplicaciones móviles. Pero también puedes hacer este proceso en la propia XD. Algunas personas podrían encontrar esto un poco más fácil, lugar de cambiar de lápiz y papel a digital. Vamos a seguir adelante e intentarlo juntos en esta conferencia. Primero lo primero, voy a seguir adelante e ir a la página de inicio aquí. Y vamos a seguir adelante y crear un nuevo archivo web desde aquí. Y lo vamos a mantener como 1920 por 1080, que suele ser el tamaño predeterminado para un proyecto web. Así que sigamos adelante y abramos eso y ya estamos en un nuevo proyecto. Perfecto. Primero lo primero, vamos a seguir adelante y dar click sobre esto sin título de aquí para cambiar el nombre a sano por su página web. Adelante y guárdalo. Ahí vamos. Así que ahora hemos renombrado el archivo. Tenemos nuestro primer tablero de arte web por aquí, que es perfecto. Entonces en base a nuestro requisito de proyecto, sabemos que necesitamos cuatro secciones en nuestra página web aquí. Entonces, ¿por qué no seguimos adelante y hacemos este tablero de arte que tenemos tiempo suficiente para caber cuatro secciones. Queríamos esencialmente cuatro de estos para poder encajar en esta landing page. Entonces la altura aquí podemos ver es 1080, algo que podemos hacer, que es super cool. Y XD es que podemos seguir adelante y o bien sumar a esta altura haciendo plus. No lo sé, digamos diez píxeles, que ahora van a seguir adelante y hacer esto 1090. Podemos seguir adelante y en realidad hacer la multiplicación también. Entonces, ¿qué multiplicamos esto por cuatro? Y voy a seguir adelante y darnos exactamente la duración del proyecto que necesitamos. Por lo que esto va a representar nuestra landing page con cuatro secciones. Cerebro por supuesto es solo una página larga por aquí. Vamos a seguir adelante y crear un rectángulo para representar cada sección. Entonces, ¿por qué no seguimos adelante y creamos aquí un rectángulo para luego seguir adelante y cambiarlo a 1920 por 1080, que es del tamaño correcto por aquí. Y vamos a seguir adelante y simplemente poner abajo justo ahí. Vamos a seguir adelante y duplicar esa. Baje uno para representar nuestra segunda sección. Una vez más. Una última vez. Ahí vamos. Y ahora podemos incluso ver las secciones separadas por la frontera por aquí, cuales se librarán de unos 0.1. Otra cosa que voy a hacer es que voy a seguir adelante y habilitar una cuadrícula de diseño. Y vamos a dejar esto como es para 12 columnas. Y eso se ve bastante bien. Y Bootstrap tiende a usar el tipo similar de diseño para sus rejillas. Lo único que quiero hacer es seguir adelante y traer la opacidad de esta cuadrícula de diseño tipo de baja, por lo que apenas es visible. Lo suficiente para que podamos hacerlo funcionar sin que interfiera con nuestro diseño. Entonces ahora que tenemos esto, vamos a seguir adelante y armar el wireframe. Voy a usar rectángulos aquí hay un montón de veces para armar diferentes partes del wireframe que quiero. Y luego recuerda, vamos a seguir adelante y en realidad convertir esto en una maqueta un poco más adelante. Pero por ahora, sigamos adelante y creemos un pequeño rectángulo sobre esta altura por aquí y tomando el ancho completo. Así que esa va a ser nuestra barra de navegación. Voy a tirar de eso, poner eso en la parte superior. Queremos que esta barra de navegación tenga este botón principal por aquí, que a partir de ahí podremos seguir adelante y descargar la app quizá. Y vamos a seguir adelante y sólo traeremos eso aquí. Voy a usar mi rejilla de diseño ahí para espaciar todo. Y luego queremos algunos otros botones por aquí para las diferentes secciones de la app. Entonces por supuesto, estos botones podrían ser un poco más pequeños que estos, pero eso será en nuestra barra de navegación y ahí es donde irá. Vamos a tener una imagen en el fondo por aquí. Y luego del lado derecho aquí estoy pensando en poner el nombre de la empresa por aquí, mordeduras saludables, junto con el eslogan. Por supuesto, puedes seguir adelante e incluso añadir un texto aquí para explicar lo que queremos por aquí. Entonces, lo que vamos a hacer nombre de empresa, salir de ahí. Voy a seguir adelante y duplicar eso y hacer consigna de empresas. Recuerda que esto no tiene por qué ser perfecto. Sólo estamos armando esto para que sepamos qué va a ir a dónde. Y entonces vamos a tener los diferentes botones por aquí. Entonces vamos a tener uno que vaya a, Déjame seguir adelante y centro alinea aquel que va a los diferentes restaurantes, luego uno para que se contacten con nosotros, y luego uno para que puedan descargar la app. Así, tendrá la imagen en el fondo aquí. Estos se verían bien por aquí. Y sigamos adelante y dupliquemos esas dos capas por aquí. Por lo que esta será la sección donde irá nuestra app. Entonces vamos a tener, vamos a seguir adelante y línea central eso y hacer texto para descargar arriba. Y luego aquí abajo vamos a hacer un pequeño botón para que descarguen la app, descarguen algo a lo largo de estas líneas. Y luego vamos a seguir adelante y crear un pequeño rectángulo para mostrar dónde tipo de dispositivo nuestra aplicación móvil. Vista previa. Vamos a seguir adelante y duplicar uno de esos textos de aquí. Quita ese relleno de ahí, y haz una captura de pantalla. Sepa exactamente qué es esto. Y luego haremos nuestra sección de restaurantes aquí abajo. Haremos un poquito tal vez título por aquí que dice restaurantes populares con toda la tarjeta de aquí. Para nuestra tarjeta aquí, vamos a tener que simplemente estirar esto. Trae esto aquí y tal vez haga el nombre del restaurante. Y haz otro, otro rectángulo para la imagen del restaurante. Quita el relleno de aquí y haz imagen del restaurante. Ahí vamos. Entonces como estamos haciendo esto, quiero mencionar también que hay plantillas que puedes usar para wireframing en XD. Si haces un poco de búsqueda en Google para kits de wireframing o plantillas para XD, es posible que también puedas encontrar algunos no utilizados. Vamos a seguir adelante y duplicar este tipo de cartas cuatro veces. Vamos a seguir adelante y seleccionar todo por aquí. Agruparlos junto con el Comando G, creo. Parece que este de aquí no fue agregado al grupo. Entonces sigamos adelante y pasemos en el rectángulo 19 hacia ese grupo. Quita cualquier relleno. De nuevo, vamos a seguir adelante y espaciar las cosas hacia fuera para que encaje dentro de nuestra red. Algo así se vería bien. Y luego por último, tenemos nuestra sección Contáctenos. Entonces vamos a seguir adelante y copiar esto a un poquito Contáctenos. Texto por aquí. Junto a tal vez necesitamos la imagen del equipo de aquí. Entonces lo haremos, cuando hagamos una imagen desde aquí. Equipo de imagen tendrá nuestra forma por aquí en el lado izquierdo. Ponte en contacto con nosotros. Haremos algunos tipos de campos de textos aquí. Quitar el relleno aquí, hará nombre, campo de texto aquí y correo electrónico. Pequeño botón aquí para presentar. Eso será una especie de forma por aquí. Junto a la imagen del equipo. Mi wireframe, vamos a seleccionar todos estos rectángulos, capas y simplemente seguir adelante y bloquearlos así para que no se muevan. Eso. Puedo seguir adelante y luego seleccionar todos estos y agruparlos juntos y estos y agruparlos también. Creo que podemos traer este un poco de esta manera y dejar esa y traer este un poco más. Podría verse mejor. Entonces vamos a seguir adelante y simplemente centrar eso a lo largo de la página. Asegúrate de que todo lo demás esté un poco centrado a lo largo. Tipo de probar el espaciado de todo lo que tenemos y ver cómo se veía eso. Así que ahora si seguimos adelante y hacemos clic en nuestro tablero de arte y quitamos nuestra cuadrícula de diseño será capaz ver cómo sería este layout con un wireframe o cómo sería este sitio web basado en esto wireframe. Nuevamente, se supone que esto es algún tipo de plan para tu proyecto. Esto es sólo para darnos una idea de lo que debe ir, dónde, no exactamente cómo deben ser las cosas ni ninguno de los detalles de cuál es el color o cuáles deben ser las fuentes. Esto es simplemente para decirnos a dónde deben ir las cosas y qué debe haber ahí. Ahora que tenemos alguna idea usando este wireframe, volvamos en la siguiente conferencia para empezar con nuestro diseño de landing page. 94. Barra de navegación: Para diseñar nuestra landing page en por qué no seguimos adelante y duplicamos este tablero de arte por aquí al golpear el Comando D en él. Y luego vamos a seguir adelante y deshacernos de todo lo que hay dentro. Así que vamos a seguir adelante y simplemente seleccionar todas estas capas hasta los rectángulos para cada sección. Para una sección que tenemos. Vamos a seguir adelante y hacer clic en Eliminar. Vamos a usar esto y en realidad colocar nuestros diseños aquí. Vamos a usar el wireframe de este lado para realmente generar el marcado aquí. Vamos a seguir adelante y renombrar este tablero de arte, nuestra landing page. Ahí vamos. Y éste, nuestro wireframe, deja como referencia. Entonces lo primero que quería armar es la barra de navegación aquí arriba. Una cosa que noto que me falta es que típicamente en una barra de navegación, también tenemos un pequeño nombre de barra local de la compañía por aquí que en realidad trae al usuario vuelta a la parte superior de la página o de vuelta a la pantalla de inicio. Esto es lo que queremos en nuestra barra de navegación. Así que sigamos adelante y pasemos al kit de interfaz de usuario Bootstrap en XD. Y si no has descargado esto, asegúrate de seguir adelante y seguir las conferencias anteriores con el fin de aprender cómo puedes descargar esta. Una vez que lo tengas descargado, deberías poder encontrar aquí abajo una barra de navegación, como puedes verla como un tablero de arte llamado navbar, que es lo que estamos buscando. Entonces por supuesto, tienen diferentes tipos de barras de navegación que podemos seguir adelante y usar. Éste de aquí sería suficiente. Vamos a seguir adelante y copiarlo. A partir de aquí. Vuelve a nuestro sitio web de mordeduras saludables y pega eso. Aquí. Me pegaron aquí. Entonces vamos a seguir adelante y solo traeremos eso aquí arriba. Ahora porque sólo tenemos realmente una página o aquí no necesitamos realmente hacer de eso un componente. Así que sigamos adelante y utilicemos esto como está, estirarlo todo el camino a través de nuestro proyecto. Y en lugar de 56 de altura, vamos a dar esto como 70 de altura. Así que un poco más grande. Vamos a seguir adelante y ahora centrar estos enlaces y moverlos hasta el lado derecho aquí. Vamos a seguir adelante y habilitar nuestra cuadrícula de diseño por aquí. Lo que quiero hacer es seguir adelante y alinear estos cuadrantes, rejilla de ancho o diseño y este texto navbar también, que en realidad queremos seguir adelante y reemplazar con mordeduras saludables. Ahí vamos. Ahora los recursos para este proyecto aquí tenemos el logo. Vamos a arrastrar a uno por aquí. Y vamos a seguir adelante y sólo lograrlo. Hagámoslo. Ahora vamos adelante y bloqueemos las proporciones y hagamos el ancho 45, huelga 35. Piensa que eso se verá mejor. Aquí mismo, vamos a encajar eso y arrastrar o mordeduras saludables texto por aquí. Eso se ve bien. Ahora recuerda por las fuentes y los colores y cosas así, vamos a volver y aplicarlas más tarde. Por ahora, nos vamos a centrar en ser las cosas principales juntos. Entonces por aquí vamos a seguir adelante y aplicar los mismos restaurantes contáctanos y descargar app. Vamos a seguir adelante y eliminar este de aquí. Este vamos a hacer restaurantes. Por lo que realmente no necesitamos bajar tipo o tipo deshabilitado por ahora. Vamos a seguir adelante y simplemente duplicar eso dos veces y sí contacta con nosotros. Y ahora una cosa es que esto es en realidad un apilado, una cosa genial es que puedes seguir adelante y en realidad cambiar el espaciado entre estos botones por aquí. Para que puedas seguir adelante y hacer, es seguir adelante y hacer 20 pixeles entre ellos. Ahí vamos. Ese ya es 20. Perfecto. Así que en lugar de este restaurante, vamos a hacer descargar app, pero voy a seguir adelante y de hecho volver aquí. Y vamos a seguir adelante y arrastrar uno de estos botones, como el botón Buscar aquí desde esta barra de navegación. Porque sólo quiero el botón en sí en esta barra de navegación por aquí. Adelante y prueba eso en. Adelante y desagrupa aquí el componente para la barra de navegación. Y de esta manera podemos entrar y realmente colocar nuestro botón de búsqueda en la barra de navegación aquí. Y lo vamos a colocar en el fondo, lo que lo colocará en el lado derecho aquí. Consigue un rote, deshazte de este extra restaurantes y cambia este aumento para descargar la app. Perfecto. Desde aquí, en realidad seguiríamos adelante e incluso modificar el espaciado. Entonces sigamos adelante y aumentemos el espaciado aquí a 30. En realidad. Lo mismo por aquí. Entonces. Ahora si mueves esto aquí, debería verse mejor. Perfecto. Así que ahora al deshabilitar la cuadrícula de diseño, podemos ver nuestra barra de navegación se ve bastante bien por aquí. Con eso terminado, volvamos en la próxima conferencia para trabajar en el resto de nuestra sección de cabecera. 95. Sección de encabezado: Tienden a diseñar el resto de nuestra página de encabezado. Como mencionamos en el wireframing, queremos una imagen de fondo, pero con nombre de empresa y el eslogan por aquí. Entonces sigamos adelante y vayamos a las imágenes en los recursos de este proyecto. Y sigamos adelante y arrastremos esta foto de encabezado a nuestra página de destino. El dimensionamiento es demasiado grande. Sigamos adelante y sostengamos Turno y hagamos eso más pequeño mientras mantenemos la proporción. Vamos a poner eso justo aquí. Expande un poco fuera de nuestro tipo de altura aquí. Y lo que vamos a hacer es que vamos a seguir adelante y en realidad enmascarar esta foto a nuestro rectángulo una capa por aquí. Una vez que tengas eso por aquí, vamos a seguir adelante y desbloquear ese rectángulo una capa. Adelante y selecciona ambos y haz clic derecho a través de Máscara con Forma. Ahora esa imagen ha sido una especie de cultivos a las dimensiones de ese rectángulo y todo. Adelante y baje esa capa todo el camino. Y ese grupo de masas. Ahora tenemos la imagen. Vamos a seguir adelante y sumar un poco demasiado también. Y podemos hacer eso agregando un pequeño rectángulo en la parte superior. Por aquí. Trae esto justo por encima de nuestro grupo masivo, pon el campo a negro y nuestra opacidad abajo a, intentemos 30%. Piensa que eso debería ser lo suficientemente bueno. Ahora vamos a seguir adelante y añadir alguna capa de textos por aquí. En realidad en segundo pensamiento, hagámoslo un poco más oscuro, tal vez 38%. Así que sigamos adelante y añadamos algunos textos aquí. Pulsemos la tecla T en nuestro teclado. Adelante y escribe mordeduras saludables, y apenas podemos ver esto aquí. Así que vamos con un tamaño de fuente de 55. Vamos a intentar 75. Puede ser un poco más grande allí. Salgamos de ahí. Cambia el relleno a blanco. Muévete eso justo por aquí. Hagamos nuestra rejilla de diseño una vez más. Podemos alinear adecuadamente las cosas. Perfecto. Vamos a seguir adelante y crear un texto para el eslogan arrastrando por aquí a algún lugar por aquí. Vamos a hacer 45 por el tamaño de la fuente y se hará comida saludable entregada directamente a su puerta. Y con un solo clic, Ahí es donde consigna para la empresa aquí. Ahora, una cosa que no me gusta aquí es un espacio entre las dos líneas de aquí. Por lo que creo que podemos aumentar esto a partir de los 54 que tenemos que hacerlo. Vamos a probar 85. Eso es demasiado. Hagamos 65. Mejor. Ahora si desactivamos la rejilla de diseño, eso se ve bastante bien. Lo único que quiero hacer es derribar estos un poco más. Por aquí. Creo que las cosas se ven bien. Creo que quiero que mi superposición aquí sea un poco más oscura, así que voy a ir con un cuarenta y cinco por ciento en su lugar, sólo para que no tengamos mucha mezcla entre el primer plano y el fondo aquí. Creo que eso se ve bastante bien. Volvamos en la próxima conferencia para trabajar en nuestra próxima sección. 96. Sección de aplicación móvil: Por lo que hemos completado la primera sección de encabezado de nuestra página web aquí, lo cual es genial. Creo que se ve bastante bien. Y recuerdo que volveremos en futuras conferencias para cepillar nuestro diseño y que se vea aún mejor y le añada más estilo. Por ahora, vamos a seguir adelante y pasar a nuestra sección de aplicaciones móviles. Esta es la segunda sección de nuestra página web donde realmente queremos seguir adelante y poner una pequeña captura de pantalla aquí de la app, como se puede ver en nuestros wireframes, así como un pequeño texto para que descarguen la app y un pequeño botón Descargar para la app. Vamos a seguir adelante y armar eso en esta conferencia aquí. Entonces sigamos adelante y abramos nuestros recursos para este proyecto aquí. Y deberías poder encontrar esta app móvil dot PNG. Vamos a seguir adelante y copiar eso o arrastrarlo a nuestra página web. Vamos a seguir adelante y simplemente hacerlo un poco más pequeño y mantener Shift para mantener sus proporciones. Y las cosas en algún lugar alrededor, tal vez un poco más pequeñas, por lo que es totalmente adecuado. Efectivamente. Sección por aquí. Un poco más grande que este tipo de centro que a lo largo. Ahí vamos. Creo que eso se ve bastante bien. Y ROS sigue adelante y habilita nuestra cuadrícula de diseño una vez más. Y usa eso para nuestra ventaja cuando estamos alineando las cosas perfectas. Así que sigamos adelante e insertemos algunos textos del lado izquierdo por aquí. Si vuelves a los recursos, podrás encontrar el texto de muestra punto TXT. Y ahí debes encontrar la sección de aplicaciones de descarga. Y para el texto aquí solo vamos a hacer descargar la app para almacenar tu pedido hoy mismo. Tipo de copia que se acabó. Por qué no seguimos adelante y simplemente arrastramos uno de los cuadros de texto, este de aquí, aquí abajo. Y en lugar de blanco, vamos a seguir adelante y cambiar el relleno a color gris. Algo a lo largo de esta línea funcionaría. Vamos a seguir adelante y alinear eso y traerlo a algún lugar por aquí. Y voy a hacer doble clic y cambiar el texto a lo que tenemos. Ahí están nuestros textos, o queremos seguir adelante e introducir un botón aquí también. Entonces al conducir ese botón hasta aquí, componentes internos, deberíamos tener un botón por aquí. Hay un botón de éxito predeterminado, y sólo podemos entrar aquí. Esto es de la plantilla Bootstrap que por lo que sólo vamos a seguir adelante y cambiar el texto de este botón para descargar. La app. Compramos aquí es un poco demasiado pequeño. Entonces, ¿por qué no seguimos adelante y editamos el relleno por aquí para agregar más espacio entre el texto y el rectángulo. Entonces en lugar de nueve y hacer esto 120. Lo mismo aquí para el 16, vamos a cambiar esto a 40. Aquí. Eso se ve mejor. Podemos simplemente alinear eso aquí arriba. Eso es bueno. Vamos a seguir adelante y apagar nuestra cuadrícula de diseño solo para ver cómo sería eso. Se está uniendo lentamente. Entonces esa es nuestra sección de aplicaciones móviles que regresa en la próxima conferencia para trabajar en nuestra sección de restaurantes populares aquí. 97. Sección de restaurantes: Queremos seguir adelante y pasar a nuestra sección de restaurantes por aquí. Entonces para poder trabajar en esta parte de la aplicación, vamos a seguir adelante y abrir nuestro kit de interfaz de usuario de Bootstrap una vez más. Si no tienes este archivo a mano, deberías poder encontrarlo desde tus archivos recientemente abiertos, los cuales estarían disponibles en Archivo y Abrir Reciente. Así que adelante y encuentra ese kit de interfaz de usuario de Bootstrap que has descargado. Lo que queremos ahora es usar la interfaz de usuario de la tarjeta que tienen. Entonces, ¿por qué no seguimos adelante y encontramos una interfaz de usuario de tarjeta que funcione para nuestras tarjetas de restaurante. Si acercamos aquí, lo haremos, encontraremos un pequeño tablero de arte de tarjetas. Ahora, me gusta este de aquí. Cuando sigamos adelante y usamos éste, haz doble clic para seleccionarlo y seguir adelante y copiar eso. Cambiando a nuestro proyecto de landing page. Y adelante y pega eso por aquí. Vamos a seguir adelante y simplemente hacer esto un poco más grande. Por lo que se está rompiendo a esa parte de la rejilla. Queremos hacer algunos pequeños cambios a esto. Trae el título y la descripción aquí abajo. Para el botón aquí, quiero seguir adelante y centrarlo. Y por la imagen. Volvamos a nuestro panel de capas. Para nuestra imagen de aquí, quiero seguir adelante y hacerla un poco más grande. Justo por aquí. Perfecto. como aprendimos en nuestro proyecto de diseño móvil, podemos usar pilas y hacer una pila horizontal o podemos usar la rejilla de repetición. Esto es lo que voy a hacer aquí. Quiero hacer Repetir Grid. Y en lugar de ir vertical, que era lo que estábamos haciendo en nuestra app móvil, vamos a ir horizontales esta vez con una rejilla repetida hasta aquí. Entonces tenemos cuatro. Vamos a seguir adelante y simplemente ajustar el dimensionamiento por aquí para que todo coincida con nuestra cuadrícula de diseño. Y ahí vamos. Ahora eso está arreglado. Vamos a seguir adelante y copiar el texto. Mordeduras saludables por aquí o por aquí abajo. Cambia el relleno a este color gris que tengo para el texto aquí. Adelante y selecciona eso e insumos que se apodera de aquí y haz populares restaurantes de descanso. Ahí vamos. Apagemos nuestra cuadrícula de diseño. Lo necesito más. Ahora si no lo fuera, un problema que tuvimos con Repetir Cuadrículas y componentes es que no funcionaría correctamente cuando estamos introduciendo datos. Vamos a hacer clic derecho en este primero y hacer desagrupar componente. Ahora si vamos a nuestros recursos, podré encontrar esta muestra discontinuada restaurante discontinuado nombres punteados dot TXT. Podemos seguir adelante y arrastrarlo por encima del título de la tarjeta para el nombre del restaurante. Y también tenemos uno para la descripción muestra que restaurante dash descripción dot TXT. Sigamos adelante y arrastrémoslo sobre el texto de la descripción. Perfecto. Vamos a hacer doble clic en la imagen de aquí y también desagruparlo como componente. Por lo que de esta manera podemos seguir adelante y seleccionar todas nuestras imágenes, una a cuatro por aquí para los restaurantes. Adelante y copia eso . Debería trabajar. Realmente no necesitamos esta forma por aquí. Entonces si seguimos adelante y eliminamos eso de ahí, eso se verá mucho mejor. Esa es nuestra sección de restaurantes. Creo que se ve bastante bien. Y vamos a volver y pulir estos en las futuras conferencias. Entonces en este momento podría parecer un poco avión. Pero la idea es armar los elementos que necesitamos antes de volver y arreglarlo. Por último, tenemos la sección Contáctenos, por lo que vamos a volver en la próxima conferencia para trabajar en esa. 98. Sección de contacto: Pasando a la última sección de nuestra página de destino aquí, la sección Contáctenos. Vamos a seguir adelante y armar eso. Y vamos a necesitar la imagen del equipo del lado derecho aquí. Y luego en el lado izquierdo un pequeño formulario donde podemos poner un e-mail o un nombre y un campo de correo electrónico y botón ascender. Y debería ser bastante sencillo a partir de ahí. Lo primero es que sigamos adelante y seleccionemos aquí el tablero de arte y habilitar nuestra cuadrícula de diseño. ¿ A qué cambiamos de nuevo? Kit de interfaz de usuario Bootstrap? Bajo esta sección de formulario de nuestro kit de interfaz de usuario Bootstrap, deberías poder encontrar grupos formados de entrada. Así que vamos a seguir adelante y acercar eso para que podamos usar un formulario desde aquí. No necesitamos nada complicado como drop-down o cosas por el estilo, pero Bootstrap te da acceso a esas. Puedes seguir adelante y colocar cosas como diferentes tipos de campos que podrían ser útiles para ti. Así que siéntete libre de explorar eso. Pero por ahora queremos seguir adelante y encontrar una simple entrada de correo electrónico por aquí. Adelante y copia ese y un botón manteniendo pulsada la tecla Mayús mientras seleccionas ambos. Vamos a copiar eso a nuestro proyecto, seleccionar este rectángulo aquí y pegarlo. Vamos a poner eso en algún lugar por aquí. Vamos a seguir adelante y estirar eso también, justo aquí. Déjame seguir adelante y poner aquí este botón en el lado izquierdo. Duplicemos esto una vez más. Y en lugar de correo electrónico, vamos a hacer nombre completo. Voy a eliminar este pequeño texto de pie de página aquí. Quiero seguir adelante y en realidad usar impuestos para este formulario aquí, quiero seguir adelante y seleccionar todos ellos para usar pilas y usar el Comando G para agruparlas primero y luego hacer una pila. Vamos a seguir adelante y bajar el espacio aquí entre el botón enviar y seguir adelante e intercambiar el nombre completo y el correo electrónico. ese espaciado a 15 píxeles. Pero sigamos adelante y aumentemos esta distancia, 250. Ahí vamos. En lugar de entrada predeterminada que se pone primero y último. Y para el correo electrónico, solo hagamos el ejemplo en domain.com. Ahí vamos. Ese es nuestro antebrazo. Y luego vamos a hacer una pequeña imagen en el lado derecho. Vamos a seguir adelante y volver a nuestros recursos. Estaban debajo de la carpeta de imágenes, deberías poder encontrar una foto del equipo JPEG. Y entonces podemos arrastrarnos hasta aquí. Vamos a asegurarnos de que las proporciones estén bloqueadas y hagamos un ancho de 750. Hicimos esto un poco más pequeño por lo que se ajusta a nuestra rejilla. Centrado a lo largo. Voltear ambos elementos y centrarlos a lo largo de la página también. Sostengamos Alt y arrastremos una copia de este texto, este texto de encabezado, y cambiemos esto para contactarnos. Creo que eso es más o menos lo que queremos. Si desactiva nuestra cuadrícula de diseño, deberíamos tener una mejor idea de cómo se verá esto, ¿de acuerdo? No está mal. Entonces una cosa que podríamos hacer es poner este formulario en una caja o una tarjeta. Así que vamos a seguir adelante y volver a habilitar nuestra cuadrícula de diseño y trabajar en esa caja de aquí. Así que vamos a hacer rectángulo, y vamos a seguir adelante y crearlo por aquí. Adelante y encuentra este grupo de capas por más de un año y tráelo por debajo de nuestro grupo cuatro. Así que por favor esto aquí. Vamos a seguir adelante y en nuestra pila y vamos a añadir un poco de relleno de 20 pixeles. Ahora vamos a reducir esta pila para que se ajuste a nuestro rectángulo y llevemos este botón a esta esquina aquí. Y podemos reducir la altura de esta caja a algún lugar por aquí. Ahora si desactivamos nuestra cuadrícula de diseño, podemos ver que definitivamente se ve más limpio. Incluso podemos seguir adelante y igualar la altura de esta forma a la altura de esa imagen. Para que las cosas se vean un poco más limpias. Por supuesto, aún no hemos terminado. Vamos a volver y pulir todas nuestras páginas y agregar el texto del botón aquí y luego aplicar el esquema de color adecuado e incluso una fuente personalizada. Así que volvamos en la próxima conferencia para empezar a pulir nuestra landing page. 99. Aplicar nuestro esquema de color: Vamos a seguir adelante y aplicar el esquema de color que tenemos para el proyecto a nuestra landing page también. Así que toma un segundo aquí para seguir adelante y abrir tu proyecto móvil que diseñamos. Y adelante y selecciona la sección de esquema de colores por aquí con todos los colores que tenemos. Y adelante y cópielo usando el Comando C. Cambiar aquí. del mismo lado por aquí en la tabla de pasta, vamos a seguir adelante y pegar eso en. Ir a seguir adelante y simplemente poner eso por aquí. Y seleccionemos aquí todos estos colores como recuerden, y pulsamos aquí el ícono plus para convertirlos en nuestro esquema de color para el proyecto. Entonces, si quieres, puedes seguir adelante y cambiarles el nombre. Por aquí. Primaria, secundaria. Dije 123. Haremos esto como nuestro gradiente. Ahora. De lo más alto a abajo, vamos a trabajar nuestro camino a lo largo del diseño y aplicarle algún color. Primero lo primero, nuestro botón por aquí, vamos a seguir adelante y seleccionar el relleno de este texto. Y dijo que la primaria para el tablero de color, tenemos que seguir adelante y copiar este código hexadecimal desde aquí. Y a la frontera. Ahí vamos. Para que ese botón ahora tiene nuestro color. Eso se ve bien. Vamos a seguir adelante y seleccionamos el rectángulo de esta parte inferior por aquí, solo una capa de rectángulo en sí y establecerla en primaria. Lo que estamos aquí. Vamos a seguir adelante y elegir el botón de aquí para guardarlo. En orden. Es reemplazar eso en el medio. Y vamos a seguir adelante y hacer clic derecho y desagrupar componente y tener que aplicar en todo. En segundo pensamiento, creo que se ve mejor en el lado izquierdo aquí en contraposición al lado derecho. Tal vez derribar todo ese botón un poco mejor. Veamos la capa de ángulo recto y cambiémosla a su accidente un color junto con este texto aquí, x y uno. Para este texto, también vamos a hacer accidente uno. Ahí vamos, buscando mucho mejor ahora para este botón Contáctenos y cambiemos el selecto el rectángulo y cambiemos a primaria. Para el Contáctanos, vamos a hacer un accidente uno. Apliquemos un poco de color a nuestros fondos también. Vamos a seguir adelante y desbloquear este rectángulo aquí. Intentemos acento también para este fondo aquí. Y cambia este texto a un blanco. Ahí vamos. Dejaremos los populares restaurantes es de color blanco por el fondo y luego para el Contáctenos desbloqueará la capa y hará accidente tres. Una vez que hayas hecho eso, golpeó elegante Command en ese rectángulo para asegurarse de que lo bloqueas . Lo mismo por aquí. Perfecto. Eso está empezando a verse mejor. Ahora, volvamos en la siguiente conferencia para aplicar algunas fuentes personalizadas al proyecto aquí. 100. 8: Realmente disfruto la parte del proyecto en cualquier proyecto de diseño cuando aplicamos una fuente personalizada al proyecto y hacemos que se vea mucho mejor, más nítido, y aún más relevante para la marca. Personalmente me encanta usar Google Fonts porque es un recurso gratuito de uso que puedes usar para encontrar y descargar fuentes para tus proyectos. Si te dirigías a fonts.google.com en tu navegador, lo harías un secundario. Para que puedas cargar eso. Podrás acceder a toneladas de fuentes para usar para tus proyectos. Y mientras pasaba por esto, la fuente Poppins de aquí tipo de me llamó la atención. Si no encuentras esta fuente, puedes seguir adelante y volver a esta página aquí y buscar Poppins aquí así, con una S al final. Adelante y da clic en eso y golpea en Descargar familia. Adelante y guarde ese expediente. Una vez que lo tengas guardado, deberías poder abrir esta carpeta aquí donde podrás seleccionar todas las fuentes aquí y luego seguir adelante y hacer doble clic para instalarla en Mac. Este proceso puede ser diferente en Windows, pero en una Mac solo hace doble clic para instalar la fuente. Una vez hecho eso, puedes seguir adelante y simplemente cerrar esa carpeta y este sitio web por aquí. Ahora vamos a seguir adelante y dar click en estos dos textos de aquí. Copiarlos. Aquí afuera. Vamos a ponerlos al acento para colorear. Seleccionemos ambos y hagamos Poppins por aquí. Si no ves esa carga de fuente, simplemente sigue adelante y cierra tu XD y vuelve a abrirlo, y eso debería funcionar para el encabezado aquí vamos a seguir adelante y seleccionar un font-weight medio. Y vamos a dejar éste como regular. Vamos a usar esta como mi fuente de cabecera y esta tiene mis fuentes body. Vamos a seleccionar los bytes sanos. Uno, cámbialo a encabezado, encabezado H1 así. Y usa éste como nuestro cuerpo. Voy a hacer sólo uno más por aquí. En caso de que necesitemos un encabezado H2 en lugar de 75, vamos a hacer 60 por éste. Vamos a seguir adelante y seleccionarlos y agregarlos como un estilo de personaje. Aquí. Vamos a hacer guion corporal Poppins, H12, y cambiar el nombre de éste por cada uno. Ahí vamos. Seleccionemos este bytes sanos ahora configurarlo a nuestro H1 y cambiar el relleno a blanco. Este de aquí, vamos a hacer cuerpo va a cambiar el relleno a blanco. Y solo asegúrate de que nuestras alineaciones sean adecuadas aquí. Parece que tenemos estos no alineados correctamente. Usa esa rejilla de diseño para tu ventaja allí. Adelante y apáguelo. Y vamos a hacer cuerpo por este de aquí y cambiarlo a blanco. Para los botones. Vamos a seleccionar los botones y luego seguir adelante y simplemente cambiar manualmente ese texto aquí para que se haga estallido. Ahí vamos. Antes de que nos olvidemos aquí arriba, queremos seguir adelante y cambiar nuestras fuentes aquí y aquí también. Entonces hablemos de los bytes aquí, cambiarlo a Poppins. Y lo mismo por aquí. Selecciona éste, cámbialo a Poppins. Ahora, recuerda como atajo, solo puedes golpear el comando C en los restaurantes y hacer el comando de opción V en tus otros textos. Y eso aplicará la misma fuente. Pero si lo haces aquí a esta app de descarga, solo necesitas cambiarla por dos colores primarios porque también copia sobre ese Phil, para esos textos. Creo que estos se verían mejor como un font-weight medio. Así que sigamos adelante y cambiémoslos a fuente mediana. Escuchamos supuesta a media. Ahí vamos. Se ve mucho mejor. Hagamos lo mismo para esto descarga la app, configurarla a media para que sea un poco más gruesa. Podemos leerlo más fácilmente. Esa página, se ve bien. Pasando aquí abajo, hagamos uno. Vamos a seleccionar el texto y simplemente centrar eso horizontalmente. Aquí. Vamos a seguir adelante y mantener Turno y ligero alt-text por aquí y cambiarlos a Poppins porque puedes hacer eso. Puede cambiar varias fuentes al mismo tiempo manteniendo pulsada la tecla Mayús y seleccionándolas. Lo único que tenemos para arreglar nuestro botón, extenderlo un poco más, asegurándonos de que esté centrado. Ahí vamos. A medida que cambie su fuente, podría notar que el espaciado y la alineación podrían cambiar entre sus elementos. Así que sólo ten cuidado con eso y revisa doble todo siempre nos atacó. Se ve bien. Nuestra forma. Vamos uno por uno. Nombre completo. Cámbialo a pop in. Primero-último correo electrónico. Selecciona esta primera última Control C. Opción Control V. Cambia éste también a Poppins. Por último, o botón de enviar también debe ser Poppins. Y en lugar de peso regular, vamos a hacer medio. Ahí vamos. Eso deberían ser más o menos fuentes Oliver en la página de aprendizaje, que creo que es así, hasta ahora tan buena. Entonces es así como aplicamos fuentes personalizadas ¿quiénes son proyectos? Por qué no volvemos en la próxima conferencia para pulir el resto de nuestro diseño y completar nuestra landing page. 101. Añadir manchas e ilustraciones: Siento que podemos añadir totalmente más a nuestra landing page. Es un poco avión ahora mismo y creo que te vendría bien el lípido más pop. Y podemos seguir adelante y usar algunos plug-ins geniales para ayudarnos con eso. Por lo que tengo dos plug-ins realmente interesantes en mente que podemos usar. Y verás cómo pueden ayudarnos realmente a pulir nuestro diseño y hacer que se vea aún mejor. Sin más preámbulos. Volvamos a nuestra pestaña de plugins aquí abajo. Una vez que lo haya seleccionado, siga adelante y haga clic en el icono más. Y vamos a buscar dos plugins. El primero, vamos a buscar gente. Este primero de aquí, esta ilustración de los humanos. Vamos a seguir adelante y llegar, y nos tomaremos un segundo para instalarlo allí. Que se tome su tiempo. Y vamos a seguir adelante y volver a plugins de características también search blob, hay plug-in globular debería aparecer. Adelante e instala ese para dirigirse de nuevo a nuestro XD y verás lo tanto desde la parte superior como pasar a la parte inferior. Entonces vamos a usar el popular plugin aquí, que nos ayuda a generar estas manchas de aspecto fresco y seguir adelante y restablecer. Y seguirá generando bloggers y te dará un pequeño adelanto de cómo se verá. Adelante y aumenta la complejidad de la misma. O adelante y hazlo más único o menos único como quieras. Incluso puedes seguir adelante y establecer el tono desde aquí. Por supuesto, lo cambiaremos en tan solo un segundo. Vamos a seguir adelante y sólo inserte esa blob. El tuyo podría parecer diferente por supuesto, pero eso está totalmente bien. Realmente no, bien o mal buscando blob aquí, si todos ustedes con un blob insertado, vamos adelante y regresemos a nuestra biblioteca. Y quiero hacer el acento de tres colores para éste. Y ahora volvamos a nuestra pestaña de plugins y volvamos e insertemos la ilustración de los humanos. Desde aquí tenemos acceso a muchas ilustraciones que son bastante cool para usar para nuestros proyectos y lo que sea relevante podría aplicarse. Incluso puedes seguir adelante y ponerte muy creativo y sumar diferentes partes juntas. Tipo de Lego para la ilustración aquí. O simplemente puedes ir simple y seleccionar lo que quieras. Vamos a mantenerlo sencillo y seleccionar éste por aquí. Lo mantendremos simple y seleccionaremos éste por aquí. Se ha copiado en el portapapeles para que podamos golpear Comando V. Pegar eso por aquí, hacerlo un poco más grande o sosteniendo Shift. Voy a volver a la ilustración de los humanos una vez más. Arrastremos esta mesita por aquí. Una vez más. Esta vez vamos a hacer la lámpara. Y solo trae eso aquí. Para este último de aquí, voy a seguir adelante y hacer doble clic en ese y simplemente hacer este un poco más corto aquí. Entonces creo que eso se ve bastante guay. Podemos bajar aquí y añadir uno detrás de nuestra aplicación si lo desea. Plugins, lobulares. Quieres restablecerlo hasta que consiga algo que me guste. Adelante e inserta eso en la parte posterior y usa el comando y el soporte abierto hasta que tenga eso debajo de la aplicación o el dispositivo móvil. Y ahora nos cuesta seleccionarlo. Entonces tenemos que volver a las capas y seleccionar ese camino e seleccionar ese camino e ir a comprar hacia las bibliotecas y establecer el bloque a. Vamos a probar el color degradado. Eso se ve bastante genial. Podemos hacerlo una vez más por la foto de nuestro equipo por aquí también. E incluso inserta esa foto de equipo como un blob en su lugar para que podamos enmascarar eso. Así que vamos a seguir adelante y seleccionar los plugins, restablecerlo un montón de veces más hasta que tengamos a alguien que miró, que se vería bien para nuestra foto de equipo. Quiero algo que siga restableciéndolo hasta que encuentre algo que me guste. Vamos a reducir la singularidad y ver qué obtenemos. Estoy siendo un poco demasiado exigente aquí. Creo que cualquiera de estos realmente debería funcionar igual de bien. Adelante y crea, yendo a seguir adelante y utilizar éste aquí. Y adelante y zoom. Por lo que tipo de toma el control de más de la imagen. Y vamos a seguir adelante y seleccionar tanto la capa de imagen debajo blob y hacer Máscara con forma. Tenemos que hacer es simplemente hacer esa imagen un poco más grande, así. Y luego seguimos adelante y solo nos aseguramos que encaja muy bien. Ahora, podemos hacer esto un poco más pequeño. Tipo de encaja muy bien con nuestro formulario aquí. Una vez más. Hagamos que la rejilla de diseño y las cosas correctamente alineadas aquí. Y asegúrate de que hemos utilizado esa alineación aquí. O la forma se ve bien también, así que eso es bastante bueno. Apaga o layout grid y ahí la tenemos. Así es como podemos usar algunos blobs para crear algunos efectos de aspecto fresco. Las náuseas pueden ver lentamente nuestras landing pages empezando a ser más pulidas y lucir más interesante cuando volvemos en la próxima conferencia para hacer un pulido final. Y luego justo después de eso vamos a exportar nuestra landing page. 102. Cómo pulir nuestra página aterrizado: ¿ Qué crees que has hecho con el proyecto? Así que siempre es una buena idea simplemente pasar rápidamente por todo el diseño de arriba a abajo o izquierda a derecha dependiendo de donde estés trabajando y hacer un poco pulir de todo ahí dentro. Entonces cuando partimos desde la barra de navegación muy superior, que creo que se ve bastante bien, podemos seleccionar estos campos por aquí para el restaurante y contactarnos y emocionado el accidente de un color. Todo lo demás aquí se ve bien. Asegurarse de que estos estén como centrados a lo largo de nuestra página, que ahora lo es. Quieres asegurarte de que estos también son una especie de centro por aquí. Perfecto. Vamos a seguir adelante y quitar este borde del rectángulo por aquí. Lo mismo aquí con este otro rectángulo. No quieres comer frontera entre ellos. Y lo mismo por aquí con este rectángulo alerta registros, podemos desbloquearlo y quitar el borde. Y voy a encerrarlo de nuevo. Vamos a encerrar este de aquí. Comando L aquí, Comando L. Ahí vamos. Aquí abajo. Realmente me gusta la forma en que mis cartas se ven ahí demasiado afiladas. Así que vamos a seguir adelante y añadir un poco de radio de esquina a la imagen, pero sólo a la parte superior derecha y arriba a la izquierda. Así que mantengamos Opción mientras la configuramos un radio de esquina de 15 píxeles aquí. Y se pueden ver los píxeles en el lado izquierdo. 15, creo que se ve bien. Y podemos aplicar lo mismo aquí abajo. En este momento ya está fijado a cinco, pero quiero cambiar eso a 15. Eso podría verse mejor. Eso se ve mejor. Voy a seleccionar el fondo aquí. También haz 15 por éste, haz doble clic y también haz 15 por éste, y finalmente 15 por éste. Y podría preguntarse, ¿por qué estamos repitiendo este proceso de reutilización de una rejilla repetida? La respuesta es simple. Cuando sí tienes un componente porque es fondo de tarjeta como componente. Si se trata de un componente, tenemos que hacer ese cambio cada vez en lugar de una sola vez y hacerse con él. Ahora quiero añadir un poco de sombra para nuestras cartas aquí. Pero el problema con Repetir Grid es que no es muy eficiente agregar sombras con ella. Entonces vamos a seguir adelante y desagruparnos esa rejilla. Es decir, hecho con una rejilla de repetición. Y vamos a seguir adelante y seleccionamos esto una capa de fondo de carro barra de fondo aquí y haga doble clic para seleccionar esta capa de rectángulo y aplicar sombra paralela. Vamos a hacer un desenfoque de 20. Deja todo lo demás igual. Creo que eso se ve mucho mejor. Vamos a seguir adelante y copiar eso y seleccionar este rectángulo aquí. Haga doble clic todo el camino a través. Golpea Comando, Opción V. Lo mismo aquí. Lo mismo aquí. Se ve mucho mejor. Por aquí. Vamos a seguir adelante y seleccionar este rectángulo aquí. Y quiero quitar el borde y usar el Comando Opción V para pegar ese borde aquí y un radio de esquina que se aplicó automáticamente. Entonces eso se ve mucho mejor. Creo que podemos hacerlo un poco más amplio aquí. Entonces voy a sostener Alt para ensancharlo. Y se ve un poco avión aquí arriba. Entonces cuando agregamos un texto en el medio para decir ponerse en contacto, no podemos ver eso porque es blanco. Entonces salgamos por ahí y apliquemos un acento. Color aquí. Creo que el cuerpo aquí es un poco demasiado grande, así que vamos adelante y cambiemos la fuente a 25. Aquí mismo. Eso se ve mucho mejor. Selecciona esta capa, este fondo para desbloquear y eliminar de nuevo el borde, bloquearlo de nuevo. Ahora, creo que ninguno de ellos debería tener más fronteras. Creo que nuestro proyecto está bastante pulido y listo para funcionar. Entonces con eso dicho, te voy a dar un ejercicio para crear un prototipo fuera de esta landing page. Y adelante y conecta estos botones a tu prototipo también. Y lo haremos juntos en la próxima conferencia. 103. Cómo crear un prototipo: Muy bien, vamos a crear un prototipo para nuestra página de alineación. Si sigue adelante y hace clic en él y previsualiza en nuestro escritorio en este momento, podría ser un poco demasiado grande, así que podemos seguir adelante y definitivamente hacerlo más pequeño aquí. Adelante y solo arregla eso aquí. Así que definitivamente se ve genial. Por supuesto, no hay demasiado que podamos conectar aquí. Lo único que realmente quiero conectar es nuestra barra de navegación aquí arriba. Así que sigamos adelante y arreglemos esa barra de navegación para que puedan navegar entre esas páginas. Entonces vamos a nuestras bibliotecas, seleccione aquí la barra de navegación. Y asegúrate de que tengamos todas estas capas. Subir Turno seleccionado y hacer Comando G. Y vamos a nombrar a este grupo son suficientes para. Y solo asegúrate ocultándolo de que esto es tiene todo lo que necesitamos. Sí, lo hace. Y voy a hacer posición fija al desplazarse y llevar la capa, como lo adivinaste todo el camino hasta la parte superior del proyecto. Por lo que de esta manera cuando lo previsuemos, debe pegarse a la parte superior, que es lo que queremos. Queremos un par de conexiones aquí. Queremos picaduras saludables. Al hacer clic en él para llevarnos vuelta todo el camino a esta página de aquí. Al hacer clic en restaurante, queremos bajar a esta parte de la app. Cuando hacemos click en Contáctenos, esta parte de la landing page, lo siento. Y descargar app debe llevarnos a esta sección aquí. O alternativamente, descargar aplicación también podría ir al mismo enlace que este de aquí. Ahora porque estábamos usando Bootstrap, los ya tienen algún tipo de estado de hover para sus componentes aquí. Vamos a seguir adelante y deshacernos de eso también de ahí. Entonces para prototizar adecuadamente, vamos a seguir adelante y un grupo cada sección juntos. Todos los elementos del grupo. Solo sigue adelante y solo agrupa toda la sección aquí usando el Comando G. Así que esa será nuestra sección de encabezado porque la capa de rectángulo fue registrada, no fue arrastrada a ese grupo. Simplemente sigue adelante y arrastra eso al grupo de cabecera. Sólo asegúrate de que lo bajemos todo el camino. Queremos asegurarnos de que nuestras tablas de navegación en la parte superior de las capas. Este rectángulo de ahí, que he desbloqueado debería ir también en el encabezado. Justo debajo de aquí. Creo que este grupo de masas es para nuestra imagen. Así que también arrastremos eso al encabezado aquí mismo. Para nuestra página de app, sigamos adelante y agrupa todo juntos, seleccionamos todo y haz incluyendo el blob aquí manteniendo el comando y hacer Comando G. Así que esa debería ser nuestra sección de aplicaciones. No traeré eso justo debajo de la cabecera. Restaurantes populares es seguir adelante y simplemente seleccionar todos estos. Golpea Comando G. Y por supuesto, solo tenemos que traer nuestra capa de rectángulo, rectángulo tres aquí, desbloquearlo e impulsivo trayendo eso al grupo. Este grupo aquí, pero en la parte inferior y renombra el grupo para poblar. Russ, sección trance. Trae eso aquí. Y para los Contáctenos, hagamos lo mismo. Selecciona todo el comando G. Mueve allí este rectángulo para agrupar la parte inferior del mismo y hacer contacto sección y llevarlo al fondo. Entonces ahora es mucho más organizado. Podemos seguir adelante y revisar cada grupo. Sólo una cosa que quiero hacer es leer bloquear esas capas de rectángulo. No interactuamos accidentalmente con ellos. Ahora que tenemos eso, vamos a seguir adelante y enganchar nuestra barra de navegación usando la pestaña Prototipo. Seleccionar las mordeduras saludables y vamos a hacer click es agregar una infracción y vamos a hacer scroll también. Vamos a elegir encabezado de Capa. No importa dónde se encuentre en la landing page, seguiremos adelante y retrocederemos hasta la sección de encabezado. Hagamos facilidad de entrada y salida. Y en lugar de 0.3, Hagamos 0.6. Ahora para el restaurante, vamos a hacer interacción y nos vamos a desplazar a la sección de restaurantes. Dejar todo lo demás tiene esto. Lo adivinaste para el Contáctenos. Vamos a hacer desplázate a la sección Contáctenos para la aplicación de descarga. Cuando hacemos scroll también, sección Apps. Ahora todo está conectado. Como esperamos. Vamos a seguir adelante y quitar este estado de hover de aquí. Y por aquí, vamos a hacer lo mismo aquí. Quitar ese estado de desplazamiento. Ahora, cuota, adelante y prever eso. Cada desplazamiento hacia abajo en cualquier punto podemos hacer click en mordeduras saludables para desplazar esta copia de seguridad. Puedes consultar la sección de restaurantes, la sección Contáctenos, y la sección de aplicaciones de descarga. Hermosa. Creo que esto se ve increíble, perfecto. Entonces ahí lo tenemos. 104. Grabar nuestro prototipo: Lo genial que quiero mostrarte es que también puedes seguir adelante y crear grabaciones de tu prototipo si has golpeado en grabar video por aquí y la vista previa de escritorio, si estás en un Mac, podrías obtener otorgar permiso a la aplicación. Así que adelante y abra las preferencias del sistema para otorgar esos permisos. Ahora es posible que necesites agregar este punto, salir y reabrir XD. Así que adelante y permita que Mac haga eso. Pero una vez que hayas hecho eso, puedes seguir adelante y abrir la vista previa, seleccionar la página de destino, y luego seguir adelante y hacer clic en el registro. Ahora como se puede ver es grabando. Puedo seguir adelante e interactuar con el sitio web como me gustaría, y mostrarle a la gente cómo funciona. Cualquier punto puedo seguir adelante y detener la grabación y guardar ese archivo donde quiera. Hacer mordeduras saludables sitio web demo. Permítanme seguir adelante y guardar eso. Ahora por aquí en mis recursos, puedo seguir adelante y abrir esa grabación y verla para ver cómo lo hemos hecho. Eso es impresionante. Genial. Así es como también puedes grabar tus prototipos en XD. Con eso, eso envuelve nuestro proyecto de landing page. Espero que hayas podido aprender mucho a lo largo de este proceso. Y creo que hemos aprendido muchas herramientas útiles, Características, plantillas y complementos, y cómo podemos usar XD. Impresionante. 105. Conclusión: Muy bien, grandes felicitaciones. Al finalizar este curso, hicimos un trabajo increíble desde empezar con Adobe XD, alertando lo que tiene para ofrecer todo el camino a través del diseño o dos proyectos en la app móvil para la entrega de alimentos servicio, ayudando bytes, y el sitio web que armamos para ellos. Y solo papá que crearía un prototipos interactivos para ambos proyectos que ahora podemos compartir con sus amigos, compañeros, clientes, y mostrarles lo que hemos hecho y cómo podría funcionar este producto. Esto es increíble, y esto es solo el comienzo para ti como diseñador. De aquí en adelante, te animo a asumir proyectos de diseño y seguir inspirándote en proyectos y productos a los que tienes acceso a todas estas bases, las apps en tu teléfono, a los sitios web que navega. Procedo me encanta guardar una carpeta de todos los diseños que me inspiraron para poder usar eso en mis futuros proyectos de diseño también. Estoy súper contento con todas las diferentes partes que hemos cubierto a lo largo este curso ya que cubrimos una tonelada de componentes, pilas Repetir Grid, cómo agregar animaciones a nuestros prototipos. Y muchas de las ingeniosas pequeñas herramientas y plug-ins de usados para pulir tu diseño y hacer que se vea mejor. A partir de aquí, me gustaría desearles la mejor de las suertes y espero verte en futuros cursos.