Diseño con Figma: sitio web de un restaurante

1. ¡Hola!: Oye ahí y bienvenidos. Mi nombre es Adi Purdila. Soy diseñador web y desarrollador y esta clase se trata diseñar un sitio web de restaurante de una página en Figma. Esto es lo que vamos a crear. Es un sitio web sencillo para un restaurante ficticio llamado Birdhouse Bar and Grill. Entre otras cosas, cuenta con una bonita sección de menú de comida, una navegación de menús, galería de fotos de Instagram, un formulario de contacto con un mapa, y también un área de registro de boletines. Ahora, al tomar esta clase, aprenderás dos cosas, diseño UI/UX y Figma. En cuanto al diseño de UX, aprenderás a leer un resumen de proyecto y a partir de él, crear wireframes. Pero también discutiremos la arquitectura de la información o cómo estructuramos el contenido en la página web. Entonces está en la interfaz de usuario o el diseño de la interfaz de usuario. Aquí, aprenderás a definir la tipografía para que coincida con el tipo de sitio web que estás diseñando y cómo escoger los colores apropiados y aplicarlos a diversos elementos. Aprenderás a usar el sistema de ocho puntos para espaciar y dimensionar. Así que nunca tendrás que adivinar qué valores usar para el relleno de margen, ancho o alto. También aprenderás a crear diseños receptivos. Inicialmente diseñaremos para pantallas grandes y luego crearemos versiones para medianas y pequeñas. Mientras esto sucede, también estás aprendiendo a usar Figma para el diseño de sitios web. Por supuesto, aprenderás lo básico como trabajar con marcos, texto, colores, formas, páginas y atajos de teclado. Pero también obtendrás una muestra de las características más avanzadas. Aprenderás a usar el diseño automático para alinear y mover elementos alrededor con mucha facilidad. También aprenderás sobre los diversos modos de cambio de tamaño en Figma como contenido de Hug o Contenedor de relleno y cuándo debes usar cada uno. También hay un proyecto de clase disponible para que puedas seguir y aplicar la teoría. todo, creo que esta clase es perfecta para principiantes porque pasaré por cada paso del proceso desde wireframing hasta diseñar versiones receptivas del sitio web. Así que espero verte en clase. En la primera lección, hablaremos del proyecto de clase. Próximamente. 2. El proyecto de clase: Creo que no se puede aprender adecuadamente algo simplemente leyendo la teoría que necesita para practicar. Por eso esta clase tiene un proyecto que puedes hacer. También puedes llamarlo tarea o asignación. Esas asignaciones y esos algo como esto, utilizando el resumen del proyecto proporcionado, diseñan un sitio web de una página para un restaurante llamado Birdhouse Bar and Grill. Puedes usar el software que quieras, pero estaré trabajando en Figma y te recomiendo que hagas lo mismo. Ahora en esta clase, estaré haciendo exactamente la misma tarea. Estaré usando el mismo resumen del proyecto. Lo discutiré contigo. Voy a crear algunos wireframes y luego diseñaré el sitio web de una página. Entonces depende de ti hacer lo mismo. Puedes seguir mis pasos exactamente, o puedes inspirarte en lo que estoy haciendo y crear tu propia versión del proyecto. La elección es realmente tuya. Para empezar con este proyecto de clase, en realidad hay unos pasos que debes dar. El paso 1 es descargar los recursos de clase. Ahora, en la descripción de la clase, encontrarás los enlaces para descargar estos archivos. Aquí, tenemos el logotipo ficticio en formato SVG para Birdhouse Bar and Grill. Tenemos un breve proyecto que básicamente detalla todo lo que necesitamos saber sobre el diseño de sitios web que vamos a hacer. Entonces tenemos un PDF para todos los recursos que voy a utilizar en esta clase. Aquí encontrarás enlaces al archivo Figma terminado. Encontrarás un enlace o enlaces a todas las fotos de stock que he usado en el diseño. Por último, algunos enlaces para los iconos. Estaré usando los Iconos Bootstrap y también los Typefaces. Entonces como bono, también hay algunos enlaces útiles agregados aquí, enlaces a Figma y algunas otras herramientas que vamos a utilizar. Lo primero que haces antes de comenzar esta clase es descargar los recursos. paso 2 es crear una cuenta de Figma y si ya tienes una, entonces siéntete libre de saltar al paso número 3. Pero si no lo haces, necesitas una cuenta para trabajar en Figma. Porque en su núcleo Figma está basado en navegador, por lo que cualquier archivo que creas necesita estar vinculado a una cuenta. Crear uno es realmente simple. Vas a figma.com y puedes hacer clic ya sea en este botón o en este botón para llevarte a la ventana de creación de pantalla. Aquí puedes registrarte con un correo electrónico o contraseña o con tu cuenta de Google si tienes una. Es un proceso realmente simple. También es totalmente gratuito crear una cuenta Figma. Adelante y hazlo ahora mismo. Ahora, dije que crear una cuenta Figma es gratis, y usar Figma también es gratuito pero hasta cierto punto, ves que hay algunas características avanzadas que solo obtienes en el Figma profesional y Figma planes de organización, cosas como archivos ilimitados, historial de versiones ilimitado, bibliotecas de equipos. Estos no estarán disponibles en este plan de inicio, que es gratuito. No obstante, como principiante, si acabas de empezar, el plan gratuito es más que suficiente, por lo que este es el que te recomiendo obtener. Paso 3, que es opcional es duplicar mi archivo de diseño terminado. Permítanme explicar por qué esto es opcional. Para esta clase, te recomiendo que empieces con un lienzo en blanco y trabajes a mi lado viendo los videos de clase. Cualquier cosa que yo haga, lo hará también en su extremo. Creo que esta es una gran manera de aprender. No obstante, si te gustaría trabajar por separado, tal vez crea tu propia versión del proyecto y usa mi diseño como referencia, entonces tal vez quieras duplicar mi diseño terminado. Así es como se puede hacer eso. Empezarás abriendo el archivo PDF de recursos. En la segunda página, encontrará el enlace que dice Diseño de sitios web por Adi. Harás clic en eso y eso lo va a abrir en tu navegador. Necesitas asegurarte de que has iniciado sesión. Ahora, por defecto, verá que esta versión del sitio web es de sólo lectura. Puedes hacer clic en los elementos para que puedas seleccionarlos, encontrar distancias, y también explorar varias propiedades aquí para el elemento seleccionado. Pero una cosa que no puedes hacer es editar este documento porque es el archivo maestro que compartí contigo. Por eso para ti, es de sólo lectura, sólo yo soy capaz de editar eso. Ahora, podría estar tentado a hacer click en este botón que dice pedir editar y eso sólo va a enviarme una notificación sobre su solicitud. Sólo me va a decir que estás pidiendo permisos de edición en este documento y no puedo darte esos porque este documento necesita ser accesible para todos. En cambio, lo que necesitas hacer paraeditar este documento es hacer clicken editar este documento es hacer click este enlace desplegable aquí y seleccionar duplicado a tus borradores y ahora Figma nos dice que el archivo ha sido duplicado a sus borradores. Si volvemos bajo borradores en su cuenta, debe tener el expediente. Ahora puedes cerrar esto y puedes abrir el expediente en tus borradores. Aviso que dice copyright aquí. Pero la única diferencia es que este archivo ahora es editable para que puedas seleccionar el texto, puedes eliminar, puedes reorganizar elementos, puedes hacer lo que quieras. Al final, esta es su propia copia del documento y no el archivo original que aquí está enlazado en los recursos PDF. Repito, asegúrate de duplicar el archivo si quieres tener acceso de edición al mismo. Ahora, lo pillo. No todos se sienten cómodos mostrando su trabajo a otras personas. No obstante, para esta clase, os animo encarecidamente a que nos muestren su diseño terminado subiéndolo a la galería del proyecto. Dos razones para eso. Número 1, obtendrás comentarios de mí o de otros alumnos, claro si quieres eso. Eso puede resultar muy útil. Número 2, animarás a otros a publicar sus proyectos y eso siempre es algo bueno. Por favor toma mi recomendación y no muéstranos tu diseño terminado subiéndolo a la galería del proyecto. Por último, recuerda que estoy aquí para ayudarte, no importa qué preguntas puedas tener sobre esta clase o sobre el diseño web en general, publícalas en el área de discusión. Contesto a todos y cada uno y te garantizo que sea cual sea el problema que puedas tener, llegaremos al fondo de él. Con eso dicho, espero verte en la siguiente lección donde vamos a echar un vistazo rápido al resumen del proyecto, entender qué es lo que nos está preguntando el cliente, y también discutiremos algunos conceptos básicos de wireframing. Nos vemos ahí. 3. Conceptos básicos de creación de esquemas: Antes incluso pensamos en tipografía, colores o diseño, necesitamos hacer un poco de trabajo de preparación. Esto consiste en dos cosas, entender el resumen del proyecto y crear un marco de alambre. No solo abrimos Figma y empezamos a diseñar, eso es un error que mucha gente comete. El diseño debe basarse en el contenido, no al revés. No solo creamos el diseño y luego hacemos que el contenido se ajuste, en cambio, creamos el contenido y luego diseñamos alrededor de eso. Ese es un enfoque mucho mejor. Para crear el contenido, echemos un vistazo al resumen del proyecto y comprendamos lo que el cliente nos pide como diseñadores. Después en el resumen del proyecto, empecemos con la primera sección, y eso nos habla de los restaurantes, Birdhouse Bar and Grill. Tenemos una descripción general aquí, básicamente nos dice que es un negocio de propiedad familiar, abierto en el '95, y actualmente está siendo dirigido por el hijo propietario original llamado Robert Wilson. Birdhouse Bar and Grill es un pequeño establecimiento donde puedes conseguir una cerveza fría, puedes conseguir algo de comida deliciosa, y también entregan. Hay algunos puntos clave que debemos recordar. Tenemos el nombre del restaurante aquí, la ubicación y el número de teléfono, el lema que viene como invitado, te lo digo como amigo. El descripción de los servicios, sirviendo sabrosos alimentos y bebidas desde el '95, y también el horario comercial. Pasando, podemos encontrar la estructura de la página. Recuerda que este es un sitio web de una página, por lo que necesitamos encajar todo el contenido en una sola página. En ningún orden particular, la estructura va así. Necesitamos un menú de comida, una sección con información sobre el restaurante, algunas fotos de Instagram, un formulario de contacto, un formulario de boletín informativo, y también el cliente quiere que mostremos el lema en algún lugar de la página. Entonces el resumen del proyecto también describe cada sección con más detalle. Después llegamos a la descripción del menú. Esta es en realidad la descripción del menú de comida. Esto es algo que realmente podemos poner en el sitio web, probablemente en algún lugar antes de los elementos reales del menú de comida porque está bastante bien escrito. Entonces tenemos el contenido del menú. El menú básicamente tiene cinco categorías. Tenemos estacas, y para cada una, tenemos el nombre del plato, el precio y también su contenido. Después tenemos hamburguesas y sándwiches, quickies, y luego ensaladas. Este es todo el contenido que necesitamos colocar en la sección de menú de comida. No es mucho, pero definitivamente va a requerir algún uso creativo del espacio si queremos encajar todo esto en una sola página. Entonces, finalmente, después del menú de comida, tenemos algunas pautas de diseño que realmente no nos importan en este punto porque aún no estamos en la etapa de diseño de la interfaz de usuario. Vamos a guardar esto para más tarde. Pero, sí, ese es el resumen del proyecto con el que llegamos a trabajar. Lo bueno de esto es que contiene todo el contenido que necesitamos para colocar en la página web, toda la copia está ahí, las descripciones, la ubicación, el número de teléfono, el modelo, todo está dispuesto muy bien aquí, así que todo lo que tenemos que hacer al crear los wireframes es sólo copiar y pegar. Ahora que sabemos de qué se trata el proyecto, podemos seguir adelante y crear un contenido basado en la información que recibimos y vamos a crear este contenido como un wireframe. Un wireframe es una representación de baja fidelidad del producto final, y su propósito es mostrar el contenido final del proyecto. Piensa en ello como un boceto, algo que dibujarías en un trozo de papel. En un wireframe, no te preocupa el diseño, los colores, tipografía, el espaciado ni nada por el estilo; es solo un boceto bruto. No obstante, lo que sí hay que preocuparse es el contenido, porque eso tiene que estar en su forma más o menos la final. Puedes hacer pequeños retoques al contenido más adelante, pero yo diría que el 95 por ciento, tiene que estar en la forma final porque estás diseñando alrededor de ese contenido. Se puede pensar en una estructura metálica como un esqueleto o una base. Una vez que tengas eso, puedes empezar a construir en él, puedes empezar a agregar las capas externas, color, tipografía, espaciado, dimensionamiento, todo eso bueno. Es realmente sencillo crear wireframes. Como dije, solo son bocetos brutos, por lo que la opción más barata es la pluma y el papel. No obstante, si prefieres trabajar digitalmente, entonces hay aplicaciones dedicadas para eso. Una de las herramientas más populares es Balsamiq Wireframes. Esto es súper simple de usar, porque cuenta con una biblioteca de componentes prefabricados puedes simplemente arrastrar y soltar. No obstante, es una aplicación de pago, por lo que si no estás creando wireframes regularmente, puede que no valga la pena para ti. Hay, por supuesto, otras aplicaciones wireframing que puedes usar, pero personalmente y esto es lo que te recomiendo también, uso Figma. Dos razones para eso. Número 1, es fácil. Figma es mi herramienta de elección para el diseño de UI, por lo que estoy muy familiarizado con ella. Eso significa que trabajo muy rápido en él, y crear algo tan simple como un wireframe es solo una brisa. Número 2, es conveniente. Esto es lo más importante para mí, porque después de crear el wireframe, hago una copia de la misma y baso mi diseño final en esa copia. Eso significa que no tengo que recrear todos esos elementos si estuviera usando un software diferente. Porque estoy trabajando en el mismo software en Figma, está todo ahí. Todos los elementos que creé en el wireframe, solo los duplico y empiezo a editar los directamente. Esto es un tremendo ahorro de tiempo, y verás lo fácil que es más adelante en esta clase. Puedes crear los wireframes como quieras, pero te recomiendo que hagas eso en Figma. Ahora, hagamos un resumen rápido. Empezar siempre un proyecto entendiendo el resumen del proyecto. Wireframes son representaciones de baja fidelidad del producto final. Un wireframe debe contener aproximadamente la versión final del contenido. Para tu comodidad, crea un wireframes en el mismo software que usarás para crear el diseño final. Tenemos el resumen del proyecto, sabemos qué es un wireframe y cómo crear uno, vamos a trabajar. En la siguiente lección, comenzaremos a wireframing las secciones de encabezado y héroe. 4. Creación de wireframing: sección de encabezado y héroe: Nota rápida antes de comenzar, wireframing es un proceso bastante simple, y por lo general va bastante rápido. No obstante, en esta clase, cubriré wireframing en cinco lecciones porque quiero explicar el proceso con el mayor detalle posible, y no quiero hacer una sola lección súper larga. Por eso en cada uno de estos cinco videos, solo cubriremos una o dos secciones a la vez. Con eso dicho, empecemos con las secciones de encabezado y héroe. Empecemos iniciando sesión en Figma, y creando un nuevo archivo de diseño. Voy a colocar mi archivo dentro de la carpeta Borradores, y esto es lo que te recomiendo también, porque cuando estés creando archivos dentro de tus Borradores, puedes tener tantas páginas, y tantos archivos como tú quiero, no estás restringido a cierto número. Si fueras a crear equipos aquí, y organizar tus archivos así, necesitarás comprar uno de los otros planes en Figma. Pero, si quieres crear tantos archivos como quieras, adelante y crearlos en borradores. Hagamos clic en “Nuevo archivo de diseño”, y vamos a llamar a esto, Birdhouse Restaurant Website, y vamos a cambiar el nombre de la primera página a Wireframes. Aquí, agarra la Herramienta Frame o presiona “F” en el teclado, también puedes acceder a ella desde aquí y dibujar un marco, y hacer ese marco 1.800 píxeles de ancho. Vamos a alejar un poco, puedes acercar o alejar haciendo clic en este botón y seleccionando una opción, o puedes mantener presionada Comando o Alt, y usando la rueda de desplazamiento del ratón, arriba y abajo, para acercar y alejar, así que llamemos a este marco Wireframe. También vamos a establecer una altura a, digamos 3,000 píxeles, por ahora, para hacerla más alta. Entonces, abramos nuestro resumen de proyecto, y desplámonos hacia abajo hasta la estructura de la página, y pensemos en lo que debemos poner dentro del encabezado. Ahora típicamente, un encabezado de sitio web contiene alguna identificación de marca, como el logotipo. También contiene el menú de navegación, y también puede contener tal vez información de contacto, o iconos de redes sociales. En nuestro caso, usaremos, logotipo, menú de navegación e iconos de redes sociales. Empecemos con el logo, podemos agarrarlo de los Recursos de Clase, simplemente pincha y arrastra, y donde dice Colores de Selección, hagamos todo negro porque recuerda, en wireframe, no nos interesa ningún color en absoluto, así que solo usaremos negro, blanco y gris. Ahora para que nos sea más fácil alinear diferentes elementos en la página, vamos a usar algo llamado guías. Para eso necesitamos primero mostrar los gobernantes, son estos dos en la parte superior y a la izquierda de la página. Puedes hacerlo yendo a “Shift R” para cambiar su visibilidad, o puedes entrar en el “Menú”, bajo “Ver”, “Gobernantes”. Con las reglas visibles, podemos simplemente hacer clic y arrastrar así, para crear una guía. Normalmente Figma muestra la posición de la guía aquí mismo, pero por alguna razón, a veces brota, y no la muestra, y si quieres posicionar la regla a cierta distancia de los bordes, una forma rápida sería simplemente hacer de este el tamaño deseado, digamos 120, y luego hacer clic y arrastrar la regla hasta que encaje en su lugar, así como esto. Ahora esta regla está posicionada a 120 pixeles del borde, podemos hacer lo mismo aquí, arrastrar otra regla así, y estamos dispuestos a ir, ahora podemos eliminar este rectángulo. Ahora, tomemos nuestro logo, alinearlo con la regla, y podemos seguir adelante. Veamos sobre el menú de navegación. De acuerdo con el resumen del proyecto, esta es la estructura de la página, y vamos a crear elementos del menú de navegación basados en esto. Empecemos con el link para Home, utilicemos Helvetica como fuente, puedes por supuesto usar la fuente que quieras, pero para un Wireframe, recomiendo algo neutral, como Helvetica o Roboto. Hagamos estos 20 pixeles, y luego, Comando D para duplicar, y luego haga clic mientras mantiene pulsado “Shift”, para mantener la misma posición horizontal, ésta será Menú. Lo mismo, “Comando D, “Shift”, click y arrastra, hagamos esto, Sobre nosotros, y ¿ qué más tenemos? Contacto de Instagram y boletín de noticias. También podemos mantener presionado “Shift”, y “Opción”, para duplicar un ítem así, así que vamos a decir aquí, Instagram Feed. Haz eso de nuevo, Contáctanos, y de nuevo para el formulario de newsletter, llamemos a esta sección Suscribirse. Ahora podemos tomar estos, “Comando G” para agruparlos. También puedes ir a “Objeto”, “Selección de grupo”, por lo que es Comando G en un Mac, Control G en un PC. Entonces veamos sobre los iconos de las redes sociales, y vamos a usar tres iconos clásicos, y vamos a mostrar iconos para Instagram, Facebook y Twitter. Para los iconos, abriré la app Iconset, esta es una de mis aplicaciones favoritas, funciona tanto en macOS como en Windows, y es gratis, y es una app que puedes usar para organizar iconos, y tengo un montón de diferentes conjuntos de iconos agregados aquí, y es realmente simple. Todo lo que tengo que hacer es hacer clic y arrastrar a mi software de diseño, y eso solo agarra el ícono. Pero sigamos adelante y busquemos Facebook, Instagram, y estoy usando los iconos del conjunto “Bootstrap Icon”, arrastra eso ahí, y también Twitter. Hagamos eso. Ahora vamos a minimizar ese bit, hagamos estos iconos un poco más grandes. En Figma, puedes hacer clic este icono que dice Restringir proporciones, y que se asegurará de que cualquier valor que introduzcas para el ancho, y la altura se replicará en las otras medidas, así que hagamos estos 32. Si tuviera que cambiar el tamaño sin hacer clic en este botón, todo solo cambiará el ancho o la altura. Hagamos 32 por 32 y también aquí, de nuevo, 32. Ahora, agruparemos estos. Nuevamente no me preocupa la distancia entre estos dos, estoy haciendo todo lo posible para crear igual distancia, pero en cuanto al número real, eso va a ser atendido cuando lleguemos a la etapa de diseño real, así que de nuevo, “Comando G” para agruparlos, y voy a alinear esto así. Incluso puedo tomar todos estos, y utilizar las herramientas de alineación en Figma, donde dice Alinear Centros Verticales, haga clic en esto, y luego con todos estos tres seleccionados, “Comando G” de nuevo, y este será nuestro encabezado. A continuación, veamos sobre el área de héroes. Ahora típicamente, un área de héroes contiene el titular principal de un producto. También contiene un llamado a la acción, y generalmente algunos medios, un video, una imagen, tal vez una ilustración. Pero como nuestra página web es un poco diferente, es un sitio web para un restaurante, realidad no estamos vendiendo un producto, así que en la zona de héroes, porque es una de las primeras cosas que ve un visitante, vamos a colocar algunos elementos diferentes. Vamos a colocar el lema del restaurante, vamos a colocar el horario laboral, y después tal vez alguna información de contacto, y una imagen de clase, tal vez una imagen desde dentro del restaurante, que podría funcionar bastante bien. Empecemos con la imagen, voy a agarrar la “Herramienta Rectángulo” o R en el teclado, y solo voy a dibujar un rectángulo como este, y esto actuará como una imagen de placeholder en nuestro Wireframe. A continuación, veamos sobre el lema, podemos volver al resumen del proyecto, bajo puntos clave, podemos encontrar el modelo, podemos encontrar el modelo, así que vamos a copiar esto desde aquí, T para “Text Tool”, pega eso en. Ahora hagamos esto un poco más grande, digamos 70, y hagámoslo audaz. En cualquier momento con un campo de texto seleccionado, puedo agarrar uno de los lados, y redimensionarlo así, y luego puedo posicionarlo. Agreguemos también la ubicación, ¿por qué no? Hagamos estos 20 pixeles, de nuevo, regulares, y luego dupliquemos éste, agreguemos el número de teléfono, y luego el horario comercial. Simplemente copiaremos los del resumen del proyecto, “Opción Shift” para duplicar esto, haga doble clic para ingresar al modo de edición, y luego copiar y pegar. Vamos a arreglar esto un poco aquí, y también agreguemos un texto descriptivo que diga Horario Comercial, y hagamos esto en negrita. Ahora podemos tomar esto, agruparlo, y podemos tomar ambos, y alinearlos así. Como pueden ver, vamos muy rápido aquí, no nos importan las fuentes que estamos usando, no nos importan los colores, el espaciado, el dimensionamiento, nada de eso. Nuestro objetivo en este momento es solo colocar el contenido en el Wireframe. ¿ Será esta la forma final? Lo más probable es que no. Incluso podemos mover ciertos elementos a otras secciones, por ejemplo, si no nos gusta el hecho de que la dirección y el número de teléfono esté en el área del héroe podemos moverlo a otro lugar, tal vez en el encabezado de alguna manera, o tal vez incluso podemos crear una barra superior justo aquí, en el diseño final. Pero para el wireframe, podemos colocarlo en el encabezado, no hay problema. Si estabas siguiendo a lo largo, entonces es tu turno de enmarcar el encabezado y la sección héroe. Una vez que hagas eso, estamos listos para pasar al menú de comida, eso se acerca. 5. Creación de wireframing: el menú de comida: El siguiente apartado de nuestra lista es el menú de comida. Echemos un vistazo al resumen del proyecto y veamos qué tipo de contenido necesitamos crear para ello. Vamos a la sección de estructura de páginas del resumen del proyecto, donde vemos un poco más detalles sobre las diversas secciones de página que necesitamos crear. Bajo el menú, el menú de comida, podemos ver que al cliente le gustaría que mostráramos el menú del restaurante de una manera muy sencilla y fácil de navegar y leer, y si es posible, mostrar también la descripción del menú. Tenemos la descripción del menú. Si nos desplazamos hasta aquí, es éste, así que podemos seguir adelante y copiarlo ahora mismo. Entonces también lo mantendremos a mano porque vamos a hacer referencia al contenido del menú a medida que avanzamos. Entonces volvamos a Figma y en realidad hagamos sólo un poquito de limpieza aquí voy a seleccionar todos estos elementos, Comando G para agruparlos, así que esa es nuestra área de héroes que creamos previamente, ahora, vamos a encargarnos de la sección de menú. Para eso, en realidad puedo duplicar esta sección. Comando D en un mac para duplicarlo, porque quiero empezar con la descripción del menú de comida. A lo mejor voy a usar algún tipo aquí. Ya veremos cuando lleguemos a la parte de diseño, pero voy a mantener aproximadamente la misma estructura. Aquí en realidad voy a colocar la descripción del menú que acabamos de obtener del resumen del proyecto. Déjame cambiar el tamaño de esto, algo así. Para un título, en realidad podemos volver al resumen del proyecto, y recuerdo que teníamos alguna descripción de la comida que estaban sirviendo o alguna descripción de los servicios, y esta es la correcta aquí que dice servir, degustar alimentos y bebidas desde 1995. Vamos a usar eso como título para esta sección. Hagamos esto en realidad un poco más pequeño, vamos con 48 píxeles, algo así. Vamos a mover esto hacia arriba. Agrupemos todo y esa va a ser la descripción del menú de comida. Ahora, veamos sobre el menú de comida real. Si recuerdas por el resumen del proyecto, al cliente le gustaría mostrar el menú de una manera muy sencilla y fácil de navegar y leer. Entonces al mirar el menú real, podemos ver que se divide en unas pocas categorías. Tenemos estacas, tenemos hamburguesas y sándwiches, quickies y ensaladas. Básicamente cinco, si cuentas hamburguesas y sándwiches como categorías separadas. Pero en el menú aquí, están agrupados como una categoría. Una forma en que podríamos hacer esto como justo fuera del bate es con un controlador de pestañas. Porque el control de pestañas o una pestaña es un patrón que nos permite mostrar grandes cantidades de contenido, como un menú en una cantidad relativamente corta de espacio. Podríamos utilizar pestañas para cada una de estas cuatro categorías y el contenido de cada pestaña serán los elementos del menú correspondientes. Vamos a seguir adelante y hacer eso, déjame sólo copiar este pedazo de texto aquí vamos a alinearlo así. Vamos a llamar a este menú. Aquí bajo los controles de texto, voy a configurarlo a ancho automático. Entonces vamos a crear los enlaces de pestaña para las categorías de menú. Voy a duplicar esto. Hagamos esto 21 pixeles. El primer categoría es lo que se pega. Vamos a duplicar eso. Esta siguiente es hamburguesas y sándwiches. Vamos a copiar y pegar, duplicar nuevamente mantenga pulsado turno mientras arrastra para frenar el movimiento a un eje. Siguiente es qué? Quickies. Por último, ensaladas. Genial. Ahora supongamos que vamos a abrir las pestañas con las apuestas siendo la activa. Seleccionemos estos tres, y pasemos de negrita a regular. Solo para resaltar el hecho de que este es el control de pestañas activo, realmente no importa. Podemos hacer que éste sea audaz y éste irregular. Ni siquiera sabemos si vamos a usar pestañas cuando creamos el diseño real. Esto es sólo una idea. Supongamos en realidad que sí, tenemos los quickies seleccionados y nos gustaría mostrar algunos artículos de quickies. Vamos a seguir adelante y hacer eso. En cambio, alas de búfalo, agarremos la herramienta rectángulo o R en el teclado, y vamos a crear un marcador de posición de imagen, algo como esto. No tiene por qué ser exacto. Entonces voy a pegar en el texto aquí y luego el contenido. De nuevo, realmente no me importa el espaciado o el dimensionamiento, es solo un boceto bruto. Creo que puede ser el precio se debe enumerar por separado. Hagamos eso. Ese es un wireframe rápido de un elemento en el menú, sigamos adelante y agrupe esto. Comando D para duplicar, luego desplazar, arrastrar, algo como esto, y hagámoslo de nuevo. Vamos a alinearlo así y hagamos los otros. Tan dulces perros de chile, hagámoslo. Eso fue $6 y luego papas fritas $3, vamos a copiar esto. Esa es una idea de cómo podemos representar todo este menú en nuestra página. Tenemos pestañas que representarán las cuatro categorías de elementos del menú de comida. Entonces cada pestaña contiene los elementos apropiados. En el wireframe solo mostraría una muestra. No pasamos por todos los contenidos del menú. Eso es una pérdida de tiempo. Podemos hacerlo más tarde cuando lleguemos a la parte de diseño. Si estamos usando pestañas como esta, ni siquiera necesitamos agregar todo el contenido porque eso va a estar oculto de todos modos, eso está sucediendo en el lado del desarrollo de las cosas. Por otro lado, si no vamos a utilizar un control de pestañas como este, y en su lugar elegimos mostrar todo el contenido del menú de comida entonces, sí, el diseño final incluirá todos los contenido que se enumera aquí. Pero cruzaremos ese puente cuando lleguemos a él. Por ahora, en términos de wireframing, esto es más que suficiente. Por último, sigamos adelante y seleccionemos todos estos elementos. Comando G para agrupar todo y ahora tenemos una bonita descripción del menú de comida, luego el menú de comida real. Ahora es el momento de practicar. Adelante y crea la parte del menú de comida en tu versión del wireframe para que podamos seguir adelante con la clase. Si ya lo has hecho, eso es increíble, significa que estamos progresando. Ahora vamos a cubrir las secciones sobre e Instagram. 6. Creación de wireframing: secciones de los detalles e Instagram: Si recuerdas, el resumen del proyecto afirmó que necesitamos una sección con información sobre el restaurante y otra con fotos de Instagram. Vamos a seguir adelante y crearlos ahora mismo. Vamos a abrir nuestro resumen de proyecto y en realidad vamos a desplazarse hacia atrás hacia arriba donde vemos algunos detalles sobre las dos secciones que necesitamos crear. Sobre nosotros, el cliente dice que nos gustaría mostrar una pequeña descripción de lo que es nuestro restaurante y tal vez mostrar una foto o dos de dentro del restaurante. Aquí básicamente tenemos un título sobre nosotros o sobre el restaurante, descripción del texto y tal vez una o dos imágenes, imágenes. Entonces fotos de Instagram. Necesitamos mostrar algunas fotos, fotos Instagram, y luego un botón de seguimiento. Genial. Volvamos a la descripción General y en realidad vamos a usar muchos de los textos de aquí, desde el breve para eso, vamos a seguir adelante y copiar este bit solo vamos a reutilizar los elementos porque va a ir mucho más rápido. Para esta sección, básicamente vamos a llamarlo sobre Birdhouse Bar and Grill. Aquí vamos a tener una o dos fotos. Realmente depende. Podemos hacerlo así. A lo mejor vamos a tener dos fotos lado a lado, veremos y en cuanto al texto aquí, bueno, vamos a copiar y pegar. Ese es el texto que vamos a usar. Esa es la sección Acerca de. Supongo que podemos subir esto un poco. Realmente no importa. Esto es sólo el perfeccionista en mí perdiendo el tiempo para ser honesto. Podemos seleccionar este grupo arriba y terminamos con la sección Acerca de. Ahora veamos sobre el Instagram. Antes de hacer eso, seleccionemos el marco padre. ver cómo hemos llegado casi a la parte inferior, al borde inferior, así que vamos a redimensionar esto que tengamos mucho más espacio para trabajar. Usaremos 5 mil píxeles aquí. Genial. Ahora veamos sobre las fotos de Instagram. justo eso, vamos a copiar este elemento aquí. Por cierto, aquí hay un consejo rápido al trabajar con elementos que están dentro de grupos o marcos. Observe que debido a que se trata de un grupo, al pasar el cursor sobre un determinado elemento y hacer clic, selecciona el grupo, y para seleccionar un elemento específico del grupo, puedo hacer doble clic e ingresar dentro del grupo. Se puede ver que pasé de seleccionar Grupo 13 a seleccionar Grupo 12. Si vuelvo a hacer doble clic, entro al Grupo 6 y así sucesivamente y así sucesivamente hasta llegar al elemento que quiero. Por ejemplo, si no tengo nada seleccionado, para seleccionar por ejemplo, esta imagen, puedo hacer doble clic, hacer doble clic de nuevo, y luego simplemente recorrer toda la estructura del árbol para llegar al elemento Yo quiero. Pero en realidad hay una forma más rápida de sostener Command en un Mac, creo que en un PC es Control. Mantengo presionada Comando y coloco el cursor sobre el elemento que quiero seleccionar y puedo simplemente hacer clic en él de inmediato y lo selecciona a través de toda la estructura de árbol que tengo aquí en el panel de capas. Independientemente de lo profundamente que esté anidado, solo puedo mantener presionada Comando, haga clic en él, y puedo seleccionarlo así. Es súper simple. Ahora, para la sección Instagram, comando-haga clic en este ítem para seleccionarlo. Comando C para copiarlo. Voy a hacer click afuera, luego pegar y llamemos a estas fotos desde Instagram. También seleccionemos este rectángulo. Comando C, da clic fuera del Comando V. A veces eso solo se pega en el mismo lugar, pero puedes moverlo, y vamos a crear la sección de fotos. Nuevamente. Sólo voy a ocultarlo, algo así como este Comando D para duplicar. Después podemos seleccionar estos tres e ir aquí en el Inspector donde dice Más opciones. Puedo distribuir el espaciado horizontal. Eso va a crear un espacio igual entre estos dos ítems. ¿ Esa es la cantidad final de espacio? Definitivamente no. Pero para un wireframe, va a hacer muy bien. Tenemos una fila con tres fotos. Vamos a duplicar esto. Arrástrelo hacia abajo para crear la segunda fila. Entonces solo selecciona todos estos Comando G para agruparlos, por lo que nos resulta más fácil moverlos si necesitamos y en Figma, Comando Z funciona de la misma manera para deshacer. Si quieres deshacer un cambio, simplemente haces Command o Control Z, igual que con cualquier otra app. Si recuerdas, el resumen del proyecto también decía algo sobre un botón Seguir. Vamos a seguir adelante y añadir esa. Agarremos la herramienta de texto. Haga clic. Vamos a decir síguenos. Hagamos 21 píxeles en negrita. También agarremos un ícono de Instagram. Seleccionemos aquí el elemento padre, Comando C para copiar. Seleccionaría este Comando V para pegarlo aquí y alineemos esto en el medio, algo como esto, y luego con la herramienta rectángulo o R en el teclado, dibujemos como un fondo de botón. Aviso que esto se encuentra actualmente en la parte superior de nuestro texto e icono de Instagram. Para moverlo más atrás en el panel de capas podemos hacer clic y arrastrarlo así, o podemos usar Command y corchete izquierdo para moverlo hacia abajo una vez, dos veces, tres veces. Entonces podemos usar el soporte derecho para ir en la otra dirección. Comando soporte izquierdo para enviarlo hacia atrás, Comando corchete derecho para enviarlo hacia adelante. Esa es una forma fácil de manipular el orden de los elementos o el orden de las capas en Figma. Con eso hecho, seleccionemos estos tres Comando G y simplemente, alinémoslo así. Aviso Figma es muy útil con la alineación porque nos da todas estas guías y Guías Inteligentes que nos dice que, “Oye, tu elemento está muy bien alineado con los otros elementos rodeándolo”, lo cual es bastante cool. Ahora, seleccionemos estos tres elementos. Comando G para agruparlos y con eso, se hace la sección de Instagram. Muy bien entonces. Como de costumbre, este es tiempo de práctica, por lo que si no has creado las secciones Acerca de e Instagram, adelante y hazlo. Una vez que hagas eso, es hora de pasar al área de contacto. 7. Creación de Wireframing: el formulario de contacto: Bueno, casi nos hemos hecho un Wireframing. Solo hay dos secciones más que necesitamos crear y la primera es El Formulario de Contacto. Para empezar, primero echaremos un vistazo al resumen del proyecto. Bajo el formulario de contacto, el cliente nos pide que creemos un formulario que las personas puedan utilizar para enviar mensajes o hacer reservas y también quieren un mapa que señale la ubicación. Vamos a seguir adelante y hacer eso. Voy a desplazarse hacia arriba y voy a copiar esta sección porque eso tiene una estructura que podemos usar. Voy a simplemente pegarlo así. Llamemos a este contacto. Hagamos este texto un poco más pequeño, como 48. En realidad voy a conservar estos tres elementos porque es una sección de contacto, tiene sentido que la dirección, el número de teléfono, y el horario comercial estén presentes aquí también no sólo en el área del héroe. Vamos a tener esto, esto, y esto. Vamos a tener un mapa aquí. Hagamos esto un poco más grande, tal vez para diferenciarlo del resto, podemos hacerlo un poco más oscuro, y por qué no añadir un texto dentro que diga mapa. Observa lo áspero que es el boceto, es justo cualquiera que sea el texto, su texto simplemente sin estilo encima de fondos grises. Esa es la belleza de un wireframe, no tenemos que prestar atención a detalles como este. Es sólo una forma rápida de colocar el contenido. Sabemos para qué debemos diseñar. Por último, lo último aquí es crear un formulario de contacto. Para eso, en realidad vamos a desagrupar esto y lo agruparemos de nuevo más tarde. Vamos a crear un rectángulo. Ese va a ser el campo del foro, algo como esto y luego el texto dentro, digamos nombre, agrupa eso. Vamos a mantener esto súper simple. Vamos a pedir una dirección de correo electrónico. Vamos a pedir un número de teléfono, y vamos a pedir el mensaje real y por supuesto que esto tiene que ser un poco más grande, así y al final, necesitamos un botón. En realidad creamos aquí un botón. Vamos a agarrar eso, y vamos a pegarlo aquí. Eliminemos el icono y vamos a elegir el texto para enviar mensaje. Puedo hacer el botón más grande si queremos y eso es sólo un detalle insignificante. Entonces podemos agarrar todos estos comandos G para agruparlos y luego podemos tomar todo esto, mandar G de nuevo para agruparlo, así que ahora es un grupo al que podemos movernos libremente y con eso, realiza el formulario de contacto o el área de contacto. Presentamos un título, mostramos una dirección de restaurante, número de teléfono, horario comercial, un formulario de contacto como lo solicitó el cliente, y también un mapa. Este es un marcador de posición para un mapa, pero el diseño final tendrá un mapa. Entonces tiempo de practicar. Como dije, casi terminamos wireframing. Adelante y crea el área de contacto para que estés actualizado en tu versión del wireframe y luego estarás listo para seguir adelante. Siguiente arriba y el área final que necesitamos para hacer alambre-frame es el pie de página. 8. Creación de wireframing: el pie: Hemos llegado a la lección final de wireframing donde nos encargaremos del pie de página. Vamos. Cuando se trata del pie de página, no tenemos una dirección exacta del cliente, pero generalmente el pie de página contiene información que realmente no pertenece a ningún otro lugar de la página. Una cosa que no hemos agregado a nuestra página hasta ahora es un formulario de boletín y el pie de página es en realidad un lugar perfecto para eso. Por lo que vamos a añadir el formulario de newsletter, pero también algún otro contenido típico que encontrarás en un pie de página como la información de copyright. También agregaremos el logo una vez más. Este es el tipo de contenido que normalmente encuentras en un pie de página. También puedes agregar enlaces de navegación, si eso es lo que quieres. Puedes agregar un botón Volver a Arriba. Realmente depende de la página web. Puedes hacerlo tan complejo o tan sencillo como quieras, pero en nuestro caso vamos a mantenerlo súper simple. Empecemos con este formulario de boletín. Una vez más, voy a aumentar el tamaño de nuestro marco a, digamos, 6 mil píxeles, eso nos debe dar suficiente espacio aquí. Empecemos copiando este texto, y mientras estamos en ello, también podríamos hacerlo de ancho automático. Éste también. Ahora veamos, ¿ tenemos otros? Sí, lo hacemos. Cuando estás configurando un ancho fijo en un pedazo de texto como este, solo significa que cada vez que añades más texto que los límites, solo se desborda a la siguiente línea. Pero si fuera a configurarlo a ancho automático, eso no se desbordará en una línea separada. En cambio, solo cambiará el tamaño y aumentará su ancho para adaptarse a todo su contenido. Para títulos como este, es más que bien establecerlo en ancho automático. Cuando se trata de párrafos como este, por ejemplo, donde se quiere que el texto detenga en un punto específico, entonces por supuesto, puede configurarlo a altura automática, lo que significa que tiene un fijo ancho y su altura está dictada por su contenido. Pero en cosas como esta que son títulos, puedes configurarlo a ancho automático, no hay problema. A menos que, por supuesto, el título sea muy largo, en cuyo caso, es posible que desee fijarlo a altura automática. Pero luego nos ocupemos del formulario de boletín. Aquí vamos a decir: 'Suscríbete a nuestro boletín de noticias'. Agarremos también uno de estos elementos de texto y hagámoslo sobre esto grande. En el interior, vamos a agregar un subtítulo que dice 'Suscríbete nuestro boletín informativo para conocer noticias y eventos especiales'. Entonces vamos a tener aquí una forma sencilla, y debido a que ya creamos un formulario en el área Contacto, vamos a seguir adelante y copiar esos dos elementos, traerlos afuera. Cambiemos aquí el texto para suscribirse. Agrupa esto, muévelo hacia arriba, y luego selecciona grupo, y ese es nuestro formulario de suscripción al boletín. Ahora, para el resto del pie de página, es súper simple de hacer. Vamos a agregar un texto de copyright que dice Copyright 2021 Birdhouse Bar & Grill. Todos los derechos reservados. Hagamos esos 21 pixeles para que coincidan con el resto de nuestro texto y esto debería ser 21 también. No es que importe demasiado pero es sólo algo que podemos hacer en este momento. Veintiún aquí. Veamos, estos son los 21, así que estamos bien. Entonces solo podemos alinear esto aquí mismo, y luego podemos volver a la cima. Podemos agarrar el logotipo, y luego desplazarse hacia atrás hacia abajo, pegarlo en. Podemos hacer el logo un poco más pequeño en el wireframe. Entonces esa es la sección de pie de página. Vamos a seleccionar todo este grupo y luego podemos seleccionar el marco padre y simplemente redimensionarlo así. Con eso, nuestro wireframe ya está hecho. Por supuesto, es blanco y negro, se podría pensar que, “Oh, esto se ve terrible”. Bueno, claro que se ve terrible, es un boceto. No tiene nuestra tipografía final, nuestros colores finales, nuestro espaciado final, dimensionamiento, nada de eso. El wireframe es simplemente un boceto, y su propósito, como he estado diciendo en las lecciones anteriores, es presentar el contenido. Lo hacemos de una manera muy áspera, porque nos permite trabajar muy rápido. Cuando lleguemos al diseño, claro, tomaremos cada sección y comenzaremos a agregar las fuentes, los colores, alinearemos los elementos de manera diferente, decidiremos, ¿queremos usar estos iconos o tal vez ¿no? A lo mejor no queremos usar iconos en absoluto. Ya veremos cuando lleguemos a la parte de diseño. Pero por ahora, este es nuestro wireframe terminado. Como probablemente ya estás acostumbrado, es hora de practicar. Si has estado trabajando a mi lado entonces deberías tener un wireframe terminado. Si no, adelante y hazlo ahora mismo para que estés listo para seguir adelante con la clase. Ahora, desde que terminamos wireframing, hagamos un resumen rápido de las últimas cinco lecciones. Wireframing es como el boceto, y puedes hacerlo digitalmente o con bolígrafo y papel. En un wireframe, puedes usar las fuentes que quieras, pero te recomiendo neutras como Helvetica o Roboto. debe crear un wireframe en escala de grises. Los colores no pertenecen en esta etapa del proceso. espaciado y el dimensionamiento no es definitivo en este punto, así que no intentes hacer perfecto tu píxel de wireframe, es una pérdida de tiempo. Con eso fuera del camino podemos iniciar el proceso de diseño real, y comenzaremos definiendo la tipografía. 9. Definir la tipografía: En esta lección, estamos iniciando oficialmente el proceso de diseño. Lo hacemos definiendo primero la tipografía. Eso significa la tipografía o los tipos de letra. Estaremos usando la escala de tipos y el espaciado entre letras, los pesos de fuente, las alturas de línea, y así sucesivamente. Ahora empezamos así porque en una página web típica, la mayoría del contenido es texto. La tipografía tendrá el mayor impacto visual. Además, me resulta realmente fácil trabajar así porque se simplifica el flujo de trabajo. Claro, puedes hacer cambios en la tipografía más adelante, pero abordar esto primero te da una base sólida para construir. Al elegir los tipos de letra para un proyecto como este, hay varios factores a considerar. Si bien este es un tema que en realidad será adecuado para toda una clase separada porque hay mucho de qué hablar, voy a tratar de simplificar el proceso y explicar básicamente mis elecciones. Creo que todo se reduce al propósito del diseño y la sensación que se quiere transmitir a los visitantes. La forma más fácil de empezar es averiguar el tono o el estado de ánimo del sitio web que deseas diseñar. ¿ Es casual o más formal? ¿ Es más grave o más del lado lúdico? Una vez que respondas a esa pregunta, tendrás una dirección mucho más clara. Entonces para descubrir el tono y el estado de ánimo del sitio web que estamos tratando de crear, echemos un vistazo más de cerca al resumen del proyecto. Si recuerdas de las lecciones anteriores, justo al final tenemos algunas pautas de diseño. Ahora es el momento perfecto para mirar estos. El cliente quiere que diseñemos un sitio web de aspecto moderno. Observe la palabra moderna. Esta es una pieza clave de información. Incluso si se trata de un negocio familiar abierto todo el camino atrás en el '95, los dueños les gustaría que nos adaptemos y nos mantengamos al día con los tiempos modernos. También quieren que el sitio web se vea amable y no muy chic. No son uno de esos restaurantes de alta gama, súper caros. Observa las palabras clave aquí, amigables, no muy chic. El diseño debe apelar a las personas más jóvenes y mayores por igual. Con base en esto, podemos empezar a formar una opinión sobre qué tipos de letra debemos usar. Hay dos categorías principales entre las que podemos elegir. Tenemos serifs y sans serifs. Déjame mostrarte cómo se ven ambos. Para eso abriré Google Fonts, que es uno de los mejores servicios que tenemos actualmente para conseguir fuentes de calidad. Por ejemplo, Playfair Display. Ahora, creo que todos estamos familiarizados con este tipo de fuente. A la categoría se le llama el serif por estos aquí mismo. Estas decoraciones que se ven en las letras, estas se llaman serifs. Así es como se ven las fuentes al principio. Estas son consideradas fuentes más clásicas. En contraste, si miramos algunas fuentes sans serif, que básicamente significa sin serifs, y busquemos algunas de esas, por ejemplo Roboto, notarás que en los sans serifs, ya no tenemos esas decoraciones en los personajes. Estas son más geométricas, son de aspecto más moderno porque no comparten esas características con las fuentes serif. Entonces como pauta general, cuando intentas decidir entre serifs y sans serifs, debes recordar lo siguiente; sans serifs, por ejemplo Roboto, son más modernos y son más amigables, son más casuales, son de aspecto más geométrico. Serifs por otro lado, como los que te mostré anteriormente, están más del lado serio. Son más clásicos, son más elegantes, y evocan sentimientos diferentes. Utilizarías una fuente serif en el sitio web que deseas transmitir elegancia o lucir más seria, llamémosla. Si quieres un sitio web de aspecto más lúdico o moderno entonces irías por un sans serif, como el que te estoy mostrando aquí. Eso es en pocas palabras. Como dije, este tema probablemente sería adecuado para toda una clase, pero por ahora solo quiero darte una versión muy condensada. Entonces basado en lo que acabo de decir y en base a los lineamientos de diseño que nos proporcionaron, porque el cliente quiere un sitio web de aspecto moderno y él quiere que el sitio web luzca amable y no muy chic, nosotros puede tomar inmediatamente una decisión con respecto a la tipografía. Estaremos usando una tipografía sans serif. El que elegí para este proyecto se llama Poppins. Déjame mostrarte. Este de aquí mismo está disponible de forma gratuita desde Google Fonts y así es como se ve. Hay un par de razones por las que elegí Poppins. En primer lugar, es un sans serif. Es de aspecto moderno, es muy amable, pero también, y estas son cosas muy importantes, se ve muy bien en tamaños grandes, como este, pero también en tallas más pequeñas. Por ejemplo, esto, podemos usarlo para ambos textos corporales, pero también para encabezados, para títulos. El segundo motivo es que tiene una amplia gama de estilos o pesos para elegir. Va de delgado, que se ve así, hasta el negro, que se ve así. Ser una fuente versátil y tener todas estas opciones en términos de peso de la fuente lo hace muy útil, especialmente en sitios web donde usaremos una sola tipografía como la que tenemos aquí. Otra razón es, por supuesto, el hecho de que es libre de usar. Cada fuente de Google Fonts es libre de usar incluso en proyectos comerciales, lo cual es fantástico. Significa que nuestro cliente no tiene que pagar una fuente. Por último, Poppins también lo hace muy bien en términos de legibilidad y legibilidad. Estos son todos los factores que sí debes tener en cuenta al elegir un tipo de letra para tu proyecto. Para resumir, estaré usando Poppins para todo el sitio web, por lo que una sola tipografía. Pero podría sentirse atraída por algo más. Está totalmente bien si quieres usar un tipo de letra diferente para tu versión del proyecto. Te recomiendo usar Google Fonts porque es un servicio gratuito y aquí encontrarás montones de fuentes de alta calidad. Pero si buscas una alternativa y estás usando, por ejemplo, la Adobe Creative Cloud, puedes usar Adobe Fonts. esto se puede acceder en fonts.adobe.com, y aquí puedes navegar por todas las fuentes. Puedes filtrarlos por propiedades de clasificación, etiquetas. Puedes buscar solo fuentes geométricas y te va a dar todas estas. Incluso puedes encontrar Poppins aquí mismo en Adobe Fonts. Este es otro gran recurso, pero esto no es gratis, mientras que Google Fonts es gratis. Realmente depende de ti y qué crees que se verá mejor. Pero para este proyecto, voy a estar usando Poppins. Ahora que sabemos qué tipo de letra vamos a usar, sigamos adelante y aplíquelo a nuestro diseño junto con todas las demás características tipográficas, como line-height, tamaño de fuente, peso de fuente, y así sucesivamente. En Figma, vamos a las páginas. Crea una nueva página. Podemos llamar a este diseño, solo para que tengamos alguna separación entre los wireframes y el diseño final. Copiemos el wireframe y vamos a pegar eso en nuestra nueva página. Ahora tenemos una buena copia y estaremos trabajando en ésta. Entonces empecemos llamando a esta pantallas grandes. No te preocupes demasiado por este nombre ahora mismo, solo está ahí para darnos una indicación del tamaño de la pantalla. Ahora lo primero que haremos es seleccionar todos los elementos de texto y cambiar su familia de fuentes a Poppins. Por supuesto, necesitas tener esto instalado en tu sistema, así que si no lo haces es realmente fácil. Simplemente puedes abrir las fuentes en Google Fonts y luego simplemente haz clic en “Descargar Familia”. Te va a dar todos los archivos de fuentes, que luego podrás instalar en tu sistema. No voy a repasar eso porque asumo que sabes instalar una fuente. Una vez que instales Poppins, volvamos a Figma. Si está trabajando en el navegador es posible que no vea la fuente de inmediato aquí, en cuyo caso necesitaría refrescar o volver a cargar la página. Entonces seleccionemos este elemento. Aquí tienes un consejo rápido, puedes ir a Editar y seleccionar todo con la misma fuente. Eso va a seleccionar todos los elementos que están usando Helvetica y vamos a cambiar a Poppins así. Veamos, todavía necesitamos los encabezados. Estos están utilizando Helvetica bold, por lo que no fueron seleccionados también. Pero hagamos eso ahora. Seleccionaré todos con la misma fuente. Cambiémoslos a Poppins, y veamos si tenemos algo más que quedaba fuera. Solo estoy manteniendo presionado el comando y seleccionando cada elemento de texto solo para asegurarme que use la tipografía correcta. Como se puede ver en el Inspector, todos están utilizando Poppins. Por supuesto, también puedes ver esto visualmente, pero prefiero simplemente asegurarme de que sea un proceso sencillo. Poppins, Poppins, Poppins. ¿Qué pasa con estos? Correcto. Poppins. Parece que los tenemos a todos. Eso es el paso 1, cambiando la familia de fuentes. A continuación, trabajemos en los tamaños de fuente, y aquí es donde entra una escala de tipo. Aquí está la cosa, cada vez que estás decidiendo qué tamaño de fuente usar para tu proyecto de diseño, hay dos formas de hacerlo. Uno es ocultarlo y decir, bien, bueno, tal vez éste se vea mejor, un poco más grande. Éste quizá un poco más pequeño como el 46. Pero lo que pasa con este enfoque es que puede llevar bastante tiempo. En cambio, lo que te recomiendo que hagas es usar una escala de tipo y una escala de tipo se ve algo así. Voy a abrir una herramienta llamada escala de tipo, y una escala siempre comienza con un tamaño base y una relación. Va algo así. Empiezas con el tamaño base y multiplicas eso con la relación, y obtienes otro paso en la escala. Toma ese valor, lo multiplicas con la escala o la relación, y obtienes el siguiente paso y el siguiente y el siguiente y el siguiente incluso puedes agregar tantos pasos como quieras. Como se puede ver, esto es como una progresión de tamaños de fuente de grande a pequeño o de pequeño a grande. Eso es lo que es básicamente una escala de tipo. Porque lo estás haciendo de esta manera, ya no tienes que adivinar los tamaños de fuente. Todas están bien dispuestas para ti en base a este tamaño inicial y la relación. Dependiendo de la relación, tu escala se verá así o así o así. Cuanto mayor sea la escala, mayor será el contraste entre cada paso de la escala. En un tercio mayor una relación de 1.250, tenemos un contraste relativamente pequeño entre este tamaño y este tamaño, o entre este tamaño y este tamaño. Pero si vamos a la relación dorada, entonces tenemos una diferencia mucho mayor entre este tamaño y este tamaño, entre esto y esto, y así sucesivamente y así sucesivamente. En este punto solo puedes usar esta herramienta la cual recomiendo encarecidamente, uso todo el tiempo. Tú Lo usas para crear tu propia escala de tipo. Esto te va a dar exactamente los tamaños de fuente que necesitas. Para nuestro proyecto, sé con certeza que quiero empezar con un tamaño base de 21 píxeles. Este es el tamaño del texto corporal. Este es el tamaño de un párrafo normal, básicamente. Quiero un tamaño de fuente más grande de lo normal. En un navegador, típicamente, el tamaño de fuente base es de 16 píxeles, por lo que 21 es un poco más grande que eso. Pero lo estoy haciendo intencionalmente porque quiero que el texto sea legible. Si recuerdas por el resumen del proyecto, bajo las pautas de diseño, nuestro diseño debe atraer tanto a las personas más jóvenes como a las personas mayores. Las personas mayores definitivamente apreciarán un tamaño de fuente más grande porque pueden leer más fácilmente. Por eso estoy eligiendo iniciar la escala de tipos a 21 pixeles. Ahora, debemos decidir la escala o relación que vamos a estar utilizando. Creo que para este tipo de proyectos, la cuarta proporción perfecta de 1.333 será exactamente lo que necesitamos porque sí tenemos un poco de contraste entre cada paso en la escala, pero no es exagerada como por ejemplo, la relación dorada. Esto es demasiado. Para este tipo de diseño para lo que estamos haciendo en este proyecto, creo que el cuarto perfecto nos está dando todo lo que necesitamos. Entonces, una vez que nos establecimos en el tamaño de la fuente base y la escala y nos dieron cuenta nuestra escala tipográfica, podemos volver a Figma y podemos crear otra página, y usualmente llamo a esto activos. Aquí, suelo tener mi logo. Pero también me gusta crear un marco que muestre todos los tamaños de fuente y las alturas de línea estarán utilizando. Esto sólo va a hacer mi trabajo mucho más fácil después. Vamos a crear un marco. El tamaño realmente no importa. Sólo voy a empezar con un pedazo de texto que va a decir 21/, digamos 32 por ahora, y voy a explicar lo que hacen estos números en un poco. Veintiún píxeles es mi tamaño de fuente base. Es éste de aquí mismo. Lo que hago es que en realidad hago el texto 21. Voy a estar usando Poppins también para mostrar esto porque me va a dar la oportunidad de ver cómo se ve el texto con mi tipografía elegida. Pero voy a estar usando regular, y luego el segundo valor es la altura de línea. Ahora aquí está lo genial de Figma, calcula automáticamente la altura de la línea para mí en función una relación predefinida y la altura de la línea es la altura de una línea de texto. Por ejemplo, si tengo aquí un textil y digo, hola, este es un texto multilínea. Vamos a establecer esto a la altura auto. Observe que cuando selecciono un elemento o una palabra, la selección me dará la altura exacta de esa línea de texto. Si tuviera que cambiar esto de 32-48, esa selección, esa altura de línea ahora será mayor en comparación con esta altura de línea, que aún está establecida en 32 píxeles. Esto es importante porque altura de la línea afecta la legibilidad. No quieres una altura de línea demasiado pequeña. Por ejemplo, si tuviera que establecer una altura de línea de ocho píxeles, esto sería demasiado pequeño. Simplemente no se puede leer el texto porque las líneas de textos se superpondrán entre sí. ¿ Y si hago estos 52 pixeles? Bueno, esto es demasiado largo o demasiado grande. El texto no es realmente legible en este momento. En cambio, tienes que elegir una altura de línea que sea adecuada para el tamaño de fuente. En 21 píxeles, si fuera a eliminar este valor, Figma calculará automáticamente una altura de línea para mí, en cuyo caso sería de 32. Para 21 pixeles, una altura de línea de 32 píxeles es muy buena, así que voy a mantenerla en eso. A continuación, dupliquemos esto y determinemos el siguiente tamaño de fuente, que en nuestro caso es 27.99. Vamos a redondear esto a 28. Aquí voy a decir 28. También lo cambiemos aquí. Para la altura de línea, Figma calcula esto en 42. Voy a poner 40 en éste. Algunas de estas mediciones están relacionadas con el sistema de ocho puntos que estoy usando para espaciado y dimensionamiento. Hay una lección separada para eso y lo vas a ver muy pronto. Pero por ahora, cualquier altura de línea que esté usando será un múltiplo de ocho. En mi caso, Figma me recomendó 42, pero elegí 40. A continuación, vamos a duplicar este valor. El siguiente tamaño de fuente es 37. Vamos 37. También vamos a cambiar la altura de la línea aquí, y verás en un poco por qué esto es tan práctico. Para 37 píxeles, Figma recomienda 56 píxeles como altura de línea, pero voy a estar usando 48, así como eso. A continuación, tenemos 50 píxeles de tamaño de fuente, así. Veamos. Para la altura de línea, Figma recomienda 75, pero voy a estar usando 64. Al igual que así. Vamos a seguir adelante. Sesenta y seis píxeles. Para la altura de línea, Figma recomienda 99. Voy a bajar esto ligeramente a 80. Vamos a tener 66 y 80. Esto es 64 para la altura de línea, olvidé cambiar eso. Creo que necesitamos uno más, y eso va a ser para los títulos más grandes. Veamos, 88. Entonces 88 tamaño de fuente, y para la altura de línea, voy a redondear esto a 104, que también es un múltiplo de ocho. Ahora vamos a poner esto aquí, 104. Genial. También empezamos a 21 pixeles y nos movemos hacia arriba. Pero también podríamos necesitar tamaños de fuente más pequeños que los 21 píxeles. Hagamos un paso más bajo y la herramienta también nos da unos valores más bajos, y en nuestro caso son 15.75. Vamos a redondear a 16. Tendré 16 pixeles, 24 píxeles de altura de línea. Esto es correcto, así que voy a decir 16 y 24. Con eso, ahora tenemos la escala de tipo final. Los tamaños de fuente son 16, 21, 28, 37, 50 , 66 y 88. Justo al lado de cada tamaño de fuente, tenemos la altura de línea que se aplicará a cada elemento. Después con esto en su lugar, vamos a seguir adelante y aplicar estas características tipográficas a nuestro diseño. Sólo para hacernos más fácil, podemos copiar este marco en nuestro diseño solo para que tengamos estos valores justo ahí cuando los necesitamos. Empecemos con el menú y seleccionemos todos estos. aquí vamos a usar 21 Poppins. Creo que vamos a ir por el negro porque se ve bastante bien, y también creo en mayúsculas. Para acceder a opciones adicionales para texto, basta con hacer click en este elemento y pasar por mayúscula, elige ésta, mayúscula. Ahora podemos moverlos un poco así así. Después tenemos los elementos del menú atendidos, 21 pixeles. Agreguemos también la altura de línea correcta, que es 32, así, y podemos seguir adelante. Abordemos en realidad todos los encabezamientos en este momento. Éste, esto es fácil. Es un rumbo 1. También estaremos usando el peso de la fuente negro y para el tamaño de fuente, es 88, éste de aquí, y 104 para la altura de línea. Por supuesto, cuando hacemos eso, podríamos necesitar movernos por algunos de estos elementos porque tienen tamaños de fuente mucho más grandes. Veamos sobre éste. Para esto, usaremos un tamaño ligeramente más pequeño como este, pero también el peso de la fuente negra, 66 y 80. También en los encabezados, quiero reducir un poco el espaciamiento entre letras y voy a decir menos tres por ciento. Esto acaba de acercar un poco la carta. Siento que esto se ve mucho mejor para esta tipografía particular para Poppins. Voy a hacer lo mismo por el rubro 1. Si lo vamos a llamar así, menos tres por ciento. Eso es el rubro 1, básicamente. Esta es la rúbrica 2. También vamos a mover esto hacia arriba. Éste, este también será un rubro 2 y esto es lo que puedes hacer en Figma pro tip. Puede seleccionar los elementos de texto. Puede hacer clic con el botón derecho, copiar pegar como, puede copiar las propiedades. Después puede seleccionar otro, hacer clic con el botón derecho, copiar pegar como y pegar propiedades. O puedes usar los atajos de teclado. Eso va a recibir exactamente el mismo estilo que este. Bastante genial. Veamos sobre los otros encabezamientos. Vamos a seleccionar esto, seleccionemos también éste y éste. Vamos a hacer clic derecho, Pegar propiedades. Bueno. Para éste, en realidad vamos a ir una talla más baja y un lado es más bajo según nuestra escala de tipo es 50. O podemos ir dos tamaños más bajos e ir por 37, por lo que 37 tamaño de fuente, 48 altura de línea. Hagamos eso, 37, 48, también negros, también menos tres por ciento. Genial. Eso son todos los encabezamientos atendidos. Ahora, veamos sobre el resto del texto. Seleccionemos los párrafos grandes. Éste, éste, y éste, y éste. Agreguemos un tamaño de fuente de 21 píxeles, que es el tamaño de fuente base y 32 píxeles como altura de línea. Vamos a mantener el peso de la fuente en regular. También para éste, porque está en el pie de página, quiero darle un poco de un estilo diferente. Voy a hacer que sea 16 pixeles y 24 píxeles altura de línea, nuevo, basado en nuestra escala de tipo. ¿ Qué más? Vamos a asegurarnos de que estos tengan la configuración correcta. Vamos 21, 32. Entonces estos 21, 32. Por cierto, podríamos cambiar algunas de estas propiedades tipográficas a medida avanzamos con nuestro diseño. En este momento es básicamente una fundación. Pasemos a estos. Estos son en realidad los títulos o los títulos de platillos, y tal vez queremos darles un poco más importancia. Voy a aumentar el tamaño de la fuente en un paso aquí. En lugar de 21 usaremos 28. Seleccionaremos estos tres. Diremos 28 y 40 y también menos tres por ciento, y vamos a usar Poppins negrita esta vez porque negro, quiero reservarlo para los grandes encabezados. Creo que para este tipo de contenidos, negrita funcionaría mucho mejor. Para estos voy a mantener 21 pixeles. Hagamos la altura de la línea y para estos también. Éste ya está establecido. Éste, 21, 32. ¿ Qué más tenemos? Tenemos estos, también deberíamos tener la altura de línea de 32 píxeles. También tenemos estos, que deben ser 21 y 32. Éste es correcto. Éste, vamos a actualizar también, 21 32. Éste es 16 y 24. Eso debería ser. Permítanme realmente mostrarte la diferencia entre nuestro wireframe original y la primera iteración de nuestro diseño después de aplicar la tipografía. Por supuesto, parece un desastre en este momento porque no hay suficiente espacio entre elementos. En realidad vamos a arreglar eso rápido. Sólo vamos a poner un poco más de espacio para respirar aquí, algo así. Tal vez hacer esto un poco más pequeño. Mueve esto hacia abajo. Ves la diferencia. Este es el wireframe. Aquí es donde empezamos, y este es el primer paso en el proceso de diseño estableciendo la tipografía. Ve cuánta diferencia hace. Porque como estaba diciendo, la mayoría del contenido en una página web está representado por texto. Al cambiar la tipografía, harás el mayor impacto visual. Eso es todo lo que vamos a hacer en cuanto tipografía por el momento. Ahora, es hora de un recapitulativo rápido. Al diseñar un sitio web, comience con la tipografía. Antes de elegir un tipo de letra, defina el tono y el estado de ánimo del sitio web que estás diseñando. Usa tipos de letra sans-serif para sitios web más modernos, casuales o minimalistas. Utilice un tipo de letra serif para sitios web más elegantes o serios. Ahora que conoces los fundamentos de trabajar con tipografía y escoger los tipos de letra correctos, adelante y haz eso. Si lo desea, puede elegir un tipo de letra totalmente diferente para su versión del proyecto. Expliqué por qué elegí Poppins, pero debes elegir lo que creas que funcionaría mejor para el tipo de sitio web que estamos diseñando. Ahora, ¿qué sigue? Bueno, a continuación trabajamos con color y vamos a crear la paleta de colores para este proyecto y lo haremos en la siguiente lección. 10. Elección de colores: Trabajar con color es divertido y definitivamente puede transformar un diseño, ojalá de una buena manera. Pero también puede arruinar uno. Si estás usando demasiados colores o simplemente los equivocados, un buen diseño simplemente bajará por el desagüe, por así decirlo. Déjame mostrarte los colores que voy a usar para este proyecto, por qué los recogí y también te mostraré algunas herramientas útiles para trabajar con color. Para mí, todo empezó con el logo. Porque de inmediato cuando lo vi, y cuando vi esta naranja pardusca, supe que quería usar eso para un acento. Aquí en la carpeta Assets, llamemos también a esta escala de tipo. Vamos a crear un nuevo marco. Lo llamaremos colores. Por cierto, pro-tip con un fotograma seleccionado, puedes presionar Comando R o probablemente sea Control R en Windows para ingresar al modo de cambio de nombre. O simplemente puedes hacer doble clic en el panel de capas, o puedes hacer doble clic aquí y renombrarlo así. Con los colores, lo que normalmente hago es dibujar un rectángulo o un círculo como este y solo pego en ese color. Esto es lo que vamos a usar para el acento. Un par de muy buenas razones, una es que coincide con el logotipo, por lo que coincide muy bien con la marca. Pero también está muy cerca del color naranja, que está entre marrón y amarillo. El amarillo representa la felicidad, la alegría y también es un captador de la atención, un captador de atención. El marrón es un color más serio e imponente y representa estabilidad y sabiduría. La combinación de estos dos, creo, funciona muy bien para este tipo de sitio web, pero también para la propia marca. Porque si recordamos, se trata de un negocio familiar que se abre en el '95. Si bien también buscan ser modernos y amigables, también quieren preservar algo de ese legado como podemos ver en esta descripción general. Es un negocio de propiedad familiar. Creo que en general para este proyecto, esto hará un gran color de acento. Un color de acento significa un color que vamos a usar con moderación, aquí y allá en ciertos elementos para resaltar ellos. Además, tiene un gran contraste sobre el blanco y sobre un fondo oscuro. Hablando de contraste, esto es algo que siempre debes considerar porque usar colores con un contraste muy bajo será muy malo en cuanto a accesibilidad, personas con discapacidad visual no será capaz de distinguir entre esos colores, por lo que se está haciendo más difícil para ellos. Es por eso que cada vez que estés eligiendo los colores para tu proyecto, asegúrate de que tengan un buen contraste. Hay varias formas de comprobar. En macOS, hay una app que se encuentra en la barra de menús, que se llama Contrast. Es realmente simple de usar. Simplemente puedes escoger un color y luego escoger el otro color, y cualquier cosa que esté por encima del Doble A está bien de usar. El Apple también te dice si falla, como lo hace aquí, por lo que significa que este color sentado sobre un fondo gris claro como este no tendrá suficiente contraste, pero puesta en un blanco como este tendrá suficiente contraste. Incluso puedes revisarlo contra fondos más oscuros y verás que sí tenemos un buen contraste. También hay formas de revisar esto en la web. Si no quieres pagar por esta app, o tal vez estás usando Windows y no tienes esta app disponible, simplemente puedes hacer una búsqueda en Google para el comprobador de contraste y puedes encontrar esta desde WebAIM, y aquí de nuevo, puedes pegar los valores o escogerlos manualmente y te va a dar la relación aquí mismo y también algunos algunos que son muy útiles. Ahora, para complementar este color de acento, vamos a hablar de los colores negros o del color que voy a usar para el texto. Ese color es éste, 081E26 que se ve algo así. Ahora, este color es un azul muy oscuro. Fíjate que el matiz es éste. Es un color azul muy bonito, que por cierto, el azul es un cumplido de naranja por lo que funcionan muy bien juntos. Pero también lo tonificé mucho porque quiero usarlo para texto. Otro consejo que te puedo dar aquí es que cada vez que estés definiendo los colores para tu texto, mantente alejado del negro puro. Eso va a ser demasiado duro, va a contrastar demasiado con el resto de tu página. En cambio, usa un gris o mezclando un poco del color con ese gris como hicimos para este ejemplo. Estamos usando 081E26, que es gris mezclado con azul. Creo que estos dos juntos formarán una pareja realmente agradable. Nuevamente, este color contrasta muy bien con blanco o con otros colores con los que podríamos usarlo. Los dos colores que vamos a usar son este, D9366 y 081E26. Este es el acento, este es el negro. Yo lo llamo negro aunque no sea técnicamente negro 100 por ciento, pero es mucho más fácil referirlo como el color negro porque eso es lo que vamos a usar para texto, para varios fronteras, fondos y cosas así. Ahora que te mostré los dos colores que voy a usar, vamos adelante y aplicarlos al diseño. Voy a empezar seleccionando este color aquí mismo, el negro. Vamos a nuestro diseño, realidad vamos a duplicar este elemento. En Figma, esto es súper sencillo de hacer. Siempre que estés seleccionando un grupo de elementos como yo hice aquí. En el inspector, obtendrás algo llamado colores de selección. Esto básicamente te muestra todos los colores que se están utilizando en el diseño. Porque trabajamos con solo negro, blanco y gris, puedo hacer click en el campo con el color negro y simplemente pegar en el nuevo valor. Eso va a poner o reemplazar el negro puro con este color en todos los elementos al mismo tiempo. Ahora, como pueden ver, estamos utilizando el color actualizado. ¿ Qué tan fácil es eso? Esa es una de las razones por las que me encanta Figma, también agregó ese color al menú, a los iconos, a todo. Una cosa que voy a hacer aquí es cambiar la parrilla prestada de nuevo a su color axón. Para eso, puede ser un poco complicado. Solo vamos a seleccionar estos de forma individual. Volveremos a los activos, cogeremos este color, y luego volvemos al diseño y usaremos eso. Genial. Eso es todo lo que haremos con el color en este punto, porque se harán otros cambios a medida que avanzamos con nuestro diseño. Podríamos decidir que tal vez este párrafo necesite ser un poco tonificado, en cuyo caso, podríamos cambiar la opacidad del color a 80 por ciento o 70 por ciento. Pero eso no es algo que podamos hacer en este momento. Eso sucede más tarde cuando empezamos a crear los diseños y ver cómo organizamos los elementos y cómo apoyamos los elementos espaciales. Por ahora, añadir el color del texto y el color de acento al logotipo es más que suficiente, y esto nos da una base muy fuerte en la que podemos construir. Ahora al trabajar con color, simplemente puedes escoger los que creas que se verán mejor, eso está totalmente bien. Pero hay ciertas herramientas que pueden ayudarte con esta tarea. Ahí digo, que sea más preciso. Te voy a mostrar un par de estas herramientas, que por cierto utilizo de forma regular. El primero es Adobe color. Esta es una gran manera de descubrir paletas de colores yendo a la pestaña Explorer. Si te sientes sin inspiración, tal vez estés buscando crear algo con verde dorado. Puedes buscar el verde dorado o el término que quieras y encontrarás paletas de colores que coincidan con ese criterio. Puedes descargarlas como JPEG si estás usando la suite Creative Cloud, entonces puedes agregarlas a tu biblioteca, o puedes abrir esto y copiar cada color individual. O puede copiarlos como CSS directamente o XML o SAS o RSS. Esta es una herramienta muy práctica, pero también puedes crear tus propias paletas de colores. Por ejemplo, si fuera a seleccionar mi color de acento, voy a ir a color Adobe, entonces lo pegaría aquí mismo en el medio, donde tengo la flecha de color base. Con base en la armonía, puedo tener diferentes combinaciones. Esto es analógico y en realidad se puede ver dónde está cada color en la rueda de color. Se trata de un monocromático, diferentes variaciones del mismo color, pero con más blanco o más negro añadido a ellas. Tienes tríada, de cortesía, split de cortesía. Hay un montón de reglas de armonía entre las que puedes elegir. Pero hacer esto te permite descubrir y crear paletas de colores para tu proyecto. Por ejemplo, bajo complementario o split complementario, ver que el color naranja que está en la base de nuestro acento es complementario con el azul. Para tu propio proyecto, puedes escoger ese para el fondo o éste y simplemente jugar con la ligereza del color. Éste. Esto realmente te da mucha libertad y hace que tu trabajo sea mucho más fácil. A la siguiente aplicación se llama ColorSnapper. Esto es algo que he estado usando desde hace mucho tiempo en un Mac. Desafortunadamente, no funciona en Windows. Pero ColorSnapper te permite básicamente mostrar un selector de color como este que puedes usar para escoger colores desde cualquier lugar de tu pantalla. Eso se va a copiar automáticamente en tu portapapeles. También se puede ver la historia del color aquí. Puedo elegir entre varios formatos. Con todo, es una gran app. Si estás usando un Mac y estás trabajando con color, muchas de las veces, recomendaría encarecidamente esta. Una alternativa también para Mac es Sip. Esto es un poco más complejo, porque también te da la opción de guardar ciertas paletas de colores. Es un poco más avanzado, pero esto también es otra vez, solo para Mac. Si estás usando Windows, puedes instalar la aplicación power toys, y eso también tiene un selector de color integrado. No funciona tan bien como estos dos, pero es un comienzo. Si estás usando Windows, puedes beneficiarte de la misma funcionalidad. Otra herramienta que uso cuando estoy trabajando en Windows, por ejemplo, es colorcontrast.cc. Este es un comprobador de contraste en la web, y hace exactamente lo mismo éste en el sentido de que te muestra el contraste entre dos colores y si pasa o no las pruebas. Pero éste es gratuito y es accesible desde cualquier sistema operativo. Por último, esta es la app de la que te hablaba antes. Pero de nuevo, esto es para Mac, sólo. Escoge los colores con cuidado. Pueden hacer o romper un diseño. No uses demasiados colores. Para mantener las cosas simples escoge un color para el texto y uno para acentuar ciertos elementos como botones o enlaces. Si escoge más de dos colores, asegúrate de que funcionen bien juntos. Ahora los colores están adentro, y acabamos de completar otra tarea enorme en el proceso de diseñar este sitio web. Verás que una vez que se establezca la tipografía, y hayas aplicado algunos colores al texto o a algunos de los elementos de la página web, entonces vas a tener un tiempo mucho más fácil completando el diseño. Ahora como de costumbre es el momento de practicar. Adelante y selecciona y aplica los colores para tu versión del diseño. Una vez que hagas eso, estamos listos para pasar al espaciado y dimensionamiento. Para eso realmente vamos a usar algo el sistema de ocho puntos. Lo he estado usando desde hace mucho tiempo y es tan útil para mí, realmente elimina las conjeturas cuando se trata de espaciado y dimensionamiento de elementos. Permítanme contarles más sobre eso en la próxima lección. 11. Trabajar con el sistema 8pt: El sistema de ocho puntos va a hacer nuestra vida mucho más fácil porque lo vamos a utilizar para espaciar y dimensionar. Esto es algo con lo que mucha gente lucha. Quiero decir, al crear un diseño, ¿qué tan ancho o alto o deberías hacer un elemento? ¿ Qué margen o relleno debes agregar a un botón? Por ejemplo, ¿ simplemente lo oculares? ¿ O hay algún estándar que puedas usar? Bueno, ese es el poder del sistema de ocho puntos. Crea un conjunto estandarizado de tamaños donde cada elemento es un múltiplo de ocho, por ejemplo, 16, 24, 32, 48, y así sucesivamente. Ahora ya no tienes que adivinar porque cada valor es un múltiplo de ocho. ni siquiera necesitas recordar el valor completo. Podemos recordar el multiplicador. Por ejemplo, en un botón, podría aplicar un relleno de 16 píxeles, superior e inferior, y 32 píxeles izquierda y derecha. En lugar de recordar estos valores, simplemente se puede recordar el multiplicador dos para arriba e inferior, cuatro, para izquierda y derecha, por lo que dos veces ocho y cuatro por ocho. Los ejemplos pueden seguir y seguir. El punto es que este sistema es sencillo y facilita tu trabajo. Debido a que todo el espaciado y dimensionamiento se basa en el mismo número, tendrás mucha más consistencia entre los elementos. Ahora podría preguntarme, bueno, ¿por qué ocho, por qué no cinco o diez? Bueno, creo que el número ocho está grabado en nuestra conciencia porque estamos trabajando mucho con computadoras. los múltiplos de ocho en 16, 24, 32, 120, 256, 512. Todos son números muy comunes que se usan en TI. Ahora 32 conciertos de RAM, 512 gigs de almacenamiento, 1024 píxeles como ancho de pantalla. Los ejemplos pueden seguir y seguir. El punto es el número ocho y sus múltiplos son muy fáciles de recordar. Otra muy buena razón es que ocho escalas hasta un número entero incluso cuando se usan ciertos multiplicadores de fricción. Por ejemplo, 8 veces 1.25 es igual a 10, 8 veces 1.5 es igual a 12, y así sucesivamente. Ahora, obviamente, puedes usar número que quieras como base, puedes usar tres o puedes usar siete. La idea es que usarías múltiplos de ese número. Pero creo que usar ocho es mucho más simple porque recordaremos esos valores multiplicadores o esos múltiplos mucho más fáciles para el número ocho. Ahora, déjame mostrarte rápidamente cómo utilizaré este sistema de ocho puntos en este diseño. Permítanme duplicar esto una vez más y darle uno o dos ejemplos de dónde voy a estar usando el sistema de ocho puntos. Uno de ellos está justo aquí en el menú. La distancia entre cada elemento del menú será un múltiplo de ocho. Lo que voy a hacer es simplemente usar la misma distancia. En mi caso, probablemente va a ser alrededor tal vez 32 o 48. Realmente depende del diseño final. Por ahora, solo utilicemos 32 píxeles. Tengo 32 aquí. Tengo 32 aquí. Te voy a mostrar una forma más sencilla de hacer esto, pero por ahora, solo para fines de demostración, lo voy a hacer manualmente. Puedes pulsar Opción, por cierto, y pasar el cursor sobre un elemento específico para ver la distancia entre lo que has seleccionado y ese elemento. Solo estoy manteniendo presionada la tecla Mayús para seleccionar estos y luego solo usando las teclas de flecha. Estoy moviendo esto a la izquierda y a la derecha. También puedo presionar Mayús y usar las teclas de flecha para hacer eso en incrementos de 10 píxeles en lugar de un píxel. Ahí vamos. Eso son 32 pixeles. Ese es un ejemplo de dónde usaría el sistema de ocho puntos. Lo mismo va para estos elementos aquí. Estos iconos se sitúan 26 píxeles aparte, pero tal vez quiero que sean de 24 pixeles. Nuevamente, eso es un múltiplo de ocho. ¿ Qué hay de verticalmente? Bueno, lo mismo aplica. A lo mejor quiero tener una distancia entre este rubro a este texto de 32 pixeles. Sólo voy a mover esto hacia abajo y ahora, tengo 32 pixeles. ¿ Qué pasa entre esto y esto? A lo mejor quiero ocho píxeles ahí. Entre estos dos, tal vez quiero 16 pixeles, nuevo, múltiplos de ocho. A lo mejor quiero que esto sea así. Debido a que estoy usando 32 píxeles como una altura de línea, estoy manteniendo el mismo sistema en marcha. Creo que ahora se puede entender por qué redefiní las alturas de línea como esta. Si miras 24, 32, 40, 48, 64, todas estas alturas de línea son múltiplos de ocho. Incluso antes de llegar a la parte de diseño, seguía usando ese sistema de ocho puntos al definir la topografía. Hablando de tipografía, los tamaños de fuente no necesariamente necesitan ser múltiplos de ocho. Lo importante para mantener un ritmo vertical adecuado es que las alturas de línea son múltiplos de ocho. Como decía, lo he estado haciendo desde hace mucho tiempo y siempre produce buenos resultados. Bueno, al menos los considero buenos resultados. Te recomiendo encarecidamente que hagas lo mismo. Seguiremos aplicando el sistema de ocho puntos medida que estamos diseñando más y más elementos. Por ahora, acabo de mostrarles dos, tres implementaciones o ejemplos de dónde podríamos usar ese sistema. Pero creo que estos deberían darte una idea bastante buena. También, ya que estamos en el tema de alturas para imágenes, podemos hacer estos múltiplos de ocho. Si bien en el caso de las imágenes, es un poco más complicado porque también debes considerar una relación de aspecto. Pero en términos generales, cuando se quiere establecer una altura fija para una imagen, también podría establecerla como un múltiplo de ocho. En mi caso aquí, la imagen sería de 480 píxeles. Ahora antes de que terminemos las cosas, sólo una última mención. Si encuentras que múltiplos de ocho son demasiado grandes a veces para ciertos tamaños o distancias entre elementos, entonces siéntete libre de usar múltiplos de cuatro. Eso te da un control granular, más apretado sobre cómo se ven las cosas. Pero por ejemplo, digamos que los 32 píxeles son demasiado, es demasiado grande de una distancia entre estos dos ítems manuales. El múltiplo anterior de ocho sería 24. Pero 24 podría ser demasiado pequeño, en cuyo caso, se puede comprometer. Se puede ir con 28, y 28 es en realidad un múltiplo de cuatro. Si eso se ve bien, entonces genial. Adelante y usa eso. A pesar de que se llama el sistema de ocho puntos, no significa que cada distancia, cada medición necesita ser un múltiplo de ocho. Puedes doblar un poco las reglas si no se ve bien. Usar un múltiplo de cuatro es a menudo la solución correcta para ese tipo de situaciones. Ahora hagamos un recapitulativo rápido. El sistema de ocho puntos crea un conjunto estandarizado de tamaños donde cada tamaño es un múltiplo de ocho. Estos tamaños se pueden aplicar a cualquier aspecto de espaciado o dimensionamiento. Por ejemplo, margen, relleno, line-height, width, height, etcétera. Utilizamos el número ocho porque él y sus múltiplos son muy conocidos y fáciles de recordar. El número ocho también escala hasta un número entero incluso cuando se utilizan ciertos multiplicadores fraccionarios. Por ejemplo, 1.5. Con el sistema de ocho puntos explicado, estamos listos para seguir adelante. Pero antes de que hagamos eso, quiero hablarte de maquetación automática. Esta es una de las características más grandes e importantes de Figma. Me encanta absolutamente. Lo uso todo el tiempo y también lo voy a usar mucho en este proyecto, y te recomiendo que lo hagas también. Ahora, siendo una característica tan grande, quería dedicarle una lección. Lo estoy haciendo porque quiero que aprendas los conceptos básicos de trabajar con layout antes de volver a saltar al proceso de diseño. Creo que eso te va a ayudar tremendamente a medida que avanzamos. En la siguiente lección, te voy a mostrar los fundamentos de trabajar con maquetación oral en Figma. Si ya te sientes cómodo usando esta función, siéntete libre de saltar a la lección 13. 12. Una introducción rápida a la composición automática: Creo que el diseño automático es la mayor característica en Figma. Es tan poderoso y tan útil que simplemente no podía trabajar sin él. En pocas palabras, el diseño automático le permite crear diseños dinámicos en marcos y componentes. Estos diseños se reducirán o expandirán a medida que cambie el contenido interno. También puedes usar alguna alineación bastante avanzada en esos diseños. Para darle un ejemplo simple con el diseño automático, puede crear un botón que cambia de tamaño automáticamente cuando cambia el texto dentro de él. También puedes agregar relleno ese botón, que es fantástico. Déjame darte un recorrido rápido sobre cómo usar el diseño automático que estés más preparado para las próximas lecciones. Empecemos con algo sencillo. Vamos a crear dos rectángulos, uno Uno, uno más pequeño. Una cosa que debes entender justo al principio es que el diseño automático solo funciona en marcos. No se puede tener un grupo de elementos con diseño automático. Puede aplicar el diseño automático a ese grupo, pero se convertirá automáticamente en un marco. Para agregar diseño automático, simplemente puede seleccionar los elementos que desea incluir en su diseño automático. En mi caso, seleccionemos estos dos. Hay varias formas de agregar auto-layout. Puede hacer clic con el botón derecho y seleccionar Agregar diseño automático, o puede presionar “Mayús A” como atajo de teclado, o bien puede ir al objeto Menú, Agregar diseño automático. Alternativamente, si el objeto que seleccionaste es un marco, por ejemplo, he seleccionado este mainframe aquí, también tienes la opción de agregar auto-layout desde el inspector ya sea haciendo clic en este botón o simplemente haciendo clic aquí. Pero por ahora, centrémonos en estos dos elementos. Voy a seleccionarlos, Shift A, para agregar auto-layout. Esto creó automáticamente un marco con esos dos elementos. Por supuesto que se trata de un marco anidado. Esto es algo que puedes hacer en Figma. Puedes tener un marco dentro de otro marco y eso está perfectamente bien. Como se puede ver, este marco ahora contiene estos dos rectángulos. En el Inspector, se puede ver que el diseño automático está activo en este marco. Entonces con base en el arreglo o la posición de esos elementos en tu Lienzo, Figma asigna automáticamente una dirección. En mi caso, es horizontal. Pero siempre puedo cambiar a una dirección vertical. Lo genial es independientemente de la dirección, cada elemento es intercambiable. Puedo cambiar esta posición usando las teclas de flecha o cambiando la posición del elemento en el panel de capas. Como se puede ver, al cambiar la posición u orden de los elementos, en realidad mantienen la alineación y la distancia entre elementos que he establecido para ese marco. Eso es simplemente fantástico. Te mostré cambiando la dirección. Pueden hacerlo con este toggle aquí en el Inspector. También puedes cambiar el espaciado entre los elementos yendo con el cursor del ratón, haciendo clic, y yendo así, o puedes introducir un valor manualmente. Eso va a asegurar que siempre tenga 240 pixeles entre estos elementos. Puedo añadir un tercer elemento. Por ejemplo, digamos que quiero agregar un círculo dentro de mi marco. Sólo puedo hacer clic y arrastrar para agregar mi círculo. Como se puede ver, el marco redimensionó automáticamente para acomodar el nuevo elemento. Ese nuevo elemento ahora está posicionado 240 píxeles de los otros dos. Por supuesto si cambio esto a 120, el marco cambia automáticamente el tamaño. ¿Qué tan guay es eso? Ahora aparte de poder agregar un espaciado fijo entre elementos, también puedes agregar un relleno dentro del marco. Por ejemplo, con el marco seleccionado, puedo agregar un color de relleno. Digamos que quiero agregar algo como esto. Entonces puedo añadir un relleno. Puedo decir algo así como 32 pixeles. Esto agregará 32 píxeles de relleno dentro de mi marco principal. Pero puedo ir aún más allá y hacer clic en el botón que dice alineación y relleno y puedo cambiar individualmente el relleno para cada lado; arriba, derecha, inferior, e izquierda. Digamos, por ejemplo, quiero el 32 en la parte superior, pero tal vez 64 en el lado derecho, tal vez 48 en la parte inferior, y tal vez 16 en el lado izquierdo. En este momento este elemento tiene cuatro valores de relleno diferentes agregados a él. Tienes un grado de control muy alto sobre cómo se ve esto. Ahora cambiando los valores como este establecerá el valor de la propiedad aquí a mixto porque tiene un conjunto mixto de valores, pero siempre se puede sobrescribir ese comportamiento introduciendo un valor manualmente. Digamos que quiero 32 pixeles de vuelta. Eso lo va a aplicar a los cuatro lados. Otro dato muy interesante sobre el diseño automático es que puedes alinear elementos de una variedad de maneras. Por defecto los elementos están alineados a la parte superior y a la izquierda, pero puedo alinearlos en el medio. Eso se hace más evidente si pongo un ancho fijo en mi marco. Este es [RUIDO] el comportamiento predeterminado de arriba a la izquierda, pero este es el centro superior. Puedo alinearlos arriba a la derecha. Si voy a añadir un ancho fijo a mi marco o una altura fija, discúlpeme, también puedo alinearlos al medio así. Puedo alinearlos centro-centro, centro-izquierda, y luego puedo alinearlos a la parte inferior. Es super simple y muy intuitivo, y también muy potente. Aparte de las opciones de alineación, también tenemos algunas opciones de distribución de artículos, dos de ellas de hecho, empacadas y espacio entre. Embalado es la opción que usamos cuando queremos tener un espaciado fijo entre artículos. este momento tenemos 120 píxeles, por lo que los ítems se colocan uno al lado del otro con 120 píxeles entre sí. Pero también puedo seleccionar el espacio entre. Esto establecerá el espaciado entre los elementos en auto, lo que significa que los elementos ocuparán todo el espacio disponible del marco padre y el espaciado entre ellos se calcula automáticamente. momento estamos en 471 píxeles, pero si hago esto más pequeño el espaciado entre ellos también cambia. Eso es bastante guay. Esto, por supuesto, funciona en ambas direcciones. Si voy a cambiar a vertical, verás que esos ítems ahora están espaciados verticalmente en lugar de horizontalmente y la distribución sigue siendo la misma, el espacio entre. Mientras estoy en el espacio entre, también alinea los elementos un poco diferente que antes porque el espaciado entre ellos ahora se calcula automáticamente, pero aún puedo alinearlos con la izquierda, la media, la derecha, o si la dirección es horizontal, puedo alinearlos arriba, medio o inferior. Eso es espacio entre. En cualquier momento, puedo cambiar entre espacio entre desempaquetado y también trabajar en la alineación. Esto es muy útil para muchos casos de uso diferentes. Por ejemplo, puedo tener una lista de elementos como menú de navegación. Digamos Inicio, Acerca de, Contacto. Puedo seleccionar estos tres, y puedo hacer Shift A para agregar Auto Layout. Esto los alinea automáticamente así. También puedo establecer el espaciado entre ellos, digamos 32 píxeles. Ahora, independientemente del contenido de cada elemento de texto, Auto Layout siempre se asegurará de que la alineación sea correcta y también el espaciado entre elementos sea correcto. No tengo que realinear elementos manualmente cada vez que hago un cambio. También puedo agarrar uno de los elementos y cambiar su posición simplemente usando las teclas de flecha. ¿ Qué tan guay es esto? ¿ Quiero que este menú sea vertical en lugar de horizontal? Acabo de cambiar la dirección aquí. Por supuesto, también puedo usar las flechas Arriba o Abajo para cambiar el orden de esos elementos. Otro caso de uso muy común para el diseño oral es crear un botón. Digamos que tenemos un pedazo de texto que queremos convertir en un botón. Bueno, con esto puedo, por supuesto, agregar Auto Layout. Esto establecerá automáticamente un espaciado predeterminado de 10 píxeles y un relleno de 10 píxeles. Puedo añadir un color de relleno al marco. Digamos que quiero hacerlo azul. Digamos que quiero que este texto sea blanco, tal vez audaz. Entonces con mi marco seleccionado, puedo seguir adelante y cambiar el relleno. Digamos que quiero 32 píxeles arriba, e inferior, 64 píxeles a la izquierda y a la derecha. A lo mejor quiero agregar esquinas redondeadas y hacerlo un botón pálido. La belleza de esto es que puedo cambiar este texto a lo que quiera y el botón cambiará de tamaño automáticamente. Incluso puedo ir a mi aplicación de conjunto de iconos y arrastrar un icono en. Digamos que quiero agregar este ícono de alarma-relleno. Puedo hacer clic y arrastrar ese icono en mi Canvas y luego, por supuesto, puedo arrastrarlo dentro de mi marco Auto Layout. Entonces hagamos este botón o este ícono, discúlpeme, 32 pixeles, y luego puedo seleccionar mi marco y puedo optar por alinear todo en el centro así. Puedo optar por cambiar su color a blanco y puedo elegir la distancia entre ítems, digamos 16 pixeles. A lo mejor esto es demasiado grande, hagámoslo 24 pixeles. O tal vez sea demasiado pequeño, hagámoslo 128 pixeles. Verás que independientemente del tamaño del elemento porque he establecido la alineación para que esté en el medio, el texto y el icono siempre están correctamente alineados. Volvamos a las 24 aquí. Además, siempre puedo cambiar el mensaje o el texto dentro del botón y el botón cambiará automáticamente el tamaño. La distancia entre el texto y el icono siempre permanecerá exactamente igual. Si quiero, siempre puedo cambiar la posición. A lo mejor quiero que el botón esté a la izquierda en lugar de a la derecha. Todo eso está sucediendo súper fácilmente sin ningún retoques de mi parte. Lo que significa que no tengo que cambiar manualmente los elementos. Acabo de presionar una tecla. Realmente es así de simple. Estos son solo dos casos de uso para Auto Layout. Esto es súper potente y como verás en esta clase, hay muchas formas diferentes de usarlo y te recomiendo encarecidamente que aprendas a usar esta función porque solo te resultará útil y ahorra usted mucho tiempo. Oh, ¿y mencioné que puedes anidar marcos con Auto Layout dentro de otros marcos con Auto Layout? Por ejemplo, puedo agarrar este ícono y puedo colocarlo dentro de este marco de menú. Cambiemos su color para que podamos verlo mejor. Pero digamos que quería ser agrupado con el enlace Acerca de nosotros. Lo que puedo hacer es seleccionar esto y esto. Puedo hacer Shift A para crear otro marco con Auto Layout y puedo elegir la dirección a horizontal, tal vez añadir algún espaciado adecuado entre los elementos, alinear todo en el medio. Tal vez un poco menos espaciado aquí y tal vez quiero hacer esto un poco más pequeño. Ahora, tenemos el mainframe, que tiene Auto Layout, pero dentro de eso, tengo un marco adicional también con Auto Layout. Esto puede ir a tantos niveles como quieras para que puedas anidar tan profundamente como quieras. Estos son solo los conceptos básicos de trabajar con Auto Layout. Como estaba diciendo, creo que este es el rasgo más importante en Figma. Es una de las mayores razones por las que uso Figma diariamente para el diseño de UI. Te animo encarecidamente a que juegues con él, aprendas todo lo que hay para aprenderlo, y una vez que se convierta en segunda naturaleza para ti, construirás diseños mucho más rápido en Figma. Ahora hagamos un recapitulativo rápido. Auto Layout le permite crear diseños dinámicos en marcos y componentes. Estos diseños se reducirán o expandirán automáticamente a medida que cambie el contenido. Auto Layout proporciona opciones avanzadas de alineación y distribución de contenido. Con Diseño automático, puede establecer relleno individual en el elemento padre, así como una distancia establecida entre todos los elementos secundarios de ese padre. Auto Layout funciona tanto en los modos horizontal como en vertical. Bueno, espero que ahora tengan una comprensión mucho mejor de cómo funciona el Auto Layout y por qué es una característica tan importante. Creo que tendrás un tiempo mucho más fácil y agradable trabajando en Figma una vez que hayas dominado esta función, así que no te olvides de practicar. Sólo te mostré algunos ejemplos básicos y casos de uso. Pero adelante y juega con esto por su cuenta y creo que obtendrá el cuelgue en poco tiempo. Ahora, hemos estado haciendo un poco de diseño aquí dentro agregando colores y configurando la topografía. Pero ahora es el momento de realmente meterse en ello. Vamos a romper la página en secciones más pequeñas y vamos a manejar una sección a la vez básicamente, y vamos a empezar en la siguiente lección con el encabezado del sitio. Te veré ahí. 13. Encabezado de un sitio: Al diseñar un sitio web como este, siempre empiezo por la parte superior y trabajo mi camino hacia abajo. El primer apartado que vamos a abordar es el encabezado del sitio. En el wireframe, esto contiene el logotipo, menú de navegación y los iconos sociales. Ahora, antes de empezar, nota rápida, el wireframe está ahí como guía. Su propósito es mostrarnos el contenido. No obstante, en el diseño final, está perfectamente bien ignorar el diseño del wireframe y está perfectamente bien reorganizar los elementos para que tengan más sentido para el diseño final. Verás exactamente lo quiero decir con eso en un poquito. Empecemos. Estaré trabajando en una copia de nuestro wireframe, pero el más reciente que tiene los cambios de tipografía aplicados y también los colores. Como puedes ver aquí, aplicamos ese color 081826. Solo para hacer las cosas un poco más simples para nosotros, sigamos adelante y definamos dos estilos de color. No hablé de esto antes, pero son realmente fáciles entender y van algo como esto. Siempre que estés usando un color que estás planeando reutilizar en múltiples lugares, es una buena idea crear un estilo de color. Lo haces seleccionando un elemento e yendo a la sección de color, haciendo clic en Estilo, y luego creando un estilo haciendo clic en el botón más. Llamemos a esto negro. este momento en lugar de mostrar la sección de color, solo muestra negro, y puedo hacer lo mismo por el resto de los elementos. En lugar de usar 081826, puedo hacer click aquí y puedo elegir el negro, y aquí está la parte cool. Ahora, cuando hago clic fuera de mis marcos, por lo que si hago clic en el lienzo, puedo ver todos mis estilos de color aquí y puedo hacer click en Editar, y puedo cambiar sus propiedades, y todos los elementos que están utilizando ese estilo de color se actualizará automáticamente. Eso es super cool. Ahora, déjame devolverle ese color. Para cambiar el valor de color codificado duro al estilo de color que acabo de crear en toda la página, solo puedo seleccionar toda la página, y cada vez que veo 081826, puedo hacer click en esto y yo puede elegir negro. Ahora todos los elementos de mi página que estamos usando, ese valor codificado duro ahora están usando negro. Esto va a hacer que sea súper sencillo para mí cambiar el color si decido en algún momento ya no me gusta, o necesito hacer pequeños ajustes a ella. Esta es una forma súper rápida de hacerlo. También vamos a crear un estilo de color para este color, D09366, y vamos a llamar a este Acento. Impresionante. Ahora veamos sobre el encabezado del sitio. Para que sea mucho más fácil para nosotros trabajar, vamos a usar el diseño automático. El primer lugar en el que vamos a agregar diseño automático es en realidad el marco padre. Así es como vamos a hacer eso. Lo seleccionaremos, iremos a maquetación automática, haremos clic en él. Nos aseguraremos de que la dirección sea vertical, y vamos a establecer el espaciado entre los ítems en 240 pixeles, y además voy a poner el relleno a cero. Ya verás por qué en un poquito. También voy a establecer un ancho fijo en este marco a 1800 pixeles. Voy a cambiar la alineación a media, por lo que todo está muy bien alineado en el medio. Debido a que todos los elementos secundarios de este marco padre están dentro de los grupos, están muy bien organizados, alineados y posicionados a exactamente 240 píxeles uno del otro. Esto es exactamente lo que quiero. Esto va a hacer que sea súper sencillo para nosotros trabajar, porque si en algún momento lo decidí, vale, quiero cambiar las posiciones de estos dos elementos, sólo puedo seleccionarlo y moverlo donde quiera en el página. Mira lo fácil que es esto. A lo mejor quiero que el menú esté en la parte superior de la página, bueno, solo puedo moverlo así. Bastante genial. Pero ahora volvamos nuestra atención al encabezado. Por defecto, esta es la estructura que agregamos en el wireframe. Pero esto es como una estructura típica para un encabezado, y realmente no quiero hacer eso. Quiero algo un poco más especial para este sitio web del restaurante. En cambio, voy a seleccionarlo, y actualmente este es un grupo, pero siempre puedo convertirlo en un marco con maquetación automática. Sólo puedo hacer click aquí. Puedo hacerlo vertical. Puedo alinear todo en el centro así, y puedo establecer el espaciado entre los ítems a 64 pixeles. Eso se ve bastante bien. Ahora, vamos a llamar a este encabezado. Veamos sobre el logo. Se trata de 80 píxeles de altura. Creo que lo voy a mantener en ese tamaño porque se ve bastante bien, y si te estás preguntando por qué 80 pixeles? ¿ Por qué 240 pixeles aquí? Bueno, todos estos son múltiplos de ocho. Estoy usando el sistema de 8 puntos, así que si te pierdes esa lección, vuelve y mírala, entonces entenderás por qué. Ahora, estábamos hablando del logotipo, nuestros 80 píxeles de altura. Creo que este es un tamaño bastante bueno. Lo estoy configurando en 64 pixeles desde el menú de navegación. Ya que estamos en el menú de navegación, también cambiemos el nombre de esto como menú de navegación, y también convertiremos esto en un marco con diseño automático, y vamos a asegurarnos de que tengamos el espaciado adecuado entre estos elementos. Permítanme realmente acercar un poco aquí. Creo que quiero un poco más, tal vez 48 píxeles así, por lo que están un poco más separados. Eso se ve bastante bien. Ahora, lo que no me gusta es la posición de estos iconos. Miran fuera de lugar debajo del menú. Lo que puedo hacer en cambio es colocarlos en algún otro lugar de mi página. No importa si el wireframe original dijera que necesitan estar al lado del menú. En el diseño final, puedo hacer cualquier cambio que quiera mientras guarde el mismo contenido, pero puedo tomar ese contenido y reorganizarlo como me parezca. Eso es exactamente lo que voy a hacer aquí. Voy a tomar esto, que voy a llamar íconos sociales, y también agregarle un diseño automático. Voy al mando X. Sólo voy a “Comando V” para pegarlo en mi página. Ahora, debido a que todo mi marco usa diseño automático, esto se colocó justo en la parte inferior y lo quiero en la parte superior, así que sólo voy a moverlo así. Ahora, después de un poco de acercamiento, ahora tengo mi marco de iconos sociales posicionado justo en la parte superior. Pero probablemente voy a colocar estos en algún lugar del lado derecho, lo que significa que tengo algo de espacio libre justo aquí a la izquierda, y el de arriba a la izquierda. Puedo usar ese espacio para agregar alguna información tal vez útil. ¿ Y si agregamos la dirección y el número de teléfono para el restaurante que está en la parte superior. Es fácil de ver y en realidad es un uso bastante bueno del espacio agregando información de contacto ahí mismo. Lo que haremos es crear una barra superior que contendrá esta información, la dirección, el número de teléfono, y también los iconos sociales. Entonces con el marco de iconos sociales seleccionado, puedo agregarle de nuevo el diseño automático para crear un marco padre. Puedo “Shift A” de nuevo para crear otro marco. Aviso Marco 1 ahora contiene iconos sociales. Llamemos a esta barra superior de marco. Barra superior simplemente arrastrará sus lados para que sea de ancho completo o en realidad podemos establecer su ancho manualmente desde aquí, podemos configurarlo a 1,800 pixeles. Pero aquí tienes un consejo rápido para ti. Opción de cambio de tamaño de CD aquí que ahora está disponible dentro del marco con auto-layout. En este momento, se establece en ancho fijo. Pero también podemos cambiarlo para abrazar contenidos, lo que hará que el marco sea tan grande como su contenido. O puedo elegir “Relleno de Contenedor”. Esto lo hará tan grande como el espacio disponible en el contenedor padre, que en mi caso es el marco principal. Me doy cuenta de que esto podría parecer un poco demasiado complicado en este momento, pero no es realmente. Permítanme tratar de explicarlo un poco más. Contamos con nuestro marco principal llamado Pantallas grandes. Esta es nuestra página web. Dentro de mi página web, déjame realmente colapsar algunos de estos grupos para que puedas entender un poco mejor, dentro de mi marco principal, tenemos dos hijos, cabecera y barra superior. Top bar tiene auto-layout, y dentro de la barra superior tenemos el marco de iconos sociales, que también tiene auto-layout. Ahora, he puesto la barra superior para llenar el contenedor. Esto significa que su ancho será el 100 por ciento de su contenedor padre. El contenedor padre es Pantallas grandes, que es de 1,800 píxeles. Notarás que si voy a cambiar el tamaño de la pantalla de los padres o el marco padre a 1,645, mi barra Top también será 1,645 porque está configurada para llenar el contenedor. Espero que eso tenga un poco más de sentido. Estoy seguro que a medida que estás jugando con estas características, comenzarás a entenderlas mucho mejor. Entonces dije que vamos a sumar estos dos elementos dentro de nuestra barra superior. Si quieres colocar elementos directamente en un marco con maquetación automática, simplemente puedes seleccionar ese marco y solo puedes pegarlos en. Ahora, cambiemos la dirección a horizontal. Porque quiero que estos se muestren en una sola línea. También voy a cambiar la altura a abrazar contenidos. Esto hará que la barra superior sea tan alta como el contenido en su interior. Ahora quiero que los iconos estén del lado derecho, y a veces Figma tiene un extraño bug donde si juegas con el cambio de tamaño aquí, éste en los bichos horizontales fuera. En cuyo caso, es necesario volver a seleccionar algunos de estos elementos como en esta situación. Acabamos de pasar del contenido del abrazo a llenar el contenedor para cambiar el tamaño de esta barra superior en consecuencia. Voy a usar una bonita característica aquí, distribución de espacio. Voy a cambiar esto de empacado a espacio entre porque quiero mostrar los iconos en el borde muy lejano aquí en el lado derecho y el texto en el lado izquierdo. Usando el espacio entre, Figma establecerá automáticamente el espaciado entre cada elemento para que sea igual. Alinéquelos también con el centro, así. Por ahora, vamos a deshacernos de ese relleno de 10 pixeles, no lo necesitamos. En cambio, usaremos relleno de 24 píxeles en la parte superior, 24 en la parte inferior, y además, voy a establecer un relleno izquierdo y derecho a 64 píxeles. Ahora, tenemos 64 píxeles aquí y 64 píxeles aquí, la distancia entre los elementos y los bordes. Además, si recuerdas, realmente configuramos estas guías a 120 pixeles. Pero vamos a cambiar eso para que estén en 128 pixeles. Ya que esto es al 120, voy a hacer 1, 2, 3, 4, 5, 6, 7, 8, entonces 128. Usando las teclas de flecha, voy a empujar esto a la izquierda, 1, 2, 3, 4, 5, 6, 7, 8. Además, voy a crear una nueva guía a 64 pixeles, que está aquí y aquí. Normalmente, el valor de estas guías se mostrará aquí mismo en la regla, o la posición de las guías se mostrará en la regla. Pero por alguna razón, Figma me está molestando ahora mismo. No estoy seguro de por qué, pero típicamente, se puede ver ese valor justo al lado de la guía aquí, pero podemos prescindir de eso por ahora. Ahora, quiero hacer este texto un poco más pequeño, así que voy a seleccionar ambos. Voy a usar 16 pixeles. También necesitamos cambiar la altura de la línea. Si hacemos referencia a nuestra página Activos, podemos ver que en 16 píxeles, necesitamos usar 24 pixeles como altura de línea. Volveremos a nuestro diseño con esos dos elementos seleccionados, cambiaremos la altura de la línea a 24. Ahora, también me gustaría añadir algunos iconos a este texto. A lo mejor un icono de un pin de mapa a éste, y un ícono con un teléfono para éste. Creo que sólo va a hacer las cosas un poco más interesantes. Para eso, abriré mi configuración de íconos, donde tengo todos mis iconos SVG. Vamos a utilizar un conjunto de iconos que se llama iconos Bootstrap, y también encontrarás el enlace a eso en el archivo PDF de recursos. Este es el conjunto de iconos Bootstrap. Busquemos pin de mapa, que se ve algo así. Tal vez ubicación. No, tal vez sólo pin. Veamos si podemos encontrar algunos iconos diferentes. Tal vez algo con geografía, geo-alt. Creo que esto funcionaría bien, así que sólo voy a copiar eso y pegarlo aquí mismo. El tamaño es correcto, 16 por 16, pero quiero agrupar esto con el texto. Voy a seleccionar tanto el icono como el texto. Pulse “Mayús-A” para agregar otro marco con diseño automático que solo contenga estos dos elementos. Voy a asegurarme de que esté alineado así en el medio. Quiero que el texto esté a la derecha. Voy a establecer el espaciado a ocho píxeles, así. También quiero usar un color ligeramente apagado para el ícono, alrededor del 50 por ciento. Dos formas en que podemos hacer eso, podemos cambiar la opacidad de la capa a 50 por ciento, o podemos crear un nuevo estilo de color que tenga la opacidad de color establecida en 50 por ciento. Realmente depende de ti. Creo que esto es en realidad un poco más fácil establecer la opacidad en la capa porque si cambias el color subyacente, la opacidad seguirá siendo la misma. Sólo voy a hacer eso, 50 por ciento usando el color negro. Hagamos lo mismo por los otros textos, que es éste. Sólo voy a buscar el ícono del teléfono, y voy a usar éste que dice teléfono. Mismo trato, voy a copiar y pegar esto en, y seguí adelante y por supuesto cambiar el ancho, altura a 16 opacidad, 50 por ciento color a negro. Ahora, voy a hacer lo mismo que le hice al otro texto. Seleccione texto e icono, Mayús-A, asegúrese de que el espaciado sea de ocho píxeles, alinéelos en el medio y tenga el texto establecido en el lado derecho. Ahora, también, me gustaría que estos dos elementos formaran parte del mismo grupo, por lo que con ellos seleccionados, Shift-A de nuevo para crear otro marco de auto-layout. Voy a establecer la distancia entre ellos a 32 píxeles, así así. Ahora, también quiero agregar un pequeño separador de bordes en la parte inferior de esta barra superior. Permítanme realmente Shift-R para ocultar esos guías. para que podamos ver lo que estamos haciendo. Con la barra superior seleccionada, simplemente puedo ir a Trazo, pincha para añadir, voy a usar negro. Voy a elegir afuera. En realidad, el negro aquí es un poco demasiado. Tenemos que bajar su opacidad, que podamos desacoplar el estilo, cambiar su opacidad a 15 por ciento. Ahora, si queremos, si sabemos que vamos a reutilizar este color en algún otro lugar, podemos crear un estilo de color para ello. En realidad vamos a hacer clic en el “Plus” y llamarlo Negro 15. Quince significa 15 por ciento de opacidad. Ahora, tienes ambos métodos para trabajar con un color completo y un color con opacidad. Aquí en el icono, agregamos la opacidad a la capa, mientras que aquí, agregamos la opacidad al color. Se puede ver que se pueden utilizar ambos métodos. Realmente depende de lo que quieras hacer. Por último, veamos acerca de estos iconos. Son un poco demasiado grandes en este momento, así que vamos a redimensionarlos a 24 pixeles. El de Facebook no consiguió la actualización. Además, el ícono de Instagram está un poco torcido. A veces, Figma hace esto con algunos iconos SVG, así que déjame arreglar eso realmente rápido. Acabo de usar una copia fresca del ícono para reemplazar el anterior. Estos también son iconos del conjunto de iconos Bootstrap. Como puedes ver aquí, el ícono de Instagram se ve correcto. También, sigamos adelante y cambiemos la distancia aquí, o el espaciado entre ítems de 24 a 32. Creo que esto se verá un poco mejor. Vamos a asegurarnos de que los colores son correctos, y lo son. Creo que ya hemos terminado. Esa es ahora nuestra barra superior y cabecera del sitio. Debido a que usamos auto-layout, están posicionados correctamente. El encabezado ahora está centrado en la página. El logotipo está posicionado correctamente lejos del menú de navegación. También trasladamos algún contenido del área de héroes a esta barra superior, que, por cierto, la barra superior ahora se comporta así. ¿ Ves cómo cuando estoy redimensionando la página, la barra superior también cambia el tamaño, y los elementos se reposicionan automáticamente? Eso es super cool. Ese es el poder del auto-layout y las diversas opciones de cambio de tamaño que tenemos en Figma. Entonces, barra superior, cabecera del sitio, cheque. Ahora, es tu turno de crear el encabezado del sitio. si has estado trabajando a mi lado, entonces genial. Significa que ya está hecho. Si no lo has hecho, sigue adelante y vuelve a ver el video. Pausa si es necesario. Si hay algo que no entiendes o tienes una pregunta, solo empieza una nueva discusión abajo, y te ayudaré de todos modos que pueda. Con eso dicho, pasemos a la siguiente sección en nuestro diseño, que es el área de héroes. Próximamente. 14. Sección de héroe: El apartado Héroe es una parte muy importante de un sitio web porque es una de las primeras cosas que ve un visitante. Por lo general, contiene un título y alguna descripción del servicio o producto que se está presentando, y algún tipo a la acción, compra ahora, prueba gratis, suscríbase, etcétera. Nuestra área de Héroe es un poco más sencilla debido a la naturaleza del sitio web que estamos diseñando. Vamos a llegar a ella. Con base en el wireframe que creamos, esta es nuestra sección Héroe. Aquí tenemos el lema del restaurante que es venir como invitado, salir es amigo y también tenemos el horario laboral y luego algún tipo de imagen. Empecemos con la imagen real y encontrarás enlaces a todas las imágenes de stock que utilicé para este proyecto en el archivo PDF de recursos así que sigue adelante y descarga las de ahí o usa tus propias fotos. Pero para mí, para esta sección, voy a usar una imagen que muestre básicamente el restaurante. Obviamente, este es un restaurante ficticio pero la imagen que voy a usar puede verse como el interior del restaurante. Con esta forma seleccionada, recuerda que esto es sólo un rectángulo simple, puedo ir a Relleno y en lugar de un color “Sólido”, puedo elegir una “Imagen”. Puedo hacer clic en este botón, y en la carpeta Recursos de clase, realmente descargué la imagen que voy a usar desde Unsplash. Sólo voy a seleccionar eso. Si lo desea, puede jugar con algunas de las opciones de edición de imágenes aquí en Figma. Para mí, sólo voy a dejarlo como está. Lo único que le voy a hacer es agregar un color de superposición. Para eso, puedo añadir otro relleno, así. Para el color, voy a usar el “Negro” 081826. Voy a usar eso en lugar del color negro puro y voy a añadir una opacidad del 25 por ciento, así. Ahora, quiero que esta sección Héroe actúe como separador entre el lado superior de la página web y el resto del contenido. Una buena manera de hacerlo es hacer que esta sección sea de ancho completo por lo que va a ocupar todo el ancho de la página. Actualmente, este es un grupo, así lo creamos cuando hicimos el wireframe pero vamos a convertirlo en un ancho de marco. Lo adivinaste, maquetación automática. Hagamos clic en este botón y vamos a establecer su redimensionamiento a “Relleno Contenedor” para que ocupe todo el ancho. Ahora, quiero que la imagen esté posicionada a la izquierda por lo que voy a seleccionarla y simplemente usar la tecla de flecha izquierda para moverla. También voy a establecer su ancho a “Rellenar contenedor”. Ahora voy a seleccionar este otro elemento, y también voy a establecer su ancho en “Rellenar contenedor”. De esa manera, ambos elementos ocuparán exactamente la mitad de la cantidad de espacio disponible. Pero también hay una brecha entre estos. No quiero eso así que voy a seleccionar el marco que tiene Auto Layout, y voy a establecer el espaciado a cero, así como eso. Ahora también, voy a cambiar la altura de esta imagen a 960 pixeles. Porque estoy usando la imagen como fondo sobre esta forma, el momento en que cambie el tamaño de la forma, el fondo de la imagen se volverá a colocar automáticamente para llenar toda la forma. Impresionante. Ahora, veamos sobre esta sección aquí mismo. Antes de seguir adelante, en realidad cambiemos el nombre de esto a Héroe. Vamos a renombrar esto a Imagen, y vamos a renombrar esto a Hero Content. Con el segundo fotograma seleccionado, vamos a establecer su altura para que también sea “Rellenar contenedor” y también vamos a agregarle auto-layout porque quiero centrar este contenido. También quiero agregar algún relleno, así que hagamos eso. Diseño automático, asegúrate de que sea vertical. Voy a cambiar el espaciado entre ítems a 64 pixeles, y luego voy a cambiar su alineación a centro, centro, así como eso. Además, voy a añadir 128 pixeles de relleno a la izquierda y a la derecha. Entonces voy a seleccionar este pedazo de texto y voy a establecer su redimensionamiento a “Contenidos abrazos”. En realidad, verticalmente debería ser “ Contenido del abrazo ” pero horizontalmente debería ser “Relleno de Contenedor”. Sólo va o solo llena el espacio disponible. Ahora tal vez te estés preguntando, bueno, ¿por qué no cambia el tamaño para llenar toda esta caja? Bueno, eso es porque agregamos ese relleno recordar, 128. Verás que ahora si, por ejemplo, quitamos el relleno, el texto llenará todo el espacio disponible pero en realidad queremos usar ese relleno. Lo final que hay que hacer aquí es centrar alinear el texto. Ahora vamos a seleccionar también el marco de contenido Hero y llenarlo con nuestro color negro. Entonces podemos seleccionar todo nuestro texto y podemos separar el estilo de color y usar nuestro propio color. También voy a hacer este marco un poco transparente, 95 por ciento, sólo para que el blanco no sea demasiado duro. Acabo de bajar un poco la opacidad para que se mezcla solo un poquito con el fondo. Entonces, por último, todavía tenemos el horario laboral para cuidar. Vamos a usar el color “Accent” para eso, y en realidad hay algunos cambios que tenemos que hacer aquí. En primer lugar, realmente no creo que necesitemos usar las palabras horas hábiles porque es bastante autoexplicativo que este es un horario, y luego voy a separar estos dos elementos. En primer lugar, colocarlos en diferentes filas, y en segundo lugar, voy a seleccionar este elemento o ese pedazo de texto y cortarlo a partir de ahí. Voy a establecer un “ Ancho automático” a ese bit. Voy a alinearlo en el medio, y después voy a duplicarlo, comando D. Entonces voy a pegar en los textos que corté antes. Ahora voy a seleccionar ambos, cambiar A, para crear otro fotograma con ellos, y voy a establecer la distancia entre o el espaciado entre ellos a 16 pixeles, y me voy a asegurar están alineados en el medio. Ahora el texto aquí es un poco demasiado pequeño en comparación con el gran título anterior. Actualmente, estoy usando 21 pixeles pero quiero algo un poco más grande que eso. Volvamos a los activos. Veamos, el siguiente tamaño disponible basado en nuestra escala de tipo es 28 tamaño de fuente, 40 altura de línea. Hagamos eso. Selecciona ambos, 28 y 40 y finalmente, seleccionemos la primera fila de cada cuadro de texto y vamos a hacerla “Bold”. Lo mismo para esto, “Negrita”, y eso debería ser. Esa es nuestra área de Héroe. Ahora por supuesto, si voy a cambiar el tamaño de mi pantalla, ¿ ves cómo también cambia el tamaño de la imagen y el texto también cambia mientras sigue estando alineado en el centro en este cuadro negro? Por así decirlo. Ese es el poder de las opciones de auto-diseño y redimensionamiento de Figma. Bastante genial. Esto es lo que tenemos hasta ahora y lo hice a propósito. Guardé los wireframes originales y he nombrado los pasos. Se puede ver la diferencia entre el wireframe original a cuando agregamos por primera vez nuestra tipografía a donde agregamos algunos de los colores al diseño final. Aquí es donde empezamos, y aquí es donde estamos ahora mismo. ¿ Ve qué tipo de diferencia puedes hacer en un diseño con solo aplicar la tipografía adecuada, algunos colores, y algún espaciado y dimensionamiento bien pensado para los elementos? Sólo para asegurarnos de que todo esté aún alineado correctamente, podemos sacar las guías y podemos comprobar si nuestros elementos están alineados correctamente y lo están. Como se puede ver, porque utilizamos relleno de 128 píxeles aquí en el marco padre para el Héroe, este texto se coloca exactamente a 128 píxeles del borde, que es exactamente lo que queremos. Como de costumbre, ahora es tu turno practicar y crear la sección Héroe. Puedes hacerlo a tu manera, no tienes que replicar exactamente lo que hago. Si no te gustan los colores o las fuentes que elegí, adelante y cámbialas. Usa un diseño diferente, no tengas miedo de experimentar. En esta clase, te estoy mostrando mi forma de hacer las cosas pero obviamente, esa no es la única manera y me encantaría ver algunas variaciones de mi diseño original. Dicho esto, también está perfectamente bien replicar mis pasos exactamente porque estás aprendiendo, te estás acostumbrando a usar Figma para tu diseño y eso es una gran victoria también. Con eso dicho, pasemos a la sección de descripción del menú. Eso se acerca. 15. Descripción del menú de comida: El apartado de descripción del menú tiene el papel de describir el menú en pocas palabras. Para obtener el look que queremos, vamos a usar unos marcos anidados con maquetación automática. Déjame mostrarte. Esta es la sección que vamos a abordar en esta lección, y a partir del wireframe, tenemos un título, la descripción en sí, y una imagen. Esto es opcional. Como decía anteriormente, el wireframe está ahí para servir de guía, y nuestro diseño final no necesariamente necesita usar el mismo diseño. Con eso en mente, mirando las cosas que hemos diseñado hasta ahora y las cosas que tenemos por delante, la sección de menú, realmente no creo que necesitemos esta imagen aquí mismo. En cambio, sólo voy a mantenerlo simple y solo usar el título y el texto. Pero debido a que este no es un texto muy largo, y tenemos todo este espacio libre aquí, vamos a colocar estos dos elementos lado a lado, lo que el título de la izquierda, el texto a la derecha. Con eso en mente, seleccionemos el grupo que lo contiene y llamémoslo Food Menu Descripción. Debido a que este es un grupo, vamos a convertirlo en un marco agregando diseño automático. Cambiemos la dirección a horizontal. En realidad, vamos a desagrupar estos dos grupos, y vamos a establecer el ancho fijo para llenar contenedor en estos dos elementos. Además, vamos a usar el contenedor de relleno en el elemento padre. De esta manera, ambos elementos ocupan exactamente la mitad del espacio disponible. Eso es bastante bueno. Ahora, también, me gustaría que esta guía sirviera de límite para los textos. Básicamente, este texto necesita comenzar aquí, y este texto tiene que terminar aquí. Hacer eso es muy sencillo. Seleccionaremos el marco padre y agregaremos algún relleno. Diremos 128 y 128. Realmente me gusta el hecho de que este texto aquí empiece exactamente en la misma línea que divide esta zona de héroes. Pero lo que no me gusta es que este texto esté demasiado cercano o el título esté demasiado cerca de mi texto principal. Para arreglarlo, quiero agregar algún relleno al lado derecho de este texto. Obviamente, no puedo hacer eso por defecto, necesito agregar auto-layout. Hagamos eso con el título seleccionado, Shift A, para colocarlo en un marco que tenga maquetación automática, y por defecto, Figma agrega 10 píxeles de espaciado y relleno, pero quiero eliminarlo. En cambio, solo agrega 128 píxeles de relleno al lado derecho. Ahora, esto realmente creó un comportamiento inesperado donde este elemento empujó el texto hacia un lado. No quiero eso porque quiero que este texto se alinee con esta línea media aquí mismo. Eso está sucediendo porque cuando agregamos ese fotograma, cambió automáticamente su modo de re-dimensionamiento para concentrar contenidos, pero no queremos esto, queremos llenar contenedor. Además, tenemos que ir y seleccionar el texto dentro y seleccionar llenar contenedor desde aquí. Ahora tenemos el marco padre que tiene el relleno de 128 píxeles y luego el texto, que está configurado para llenar contenedor, y llena su contenedor hasta esa marca de 128 píxeles, porque tenemos ese relleno. Al usar algunos marcos anidados de diseño automático, logramos obtener el look que queremos. Además, me gustaría hacer algunos cambios a este texto porque actualmente, tenemos demasiadas líneas vacías, y también el color está un poco apagado. Está usando, por supuesto, nuestro color negro, pero quiero algo un poco más apagado. Para la mayoría de los párrafos de nuestro diseño, vamos a usar una opacidad negra del 75 por ciento. como les mostré en una lección anterior, se puede hacer con esto de dos maneras. Puedes cambiar la opacidad de la capa a 75 por ciento, o bien puedes cambiar la opacidad del color. Vamos a seguir adelante y hacer eso. Lo estoy haciendo para mostrarte en ambos sentidos, puedes escoger con lo que te sientas más cómodo. Lo primero que tenemos que hacer es porque estamos usando un estilo de color, necesitamos separarnos, y luego cambiar la opacidad del color, y luego crear un nuevo estilo de color, igual que creamos negro 15. Ahora vamos a crear 75 negros. Ahora tenemos el estilo de color negro 75 disponible si queremos usarlo en algún otro lugar. Además, hagamos que esto se vea un poco más interesante agregando algún relleno correcto igual que lo hicimos para este texto, porque tengo la sensación de que este texto podría ser un poco demasiado largo para esta sección. Con el texto seleccionado, Mayús A, para agregar el diseño automático, elimine el espaciado y el relleno predeterminados, agregue el relleno de 128 píxeles a la derecha y asegúrese de que el marco padre esté configurado llenar contenedor y también el texto en el interior se establece para llenar contenedor. Ahora, el texto aún se alinea con esa línea media que creamos en el héroe, pero además, tiene una agradable separación aquí en el lado derecho. Por último, para que esto se vea aún mejor, cambiemos el color de este título de negro a acento. Creo que esto solo ata todo muy bien. Siguiendo esto será nuestro menú. Pero en realidad, para agregar otro grado de separación entre estas dos secciones, vamos a seguir adelante y agregar lo que se llama en CSS, regla horizontal, es básicamente una línea de separación. Voy a agarrar la herramienta de línea o presionar L en el teclado y simplemente haga clic y arrastre una línea. Realmente no importa qué tamaño sea porque podemos configurarlo para llenar el contenedor así. En cuanto al color de trazo, puedo elegir negro 15. Comparte exactamente el mismo estilo con la línea que creamos aquí en la barra superior. Ahora, tenemos la descripción del menú de comida creada. Si agarramos la pantalla y apenas empezamos a cambiar el tamaño, verás que las secciones de texto ambas cambian el tamaño en consecuencia, lo cual es genial. Ahora es el momento de practicar. Adelante y crea la descripción del menú si no lo has hecho ya. Por curiosidad, ¿ tuviste algún problema hasta ahora? Cualquier técnica que no entendías , tal vez, recuerda, siempre tienes la opción de dejarme un mensaje en el área de discusión, y te ayudaré de cualquier manera que pueda. Pasando, estamos llegando a una de las secciones más complejas de nuestro diseño, que es el menú de comida. Sigamos adelante y abordemos eso a continuación. 16. Menú de alimentos para carburos: Como decía anteriormente, la sección de menú de comida es una de las partes más complejas de nuestro diseño. No técnicamente complejo, sino en cuanto al contenido porque es la sección más grande de la página, y por eso lo estamos dividiendo en tres partes. En esta primera parte, estamos abordando el menú de filetes. Vamos. Ahora volviendo a nuestro diseño en Figma, podemos ver que según el wireframe, la sección de menú debe tener un título. Después tenemos las categorías de menú, filetes, hamburguesas, y sándwiches, quickies y ensaladas, presentados como tablings. Cuando hacemos click en uno de estos tablings, revelamos un contenido de pestaña como los platillos reales. Ahora, a pesar de que usé pestañas en el wireframe, no voy a usarlas en el diseño final. Un par de razones para eso. En mi opinión, usar pestañas está bien cuando tienes contenido similar en tamaño. En nuestro caso, si miramos el resumen del proyecto, podemos ver que el menú es muy diferente en tamaño de categoría a categoría. Tenemos 1, 2, 3, 4, 5 artículos en estacas. Tenemos 1, 2, 3, 4, 5, 6, 7, 8 en hamburguesas y sándwiches. Sólo tenemos tres aquí en quickies, y tenemos cuatro en ensaladas. Creo que mostrar esta información en un control de pestañas se verá un poco raro. Además, este es un sitio web de una página y quiero mantener las cosas súper simples y fluidas. No quiero introducir un patrón complejo como un control de pestañas. En cambio, solo voy a mostrar todo el menú a la vez. Vamos a tener una categoría y vamos a enumerar todos los platillos de esa categoría, y luego bajo eso, la siguiente categoría y así sucesivamente y así sucesivamente. Entonces, empecemos cuidando el menú de apuestas. Lo primero que haré es seleccionar este grupo, y voy a cambiar A cambiarlo a un marco con maquetación automática, y voy a cambiar la dirección a una vertical, y voy a establecer el ancho o las opciones de cambio de tamaño para llenar contenedor. También voy a establecer un espaciado entre elementos de 128 píxeles. Entonces vamos a mover algunos elementos por ahí. Tenemos el menú, y luego el primero que haremos es filetes. En realidad seguiré adelante y eliminaré el resto de las secciones y también eliminaré parte de este contenido porque al final no estamos usando el control de pestañas. Voy a recrear la mayoría de estos elementos como me parezca. Voy a empezar agregando la tipografía correcta al título de categoría. Estacas, volvamos a los activos. Voy a estar usando este tamaño justo aquí, 37 tamaño de fuente 48 line-height. De vuelta aquí, 37 y 48. Voy a configurar el font-weight para bloquear y también menos tres píxeles en el espaciado de letras. También, en el wireframe original, elegí mostrar una imagen para cada plato. Ahora, no creo que vaya a ir por esa ruta para el diseño final porque vamos a tener demasiadas imágenes. Aquí, tenía sentido porque solo estábamos mostrando platillos de una categoría específica a la vez. Estaba bien tener 2, 3, 4, 5 fotos de platillos de esa categoría. Pero en el diseño final, porque estamos mostrando todos los platillos, creo que eso es simplemente aglomerar demasiado la página web. En cambio lo que haré es mostrar una imagen por categorías de platillos. Una imagen para filetes, una imagen representativa, una imagen para hamburguesas y sándwiches, una para ensaladas, otra para quickies. En realidad voy a mover esa imagen hacia arriba o por encima del título. Veamos. ¿ Tenemos esto en grupo? Nosotros lo hacemos. En realidad vamos a mover esto así. Ahora hablemos de maquetación. Si bien tengo esto seleccionado, en realidad agreguemos esa imagen. Voy a ir a Rellenar, voy a cambiar de sólido a Imagen, elige Imagen. Seguí adelante y descargué todas las imágenes que encontrarás en el archivo PDF de recursos. Veamos. Voy a estar usando una bonita imagen, ésta, por ejemplo, es una bonita imagen de un filete. Vamos a usar eso, y por ahora, estamos dispuestos a irnos. Obviamente podemos cambiar el tamaño de esta imagen como nos parece conveniente. Pero ahora hablemos de layout, porque sería muy fácil simplemente agregar algún relleno a esta sección para que el contenido se alinea muy bien con estas guías que tengo configurado aquí mismo. Pero a veces es una buena idea romper un poco el diseño y hacer algo inesperado. Si nos desplazamos hacia abajo por la página, podemos ver cómo se alinean las cosas de acuerdo a estas guías. Aquí también están alineados. Pero para que sea más interesante, como dije de vez en cuando, acaba de romper un poco el diseño y hacer algo inesperado. Eso es lo que haremos aquí. En realidad empujaremos este contenido a la derecha por una cantidad justa. El menú estará alineado en el lado derecho de la página. Después para hacer eso, vamos a hacer algo de limpieza primero. Vamos a llamar a este menú de comida. Esto es como la sección principal, y luego voy a seleccionar estos elementos dentro del turno A para auto-layout, y voy a establecer que se está redimensionando para llenar contenedor que redimensione al ancho completo de su padre. Ahora empujemos el contenido hacia la derecha agregando algún relleno a la izquierda en este marco, que vamos a llamar estacas. Para eso, voy a ir justo aquí y voy a añadir algún relleno y 260 o 240 es un poco demasiado pequeño. Vamos con 560 pixeles. Eso debería ser, me parece bastante bien. También puedo arrastrar una guía a 560 solo para asegurarme que cualesquiera elementos que alinee de la misma manera en el futuro, estarán correctamente alineados a la misma guía. Ahora, tomemos esta imagen, hagamos que llene contenedor, por lo que va el resto del espacio restante. Vamos a establecer su ancho en 640 píxeles. De nuevo, estoy usando el sistema de ocho puntos para dimensionar elementos. Entonces tenemos el título. Entonces comenzaremos a mostrar los platillos reales. Pero antes de eso, quiero añadir aquí una pequeña cosa a este título, sólo para que parezca más como un separador. Para eso, al igual que un toque decorativo, voy a dibujar un rectángulo, y lo voy a hacer 128 pixeles por 4. Para relleno, voy a usar negro. Ahora voy a tomar esto y el menú de apuestas turno A para crear otro marco con diseño automático, establecer su dirección a horizontal. Asegúrese de que los elementos estén alineados con el centro y establezca el espaciado entre los elementos en 32. Así como eso. Ahora, veamos acerca de los alimentos. Primero, veamos el título. Esto está usando los estilos tipográficos correctos porque ya los he establecido, pero realmente no estoy seguro de este texto. En lugar de regular por qué no hacerlo cursiva. También vamos a cambiar a negro, 75 por el color. Esto, el precio, vamos a ver negrita y vamos a cambiar su color por el acento en lugar de negro. Ahora tomemos esto, vamos a convertirlo en un marco con diseño automático, y vamos a establecer su espaciado entre los elementos a 32 píxeles, así como eso. Eso es bueno. Ahora empecemos a poblar. Llamemos a este plato. Empecemos a poblar con el contenido real para las apuestas. Tenemos esto. [RUIDO] Tenemos los contenidos, y también tenemos el precio 29. Genial. Ahora, también voy a cambiar las opciones de redimensionamiento para el título y el contenido del plato para ser contenedor de llenado, y voy a poner el plato para que sea recipiente de llenado también. Ocupa todo el espacio disponible. Estoy haciendo esto porque eventualmente voy a estar usando dos columnas en esta sección. Cada una de esas columnas ocupará exactamente la mitad del espacio disponible. Pero por ahora, todo se ve en orden aquí. En realidad dupliquemos el plato. Veamos exactamente cuántos platillos tenemos para filetes, así que 1, 2, 3, 4, 5, por lo que necesitamos cuatro más. Duplicar eso es 2, 3, 4 y 5. Ahora, es simplemente cuestión de usar el contenido correcto, así como eso. Ahora, obviamente porque tenemos mucho espacio con el que trabajar aquí, separemos este contenido en dos columnas. La primera columna tendrá tres ítems, la segunda columna tendrá dos ítems. Así es como vamos a hacer esto. Tenemos los filetes padre, que contiene los platillos, pero también el título, la imagen aquí, y el título del menú. En realidad separemos los platos y los pongamos en su propio marco. Vamos a llamar a eso platos. Nuevamente, tenemos auto-layout aplicado aquí. Pero en lugar de 128 píxeles de espaciado, voy a usar 64, por lo que la mitad de eso. Ahora, para separar estos en dos columnas, realidad es muy simple. Vamos a seleccionar los tres primeros. Vamos a hacer Turno A. Los vamos a llamar columna 1 y a los otros dos, Turno A columna 2. Ahora, voy a tomar los platillos padre, y voy a cambiar la dirección a horizontal, y voy a asegurarme que su tamaño esté configurado para llenar contenedores, por lo que sólo sube hasta aquí. A continuación, también voy a seleccionar la columna 1 y la columna 2 y establecer su cambio de tamaño para llenar contenedor. Eso les va a permitir tomar cada exactamente la mitad del espacio disponible. Hagamos este espacio entre estas columnas un poco más grande. momento es de 64 pixeles, pero puedo elegir platillos, y puedo aumentar esto a 128, y luego, finalmente, puedo seleccionar cada plato y cambiarlo es redimensionar para llenar contenedor, y hacer lo mismo por estos. No obstante, observe que el texto aquí va más allá de mis guías. No quiero eso. Quiero que todo esté bien contenido dentro de esta guía y esta guía. El texto aquí debe terminar en esta guía. En realidad es realmente fácil de hacer porque estamos trabajando con auto-layout. Tenemos los platillos marco padre y simplemente puedo añadir un derecho de relleno de 128 pixeles. Eso agregará el relleno en esta área justo aquí. Entonces las dos columnas ocuparán el resto del espacio, y tendrán anchuras iguales. Bastante genial. Vea lo poderoso que es el auto-diseño. Te permite crear diseños relativamente complejos con facilidad. Entonces lo último que quería hacer aquí es agregar algunas líneas separadoras entre cada plato. Para ello, voy a apuntar a las columnas, y voy a usar la herramienta de línea o L en el teclado y simplemente dibujar una línea como esta. Voy a configurar que está redimensionando para llenar contenedor. El trazo va a ser negro. Quizás sólo negro no negro 75. Pero quiero hacerlo punteado, igual que puedes ver aquí esta línea azul punteada. Creo que punteado se vería mucho mejor. Entonces abriremos los ajustes avanzados de trazo, y voy a seleccionar dash 2, 2, y luego esta cosa para el hueco del guión, veamos cómo se ve. Eso es bastante bueno. Pero creo que podría ir por un color más apagado. Voy a mantener el negro, pero voy a bajar la opacidad de la capa al 50 por ciento. Creo que eso se ve bastante bien. Ahora, es sólo cuestión de duplicar esta una vez más y moverlo por debajo del segundo ítem para separar el segundo y el tercer ítem. Entonces vamos a copiar esto una vez e ir a la columna 2 pega eso en, moverlo hacia arriba para que separa el primero y el segundo elemento en la segunda columna. Con eso, acabamos de terminar la sección de menú para filetes. Como viste, tomamos un enfoque diferente. Rompimos el diseño moviendo todo este contenido al lado derecho de la página, y también hicimos algo completamente diferente a lo que inicialmente dibujamos en nuestro marco de cables. En lugar de usar pestañas, decidimos mostrar todo el contenido del menú a la vez. Por eso decidimos organizar y mostrar cada plato bajo su categoría propia. Además, en lugar de mostrar una imagen para cada plato, estamos mostrando una imagen representativa para cada categoría. Estos son los resultados hasta el momento. Como ya estás acostumbrado, este es el momento de que practiques. Adelante y crea la sección del bistec en el menú de comida. Una vez que hayas hecho eso, podemos seguir adelante. Ahora, sí me doy cuenta de que utilicé el diseño automático bastante en esta lección, y lo uso para crear algunos diseños que podrían ser un poco más difíciles de comprender, especialmente si eres un principiante en Figma. Pero vuelve a ver la lección si no la entendiste. Si aún no entiendes lo que hice allí, solo déjame una línea en el área de discusión, y haré todo lo posible para ayudar. Ahora, al crear el menú de filetes, en realidad hicimos la mayor parte del trabajo para las otras subsecciones del menú de comida porque todo lo que tenemos que hacer ahora es copiar pegar los elementos de filetes y simplemente reemplazar el contenido. Es realmente simple. Siguiente paso, vamos a cuidar las hamburguesas y sándwiches. Próximamente. 17. Menú de alimentos para hamburguesas y Sandwhiches: Para las otras secciones del menú, solo podemos copiar pegar el menú para filetes y cambiar el contenido. No tiene sentido recrear esas secciones una y otra vez. Vamos a seguir adelante y hacer eso, también te mostraré la solución que escogí para la navegación del menú de comida. Vamos. Primero lo primero, vamos a copiar y pegar el menú de filetes, así que vamos a duplicar eso, y debido a que todavía está dentro del menú de comida, sólo va a pegarse más abajo. Va a estar muy bien alineado. Todo se hace automáticamente para mí. Observa que como estoy trabajando en esta página y creando elementos y agregando y duplicando y cosas, la página, mi fotograma principal simplemente cambia de tamaño a sí mismo, y todos los elementos son empujados hacia abajo en consecuencia manteniendo, por supuesto, la misma distancia o espaciado de 240 píxeles. Eso es porque, si recuerdas agregamos maquetación automática a nuestro marco principal. Todo se hace automáticamente por nosotros. Ahora, para esta sección, realmente lo llamemos Hamburguesas y Bocadillos. Lo primero, eliminemos este título del menú. Vamos a cambiar la imagen, vamos a elegir esta. Genial. Vamos a cambiar el nombre, y para eso realmente abramos el resumen del proyecto. Contamos con hamburguesas y bocadillos. Impresionante. Ahora, vamos a actualizar el contenido aquí. Veamos, tenemos, creo ocho, entonces 1, 2, 3, 4, 1, 2, 3, 4, por lo que tenemos ocho ítems, cuatro en cada columna. Vamos a seguir adelante y duplicar este platillo, y también duplicar uno de los separadores y ponerlo en medio, y luego dupliquemos esto una y dos veces, luego simplemente colocar los separadores en la correcta lugares. Ahora, es simplemente cuestión de copiar pegar desde nuestro resumen de proyecto hasta nuestro diseño. Vamos a seguir adelante y acelerar este proceso. Hemos terminado de copiar y pegar, el contenido de nuestro resumen de proyecto en nuestro diseño terminado. Ahora, en la introducción a esta lección, mencioné algo sobre una navegación de menú de comida. Creo que esa es una característica bastante importante para agregar porque esta es una sección bastante alta, el menú. Ayudaría tener alguna navegación que nos permitiera hacer click y desplazarnos automáticamente a ciertas categorías como filetes, hamburguesas y sándwiches y las otras a las que vamos para agregar. Ya que tenemos todo este espacio en blanco en el lado izquierdo, vamos adelante y usemos eso para un menú que se va a desplazar mientras se desplaza la página, por lo que va a ser un menú fijo. Para este diseño, creo que la sección de hamburguesas y sándwiches va a ser un buen lugar para albergarlo. Entonces vamos a hacer un par de cambios aquí. Vamos a envolver este marco en otro marco con maquetación automática. “ Turno” “A” otra vez, y esto va a ser hamburguesas y sándwiches. Vamos a renombrar esto por contenido de hamburguesas y sándwiches. Vamos a quitar el espaciado y relleno que agregamos aquí. Para éste, en realidad vamos a quitar el relleno que agregamos a la izquierda porque vamos a sumar otra sección. Entonces empecemos agregando algo de texto dentro de este marco, y comenzaremos con los filetes. Vamos a cortar eso y agregarlo exactamente en el marco padre. Así como eso. Entonces envolveremos esto en otro marco con maquetación automática, que vamos a llamar menú de comida ahora para la navegación. Esto es lo que haremos, Hamburguesas y sándwiches. Esta sección, por supuesto, será de dirección horizontal. Vamos a establecer un espaciado de 128 entre artículos. Entonces vamos a seleccionar la sección principal, y todo lo que vamos a hacer es configurar es cambiar el tamaño a Rellenar contenedor. Entonces seleccionemos nuevamente el marco principal y volvamos a elegir Rellenar contenedor desde el menú desplegable en lugar de ancho fijo. Esto es algo que tendrás que hacer de vez en cuando. Cuando estás en un re-empaquetado, reencuadre otros marcos, con diseño automático, a veces Figma cambiará automáticamente de Contenedor de relleno a Ancho fijo. Así que solo mantente en nuestro ojo en eso para asegurarnos que no estás rompiendo tus diseños. Ahora también, me gustaría que esta navegación partiera desde aquí. De esta guía, que se encuentra en el 128. Seleccionemos el menú de comida. Por ahora, vamos a establecer el espaciado a cero, relleno a cero, y agreguemos un relleno izquierdo de 128. Eso es muy bueno. Entonces también, voy a cambiar el tamaño de la sección de menú de comida para que mi sección principal se alinea adecuadamente con los demás. En cuyo caso, mi navegación es ahora 432 pixeles, y es un ancho fijo. Ahora puedo seleccionar el texto y puedo configurarlo a Rellenar contenedor, y puedo duplicar ese texto tres veces más. Mientras estoy en ello, asegurémonos de que mi dirección esté en vertical. Esto es otra vez, otra cosa a vigilar. ocasiones, cuando estés cambiando la dirección en un marco de diseño automático, el cambio de tamaño, cambiará de Fijo a Contenidos de Hug, en cuyo caso necesitarás restablecer ese valor. También vamos a establecer la altura a contenido de Hug. También seleccionemos todo este texto y establecemos la altura en Contenidos de abrazar y el ancho para Rellenar contenedor. Ahora deberíamos ser buenos para irnos. Sustituyamos el texto aquí por los nombres reales de las secciones. Entonces hamburguesas y sándwiches, tuvimos qué quickies y ensaladas. La idea aquí es que este menú sea fijo. Una vez que llegue al menú real, como me estoy desplazando hacia abajo, este menú se quedará en el mismo lugar. Eso es realmente fácil de hacer en CSS, pero debido a que estamos lidiando con la parte de diseño, momento solo vamos a colocarlo aquí, adjunta a esta segunda sección. Ahora, hagamos que esto parezca un poco más bonito. Supongamos que estamos navegando a esta sección, a hamburguesas y sándwiches, y necesitamos una manera de hacer que el menú resalte esta sección específica en la que estamos. Para eso, es realmente fácil de hacer, solo podemos cambiar el color de esta sección a acentuar. Entonces el resto, sólo los pondremos en negro. Hagámoslo también un poco más aireado, por así decirlo, agregando algo de espacio entre todos estos artículos. Agreguemos también como una línea a este ítem, que coincida con la línea que agregamos aquí. En realidad me di cuenta de que usé el método equivocado para crear esto. O en realidad no está mal, esta es una forma de hacerlo con un rectángulo, pero también puedes hacerlo con una línea. Te voy a mostrar ambos sentidos en este momento. Pero antes de hacer eso, permítanme realmente poner algunas esquinas redondeadas en este elemento. No es sólo una barra lisa, tiene unas bonitas esquinas redondeadas, solo un detalle menor. Hagamos lo mismo aquí, ocho píxeles. Hagamos aproximadamente lo mismo aquí. Pero voy a estar usando un elemento de línea en su lugar, solo para mostrarte una opción diferente de hacerlo. Usando la herramienta L, o línea, solo voy a dibujar una línea que tenga 48 píxeles de ancho. Voy a fijar su espesor de trazo en cuatro. A partir de aquí, voy a elegir Ronda. Se inicia redondo y termina redondo. Además, voy a cambiar el color a acento. Ahora, podemos tomar la línea y este texto, Shift A para crear un nuevo marco, cambiar de dirección, establecer redimensionar a Relleno contenedor. Además, movamos a mover la línea para mostrarla primero. Alinearemos todo en el medio, así. Cambiemos la distancia entre esto a 16 píxeles. Dos problemas con este diseño. En primer lugar, el texto es un poco demasiado grande. Va más allá de los bordes del marco de mi padre aquí. En segundo lugar, a pesar de que en papel esta línea está alineada correctamente con el texto, visualmente no lo es. Eso sucede por la altura del texto. Tenemos mucho más espacio aquí en la parte superior que en la parte inferior. El texto no está perfectamente alineado visualmente dentro de su línea. Por eso también tenemos esta desalineación. Pero esto es realmente fácil de arreglar. Sólo tenemos que empujar este elemento hacia abajo un par de píxeles. Normalmente, esto sería bastante fácil de hacer. Pero debido a que estamos trabajando con el diseño automático, y estamos alineando automáticamente elementos, la única forma de mover este elemento hacia abajo es agregándole relleno. La única forma de hacerlo es aplicando el diseño automático. Shift A, para crear un marco con solo este elemento, restablece el espaciado y el relleno, y simplemente agrega una parte superior de relleno de, digamos, cuatro píxeles. Eso sólo va a empujarlo ligeramente hacia abajo para que ahora visualmente esté alineado con el texto. Ahora bien, ¿qué hacemos con esta situación en la que el texto desborda nuestra navegación del menú de comida? Porque recuerda, decidimos agregar un espaciado de 128 píxeles para ser consistente con el otro espaciado. Podríamos hacerlo más pequeño pero no quiero eso. Quiero este espacio exacto. Veamos. Dentro de este marco, tenemos el texto y la línea. El texto actualmente se establece en Ancho fijo. Pero vamos a configurarlo para Rellenar contenedor. Eso cambiará automáticamente el tamaño del texto, para que encaje dentro los límites de su marco padre. Pero ahora el texto se muestra en dos líneas, lo cual está bien. Pero ahora la línea no coincide. Lo que vamos a hacer es seleccionar esto, y en lugar de alinearnos con el medio, lo alinearemos a la parte superior. Después seleccionaremos el marco de línea real y cambiaremos su relleno superior. Vamos a intentar 16. Tal vez un poco más,18. Lo estoy haciendo hasta que la línea se alinea visualmente con estas dos palabras. Ahora, hemos arreglado la navegación. Por supuesto, cuando se está desarrollando este sitio web, el desarrollador puede escribir el CSS y JavaScript necesarios para aplicar este estilo activo a las otras secciones a medida que nos desplazamos hacia ellas. Por ejemplo, si estuviera en el sitio web real en este momento, si estuviera desplazando de nuevo hasta filetes, entonces este menú estaría alineado con esta zona con filetes. El elemento de menú resaltado sería éste, en lugar de éste. Espero que eso tenga sentido. Pero sí, con eso, hemos terminado la segunda sección de nuestro menú. Ojalá, todo va bien en tu extremo y estás progresando con tu versión del diseño o el proyecto de clase. Si no estás trabajando a mi lado y simplemente prefieres ver la clase, entonces supongo que eso también está bien, pero sí recomiendo el ejercicio. Yo sí recomiendo la práctica. Solo te va a permitir subir de nivel tus habilidades y aprender a trabajar en Figma mucho más rápido que solo confiando en la teoría. Ahora, creamos dos secciones en el menú. Sólo tenemos que enjuagar y repetir para crear los otros dos. Hagámoslo en la próxima lección. 18. Menú de alimentos para Quickies y ensaladas: Estamos casi en la meta con el menú de comida, solo necesitamos crear las secciones para quickies y ensaladas. Hagámoslo ahora mismo. Empecemos duplicando el marco de filetes porque tiene el diseño correcto sin la navegación del menú. Así que simplemente Comando D para duplicarlo y sólo voy a moverla abajo bajo la categoría de hamburguesas y sándwiches. Tienes que amar a AutoLayout. Es súper simple. Esto va a ser cuatro quickies, así. Cambiemos la imagen de fondo por las alas. En cuanto a contenido, solo tenemos tres ítems. Vamos a tener dos en la primera columna. Eliminemos esto y esto, y esto, y esto, así dos y uno. Entonces es simplemente cuestión de reemplazar el contenido. Esos son los rápidos. Ahora, seleccionemos esta sección y cambiémosla el nombre. Vamos a duplicarlo, y vamos a crear la sección para ensaladas. Vamos a reemplazar la imagen aquí también con ésta. Entonces adentro, tenemos cuatro ítems, así que vamos a duplicar éste y también coloquemos uno de esos separadores entre sí. Ahora, enjuagemos y repitamos. Eso es todo, súper simple. Apenas por copiar y pegar la sección inicial que creamos para filetes y simplemente cambiando una imagen, un título, y los platillos reales, pudimos completar el menú de comida junto con su navegación. Esto es lo que tenemos hasta ahora. Echemos un vistazo rápido a la página hasta ahora en nuestro diseño. Tenemos la barra superior, el encabezado, el área del héroe, y luego la descripción del menú de comida, y luego el menú de comida real. Creo que esto tiene un poco más de sentido para que este sitio web tenga el menú dispuesto así todo a la vez, en lugar de usar pestañas como inicialmente discutimos en la etapa de encuadre de cables. ¿ Qué sigue? Bueno, continuación se practica de ti. Viste que acabamos de completar la sección más grande de la página, que es el menú de comida. A pesar de que al principio podría parecer desalentador por todo ese contenido, al final, viste que era súper simple por AutoLayout. Eso hizo que nuestro trabajo fuera mucho más fácil. Con eso dicho, espero que estés siguiendo y que hayas completado tu versión del menú de comida para tu diseño. Cuando hayas terminado y cuando estés listo para seguir adelante, vamos a encargarnos de la sección sobre, que se acerca. 19. Acerca de la sección: Muy bien, nos ocupemos de la sección Acerca de. Esto es bastante simple de hacer y usará un diseño que es muy similar a la sección Héroe. Vamos. Basado en el wireframe, esta es la estructura de la página Acerca de. Tenemos un título, el texto descriptivo y luego una o dos imágenes. Ahora, mirando el diseño usando una vista de pájaro, me gustaría crear alguna separación entre la sección de menú y el resto del sitio web. Esta sección Acerca de en realidad me da una gran oportunidad para hacer eso porque puedo usar un layout que es muy parecido a éste y creo que eso va a lograr la separación bastante bien porque vamos a tener una imagen que es una de las, llamémosla requisitos para la sección Acerca de. Pero también estamos usando este fondo oscuro y eso va a servir como un bonito separador visual entre las secciones en la parte superior y las de abajo. Vamos a seguir adelante y duplicar la sección Héroe. Usando las teclas de flecha, solo voy a moverla a posición bajo la sección Menú y lo voy a cambiar el nombre a “Sobre nosotros”. Ahora, acerquemos. Hay un par de cambios que tenemos que hacer aquí. En primer lugar, la imagen, voy a mover al lado derecho y la voy a cambiar por otra cosa. Veamos qué tipo de imágenes tenemos aquí. Creo que esto podría funcionar muy bien. Vamos a usar eso. Además, el contenido aquí también necesita cambiar. Voy a usar este texto. Sólo voy a pegar eso en. En realidad usemos el color de acento. En realidad hay un pequeño typo aquí. Con eso, puedo eliminar este bit. También voy a eliminar este marco porque voy a tomar este texto y pegarlo aquí. Vamos a usar blanco. Pero además, no voy a estar usando blanco puro. Voy a estar usando blanco 95 por ciento de opacidad igual que lo hice aquí en la sección Héroe. Porque no quiero que ese contraste sea demasiado duro. Entonces vamos con 95 por ciento. Para el texto, en realidad podemos ir con 90 por ciento. Creo que eso va a mezclarse aún mejor con el fondo. Creo que aquí tenemos demasiadas líneas vacías, así que vamos a deshacernos de eso. También si traigo las guías, podemos ver que no estamos alineando exactamente esto correctamente. Entonces si vamos al contenido héroe, estamos usando el relleno 128 y 128. Eso es correcto. Pero estoy adivinando que estos dos tienen un ancho fijo, así que vamos a cambiarlos a llenar contenedor. Ahora, están muy bien alineados con nuestra guía y estamos listos para ir. Esa es la sección sobre. Ahora podemos simplemente eliminar la división. Estamos listos para seguir adelante. Ahora claro que es tu momento de practicar. Así que adelante y crea tu sección Acerca de y cuando hagas eso, estamos listos para pasar a las fotos de Instagram. Eso viene en la próxima lección. 20. Sección de Instagram: El apartado Instagram es básicamente una gran galería de imágenes. Esto realmente me da una gran oportunidad para mostrarte cómo trabajar con imágenes y auto-layout de una manera que permita que esas imágenes redimensionen en consecuencia cuando cambies el tamaño de la galería. Vamos. Veamos qué tenemos basado en nuestro wireframe. Tenemos el título, un botón para seguir Instagram, y luego algunas imágenes. Lo primero que haremos aquí es que vamos a convertir esto en un marco con auto-layout. Pero en realidad primero, déjame deshacerme de esta fila de imágenes. Permítanme simplemente hacer un Shift A para agregar auto-layout a estas tres imágenes futuras, y luego haré un Turno A en estas dos. Por último, desagruparemos esto. Solo un poco de limpieza realmente. Llamemos a esta galería de imágenes, pero en realidad, vamos a convertirlo en un marco primero con auto-layout y llamarlo Instagram, en realidad fotos de Instagram. A continuación, saquemos a las guías para asegurarnos de que estamos alineando adecuadamente todo. Voy a establecer su ancho a un contenedor de relleno. Agreguemos 128 relleno a la izquierda y a la derecha. Después enmarcan a 10 y marco 11, ambos serán configurados para llenar contenedor. Empecemos con el texto aquí. Vamos a establecer el color de este acento dos. Entonces seleccionemos el marco padre. En lugar de establecer un espaciado fijo entre estos dos elementos, vamos a seguir adelante y establecer la distribución de artículos en espacio entre. Debido a que sólo tenemos dos ítems, uno de ellos será enviado a la izquierda del elemento, uno a la derecha del elemento. Además, alineemos todo en el medio. A continuación, vamos a trabajar en este botón porque en este momento, es feo, entonces entonces primero las cosas primero, el texto Poppins, negrita, 21, 32, negro. Eso es correcto. El texto es como debe ser. Actualicemos este ícono porque está usando una versión ligeramente desviada del ícono de Instagram. Vamos a copiar esto. Por cierto, puedes moverte por el Lienzo así manteniendo pulsado el espacio en tu teclado hasta que tu cursor se convierta en una mano, y luego solo puedes hacer clic y arrastrar para moverte. Entonces vamos a pegar eso. Entonces vamos a deshacernos de este fondo porque crearemos nuestro propio fondo convirtiendo esto en un marco de diseño automático. En realidad no vamos a usar un fondo, vamos a usar un derrame cerebral. Vamos a ponerlo en negro, un píxel dentro. Perfecto. Ahora vamos a añadir algo de relleno. Creo que alrededor de 24 pixeles serían apropiados. Vamos a establecer el espaciado de 16 píxeles entre el texto y el icono. Alinearemos ambos en el medio así. Ese es nuestro botón, súper simple. A continuación, veamos sobre las imágenes. Pero en realidad, aumentemos el espacio entre el título y las imágenes reales. En este momento, es un número aleatorio. Tenemos que establecer eso en 128, igual que estableciendo el espaciado en el marco padre, entonces las imágenes. Los tres serán utilizados como fondos para estos rectángulos. Creo que esta es la forma correcta de usarlos para algo como esto en Figma porque a medida que cambia el tamaño de la forma, el fondo se reposicionará y cambiará de tamaño. Siempre verás una parte de la imagen. Con el marco padre seleccionado, en realidad, cometí un error aquí. Las imágenes en realidad irán de borde a borde, no tendrán este relleno de 128 píxeles como el texto. Pero en realidad aplicé ese relleno aquí mismo en los elementos padres. Vamos a quitar eso. En cambio, vamos a agregarlo a este cuadro superior aquí, 128, 128. Esto me permite configurar el contenedor de imagen para ir de borde a borde usando contenedor de relleno. Entonces cada imagen individual se establecerá para llenar contenedor. Además, permítanme quitar el espaciado aquí. En realidad, vamos a establecer eso en 0 y configurarlo a empacado. Así. Ahora las imágenes, vamos a configurarlas para que llenen contenedores para que cada uno ocupe exactamente un tercio del espacio disponible. Ahora, probablemente no puedas ver eso muy bien porque todos son grises. Vamos a agregarles algunas imágenes. Cambiemos el color de relleno de sólido a imagen. Veamos qué tipo de imágenes vamos a utilizar aquí. Tal vez éste. Lo importante aquí es que establecerías las imágenes para llenar aquí. No se ajusta a cultivo o azulejo, asegúrate de que estén configurados para rellenarlos. Por último, hagamos la tercera imagen. Agreguemos este. Ahora vamos a cambiar también su altura a 480 píxeles, así así. Esa es nuestra primera fila de imágenes. Vamos a duplicarlo, fila 2. Vamos a cambiar estos en un nuevo marco llamado imágenes. Aquí, simplemente eliminaremos el espaciado. Ahora, vamos a cambiar las imágenes. Usa eso y aquí, donde vamos a usar tal vez ese. Aquí, por cierto, también puedes hacer doble clic. Este es un acceso directo, por lo que puede hacer doble clic en una imagen para abrir esta ventana de diálogo. ¿ Por qué no éste? Al usar imágenes como estas como fondos, ahora podemos tomar esta página y ver lo que sucede. Uy. Eso no fue tan dramático como pensaba. Vamos a cambiar esto para llenar contenedor. Llenar contenedor. Ahora deberíamos ser buenos. Ahora también, cambió las filas para llenar contenedor. Esto debe estar todo configurado para llenar contenedor. Como decía, ahora si agarras la pantalla y empiezas a redimensionarla, verás que esas imágenes también cambiarán de tamaño. Por supuesto, tendrán la misma altura porque así se establecen en este momento como una altura fija. Pero en términos de ancho, las formas reales, los rectángulos cambiarán su ancho. Las imágenes porque están configuradas como fondos, bueno, solo podemos ver ciertas partes de ellas, que es exactamente el comportamiento que obtendrías, o puedes conseguir en un sitio web real. Ahora vamos a traer esto de vuelta a donde estaba. Esa es la sección de Instagram. Con la sección de Instagram hecha, en realidad nos estamos acercando realmente a terminar nuestro diseño ahora. Sólo tenemos dos secciones más por completar y luego podemos pasar a la parte de diseño receptivo de la clase. Pero por ahora, veamos acerca de esas dos secciones. El primero es el contacto, y en la siguiente lección, manejaremos el encabezado y la barra lateral de contacto . Nos vemos ahí. 21. Encabezado de contactos y Sidebar: Es hora de crear la sección de contactos, y debido a que es un poco más grande de lo habitual, la dividiré en partes. En esta lección, crearemos su encabezado y barra lateral. Empecemos. Echemos un vistazo al diseño que creamos durante el wireframing. Podemos ver que tenemos un título, tenemos un mapa, la dirección, número de teléfono, horario comercial, y luego el formulario de contacto real. Ahora, justo antes, dije que en esta lección vamos a crear el encabezado y la barra lateral de la sección de contactos. Esto es lo que estoy pensando, voy a estar usando un layout similar al del menú. Voy a tener aquí el título de contacto, voy a tener el mapa aquí, y el formulario de contacto aquí, y en la barra lateral donde coloqué el menú de navegación, vamos a tener la otra información; la dirección, el número de teléfono, y el horario comercial. Para hacernos las cosas mucho más fáciles, sigamos adelante y dupliquemos esta sección. Voy a copiarlo, y voy a seleccionar mi marco principal y lo voy a pegar y luego simplemente moverlo hacia arriba así. También déjame traer ese título o en realidad puedo traerlo desde aquí, cortarlo desde ahí, y pegarlo ahí mismo en ese marco. Donde dice contacto vamos a asegurarnos de que el espaciado sea correcto, 128 ahí y luego 128 ahí, y podemos eliminar éste. Puedo tomar el formulario de contacto y puedo pegar eso aquí, nos ocuparemos de eso más tarde. Entonces en lugar del menú de navegación aquí, voy a agarrar la información de contacto, cortarlas desde ahí, y voy a pegarlas aquí mismo. Entonces sólo voy a deshacerme de estos artículos. Ahora, un par de cosas que tenemos que hacer aquí. En primer lugar, cambiemos esta imagen a un mapa real. Para eso, podrías tomar una foto de un mapa de la web, pero Figma tiene un plugin que se llama Mapsicle. Vamos a seguir adelante y hacer una rápida navegación para eso. Vamos a instalarlo. Genial. Ahora volvamos a nuestro archivo Figma, y lo que haremos es seleccionar este rectángulo, abriremos el plugin. Por cierto, acabas de verme usar la funcionalidad QuickFind en Figma, puedes acceder a eso mediante el uso de comando y barra invertida. Entonces puedes escribir nombres de plugins, varios comandos, en Figma es muy fácil de acceder. Vamos a ver atajos de teclado. Veamos. Donde dice acciones rápidas, encontrarás el atajo de teclado para tu sistema operativo. Entonces abramos Mapsicle. Vamos a crear un mapa aleatorio aquí, realmente no importa. Algo como esto quizás. Sólo vamos a crear el mapa aquí, y eso va a colocarlo ahí mismo como una imagen de fondo, y ya hemos terminado. Deshaznos también de este título no lo necesitamos en este momento. Volvamos nuestra atención a la barra lateral. Ahora, en realidad quiero que la barra lateral esté alineada con mi formulario de contacto. Eso significa que vamos a tener que hacer algunos cambios en nuestros marcos aquí. Echemos un vistazo a la estructura. Vamos a llamar a este contacto, y luego tenemos un marco aquí, llamemos a esta barra lateral. Llamemos a este contenido. Tenemos la barra lateral aquí, y el contenido aquí. ¿ Qué tal si hacemos esto, tomamos la barra lateral y lo agruparemos con el formulario de contacto, que es Grupo 23. Veamos. Tomaremos el grupo 23, lo moveremos afuera. En realidad podemos eliminar esta sección aquí no la necesitamos. Veamos, vamos a tomar esto y esto, vamos a crear un nuevo marco con los dos, y vamos a cambiar la dirección a vertical. Cambiemos aquí la altura para abrazar los contenidos. Ahora seleccionemos el contenido, cambiemos la altura a abrazar, y enmarcar 16. Ahora estamos llegando a alguna parte. Vamos a mover el contacto hacia arriba, así. Esto debe colocarse a la izquierda así. Vamos a traer a las guías solo para asegurarnos de que estamos haciendo las cosas correctamente. Ahora, seleccionemos el contenido, y vamos a establecer el relleno o el cambio de tamaño como contenedor de relleno. Vamos a añadir un relleno a la izquierda de 560 píxeles. Genial. Ahora esta sección está correctamente alineada con esto. Al avanzar, el formulario de contacto también está correctamente alineado, y esto también está correctamente alineado. Ahora nos vamos a llegar a algún lado. Ahora para que esta sección de información de contacto sea un poco más interesante, ¿qué tal si usamos iconos como hicimos aquí en la barra superior? En realidad podemos copiar esta información y pegarla a continuación, por lo que no recreamos esos iconos. Vamos a seleccionar el marco de la barra lateral, vamos a pegar y vamos a traer las guías una vez más. Vamos a fijar esto en vertical. Tenemos un ítem, segundo ítem. Vamos a establecer estos como Contenedor de relleno y luego seleccionaremos el contenedor real y configuraremos esto para llenar contenedor. Veamos ¿por qué este texto no se comporta correctamente? Contenedor, ahí vamos. Vamos a copiar este elemento, lo vamos a utilizar para sumar el horario comercial. Vamos a decir de lunes a jueves, 12:00 PM a 10:00 PM, y de viernes a domingo, 10:00 AM a 11:00 PM. Genial. Ahora vamos a cambiar realmente el color de estos iconos para acentuar y creo que 100 por ciento en la opacidad. Hagamos lo mismo por éste. Para éste, para el tercero, en realidad tenemos que escoger otro ícono. Vamos a abrir la aplicación de concepto de ojos de nuevo para escoger un color diferente. Mientras esperamos eso, cambiemos realmente la opacidad o detecte la opacidad de este texto a negro 75. Ahí vamos. Ahora que eso está abierto, busquemos un reloj en nuestro conjunto de iconos Bootstrap. Agarremos éste y reemplacemos el icono existente, así como éste. Eliminaremos el anterior y también haremos que los iconos sean un poco más grandes. Actualmente son 16 por 16, pero quiero que sean 24 por 24. En realidad, una cosa que no me gusta aquí es que están alineados en el centro con textos que se extienden en dos filas. Quiero que estén alineados en la parte superior. Vamos a seguir adelante y cambiar eso aquí y aquí. Pero obviamente ahora no están alineados visualmente adecuadamente. Lo que tenemos que hacer es aplicar la misma técnica que usamos cuando creamos el menú aquí arriba. Recuerda, agregamos algún relleno superior a esta línea envolviéndolo con un marco con auto-layout. Vamos a seguir adelante y hacer lo mismo aquí. Lo que tenemos que hacer es envolverlo con otro marco agregando auto-layout. Turno A. Aquí pasó algo extraño porque esto ya era un marco. Ver el ícono. Al agregar diseño automático, esto alineará estos dos elementos en una dirección determinada, y no queremos eso. Un par de formas diferentes para pasar esto podemos hacer clic derecho e ir selección de fotogramas. Creamos un marco encima de él. Lo envolvimos en otro marco. En cuyo caso, aquí podemos simplemente hacer Shift A en este marco para agregar auto-layout, y luego podemos sumar la cantidad de relleno que queremos. Digamos que tal vez como cuatro o dos. Veamos qué se ve mejor. Creo que dos sería la cantidad apropiada, y haremos lo mismo por este ícono. Haga clic con el botón derecho en la selección de fotogramas, Mayús A para agregar diseño automático y luego veamos cuatro o dos. Creo que eso se ve bastante bien. También, recuerda cómo dije que de vez en cuando tenemos que romper el trazado. Bueno, eso es algo que podemos hacer aquí también. En primer lugar, déjame deshacerme de ver elementos. Todo este grupo debería haberse ido. Para romper un poco el diseño, ¿qué tal si alineamos el ancho del texto? Esta guía, alinearemos los iconos con esta guía. Eso debería ser interesante. Para hacer eso, veamos qué tenemos. Contamos con un marco con 128 acolchado izquierdo. Cambiemos eso a 64. Ahora tenemos que empujar el texto para alinearse con esta guía. ¿ Cómo hacemos eso? En realidad es bastante simple. La distancia entre aquí y aquí es de 64 píxeles. Lo que hacemos es calcular el tamaño del ícono y añadimos el resto como relleno correcto. Eso va a empujar el texto hacia la derecha, o porque este es un marco y estamos usando el espaciado entre ítems, solo puedo aumentar el espaciado allí hasta llegar al número correcto. Creo que esta es en realidad la forma más fácil de hacer eso. Vámonos 40. Realmente depende. Creo que 40 es en realidad la cantidad correcta. Hagamos lo mismo aquí, 40 y aquí, genial. Ahora, todo está correctamente alineado. Exactamente como lo quiero. Iconos con esta guía, texto con esta guía y luego el encabezado, mapa y formulario de contacto se alinea con esta guía, que es exactamente lo mismo que hicimos para el menú. Eso no fue bastante difícil, ¿verdad? En este momento lo único que queda por hacer aquí es el formulario de contacto. Bueno, ojalá tu proceso de diseño vaya sin problemas y que estés avanzando en tu versión del sitio web. Si has terminado el encabezado y la barra lateral de la sección de contactos, estamos listos para pasar al formulario de contacto, que terminaremos en la siguiente lección. Te veré ahí. 22. Formulario de contacto: Es hora de trabajar en el formulario de contacto, y creerlo o no, diseñar formularios es una de mis cosas favoritas por hacer porque simplemente no me gusta la apariencia predeterminada de formularios en la web. Siempre trato de que se vean mejor y sean más utilizables. Déjame mostrarte cómo diseñaría esta forma. En primer lugar, necesitamos un título para este formulario. Vamos a agarrar algún texto, y voy a ir aquí mismo bajo el grupo de formularios. Sabes qué, en realidad primero cambiemos esto de un grupo a un fotograma, así que “Shift A” para agregar auto-layout, y vamos a cambiar el espaciado aquí a 32, eso debería hacerlo. Vamos a jugar con esta capa si necesitamos aumentar el relleno o lo que sea, pero llamemos a esto, envíanos un mensaje. Vamos Poppins 21, 32, negrita, y solo usa el negro aquí. Ahora para los campos de formulario reales, esto es lo que estoy pensando, en lugar de un campo con un fondo sólido, vamos a mover la etiqueta un poco más arriba, y luego tendremos el valor de campo. Entonces tendremos solo una pequeña línea de un píxel como borde para separar el campo de los demás. Se va a ver algo así. Primero nos ocupemos de la línea, llenaremos de negro y vamos a ir 50 por ciento de opacidad. Cambiemos el grupo a un marco con diseño automático, y volvamos a seleccionar el borde y cambiarlo para llenar contenedor, y también cambiamos esto para llenar contenedor. Vamos a establecer el espaciado interior de los artículos en 16. Este es el valor de campo, por lo que debe ser 21, 32 regular y negro, y también vamos a duplicarlo para crear la etiqueta. Para esto, usaremos un texto mucho más pequeño, y el más pequeño que definimos aquí como 16, 24, por lo que 16 tamaño de fuente, 24 line-height. Hagamos eso, entonces 16, 24. Llamemos a esto tu nombre. En realidad pongamos algunos valores aquí. Vamos a reducir la opacidad de este texto, utilicemos el negro, 75. Estoy pensando que tal vez algún espacio entre letras menos 3 por ciento solo para que se vea un poco diferente del texto debajo de él, y ese es uno de nuestros campos. Ahora, para hacernos las cosas más fáciles, solo dupliquemos este fotograma 1, 2, 3 veces más. Aquí, vamos a tener su dirección de correo electrónico. Añadamos aquí mi dirección de correo electrónico. Entonces, ¿qué más? El número de teléfono. Hagamos esto. Obviamente, este no es mi número de teléfono real, y aquí va a ser tu mensaje. Cambiemos el mensaje, algo así. Por último, sólo tenemos que eliminar estos. En realidad cambiemos el botón también. En realidad creamos aquí un bonito botón, solo podemos copiar eso, y podemos pegarlo en. Sólo tenemos que quitar el ícono, cambiar los textos. Podemos establecer el redimensionamiento para llenar contenedor y en realidad podemos cambiar la alineación también para que el texto esté centrado. Una cosa que en realidad quiero cambiar es el espaciado, creo que 32 es un poco demasiado bajo, por lo que 64 píxeles deberían hacer el truco. Además, me gustaría limitar cuán amplia es realmente esta forma. Para eso, veamos cuáles son nuestras opciones aquí. Tenemos un marco que en realidad está configurado para abrazar el contenido. Ahora, qué pasa si lo configuro para llenar contenedor. Va a aumentar su tamaño. Entonces tenemos este marco cual podemos configurar para llenar contenedor, y luego podemos tomar el marco inicial y podemos añadir un relleno al lado derecho, digamos 560, que es exactamente la misma cantidad de relleno que utilizamos aquí. Para empujar el mapa y el contenido del menú desde el borde izquierdo. Creo que eso se ve bastante bien. El único cambio aquí, hagamos que este texto llene contenedor, y creo que el resto simplemente debería caer en su lugar. Vamos a cambiar esto para llenar contenedor, y vamos a cambiar esto también. Eso es más o menos. Ya está completa la sección de contacto. Anteriormente, creamos el encabezado con el título y el mapa, y la barra lateral que contiene información de contacto. En esta lección, creamos el formulario de contacto. Si has estado siguiendo a lo largo, entonces espero que tu sección de contactos esté completa también, y si no lo es, entonces adelante y crearla para que podamos seguir adelante. Ahora, solo mirando nuestra página, podemos ver que las únicas partes sin pulir son las secciones de newsletter y pie de página. Vamos a cuidar de los próximos. 23. Boletín y pie: Newsletter y pie de página, estas son las dos últimas secciones nuestra página web que aún no hemos diseñado. Vamos a seguir adelante y hacer eso ahora mismo y terminar este diseño de sitio web. Vamos. Primero, en realidad nos ocupemos del pie porque es lo más fácil de hacer. Voy a seleccionar todo este grupo y lo voy a llamar boletín y pie de página y por supuesto, Turno A para usar auto-layout. Cambiemos el espaciado entre los ítems a 128. Alinearemos todo en el medio y por supuesto hagamos que esto llene el contenedor. Además, agreguemos un relleno 128 en la parte inferior para que la distancia entre esta sección y la parte inferior sea la misma que entre esta sección y el formulario de boletín. Ahora solo por mirar este diseño, no estoy seguro de que el logotipo encaja aquí porque veo esto como una sección de aspecto muy limpio, así que no creo que debamos usar el logo. A pesar de que lo usamos en el wireframing. Pero como he estado diciendo el wireframe es sólo una guía. Podemos alterar diseños, podemos eliminar ciertos elementos si, por supuesto, no son críticos, como contenido muy importante. Pero el logotipo aquí es principalmente por razones estéticas. Así que sólo voy a seguir adelante y eliminar eso y también desagruparemos este fragmento de texto. Para el texto vamos a usar negro 75, 16, 24 eso es correcto. Ya fijamos esta tipografía. Ahora con el pie de página hecho veamos sobre este boletín de registro. Primero voy a tomar este grupo, convertirlo en un marco, llamémoslo contenido del boletín, y agreguemos un color de relleno como negro, y hagamos que llene el espacio disponible. Vamos a quitar el espaciado aquí y vamos a establecer un relleno superior y un relleno inferior de 128 píxeles y también alinearemos el contenido al medio. Ahora hagamos que este texto sea blanco y también este texto en blanco. Creo que alrededor del 90% debería hacer un truco. Entonces 90% de opacidad y en lugar de tener dos elementos separados aquí, ¿qué tal si simplemente lo combinamos en uno solo. Vamos a decir, suscríbase a nuestro boletín de noticias y eventos especiales y ahora podemos eliminar este bit para que luego con estos dos seleccionados en realidad vamos a convertirlos en un marco. Vamos a añadir un poco de espaciado, 64 píxeles deben hacer el truco. Quizás 95% de opacidad para este texto porque es un encabezado sobre un fondo oscuro y si recuerdo correctamente en el héroe donde también tenemos un encabezado sobre un fondo oscuro usamos 95% de opacidad. Entonces se trata sólo de mantener las cosas consistentes. Entonces en lugar de estos dos campos, ¿qué tal si usamos los que aquí creamos? Así que vamos a copiar este. Vamos a pegar eso en. En realidad eliminemos esto y también necesitamos un botón. Vamos a pegar eso también. Obviamente, no podemos ver nada en este momento porque está todo oscuro. Tan color negro sobre color negro. En realidad seleccionemos ambos y Shift A para agregarlos en su propio marco separado. Vamos a seguir adelante y cambiar los colores. En lugar de negro vamos a desvincular los colores de aquí. Vamos a usar blanco. Eso es mejor. Ahora vamos a cambiar la dirección de este marco a horizontal y vamos a cambiar el texto dentro del botón para suscribirse. Entonces cambiemos el cambio de tamaño a abrazar contenidos. El texto aquí es llenar contenedor. Este marco tiene un ancho fijo así que qué tal si lo configuramos para que también llene contenedor. En realidad vamos a mover el botón allí y vamos a establecer esto como contenido de abrazo y en realidad creo que un ancho fijo para esto sería mejor. ¿ Qué tal si hacemos estos 640 pixeles de ancho. Eso debería ser de mucho espacio para una dirección de correo electrónico y en realidad hagamos este contenedor de relleno para que se ajuste al espacio disponible allí. Eso debería hacerlo. Veamos sobre el botón aquí. Tenemos un poco de desalineación. El botón está alineado en la parte superior con el elemento frame. ¿ Qué tal si los alineamos en la parte inferior así? Creo que eso se ve mucho mejor porque tenemos una clara continuación entre esta línea aquí o el trazo o el borde del botón. Ese debería ser nuestro boletín y pie de página. Entonces, veamos por dónde empezamos. Este es el wireframe original y luego comenzamos a agregar algunas propiedades de tipografía cambiando la familia de fuentes, los tamaños de fuente, y también las alturas de línea, espaciamientos de letras, pesos de fuente, y así sucesivamente. Entonces agregamos un poco de color y luego esto es con lo que terminamos. Permítanme realmente esconder esto. Empezamos con cada sección y creamos el encabezado del menú superior, luego pasamos a la sección héroe, descripción del menú de comida, creamos el menú de comida junto con un menú de comida navegación, y luego llegamos a la sección sobre, la galería de imágenes de Instagram, y luego al contacto y finalmente en esta lección, creamos el formulario de suscripción y el pie de página y ese es nuestro terminado diseño o al menos mi versión de la misma. Espero que hayas terminado tu diseño también. Espero que hasta ahora no tuvieras ningún problema , y ojalá hayas aprendido algo útil en esta clase hasta ahora. Ahora, como he estado diciendo a lo largo de esta clase, sí te recomiendo trabajar a mi lado y crear tu propia versión del proyecto. Además, te recomiendo publicar eso en la galería de proyectos de clase porque otras personas pueden ver lo que hiciste, y si quieres también te puedo dar algunos comentarios. Ahora en este punto, podrías estar tentado a llamarlo un día y enviar el diseño a tu cliente o a tu desarrollador, pero el trabajo aún no está hecho porque un aspecto que es descuidado por mucho de personas es diseño receptivo o cómo se verá su diseño en varios tamaños de pantalla? Bueno, quiero contarles más sobre eso en la próxima lección. 24. Diseño para pantallas medianas: ¿ Qué pasa con un diseño web receptivo? Estoy seguro que la mayoría de ustedes han escuchado este término antes, pero por si acaso no lo han hecho, déjeme darles una guía rápida. diseño responsivo es la práctica de hacer que un sitio web o una aplicación web responda al comportamiento y entorno del usuario. En otras palabras, el diseño receptivo asegura que ese sitio web o aplicación web será utilizable en cualquier tamaño de pantalla, plataforma o orientación del dispositivo. Aquí hay un ejemplo. Tomemos la página web de figma.com. Actualmente, estoy usando la pantalla aquí, eso es 1920 por 1080. Una pantalla de escritorio típica. Y en el tamaño, así es como se ve el sitio web de Figma. Pero en cuanto comencemos a reducir la ventana del navegador para simular cómo se vería el sitio web en un dispositivo más pequeño, comenzarás a ver algunos cambios. Como por ejemplo, ahora algunas de estas imágenes se han convertido en ancho completo. Si vamos aún más lejos, verá que el menú desaparecerá, convirtiéndose en uno de estos menús desplegables o desplegables, y si vamos aún más lejos, verá que las imágenes están empezando a cambiar de tamaño automáticamente. El texto está empezando a ser más pequeño, como por ejemplo, en este rubro, e incluso más pequeño. Todo el sitio web adaptará su diseño y su topografía para que todavía se vea bien y sea utilizable en tamaños de pantalla más pequeños. De eso se trata un diseño web receptivo. Es asegurarte de que diseñes o creas una versión de tu sitio web que se va a quedar genial sin importar el medio ambiente. Entonces, ¿se muestra en una gran pantalla de escritorio como esta? O tal vez está en un paisaje o una tableta y retrato, o tal vez incluso un smartphone. Ese diseño necesita adaptarse. Espero que eso tenga sentido y que entiendas por qué diseño web responsive es un aspecto tan importante de cualquier sitio web o aplicación web. Ahora, el diseño que hicimos es para pantallas grandes. Empezamos con un tamaño de pantalla relativamente normal, pero ahora tenemos que asegurarnos de que se vea igual de bien en pantallas más pequeñas. Para ello se harán pequeños cambios a diversos elementos. Estos cambios van desde modificar la posición y tamaño hasta incluso ocultar ciertos elementos y mostrar otros. Ahora, vamos a crear el diseño receptivo para pantallas medianas. Debido a que se trata de pantallas relativamente pequeñas, necesitamos hacer bastantes cambios. Empecemos. Lo primero que haré en Figma es duplicar el marco llamado pantallas grandes y lo voy a cambiar el nombre a pantallas medianas. Para determinar qué cambios necesitas hacer, debes determinar en qué punto se necesitan cambios. ¿ Cuándo es el diseño lo suficientemente pequeño para que nos requiera hacer cambios? Lo que voy a hacer es simplemente cambiar el tamaño del marco padre y porque estamos usando el diseño automático y para todo el marco y todos los diferentes elementos en nuestro diseño están construidos con maquetación automática, esto hace es super simple para nosotros porque es realmente fácil ver los elementos se mueven en tiempo real ya que estoy auto-redimensionando este marco principal. Cuando llego a un punto en el que puedo ver claramente que, vale, algo anda mal con el diseño y necesitamos hacer algunos cambios. Bueno, ahí es cuando haremos el cambio. A partir de mis pruebas, he encontrado que alrededor 1400 píxeles es donde necesitamos agregar lo que se llama punto de ruptura. Ese es solo un punto en que necesitamos empezar a hacer cambios. El diseño que creamos aquí para pantallas grandes, esto es de 1800 píxeles. Este marco debe contener un diseño que sea adecuado para dispositivos con anchuras entre 1400 y 1800 píxeles. Espero que eso tenga sentido. Solo para hacer las cosas un poco más claras, cambiemos el nombre de esto a 1800 plus. Este diseño lo estará utilizando para tamaños de pantalla de 1800 píxeles y más. Las pantallas medianas, las estaremos utilizando para 1400-1800. El motivo por el que elegí 1400 es que, por ejemplo, en el héroe, este texto está empezando a ponerse un poco demasiado estrecho. Básicamente estoy mostrando dos, tres palabras por fila, y eso no es lo suficientemente bueno para propósitos de legibilidad. Además, esta sección aquí, se ve un poco demasiado ruidoso. Veamos los otros elementos. El menú. Este diseño aquí donde compensamos el contenido del menú. Funciona bastante bien en la pantalla más grande, pero aquí, no tanto. Prefiero usar el espacio disponible aquí. Porque de nuevo, el texto está empezando a ponerse un poco demasiado corto y así la página va a llegar realmente larga y quiero evitar eso. Además, probablemente nos mantengamos alejados de este menú, probablemente lo ocultemos completamente en pantallas medianas. Veamos qué más tenemos. Aquí hay otro tema con este diseño. Tenemos mucho texto aquí, pero la página ahora es mucho más pequeña, así que no tengo ese relleno superior e inferior que tengo aquí. El texto toca los bordes aquí, así que quiero arreglar eso también. Las fotos de Instagram, se encogían. Por supuesto, se hicieron más pequeños en términos de ancho, pero ahora son un poco demasiado altos. Idealmente, quiero mantener una relación entre anchura y altura cerca de algo que tengo aquí en las pantallas grandes. Tenemos que hacer estos un poco menos altos. Entonces es la sección de contacto. De nuevo ahora este mapa parece fuera de lugar porque es una relación extraña. Quiero hacer este ancho completo. El formulario podría ser un poco más pequeño. Recuerda, previamente agregamos mucho relleno derecho aquí porque teníamos mucho espacio para trabajar, pero aquí, ese relleno todavía existe y necesitamos deshacernos de él. Son cambios como este que definen un diseño web receptivo. Está pasando por los diversos anchos de pantalla y viendo lo que funciona y lo que no funciona en ese ancho particular y haciendo los cambios necesarios. Con este fotograma establecido en 1400 pixeles, empecemos a hacer cambios y comenzaremos con el héroe. Para solucionar este problema donde el texto aquí no tiene suficiente ancho, vamos a cambiar la dirección de los elementos héroe. En este momento se establece horizontal. Vamos a cambiarlo a vertical para que la imagen esté en la parte superior y el contenido esté en la parte inferior. Vamos, en primer lugar, cambiar el ancho de la imagen o el redimensionamiento para que se llenen los contenedores para que llene el espacio disponible. Entonces aquí, también saquemos a los guías. Voy a mantener las mismas guías de 64 pixeles y 128 pixeles, pero también tenemos algunas guías fuera de nuestro marco aquí, pero porque cambiamos el tamaño que ya no podemos verlas. En realidad vamos a crear algunas nuevas guías. Veamos. Vamos a colocarlos aquí mismo y otro, así que esto está a 64 pixeles del borde y éste. Veamos si puedo hacerlo visualmente. Si hacemos una medición rápida aquí, es 67. Pero en realidad podemos hacer un cálculo simple, por lo que 1400 menos 128, eso es 1272. Ahora sabemos que esta guía está exactamente a 128 píxeles del borde. Vamos a usarlos para asegurarnos de que estamos alineando los elementos correctamente. Ahora, seleccionemos este contenido héroe. Esto todavía está configurado en vertical, lo cual está bien. Es lo que queremos, pero vamos a añadir un poco más de relleno en la parte superior e inferior. El relleno lateral es justo lo que necesitamos, 128, pero en la parte superior, voy a sumar 96 y otra vez, 96 en la parte inferior. También vamos a asegurarnos de que esto esté configurado para abrazar el contenido para que redimensione junto con su contenido. Además, debido a que tenemos todo este espacio horizontal, vamos a convertir este diseño de una columna para el horario comercial en dos columnas. Este es un marco con diseño automático. Eso está bien. Cambiemos esta dirección. Vamos a establecer una brecha entre estas dos columnas a 64. Vamos a asegurarnos que estos estén configurados correctamente, alinear el centro. Eso es bueno. Además, esta guía aquí que usamos previamente para alinear el contenido del menú, bueno, ya no la necesitamos. Simplemente puedes seleccionarlo, y cuando esté azul, pulsa “Eliminar”. Ese es el primer cambio que hicimos en cuanto no tuvimos suficiente espacio para mostrar verticalmente esta información, mostrar horizontalmente esta información, cambiamos a una moda vertical. Ahora, el texto se muestra muy bien en dos filas. Es mucho más fácil de leer que lo que teníamos antes. A continuación, veamos sobre la sección, la descripción del menú de comida. En este tamaño de pantalla, no hay espacio suficiente para mostrar ambos elementos lado a lado porque el texto del encabezado simplemente se vuelve demasiado pequeño, y es el mismo problema que teníamos aquí . Está dividida en muchas líneas y es más difícil de leer, además, no se ve muy bien. Entonces la solución obvia es mostrar título por encima del texto bajo. En lugar de lado a lado, se van a apilar. Para eso sin embargo, necesitamos hacer un par de cambios porque aquí tenemos marcos anidados dentro de marcos porque teníamos un poco de un diseño complicado aquí con muchos rellenos agregados. Lo primero que haremos es seleccionar el marco padre, cambiar su dirección de diseño a vertical, establecer el espaciado entre elementos en, digamos, 64 píxeles. Entonces vamos a seleccionar cada uno, cada elemento y desagruparnos para deshacernos del marco. Después cambiaremos el cambio de tamaño para llenar contenedor y abrazar el contenido. Haz lo mismo por esto, llena los contenedores. Horizontalmente llena todo el espacio disponible y también abraza verticalmente los contenidos. Entonces es tan alto como su contenido. Eso se ve bastante bien. Pero este texto es probablemente un poco demasiado largo. ¿ Qué tal si agregamos algún relleno extra en este lado para que tanto los textos como el título sean un poco más cortos. Esto realmente mejora la legibilidad del texto. Volveremos a seleccionar el marco padre y para el relleno derecho, agreguemos algo un poco más grande, algo así como 400 o tal vez algo más pequeño. ¿ Qué tal 360? O algo que te quede bien. Para mí 360 hace el trabajo, así que sólo voy a mantenerlo así. Ahora, antes de seguir adelante, en realidad hagamos otro cambio para este diseño, porque a medida que el ancho de la pantalla se hace más pequeño, obviamente el contenido se hará más largo o más alto. En un dispositivo más pequeño tendrás que desplazarse mucho más. Por lo tanto, solo para que no hagamos esto en una página web súper larga. En realidad vamos a reducir el espacio entre elementos. Si recuerdas, en las pantallas grandes, usamos 240 pixeles. Lo hicimos aplicando 240 como espaciado entre ítems en el marco principal, el cual tiene maquetación automática. En pantallas medianas, vamos a disminuir un poco ese valor, algo así como tal vez 160. Eso se ve un poco mejor. A lo mejor algo un poco más grande, 176, que podría funcionar también. Ya se puede ver que al hacer eso, en realidad hemos ganado mucho espacio verticalmente. Además, no necesitas como toneladas y toneladas de espacios en blanco en una pantalla más pequeña. Funciona bien aquí en la pantalla grande, pero a medida que la pantalla se hace más pequeña y más pequeña, necesitamos preservar ese espacio vertical. Ahora, sigamos adelante. Hasta ahora hicimos el héroe e hicimos esta descripción del menú de comida. Veamos sobre el menú real. Primero lo primero, vamos a deshacernos de esta navegación. No lo necesitamos, y vamos a seleccionar la sección de hamburguesas y sándwiches, y digamos, quiero alinear la imagen con esta guía aquí y el texto también, pero quiero que sólo la imagen ir toda la longitud de la página en el lado derecho. Para ello, veamos, seleccionaremos el marco principal y luego iremos aquí y vamos a añadir 128 relleno a la izquierda. Eso debería ser. El resto del contenido sigue alineado correctamente porque tenemos el conjunto de relleno del diseño anterior. Eso se ve bien. Cuidemos las otras secciones. Veamos, filetes, vamos a ir 128, así, quickies, 128, y ensaladas, uno. Genial. Eso se ve bien. Ahora, pasemos a la sección sobre, y haremos algo parecido al héroe donde apilaremos la imagen y el contenido del texto. Seleccionemos el marco, cambiemos la dirección del diseño a vertical. Vamos a mover la imagen hacia arriba, vamos a cambiar para llenar contenedor. Voy a mantener la misma altura de 480, y esta sección, la voy a poner para llenar contenedor, abrazar contenidos, y voy a cambiar el relleno superior, abajo a 96, el mismo valor que usamos para la sección héroe. Observe que la imagen se hizo considerablemente más pequeña en este momento. Eso es porque necesito establecer esto a una altura fija. El contenido general o marco debe configurarse para abrazar contenidos así. Esa es la sección sobre, sigamos adelante. Fotos de Instagram. El único cambio que hará aquí es en la altura de estas imágenes. En este momento hay 480 pero vamos a cambiar esto a 400. Eso debería darnos una relación mucho mejor entre ancho y alto. A continuación, veamos sobre el formulario de contacto. Aquí las cosas son muy simples, necesitamos alinear esto y el mapa con nuestra guía, y necesitamos hacer que esta forma sea de ancho completo. Desde que he seleccionado esto, cambiemos realmente este valor a 128. Tienes que amar el diseño hueco, porque el marco del formulario estaba usando contenedor de relleno, solo llenó todo el espacio disponible y el espacio disponible acaba de ser más grande porque quitamos un gran trozo de ese relleno. Ahora, digamos de estos elementos. Aquí, vamos a cambiar esto a 128, y estamos listos para ir. Por último, nos ocupemos de esta sección aquí. El contenido del boletín, y aquí, en realidad no necesitamos hacer nada porque esto todavía se ve bien en pantallas medianas. Podrías hacerlo de ancho completo para que encaje entre esta guía y esta guía. Pero en lo personal no creo que necesite ningún cambio, así que lo dejaré así. Habrá que hacer algunos cambios cuando lleguemos a las pantallas pequeñas, pero en el medio, esto se ve muy bien. Hagamos un resumen rápido de lo que hicimos en esta lección en términos de diseño web receptivo, y en realidad voy a mostrar estos lado a lado, para que puedan ver los cambios que hicimos. En primer lugar, disminuimos el espaciado entre ítems en el mainframe. Teníamos 240 aquí, fuimos con 176, creo. Entonces cambiamos el héroe de este trazado horizontal a uno vertical, y cambiamos el horario comercial de un diseño vertical a otro horizontal solo para sacar el máximo partido al espacio disponible. También cambiamos esta sección de horizontal a vertical. Cambiamos el menú eliminando primero la navegación del menú y luego a eliminar también ese gran desplazamiento que teníamos en el lado izquierdo. Ahora, todo se alinea correctamente. ¿ Qué más? Vamos a seguir adelante. También cambiamos la sección sobre. Al igual que hicimos con el héroe, pasamos de un diseño horizontal a otro vertical. Después en la sección Instagram, cambiamos la altura de las fotos de 480 a 400. Después en el formulario de contacto, por supuesto hicimos el mapa más grande o aparecemos más grande al alinearlo con las guías. También hicimos que el formulario de contacto ocupe todo el espacio disponible cambiando o bajando el relleno que hemos establecido aquí. Esa es nuestra versión de diseño responsive para pantallas medianas. Como ya estás acostumbrado , es hora de practicar. Así que adelante y crea el diseño responsive para las pantallas medianas para obviamente tu versión del diseño. Una vez que hayas terminado, podemos seguir adelante porque en realidad estamos en la recta final. Estamos realmente cerca de la línea de meta, pero aún tenemos que cuidar las pantallas pequeñas o cómo se verá el sitio web en pantallas más pequeñas. Estos requieren la mayor cantidad de cambios debido al tamaño de esa pantalla. Vamos a encargarnos de eso en la próxima lección. 25. Diseño para pantallas pequeñas: cambio de la escala de la tipografía: A la hora de ajustar el diseño para pantallas pequeñas, hay bastantes cosas que tenemos que hacer. Necesitamos cambiar los tamaños de fuente, el diseño, y también introducir un nuevo elemento en forma de menú de superposición. Por eso vamos a dividir los ajustes de pantalla pequeña en tres lecciones. En ésta, nos encargaremos de los tamaños de fuente. Vamos. En primer lugar, volvamos a Figma y dupliquemos las pantallas medianas, diseñamos y renombramos a pantallas pequeñas. El rango que vamos a buscar es poco menos de 1,400 píxeles. Cualquier cambio que haga a este diseño se aplicará en pantallas que sean de 1,400 píxeles o inferiores. Para ver algunos de esos cambios, en realidad cambiemos el tamaño de la pantalla a un tamaño que es típico para una pequeña pantalla como un smartphone o algo así. Vamos por algo así como 540 píxeles, que es un tamaño bonito, bastante pequeño. Como se puede ver en este tamaño, tenemos muchas cosas que hacer. Los elementos sólo se superponen. No tenemos suficiente espacio para el texto del menú de navegación sea demasiado grande. El menú se ve todo raro. Tenemos muchas cosas que hacer. Pero en realidad, hagamos esto un poco más grande para que aún tengamos acceso a algunos de estos elementos. Sólo nos va a facilitar el trabajo. Ahora, como decía en esta lección, nos encargaremos de los tamaños de fuente porque aquí está la cosa. En una pantalla pequeña, realmente no deberías usar los mismos tamaños de fuente que estás usando en una pantalla grande. Porque en una pantalla grande tienes mucho espacio. Tienes mucha pantalla, bienes raíces, pero en una pantalla pequeña, ese no es el caso. Uno de los métodos que puedes usar para asegurarte de que todo tu contenido se ajuste y se muestre correctamente es reducir los tamaños de fuente. Si recuerdas de la lección de topografía, usamos una escala de tipo. Utilizamos este con un tamaño de fuente base de 21 píxeles. Si recuerdo correctamente, fue un cuarto perfecto. Veamos si los tamaños de fuente coinciden, 88, 66, 50. Éste fue base 21 ratio 1, 3, 3, 3. Ahora, lo que me gusta hacer por pantallas más pequeñas es mantener el mismo tamaño de fuente base pero cambiar la relación porque mira lo que sucede cuando cambias la relación a un solo paso más bajo. Los tamaños de fuente se bajan también, especialmente los grandes, el rubro uno, el rubro dos. Creo que esta es una gran manera de controlar la tipografía en un sitio web sensible. En pantallas pequeñas, solo haces que la fuente más pequeña cambiando la escala de tipos. Entonces vamos a duplicar este marco. Hagamos algo de espacio para ello aquí. En realidad llamemos a este tipo escala para pantallas pequeñas y superiores. Llamemos a este tipo escala, para pantallas pequeñas. Esta será la base 21, por lo que 21 pixeles. Este es el punto de partida, pero para la escala, vamos a usar este 1.250 o tercero mayor. Vamos a renombrar esto también. Ahora vamos a seguir adelante y cambiar los tamaños de fuente aquí. Veamos, tenemos 21 pixeles como base, vamos a mantener el 16 como reductor en la escala, por lo que 1624. Pero en los tamaños de fuente más grandes, tenemos los siguientes 26. Después 33, 41, 51 y 64. Ahora, voy a seguir adelante y cambiar los tamaños de fuente aquí también, así que 26. Mientras estoy en ello, también voy a cambiar las alturas de la línea. Mantengamos esto a los 40, 33. Vamos a fijar esto en 48. Esto es 41. Si te estás preguntando por qué estoy eliminando ese valor de altura de línea y configurándolo en auto, bueno, cuando está en auto, y hago clic en él, Figma lo calcula automáticamente para mí en función de una relación preestablecida. Puedo usar ese valor de 62 o puedo añadir el mío propio. En este caso, creo que sólo voy a sumar el mío propio, así que probablemente vayamos con 56. Mientras estoy en ello, también voy a actualizar el texto aquí. El siguiente es 51. Cambiemos esto a 72. Por último éste es 64, y vamos a cambiarlo a 80 por la line-height así. Ahora que tenemos los nuevos tamaños en su lugar, vamos a seguir adelante y aplicarlos a nuestra página, y para hacerme un poco más fácil, solo voy a hacer una captura de pantalla de estos valores y voy a anclar a mi pantalla. Algo así. Pasemos a nuestro diseño para las pantallas pequeñas. Por cierto, si te estás preguntando cómo puedo hacer esto, es una aplicación en macOS llamada Clean Shot. Veamos sobre la topografía. Básicamente lo que tenemos que hacer aquí es cambiar el valor antiguo con el nuevo valor. Ahora que digo eso, creo que también necesitamos saber qué se trataban los viejos valores. Hagamos una captura de pantalla de esto también. También anclemos las capturas de pantalla, así que vamos a organizarlo un poco aquí. También puedo cambiar el tamaño de estos. Voy a tener el valor antiguo y luego los nuevos valores aquí mismo. Ahora pasemos por el diseño y cambiemos estos valores en consecuencia. Este texto aquí, esto es 16 se queda igual. El de navegación 21, se mantiene igual. Éste, 88,104, este es el H1. Cambiémoslo a 64 y 80. Esto es 28 y 40. Veamos la posición 3 aquí. Tenemos que cambiarlo por 26 y 40, así. Siguiente 66, 80, eso es un H2. Cambiémoslo a 51, 72. Al igual que así. Se trata de un párrafo, por lo que se mantiene igual. Esto y como estamos en ello, esto es de nuevo 66, 80. Tenemos que cambiarlo por 51, 72. Al igual que así. Éste está usando el estilo así 37, 48. El número 4 aquí en la lista. Tenemos que cambiarlo con 33, 70 o 48, por lo que 33. Éste y esto, vamos a seleccionar en realidad todos estos. Solo estoy manteniendo pulsado Comando y Mayús para seleccionar todos estos elementos. Estos están utilizando 28, 40. El número 3 aquí, vamos a reemplazar por 26, 40. No nos vamos a molestar con estos, pero aún necesitamos. Vamos a seleccionar este estilo Copiar propiedades. Seleccione esto, y esto, y esto, pegue propiedades para aplicar los nuevos tamaños de fuente. Ahora, seleccionemos ambos y esto y cambiemos estos dos, 51, 72. Se trata de texto regular, mantiene el mismo estilo. Esto también. Éste, 51,72 también ahí, y el resto debería ser más o menos lo mismo excepto tal vez éste. 37,48, cambiémoslo a 33, 48. Eso debería ser. Como resumen rápido, lo que hicimos aquí fue usar una escala de tipo diferente. Ahora podemos realmente deshacernos de estas capturas de pantalla. Cambiamos de usar una relación de 1.333, a una relación de 1.250, lo que en realidad hizo que los tamaños de fuente fueran más pequeños en pantallas pequeñas. Con base en estos nuevos valores, acabamos de seguir seleccionando todos los elementos de texto y cambiamos los tamaños de fuente donde necesitábamos. Esto, como ya puedes ver, ha tenido un gran impacto en el tamaño general de nuestra página. Porque a pesar de que esto es mucho más pequeño que esto, es casi igual en altura. Por supuesto que se hará más grande o más alto porque comenzaremos a apilar algunos elementos. Pero cada poquito ayuda. Cambiar la topografía o los tamaños de fuente en pantallas pequeñas es definitivamente algo que recomiendo encarecidamente. Ahora te toca cambiar la escala de tipos y aplicar los nuevos tamaños de fuente a tu versión del diseño. Si ya lo has hecho, genial, estás listo para seguir adelante. Pero si no lo has hecho, debes seguir adelante y hacerlo ahora mismo para que estemos en el mismo nivel en cuanto al progreso con nuestro diseño y también asegurarte de nuestro diseño y también asegurarte que entiendes por qué estamos haciendo esto. Traté de explicarlo lo mejor que pude en el video. Pero si aún no entiendes por qué necesitamos hacer estos cambios en un diseño receptivo. Entonces me deja caer una línea en el área de discusión y voy a tratar de explicarlo de alguna otra manera. Ahora, cuando estés listo, te veré en la siguiente lección donde cambiaremos el diseño de nuestro sitio web en pantallas pequeñas. 26. Diseño para pantallas pequeñas: cambio del diseño: El siguiente paso para adaptarse o diseñar a pantallas pequeñas es cambiar el diseño, y el mayor cambio aquí es mover todo a un diseño de una sola columna. Debido al tamaño de la pantalla, rara vez es el caso donde puedes caber dos columnas de contenido. Es por eso que cuando abres un sitio web en tu teléfono, típicamente, verás que todo está apilado uno encima de la otra en una sola columna. Vamos a seguir adelante y hacer eso también. Empecemos desde arriba. Debido a que estamos tratando con pantallas pequeñas, observe que a medida que estamos llegando a un tamaño más pequeño y menor, estos elementos se superponen. algo inteligente aquí y deshámonos de esta área por completo, y en lugar de moverla en su propio contenedor de superposición, que crearemos en la siguiente lección. Básicamente, quiero reemplazar este contenido el logo y un pequeño ícono para el menú, y la idea es, cuando hacemos clic en ese icono del menú, vamos a conseguir un pop-up o algún contenedor de superposición mostrando el menú y también esta información que estamos eliminando de aquí, porque aquí hay un consejo rápido, cuando estás creando diseños receptivos o versiones receptivas para tu diseño, está bien eliminar ciertos elementos, pero la mayoría de las veces, querrás traer esos de vuelta, sobre todo elementos críticos como la navegación. En nuestro caso aquí, en una pantalla muy pequeña, la navegación es demasiado larga, por lo que la eliminaremos de este diseño, pero lo agregaremos posteriormente en un elemento separado que se abrirá bajo demanda. Vamos a seguir adelante y hacer eso. Voy a quitar esto. También voy a copiar el logo y quitar este bit. En realidad voy a cambiar el nombre de esto para, bueno, en realidad, podemos mantenerlo como barra superior. Está bien. Voy a pegar en el logo, pero lo voy a hacer más pequeño. Cambiemos su altura a 48 píxeles, algo así. Esta debería ser lo suficientemente buena altura para una pantalla pequeña como un smartphone. Todavía se puede ver el logotipo con claridad, pero no ocupa demasiado espacio. Pasémoslo entonces a ese lado. Deshaznos de estos elementos. Además, agreguemos aquí un ícono más para servir como icono de nuestro menú, y voy a abrir el icono configurado de nuevo, y voy a buscar Lista bajo icono de bootstrap. Esta es la que vamos a usar. Vamos a seguir adelante y añadirlo a nuestra página. Así como eso. Acabo de pegarlo con la barra superior seleccionada, y también cambié el tamaño a 32 píxeles. Ahora simplemente puedo quitar los iconos sociales. No los vamos a necesitar ahora mismo, y también me aseguré de que nuestra navegación esté usando el color negro. Al hacer eso, me aseguro de que incluso en las pantallas más pequeñas, todavía obtengamos un buen diseño para nuestro encabezado. Ahora, aquí un par de cambios. En primer lugar, el relleno, arriba y abajo, vamos a aumentar eso un poco porque ahora solo tenemos un solo elemento. También quitemos esta guía porque ya no la vamos a usar, y también desagruparemos este elemento, el héroe con la barra superior para que nos deshacemos de esta brecha entre ellos. Vamos a cambiar A y llamémoslo encabezado y héroe, y eliminemos por completo el espacio entre ellos. Vamos a seguir adelante. Seleccionemos el fotograma principal y cambiemos el espaciado entre ítems de 176 a 128, así, y como puedes ver, tenemos algunas cosas muy raras pasando aquí. En realidad me pregunto por qué esto se pone al revés. Es tan raro. Vamos a darle la vuelta. Pero llegaremos a eso en un poquito. Hagamos este contenedor de llenado. Hagamos este contenedor de llenado, y hagamos este contenedor de llenado así. Vamos a redimensionarlo a por ahí. Ahora, veamos sobre esta zona de héroes. En realidad podemos aumentar el tamaño de esta imagen a unos 480. Algo como esto, y por lo que va esta sección, vamos a fijar en altura para ser abrazar contenidos y echemos un vistazo al contenido del héroe, donde voy a cambiar el relleno izquierdo y derecho a 64 pixeles. Eso va a alinearse adecuadamente con esta guía. Esto va a tener exactamente el mismo espacio a la izquierda y a la derecha. Estos dos serán los mismos, pero también alinearán todo a la izquierda, así, y esto asegurará que esté alineado a la izquierda. Simplemente tiene más sentido así en una pequeña pantalla para que todo esté muy bien alineado a la izquierda. También seleccionemos estos dos, alinearlos a la izquierda así, y supongo que si queremos ahorrar un poco más de espacio, podemos cambiar el relleno aquí a 64. Va a ser 64 por todas partes. Realmente depende de ti. Creo que aún 96, se ve bien porque esta es una sección bastante importante, y no quiero que se vea demasiado abarrotada, pero como dije, depende de ti. Ese es el héroe. Son cambios muy, muy simples. Como se puede ver ahora, si redimensionamos incluso a un tamaño muy pequeño, todavía se ve bastante bien. Veamos sobre esto, la descripción del menú de comida. En primer lugar, vamos a cambiar a abrazar contenido, llenar contenedor. Asegúrate de cambiar los paddings aquí a 64. Esto se vuelve al revés otra vez. Probablemente algún bicho en Figma. Vamos a darle la vuelta atrás, y eso debería ser. Para éste, solo cambiamos el relleno. Siguiente. Veamos sobre el menú, y el mayor cambio para el menú aquí será que vamos a apilar o usaremos un solo diseño de columna porque ahora mismo en dos columnas, como se puede ver, el texto es un poco poco demasiado abarrotado. Es un poco demasiado corto para una legibilidad adecuada. Vamos a seguir adelante y hacer eso. En primer lugar, seleccionaré el menú de comida y en realidad cambiemos la distancia entre los artículos o el espaciado a 96 solo para ser un poco más cautelosos con el espacio que estamos usando. Después en los filetes, también cambiemos esto a 96 y esto a 64, y luego en los platillos, notemos que tenemos una columna y dos columnas. Bueno, ya no necesitamos eso, así que vamos a desagruparnos, y desagruparemos la columna 2 también. Ahora los platillos solo se mostrarán uno apilados encima del otro. Ahora hagamos realmente un par de cambios aquí. También debemos agregar un relleno al lado derecho. Creo que tenemos un poco demasiada distancia entre los platillos. ¿ Qué tal si lo cambiamos a 64, algo así? Eso se ve bastante bien. Podemos intentar complicar esto un poco más al crear espacios separados entre el título del bistec y el primer ítem. Pero creo que esto se ve bien como está. Probablemente sólo voy a cambiar el tamaño de esta imagen para ser 480 porque era un poco demasiado alta. Eso se ve bastante bien. Hagamos eso también en las otras secciones. 96, espaciado aquí, 64, y 64 relleno izquierdo y relleno derecho. Entonces también tenemos el contenido, vamos a cambiar eso, y luego para los platillos, también tenemos la columna 1 y la columna 2. Vamos a seguir adelante y Desagrupar y Desagrupar también, y luego debajo de los platos, vamos a asegurarnos de que todo esté listo en vertical. Cómo contenidos en el padre. 64 pixeles, relleno a la derecha. 64 píxeles de distancia entre estos, y luego cada plato realmente necesita ir toda la longitud. ¿ Por qué no está haciendo eso? Veamos. Cambiemos esto a 480. Hamburguesas y sándwiches, aquí es donde aplicamos 64 y 64, y luego el contenido no tiene ningún relleno. Eso es correcto, y luego los platillos, de ahí venía el relleno extra. Esa es la segunda sección de menú. Hagamos lo mismo por los demás, exactamente lo mismo, 96, 64 y 64. Entonces platillos de nuevo, los tenemos en columnas, así que vamos a desagruparnos dirección puesta a vertical, abrazamos contenidos 64 entre cero aquí, y eso debería ser para esta sección, y finalmente, para ensaladas, dejemos de las columnas. Quiero seleccionar el elemento principal. Vamos a usar 96 ahí y 64, y 64 aquí a la derecha, y vamos a cambiar esta imagen a 480 de altura. ¿ Cambiamos éste? No, no lo hicimos. Hagamos eso ahora, y creo que eso es todo. Casi. En realidad nos faltan algunos de estos separadores. Déjame volver arriba y ver exactamente lo que nos falta. Porque recuerda cuando estábamos usando columnas, el último elemento de una columna no tenía un separador debajo de él. Obviamente, cuando nos deshicimos de las columnas, algunos de estos elementos se quedan sin un separador. Simplemente dupliquemos y posicionemos el separador donde necesite. Veamos, necesito otro aquí. Para los quickies, necesitamos otro, y para las ensaladas, necesitamos uno más así. Ahora, en realidad tenemos algo de espacio extra aquí. Veamos de qué se trata todo eso. Este es el menú de comida, y está listo para abrazar el contenido. Uno de sus contenidos es demasiado grande. Veamos cuál. ¿ Ensaladas? En realidad, las ensaladas están configuradas para abrazar contenidos por lo que no es eso. Quickies? Todos ellos están configurados para abrazar contenidos pero todavía es probablemente en ensaladas. Veamos, sí, los platillos aquí. Altura fija en lugar de contenido de abrazo. Entonces vamos a cambiar eso y todo es donde debería estar. Aquí hay un error tipográfico. Ese es el menú. Acabamos de pasar de dos columnas en pantallas medianas a una columna en las pantallas más pequeñas y también cambiamos la altura de las imágenes y también jugamos alrededor con diferentes paddings o espaciado entre elementos. Ahora, sigamos adelante, estamos muy cerca de terminar esto. El sobre la sección. Aquí en realidad, no creo que necesitemos hacer nada. Mantendré el mismo tamaño de imagen, espaciado es correcto, o en realidad, no, en el contenido del héroe cambiaremos el relleno aquí de 128 a 64. Ahora, está alineando correctamente. A continuación, veamos fotos de Instagram. Esto es un poco más complicado. En primer lugar, seleccionemos esto, cambiemos el relleno, y ahí es donde empezamos, y luego cambiaremos la dirección de horizontal a vertical. Cambiemos la distribución a empacada, alineemos todo a la izquierda. Vamos a cambiar a abrazar contenidos y vamos a establecer una distancia o espaciado entre elementos de 64. Hagamos también este botón de ancho completo , así que llene el contenedor. Alinearemos todo en el medio y estamos listos para ir. También reduzcamos el espacio entre la galería de fotos y el título. En lugar de 128, vamos a establecer 96, y en lugar de diseño de tres columnas, que podría no ser utilizable en ciertos anchos, hagamos un diseño de dos columnas. Pero en realidad éste, se debe configurar para llenar contenedor así. Diseño de dos columnas para las fotos en lugar de tres columnas. Veamos cómo podemos hacer eso. Tenemos algunas imágenes y están organizadas en filas. Es bastante simple. Solo necesitamos duplicar una fila, y simplemente mover las imágenes alrededor. Voy a eliminar, o en realidad, voy a mover éste de la Fila 1 a la Fila 2, y voy a eliminar ésta y eliminar ésta, y ahora deberíamos tener imágenes distintas. Ahora, elimine este también, y ahora deberíamos ser buenos. Además, vamos a cambiar la altura de estas imágenes a 240 píxeles, así. Este es un diseño mucho más apropiado para una pantalla pequeña. Entonces, pasemos al contacto. Cambiemos el espaciado aquí a 96. Esto está bien, vamos a cambiar el relleno a 64. Si lo desea también puede agregar 64 aquí. Si no quieres que el mapa vaya a ancho completo, en mi caso, creo que simplemente voy a ignorar eso. Además, hagamos el mapa un poco más pequeño 480, y veamos qué podemos hacer con estos dos elementos. ¿ Qué tal si movemos esta barra lateral a la parte superior aquí y vamos a deshacernos de ese relleno ahí mismo, y vamos a establecer su dimensionamiento para llenar el contenedor. En realidad agreguemos un relleno de 64 píxeles a la derecha para que cuando lo cambiemos de tamaño o redimensionemos el padre, todavía tenemos algo de espacio que queda aquí en el lado derecho. Vamos a asegurarnos de que el espaciado sea correcto y lo es. En realidad seleccionemos este marco y cambiemos el espaciado entre el icono y el texto a algo un poco mejor, como 32, así. Entonces entonces tenemos el mapa y luego el formulario de contacto. Agreguemos algún relleno a la izquierda y a la derecha. Cambiemos el espaciado a 96, y ahora que lo veo, en realidad no necesitamos dos fotogramas aquí. Sólo tenemos que asegurarnos de que el espaciado sea correcto, pero podemos subagrupar esto y solo tener el único marco al que vamos a establecer como contenedor lleno 64, relleno 64 de nuevo, y eso debería ser para el sección de contacto, y por último, veamos sobre el pie de página y el boletín. En primer lugar, el pie de página debe estar configurado para llenar todo el contenedor, y en realidad lo coloquemos en un marco para que pueda agregarle algún relleno , 64, 64. Vamos a establecer eso para llenar contenedor y asegurarnos que el texto esté alineado a la izquierda, y luego para el boletín, cambiemos el relleno superior e inferior a 96, y luego el lado de encuadre, vamos a cambiarlo para llenar contenedor. Añadamos un poco de relleno aquí a 64, y veamos nuestro texto. Llena el contenedor, así que eso es bueno. Pero éste, la forma no. Entonces, ¿qué tal si hacemos que uno llene el contenedor y luego vamos a ver éste la entrada también debe llenar el contenedor. El botón está configurado para abrazar contenidos, por lo que sólo va a ser tan grande como el texto dentro de él pero la entrada, puede crecer o puede encogerse así que voy a configurar eso como contenedor de relleno. Ahora, si redimensiono la pantalla, este es el comportamiento que tiene que es exactamente lo que queremos. Por último aquí en el pie de página, tenemos algunas distancias o algún espaciado que es un poco demasiado grande así que vamos a cambiar eso a 96, y 96 para esto, y eso es todo. Eso es todos los cambios de diseño que harán a la versión receptiva del sitio web en pantallas pequeñas. Echemos una mirada más rápida a lo que hicimos en comparación con las pantallas medianas. En primer lugar, quitamos la barra superior donde en realidad reemplazamos su contenido con el logo y un icono de menú. Nos deshacemos de estos elementos, la dirección, los iconos de las redes sociales, y la navegación, pero los añadiremos posteriormente en otra forma. Fusionamos estos elementos aquí por lo que el encabezado con el área héroe, nos alineamos a la izquierda prácticamente todos los elementos de la página. También disminuimos el espaciado entre ítems a nivel global o en el nivel superior de 176-128. Entonces también cambiamos un poco el menú. Pasamos de dos columnas para los elementos del menú a una columna. También hicimos las imágenes un poco más pequeñas en altura, y también globalmente pasamos de tener un espaciado de 128 píxeles entre los ítems y el borde izquierdo y derecho a una distancia o espaciado de 64 píxeles, y esto solo permite que el contenido crezca un poco más horizontalmente por lo que va a ocupar generalmente un poco menos espacio verticalmente. Hicimos lo mismo por la sección sobre. En la sección de fotos para Instagram, realmente apilamos el título y el botón de seguir, y migramos de un diseño de tres columnas a un diseño de dos columnas para la galería de fotos. Entonces en el contacto, realidad movimos algunos elementos alrededor. Tomamos la barra lateral desde aquí y movimos por encima del mapa. También hicimos que el formulario de contacto fuera de ancho completo, y luego aplicamos algunas opciones de cambio de tamaño inteligente al formulario de suscripción para que redimensione automáticamente dependiendo del tamaño de la pantalla, y eso es todo. Ahora, es tu turno. Adelante y crea la versión responsive para pantallas pequeñas para que estemos en la misma página. Ahora, acabas de ver que al cambiar el diseño, realmente nos deshicimos de algunos elementos bastante importantes en nuestro diseño, como la dirección, los iconos sociales, y la navegación que es la grande. Por lo que necesitamos una forma de agregarlos nuevo para que sean accesibles para el usuario. Hará eso con un menú de superposición y eso viene en la siguiente lección. 27. Diseño para pantallas pequeñas: crear el menú superposición: Es increíble que llegaste tan lejos, Lección 27. Ha sido un largo viaje, pero casi estamos al final. Todo lo que tengo que hacer ahora es crear el menú de superposición para las pantallas pequeñas, y ya hemos terminado. Vamos a seguir adelante y hacer eso. Esta va a ser una tarea realmente simple y el menú de superposición es básicamente un contenedor que se va a mostrar cuando hacemos clic en este ícono de Menú en pantallas pequeñas porque hemos escondido el navegación y toda esta información, necesitamos una manera de volver a ponerla para que sea accesible para el usuario. Cuando hacemos clic en este botón, simplemente nos deslizaremos hacia abajo un contenedor que contenga toda esta información. Vamos a crear un nuevo marco aquí, no importa qué tamaño, solo hazlo alrededor, no sé, 600 píxeles tal vez. Simplemente manténgalo por debajo de 1,400 pixeles. Entonces vamos a nombrar este pequeño menú de pantallas, modal/superposición. Copiemos la barra superior, necesitaremos eso. También apliquemos un diseño automático a este marco para que esté configurado en contenido de Hug. Vamos a quitar el espaciado ahí. Entonces, ¿qué necesitamos mostrar? Bueno, necesitamos básicamente estos. Necesitamos los iconos sociales así que empecemos con esos. También necesitamos la navegación del menú para que copie eso y vamos a pegarlo. La navegación debe ir primero, los iconos sociales a continuación, y estos estarán al final. Así es como vamos a hacer eso. En primer lugar, seleccionemos estos tres, debería decir y “Shift A” para crear otro marco. Agreguemos un espaciado de 96 píxeles entre ellos. Vamos a fijar el relleno en 64, algo así. Vamos a establecer el cambio de tamaño en este elemento a Rellenar contenedor. Entonces seleccionemos el Menú, cambiemos su dirección a vertical, y vamos a establecer ese en Rellenar contenedor. A continuación, seleccionemos estos iconos. En realidad porque estamos diseñando aquí para pantallas pequeñas donde lo más probable es que uses tu dedo para tocar elementos, aumentemos el tamaño de los iconos a 32 en 32. Después con ella seleccionada, vamos a establecer el cambio de tamaño a Rellenar contenedor. Cambiemos la distribución a Espacio entre para que estén bien mostrados con una cantidad igual de espacio entre ellos. Por último, seleccionemos este bit hagámoslo vertical también, 32 pixeles se ve bastante bien, configurarlo a Rellenar contenedor, y eso debería ser. No olvidemos cambiar el icono aquí así que en lugar del icono del menú, vamos a mostrar una x Volviendo a nuestro icono configurado, veamos, ¿tengo una x aquí para cerrar? Deberíamos y lo hacemos. Vamos a agarrar esta x aquí y lo pegaremos. Vamos a asegurarnos de que nuestro color sea negro y también se vea un poco más pequeño en comparación con el icono del menú así que aumentemos ligeramente su tamaño a 40 píxeles, así como eso. Vamos a quitar eso y creo que deberíamos ser buenos para ir. Vamos a probar la capacidad de respuesta si cambiamos el tamaño esto, no, algo anda mal. Esto debe establecerse en Rellenar contenedor. Ahora se está mostrando correctamente. Veamos, también estos deben establecerse en Rellenar contenedor, esto también, y el marco padre. Ahora también deberían redimensionar, pero no lo hacen así ¿qué está pasando aquí? ¿ Por qué no son esos redimensionamiento? Veamos, Frame 27, 64 pixels, Rellenar contenedor, por lo que eso es correcto. Este es Frame 3 y esto está configurado para Rellenar contenedor. Tenemos un marco adicional en el interior, así que vamos a configurar ese contenedor de relleno. Eso es bueno. Ahora todo debería mirar como se supone que debe. Ese es el menú de superposición, contiene información que es muy importante para la usabilidad de nuestro sitio web como la navegación. Es accesible solo en pantallas pequeñas cuando hacemos clic en el icono Menú. Esto es en realidad algo que mucha gente descuida cuando están diseñando, solo van a poner aquí este ícono de Menú y van a enviar su diseño al desarrollador, pero el desarrollador no sabe qué pasa cuando hago clic en este icono de Menú porque si no has diseñado el modelo, el menú de superposición, como quieras llamarlo, el desarrollador no sabe qué poner en él o cómo debería verse. Así que cuando estés creando versiones receptivas para tu sitio web y estés manejando las pantallas pequeñas, asegúrate de que también estás diseñando para cualquier elemento que pueda aparecer después de una interacción con el usuario como haciendo clic en un botón, ¿abrirá eso algún tipo de elementos, una ventana, un modal? Si lo hace, asegúrate de que tu diseño lo tenga en cuenta. Entonces hagamos un resumen final para ver dónde empezamos y dónde terminamos. Empezamos con el marco de cables. Eso es sólo una representación de baja fidelidad del diseño. Después iniciamos el proceso de diseño agregando tipografía, algunos colores, y luego creamos el diseño final para pantallas grandes, es el que puedes ver aquí mismo. Entonces por supuesto tuvimos que dar cuenta de pantallas más pequeñas y pantallas medianas. En cada uno de estos, hicimos diversos cambios. Movimos elementos, los hicimos más pequeños, cambiamos los tamaños de fuente. Pasamos de dos columnas a una columna. Pasamos de diseños horizontales a diseños verticales y así sucesivamente y así sucesivamente. Al hacer esto, nos aseguramos de que nuestro diseño se vea muy bien en cada tamaño de pantalla. Bueno, encomio, supongo que también terminaste el diseño y ahora tienes un completo diseño de página web de restaurante de una sola página junto con todas las adaptaciones necesarias a tamaños de pantalla pequeña y mediana. Trabajo bien hecho y como decía, ha sido un largo viaje, pero también ojalá uno muy informativo para ti y que aprendiste algo útil. Ahora, por favor echa un vistazo a la lección de conclusión para mis pensamientos finales y también un anuncio que podría interesarte. Te veré ahí. 28. La conclusión épica: Has terminado la clase, grandes felicitaciones y muchas gracias por tener la paciencia de pasar por 28 lecciones. Ahora, tal vez te estés preguntando qué debes hacer a continuación. En primer lugar, debes trabajar en el proyecto de clase. Si has estado trabajando a mi lado mientras estás viendo la clase, eso es increíble. Pero si no lo has hecho, creo que realmente deberías hacer los proyectos de clase así que mira nuevo e intenta seguir mi ejemplo, por así decirlo. Si me estoy ocupando de otras secciones en el diseño, adelante y haz eso también hasta que te pongas el cuelgue de ella y te pondrás mucho más cómodo trabajando en Figma. La idea aquí es simplemente practicar. En segundo lugar, te animo a que publiques tu diseño en la galería de proyectos de clase. Como se puede ver en mis otras clases de diseño de Figma, muchos estudiantes presentaron su trabajo en la galería del proyecto y ofrecí retroalimentación para cualquiera que quisiera eso. Creo que esta es una gran manera de aprender porque se llega a practicar e inmediatamente se sabe lo que puede mejorar. También hubo proyectos que requirieron muy poca o ninguna retroalimentación de mi parte. Fueron tan buenos y no estoy hablando de copias exactas de mi trabajo. Me refiero a proyectos que se basaban en mi trabajo, pero tenían su propio estilo lo que me hizo súper feliz de ver. También me mostraron una forma diferente de mirar un proyecto como este, lo cual fue fantástico para mí como instructor. Te recomiendo que hagas lo mismo. Adelante y publica tu proyecto, aunque no sientas que sea lo suficientemente bueno, aunque solo seas principiante porque todos somos principiantes en algún momento. Ahora, me gustaría invitarlos a revisar mis otras clases aquí en Skillshare y al momento de esta grabación, realidad tengo otra clase de diseño de Figma publicada. Es similar a éste pero más corto, y también cubre un tipo diferente de diseño. Puedes hacer una landing page para ser más precisos. Utilicé un flujo de trabajo ligeramente diferente en ese así que si quieres explorar más opciones sobre cómo trabajar de manera más eficiente, es posible que quieras echar un vistazo a esa clase también. Además, dependiendo de cuándo estés viendo este video, podría tener aún más clases publicadas en Skillshare así que asegúrate de revisar mi perfil para ver todo lo que he publicado. Ahora, durante esta clase, te he estado burlando un poco un anuncio que iba a hacer en la conclusión, así que aquí está. Mi próxima clase de Skillshare será sobre la codificación de la página web del restaurante birdhouse que diseñamos en esta clase. Esta clase se trata de diseñar. El siguiente será sobre codificar ese diseño usando HTML, CSS y JavaScript. Genial. Espero que estés tan emocionado como yo por la nueva clase y voy a compartir más detalles medida que me acerco a completarla. Asegúrate de seguirme aquí en Skillshare así como en mis redes sociales. Con eso dicho, es hora de dar muchas gracias por ver esta clase y espero verte en la siguiente. Cuídate y estar a salvo. Ya estoy cerrando la sesión.