Diseña con Figma: página de inicio para aplicación móvil

1. ¡Hola!: ¿ Alguna vez quisiste diseñar una página web pero no sabías por dónde empezar? o tal vez sí empezaste, pero te quedaste atascado en algún momento porque no sabías escoger los colores adecuados, tipografías, o cómo crear un buen diseño. Bueno, esto es lo que aprenderás en esta clase. Pero oye, si sólo nos estamos reuniendo, mi nombre es "ADI PURDILA” y soy diseñadora web de Rumania. Llevaba más de diez años trabajando en este campo, y también llevo un par de años dando clases. El diseño web ocupa la mayor parte de mi tiempo, pero sí me encanta simplemente alejarme de él de vez en cuando y trabajar en un jardín, con mi familia, o hacer algo de carpintería. De lo que hago me gusta, el teclado y el ratón, también soy un tipo de chico bastante práctico. Ahora, juntos, vamos a diseñar una página de aterrizaje para una aplicación de presupuestos. Empezaremos a partir de un breve proyecto y un marco de alambre. En cada lección les mostraré cómo abordar un paso diferente de este proceso. Empezará definiendo colores, Tipografía, e Imágenes. Después diseñaremos en una sección de la página a la vez. Por lo que en la línea de meta terminará con esta página de aterrizaje completa con secciones para características, galería, testimonios, y precios. Para esta clase estaremos usando F-I-G-M-A. Esto es gratuito y multiplataforma, por lo que puedes usarlo en Windows y Mac OS. Y puedes abrirlo directamente en tu navegador. Ahora bien, al tomar esta clase, garantizo dos cosas. Número uno, aprenderás a trabajar en F-I-G-M-A, y número dos, aprenderás un eficiente proceso de diseño de una página web en base a una solicitud del cliente. Esta clase es para principiantes completos, no necesitas ninguna experiencia previa en diseño, y te guiaré a través de cada paso del camino. Entonces, empecemos. 2. Tu proyecto de clase: Hola y bienvenidos a la primera lección de esta clase donde te daré una mirada más profunda a lo que estaremos creando.También repasaremos los proyectos de clase para que veas lo que necesitas crear al tomar esta clase.También aprenderás por qué yo eligió este proyecto, cómo podría ser beneficioso para ti y también lo que debes hacer para empezar. Empecemos. Esta es la última página de aterrizaje que va a estar creando.Como decía en el video de introducción, esto es para una aplicación de presupuesto móvil. Ahora esto es por supuesto, un producto ficticio. Estas imágenes aquí son solo marcadores de posición, hay imágenes de demostración tomadas de un kit de interfaz de usuario. Pero déjame guiarte rápidamente a través de lo que tenemos. En la parte superior, comenzamos con un área de héroes que cuenta con una selección de capturas de pantalla de la app, así como nuestra navegación y contenido. Desplazándose hacia abajo, encontramos la primera sección, cuatro entidades, donde cada entidad se muestra de esta manera de cuadrícula. Después tenemos una segunda sección, cuatro características. Pasando adelante. Tenemos un pequeño llamado a la acción.Eso es seguido de la tercera sección cuatro características.Luego tenemos una galería de capturas de pantalla que va seguida de testimonios.Por último, tenemos la llamada principal a la acción y tabla de precios.Al final, tenemos una pie de página. Esto podría parecer mucho trabajo.Pero tomaremos las cosas paso a paso, descompondremos esta página en trozos más pequeños y manejables. Haremos una sección a la vez.Verás que realmente no es tan complicado crear algo como esto. De acuerdo, así que ahora para el proyecto de clase, tu tarea será crear una página de aterrizaje a partir de este marco de cable. Te voy a mostrar esto en un rato. Este es el mismo alambre-marco desde el que empiezo. Tendrás que hacer lo mismo para terminar con esto. Ahora bien, tu producto final no tiene que lucir exactamente igual que el mío. Te voy a mostrar una forma de hacerlo. Obviamente puedes seguir exactamente lo que hago y terminar con un resultado idéntico. Eso está totalmente bien. Pero sí te animo a experimentar un poco y ponerte tu propio giro en las cosas. Por ejemplo, es posible que desee utilizar un conjunto de colores diferente o puede que desee utilizar un conjunto diferente de tipos de letra, tal vez organizar los elementos de manera diferente en la página. Te voy a dar todas las herramientas que necesitas para hacer eso y te voy a mostrar cómo usar esas herramientas.Pero al final, realmente depende de ti determinar cómo quieres que se vea este resultado final.Ahora, déjame mostrarte cómo puedes hacer ESo.En primer lugar, he armado un kit de inicio de página de aterrizaje. Tendrás que descargar esto primero. Dentro de los kits de inicio, tenemos algunos activos de marca que esencialmente son solo dos versiones del logo de marcador de posición que estaremos usando. También tenemos algunas imágenes demo que estaremos usando. Entonces tenemos un resumen de proyecto. El resumen del proyecto es un documento PDF y esto se asemeja a algo que recibirías de un cliente, ¿verdad? Nuestros clientes como uno ficticio, se llama Numm Inc.. Dentro del resumen del proyecto, tenemos algunos antecedentes sobre el cliente y la empresa. Tenemos los taglines que necesitamos usar para este proyecto. Asumí que el equipo de marketing del cliente armó este documento y básicamente nos dieron todo lo que necesitamos. Qué tipo de taglines usar, qué tipo de títulos, subtítulos, texto de botón usar para la llamada a las acciones. Todo está aquí. Entonces actualmente presentaron algunas características del producto para nosotros. Se puede ver que las características están categorizadas. Entonces tenemos características individuales. Podemos ver el título de la característica, descripción y demás. Todo está aquí. Después tenemos información de precios para el producto, algunos testimonios, y luego la estructura de página propuesta. Por último, al final, algunas consideraciones de diseño. ¿ Qué tipo de colores le gusta al cliente? ¿ Qué tipo de estilo podemos usar para el diseño? Además, ¿qué tipo de sitios web le gusta al cliente? Se puede ver que aquí nos enviaron tres ejemplos. Este es, de nuevo, típicamente el tipo de documento que recibirías de un cliente al hacer un proyecto como este. En cualquier momento, puede volver a este breve proyecto y conocer todos los detalles que necesites. Ahora basado en ese resumen del proyecto, seguí adelante y diseñé este alambre-marco. Un marco de cable es básicamente un boceto.Es una representación de baja fidelidad del producto final. No tienes que tomar esto literalmente. Un marco de cable sólo sirve como punto de partida, como pauta. Está ahí para mostrarte qué tipo de contenido necesitas agregar a tu página.No significa que el diseño que usamos en el marco de cable necesite estar en el producto final. Por ejemplo, el diseño de esta sección de héroes sólo me muestra una imagen a la derecha y el contenido a la izquierda. Pero si miramos el producto final, podemos ver que tenemos una imagen a la derecha y el contenido a la izquierda, pero no se asemeja a nada como esto. Mira esta sección, esto es para las características. En el wireframe, imagino que tal vez necesitamos tener alguna imagen aquí a la izquierda y luego las características a la derecha, pero en el resultado final, no tenemos esa imagen a la izquierda, en ningún lado, solo tenemos una cuadrícula de iconos. ¿ Y la otra sección para características? Aquí te mostramos cómo se ve en la estructura metálica, y así es como se ve aquí. Aquí agregué una imagen que no estaba aquí en el alambrado, y también opté por mostrar estas características así. Espero que entiendas lo que trato de decir aquí. Usa el modelo alámbar como guía para el contenido que necesitas usar, no el diseño real. En el kit de inicio, también encontrarás un archivo resources.pdf. Aquí encontrarás una lista completa de recursos que se utilizan en el diseño como el logotipo, las imágenes, los iconos, las ilustraciones, y también algunos enlaces útiles. Siempre que no puedas encontrar un recurso que utilizo para asegurarme de revisar de nuevo a este documento y definitivamente encontrarás un enlace allí. Ahora bien, ¿cómo se empieza y se pone todo listo para las clases principales? Bueno, antes que nada, necesitas descargar este kit de iniciación. Encontrarás un enlace al mismo en la descripción de la clase. Después de hacer eso, sigue adelante y crea una cuenta de Figma. Acude a figma.com y si no tienes cuenta, pulsa Regístrate, y sigue las instrucciones allí. Si sí tienes una cuenta, entonces simplemente sigue adelante e inicia sesión. paso número 3 es abrir el kit de inicio o el archivo de iniciación Figma que proporcioné. Déjame mostrarte cómo luce eso. Es un archivo Figma relativamente en blanco con cuatro páginas que hice para ti. La primera página es el wireframe, y puedes usar esto para comprobar rápidamente lo que estás haciendo. La segunda página es para colores, y te mostraré cómo editar esto una vez que lleguemos a la siguiente lección. Tercera página es para tipografía, y seguí adelante y creé estos marcos para ti para que sepas lo que necesitas rellenar, y luego tenemos una página para el diseño principal. Aquí es donde crearemos el diseño real para la página de aterrizaje. Adelante y abre este archivo y puedes empezar a trabajar directamente en él. Ahora el cuarto y último paso es en realidad opcional, puedes descargar Figma para el escritorio. Como puedes ver en este momento, tengo Figma abierto en el navegador y puedes trabajar así, no hay problema, el resultado es exactamente el mismo. Pero si es más cómodo para ti, puedes descargar Figma para escritorio. Puedes hacerlo yendo a figma.com/downloads y en Desktop App, elige la que quieras para Mac OS o Windows. Después de que hagas todo esto, ya estás listo para irte. Ahora, podrías estar preguntándome, Adi, ¿por qué este proyecto, por qué un landing page? La respuesta a eso es muy sencilla. Para esta clase, quería que aprendieras, número 1, cómo trabajar en Figma, y número 2, el proceso de pasar de una solicitud de cliente a un producto terminado. Una página de aterrizaje es bastante simple. Es solo una página, no tienes que preocuparte por elementos complejos que normalmente encontrarías en un sitio web, y es rápido y fácil de hacer. Quería que este proyecto se pareciera a un escenario de la vida real. Se parte de un resumen de proyecto, se parte de un conjunto de wireframes, estas son cosas que normalmente obtendrías o que normalmente usarías cuando estás interactuando con tu cliente. El cliente te da toda la información que necesitas en el resumen del proyecto, y en base a eso, construyes el modelo de cable y en función del modelo de cable, diseñas la página real. Esto es lo más cercano a un proyecto de la vida real que puedes conseguir en una clase como esta. Esperemos que puedas utilizar la información que aprendiste aquí y aplicarla en futuros proyectos. Ahora, mientras estás tomando esta clase, te animo encarecidamente a que publiques tus resultados en la galería de proyectos. Yo quiero ver tu resultado. Yo quiero ver los proyectos que estás haciendo. Como decía, me gustaría que experimentaran y le agregaran su propio giro a las cosas. Está totalmente bien si sigues exactamente lo que hago, adelante y publicas eso. Pero si quieres, solo siéntete libre de agregar tus propios colores, tus propias tipografías, déjame ver tu propia visión para crear esta página de aterrizaje basada en ese wireframe. Así que adelante y publíquelo en la galería de proyectos y te daré retroalimentación por ello si quieres. Simplemente me encantaría ver tus resultados. También publica en la pestaña de discusión si tienes alguna pregunta o comentario, no importa lo sencillo que creas que puedan ser, si hay algo que quieras preguntarme, adelante y hazlo. Responderé a todas y cada una de sus preguntas. Está bien. Esto es lo que debes hacer en este punto. Adelante y prepárate, como te mostré anteriormente. Descarga los kits de inicio, crea una cuenta de Figma, abre el archivo de inicio Figma y también opcionalmente instala Figma en tu computadora. Una vez que hagas eso, estarás bien para ir a las clases principales. En la primera lección principal, será el hallazgo del esquema de color. Te voy a mostrar algunas herramientas que te ayudarán con eso. Eso viene a continuación. 3. Esquema de colores: Bienvenido de nuevo a la clase. En esta lección, estaremos creando el esquema de color para nuestra página de aprendizaje. Ahora este es un paso crucial en cualquier proceso de diseño, por lo que tenemos que prestarle mucha atención. También hay un par de herramientas que uso todo el tiempo para simplificar esta parte y te voy a mostrar esas herramientas también. ¿ Listo? Vámonos. Empecemos abriendo nuestro kit de inicio en Figma y yendo a la pestaña de colores, página de colores. Aquí mismo, puedes ver que he creado para ti cuatro cuadros. Si no sabes qué son los marcos, bueno, este es un marco básicamente. Es una forma de organizar el contenido en el Lienzo. Pero hablaremos de marcos en solo un poquito ahora centrémonos en los colores. Siempre que estés iniciando un proyecto como este. Te recomiendo dividir tus colores en estas cuatro categorías, primaria, secundaria, terciaria, y grises. Los colores primarios serán los que más utilices, y normalmente los utilizarías para botones o enlaces. Los colores secundarios suelen ser para ciertos actos y piezas, y deben trabajar armoniosamente con los colores primarios. Los colores terciarios son aquellos que no son muy prominentes. Los utilizarías tal vez una vez en una página o en ciertas situaciones como colorear contextual para un estado de entrada, error, éxito, información, cosas así. En nuestro caso, estaremos usando los colores terciarios, en su mayoría para iconos. Entonces, por último, los grises se utilizan mayormente en el texto. Pero también puedes usarlos en otros elementos de tu página. Al igual que tal vez algunos iconos, divisores, y así sucesivamente. Lo que tengo aquí es una colección de 10 de estas casillas en cada categoría, y cada una es más ligera en un 10 por ciento que la anterior. Esencialmente, tenemos el color principal y nueve tintes. Si no sabes lo que es un tinte, bueno es muy sencillo. Cuando mezclas un color con blanco, obtienes un tinte de ese color. Cuando mezclas un color con negro, obtienes un tono de ese color. Por lo tanto, un tono es una versión más oscura de un color, un tinte es una versión más clara del color. Siempre recomiendo a la hora de definir un esquema de color que crees estos tintes. También puedes crear tonos si quieres, pero normalmente solo creo tintes porque me da opciones. Cuando estoy eligiendo un color para nuestro diseño, podría mirar el color principal y decir, bien eso es un poco demasiado intenso para mí tal vez voy a usar un tinte de ello. A lo mejor en algún lugar de esta zona o de esta zona. Pero la idea es, puedo verlos y puedo decidir cuál funciona mejor en ese momento. ¿ Cómo escogemos los colores? Bueno, por lo general todo empieza con el branding. ¿ De qué colores sirve la marca que estás diseñando? En nuestro caso, bajo activos de marca, podemos encontrar este logotipo de color. Esto nos hace realmente fácil porque puedo definir dos colores primarios a partir de aquí. Puedo definir como azul y puedo definir como morado. Lo que voy a hacer es que voy a traer este archivo SVG a Figma simplemente arrastrando y soltando y se puede ver que seleccionando cualquiera de estos componentes, bajo relleno, encontraremos un gradiente lineal. Haga clic en eso, y eso nos dará nuestros dos colores. Vamos a dar click en este vamos a copiar su valor hexadecimal. Esta es una representación de ese color y, vamos a seleccionar todo este marco, todo este grupo de elementos y donde dice colores de selección, haga clic y pegue. Esta es una de las características más impresionantes de Figma. En lugar de seleccionar cada elemento individualmente y cambiar su color, cuando estás seleccionando más de un elemento, activa esta sección llamada colores de selección. Se pueden cambiar los colores individualmente ahí, o en mi caso, porque estaba usando el mismo color, negro antes, mi selección me acaba de mostrar ese color negro y al cambiar eso, cambió el color de cada elemento en este grupo. No te preocupes si esto parece un poco raro, te voy a contar más sobre esto a medida que avanzamos en esta clase. Ahora mismo se puede ver que hemos definido el primer color primario, que es este azul. Definamos el segundo. Volvamos a Lineal, vamos a seleccionar este elemento, copiar y luego seleccionaremos este marco que puedes ver aquí. Podemos hacer una de dos cosas, podemos duplicarla pulsando comando o control D. Comando D si estás en un Mac o control D si estás en Windows y eso lo va a duplicar, va a hacer una copia de la misma. Alternativamente, puedes seleccionarlo e ir a la edición del menum de Figma, duplicar. Va a hacer exactamente lo mismo. O simplemente puedes copiar y pegar igual que lo harías normalmente. Hagamos realmente un poco de espacio aquí. Entonces voy a seleccionar este grupo y voy a pegar luego el otro color y ahora puedo deshacerme de este logo. Bastante cool y así, hemos definido los dos colores primarios que estaremos usando. Ahora qué pasa con los colores secundarios. Vamos a subir un poco esto. Para los colores secundarios, esto es lo que suelo hacer. Selecciono o copio el valor de mi color primario, y luego voy a Adobe Color. Esta es una herramienta que uso todo el tiempo y Adobe Color es una herramienta gratuita, y me da la opción de crear un esquema de color basado en un color. Debajo del tabulador, sigue adelante y pega en ese valor y luego desde el lado izquierdo, aplica una Regla de Armonía. Esto es analógico, esto es monocromático, tríada, y de cortesía. Por lo general, uso esquemas de color complementarios porque al igual que lo dice el nombre, los colores en este pellet se complementan entre sí, crean armonía. En este caso, el primer color secundario que estaré usando es, este color de aspecto mostaza. Voy a seguir adelante y copiar eso. Voy a volver aquí, seleccionar mi marco, pegarlos ese color y si no me gusta la forma en que se ve, eso está totalmente bien no tengo que usar este mismo color exacto. Puedo usar eso como guía y luego solo usar el deslizador para crear mi propio color y simplemente elegir uno que creo que se vea mejor. En mi caso, voy a usar este FFC700. Ahora también quiero un color secundario adicional, así que voy a duplicar este bit y para este color, voy a elegir F25C63. Ahora pasemos a mis colores terciarios. Vamos a subir un poco esto. Hagamos algo de espacio porque vamos a crear muchos colores terciarios. Para ser más exactos, vamos a crear siete de ellos. Duplicemos este 2,3,4,5,6,7 usando el mismo comando de atajo de teclado D porque estoy en un Mac y ahora, solo voy a llenar estos con los colores que elegí. El primero es 00DAA7. El siguiente es 37c2cc. Siguiente es 3a96e8. El cuarto es 64C9FF. El quinto será 9E76FE. Entonces el número 6 va a ser CC37BD. Y entonces el último será FFCA64. Está bien. Estos son los colores terciarios que vamos a estar usando. Ahora, podrías preguntarme, dónde sacaste todos estos colores? Bueno, solo es cuestión de abrir el seleccionador de color y usar los deslizadores aquí para determinar de qué color me gusta. Y acabo de pasar por todos estos y acabo de elegir uno que pensé que funcionaría mejor para este proyecto. Alternativamente, aquí hay otra herramienta que uso y creo que es muy útil. Se llama Dribbble Color. Y estoy seguro que estás bien al tanto de Dribbble, la página web donde puedes encontrar inspiración para el diseño. Bueno, ya puedes buscar colores, ¿verdad? Puedes escoger entre uno de estos colores predefinidos, o simplemente puedes introducir tu propio valor. Y te va a dar una lista de resultados que están usando ese color. Y cuando abres una de estas tomas Dribbble, también puedes encontrar la paleta de colores que se utilizó. Por lo general voy aquí y consigo inspiración para los colores. O voy al sitio web de Adobe Color y acabo de golpear explore y miro las paletas de colores de este sitio web o simplemente las escojo a mano. Ahora, la razón por la que fui por tantos colores es algo que leí en el resumen del proyecto. El cliente, justo al final, bajo consideraciones de diseño, nos dijo que deberíamos hacerlo colorido. Y además, el esquema de color principal debe estar centrado en torno al color azul porque transmite confianza y profesionalismo. Y también nos dieron otra opción aquí, verde hierba por frescura y novedad. Pero la idea principal es centrar el esquema de color alrededor del azul y también hacerlo colorido. Esa es la razón por la que fuimos por tantos colores terciarios porque queremos opciones. Por último, el último paso que necesitamos abordar aquí es definir los grises. Y estos se utilizarán en su mayoría para el texto. Y aquí es donde tener múltiples tintes del color gris principal es muy útil porque podría usar este bit para los encabezados principales. Y podría usar este bit que es del 70 por ciento, o este que es del 80 por ciento para el texto principal. Ahora, a la hora de elegir un color gris, aquí está mi proceso muy sencillo. Simplemente creo esta forma aquí, y elijo mi color de marca principal. Yo pego eso en, y luego duplique esta forma y la lleno de negro. Y entonces solo bajé la opacidad de ese color negro para digamos 90 por ciento. Y no estoy seguro si lo ves, pero ahora no es totalmente negro. Parte de ese color azul de abajo viene a través. Ahora lo que hago es simplemente crear otra forma. Y uso el recolector de color para muestrear ese color. Y eso me da mi gris principal. Y si no me gusta cómo se ve, puedo volver atrás, cambiar la opacidad del negro. Y eso es un poco demasiado, tal vez 88 por ciento, o tal vez quería ser un poco más oscuro, tal vez 95 por ciento. Y entonces puedo seguir adelante y puedo probar eso otra vez y elegir mi color gris. Ahora, usualmente paso un poco de tiempo en este proceso hasta obtener el color exacto que quiero. En mi caso, estaría en algún lugar alrededor, supongo esta zona. El color gris final que vamos a utilizar es el 030F1A. Ahora podemos eliminar esto y podemos pegar en nuestro color aquí mismo. Y eso nos acaba de dar el gris principal y los nueve tintes que ahora podemos usar en nuestro diseño. Alternativamente, si estás buscando crear tintes y sombras, la manera fácil, déjame mostrarte una herramienta muy bonita para hacer eso. Se llama Generador de Tinte y Sombra. Lo podemos encontrar en maketintsandshades.com. Y lo que haces básicamente, vamos a dar esto como ejemplo, seleccionas tu color principal, pegas eso en y golpeas hacer tintes y sombras. Y esto te da los tonos en la parte superior y los tintes en la parte inferior, junto con el código hexadecimal para cada valor. Y en cualquier momento se puede pasar sobre uno de ellos. Copia. Y ese valor ahora se copia en tu portapapeles y puedes usarlo donde quieras. O si tienes una configuración como esta, solo estableces una opacidad diferente en cada capa y obtendrás relativamente el mismo resultado. Y con eso, el esquema de color está completo. Está bien. Ahora es tu turno de estar ocupado. Si has seguido y trabajado junto a mí, entonces tu esquema de color está completo. Genial. Si no, adelante y haz eso ahora mismo. Usa las plantillas que te di en Figma y también las herramientas que te mostré para crear tu propio esquema de color. No tienes que usar exactamente los mismos valores que yo hice. Adelante y experimenta. Esa es la mejor manera de aprender. Usa los colores que sientas que te vean mejor. Ahora, una vez que hagas eso, estás listo para pasar a la siguiente lección, que es sobre tipografía. Este es otro paso crucial en el proceso de diseño. Y vamos a abordar eso en la siguiente lección. Te veré ahí. 4. tipografía: Bienvenido de nuevo a la clase. En esta lección, vamos a abordar la tipografía para nuestra página de aprendizaje. Ahora, ¿qué significa eso? Bueno, significa elegir las tipografías correctas y todas las demás propiedades del texto para asegurarse de que todo se vea bien y limpio. Eso significa tamaños de fuente, alturas de línea, pesos de fuente, etcétera y así sucesivamente. También te voy a estar mostrando algunas herramientas muy útiles que van a hacer mucho más fácil tu trabajo, y también discutiremos escalas tipográficas, y te voy a dar una introducción al sistema de cuadrícula de ocho puntos estaremos utilizando a lo largo de este proceso de diseño. Empecemos. Empezamos aquí en el archivo de inicio Figma bajo Tipografía, donde he creado unos fotogramas, para definir tipos de letra, la escala de tipos, los estilos de título, el estilo de las comillas de bloque, y los párrafos. Esto es suficiente para que te pongas en marcha. Pasemos a definir los encabezamientos. Para ello, comenzaremos por echar un vistazo al resumen del proyecto. Justo al final, bajo consideraciones de diseño, el cliente nos pide que la página de aterrizaje sea moderna, profesional, pero juguetona. ¿ Cómo se traduce eso a la tipografía? Bueno, la parte juguetona, en realidad podemos obtener de los colores. Cuando lo hacemos colorido, lo hacemos juguetón. Pero este bit, hazlo moderno y profesional. Eso lo podemos hacer totalmente con la ayuda de la tipografía. Al iniciar un proyecto como este, siempre es buena idea visitar los sitios web que utilizas para obtener tus archivos de fuentes. Hay muchos de ellos. Utilizo dos de ellos, principalmente Adobe Fonts y Google Fonts. Ahora, Google Fonts es gratis y Adobe Fonts, bueno, necesitas tener una suscripción a Adobe para obtener acceso a estos. Pero diré esto, Adobe tiene tipografías de calidad mucho mayor que Google. Todavía puedes encontrar grandes tipos de letra aquí, pero normalmente me acerco a Adobe Fonts, porque simplemente son un poco más refinadas, y la colección aquí es en realidad mucho más grande que la que encontrarías en Google Fonts. Porque tengo una suscripción a Adobe , sólo tiene sentido para mí usar sus fuentes. Ahora, porque el cliente nos pidió que la página de aterrizaje se viera moderna, vamos a usar una tipografía sans serif. ¿ Qué es una tipografía sans serif? Bueno, permítanme darles un ejemplo. Aquí voy a abrir Roboto. En realidad, sólo voy a hacer esto realmente grande para que puedas ver la diferencia. A sans serif es una tipografía que no tiene los serifs en las letras. Creo que en realidad debería empezar con una tipografía serif, para que puedas ver la diferencia. Se trata de una tipografía Serif. Ver estas decoraciones aquí, y también aquí, y también aquí? Estos se llaman serifs. serifs generalmente se encuentran en tipos de letra más antiguos. Las tipografías más modernas son sans serif o sin serif. Al igual que éste. Mira aquí, ya no tenemos esas decoraciones. No los podemos encontrar aquí ni aquí ni aquí. Estos son más limpios y más modernos. Ahora, no voy a repasar serif versus sans serif en esta clase, eso está más allá del alcance. Pero si en algún momento un cliente te pregunta, “Está bien, queremos un sitio web de aspecto moderno”. Entonces en lo que respecta a la tipografía, es necesario utilizar tipos de letra sans serif. Ahora, en mi caso, después de hacer un poco de excavación en Adobe Fonts, me he conformado con Brandon Grotesque. Esta es una tipografía que se ajusta a ambos criterios, es moderna, es sans serif, y también tiene un aspecto muy profesional, y además tiene todos estos estilos. Tenemos estilos o pesos que van desde delgados a ligeros a regulares a negros. Este es el que vamos a utilizar para los encabezamientos y algunos de los otros elementos. Ahora, cuando se trata del texto corporal, vamos a estar usando Tisa Sans Pro o FF Tisa Sans como se le llama aquí.Esta es una tipografía que es similar a Brandon Grotesque, pero obviamente tiene sus propias diferencias. Estoy usando dos tipos de letra porque mientras Brandon Grotesque es genial para encabezados, lo que son grandes y grandes tamaños de fuente. No le va tan bien en texto de cuerpo más pequeño. Por esa razón estoy usando FF Tisa Sans o Tisa Sans Pro. Esto funcionará muy bien en tamaños de texto más pequeños como por ejemplo 18, cuando estemos haciendo el texto de cuerpo, esto funcionará maravillosamente. Ahora, estas son mis opciones. Tus opciones pueden variar y te sugiero encarecidamente que hagas un poco de excavación ya sea en Adobe Fonts o Google Fonts, y que encuentres el tipo de letra que crees que mejor se ve, y que sigas adelante y uses esos. En mi caso, tengo ambas fuentes instaladas en mi sistema. Todo lo que tengo que hacer ahora es entrar aquí en Figma y referirlos. Voy a decir Brandon Grotesque, y voy a ir justo aquí bajo texto, y voy a seleccionar a Brandon Grotesque. Hagamos esto audaz, y usemos un tamaño de fuente más grande, tal vez como 55. Lo que suelo hacer, y déjame simplemente mover estos fuera del camino. Normalmente duplico estos valores y solo resalto o presento todos los pesos para esta tipografía. Esto es regular, esto es medio, audaz, y esto es negro. Esto sólo me da una idea de cómo se ve la tipografía sin tener que cambiar una pieza de texto manualmente. Por ejemplo, si estoy en diseño principal, solo puedo entrar en tipografía y puedo decir, vale, así es como se ve la versión más ligera de la misma, o así es como se ve la versión más pesada de la misma. Adelante y hagamos lo mismo para los textos corporales, estamos usando Tisa Sans Pro, y aquí voy a hacer exactamente lo mismo. Esto tiene un par de versiones también. Partiendo de delgados, livianos, o en realidad estos se ven deteriorados, regulares y luego medianos, audaz, extra negrita y negra. Está bien. Por lo que ahora tenemos nuestras tipografías listas para salir. Por cierto, para acercar así, puedes mantener presionado el comando en Mac y solo usar la rueda de desplazamiento para acercar y alejar, o en Windows, puedes usar el control y la rueda del ratón para hacer lo mismo. Ya que estamos en el tema de acercar y alejar, déjame mostrarte otros dos atajos de teclado que uso todo el tiempo. turno cero siempre se acercará al 100 por ciento, independientemente de Mac o Windows. Shift 1 hará zoom para encajar, por lo que va a tomar todos tus marcos y va a encajarlos en la parte visible de tu lienzo. Si seleccionas un elemento o un marco y presionas Mayús 2, se va a acercar a la selección. Estos son tres atajos de teclado que uso todo el tiempo. Nuevamente, Shift 0 hará zoom al 100 por ciento, Shift 1 zoom para ajustar, Shift 2 zoom a selección. Mantener pulsado el Comando en Mac o el control en Windows básicamente te permitirá usar la rueda de desplazamiento para acercar y alejar. Bastante cool. Ahora, pasemos a la escala de tipos. Ahora bien, ¿qué es una escala tipográfica? Bueno, la forma más fácil de explicar es mostrarte. Aquí tenemos un sitio web que uso todo el tiempo se llama tipes-cale.com, y aquí lo que haces es básicamente establecer tu tamaño de fuente base. Seleccionas una escala y que te dará una lista de tamaños de fuente que necesitas usar para crear esta escala armoniosa. Si yo cambiara la relación aquí, verán que la escala también cambia. Al usar esta herramienta, se puede decir: “De acuerdo, esto es lo que voy a usar para el encabezamiento uno, encabezamiento dos, tres, cuatro, cinco y seis. Esto es lo que uso para texto más pequeño. Al usar esta herramienta, me aseguro de que mi tipografía siempre esté puntual porque sin ella, realmente no sabes qué tipo de tamaños de fuente usar. Es decir, empiezas con, digamos el tamaño de fuente base para el texto del cuerpo, que suele ser de 16 píxeles. Pero, ¿qué pasa después de eso? ¿ Qué usas para el H1 o el H3? ¿ Utilizas 20 pixels, o usas 21 pixels? O tal vez usas lo que creas que se ve mejor? Eso puede funcionar pero tener una herramienta como esta que te diga exactamente qué tipo de, o qué tamaños de fuente usar en función de una escala es crítico. El modo en que funciona esto es realmente muy sencillo. Déjame abrir una calculadora y explicar el principio detrás de esto. Tipo escala base trabajos basados en una relación. Empezamos con el valor base, que es de 16 píxeles. Ese valor base, nos multiplicamos por la escala, que en nuestro caso es 1.414, y eso nos da el resultado, 22.624. Ahora para el siguiente ítem de la báscula, tomamos ese valor, 22.624 o 22.62. Podemos usar dos decimales y lo dividimos, o lo multiplicamos con la misma proporción, 1.414 y eso nos dará el siguiente valor. En nuestro caso, en realidad usé el separador equivocado aquí. En nuestro caso es el 31.98 y lo haces una y otra vez hasta obtener todos los valores para el resto de tus elementos de texto. Ahora, la ventaja de usar una herramienta como Type Scale es que no tienes que hacer estos cálculos manualmente. Lo hace por ti, y lo hace en M así como en píxeles. Ahora porque estoy usando Figma, tengo un práctico plugin que genera escalas de tipo para mí y ese plugin se llama Font Scale. Si quieres instalarlo, simplemente tienes que ir a Plugins, Manage Plugin, y luego buscar Font Scale e instalarlo. Es realmente, realmente simple. Ahora para usar este Plugin, ingresas los tamaños de fuente base, en mi caso va a ser 18 y elige el factor de escala en mi caso va a ser mayor tercero y luego, generar capas. Eso generó estas capas y en realidad puede pegarlas aquí. Como puedes ver, eso te da elementos de texto que tienen los tamaños de fuente correctos. Es exactamente lo mismo que ir aquí y decir: “Está bien, quiero usar 18 píxeles y 1.250 o tercera mayor”. Eso te va a dar exactamente el mismo resultado, la diferencia es, en Figma tienes estas capas y puedes referirlas en cualquier momento que quieras. Seleccionemos todos estos y cambiemos la tipografía a Brandon Grotesque, ahí vamos. Ahora, también voy a agregar otro elemento aquí porque quiero este valor final de 55 píxeles. Ahora lo que voy a hacer, voy a pasar por cada uno y voy a redondear el tamaño de la fuente. Esto es 43.95, vamos a hacer 44, este es 35, este es 28, esto es 22.5. Puedo ir ya sea 22 o 23. Vayamos con 23. Esto es 18, y esto es 14.4 pero vamos a usar 14. Ahora como tenemos la escala tipográfica en su lugar, hagamos un poco de simulación para los estilos de encabezamiento. Vamos a decir encabezamiento uno y luego, vamos a multiplicar eso para crear encabezamientos de uno a seis. También hagamos un pequeño elemento aquí. Todos estos estarán usando Brandon Grotesque y los encabezamientos uno a tres, vamos a hacerlos atrevidos. Epígrafe cinco, probablemente vamos a hacer este medio. rumbo seis va a ser regular y los pequeños usarán mayúsculas. Puedes abrir estos detalles de tipo avanzado haciendo clic en este pequeño botón aquí y eligiendo mayúsculas y esto se ajustará a 14 píxeles. Hagamos un 5 por ciento de espaciado entre letras, va a ser audaz y deberíamos estar bien para ir allí. Ahora, definamos los estilos o el estilo para los otros encabezamientos. Tenemos rumbo uno. Eso van a ser 55 píxeles, porque 55 es el tamaño de fuente de este elemento de nuestra Escala de Tipo. Encabezamiento dos, estaremos usando 44, Encabezamiento tres, estaremos usando 35. Después tendremos 28 para la partida cuatro, 23 para la rúbrica cinco y luego para la seis, estaremos usando 18, que es el tamaño de fuente base. Al hacer esto, básicamente encontramos los tamaños de fuente para todos nuestros encabezados basados en esta escala de tipo. Bastante cool y muy, muy fácil. Sigamos adelante y movamos esto. Ya que estamos en el tema de definir estilos, definamos un estilo para las comillas en bloque y aquí estaremos usando también Brandon Grotesque y vamos a estar usando el tamaño de fuente de 35 píxeles. Saquemos eso del camino y finalmente, pongamos un estilo para los párrafos. Estos estarán usando Tisa Sans Pro, regular, 18 pixels. Ahora, nuestra tipografía está bastante configurada. Lo último que tenemos que hacer es establecer las alturas de línea adecuadas. Ahora, para hacer eso, vamos a estar trabajando con el sistema de cuadrícula de ocho puntos. Déjame contarte un poco sobre esto. Ahí hay un gran artículo que vinculé en los recursos, archivo P-D-F. Adelante y echa un vistazo a eso. Realmente explica por qué es beneficioso utilizar el sistema de cuadrícula de ocho puntos en el diseño web. Esencialmente, lo que estamos tratando de hacer es lograr un ritmo vertical consistente. Entonces cualquier medida o cualquier distancia, cualquier margen o relleno que vamos a aplicar, cualquier altura que vamos a aplicar a nuestros elementos debe ser un múltiplo de ocho. Eso se aplica también a los elementos de texto. El tamaño de la fuente no necesariamente tiene que ser un múltiplo de ocho. Lo que importa es que la altura de la línea es un múltiplo de ocho porque la altura de la línea dicta qué tan altas son las líneas del texto y si hay múltiplos de ocho, entonces todo va a caer bien en una cuadrícula de línea base. Te voy a mostrar un poco sobre eso cuando sumamos más elementos y seguimos este sistema de cuadrícula de ocho puntos. Pero por ahora lo que debes saber es que cuando se trata de tipografía, vamos a establecer la altura de línea de los elementos de texto para que sea un múltiplo de ocho. Adelante y hagamos eso ahora mismo. encabezamiento uno tiene una altura de línea que debe ser de alrededor de 79 píxeles. Esto lo calcula automáticamente Figma, así que lo voy a ajustar a 80 píxeles. encabezamiento dos debe ser alrededor de 63, o el siguiente, o el múltiplo más cercano de ocho es 64. Entonces vamos a hacer eso. rubro tres es 50. Aquí, podemos ir ya sea 48, eso es un múltiplo de ocho, o podemos ir con 56. Hagámoslo a 56. rumbo cuatro es 40, así que eso es puntual. rubro cinco es 36 y podemos ir con 40 o 32. Entonces vamos 32. rubro seis es el 18. Podemos ir 24 aquí y este, podemos ir 24 también. Esa es la altura de línea establecida para los encabezados. Ahora, para las cotizaciones de bloque, veamos 35, vamos a usar 56 porque eso es lo que usamos aquí también. Pero si sientes que esto es demasiado y ahora que realmente lo veo, podría volver a 48. Creo que eso se ve un poco mejor. Entonces hagámoslo aquí también, 48. Por cierto, estos no son definitivos, siempre podemos cambiarlos, si llegas al punto de diseño y encuentras que esto realmente no funciona tan bien. Siempre puedes volver a esto y cambiar. No es gran cosa. Párrafos 18, vamos a usar el 24 como altura de línea y con eso, hemos creado las características tipográficas para nuestra página de aterrizaje. De acuerdo, si has estado trabajando a mi lado, entonces deberías tener toda la tipografía descubierta. Si no, adelante y hazlo ahora mismo y al igual que con los colores, experimenta un poco, no tienes que usar las mismas tipografías que yo uso o la misma escala que yo hice. Escoge una tipografía o elige las dos tipografías que creas que funcionan mejor para este tipo de producto o para este tipo de proyectos. No importa si se trata de una tipografía gratuita o de pago. Si crees que se ve bien, adelante y úsalo. Además, no tienes que usar la misma escala de 1.25 que utilicé. Juega con ellos. Elige una que creas que se vea mejor y al elegir las diferentes relaciones, observa cómo éstas afectan a la composición general de esos elementos de textos. Vea cómo esto cambia la jerarquía visual. En la página, verá que cuanto menor sea la relación, menor diferencia es entre cada paso de la escala. Cuanto mayor sea la relación, mayor será la diferencia entre cada paso en la escala. Por ejemplo, si vas con una relación dorada, verás que hay una diferencia dramática entre los tamaños de fuente más pequeños y los tamaños de fuente más grandes. Cada escala de tipo, cada relación tiene su lugar para cosas diferentes. Usarías ratios más pequeños para blogs tal vez, o para tal vez un dashboard donde no necesitas una diferencia tan grande entre los tamaños de fuente y utilizarías algo así como la relación dorada cuando quieres hacer una declaración, cuando tienes un sitio web con tipografía grande y audaz. Cuando se tiene una gran diferencia entre el texto del cuerpo y el título más grande. Así que juega con estos, y una vez que hayas terminado, estás listo para pasar a la siguiente lección, que trata de imágenes y otros activos visuales como los iconos. Ahora, vamos a estar usando algunas imágenes de marcador de posición y aunque no sean definitivas, al menos, nos dan un punto de partida. Eso se acerca en la siguiente lección. Te veré ahí. 5. Imágenes y otros recursos: Bienvenido de nuevo a la clase. En esta lección, vamos a familiarizarnos con las imágenes y los iconos que estaremos utilizando para este diseño. Siempre es una buena idea prepararlos antes de comenzar el proceso de diseño real, porque solo te va a facilitar las cosas. Por supuesto, podrías cambiarlos más tarde, pero al menos tienes un punto de partida. Entonces les voy a mostrar qué imágenes e iconos estaremos usando. También voy a compartir un par de recursos que puedes utilizar para facilitar todo este proceso. Empecemos. Muy bien, para las imágenes, como les mostré, tenemos los logotipos, los logotipos de la marca. Puedes encontrar un enlace en el archivo PDF de recursos a este logotipo exacto, y puedes descargarlo. Ahora, para las imágenes de los marcadores de posición, obtuve estas imágenes de un Kit de UI, un Kit de UI de Finanzas. Déjame solo hacer esto un poco más pequeño para que puedas verlas mejor. Porque estamos trabajando con un proyecto ficticio, no tenemos capturas de pantalla ni imágenes del producto real. Entonces solo vamos a usar estas imágenes demo, y en realidad déjame solo mostrarte dónde puedes conseguir eso. A esto se le llama Kit de UI de Finanzas Gratis. Lo puedes encontrar en Behance, y aquí es donde también puede descargarlo. Ahora, creo que esto fue un boceto, sí. Entonces es un archivo de boceto. si acaso no tienes sketch instalado, seguí adelante y exporté estas imágenes JPEG para ti, que puedas usarlas de inmediato en tu diseño. Ahora encima de estos, también tenemos estos renders de dispositivos. Esto es para un iPad Pro, y esto es para un iPhone 7, y también los estaremos usando en nuestros diseños. Estos son archivos PNG y los exporté desde los archivos de Photoshop que se pueden descargar desde aquí. Estos también están vinculados en el archivo PDF por cierto. Estos son recursos gratuitos de Pixeden. Se trata de un Psd iPhone 7 Pro Mockup, y este es un iPhone 7 Mockup. Estos son todos vectores, están en Photoshop, y tienen este objeto inteligente como pantalla. Simplemente puedes hacer doble clic en eso y poner cualquier captura de pantalla o imagen que quieras, igual que lo hice yo. Aviso, tengo una de estas otras imágenes dentro de la pantalla del teléfono y lo mismo va para este iPad. Entonces estas son las imágenes de marcapasos que vamos a estar usando. Ahora bien, si solo estás buscando algunas imágenes de marcadores de posición, un recurso que uso todo el tiempo es Unsplash. Simplemente busca una foto, como por ejemplo iPhone. Eso te da una lista de imágenes que coinciden con esos criterios de búsqueda. Estas son imágenes gratuitas las puedes utilizar en cualquier lugar, gran recurso. Ahora, cuando se trata de iconos, hay tantos sitios web por ahí, que permiten descargar cargas y montones de conjuntos de iconos. Una opción a la que voy todo el tiempo es Iconfinder. Podrás encontrar juegos de iconos gratuitos premium y también puedes descargar iconos individuales. Aquí simplemente busca casa, y puedes buscar por estilo. Solo puedes encontrar iconos gratuitos y puedes hacer click en cualquiera de estos y descargarlo como PNG, SVG u otros formatos, depende del conjunto de iconos. Para que puedas obtener conjuntos de iconos desde aquí. Pero para esta demostración en particular, vamos a estar usando algunos iconos de este conjunto de iconos. Se llama micones. Esto es de un compañero rumano llamado Cosmic Negoita. Este es un gran íconos que lo uso en muchos de mis proyectos. Otro conjunto de iconos que estaremos utilizando se llama Ionicons. Esto es de nuevo, realmente me encanta este conjunto de iconos. Yo lo uso todo el tiempo, me gusta mucho y te lo puedo recomendar encarecidamente también. Ahora, con cualquiera de estos conjuntos, simplemente puedes descargarlos. Te va a dar un archivo, y probablemente tengas archivos SVG y PNG. Pero lo que me gusta hacer, es usar una app llamada Iconset. Esta es una app gratuita, es multiplataforma y funciona tanto en Mac OS como en Windows; Se ve algo así. Aquí puedes crear conjuntos de iconos, e importarlos desde tu disco duro. Como pueden ver, tengo los dos sets que vamos a estar usando cargados aquí. Se pueden ver todos los iconos, se puede buscar un icono específico, y una vez que lo encuentras, es realmente sencillo. Simplemente haz clic con el botón derecho, puedes copiarlo, y luego puedes ir a Figma o cualquier software de diseño que estés usando y simplemente pegarlo en. O puedes hacer clic y arrastrar, eso va a hacer exactamente lo mismo. Entonces estas son las herramientas que te recomiendo obtener. Pero si no quieres instalar nada más en tu computadora, eso está totalmente bien. Digamos que queremos descargar este conjunto de ionicon. Se va a descargar un archivo, y una vez que desempaques eso, solo te da esta lista de archivos SVG. Simplemente puedes agarrar el archivo que quieras y arrastrar y soltar en Figma, y ya estás listo para ir. En este punto debes tener las imágenes e iconos todos listos para salir. Debido a que estamos trabajando para un producto ficticio, obviamente estamos usando algunas imágenes de marcadores de posición. Pero recuerda que en un proyecto real usarías imágenes que son relevantes para ese producto específico. Siéntase libre de usar las imágenes que proporcioné o descargar las suyas propias. Si crees que podrías encontrar imágenes o iconos que funcionen mejor para tu diseño, por todos los medios, adelante y hazlo. Me encantaría ver diferentes resultados en la galería del proyecto. Ahora, asumiendo que tienes todo configurado y eso incluye color, tipografía e imágenes, estamos listos para pasar al diseño de página real. Estas páginas de aprendizaje están divididas en varias secciones, y abordaremos una sección a la vez en el resto de esta clase. Empezaremos con la sección de héroes, y eso se acerca en la siguiente lección. Nos vemos ahí. 6. encabezado y fondo héroe y fondo: Bienvenido de nuevo a la clase. En esta lección, estamos empezando el diseño real de la página. Hasta el momento nos hemos estado preparando, preparando todo incluyendo colores, imágenes tipográficos. Ahora estamos listos para sentar los primeros pixeles. Ahora empezaremos con la sección de héroes. Esto es bastante complejo y lo dividiremos en dos partes. En esta parte, vamos a estar agregando la navegación del logotipo y también vamos a crear un fondo bonito para ello. Si estás listo para irte, empecemos. De vuelta en figma, pasaremos a la página principal de diseño y empezaremos por crear un marco. Para ello, podemos usar el atajo F para marco y esto activa esta barra lateral derecha donde puedes elegir un tamaño de marco predefinido. Esto viene en varios formatos que van desde tamaños de escritorio hasta tamaños de tabletas y teléfonos. Se puede ver el tamaño en píxeles aquí mismo en el lado derecho. También puede elegir entre algunos tamaños de papel comunes y tamaños de redes sociales. O si quieres un tamaño personalizado, simplemente puedes hacer clic y arrastrar para crear el marco a tu tamaño deseado. Si quieres cambiar el tamaño después, todo lo que tienes que hacer es seleccionar el marco ya sea del lienzo o de la lista de capas y cambiar las propiedades de ancho y alto en este inspector de lado derecho. En mi caso, voy a hacer estos 1600 píxeles de ancho y unos 2000 píxeles de alto. En última instancia, va a terminar mucho más grande y más alto que esto. Pero como punto de partida, esto es más que suficiente. Podemos hacer doble clic aquí o podemos hacer doble clic aquí para renombrar esto. Voy a decir Escritorio. Ahora definamos una cuadrícula de columnas. Si no estás muy familiarizado con el uso de rejillas en el diseño web, es muy sencillo. Una cuadrícula de columnas es básicamente una lista de columnas verticales que se pueden utilizar para alinear elementos o dimensionar elementos. Entonces si estás pensando en un diseño de tres columnas, se trata de alinear el contenido a tres columnas iguales en esa página. Déjame mostrarte a lo que me refiero. En figma, es realmente fácil agregar una cuadrícula de columnas. Simplemente seleccione el marco que desee, y vaya en el inspector y elija Rejilla de diseño. Simplemente haga clic en él o simplemente haga clic en el signo más. Hace exactamente lo mismo. De esta lista donde dice configuración de cuadrícula de diseño, se puede elegir entre rejilla que es ésta, Columnas que es lo que necesitamos o Filas que es lo mismo pero horizontal. Entonces vamos a elegir Columnas y por lo general irías por 12 columnas. Este es un número estándar porque 12 es fácilmente divisible por 2,3,4 y 6. A continuación establecerías un color para esta cuadrícula. Puedes ir con cualquier color que quieras, pero hazlo un color que te permita saber que esto en realidad es una cuadrícula y no forma parte del diseño real. También puede cambiar su opacidad aquí. En Tipo, elegiríamos Centro y luego definiríamos el ancho de cada columna, en mi caso, voy a ir con 72. Debajo de Canaleta, vamos a elegir 32. El canalón es básicamente la distancia entre estas columnas. Ahora obviamente siéntete libre de usar cualquier tipo de propiedades de cuadrícula que quieras. En mi caso, esto es lo que voy a estar usando. Ahora si en algún momento quieres ocultar la cuadrícula, puedes hacer clic en este icono de ojo aquí o si quieres quitarlo por completo, podemos hacer clic en el signo menos. También hay un atajo de teclado para ello, su Control G. Puedes activar y desactivar eso, pero puedes encontrar fácilmente el atajo de teclado correcto si vas al menú figma, Ver, Rejillas de diseño. Obviamente puede cambiarlo de aquí en adelante y apagado. Por lo que ahora se crea la cuadrícula de lay-out o la rejilla de columnas. Sigamos adelante. Para saber qué poner exactamente en esta zona de héroes, volvamos a referirnos a nuestro Wireframe. Podemos cambiar a esa página. Por cierto, hay una forma más rápida de hacer eso. Puedes presionar Página arriba o Bajar página en tu teclado si tienes esas teclas para intercambiar entre páginas. Esto funciona en Windows y en Mac OS. Es exactamente el mismo atajo de teclado. Entonces si vamos al Wireframe, podemos ver que el área de héroes, que es ésta de aquí tiene nuestro encabezado el cual contiene el logo y la navegación. Después tiene el contenido héroe, cual se compone de este objeto mediático y título, subtítulo y llamado a la acción. Ahora este pedacito lo abordaremos en la siguiente lección. Entonces, no nos preocupemos por eso ahora mismo. Pero en esta lección, vamos a añadir nuestro logotipo de navegación y también vamos crear un bonito fondo de aspecto para esta zona de héroes. Entonces así es como hacemos eso. Empecemos con ese trasfondo. Vamos una cabeza a esconder esta grilla porque no la necesitamos en este momento. Empecemos con una forma rectangular para esa pulsación “R” o puedes elegir de esta lista de herramientas aquí mismo y simplemente daremos click en el lienzo o podemos hacer clic y arrastrar y crear uno de un tamaño personalizado. Entonces hagamos uno que tenga el mismo ancho que nuestro lienzo. Empujémoslo hacia arriba y debajo de Relleno, elijamos un gradiente lineal. Ahora para obtener los valores de color correctos, voy a referirme de nuevo a la pestaña Color. Entonces voy a agarrar mi color primario y colocarlo aquí. Veamos cuál es, es éste. Entonces para el otro color voy a elegir mi segundo color primario que es este. Esto en realidad necesita ser 100 por ciento de opacidad. Ahora si no estás del todo contento con cómo se ve el gradiente, realidad puedes usar estos deslizadores para mover las paradas de color hacia arriba y hacia abajo, hacia la izquierda o hacia la derecha. Realmente depende de tu vista aquí. Entonces si quieres más de este morado, simplemente te moverías así. Si quieres más del azul, lo moverías así. Si quieres crear como un ángulo, puedes hacer click en estas asas individuales y puede moverlas hasta llegar a donde quieras. Entonces en mi caso, creo que sólo voy a hacer algo como esto. Eso debería ser bastante fuerte por ahora. Ahora lo que voy a hacer es, voy a seleccionar este rectángulo y lo voy a girar. Para ello, puede introducir un nuevo valor en el campo de rotación aquí. Vayamos con 16 grados. Está bien, eso es bastante bueno. Ahora voy a redimensionar esto para que llene mi página por completo, así. También voy a redondear las esquinas. Voy a añadir un gran radio de frontera de 64 píxeles. Ahora, cómo obtienes estos valores, realmente no importa. En mi caso, estoy usando el sistema de ocho puntos. 16, 64, estos son todos múltiplos de ocho. No importa para el ritmo vertical, pero sólo me hace más fácil recordar. Ahora puedes mover esto a la izquierda y a la derecha, arriba y abajo hasta que encontremos una posición adecuada para ello. También puedes activar la cuadrícula de diseño y alinearla a la cuadrícula, si lo deseas. Entonces en mi caso, sólo voy a dejarlo por ahí. Ahora. Algo más que voy a hacer es añadir una sombra de gota a esto. Para eso selecciónela, vaya a efectos, haga clic, seleccione drop shadow y seleccione este icono del sol. Para abrir la configuración. Para la configuración, voy a seleccionar 30 para desenfoque, cero x 20 para yEn cuanto al color, bueno voy a usar mi color gris principal. Copia desde aquí. Pega eso aquí y por una opacidad, voy a elegir 20 por ciento. Ahora, aquí hay un propina pro. Siempre que estés usando estos efectos, en realidad puede crear plantillas para ellos. Entonces con el elemento seleccionado, donde tuviste el efecto, haz clic en este botón de estilo y haz clic en el signo Plus y solo escribe un nombre. En mi caso, voy a decir drop shadow, crear estilo. Entonces lo que esto hace es, si tengo otro elemento por ejemplo, y quiero agregar exactamente la misma sombra de gota. Puedo seleccionar eso, ir a efectos y seleccionar drop shadow. Ahora tiene exactamente la misma. Ahora bien, si quiero cambiar la sombra de gota en ambos, puedo hacer clic en el o fuera de cualquier elemento y eso va a seleccionar mi lienzo. Aquí puedo encontrar estilos locales. Puedo seleccionar drop shadow, editar estilo y puedo cambiar sus propiedades aquí. A lo mejor quiero un color diferente. ¿ Ves cómo cambia en ambos elementos?. Ese es el poder de trabajar con estilos locales como estos. Hace que los estilos reutilizables sean muy efectivos. Ahora puedes hacer lo mismo con los gradientes, por ejemplo. Donde dice relleno, tal vez quiero guardar este gradiente para uso posterior. Puedo hacer click en el mismo color o el mismo botón donde dice estilo y bajo estilos de color, voy a golpear plus. Voy a escribir gradiente principal. Ahora, sumemos un poco más de interés visual a esta sección. Voy a seleccionar esto, Comando D, para duplicarlo. Voy a cambiar su rotación a 12 grados. Voy a hacer clic derecho y seleccionar enviar para atrás. Esto lo va a poner detrás de mi capa principal. Yo sólo voy a ajustar un poco su posicionamiento. Algo así. A lo mejor empujarlo un poco hacia abajo también. Voy a cambiar su capacidad general al 30 por ciento. Ahora, quiero mostrarles aquí algunos trucos geniales. Cuando tengas un elemento seleccionado, puedes presionar cualquier número entre uno y cero para cambiar su opacidad. Entonces si presiono uno, está estableciendo su opacidad de 10 por ciento a 20 por ciento, 3,4,5,6,7,8,9 y cero lo cambia a un 100 por ciento. Ahora si haces estos números en rápida sucesión, por ejemplo, tres cuatro. Esto cambia la capacidad a 34. Aquí hay otro ejemplo, 12, 76, 32. Si lo hago, tres y dos, cambia su opacidad al 30 por ciento y luego al 20 por ciento. Entonces en mi caso, dejemos esto al 30 por ciento. Ahora, hagámoslo otra vez. Vamos a duplicar. Esta sección principal. Cambiemos su rotación a 26 grados. Vamos a poner esto todo el camino en la parte de atrás. Para ello, puede hacer clic derecho y seleccionar enviar hacia atrás. Entonces de nuevo, haga clic con el botón derecho enviar hacia atrás. O puede hacerlo todo a la vez seleccionando enviar para volver. Eso lo va a poner todo el camino en la parte de atrás. Alternativamente, simplemente puede hacer clic y arrastrar el rectángulo desde el panel Capas. Para este bit, voy a cambiar su opacidad al 10 por ciento. Simplemente lo voy a mover a la izquierda y a la derecha, hasta que encuentre una posición adecuada para ello. Creo que eso se ve bastante bien. Ahora aquí hay otro consejo. Puede utilizar las teclas de flecha de su teclado para mover elementos. Arriba, abajo, mueve ese elemento de un píxel a la vez. Izquierda, derecha, hace lo mismo. Pero si mantienes pulsado el turno mientras haces eso, lo va a mover 10 píxeles a la vez. Esta es una forma muy rápida de mover objetos en tu lienzo sin usar el ratón. Eso se ve bastante bien. Ahora, para terminar esto, hagámoslo. Vamos a duplicar esto una vez más. Cambiemos esta rotación a 26. Pero esta vez vamos a moverlo adentro, a algún lugar así. Creo que eso se ve bastante bien. Ahora bajo relleno, voy a quitar mis gradientes principales y voy a añadir un relleno lineal de blanco a transparente. Entonces esto, en realidad es blanco, cero por ciento y en realidad cambiemos estos. > Entonces vamos de sólido a blanco a blanco transparente Blanco, y voy a cambiar su opacidad a cinco por ciento. Al hacer eso, acabo de obtener este efecto de aspecto muy bonito, donde empiezo con el blanco aquí y simplemente se desvanece a medida que sube. Incluso puedo hacer esto más pequeño, así. Con eso, podemos seleccionar todos estos comandos G o controlar G si estás en una PC para agrupar todos estos juntos, y llamémoslo el fondo. Con eso, se hace el fondo de héroe. Adelante y agreguemos el logo y la navegación para eso. Vamos a subir la cuadrícula de diseño y, abramos nuestros activos de marca. Vamos a agarrar nuestro logo blanco. Simplemente haga clic y arrastre. Vamos a posicionarlo en algún lugar de nuestra página. Ahora, el logo, Vamos a hacerlo 48 pixeles de altura. Este pequeño botón aquí limitará como proporciones. Significa que cuando se cambia un valor, ya sea ancho o alto, el otro valor cambiará de tamaño en consecuencia. Si desmarca esto, puede cambiar estos valores individualmente. Pero en mi caso, quiero hacer mi logo 48 pixeles de altura, por qué 48, porque estoy usando el sistema de cuadrícula de ocho puntos, por lo que cualquier elemento debe tener una altura que sea un múltiplo de ocho. Ahora voy a tomar mi logo y lo voy a posicionar para que sean 64 píxeles de este borde. Para ello, voy a mantener presionada Opción en Mac, pero puede mantener presionada Alt en una PC. Entonces en Windows. Voy a mover el cursor del ratón hasta que pueda hacer referencia a los bordes que quiero. Por lo que nota donde dice 71 píxeles aquí. Eso significa que el logotipo está, 71 píxeles de ese borde. Puedo usar mis teclas de flecha ahora en mi teclado para simplemente empujar en su lugar para que sean 64 píxeles ahora, desde ese borde izquierdo. También lo voy a colocar a 64 píxeles de arriba. Entonces para hacer eso y hacerlo más fácil para mí, puedo usar la tecla abajo dos veces. Ahora voy a mantener pulsado el turno y usar la tecla arriba tres veces. Porque si recuerdas mantener presionada la tecla Mayús mientras empujas, un elemento lo hará en incrementos de diez píxeles en lugar de uno. Entonces ahora mi logo está perfectamente posicionado, exactamente donde lo quiero. Ahora hagamos la navegación para eso. Empecemos con el elemento de texto. Puedes presionar T en tu teclado o hacer clic en este pequeño botón aquí. Voy a escribir en el primer elemento del menú. De acuerdo con nuestro alambre-marco. Contamos con cuatro elementos de menú: características, capturas de pantalla, testimonios, y precios. Entonces, en realidad una cosa que puedes hacer es agarrar estos enlaces individualmente, copiarlos desde el marco de cable y pegarlos aquí. ¿ Qué tan guay es eso? Ahora, por el color, vamos a estar usando, blanco, 90 por ciento. Para el texto, usaremos Brandon grotesque, que es la tipográfica de nuestros encabezados. 18 pixels regular. 24 pixels altura de línea. Entonces necesitamos posicionarlos a la misma distancia el uno del otro. Podríamos hacer esto manualmente seleccionando cada uno. De acuerdo, esto es un 24 pixeles. A lo mejor quería ser un 32 pixeles. Yo puedo hacer eso. Entonces tendrás que hacer lo mismo con el resto. Por lo general esto funciona. Pero hay una forma mucho más fácil de hacer las cosas y eso es usando el diseño automático. Esta es probablemente mi característica favorita en Figma. El diseño automático permite agrupar un conjunto de elementos y establecer la misma distancia entre ellos o alrededor de ellos. Es lo mismo que usar margen y relleno en CSS. Por lo que para hacer eso, seleccionarías todos los elementos que quieras agregar. Puedes hacer clic en el diseño automático o puedes pulsar el turno A tanto en Mac como en Windows. O puede hacer clic con el botón derecho y seleccionar, Agregar diseño automático. Entonces esto va a crear el nuevo marco que contiene todos tus elementos. Entonces por defecto, mira cómo se posicionan tus elementos. Los míos son uno tras otro, por lo que muestra horizontal, pero puedo cambiar esto a vertical si quiero. Esta es la parte genial aquí. Puedo establecer el relleno horizontal. Por lo que esto agregará espacio a la derecha y a la izquierda. Puedo agregar relleno vertical, que agregará espacio en la parte superior e inferior, y puedo especificar espaciado entre elementos. Esta es la que nos interesa ahora mismo. Entonces déjame deshacer, y voy a especificar 24 píxeles. Por lo que ahora mis elementos están perfectamente separados. Esta es una característica que te recomiendo encarecidamente uses todo el tiempo porque solo hace que tu trabajo sea mucho más fácil. Entonces con eso, vamos a agarrar nuestro menú principal y lo vamos a posicionar. Lo vamos a alinear con la cuadrícula. No estoy seguro si puedes verlo aquí de manera adecuada. Pero ahora está alineado a la grilla y Figma en realidad es muy inteligente al respecto. Se encaja automáticamente en su lugar. Después puedo seleccionar mi menú y mi logotipo. Puedo ir aquí al panel de alineación y puedo establecer una línea centros verticales. Fácil como pastel. Con eso, la primera parte de nuestro héroe está completa. Tenemos el logo, la navegación, y el fondo. [ inaudible] la primera parte Ya está completa la primera parte de la sección de héroes. Si no lo seguiste y trabajaste junto a mí, adelante y crealo, ahora mismo para que estés listo para el siguiente paso. Como de costumbre, siéntete libre de aportar tu propio estilo o tu propia visión a este diseño. Me encantaría ver estos resultados en la galería de proyectos. Ahora, asumiendo que diseñaste con éxito en esta primera parte del área de héroes, creo que es hora de terminarlo. Nos ocuparemos en la siguiente lección, donde vamos a añadir el contenido del héroe. Entonces te veré ahí. 7. Contenido héroe: Bienvenido de nuevo a la clase. En esta lección, vamos a terminar de diseñar la sección de héroes. Anteriormente, creamos la estructura para ello con la cuadrícula, el logotipo, la navegación, y el fondo. Ahora, es momento de agregar los contenidos. Empecemos. El contenido del héroe, si miramos el wireframe, está compuesto por un objeto mediático que puede ser imagen, video lo que sea, y un título, subtítulo y esa es opción sin llamar. Tenemos este botón, y este enlace que probablemente sólo lleva a un video pop up, me imagino. Para facilitarnos las cosas, seleccionemos todos estos elementos. En realidad, vamos a seleccionar todo este grupo donde diga contenido, y sólo voy a pegarlo aquí. Ahora, vamos a abordar primero el rumbo. Aquí tienes un consejo rápido para ti. Si desea seleccionar un elemento que está dentro de un grupo, normalmente deberá seleccionar el grupo y luego hacer doble clic para ingresar dentro del grupo. Pero si quieres hacer eso sin hacer doble clic, puedes mantener presionada la tecla Comando en Mac, o Control en Windows. Eso te permitirá hacer clic y seleccionar cualquier elemento independientemente de lo profundo que sea en la estructura de capas. Para el rubro, vamos a cambiar su color a blanco. Entonces vamos a volver a nuestra tipografía y vamos a usar el estilo del Título 1. Ahora, puedes echar un vistazo a estos valores y comprometerlos a la memoria y luego replicarlos en el otro lado, o puedes hacer clic derecho, ir a Copiar/Pegar, Copiar propiedades, y luego puedes volver al diseño principal, derecha- click, Copiar/Pegar, Pegar propiedades. Eso cambiará todo, la familia de fuentes, el peso, el tamaño de la fuente, la altura de la línea, todo. Ahora todo lo que tenemos que hacer es básicamente cambiar el color hacia atrás y vamos a subir la cuadrícula, vamos a alinear esto a la cuadrícula, y vamos a cambiar el ancho de este elemento para que se extienda en siete columnas. Tenemos 1, 2, 3, 4, 5, 6, 7. A continuación, apuntemos este bit. Para esto, volvamos a la tipografía y seleccionemos un estilo que nos funcione mejor. En nuestro caso, probablemente estemos usando el epígrafe 5. Haga clic derecho, Copiar/Pegar, Copiar propiedades, volver atrás y Pegar propiedades. Ahora bien, esto realmente no funciona tan bien en medio, así que volvamos a cambiar a regular. Se pueden hacer estos cambios, no hay problema. Vamos a cambiar el tamaño de esto también y vamos a cambiar realmente a ancho automático. Eso significa que el cuadro de texto cambiará el tamaño al ancho máximo del texto dentro del mismo. Cambiemos su color a blanco, y usemos un tinte más moderado, 60 por ciento, digamos. Impresionante. Estamos haciendo grandes avances. Ahora, veamos este botón. Para este botón, quiero que diga el texto, descarga gratis, pero también me gustaría una linda flecha para sentarse justo al lado. Te voy a mostrar una forma increíble de crear botones en Figma que te permite escribir cualquier texto que quieras en ellos y cambiarán de tamaño automáticamente. Eso es con la ayuda de nuestro amigo de confianza auto layout. Lo que voy a hacer es seleccionar el texto en sí, y en realidad voy a mover esto afuera, y voy a desagrupar esto. Con el Texto seleccionado, presiona “Mayús+A” para agregar diseño automático, y voy a seleccionar 32 píxeles, relleno horizontal, 16 píxeles, relleno vertical, y 16 píxeles espaciado entre elementos. Ahora lo que puedo hacer es agregar un color de relleno y voy a agregar relleno blanco 100 por ciento. También voy a agregar un radio de esquina de 100 píxeles. ¿ Sabes por qué hice eso? Porque si vamos a echar un vistazo al resumen del proyecto, bajo consideraciones de diseño, el cliente nos dice que, “Oye, nos gustan los botones de píldora y fantasma”. Un botón de píldora es el que tiene esquinas muy redondeadas. Parece una pastilla real. Con eso hecho, puedo seleccionar el texto dentro de él y puedo ajustarlo a mi color primario. Vamos a Colores, seleccione mi primaria, volvamos a pegarla. Ahora en lo que se refiere al texto, vamos a usar Brandon Grotesque. Déjame en realidad acercar aquí. Vamos a usar negrita 18 píxeles, 24 para la altura de línea, y deberíamos estar bien para ir. Ahora, también le voy a añadir una sombra de gota. Voy a seleccionar mi marco, que voy a llamar Button, y bajo efectos, voy a elegir Drop shadow. El mismo que usamos para estos elementos aquí. Lo último que tenemos que hacer aquí es agregar una bonita flecha. Para eso, voy a ir a mi app aquí, voy a buscar flecha, y vamos a elegir la flecha derecha del conjunto Microns. Así que haga clic y arrástrelo y suéltelo. Aquí, lo vamos a mantener en 24 píxeles y voy a golpear “Command+X”. Voy a seleccionar este texto y Comando+V+V o Control+V para en Windows. Esto lo va a pegar justo al lado de ese texto dentro de mi marco de botones. Todo lo que tengo que hacer ahora es cambiar el color al mismo color que el texto. Aquí, te voy a dar otro pro tip. Al trabajar en Figma, y quieres cambiar el color en múltiples elementos, puedes seleccionar el elemento padre y cuando veas colores de selección, esto básicamente te dará los colores de cada elemento en esa selección. Si quiero cambiar el color de esta flecha al color de este texto, todo lo que tengo que hacer es copiar el color del texto, pegarlo, y estoy bien para ir. Ahora nuestro botón está completo, y debido a que estoy usando el diseño automático, puedo cambiar el texto de este botón, así y el botón cambiará de tamaño automáticamente. ¿ Qué tan guay es eso? Por supuesto, también puedo cambiar el relleno y la distancia entre artículos. Yo puedo hacer esto, y yo puedo hacerlo. Yo puedo hacer esto. Bueno, ese fue un valor muy grande, pero se obtiene el punto. Obtengo un control muy fino sobre cómo se ve esto y es súper fácil de usar. Ahora, veamos sobre este enlace de video introducción. Para ello, voy a estar usando mi color secundario. Seleccionemos eso, copiarlo, pegarlo, teclear cara. Vamos a utilizar de nuevo Brandon Grotesque, 18, 24 y Bold. Lo último que hay que hacer es agregarle un pequeño ícono también, porque quería mostrar el hecho de que, oye, si haces clic en este enlace se va a reproducir un video. Por lo que necesitamos un ícono que diga jugar. Tenemos éste o si vamos a Ionicons, vamos a conseguir éste. Arrastra y suelta. Voy a cambiar el tamaño a 24, así y voy a seleccionar el icono y el texto. Voy a presionar “Shift + A” para crear un diseño automático. Ahora, al hacer esto, puedes alinear elementos de varias maneras diferentes. Si el diseño automático era horizontal, puede alinear elementos en la parte superior, central o inferior. Si su diseño automático está configurado en vertical, puede alinear elementos a la izquierda, al centro y a la derecha. Esto es lo que está haciendo. También puedes optar por subir un elemento o bajar. Por supuesto, si el diseño está en modo horizontal, puedes mover elementos a la izquierda y a la derecha. También puedes usar los atajos de teclado izquierdo, derecho, superior, inferior. En mi caso, voy a elegir alinear este icono en el medio y también este texto en el medio. En cuanto a la distancia entre artículos, voy a elegir 16 píxeles. Voy a asegurarme de que estoy usando el mismo color en este ícono. Ahora lo que puedes hacer es agrupar estos dos elementos con disposición automática. Puedes pulsar “Shift + A” y eso va a crear otro fotograma para ambos. Puede establecer su espaciado entre elementos en 32. Por defecto, esto alineará estos elementos en el medio. Ahora, quiero la misma distancia entre estos tres elementos. Lo que puedo hacer es seleccionarlos todos manteniendo pulsado “Shift”. Puedo hacer “Shift + A” para agregar auto-layout. Simplemente voy a cambiar la distancia entre ellos o el espaciado entre ellos a 32. Además, me voy a asegurar que todos estos estén alineados a la izquierda. Al igual que así. Ahora lo último que hay que hacer es posicionar este contenido a una distancia respetable del encabezado. En nuestro caso son 96 píxeles, que por cierto es un múltiplo de ocho. En realidad voy a mantener este posicionamiento. Pero si quieres posicionarlo de manera diferente, utilizarías las teclas de flecha arriba y abajo. Enfriar. Ahora bien, esta es la primera parte del contenido. La última parte es agregar este objeto mediático. Así es como vamos a ir por eso. Vamos a empezar por crear una forma simple y vamos a añadir un radio de borde de 8, una altura de 240 píxeles. ¿ Y el ancho? Bueno, para el ancho, puedes ir básicamente cualquier ancho que quieras. Pero lo que me gustaría hacer es que me gusta usar una proporción de 16 por 9. Tengo un pequeño plugin genial para eso. Se llama Aspectos. Esto lo puede encontrar en el directorio de plugins de Figma. Simplemente busca aspectos y lo encontrarás. Esto me permite seleccionar un elemento, elegir una relación de aspecto y elegir una propiedad para cambiar el tamaño en función de esa relación de aspecto. En mi caso, quiero cambiar el ancho porque la altura está establecida en sus dimensiones correctas. Voy a golpear aplicar y esto cambió el ancho a 427 píxeles. Ahora tengo una forma perfectamente dimensionada para una proporción de 16 por 9. Con el seleccionado, lo que puedo hacer ahora es hacer clic en él y debajo de Relleno, seleccione “Imagen”, elija “Imagen”. Puedo abrir mi kit de inicio de página de aterrizaje, ir a las imágenes de marcador de posición y puedo elegir cualquiera de las imágenes de este kit de interfaz de usuario. Escojamos “Principal”. Aquí tienes varias opciones de cómo se comporta la imagen. Puedes elegir entre Relleno, Ajuste, Recortar y Azulejo. En mi caso, sólo lo voy a dejar en Fill. Entonces voy a seleccionar esto y voy a añadir una sombra de gota. Al igual que así. Ahora lo que quiero hacer es crear una bonita cuadrícula a partir de estas imágenes. Voy a seleccionar “Duplicar” y voy a posicionar esto a 32 píxeles del otro. Vamos a duplicar de nuevo, 32 píxeles. Hagámoslo otra vez. Hagámoslo otra vez. Hagamos una tercera columna. Al igual que así. Ahora, sigamos adelante y agreguemos aquí algunas imágenes frescas. En realidad para hacerlo más interesante, esto es lo que haremos, eliminaremos aquí las imágenes superiores. Vamos a subirlos así. Simplemente agrega un poco de un interés más visual. Cambiemos las imágenes ahora. Cuando tienes una forma de rectángulo con un relleno de imagen, en realidad puedes hacer doble clic en ella para abrir el diálogo de relleno. Entonces elegamos otra imagen, tal vez ésta y hagamos lo mismo por el resto. Está bien, así que una vez que estés contento con el resultado, esto es lo que haces. Seleccionas todos estos y vas justo aquí donde dice componentes y selecciona crear componente. Ahora, los componentes y el fig-ma permiten reutilizar ciertos elementos. Al realizar cualquier cambio en el componente principal, también se cambiarán los componentes secundarios. Si tuviera que duplicar este componente en otra página y haría cambios a esta instancia maestra esos cambios también se reflejarán en las otras páginas. Ahora que tengo eso convertido en un componente, puedo seleccionarlo y puedo rotarlo. Vamos a utilizar la misma rotación de 16 grados que usamos en estos elementos. Recuerda este número 16 grados. Estaremos usando esto con bastante frecuencia en el diseño de esta página. Ahora está rotado. Puedo moverlo en su posición final y esto realmente depende de ti y cómo quieres que se vea. En mi caso probablemente sólo voy a dejarlo algo así o algo más que pueda hacer es lo siguiente. Puedo cambiar la imagen aquí a la imagen principal. Puedo elegir ocultar esta imagen por completo e incluso puedo deslizarla en algo como esto y puedo moverla hacia abajo para que el texto aquí tipo de entrelaze con esta imagen tal vez un poco más así. Nuevamente, se trata de una cuestión de preferencia personal pero creo que eso se verá bastante bien. Adelante y juguetea con esto, juega, ve qué te queda mejor. Ahora hablando de lo que mejor se ve, echa un vistazo más de cerca a esta sombra. ¿ Ves cómo se corta justo aquí? Eso se debe a que cuando estás agregando o cuando estás creando un marco con diseño automático, suele echar un vistazo a esta casilla donde dice contenido de clip y que básicamente recortará cualquier contenido que esté fuera de los límites de ese marco. En nuestro caso, la sombra está fuera de los límites. Puedo desmarcar esto y luego podemos entrar aún más profundo y desmarcar esta casilla y ahora, ver cómo aparece la sombra. Esto es algo que puedes hacer cuando veas que esto sucede. Cuando una imagen que debería estar fuera de los límites de tu marco no aparece generalmente este es el culpable aquí mismo. Está bien, hay una última cosa pequeña que tenemos que hacer aquí. Aquí mismo en la parte inferior vamos a añadir un pequeño ícono que hará saber a los usuarios que, 'hey, puedes desplazarte hacia abajo por esta página'. Para crear ese inicio con un rectángulo. Vamos a ajustar su ancho a 24, es altura a 48, su radio a 100, y en realidad vamos a quitar el color de relleno y vamos a añadir un trazo o un borde, y el borde va a ser blanco. Va a ser dentro de un píxel y luego dentro de eso vamos a crear un bonito círculo usando la herramienta de elipse. Al usar la herramienta de elipse podemos liberarla de la mano o podemos mantener pulsado turno y se va a chasquear al mismo ancho y altura. Hagamos esto muy pequeño, seis por seis debería hacer el truco. Llenar blanco, y luego simplemente moverlo dentro de mi pequeño ícono aquí. Se puede establecer en ocho píxeles desde la parte superior. Eso debería hacer el truco. Selecciona ambos, manda a G para agruparlos todos juntos, y nombra scroll o lo que quieras que sea. Ahora vamos a subir la cuadrícula y alinémosla a la cuadrícula. Al igual que así. Obviamente no tienes que alinearlo a la cuadrícula si sientes Se ve mejor en una posición particular como así puedes hacer eso-sin problema. hecho de que estemos usando una cuadrícula no significa que tengamos que alinear cada cosa a ella. Esa es la sección de héroes terminada. Está bien, ahora es tu turno de terminar la sección de héroes. Si ya lo has hecho, fantástico. Si no, adelante, mira de nuevo esta lección si es necesario y completa esta sección. Ahora, encontrarás que, esto es algo muy interesante que he estado significando decirte, encontrarás que en la mayoría de los casos, el héroe o la parte de cabecera de un sitio web es el más difícil de hacer. No sé por qué es eso, pero por lo general una vez que lo haces es simplemente navegar suave desde ese punto en adelante. Creo que es porque después de completar el encabezado o la sección de héroes tienes una base sobre la que construir, ¿verdad? Tienes un punto de partida. Entonces creo que mentalmente solo hace que sea más fácil para ti poner las cosas en marcha. Ya estamos listos para seguir adelante. El siguiente apartado de nuestra lista es el primer apartado de características. Abordaremos eso en la siguiente lección. Nos vemos ahí. 8. Primera sección para las características: Bienvenido de nuevo a la clase. En esta lección, vamos a diseñar la primera sección para las características. Aquí es donde estaremos utilizando la mayoría de los iconos y también jugaremos mucho con los colores. Esto debería ser divertido así que empecemos. Empecemos echando un vistazo al marco de alambre para que sepamos exactamente lo que tenemos que hacer. Entonces esta es la sección que necesitamos diseñar. Como puedes ver, comenzamos con el título de la categoría, luego una pequeña descripción y luego cada característica se presenta así. Tiene título y tiene una descripción. Algunas de las características solo están disponibles en la versión Pro, por lo que necesitamos diseñar algún tipo de insignia para eso. También añadiremos algunos iconos. Si recuerdo correctamente del briefing del proyecto, cada una de estas categorías de características tiene algún tipo de subtítulos. Entonces si abrimos el resumen del proyecto, y miramos las características, hay una categoría de características, y aquí hay otra categoría de características, la que necesitamos en este momento “Presupuesto hecho simple”. tenemos un subtítulo, se llama “Presupuesto sobre”. Por lo que necesitamos asegurarnos de que agregamos eso en algún lugar también. Entonces en realidad vamos a seguir adelante y agarrar eso. Vamos a copiarlo y vamos por aquí, vamos a pegarlo. También vamos a conseguir casi todo el contenido que tenemos aquí. Nos preocuparemos de peinarlo en tan solo un poquito. Otra cosa que me gustaría hacer es aumentar la altura de este marco. Ahora empecemos desde arriba, ¿de acuerdo? Con esto, llamémoslo subtítulo. Ahora porque esto necesita ser muy discreto, por lo que no hace falta que salga tanto. Vamos a volver a nuestra tipografía, y vamos a estar usando los pequeños estilos. Así que adelante y copia las propiedades de esto y pegarlas aquí. Además, vamos a cambiar su color. Creo que deberíamos usar este tipo secundario de color rojo coral. Así que adelante y copia eso, pega eso, y deberíamos estar bien para ir. Ahora, vamos a subir la grilla. En realidad alineemos esto con la cuadrícula y posicionémoslo en comparación con este elemento en unos 120 píxeles. No tiene por qué ser perfecto. En algunos de los casos, es más importante que todo el diseño se vea correctamente en lugar de apegarse a ese estricto conjunto de reglas. Por lo que ahora mismo lo posicioné a 120 píxeles de este elemento de aquí. Pero si no se ve bien, podría simplemente empujarlo un poco hacia abajo. No tiene que ser pixel perfecto. Ahora pasemos a los siguientes elementos. En primer lugar en realidad, vamos a seleccionar esto, vamos a desagrupar todo. Ahora este rubro, veamos qué estilo debemos usar para ello. Estoy pensando que tal vez encabezar tres o cuatro, pero el encabezamiento tres parece más apropiado, así que copiemos eso y peguémoslo y usemos también el color adecuado para ello. Entonces iremos a nuestro gris, agarraré esto y lo pegamos aquí. Vamos a usar gris 100. Por cierto, cuando digo gris 100, significa gris 100% opacidad. Si digo gris 40, significa este valor, este color aquí mismo, gris 40% opacidad. Entonces sólo ten eso en cuenta. Alineemos esto adecuadamente aquí también. En realidad empujemos esto hacia arriba y dejemos unos 32 píxeles de distancia entre estos dos elementos. siguiente paso es este elemento aquí mismo, que también debe colocarse a 32 píxeles del título principal. En realidad, voy a redimensionarlo primero. Yo quiero que esto ocupe cerca de cinco columnas de cuadrícula. Entonces vamos a redimensionarlo hasta aquí. Ahora para el estilo real, volvamos a la tipografía y estoy pensando en usar el encabezamiento cinco. encabezamiento cinco debe hacer el truco. Pero en realidad quitaremos este peso medio porque es un poco demasiado. Ahora si pienso en esto, en realidad usamos el mismo estilo aquí, ¿no? 25,32 para la altura de línea. Entonces seamos consistentes. Regular y usaremos este color. Pero creo que vamos a usar un tinte de ese gris. Entonces veamos, tal vez este, este es 50 o 60. Sí, creo que éste se ve bien. Entonces hagamos gris 60. Enfriar. Entonces ahora lo que puedo hacer es simplemente seleccionar todos estos, cambiar A para agregar auto-layout. Ahora cada vez que cambie este texto, los elementos que lo rodean también se verán afectados. Esta es una forma muy eficiente de trabajar en Figma. Ahora volvamos nuestra atención a las características reales. Lo primero que voy a hacer es cambiar el color y la familia de fuentes y toda la información de texto. Entonces para estos títulos, necesitamos usar la tipografa de encabezado, pero para el texto necesitamos usar el tipo de letra de cuerpo y en este momento estos son como un elemento de texto, es solo el título, entrar, y luego el texto en sí. Tenemos que dividir eso, así que lo que voy a hacer es quitarle eso de ahí, duplicado. Básicamente estoy poniendo el título en su propio elemento de texto. Voy a configurar Auto Wid. a ello. Entonces lo voy a agrupar con esto y seleccionar turno A. Para el espaciado entre elementos, voy a seleccionar 16 píxeles. No necesitamos ningún relleno aquí. Ahora voy a alinear esto con mi cuadrícula, y el texto va a tener tres columnas de ancho o 280 píxeles. Cambiemos el color. Para este bit, voy a usar el Título cinco. Copia las propiedades desde aquí y pega las propiedades, y nuevamente solo asegúrate de actualizar el color del texto. Para el texto, vamos a estar usando el estilo de párrafo. Copia las propiedades de eso, pegarlas aquí, y asegúrate de actualizar también el color. Para los párrafos, Tisa Sans Pro, 18 píxeles, tamaño de fuente y 24 altura de línea. Otra cosa que quiero hacer, es bajar un poco la opacidad en estos. Voy a usar 80%. Déjame mostrarte cómo se ve eso. 80% en el título y 60% en el texto. Básicamente tenemos que hacer lo mismo con el resto de los artículos. Voy a volver a hacer uno de estos ítems para que veas el proceso, y luego voy a adelantar rápido por los otros. Lo primero es lo primero, necesitamos separar el título de la descripción. Entonces necesitamos hacer el título Auto Widch. Seleccione el título y la descripción. Desplazar A para crear Diseño Automático. Establezca el espaciado en 16 y, a continuación, copie las propiedades del texto, peguelas. Copia las propiedades del título, y pegarlas. Eso es todo. Entonces ahora avancemos rápido hasta que haga el resto de los cambios. Ahora que aquí todo está bien configurado, sigamos adelante y agruparemos estos. Tenemos beneficiarios, categorías y podemos poner en transacciones programadas aquí. También alinemos estos a la cuadrícula. Entonces la forma en que quiero que esto suceda es, quiero que los elementos de texto reales abarquen tres columnas, entonces voy a dejar una columna en blanco. Entonces el siguiente grupo comenzará en la siguiente columna, y así sucesivamente y así sucesivamente. En realidad una última cosa que necesito hacer aquí, es cambiar el tamaño de todos estos elementos de texto a 280 píxeles. Ahí vamos. Entonces debería ir relativamente, simplemente así. Vamos a seleccionarlos todos, vamos a alinearlos a la parte superior, luego volverlos a seleccionarlos, Comando o Control G para crear un grupo. A continuación va a ser, digamos presupuestos múltiples, entonces tal vez seguimiento de objetivos y sincronización entre dispositivos. Por último, tendremos reportes y sincronizaremos con tu banco así. Ahora selecciónelos, alinéelos al comando superior G. Selecciónelos, alinéelos al comando superior G para agrupar. Ahora esto es lo que quiero. Quiero 64 píxeles espaciados entre cada uno de estos grupos. Me refiero al espaciado vertical, así. También 64 píxeles entre estos y este grupo aquí. Eso es realmente fácil de hacer con el diseño automático. Así que selecciónalos todos. Shift A, 64 píxeles aquí, y luego asegúrate de que todo esté alineado a la izquierda, así. Ya estoy bien para ir. Lo último que tenemos que hacer aquí es agregar los iconos. Agrega una insignia Pro en lugar de estas piezas de texto aquí, donde dice Pro. Vamos a seguir adelante y crear esa insignia Pro, y para eso, voy a elegir la herramienta Rectángulo o presionar R en el teclado. O en realidad, hagámoslo de nuevo con el diseño automático. Entonces T for Text tool, voy a decir Pro, para la tipografía, voy a usar Brandon Grotesque, negrita, 14 pixels y también 5% espaciado entre letras. Aquí tienes un consejo pro, Cuando estás trabajando con letras mayúsculas o palabras mayúsculas, con un tamaño de fuente bajo; para mejorar la legibilidad, siempre debes aumentar el espaciado entre letras. Solo para darte un ejemplo, aquí está sin espaciado entre letras y aquí está con espaciado entre letras. Ve cómo puedes leer este bit más fácilmente que este bit. Por eso, también agregamos espaciado entre letras a este estilo aquí o a estos elementos de texto. Ahora con el seleccionado, cambia A para crear un marco a su alrededor. Añadamos un relleno. El relleno va a ser nuestro color primario, luego 100 para el borde radioso Vamos a añadir quizás ocho píxeles relleno horizontal, y tal vez cuatro píxeles en relleno vertical. No necesitamos ningún espaciado aquí. El texto en sí lo vamos a hacer blanco. Creo que deberíamos estar bien para ir. De lo que podemos hacer aquí, podemos disminuir aún más el tamaño de la fuente y con el espaciado de letras también. Vamos a cada uso 16 píxeles para el espaciado entre letras. Creo que eso se ve un poco mejor. Entonces con esto, porque lo vamos a usar en múltiples lugares, siempre es una buena idea crear un componente. Así que selecciónela y vaya a crear componente o use el atajo de teclado. Entonces ahora, voy a golpear el Comando X, para cortarlo, y voy a empezar a insertarlo, en lugar de esta pieza de texto. Por lo que múltiples presupuestos, Comando V y luego para crear un diseño automático con solo estos dos elementos, los voy a seleccionar y presionar Shift A y luego voy a seleccionar el modo a horizontal. Voy a asegurarme de desmarcar el contenido del clip. Voy a alinear esta insignia al centro y asegurarme de que esto esté alineado al centro también. En cuanto al espaciado, 16 píxeles son suficientes. Entonces ahora, voy a seguir adelante y hacer lo mismo por el resto. Está bien. Frijoles frías. Entonces ahora que tenemos prácticamente todo en su lugar, todo lo que necesitamos hacer ahora es agregar los iconos. Entonces, para hacer eso, podemos empezar en nuestra configuración de icono. Voy a estar usando el set ionicons. Entonces busquemos gente. Voy a estar usando, People Outline, Copiar eso, Pegar en y voy a redimensionarlo. Ahora, aquí hay una situación con la que podrías encontrarte cuando estás usando figma en ciertos elementos SVG. Al importar al figma y cambiar el tamaño de la forma normal con la herramienta Mover seleccionada. Ya verás que las formas ahí dentro o los trazos de las formas se vuelven muy gruesas. Eso no es algo que quieras hacer. En cambio, debes subir aquí y seleccionar escala o K. Si haces eso, verás que el elemento ahora se redimensiona correctamente. Entonces vamos a redimensionar esto, a 24 píxeles de altura. Algo así. Entonces ahora voy a alinear esto a la izquierda. También puedes presionar el teclado izquierdo Arrow y yo también lo voy a mover hacia arriba, empujando la Flecha arriba en el teclado. Todo lo que queda ahora por hacer es encontrar un bonito color para ello. Para eso, vamos a ir a nuestros confiables colores terciarios. Esta es una de las razones por las que los estamos usando. Entonces, en realidad es tomarlos en orden. Voy a Copiar ese color, Pega eso aquí y, estamos bien para ir. Entonces ahora todo lo que queda por hacer, es llenar el resto de los elementos con iconos. Voy a estar usando exactamente el mismo procedimiento. Voy a hacer una más y luego voy a avanzar rápido. Entonces para las categorías, tal vez estamos buscando alguna grilla. A ver si podemos encontrar. Voy a usar Esquema de cuadrícula. Entonces Copia eso. Selecciona el texto o el elemento donde quiero Pegar en mi otro elemento. Comanda V y luego K para redimensionar esto a 24 píxeles de altura, así. Muévete hacia arriba y vamos a escoger un bonito color para ello. A lo mejor no lo sé, este morado. Realmente no importa. Simplemente escoges los colores que crees que se ven mejor. Está bien. Entonces ahora permítanme avanzar rápido y llenar el resto de los iconos. Está bien. Eso no estuvo tan mal. ¿Fue? Proceso bastante rápido, sobre todo cuando lo estás viendo en el avance rápido. Pero todo bromeando a un lado, es un realmente simple una vez que te pones el colgado de la misma, una vez que creas uno o dos elementos, es solo enjuagar y repetir para hacer el resto. [ MÚSICA] Muy bien, en la primera sección de largometrajes ya está completa. Ahora es tu turno. Si aún no lo has hecho, adelante y crealo, ahora mismo. Usé un enfoque de tres columnas aquí, pero podrías hacer las cosas de manera diferente. ¿ Por qué no usar dos columnas o cuatro columnas? Pruébalo. Ve cómo cambia el diseño, cuando estás arreglando estos elementos de manera diferente. Entonces ahora, una vez que hagas eso, estás por supuesto listo para pasar a la siguiente lección. En la siguiente lección, vamos a crear otra sección para las características, pero esta vez de una manera diferente. Por lo que espero con ansias verte ahí. 9. Segunda sección para las características: Bienvenido de nuevo a la clase. En esta lección, vamos a diseñar el segundo conjunto de características o la segunda sección para las características, quieras llamarlo y lo haremos de una manera diferente a la primera. Ahora, cuando estás diseñando una página de aterrizaje como este o cualquier tipo de sitio web de presentación, es muy importante variar la forma en que estás mostrando estas características, y si lo haces, te aseguras de mantener vivos los intereses del usuario. Imagina tener que mostrar 30 características en una página. Ahora si tomas esas 30 características y las has tirado todas en una lista, por ejemplo, solo va a ser aburrido. Nadie va a leer eso. En cambio, si tomas diez de ellos, los exhibes tal vez en una cuadrícula con algunos iconos como lo hicimos y luego tomas los otros diez u otros diez y los muestras más abajo de la página de una manera diferente y luego te tomar los últimos diez y mostrarlos aún más abajo de la página, tal vez con algunas imágenes o ilustraciones acompañantes. Bueno, ese es un enfoque mucho mejor porque va a mantener al usuario comprometido y el usuario va a digerir ese contenido mucho más fácil. Entonces en esta lección, vamos a usar un diseño diferente para el segundo conjunto de características. Empecemos. Echemos un vistazo a la estructura alámbrica para ver exactamente lo que tenemos que hacer. Por lo que tenemos esta categoría de características con esta descripción y luego cuatro características. Ahora en el marco alámbrico, agregué esta caja negra como marcapasos para una imagen. Podemos usar una imagen aquí o simplemente podemos usar el texto. De verdad depende de nosotros. Entonces esto es lo que vamos a hacer. Vamos a copiar todos estos, todo el texto que es, y lo vamos a pegar en nuestro diseño principal así. Pero en realidad antes de que hagamos eso, hagamos un poco de limpieza. Creo que es realmente importante que trabajemos lo más limpiamente posible. Entonces vamos a nombrar estas características o en realidad cuenta con una, y luego puedes seguir adelante y cambiar el nombre de estos grupos también. No voy a hacer eso aquí porque el tiempo es de la esencia pero sé que siempre que estés creando un diseño, nombra tus capas y grupos consecuencia porque solo te va a hacer la vida mucho más fácil. Está bien. Por lo que ahora, hay un par de elementos comunes que comparten estos dos conjuntos de características. Por lo que también vamos a añadir un subtítulo como ese. Entonces déjame solo bajar eso. El subtítulo de esta sección es, si recuerdo correctamente, magia de iOS. Ahora, para ahorrar tiempo, copiar propiedades, pegar propiedades, copiar propiedades, y pegar propiedades. Enfriar. Ahora, vamos a asegurarnos de que este texto se muestre en un máximo de cinco columnas, así como ésta, y luego vamos a seleccionar todos estos turno A y seleccionar 32 píxeles entre ellas y también asegurarnos desmarque el contenido del clip si encuentra algunos de los remitentes en el texto aquí son el corte. Enfriar. Asegúrate de que todo esté alineado a la izquierda y estamos listos para irnos. Ahora, voy a tomar todo esto y posicionarlo 240 píxeles de la sección anterior y ahora mirando esta página, me doy cuenta de que en realidad me olvidé de hacer algo. Olvidé agregar un fondo muy claro a las primeras secciones, a las dos primeras secciones, discúlpame. Entonces déjame arreglar eso rápidamente. Voy a empezar por crear un rectángulo y voy a posicionar eso a continuación. Hagamos eso más grande así, y así. Vamos a cambiar el tamaño de esto para que tengamos un relleno aquí en la parte inferior o espacio entre el borde y estos elementos de 120 píxeles. Ahora, aquí hay otro consejo rápido y un atajo de teclado muy útil. ¿ Recuerdas cuando te hablé de las herramientas de empuje, donde puedes usar las flechas del teclado para mover un elemento a la izquierda, derecha, arriba y abajo? Ahora, si presionas comando en un Mac o Control en Windows, puedes cambiar el tamaño de un elemento. Entonces, por ejemplo, si mantengo presionado el comando y presiono la tecla flecha hacia abajo, y pongo mucha atención aquí, realidad puedo cambiar el tamaño de esto desde el teclado, y si también mantengo pulsada la tecla Mayús, puedo redimensionarlo aún más rápido. Lo mismo vale para el ancho. Entonces Comando o Control y luego flechas izquierda y derecha me permite cambiar el ancho de un elemento y otra vez, si mantengo pulsado shift, puedo cambiar estos valores en incrementos de diez en comparación con incrementos de uno con solo la tecla de comando o control presionada. Entonces así es como puedes cambiar el tamaño de un elemento usando tu teclado. Por lo que volver a este bit. Tenemos que redimensionar esto para que tengamos 120 píxeles de relleno en la parte inferior, así como así y ahora usemos un bonito color de fondo. Podría usar un gris, un gris muy claro, tal vez gris diez de aquí o puedo usar el diez primario. Entonces hagámoslo. Entonces primaria 10 por ciento y Si creo que eso es un poco demasiado, puedo ir aún más bajo 5 por ciento y creo, en realidad, ese es el valor en el que voy a mantenerlo, 5 por ciento y esto crea una bonita separación entre esta sección aquí y esta sección aquí. Entonces ahora vamos a seleccionar todos estos y vamos a empujarlos hacia abajo de nuevo hasta que lleguemos al 240 por ciento de este elemento superior. Enfriar. Ahora vamos a darle estilo a estos elementos. Para todos estos, vamos a estar usando los siguientes estilos, Brandon Grotesque, regular, y voy a usar exactamente el mismo estilo que tenemos aquí. Entonces copiar pegar, copiar propiedades, pegar propiedades. La única diferencia es que voy a usar 80 por ciento en el color lugar de 60 por ciento y también arreglemos aquí la capitalización. Entonces ahora, lo que voy a hacer es crear elementos de tarjeta a partir de estos elementos de texto. Realmente fácil de hacer eso, seleccionar un elemento, cambiar A para agregar diseño automático, y luego seleccionar vertical 32, relleno horizontal 64, relleno vertical 0 aquí. Podemos añadir un relleno como blanco y también podemos añadir una sombra de gota. Entonces la sombra de gota va a ser así, 30 para desenfoque, 0 x, 20 y, y luego vamos a usar este color, nuestro gris principal 25 por ciento como color de sombra y además, vamos a añadir un radio de borde de ocho píxeles. Ahora lo que puedo hacer es configurar el texto para que se alinee al centro, y puedo redimensionar esto para que abarque tres columnas y además, vamos a redimensionar esta hasta llegar al relleno deseado aquí de la izquierda. De acuerdo, así que ahora solo es enjuagar y repetir para los otros dos elementos. Entonces vamos a seleccionarlos todos y alinearlos al centro. Establezcamos su ancho en 216 píxeles y luego haremos turno A, turno A, turno A, seleccionar este marco, copiar propiedades, seleccionar estos marcos, pegar propiedades. Bastante guay, ¿verdad? Ahora, alineemos estos con nuestro texto. Vamos a usar un espaciado de 64 entre estos elementos, y vamos a posicionarlos así. Voy a usar 32 píxeles de espaciado entre estos elementos. Ahora que los vemos a todos juntos, notamos que éste es más pequeño que el resto. Tenemos que establecer un ancho fijo para ello. Dado que tenemos el diseño automático agregado, necesitamos cambiar la orientación a vertical para que luego podamos seleccionar ancho fijo en lugar de ancho automático. Al igual que así. Ahora puedo redimensionar esto a cualquier valor que necesite. Para que esto sea un poco más interesante, voy a seleccionar ambos y los voy a empujar hacia abajo 32 píxeles. Manteniendo pulsada Mayús y presionando la tecla de flecha abajo, 1, 2, 3, suelto el Mayús 1, 2. Ahora tengo una brecha de 32 píxeles desde la parte superior de esto hasta la que la parte superior de esto. Ahora podemos seguir adelante y agruparlas. Podemos seguir adelante y Turno A en esto. Asegúrate de desmarcar Contenido del clip. Esta parte ya está hecha. Para que esta sección sea un poco más interesante, haremos dos cosas más. Una, es que vamos a agregar algunas imágenes. Para eso, en realidad voy a mover toda esta sección a la derecha y voy a volver a mi kit de inicio, voy a seleccionar las imágenes de Placeholder y voy a seleccionar el iPad Pro y el iPhone 7. Arrastre y suelte en mi página. Estos son un poco demasiado grandes ahora mismo, así que vamos a redimensionarlos. Voy a redimensionar esto a cerca, no sé, 700, y luego voy a redimensionar este teléfono a cerca de la mitad de ese valor, a 350. No sé la relación exacta entre estos dos elementos pero de un vistazo esto se ve bien. Lo que voy a hacer ahora es, poner el iPhone encima del iPad para que se vean algo como esto. Entonces voy a empujar esto hacia abajo, 10, 20, 30, 1, 2, así que 32 pixeles. Voy a seleccionar ambos, Comando G para agruparlos y luego voy a alinear el borde del iPhone con el borde de esta columna. La idea es dejar aquí esta columna en blanco. Seleccionaré estos dos, seleccionaré esto, alinearé arriba. Por último, lo último que quiero hacer es seleccionar esta imagen del iPad y añadir drop shadow. Selecciona el iPhone y haz lo mismo. Esto solo crea un poco de profundidad. Bastante cool. Ahora por fin, lo que quiero hacer es añadir unas rayas aquí. Si te estás preguntando cómo conseguí la inspiración para este diseño con los ángulos y esas cosas, bueno, eché un vistazo al resumen del proyecto donde el cliente nos dijo eso, hey, aquí hay algunos sitios web que nos gustan y uno de ellos es Stripe. Si no has visto el sitio web de Stripe, bueno, es muy guay. Se ve algo así. Se puede ver que desde aquí tengo mucha inspiración con los colores audaces, con los ángulos, con cómo se presenta esta sección de imágenes aquí. Porque empecé a usar este enfoque diagonal o este ángulo, lo voy a usar en el resto de la página. Voy a empezar por crear un rectángulo sobre así de grande. Voy a fijar su rotación en 16 grados. Entonces lo voy a posicionar en algún lugar por aquí para que pase justo a través de la lista de características. Voy a ponerlo bajo este marco, así. Voy a agregarle un gradiente. Para agregar un gradiente, podemos hacerlo de dos maneras diferentes. Podemos seleccionarlo, ir a llenar, seleccionar Lineal, Radial, un Angular, un gradiente Diamante, lo que sea pero lineal suele ser lo que buscarías. Después elige los colores manualmente. En realidad tengo un gran recurso para ti y eso se llama WebGradients. Lo puedes encontrar en webgradients.com. Básicamente te muestra una lista de gradientes prefabricados. Bastante guay, ¿verdad? Se pueden ver los colores de inicio y acabado e incluso se puede copiar código CSS para ello. Lo bueno de este sitio web es que también ofrece un plug-in para Figma. Ese plugin se llama WebGradients. Adelante e instálalo igual que cualquier otro plug-in. Todo lo que tienes que hacer es seleccionar la forma en la que quieres usar el gradiente y luego dar clic en esta lista. El plug-in rellena automáticamente el gradiente por ti. ¿Qué tan guay es eso? De verdad depende de tu preferencia, qué tipo de gradientes quieres usar aquí. Voy a elegir éste, Rainy Ashville. Voy a posicionar esto aquí por ahora. Voy a cambiar su opacidad de capa a 10 por ciento. Eso lo estoy haciendo porque voy a agregar otro gradiente. Voy a cambiar su ángulo a tal vez 12 grados. Muévete hacia arriba, algo así. Para eso voy a usar un gradiente más oscuro, tal vez algo con diferentes colores. Algo así. Se puede jugar con la opacidad en este. Vamos un poco más alto, 20 por ciento. Vámonos con 20 por ciento en este también. Es solo un detalle o estas dos rayas, pero creo que marcan toda la diferencia. Se ven simplemente fabulosos con el resto de los elementos. Después selecciona todo, Comando G para agrupar todo, y llamaremos a estas Características 2. hace la segunda sección para las características. Ahora es tu turno de ponerle tu propio giro. Eso se puede hacer de tantas maneras diferentes. Puedes usar diferentes gradientes para esas dos rayas. Se puede intercambiar la imagen con el contenido escrito. Puedes usar un estilo diferente para esas tarjetas blancas. Puede hacer un montón de cosas. Adelante y experimenta y asegúrate de publicar tu proyecto en la galería de proyectos para que todos podamos echar un vistazo. Con eso dicho, ahora estamos listos para pasar al siguiente apartado. Después de un rápido vistazo sobre el marco de cable, podemos ver que esa sección es una pequeña acción fría. Eso haremos en la siguiente lección. Te veré ahí. 10. Pequeño llamado a la acción: Bienvenido de nuevo a la clase. En esta lección, volveremos a jugar con formas y colores para crear la pequeña llamada a la acción que se asienta entre, la segunda y la tercera secciones de características. Estamos prácticamente todos listos así que empecemos. Si echamos un vistazo al marco de alambre, podemos ver lo que tenemos que hacer aquí. Entonces básicamente tenemos un título, pequeña descripción y luego el botón de llamada a la acción real. Entonces sigamos adelante y copiemos estos, y en realidad sólo voy a copiar el texto. Voy a pegar eso aquí y en realidad voy a usar estos estilos. Entonces copiar, pegar y copiar y pegar. Y eso nos va a ahorrar un montón de tiempo. Vamos a alinear estos al centro, y luego vamos a agarrar este botón. Yo lo voy a pegar aquí mismo. Y eso va a decir descargar gratis. Eso está bien. Y sigamos adelante y seleccionemos todos estos. Desplazar a para agregar el diseño automático. Asegúrate de desmarcar esto. Vamos a añadir 32 píxeles de espaciado entre artículos. Y luego esto es lo que haremos, agregaremos un color de relleno en forma de nuestro gradiente principal. Y luego vamos a sumar ocho píxeles, radio de frontera. Y luego vamos a sumar 64 pixeles de relleno lateral, 64 de relleno vertical. Y entonces lo único que queda por cambiar es el color del texto. Entonces cambiemos estos por el blanco y deberíamos estar bien para ir en este fin. Ahora también voy a asegurarme de que esto se extiende sobre, digamos seis columnas. Y ya casi estamos ahí. Sólo tenemos que ajustar esto un poco así. Y por último, sumémosle nuestra sombra de gota guardada. Y estamos bastante bien para irnos, ¿verdad? Bueno, no creo que debamos dejarlo así porque es bastante sencillo, ¿verdad? Es como que simplemente se sienta ahí, una caja independiente. Y creo que podemos integrarlo mejor con todo lo que hay a su alrededor. Y para ello, vamos a jugar con algunas formas y montones y montones y montones y montones de gradientes. Así que agarra la herramienta de rectángulo y dibuja un rectángulo que sea 320 por 64 y 100 al radio y agrega nuestra sombra de caída guardada. Entonces ahora lo que voy a hacer es duplicar esto, moverlo así, y empujarlo, 10, 20, 30, 40, 50, 60, uno, dos, tres, cuatro. Por lo que 64 pixeles, incluso puedes parar en 60. La idea es que quieras ocultar esta costura aquí mismo para que incluso puedas hacerlo manualmente, pero me parece que usar un cierto número me permite ser muy preciso. Entonces otra vez, uno, dos, tres, cuatro, cinco, seis, uno, dos, tres, cuatro. Ahora lo voy a duplicar y repetir el proceso. Uno, dos, tres, cuatro, cinco, seis, uno, dos, tres, cuatro. Y otra vez. Ahora vamos a seleccionar estos y duplicarlos y moverlos hacia abajo así. Y duplicar eso otra vez y moverlos hacia abajo. Entonces ahora voy a tomar la fila media y la voy a empujar a la derecha, 10, 20, 30, o cualquier cosa tal vez un poco más, 40, 50, 60, uno, dos, tres, cuatro. Está bien. Entonces ahora voy a agrupar estos, así que Comando G o Control G si estás en Windows. Y voy a abrir mi plug-in de gradientes. Y voy a empezar a hacer esto, sólo tienes que seleccionar un elemento, elegir un gradiente, seleccionar un elemento, clic en un gradiente, etc. y así sucesivamente, y hacer lo mismo por el resto. Ahora, cómo decides vestirte esto, realmente depende de ti. Pero así es como lo haces. Entonces ahora que eso está hecho, selecciona todo y vamos a crear un componente. Y vamos a establecer 16 grados de rotación. Ahora, voy a alinear esto en medio de mi página. Y también lo voy a posicionar en algún lugar alrededor de esta zona, creo que 120 de los elementos anteriores. De nuevo, esto no tiene por qué ser exacto. Puedes mirarlo. Lo que sea que se vea bien, úsalo. Entonces ahora simplemente voy a mover esto por debajo de mi cajita aquí. Y podemos seguir adelante y alinearlos al centro verticalmente. Y si se ve un poco plano, puedes entrar. Y puedes mover estos grupos para que la sombra del grupo de arriba se proyecte sobre el grupo debajo de él. ¿ Eso fue difícil de hacer? En realidad no. Ya viste lo fácil que es trabajar con formas y degradados y crear elementos muy interesantes. Y con esto, ahora podemos mandar a G para agruparlo. Y lo voy a llamar Pequeño CTA para llamado a la acción. Muy bien, llamado a la acción hecho. Ahora quiero ver tu perspectiva única sobre esto. Juega con esos colores, esos gradientes, o tal vez no uses gradientes en absoluto. Te mostré una forma de hacerlo, pero obviamente esa no es la única manera. Así que juega y ponte creativo. Y estoy deseando ver con qué se te ocurre. Una vez que completes esta sección, estás listo para pasar a la siguiente. Y la siguiente es la tercera y última sección para las características. Y como es habitual, vamos a usar un diseño diferente para mostrar este tercer set. Eso está pasando en la siguiente lección así que te veré ahí. 11. Tercera sección para las características: Bienvenido de nuevo a la clase. En esta lección, diseñaremos la tercera y última sección para las características. Si recuerdas lo que dije en las lecciones anteriores sobre el diseño de características, siempre es una buena idea mezclarlo. Entonces para mantenernos fieles a eso, para este tercer lote usaremos un diseño diferente, y también añadiremos algunas ilustraciones. Entonces si estás listo, empecemos. Echemos un vistazo rápido al alambre, y como puedes ver, estas son las dos secciones que necesitamos crear. Entonces así es como vamos a hacer eso. Vamos a volver a nuestro diseño principal y vamos a copiar esto. Hagamos de hecho este marco un poco más grande. Vamos a pegar estos aquí. Vamos a subir la rejilla y vamos a alinear esto muy bien a la cuadrícula. Voy a dejar unos 240 píxeles de distancia entre este elemento y la llamada a la acción. Veamos realmente si eso es suficiente, lo echaremos un vistazo rápidamente y creo que podríamos necesitar un poco más que eso. Entonces vamos con como 320, algo así. Por lo que ahora visualmente, esto parece equilibrado. Este llamado a la acción se ve a mitad de camino entre este elemento y este elemento. Como decía en una lección anterior, no siempre se necesita confiar en las mediciones exactas. Al igual que por ejemplo, entre esto y esto, tengo un 120 pixeles. Entonces normalmente te inclinarías a decir, vale, bueno, mantengamos estas distancias iguales, y así voy a colocar esto en unos 120 píxeles. Pero cuando lo miras desde una perspectiva de ojo de pájaro, verás que visualmente no se ve equilibrado, y en ese caso, solo tienes que ir con lo que se siente mejor. En mi caso, sobre esto mucho me parece bien. Para el contenido de esta sección, podemos agarrar el texto de nuestros wireframes y haremos lo mismo aquí. Pero en lugar de que la seguridad sea el título principal en realidad lo cambiaremos un poco. Vamos a usar la seguridad como subtítulo aquí y en cuanto al título principal, vamos a decir que sus datos son seguros. Simplemente tiene más sentido así. Entonces vamos a agarrar dos subsecciones. Además, quiero asegurarme de que este elemento se extiende sobre seis columnas y no cinco, así como eso, porque quiero poner dos de estas secciones más pequeñas que abarcan tres columnas cada una. Coloquemos esto a 64 píxeles del elemento por encima de él. Deshaznos del ícono, no necesitamos eso y para el texto, ¿tenemos qué? Banca en línea, copiemos este texto aquí. Ahora, aquí tienes un consejo rápido para ti. Si vas a copiar una pieza de texto del figma y lo vas a pegar aquí así. Notarás que el estilo no se conserva. Por lo que en su lugar se utiliza el estilo original del texto de copia. Para moverse por eso necesitas ir a Editar, pegar y combinar estilo, así. Enfriar. Entonces duplicemos esta alineación con la cuadrícula y vamos a copiar la otra pieza de texto y eso es para el cifrado de datos. Vamos a seguir adelante otra vez, editar, pegar y combinar estilo. Enfriar. Entonces ya casi terminamos aquí. Lo último que tenemos que hacer es agregar una ilustración. Por lo que haremos un diseño clásico para una característica donde tenemos una imagen en el costado y contenido en el otro lado. Ahora para la ilustración, y puedes encontrar enlaces a todo lo que estoy usando y a esos recursos, ese archivo PDF. Voy a estar usando una ilustración que obtuve de elementos volátiles, vamos a plantearla. Voy a alinear la parte superior de los elementos, así que la parte superior de la imagen, voy a alinear con la parte superior de este elemento, y voy a posicionar esta imagen para que salga fuera de la cuadrícula. Eso está totalmente bien pero en cambio, voy a alinear este borde izquierdo, con la rejilla. Para mantener el mismo espaciado que usamos en otras partes de nuestro diseño, voy a dejar esta columna en blanco. Entonces esa es una sección. Vamos a mandar todavía para crear un grupo y ahora vamos a duplicarlo. Vamos a moverlo hacia abajo. Digamos a distancia de 120 píxeles entre los dos y vamos a hacer exactamente lo contrario. Entonces voy a borrar esta imagen, voy a mover esto al otro lado. Nuevamente, esta es una forma clásica de mostrar características. Se hace la imagen y el contenido y luego en la siguiente fila se voltea la imagen y el contenido. Aquí vamos a agarrar la segunda ilustración. Nuevamente, lo voy a alinear con esta columna aquí para dejar esta columna en blanco, alinearla con la parte superior y eso es todo. Ahora lo último que hay que hacer es actualizar la copia en el texto. Entonces aquí tenemos apoyo. Entonces digamos apoyo ahí. En cuanto al título principal, vamos a decir gran apoyo a los grandes productos. Aquí, editar, pegar y combinar estilo y las dos subsecciones son las siguientes; soporte en línea 24/7 y también tenemos un enlace ahí en la parte inferior. Por lo que soporte en línea 24/7 basado en el estilo de partido. A ésta se le llama clases educativas gratuitas. Entonces pega eso en así y se llamaba clases educativas gratuitas, me olvidé. Está bien. Ahora, lo último que hay que hacer aquí es crear rápidamente estos dos enlaces. Entonces el primero, y en realidad voy a duplicar ese texto de soporte ahí. Pero en lugar de usar este color rojo, voy a usar el color azul porque este es un enlace y este azul actualmente es mi color primario. También voy a agarrar esta flecha pegarla. Seleccione estos dos, cambie A para crear el diseño automático. Cambie la orientación a horizontal. Asegúrate de que ambos elementos estén alineados en el medio y establece la distancia entre ellos en 8 píxeles, así y ahora podemos eliminar esta línea de texto y actualizar esto para decir, enviar ticket. Otra cosa que podemos hacer aquí es que podemos redimensionar esta flecha en lugar de 24 la haremos 16 píxeles. Apenas un poco más pequeño porque está apegado a este diminuto enlace de ahí. Entonces ahora podemos copiar esto. Puedo pegarlo. Podemos decir, visitar canal, y podemos eliminar este bit. Por último, seleccionemos todo. Comanda G para agrupar o controlar G si estás en una máquina Windows y vamos a llamar a estas características 3. Impresionante. Ahora, antes de terminar las cosas, les dije que estas ilustraciones se toman o se descargan de elementos de Envato. Ese es un servicio de pago. Pero si quieres algunas ilustraciones gratis, déjame mostrarte rápidamente que ahora mismo, puedes ir a OnDraw.co click Navegar ahora y aquí puedes encontrar un montón de ilustraciones SUP. Hay muchos de ellos, incluso se puede buscar una palabra clave específica y qué es genial de ello, se puede cambiar el color de acento en ellos realmente fácilmente. Una vez que encuentres uno que funcione para ti, solo tienes que hacer clic en él y puedes descargar un PNG o un SVG realmente depende de lo que quieras hacer con él. SVG significa Scalable Vector Graphics y este es un formato vectorial, que significa que puedes cambiar el tamaño de esa imagen tanto como quieras y no va a perder calidad. Un PNG es un formato ráster, que significa que si lo redimensionas y lo haces más grande que su tamaño original, se va a ver pixelado. Por lo que realmente depende de tu aplicación, pero sí, onDraw.Co/Illustrations, gran recurso para obtener ilustraciones SVG gratuitas. Muy bien, con la sección final para las características hecha, estamos bastante más allá del punto medio en el diseño de esta página de aprendizaje. Si has llegado tan lejos, déjame decir, gran trabajo. Ahora, como es habitual, su tarea para esta lección es crear esta tercera y última sección para las características. Al igual que he estado diciendo hasta ahora, pon tu propio giro en las cosas. No necesariamente hagas exactamente lo que hago, aunque eso está totalmente bien puedes aprender mucho haciendo eso. Pero también es una buena idea hacer las cosas a tu manera y experimentar y ver cuáles son los resultados. Ahora, si ya lo has hecho y estás listo para seguir adelante, entonces supongo que deberíamos ir bien. El siguiente apartado de nuestra lista es la Galería de Captura de Pantalla. Eso se acerca en la siguiente lección. Entonces te veré ahí. 12. Galería de captura de pantalla: Bienvenido de nuevo a la clase. En esta lección, diseñaremos la galería de capturas de pantalla. Eso es bastante fácil de hacer así que empecemos. Si echamos un vistazo atrás al alambre-frame, podemos ver que originalmente me burlé de la galería de capturas de pantalla como una simple cuadrícula de imágenes, y si bien esta es una solución perfectamente viable, creo que podemos hacer algo un poco más interesante que y vamos a hacer un carrusel de imágenes. Un carrusel es básicamente cuando puedes ver una fila de imágenes y tienes controles de izquierda y derecha para mover esa fila de imágenes. A medida que lo mueves a izquierda y derecha se están revelando otras imágenes. Entonces, saltemos a la parte principal de diseño y te mostraré a qué me refiero con eso. Ahora para esto, voy a estar usando algunas de las imágenes de marcador de posición que se proporcionan en estos [inaudibles]. y vamos a ver. Voy a agarrar principales ahorros abiertos, tal vez éste, éste, éste y el principal. Entonces con estos simplemente haga clic y arrastre y Figura. De acuerdo, y eso cargó un montón de imágenes. Ahora, queremos que nuestras imágenes se dimensionen de acuerdo a la cuadrícula que estamos usando. Entonces voy a subir la cuadrícula y lo vamos a hacer para que cada imagen ocupe cuatro columnas de cuadrícula. Entonces, sigamos adelante y redimensionemos esto así, y el tamaño que buscamos es de 384 píxeles. Entonces ahora voy a hacer lo mismo por los demás. Entonces con 384, y ahora voy a empezar a traerlos de uno a la vez. Entonces vamos a traer estadísticas, Esto en realidad me voy a mover. Entonces las estadísticas van aquí y esta imagen la voy a posicionar a 32 píxeles del otro. ¿Qué más? Traigamos la imagen principal y no te preocupes por que esta imagen sea mucho más alta, lo arreglaremos en solo un poquito. ¿ Qué más tenemos? Tenemos estos, y en realidad creo que aquí tenemos suficientes imágenes. Entonces, posicionémoslos adecuadamente así. Ahora ocultemos la cuadrícula y seleccionemos cada una de estas imágenes y añadamos una bonita sombra de gota y también ocho píxeles radio de borde. Ahora, ¿qué hacemos con esta gran imagen? Queremos que sea exactamente la misma altura que las otras, que es 683. Bueno, podemos hacer eso. No hay problema. Simplemente desmarque las proporciones constreñidas, ingrese 683 y haga doble clic en él. Ahora mismo está listo para llenar pero si queremos moverlo, podemos configurarlo para recortar.Entonces podemos elegir qué parte de la imagen queremos mostrar. Bastante cool. Entonces, movámoslo hacia abajo, solo un toque. Asegurémonos de que esté justo donde debería estar. Creo que en algún lugar como aquí debería estar bien. A ver. Sólo un poco, un píxel arriba debería hacer el truco muy bien. Está bien. Entonces ahora aquí es lo que podemos hacer para agregar un poco de un interés visual. Vamos a escalonar estas imágenes, lo que significa que cada otra imagen se colocará 64 píxeles más bajos que la anterior. Entonces seleccionamos esto y esto y diremos 1-2-3-4-5-6, eso es 60, y luego 1-2-3-4, eso es 64. Enfriar. Ahora, vamos a seleccionar estos comandos G para agruparlos. Vamos a moverlas más abajo. Lo que quiero hacer, ser consistente en el diseño es que quiero agarrar estas dos rayas angulosas, y usarlas como fondo, y eso se atará muy bien con todo el motivo angular que estamos usando para tener ángulos aquí, aquí y también aquí. ¿ De acuerdo? Entonces sigamos adelante y hagamos eso. Vamos a pegar estos. Vamos a ponerlos bajo nuestro grupo. Ahora puedo seleccionarlos a ambos. Hagámoslo individualmente y luego puedo hacerlos más grandes o más pequeños, depende de qué tipo de efecto estoy buscando, algo así y vamos a agarrar el otro. Hagamos eso un poco más grande, algo así. Entonces se cruzan entre sí y vamos a seguir esto más adelante así. Se puede jugar con estas dos formas y una vez que se hace eso, se pueden abrir los gradientes y se les pueden dar diferentes colores. Algo así o algo así. Incluso puede cambiar su orden dependiendo del gradiente que desee mostrar primero. Ahora también necesitamos algún tipo de navegación aquí, ¿verdad? ¿ Cómo vamos a mover este carrusel? Bueno, sigamos adelante y hagamos eso entonces. Empecemos agarrando la herramienta Rectángulo o R. Y vamos a crear un rectángulo que sea 320 por 320. Añadamos 64 píxeles, border-radius y hagamos un ángulo o rotación de 26 grados. Voy a añadir la bonita sombra de gota. Voy a poner su relleno en blanco y voy a fijar su capacidad en 95 por ciento. Por lo que esto se mantendrá en la cima de estos artículos, así e incluso podemos traer en la cuadrícula para que tengamos algún tipo de medición. Lo que voy a hacer es alinearme en la cuadrícula y luego empujarla hacia la derecha 10,1,2,3,4,5,6, 16 píxeles algo así. También lo voy a alinear en el centro con mis capturas de pantalla, así que ahora voy a agarrar la flecha y la voy a pegar aquí y vamos a traerla dentro de este grupo. Comanda G para agruparlo y cambiemos su altura a 32, así que hazlo un poco más grande. Ahora simplemente puedes posicionar esta flecha al contenido de tu corazón. Voy a hacer algo como esto, 1, 2, así que 20, 1, 2, 3, 4, 24 y creo que en realidad necesitamos hacerlo un poco más grande. Probemos 48 sí 1, 2, 3, 4, 5, 6. Sí, algo así. Necesitas jugar con él hasta que lo hagas bien, justo como me gusta, pero para mí en este momento, esto se ve bastante bien. Lo que voy a hacer es duplicar este bit y sólo voy a moverlo al otro lado, así. Déjame primero alinearlo en el medio y otra vez, lo voy a alinear con la cuadrícula y luego empujarlo hacia la izquierda, 10, 1, 2, 3, 4, 5, 6, 16 píxeles. Entonces solo voy a posicionar la flecha en posición relativamente similar. Puedes lograr un nivel de precisión mucho mayor cuando estás codificando esto con CSS. Entonces, no te preocupes demasiado por ello ahora mismo. El último que hay que hacer es simplemente voltearlo horizontalmente, lo que lo girará al revés. Ahora tenemos los botones para mover el carrusel, hacia adelante y hacia atrás. El último que me gustaría agregar a esto es algún tipo de indicador para hacernos saber en qué página del carrusel estamos, así que para eso, esto es lo que haremos. Volveremos a agarrar la herramienta de rectángulo. Dibujaremos rectángulo simple y haremos de este 32 píxeles de ancho, 4 píxeles de alto, y el radio 16 píxeles. Entonces ahora tenemos una forma pequeña que se ve algo así. Para el color, quiero usar el mismo color primario así, pero voy a hacer 10 por ciento de capacidad. Se trata de una representación de una página de carrusel que actualmente no está activa. Repita el proceso. Vamos a duplicarlo, vamos a seleccionar tanto “Shift A” para agregar un diseño automático. Vamos a establecer 16 píxeles de distancia entre los dos y ahora vamos a crear el estado activo. Por eso duplicado una vez más pero esta vez, hagámoslo como 80 píxeles de ancho. Vamos a usar un 100 por ciento el color primario y luego sólo añadir unos cuantos más para representar otras páginas inactivas y creo que eso debería hacer el truco. Ahora vamos a seleccionar esto, alinearlo en medio de la página y vamos a sacarlo un poco. De hecho, alinémoslo con el borde inferior de esta forma y esa es la galería de capturas de pantalla. Ahora vamos a seleccionar todo. Comanda G para agruparlo y llamémoslo galería de capturas de pantalla. Por último, vamos a moverlo hacia arriba o en realidad vamos a moverlo hacia abajo y dejar alrededor de 240 píxeles de distancia entre la galería y la sección sobre ella. Ahora si hacemos una vista a ojo de pájaro, podemos ver que tenemos un bastante buen equilibrio de espacio en blanco. Está bien, como de costumbre, ahora es el momento de tomar acción y crear tu versión de la galería de capturas de pantalla. Fui por un enfoque de carrusel de barra deslizadora pero puedes mantenerte fiel al marco de alambre y simplemente hacer un simple grupo de imágenes o puedes crear algún otro diseño. De verdad depende enteramente de ti. Tengo ganas de ver lo que se te ocurre. Ahora con eso dicho, es hora de seguir adelante. El siguiente ítem de nuestra lista es la sección testimonial y ahí en realidad voy a mantener las cosas muy simples. Déjame mostrarte mi opinión en la siguiente lección. Nos vemos ahí. 13. Testimonios: [ MÚSICA] Bienvenido de nuevo a la clase. Hemos hecho grandes avances con este diseño de la página de aterrizaje. Solo tenemos que diseñar tres secciones más y ya terminamos. En esta lección, vamos a crear las secciones testimoniales. ¿ Listo? Vámonos. Entonces vamos a revisar primero el marco de alambre para ver con qué estamos lidiando. principio, mi idea era simplemente tener una lista de avatares aquí y al hacer clic en un avatar, el testimonio en sí cambiaría. Creo que lo que vamos a mantener las cosas mucho más simples que eso, y simplemente hacer una navegación con flecha derecha, flecha izquierda y eso es todo. Volvamos aquí. Vayamos a la tipografía y agarremos esta cotización de bloque que tengo aquí, peguemos eso, y traigamos la cuadrícula. Alineemos correctamente esto a la cuadrícula y dimensionarlo para que sea 10 columnas, justo en medio de la página. También cambiemos el color del texto a grado 80 por ciento. Para marcar el hecho de que se trata de una sección para testimonios, sigamos adelante y sumamos uno de estos, una cita. Esto usará Brandon grotesque. Hagamos un tamaño de fuente realmente grande y hagámoslo audaz y creo que un poco más grande, algo así como un 110. Realmente no importa que no nos estemos pegando exactamente a la escala de tipo ahora mismo porque se trata de un elemento decorativo. Entonces un 110 y eso debería estar bien. Cambiemos el color, en realidad, usemos éste, pero un poco más tenues, como 80 por ciento, algo así. Eso se ve bien, seleccionemos ambos alineados al centro y vamos a alinear cosas así. Entonces bajo la cotización real, vamos a poner un avatar de la cita, autor, nombre y tal vez posición y luego la navegación de flecha. 40 avatar, vamos a agarrar la herramienta de elipse o O en el teclado y vamos a hacer una elipse que sea 64 por 64. Eso debería hacer el truco. No necesitamos un avatar muy grande. Vamos a posicionar esto a 32 píxeles de la pizarra de arriba y necesitamos poner un retrato ahí dentro. Hay muchas maneras diferentes de hacer eso. Se puede descargar una imagen gratuita de internet, si se quiere hacer un marcador de posición. Si estás haciendo un proyecto real, entonces pondrías la foto de la persona que realmente te dio ese testimonio. En mi caso, solo quiero una imagen de portador de lugar para poder abrir un plugin llamado unsplash. Esto es para el sitio web unsplash y puedo buscar un retrato. Yo puedo usar esa y eso sólo se va a llenar muy bien así. Para el nombre y la posición, vamos realmente a agarrar este tipo de estilo de texto y en realidad vamos a hacer un turno a para agregar un diseño automático. Asegúrese de eliminar el relleno predeterminado que se agrega. Vamos a hacer 16 píxeles de distancia entre ítems o espaciado entre ítems. Vamos a hacer las cosas verticales y voy a pegar en ese elemento y luego sólo cambiar el color. Voy a usar 80 por ciento de gris. Sólo vamos a decir Mary Anne, Abogada, genial. Ahora tomemos este alineamiento en el centro. Asegúrate de colocarlo a 32 píxeles de la cotización real y luego agarremos las flechas izquierda y derecha. Pega esto en. Al igual que duplicarlo, muévelo hacia un lado, haga clic derecho, voltear horizontal. Hagamos una opacidad del 10 por ciento en este. En realidad hagámoslo en la capa misma, así. Esto nos mostrará cómo se ve una flecha inactiva. Cambiemos A estos para agregar el diseño automático y vamos a establecer una distancia de 16 píxeles entre los dos. Podemos ir aún más altos que esos 32 píxeles, porque tal vez en el futuro queremos agregar algo de relleno al espacio que los rodea y necesitamos tener el espacio para que hagamos eso. Voy a tomar estos y los voy a posicionar 72 píxeles del autor. Ahora toma todo esto, manda G y llamemos a esto testimonios. Asegúrate de que esté correctamente alineado en el medio y pongámoslo a 240 píxeles de la sección anterior. Ahora vamos a hacer otra vista de pájaro para comprobar si todo se ve bien y sí. [ MÚSICA] ¿Viste lo sencillo que era diseñar esta sección testimonial? Obviamente, hay muchas maneras de hacerlo. Se puede ir con rejillas. Puedes ir con un tipo diferente de deslizador. De verdad depende de tu imaginación. Adelante y crea esta o tu propia versión de los testimonios y una vez que hagas eso, estamos listos para seguir adelante. El siguiente ítem de nuestra lista de tareas pendientes es probablemente la sección más importante de la página y ese es el principal llamado a la acción. Es una sección bastante compleja porque contiene una tabla de precios. Nada que no podamos manejar, pero puede ser un poco complicado. Veamos cómo podemos crear eso en la siguiente lección. 14. Llamado al acción principal: Bienvenido de nuevo a la clase. En esta lección, estaremos diseñando la llamada a la acción principal, y esta es posiblemente la sección más importante de la página porque puede ser un rompetrato. Los visitantes utilizarán esta sección para comprar el producto o descargar la versión gratuita, pero esencialmente, aquí es donde los usuarios se están convirtiendo. Asegurémonos de hacer esto bien, y lleguemos a ello. Un vistazo rápido al wire-frame nos muestra que, originalmente, había planeado crear el área de precios y la llamada a la acción por separado, pero creo que es una idea mucho mejor incorporar ambos en una sola sección porque tiene sentido correcto. Si los hiciera por separado, tendría dos juegos de botones, pero si los fusiono, voy a tener un solo conjunto de botones. Es mucho más claro de esa manera. Además, esta columna de la tabla de precios es para la versión pro o la versión de pago de la app, por lo que necesitamos que esto destaque de alguna manera. Muy bien, vamos a llegar a ella. Vamos a empezar escribiendo el texto que usaremos para el encabezado de sección. De hecho, sigamos adelante y copiemos estos, pegarlos aquí. Creo que vamos a usar exactamente los mismos estilos que usamos aquí. Hagamos una copia pegada. Copiar propiedades, pegar propiedades, y lo mismo vale para esto, copiar y pegar. Alinémoslos al centro, y también alinémoslos a la central entre sí. Cambiemos A y añadamos 32 píxeles de distancia entre ellos. Está bien. Genial. Ahora, sigamos adelante y sumamos nuestra tabla de precios. Para esto, esto es lo que haremos. Empezaremos trayendo el logo. Iremos a activos de marca, color del logotipo, y vamos a cambiar el tamaño de este logotipo para que tenga 48 píxeles de altura. Vamos a utilizar la versión coloreada para la primera columna de la tabla de precios. Aquí, básicamente necesitamos mostrar la palabra libre para mostrar el precio del plan, luego la lista de características, y la llamada a la acción, el botón para descargar. Eso debería ser relativamente fácil de hacer. Agarremos este texto y lo vamos a pegar aquí. Sólo se va a decir libre. Voy a acercarme un poco para que veas lo que estamos haciendo. De nuevo, esto lo alinearemos al centro, lo alinearemos con el logotipo. Cambiaremos A, estos dos para agregar diseño automático, y estableceremos 32 píxeles de distancia entre ellos. A continuación, agreguemos la lista de características. Para eso, voy a agarrar un simple párrafo. Vamos a pegarlo aquí, y empecemos a escribir en las características. Ahora, los alinearemos en el medio. Tamaño de fuente, 18, altura de línea , elegamos 32 píxeles porque quiero que estos se distancien un poco más, y finalmente, lo que necesitamos es uno de esos botones de fantasía que hicimos. Copia eso, pegarlo en. Ahora lo que podemos hacer es seleccionar todo, turnos A para agregar un diseño automático. Asegúrate de desmarcar este bit. Va a ser vertical, y vamos a hacer 64 píxeles, horizontal, vertical, relleno, y también 64 espaciado entre elementos. A esto, en realidad podemos agregar un color de relleno de blanco. Añadamos una sombra de gota, y también redondeemos las esquinas. Ocho píxeles deberían ir bien. Muy bien así que ahora, este elemento debería caber dentro de cuatro de estas columnas de cuadrícula. Si no lo hace, simplemente podemos redimensionar este elemento porque esto es lo que le da a todo este marco su ancho. Si no entiendes eso, aquí te dejamos una explicación muy sencilla. Esta pieza de texto, este cuadro de texto, tiene un ancho actualmente de 260 píxeles. El marco que creé con diseño automático, que es éste, tiene un relleno horizontal de 64 píxeles. Además de estos 260, necesitamos sumar 64 a la izquierda, 64 a la derecha. Siempre que cambie el tamaño de este cuadro de texto, mi marco entero cambia de tamaño junto con él. En realidad es bastante simple. Podemos hacer eso hasta llegar al ancho perfecto para que quepa dentro de cuatro columnas de cuadrícula. Ahora, duplicemos esto y creemos la columna para la versión pro. Ahora bien, si recuerdas lo que dije anteriormente de hacer que esto destaque, porque esto es, después de todo, para la versión pro, hay una manera muy sencilla de que podamos hacer eso. En lugar de usar relleno blanco, podemos usar nuestro gradiente principal. Entonces simplemente podemos seleccionar este logotipo y podemos hacer todo blanco, así. Entonces puedo seleccionar todo este elemento, y puedo cambiar los colores a blanco. Ahora bien, esta descripción no es del todo precisa porque necesitamos agregar algunas cosas. La versión pro tiene todas las características en gratis más múltiples presupuestos, seguimiento de objetivos, sincronización entre dispositivos, informes y sincronización con tu banco. Esto, voy a hacer audaz, y voy a estar usando mi color secundario, que es este. Voy a ponerlo en un 100 por ciento. No olvidemos cambiar el precio. Esto va a ser de 9.99 dólares mensuales. Cambiemos también el estilo de este botón. Voy a usar este mismo color secundario para el fondo y para el texto dentro, voy a usar gris, tal vez 80 por ciento, algo así. Enfriar. Ahora, agruparemos estos. Coloquemos estos a 64 píxeles del texto de arriba. Agrupémoslos, Comando G. ¿Qué opinas? ¿ Deberíamos terminar aquí? ¿ Cómo te queda esto? personal, creo que podríamos usar con un poco más de separación de la sección anterior y también un poco más de énfasis en esta sección porque después de todo, esta es la sección más importante de la página, ¿no? Para estar al día con nuestro motivo aquí, lo que voy a hacer es simplemente copiar este ángulo, la raya. Yo lo voy a pegar aquí. Simplemente lo voy a empujar hasta encontrar el equilibrio adecuado, y también lo voy a hacer más grande, así. Lo voy a poner bajo nuestro grupo recién creado. Entonces me voy a llevar esto, lo voy a poner dentro así. Creo que eso se ve bastante bien, tal vez sólo un poco más grande. Sí, eso se ve bastante bien. Ahora, sólo tenemos que jugar un poco con el gradiente. Abramos nuestro plugin y hagamos algo con un bonito tono de azul aquí, tal vez algo así o así. No quiero algo que esté demasiado oscuro, pero tampoco quiero algo que esté demasiado coloreado. Creo que tal vez se lo dejaré a eso porque también tiene algunos colores que se pueden encontrar en esta sección aquí. Eso es bueno. Además, voy a duplicarlo, rotarlo un poco. Para ello, incluso podemos usar un conjunto de colores diferente, tal vez algo como esto, o tal vez algo un poco más tenue. Podemos incluso bajar la opacidad en esta capa. Creo que eso se ve casi bien. Por supuesto, siempre puedes entrar y mordisquear los detalles, ponerte todo sintonizado, justo, pero por ahora, creo que esto es lo suficientemente bueno. Como lo último, como siempre lo estamos haciendo, selecciónelo todo, Comando G, para agruparlo todo. Vamos a llamar a este C-T-A principal o llamada a la acción. Enfriar. Muy bien, como ustedes vieron en esta lección, me alejé de nuestro siguiendo el marco de alambre y en su lugar, creé mi propio diseño. Eso está totalmente bien de hacer. Como decía en una lección anterior, el marco de alambre está ahí para guiarte, y está ahí para servir de guía para los contenidos realmente, no necesariamente para el diseño. Esta sección de aquí fue un buen ejemplo de eso. Ahora, como es habitual, adelante y crea tu propia versión de esta llamada a la acción principal, ya sea siguiendo el marco de alambre o haciendo exactamente lo que hice, o simplemente inventar algo nuevo. Depende enteramente de ti. Ahora, una vez que hagas esto, estás listo para la sección final de la página, y ese es el pie de página. Eso se acerca en la siguiente lección. 15. Footer: Bienvenido de nuevo a la clase. En esta lección, diseñaremos la sección final de esta página de aterrizaje, el pie de página. Es una tarea bastante sencilla, así que empecemos. Ahora, echando un vistazo al alambres, podemos ver la composición del pie de página. Tenemos el logotipo aquí, un pequeño menú lateral del lado derecho aquí, alguna información sobre la empresa, la típica información de copyright, y una lista de enlaces para redes sociales. Empecemos. Voy a empezar trayendo el logo, y como lo tenemos aquí, sólo voy a copiar éste, pegarlo aquí. También voy a traer la cuadrícula, para que podamos alinear adecuadamente los elementos aquí. Entonces vamos a crear ese menú lateral que viste aquí arriba. De hecho copiemos eso, péguelo aquí. Hagamos un Shift A para crear un diseño automático, horizontal, hagamos 32 píxeles entre elementos. En cuanto al estilo, bueno, vamos a usar un estilo que hemos usado previamente, que es éste de aquí, así que Copy Properties, Paste Properties, nice. Tomemos estos dos y alineemos los centros verticales. Ahora tomemos esto y alinémoslo al borde derecho de nuestra cuadrícula. Ahora, a continuación, agreguemos aquí un separador. Para ello, en realidad recurriremos a estos elementos aquí mismo. Voy a agarrar a uno de ellos, y me voy a mover aquí abajo pega eso. Simplemente muévelo a su lugar, y vamos a redimensionarlo hasta que expanda todo el ancho de mi cuadrícula y llevemos su altura de nuevo a 48 píxeles porque accidentalmente lo redimensioné allí. Posicionemos esto, ahora mismo está en 48 píxeles, hagamos tal vez 64. Eso debería hacer el truco muy bien. Pero creo que sin embargo, podría ser un poco demasiado, así que volvamos a 48 en realidad, así. Creo que eso se ve un poco mejor. A continuación, necesitamos agregar la información de la empresa. Copiemos eso, peguemos eso aquí. Vamos a usar el estilo de párrafo para esto, así que vamos a copiar las propiedades de esto, pegarlas, alinear todo a la izquierda. También lo que quiero hacer aquí es hacer que estos atrevidos y usar el color primario. Porque estos son enlaces. En realidad, voy a usar regular. No creo que audaz se vea tan bien aquí. En negrita vamos a mantener para este tipo de enlaces, pero para estos, vamos a usar el peso regular. Subamos esto un poco, para que coincida con el espaciado, así. Tenemos 48 de texto a separador y luego 48 de separador a logo. Por último, agreguemos la información de derechos de autor. Hagamos Editar, Pegar y Matar Estilo. Coloquemos también que 48 píxeles del elemento por encima de él. ¿Qué más? Bueno, necesitamos hacer los enlaces para las redes sociales, pero en lugar de simplemente jugar enlaces, hagamos iconos. Eso debe ser súper sencillo. Voy a usar iconos del set que hemos utilizado toda esta clase. Busquemos Twitter. Vamos a copiar eso, pegarlo en, K para redimensionarlo, y vamos a redimensionar estos a, creo que 24 píxeles, es un poco complicado. También les agreguemos el color adecuado. ¿ Qué más tenemos? Facebook, creo, añado Instagram. Agarremos Facebook, el mismo taladro K para la escala, y luego redimensionarlo a 24 píxeles. Vamos a pegarlo dentro de mi marco principal aquí, e Instagram, copiar eso, pegarlo y redimensionarlo a 24 píxeles. Ahora, junte todo, seleccione estos Shift A para agregar el diseño automático. Hagamos 32 píxeles entre ellos. Asegurémonos de que todo esté alineado en el medio. Usemos el color adecuado en todos estos. Seleccionaré ambos, alinearé centros verticales, y voy a traer la lista de iconos justo al borde de mi cuadrícula aquí. Después agarra a estos dos, manda a G que los agrupe. Ahora lo que puedo hacer es asegurarme de que mis mediciones sean correctas. 48 ahí, 48, y 48, selecciónalo todo, comanda G, y agrupéalo como pie de página. Ahora, lo único que queda por hacer es averiguar qué tipo de espaciado necesitamos en la parte inferior. Una buena manera de hacerlo es mirar qué espaciado usaste en la parte superior, y en mi caso, es, creo que 64 píxeles. Aquí hay muchos elementos. Son 64 pixeles. Hagamos eso. Seleccionemos mi Escritorio, y vamos a redimensionarlo en consecuencia. Ahorra, y eso ahí mismo, damas y caballeros es nuestra página de aterrizaje terminada. Echémosle un último vistazo final. Voy a seguir adelante y esconder aquí la UI, para que podamos verlo mejor. Todo comenzó con la sección de héroes. En primer lugar, creamos este logotipo, navegación, y fondo, y luego agregamos el contenido del texto y el collage de imágenes. A continuación, tenemos la primera sección para las características, seguida de una segunda sección para las características, utilizando por supuesto un diseño diferente. Después agregamos un pequeño llamado área de acción. En lugar de hacer una caja simple, le agregamos este fondo usando formas simples, sombras y degradados. A esto le sigue la tercera y última sección de largometrajes. Nuevamente, con un diseño diferente pero un poco más clásico. Después seguimos eso con la galería de capturas de pantalla, que hicimos que pareciera un Carrusel completo con navegación, botones, y también página en los transportistas. Siguiendo eso arriba es una sencilla sección para testimonios, con un sencillo deslizador. Entonces probablemente la sección más importante de la página, la llamada principal a la acción, que también incluye la tabla de precios. Por último, en esta lección, creamos la sección final de la página, que es el pie de página. Ahora te toca terminar de diseñar la página de aterrizaje. Adelante y crea el pie de página. Después de que lo hagas, quiero felicitarte porque acabas pasar esta clase con colores voladores. Por favor, únete a mí en la siguiente lección para la conclusión. 16. La conclusión: Bueno, felicitaciones por terminar esta clase. De verdad esperaba que estuviera a la altura de tus expectativas y aprendiste algo valioso, algo que te ayudará en tu carrera. Ahora, por favor tómese un momento y anote las claves para llevar de esta clase. Como decía en las lecciones anteriores, les animo encarecidamente a crear su propia versión de esta página de aterrizaje. Una vez que hagas eso, adelante y publícalo en la Galería de Proyectos porque allí te daré comentarios si quieres. Seguro que otros estudiantes también te darán retroalimentación. También si tienes alguna pregunta o comentario, si te gustaría ver más contenido como este en Skillshare, asegúrate de dejar tus comentarios en la pestaña de discusión. Simplemente me encantaría saber de ti. Ahora, antes de que terminemos las cosas, solo quiero hacer esta nota rápida. Esta clase, o esta fue la primera clase de una serie llamada Diseñar con Figma. Planeo hacer más clases como esta. Si quieres ver más contenido como este, asegúrate de seguirme. Con eso dicho, muchas gracias por ver y de verdad espero volver a verte pronto en la siguiente clase. Mucho amor y respeto, cuídate.