Tipografía y emparejamiento de fuentes en el diseño de la interfaz de usuario

1. Introducción a la clase: Las fuentes son una parte crucial de cada diseño porque son ellas las que están contando la historia, guiando al usuario donde necesita hacer clic y hacia dónde necesita ir dentro de tu diseño. Así que elegir una buena familia de fuentes y elegir bueno para el desperdicio es realmente importante y realmente una clave para tener un buen diseñador de diseño legible Alex aquí, bienvenido a esta clase de Skillshare todo sobre fuentes y familias de fuentes, pesos de fuente y cómo usarlas. Soy un creador de productos de diseño digital y hasta ahora he creado más de 500 productos de diseño diferentes. También soy creador de cursos, y hasta ahora he creado más de tres cursos diferentes con más de 60 mil alumnos matriculados a la vista. En esta clase, vamos a hablar diferentes familias de fuentes y fuentes. ¿ Cuál es la diferencia entre ellos? Qué son serifs y sans serifs, diferentes pesos de fuente y cómo usarlos, diferentes fuentes, escalas, y cómo usarlas y crear tu propio bot para elegir fuentes para tus proyectos. Y por último, cómo emparejar fuentes. Tu proyecto dependiendo de la complejidad del proyecto en el tema del proyecto, tu proyecto de clase Skillshare es crear una escala de fuente usando la plantilla que proporcioné. asegura de comprobarlo. Y tengo un video dedicado en esta clase todo sobre el proyecto de clase. Así que asegúrate de comprobarlo para obtener más información. Saber usar fuentes en tu diseño realmente te va a beneficiar como diseñador. Y realmente va a beneficiar a tus usuarios porque les va a dar más valor. Se van a quedar allí por más tiempo porque es una experiencia más agradable para ellos. Así que espero verte en esta clase y vamos a crear algunas combinaciones de fuentes impresionantes. 2. Tipografías Fuentes VS: Uno de los principales errores que veo que cometen los jóvenes diseñadores es que están llamando fuentes, tipografías, lo cual no es realmente cierto. Typeface es realmente una familia de fuentes. Y la fuente es solo una variación dentro de esa familia. Déjame darte un ejemplo rápido. Solo imagina que estás usando la fuente Roboto por ejemplo. Y luego dentro de la otra fuente de agua, tienes perno, regular, delgado, ultra audaz. Todas estas son fuentes, pero el informe en sí es una fuente. Familia endeudada son los conceptos erróneos clave que tienen los diseñadores. Están tratando de empujar esta noción de que la fuente lo es todo cuando realmente no lo es. Lo que puedes tener son diferentes tipos de variaciones de fuente dentro de la unifamiliar o una botella es realmente un buen ejemplo porque tienes Roboto regular, Roboto normal y luego tienes algo llamado roboto slab, que es tomar completamente fuente, líneas realmente gordas, y realmente se usa para imprimir principalmente, pero también puedes usarlo en algún tipo de diseño web audaz. Pero ese es el punto aquí mismo. No intentes confundir fuentes con familias de fuentes porque las familias de fuentes pueden tener varias fuentes diferentes dentro de ellas. Y las fuentes son solo variaciones dentro de esa familia de fuentes. Como dije, puede haber múltiples fuentes dentro de una unifamiliar. Así que solo tenlo en mente y no te confundas. Puedes usar toda la familia o fuente dentro de tu diseño, o simplemente puedes usar una variación como, digamos en este ejemplo, Roboto regular o Roboto bold. Vamos a llegar a ello en unos pocos videos en esta clase. Pero solo quería señalarlo. 3. Tipos de fuentes: A menudo cuando entrevisto a jóvenes diseñadores sobre cuando hablo con ellos, realmente no saben cuál es la diferencia entre Serif y Sans Serif cuando se trata de fuente, es realmente súper simple. Y seguí adelante y encontré un artículo realmente bueno. Voy a vincularlo en el archivo de recursos de clase. Así que asegúrate de comprobarlo y leerlo por ti mismo porque no vamos a profundizar demasiado en este video, pero solo quiero mostrarte rápidamente cuáles son las diferencias entre las serifs, sans serifs, y cuando se usa cada una de ellas. Entonces aquí tenemos ese artículo que mencioné y es de Adobe.com, diseño de Creative Cloud descubre. Y voy a dejar el enlace a este artículo, como dije en los archivos de recursos de clase. Así que puedes ver algunos ejemplos aquí mismo. mejor esto no busca distinguirte. A lo mejor viste fuentes como estas. A lo mejor viste fuentes como estas. Pero, ¿cuál es realmente la diferencia entre Serif y Sans Serif? Entonces aquí tenemos la pista en el nombre y la principal diferencia entre estas fuentes. Entonces estas cosas al final de la carta en sí son surf. Y se puede ver aquí mismo, no los tenemos que surfear de arena, si no me equivoco, eso es francés. Entonces sin estas serifs al final. Entonces esa es la principal diferencia entre serifs y send serves. Ahora, cuando los puedes usar, puedes ver cuándo usar fuentes serif. Entonces va a ir realmente a fondo sobre cuándo usarlos y cómo usarlos. Los puedes ver impresos aquí mismo. Así que asegúrate de revisar este artículo para conocer más sobre él. Y por supuesto, puedes explorar más sobre cuándo encontrarlos. Pero en pocas palabras, cuándo usar serifs y sensores, es realmente súper simple. Es, todo se reduce al tema de tu diseño y a la dirección de diseño de tu diseño y para qué estás diseñando. Entonces por ejemplo, si estás diseñando diseño de sitios web atrevidos, tal vez algo nuevo , algo fresco, algo para la generación más joven, No vas a usar sirves, que son las fuentes con esas cosas. Al final de cada letra, vas a usar fuentes sans serif porque las fuentes Cera realmente se atribuyen a algo que es viejo. Y si estás diseñando para algo que es viejo, por ejemplo, estás haciendo algún tipo de sitio web vintage o estás haciendo algún tipo de exhibición de autos antiguos tal vez o algo que resolvieron. Entonces vas a usar las fuentes Serif, que tienen esas cosas al final de las letras. Pero generalmente la regla general es que si no estás diseñando para algo que es tradicional, que es elegante, que es viejo, entonces vas a usar estas fuentes sans serif porque estas son fuentes más modernas y más disponibles para usar, especialmente en diseño web, porque están trabajando en línea y están optimizadas para trabajar en línea, para legibilidad, para accesibilidad, para escalabilidad, por todas estas razones, las fuentes sans serif son mucho mejores de usar, especialmente en el diseño de sitios web. Pero como dije, aún puedes encontrar miles de fuentes serif diferentes si quieres usarlas en tu diseño web o diseño de aplicaciones. Todo esto depende de tu tema, para qué estás diseñando, quién es tu público objetivo y qué intentas transmitir, qué tipo de emoción, qué tipo de satisfacción con la fuente usted está eligiendo. Así que solo ten esas cosas en mente cuando estés diseñando para la web. 4. Pesos de fuentes y cómo utilizarlos: Cuando empiezas a usar una familia de fuentes, dependiendo de la familia misma, verás que tiene muchas fuentes diferentes en su interior, las cuales están etiquetadas con diferentes nombres como regular teen bold, extra bold, italic, negrita, cursiva y muchos, muchos, muchos más, dependiendo de la familia de fuentes en sí. estos se les llama pesos. Y cómo usar estos pesos en diferentes escenarios. De eso vamos a hablar en este video. Y voy a mostrarte un ejemplo y darte solo una idea de dónde usarlos. Entonces aquí está el ejemplo, y estoy en Adobe XD, este es el archivo de diseño de uno de mis cursos anteriores, y solo lo uso como ejemplo solo para mostrarte todos estos diferentes pesos de fuente y cómo usar para acentuar lo que quieres mostrar en tus diseños. Entonces lo que tenemos aquí dentro de la sección de héroes, si lo selecciono y vengo aquí mismo al lado derecho. Así que déjame elegir ésta. Ahí vamos. Se puede ver que el nombre de la fuente es Abierto. Sans, la talla es 24 y el peso es regular. Entonces, ¿por qué es regular? Bueno, porque solo me gustaría que la gente viera esto primero, que obviamente es más grande, más pronunciado y tiene diferente color. Eso se llama punto de atención porque quiero señalar primero su atención a este texto blanco, porque quería que primero leyeran este texto. Por lo tanto, quiero que se vea diferente a este texto en la parte superior e inferior mientras están aquí en el centro leyendo esta heroína es hotel boutique. Quiero que vea que hay otro texto arriba y abajo. Y luego quiero leerlos. Quiero que lo lean porque están ahí. Entonces, si voy y rápidamente lanzo el prototipo aquí mismo, puedes ver cómo se ve eso. Entonces aquí estoy en la sección de héroes y todo lo que pueden ver es esto. Entonces tu ojo se siente naturalmente atraído a la mitad de esta página, a la mitad de esta imagen. Y puedes leer esta heroína es hotel boutique después de la deuda. Se puede ver todo lo que hay otros textos ahí. Bienvenido al hotel boutique de Helen. Bien, tu casa, lejos de casa. Entonces ese es el peso de la fuente. Así es como usarlos. Y puedes notar que esta fuente se ve diferente. Se puede ver que es surf, como mencionamos en un video anterior. Entonces, ¿por qué es eso? Porque la marca de este hotel y de este diseño realmente lo requiere. Y por eso fui por este tipo de look. Entonces si elijo eso, puedes ver que se llama Playfair display 70, que es el tamaño de fuente, mucho más grande en este caso. Porque sin mencionar, de nuevo, todas estas cosas que mencioné, sino para llamar la atención sobre ello. Y entonces se puede ver frío negrita, cursiva es el peso. Es Itálica. Entonces es un poco inclinarse hacia el lado derecho y es audaz. Es más pronunciada que en fuente normal. Así es como puedes equilibrar tus pesos de fuente en muchos ejemplos diferentes. Y si nos desplazamos un poco hacia abajo, se puede ver una vez más, aquí está esa misma fuente ahora en un color diferente para lograr el contraste entre fondo blanco y la propia fuente. Y puedes ver tu hogar lejos de casa. Entonces, una vez más, vamos a volver a ese lemas quizás. Entonces puedes ver algo realmente interesante aquí mismo. Entonces, si selecciono este, puedes ver que es Open Sans 24 bolt. Y si selecciono este, Open Sans 24 regular. Y se puede ver con sólo seleccionar perno y regular y elegir diferente color, estoy apuntando su dirección hacia y señalando su atención en una dirección diferente. En este ejemplo, pueden ver, he querido leer este subtítulo porque es muy importante. Quiero que su mente solo preste atención a estas tres cosas. Así que camas king size, comida incluye acceso a la playa porque estos son puntos clave de venta realmente importantes para este sitio web en particular para atraer nuevos visitantes para que acudan a él. Y luego si quieren, claro, pueden leer el texto debajo de él. Entonces por eso este es audaz y este es regular. Este tiene un color un poco más oscuro que este porque quiero que primero sus ojos se vean atraídos por este texto. La misma historia como con esta y con esta de aquí mismo. Si te desplazas un poco ahora, podemos ver los mismos textos aquí mismo. El hotel boutique Headwinds está bien. Y aquí tenemos una cotización de uno de nuestros clientes anteriores a este sitio web o un testimonio, puedes ver a Jenny desde Londres, pero esta es mucho más pronunciada. Es mucho más grande. Entonces si lo selecciono y vengo aquí mismo, puedes ver que es Open Sans 36 italic. Y tiene este color más oscuro que este, que es Open Sans 24 irregular. Entonces, una vez más, quiero que lean primero la cita y luego vean de quién es la cita. El nombre en este caso realmente no importa demasiado. Puedes deshacerte de él para las segues de diseño. No importa lo que importa es su experiencia con este hotel, porque el próximo cliente que intentas adquirir para tu hotel va a querer ver esa experiencia primero. Realmente no me importó, es Jenny, úsalo , Mark, ¿es quien sea? Realmente no les importa, realmente les importa la experiencia. Y luego se puede ver el contraste debajo de él con el botón libro ahora, que es azul y tiene texto blanco en su interior. Una vez más, por el bien del contraste, si nos desplazamos un poco hacia abajo, se puede ver esto a lo largo de este diseño. Y no sólo este diseño, sino cada uno de los diseños que creo. Porque siempre pienso en estas cosas. ¿ Qué es más importante? ¿ Qué es menos importante? ¿ Qué va a ver la gente primero? ¿ Y cómo puedo acentuar eso con mis fuentes y pesos de fuente? Se puede ver aquí mismo. Entonces, para los nombres de la habitación, fuente es mucho más grande que todos estos abajo. Y se puede ver esto con las características, sí y no. Por supuesto, entonces estamos eligiendo diferentes colores para mostrar qué características están disponibles, cuáles no. Y luego tenemos los diferentes estilos una vez más con el siguiente enlace. Entonces aprende más, pueden hacer clic en ese enlace, es diferente. Entonces, cuando los, cómo están, van a ver el cambio. Entonces hay que pensar en todas estas cosas. Aquí. Se pueden ver las características. Entonces tenemos alberca privada, tenemos hermoso jardín, contamos con estacionamiento privado. Todos estos son súper fáciles de leer que con un propósito. Por eso elegí esta fuente, que es mucho más grande, que es un poco diferente, que es boulder, tiene un color más oscuro que la fuente debajo de ella. Una vez más, estaba usando Open Sans como fuente principal. Este de aquí mismo, y Playfair muestran para esta fuente grande en negrita. Una vez más, si nos desplazamos un poco hacia abajo, puedes ver que esto vuelve a suceder. Entonces visita Delos, que es el título, y este es el texto. Entonces, si no quiero leer este texto, todo lo que puedo ver y todo lo que necesito saber realmente es visitar Delos. Entonces hay algo que hacer en las exhibiciones. Y si nos desplazamos un poco hacia abajo, una vez más, reserve su estancia con nosotros. Por lo que realmente los invita a reservar su estancia con este lugar. Y una vez más, se puede ver este contraste aquí mismo sucediendo con el fondo blanco y este texto gris oscuro. Y último ejemplo es suscribirse a boletines informativos. Entonces realmente te está llamando a la acción, a tomar acción. Y entonces esto es lo que ves. Primero, inscríbase a un boletín. Esto es lo que ves en segundo lugar, y eso es una vez más con un propósito porque quiero pronunciar esto, apúntate a un boletín porque esa es la acción que quiero que tome. Y luego una vez tengo su atención con suscribirse a newsletter, registrarse y recibir noticias y actualizaciones y bla, bla. Eso es realmente secundario porque quiero que se queden en esta parte de la página el mayor tiempo posible. Entonces así es como puedes usar fuentes, formas de fuente y diferentes colores, y tal vez incluso diferentes familias de fuentes para acentuar lo que quieres que tus usuarios vean en tu página. Puedes explorar esto con muchos más detalles. Y dependiendo de tu esquema de color para tu proyecto, esto puede ser realmente aún más complejo o incluso más simple que el ejemplo que acabo de mostrarte, que solo tiene algunos colores en él. 5. Elige fuentes: A la hora de elegir fuentes para tu proyecto, realmente hay dos consideraciones principales. Deberías tener fuentes existentes y el tema principal del proyecto, las fuentes existentes son obviamente las fuentes que tu cliente estaba usando anteriormente. Entonces puedes echar un vistazo a esas fuentes. Ver toda la familia de fuentes, ver lo que tiene dentro, y tal vez pensar en cómo se puede acentuar un poco más. De lo que hablamos en un video anterior de esta clase. ¿ Cómo puedes usarlos un poco diferente para mostrar algunas características principales del producto o un servicio que tu cliente está ofreciendo? Y luego puedes echar un vistazo a los colores, ver cómo se utilizó anteriormente esa familia de fuentes con estos diferentes colores. Quizás si tienes la capacidad de hacerlo, tal vez puedas cambiar esos colores. A lo mejor puedes incluir algunos colores más oscuros, son algunos colores más claros. Tal vez puedas agregar tonos de estos diferentes colores que ya están usando o introducir nuevos colores completamente al proyecto para darle más vida y traer más adeptos al proyecto en la que estás trabajando. La otra forma de hacerlo es con nuevas fuentes. Y cuando estés eligiendo nuevos fondos, asegúrate de prestar atención a lo que ya mencioné en uno de los videos anteriores. Considerado del proyecto en sí. Obviamente, no vas a usar estas fuentes atrevidas, brillantes y extravagantes. Si estás haciendo sitio web para un banco, tal vez porque el banco está tratando transmitir un sentimiento de confianza, de seguridad, de estabilidad. No conozco nobleza en algunos casos. Entonces quieres ponerle atención a eso. ¿ De qué se trata tu proyecto? Qué es lo que se intentó transmitir a los propios usuarios. Entonces, por lo tanto, hay que usar estas fuentes que van a corresponder bien con el equipo del proyecto. Por supuesto, si el proyecto está bien, digamos que estás haciendo un sitio web para compañía de cómics o juguetería o cualquier tipo de contenido relacionado con niños como juegos o rubores o muebles, lo que sea que tenga que ver con los niños. Pero incluso con los niños, todavía hay algunos límites cuanto a cuándo puedes usar ciertas fuentes, cómo puedes usarlas. Debido a que la heredabilidad es realmente la clave, especialmente en línea, quieres asegurarte de que tus fuentes sean legibles al final del día, sin importar quién sea tu público objetivo, no importa si es serio o juguetón, si es colorido, todo monocromático, todavía quieres poder saber si es legible o no. Y cómo puedes hacerlo es probarlo en diferentes dispositivos. Cuando creas un sitio web, por ejemplo, tienes que probarlo en pantallas grandes como pantallas de escritorio y pantallas de portátiles, pero también tienes que asegurarte de que funcione bien y que sea legible en pantallasmás pequeñas como Forms. Si estás usando algo como Webflow, es súper fácil de hacer. Simplemente crea una página responsive a partir de tu diseño y simplemente envíate el enlace, quizás envíale ese enlace a alguien que sea mayor, el nuevo tal vez, y mira si pueden leer fácilmente si el color el contraste es bueno, si los pesos de fuente son buenos, si tu ritmo de color es bueno. Así que realmente lo pueden leer. Ellos realmente lo pueden entender, y pueden ver lo que estabas tratando transmitir en esa página en particular. Así que asegúrate de probar siempre, asegúrate de pensar siempre por adelantado. ¿ Con quién hablas? ¿ Con quién hablas? ¿ Quién es tu público principal? ¿ Y la fuente se puede leer usando estos colores contra este fondo? 6. vincular fuente: A veces en algunos ejemplos, quieres usar diferentes familias de fuentes, como en el ejemplo que te mostré anteriormente con ese sitio web de viajes. Tal vez quieras mostrar una sección diferente de esa página o una aplicación móvil usando cierta familia de fuentes. Y luego otra sección, tal vez quieras que sientan que están leyendo un artículo. Por lo tanto, no vas a usar alguna fuente loca y loca. Solo quieres sumar una fuente vieja normal y simple que sea realmente legible, comprensible y súper fácil ver y leer para ellos. Entonces, por lo tanto, tienes que saber sobre emparejamiento de fuentes y ¿cómo puedes emparejar fondos? Bueno, existen diferentes herramientas en línea que pueden ayudarte con eso. Y voy a mostrar algunos en este video en particular. Entonces aquí estamos con el primero de estos tipos de frío variación. Y ya creé un video de YouTube. Voy a vincularlo en los recursos de clase. Simplemente puedes hacer clic y ver ese video completo donde te explico todas estas diferentes herramientas. Pero sólo voy a darte una visión general rápida. En este video en particular, tienes inspiración y tienes guías, guiándote cómo emparejar estas diferentes fuentes. Una vez más, todo se reduce a lo que ya se menciona algunas veces en este video, el tema de tu proyecto y el público con el que intentas hablar. Entonces, por lo tanto, no vas a usar algunas fuentes locas como sigue mencionando a los banqueros, por ejemplo, o alguna audiencia seria. Pero puedes ir al revés con niños y usar algunos colores más juguetones y usar algunas fuentes más juguetonas. Así que la inspiración tipo es el primer sitio web y puedes elegir muchos estilos diferentes. Se puede ver Open Sans y crema. Algunos textos son las fuentes utilizadas aquí mismo. Estos son los colores. Puedes elegir diferentes colores de. Aquí puedes elegir fuentes de encabezado, puedes elegir fuentes de cuerpo. La fuente de encabezado es esta de aquí en la parte superior, que se usa para encabezados o para títulos. Y la fuente body es esta de aquí mismo, que se usa básicamente para párrafos y para todos los contenidos que tiene más texto en ella. Y está más pensado para tarifas más largas. Básicamente, los títulos son más glándulas, pero también puedes leerlos cualquier glándula muy rápido. Pero párrafos, realmente puedes tener que dedicar tu tiempo a leerlos. Y ese es el punto principal aquí mismo. Con párrafos, puedes explorar con varias fuentes y pesos de fuente diferentes. Pero con párrafos, quieres asegurarte de que tu fuente sea legible, que el color tenga un bonito contraste contra el fondo. Y realmente no es demasiada tensión en tus ojos pasar más tiempo leyendo este artículo, especialmente si hay un artículo más largo, si estás haciendo un sitio web para, para noticias por ejemplo, eso es sumamente importante. Ese es el problema clave que debes abordar primero y de inmediato en ese proyecto en particular, porque el objetivo de un sitio web de noticias es que la gente pase mucho tiempo leyendo estos artículos. Por lo tanto, quieres tener una gran fuente que sea realmente legible. Y estos títulos que son realmente mirables porque no quieres que destaquen demasiado, sobre todo en ese tipo de sitios web, porque quieres que sigan moviéndose hacia la lectura estos artículos abajo. Así que explora este sitio web. Como dije, voy a señalar el video que ya creé en mi canal de YouTube todo sobre estas cosas. Y esto lo explico con más detalle. Y voy a dejar los enlaces en ese video, así que asegúrate de echarle un vistazo. El par de fuentes es otro. Entonces puedes ver aquí mismo tenemos losa serif sensorial. Entonces puedes ver que es una especie de grasa monoespacio Display Handwriting. Así que hay un montón de estos diferentes estilos de fuente que puedes elegir. Y puedes ver todas estas Fuentes importantes y fuente principal. Puedes ver combinaciones aquí mismo, puedes ver más emparejamiento de fuentes. Así que vamos a elegir fuentes de visualización y te va a mostrar todas estas fuentes de visualización. Puedes explorarlos. Entonces tenemos esto, que son maridajes de fuentes, punto py people.com. Puede seleccionar una familia de fuentes aquí mismo. Y luego después de hacer eso, puedes elegir diferentes estilos de textos y el estilo. Entonces esto es regular, esto es negrita, esta losa textos secundarios, que es ese párrafo textos que acabamos de mencionar. Y luego te va a dar emparejamientos disponibles. Y por último, font joy, que es súper, súper simple de usar. Entonces tenemos Generar y va a generar un emparejamiento de fuentes diferente. Puedes elegir más contraste o puedes elegir más similitud o contraste equilibrado. Se puede ir entre blanco y negro para ver cómo va a quedar. Especialmente si estás diseñando un modo oscuro en tu sitio web o tu aplicación, entonces puedes ver emparejamientos de fuentes y diferentes tamaños de texto, diferentes pesos y así sucesivamente y así sucesivamente. Entonces aquí tenemos a Montserrat, que es ésta de aquí. Aquí tenemos esta maqueta de la fuente Varney, que es esta de aquí. Por lo que se puede ver H1, H2 y párrafo o encabezamiento uno encabezado dos párrafo o un título principal , subtítulo y párrafo. Sánchez es el texto para el propio párrafo. Para que puedas hacer clic. Te va a llevar a las fuentes de Google, que es lo que esta fuente Sánchez es cuatro. Y entonces puedo dar click aquí mismo y puedo elegir, no sé, a lo mejor éste sólo para ver cómo se ve. Si no me gusta, va a seguir adelante y cambiar esto. Entonces digamos, en realidad no me gustan estos ni este. Quizá pueda ir con algo un poco más brillante como éste. Puedo cerrarlo aquí. Y va a encerrar a esta Montserrat. Realmente no me gusta este, así que puedo seguir adelante y generar más. Se ve que Montserrat está encerrada, quizá me guste esta, pero no me gusta esta. Podemos llegar al grano. Todavía puedes desplazarte todo el camino hacia abajo. Y al final, cuando encuentres la combinación de fuentes perfecta que quieras usar, como te mencioné, puedes dar click aquí. Te va a llevar a las fuentes de Google. Asegúrate de descargar la familia de fuentes Montserrat in Montserrat, luego córtalas. Y pilón Quinn en este ejemplo en particular, asegura de descargarlos todos, los instaló en una máquina. Entonces tienes todos estos diferentes pesos de fuente, como mencioné, negrita regular, y mucho más. Ahí vas. Así de fácil es par de fuentes. Asegúrate de prestar atención a lo siguiente, al contraste, a la legibilidad y al tema para lo que estás diseñando en primer lugar. Obtienes todos estos ordenados. Entonces va a ser muy fácil de diseñar y apenas va a ser fácil de probar. Y hablando de pruebas, asegúrate de probar siempre con tu audiencia, especialmente si tienes acceso a ellas. Entonces, por ejemplo, si estás diseñando para niños, tal vez puedas tener acceso a niños y ver cómo interactúan con el prototipo, cómo están interactuando con el sitio web, con el aplicación móvil. ¿ Es fácil para ellos entender dónde necesitan hacer clic en nuestro que tropezar con estos diferentes elementos de su diseño? A lo mejor algo les está arrastrando demasiada atención. O si estás trabajando con el público mayor, tal vez como sigo mencionando a los bancos, quizás tengas acceso a la gente que está trabajando en el banco. Si estás trabajando para un banco en este caso en particular, tal vez puedas probarlo con ellos, darles una tarea concreta, ver lo fácil que es para ellos encontrar esa tarea, qué fácil es para ellos para navegar por tu app y lo fácil que es para ellos leer el texto que intentas mostrar en esa página en particular. 7. Escala de fuentes: Cuando estás diseñando para la web o para aplicaciones móviles, quieres tener escalado consistente a través de tus tamaños de fuente y pesos de fuente. Y esto se puede lograr con una escala de fuente. Puedes crear escala de fuente, por lo que es mucho más fácil para los desarrolladores más tarde entender qué tipo de tamaño de fuente es para qué, y eso es lo que puedes incluir en tu guía de estilo, solo para mostrarlos junto a tu colores, junto a tus imágenes, tus estilos y mucho más. Entonces en este video, te voy a mostrar cómo crear una escala de fuente fácil. No hay que usar este enfoque. Puedes encontrar otros enfoques en línea. Hay literalmente docenas de enfoques diferentes en línea. Vea cuál funciona para usted, su proyecto y sus propósitos de escalado. Así que comencemos. Entonces aquí estamos en Adobe XD y solo voy a mostrarte cómo crear una escala de fuente rápida usando Adobe XD. Si estás usando Figma Photoshop, lo que sea que puedas crear eso ahí. Pero para ello, voy a usar x D porque me gusta mucho y lo uso todos los días. Entonces voy a hacer click en T para crear H1, por ejemplo. Entonces lo que voy a usar es, digamos una botella así. En lugar de regular, voy a ir con, digamos negro. Y voy a ir con talla de 80. Así que realmente enorme. Y este va a ser mi H1. Quizás, tal vez incluso mayor, tal vez 88, algo así. Ahí vamos. Entonces voy a golpear Control D o Comando D, y bajar esto a tal vez a algo así como 64. Ahí vas. En vez de negro, voy a ir con perno. Y en vez de H1, voy a llamarlo H2. Entonces, lo que se crea aquí mismo es una clara distinción entre Heather. Jaspeado. Heather one es algo que voy a usar en mis imágenes de héroe, por ejemplo, en el centro del diseño mismo, en el centro de estas imágenes de héroe. A diferencia del ejemplo que te mostré anteriormente. Pero esto es simplemente más acentuado, grande, más audaz, negro en este caso, pero este es audaz porque tal vez quiera usarlo tal vez como título de mis secciones tal vez o algo así. Entonces, por lo tanto, es audaz y no negro y es 6488. Entonces, si bajamos un poco más, puedes crear un H3 en este caso. Y en vez de 64, tal vez podamos usar 48 para este caso. Y en lugar de perno, en realidad no, mantengámoslo audaz para esto. Entonces si bajamos un poco, podemos crear algo como H4. Y en vez de 48, tal vez podamos ir con 40, en este caso n. Vamos a usar un regular esta vez. Por lo que se puede ver claramente la distinción entre estos. Entonces si bajamos un poco H5, y en este caso tal vez podamos usar algo, no sé, 24. A lo mejor, ahí vamos. Quizás podamos usar esto como texto de párrafo o algunos ejemplos o algo así, algo que es un poco más pequeño y H6, vamos con, no sé, 16 tal vez en mis casos son realmente no quiero ir más allá de 16. Entonces tenemos H1, H2, H3, H4, H5 y H6. Quizás puedas renombrarle el nombre este H6 y llamarlo textos de párrafo. Quizás puedas mostrarle algo así a tus desarrolladores, ver lo que piensan. Y lo que también puedes hacer es golpear Control D Una vez más en cada uno de estos y escribir alfabeto. Entonces a, a, B, B, B, C, C, D, D, E, y así sucesivamente y así sucesivamente. Así que puedes escribir todo el alfabeto y mostrar peso de la fuente y el tamaño de fuente en este ejemplo en particular sobre el alfabeto, o algo más que puedas hacer es puedas usar algo así como, No sé, texto de Lorem Ipsum o algo así. No tengo el atajo de teclado aquí mismo, y no tengo el plug-in instalado aquí mismo. Así que vamos con esto. Entonces Lorem Ipsum ROC se reunió, tal vez pueda copiar este texto y luego pueda hacer lo mismo con este. Simplemente pegarlo. Y lo que esto te va a permitir es mostrarle a tu cliente y a tus desarrolladores cómo va a quedar el texto en particular en casos de uso particulares. Entonces digamos que a propósito comencé con este color en particular. Y la razón por la que elegí hacerlo es solo para mostrarte las principales diferencias entre estos textos. Pero en este caso en particular, lo que haría a propósito es que rápidamente seguiría adelante y cambiaría este color a algo mucho, mucho, mucho más oscuro. Y tal vez guárdala aquí mismo como muestra de color. O puedo seguir adelante y editar aquí mismo a mis colores. Entonces lo que puedo hacer es. Deshazte de éste. Quizás pueda seguir adelante y elegir el mismo color, pero ir unos pasos hacia algo así, luego elegirlo para que sea de un color diferente. Y lo que puedes hacer es dar los nombres de tus muestras de inmediato. Entonces este es H2, color. Ahí vas. Este es H1. Y tal vez podamos ir aún más lejos. Lo siento, veamos si se trata de un H2. Para que pueda volver atrás y usar el H12 y luego ir un paso arriba, algo así. Guárdalo aquí mismo, guárdalo aquí mismo, llama a esto de tres años. Ahí vamos. Y luego por fin, a lo mejor quiero ir con algo aún más brillante. Para este, quizás, tal vez no, pero todo depende realmente de ti. Quizás algo así. Ahí vas. Y le puedo dar un nombre de H4. En este caso en particular, se puede ver que son realmente similares. Pero ahí está el punto de este video, pero tus clientes quizás tengan el color principal, digamos que el azul son sus colores principales. Entonces en este caso, podemos ir con algo así como tres C6 FF quizás. Entonces azul realmente brillante y fuerte, tal vez ese sea su color principal. Entonces, ¿cómo puedes incorporar este color a tu diseño? Obviamente, no lo vas a usar para esto. Esto es realmente para secciones de héroes y esas cosas, que ya mencioné. A lo mejor lo vas a usar para cada tres. Entonces tres es C6, F, F. Y como pueden ver enseguida, se ve mucho mejor en este ejemplo que en este ejemplo. ¿Por qué es eso? Porque si lo usas para el tamaño de texto más grande que tengas en tu diseño, solo va a robar la atención del usuario de todo lo demás. Eso no es algo que quieras. El texto realmente está ahí para explicar cosas para guiar a tus usuarios hacia lo que deben hacer a continuación, y para realmente ayudarlos, lograron el objetivo su visita en su sitio web o aplicación móvil en particular. Entonces en este caso, usaría el color para el texto, algo así. Y no lo usaría para textos de párrafos porque como mencioné anteriormente, quiere que sus párrafos sean legibles. Quieres que sean fácilmente comprensibles y quieres que tus usuarios puedan navegar fácilmente a lo largo de tu diseño. Entonces una última cosa que me olvidé de hacer es que quiero guardar este color. Ya lo tenemos. Ahí vas. Entonces H5, quiero salvarlo. Ahí vamos. H5. Y vamos a usar el mismo color para el párrafo mismo. Y una última cosa que quiero hacer es seleccionar todos mis tamaños de fuente y venir aquí mismo a los estilos de caracteres y dar clic ahí. Para que veas que los va a asfixiar, algo así. Pero lo que puedo hacer es ir a Control o Comando Z. click aquí para guardar este y ser el primero. Y luego así, y luego así, y solo sube y sube y sube. Ahí vamos. Y claro que puedes cambiarles el nombre. Puedes venir aquí mismo y escribir H1. Y puedes hacerlo con todas estas otras. Entonces H2, H3, y así sucesivamente y así sucesivamente. No te voy a molestar demasiado con ello. Pero el punto aquí mismo es cambiar el nombre de estos. Entonces como dije, es mucho más fácil para los desarrolladores después entender lo que estabas tratando de transmitir si no vas a desarrollar este diseño tú mismo. Entonces ahí vamos. Así de súper fácil es de usar. Y puedes ver si te metes como lo hice antes, simplemente puedes ver arcadas en H1 seleccionadas aquí mismo. O si accidentalmente cambiaste el color, puedes seguir adelante y ver, bien, es un clic H1 justo ahí, y va a ir a usar ese color correspondiente. Para que veas lo súper simple que es esto. Y voy a proporcionar este archivo, que acabo de mostrarte como un archivo de práctica para ti para que puedas probarlo. Hoke alrededor, explotado por ti mismo, tal vez jugando con estos diferentes colores que te acaban de mostrar, o tal vez diferentes familias de fuentes por completo. Entonces usamos Roboto en este caso en particular, tal vez quieras usar algo con una superficie en su interior como la fuente de visualización Playfair, que mencioné anteriormente, o quieres ir aún más audaz que ¿Roboto? Puedes hacerlo bien. Ahí. Ahí vamos. Esas son las escalas de fuentes, y así es como usarlas. Como dije, vas a tener este archivo de práctica, asegúrate de explotarlo, asegúrate de jugar para lograr un resultado perfecto. O si no te gusta este acercamiento de ocho píxeles una parte, como dije al inicio de este video, tienes montón de estos diferentes ejemplos en línea. Asegúrate de explorarlos por ti mismo y ver qué funciona mejor para ti. 8. Tu proyecto de clase: Tu proyecto de clase es crear tu propia escala de fuente, guardarla como una imagen y subirla a tus proyectos de clase. Así que tanto yo como todos los demás en el curso podemos ver lo que creaste. Para que puedas usar esta plantilla la cual voy a proporcionar una en los documentos de clase. Puedes descargarlo y jugar por ti mismo. Asegúrate de usar diferentes fuentes, familias de fuentes en diferentes colores solo para lograr tus diferentes resultados. Y puedes explorar con dos fuentes. No recomendaría ir por encima de eso porque realmente no me gusta cuando la gente está usando más de dos fuentes, realmente no creo que sea necesario, pero puedes hacer lo que quieras con ella, o puedes incluso agregar más tamaños. Puedes jugar con diferentes tamaños y puedes hurgar en lo que creé aquí mismo con todos estos diferentes colores y estilos de personajes, asegúrate de jugar con ellos para lograr tu resultado perfecto. Y luego, como dije, subirlo a tus proyectos de clase. Espero ver lo que ustedes van a crear y me emociona ver cómo van a adaptar esta plantilla que creé en Adobe XD. 9. Conclusión: Entonces ahí tienes, Eso es todo para esta clase. Realmente espero que tengas un mejor entendimiento sobre las familias de fuentes, sobre las fuentes, los diferentes pesos de fuente cómo y cuándo usarlos, así como para qué es Sarah para un sensible y cuándo usar estas, así como finalmente, qué es una escala de fuente y cómo usarla. Realmente espero que hayas disfrutado de esta clase. Asegúrate de revisar el PDF con todos los recursos que mencioné. Asegúrate de revisar el archivo de práctica y ver cómo se ve. Hojea y juega por ti mismo. Muchas gracias por ver esta clase. Si quieres asegurarte de revisar mis otras clases, especialmente en mis clases magistrales, que son cursos que tienen más de 20 horas de duración, entrando en muchos detalles diferentes sobre todas estas cosas. Muchas gracias por ver. Y por último, asegúrate de revisar mi canal de YouTube, que es el impacto total del contenido libre, todo sobre tu diseño UX, técnicas de ingresos pasivos y mucho más, todo hecho dentro del grado adobe XD, tanto por ver este. Y hasta la próxima vez, cuídate.