Yo uso esta extensión de Chrome para saber el nombre de las fuentes usadas en cualquier sitio web 😄 WhatFont
¿Qué es un Sistema de Diseño?
Lo que aprenderás sobre los sistemas de diseño
¿Qué es un Sistema de Diseño?
Bonus: Utilizando Notion
Quiz: ¿Qué es un Sistema de Diseño?
Principios del Sistema de Diseño
Principios del Sistema de Diseño
Niveles de Sistematización
Bonus: Utilizando Coggle
Quiz: Principios del Sistema de Diseño
Paradigmas de Sistemas de Diseño
Paradigmas: Diseño atómico, diseño procedural y DRY
Bonus: Utilizando Adobe XD
¿Qué es un componente?
Foundations
Quiz: Paradigmas de Sistemas de Diseño
Estilos para tu Sistema de Diseño
Tipografía
Bonus: Cómo evitar colores constrastantes
Paleta de colores
Quiz: Estilos para tu Sistema de Diseño
Reglas de espaciado, Animación, Voz y Tono
Reglas de espaciado
Animación
Consejos para empezar a animar usando After Effects
Voz y tono
Quiz: Reglas de espaciado, Animación, Voz y Tono
Icon System y UI Kit
Iconografía
Hitos
Bonus: UI Kit
Quiz: Icon System y UI Kit
Un sistema basado en personas
Un sistema basado en personas
Iteremos
Cierre
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Cuando trabajamos con tipografía para software debemos tener en cuenta las implicaciones que estas pueden generar si trabajamos para dispositivos móviles o los requerimientos técnicos de alguna pantalla en particular. Un buen lugar para encontrar tipografías listas para el desarrollo y diseño de nuestros productos es Google Fonts.
Para definir y clasificar las características y peculiaridades en los elementos de nuestro diseño podemos basarnos las etiquetas de HTML para títulos y encabezados (H1
, H2
, H3
, H4
, H5
y H6
), párrafos (p
) y párrafos más pequeños (small
). Podemos definir que los títulos se trabajen en negrita y con tamaños de fuente más grandes, lo importante es que estas reglas se acomoden al sistema de diseño que estamos trabajando.
Aportes 45
Preguntas 4
Yo uso esta extensión de Chrome para saber el nombre de las fuentes usadas en cualquier sitio web 😄 WhatFont
Este articulo sobre cómo trabajar las tipografias del blog de Platzi me gusto mucho para reforzar lo que aprendimos en clase:
¡Qué bien me cae el profe!
Cuando trabajamos con tipografía que es adaptada a distintos tipos de dispositivos, debemos tener en cuenta algunos lineamientos técnicos.
Es recomendable obtener las tipografías desde Google Fonts, cumple con todos los requisitos y ademas están pensada para aplicarse a desarrollo.
Nos podemos basar en las etiquetas de HTML (H1, H2, H3, H4, H5, H6 , P, SMALL). No es necesario utilizar todas, solo cuando sea necesario. Es recomendable utilizar 3 tipos de tamaños para los titulos (H1, H2, H3) con eso debemos solucionar los problemas de jerarquias.
Con esto ya podemos hacer una collección, son todas las variantes que puede tener la tipografìa.
Ej: Se puede definir que los H son “Bold”, los H1 son de 20px, H2 son de 17px y el H3 de 15px. El “P” puede ser de 12px y el “SMALL” puede ser de 10px
Teniendo esto claro hace que todo el sistema sea consistente.
Martín Coronel
Diseño UX/UI
Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel
De las cosas que más disfruto en mis proyectos web, y en las que más cuidado pongo es en las tipografías…
✨ Concepto clave
Las tipografías nos permiten percibir texto legibles mediante la flexibilidad de estilos a través de su fuente, escala y roles.
.
ℹ️ Definición
Las fuentes son una atributo de un texto que posee diferentes propiedades como tamaño, peso y variantes.
.
Cuando utilizamos fuentes para nuestro producto, debemos tomar como referencia el soporte y acceso a dicha fuente. En uso, debemos tomar en cuenta el soporte para generar alternativas a través del peso y variantes de texto.
.
Sitios donde podemos obtener fuentes:
.
ℹ️ Definición
Las escalas son estilos que pueden ser usados a lo largo de la aplicación, asegurando su flexibilidad entre los rangos propuestos.
.
De manera genérica, podemos estructurar un conjunto de escalas en función de la importancia (como large
y small
) o en función de su uso (como headline
y caption
).
.
Cada una de las escalas que etiquetemos, debemos pensar en una experiencia tipográfica cohesiva, es decir, que mantenga una relación a lo largo de su estructura.
.
Las categorías y sus variantes, son llamadas tokens. De las cuales, pueden ser acordadas entre equipos para definir una nomenclatura para la definición y estructuración.
.
✨ Concepto clave
La definición y agrupación de escalas pueden tomar como referencia metodologías como BEM y peso mediante numerales, (headline
,title-900
, por ejemplo).
.
Las fuentes se comunica a través de diferencias en el peso y el tamaño de la misma, altura de las líneas y del espaciado entre letras.
.
La escala de tipos actualizada organiza los estilos en cinco roles que se nombran para describir sus propósitos: visualización, titular, título, etiqueta y cuerpo.
.
ℹ️ Definición
Los roles son abstracciones de la fuente aplicando una escala, para obtener variedad sobre los casos de usos.
.
Con los roles, podemos estructurar un tópico de un tema y popular casos de usos mediante diferentes vistas o componentes.
.
Mantener una sistema de roles, nos permite emplear diferentes filosofías de desarrollo (DRY, KISS, etc).
En este articulo podran encontrar las 13 mejores webs para descargar fuentes:
https://www.genbeta.com/herramientas/las-mejores-13-webs-para-descargar-tipografias-gratis
Les recomiendo una app que se llama WhatTheFont. Es muy sencilla de utilizar, cuando vean una fuente que les gusta en algún lugar ( un landing page, un objeto, lo que sea ) toman la foto y les dice el nombre de la familia de la fuente
IMPORTANTE⚡
Para las tipografías es MUY RECOMENDABLE USAR la medida rem en vez de px, esto es porque de esta manera nuestro texto se transformará a medida cambiamos el tamaño de vista de la ventana, lo que es excelente por temas de accesibilidad
Les recomiendo esta Web Ahí pueden ver las fuentes que pueden combinar en su proyecto!
😣 Este tema de establecer cuáles serán los tamaños de la tipografía en sus diferentes usos siempre me genera inseguridad, no tengo claro bajo cuál criterio debería determinar cada tamaño.
Por ejemplo, en este caso vemos que el profe Rulótico seteó los H1 en 50 px. En otros sistemas de diseño he visto tamaños de 30 px aprox. Allí está mi duda, ¿bajo cuáles criterios debo escoger estos tamaños?
Si alguno me sabe ayudar le agradezco mucho
Yo no entendí cual es el “spoiler” de Rulótico, ¿De qué curso habla?
Supongamos que deseamos la siguiente visualización:
.
.
Podríamos simbolizar los siguientes elementos:
.
Headline
Normal
24px(1.5rem)
Caption
SemiBold
14px(0.875rem)
Label
SemiBold
16px(1rem)
Profe que buena energía, este curso, además de informativo, me ha parecido bastante divertido
Para saber que tipo de tipografía usa alguna página sin utilizar una extensión pueden usar el inspector de elementos del navegador (F12, o click derecho inspeccionar), les dice que tipografía es, el tamaño de fuente y el color.
Google Fonts es un buen lugar de donde descargar fuentes tipográficas. Ya tiene todo estimado para aplicar el paquete tipográfico para desarrollar en web y mobile.
Cuando trabajamos con tipografía para software debemos tener en cuenta las implicaciones que estas pueden generar si trabajamos para dispositivos móviles o los requerimientos técnicos de alguna pantalla en particular. Un buen lugar para encontrar tipografías listas para el desarrollo y diseño de nuestros productos es Google Fonts.
Para definir y clasificar las características y peculiaridades en los elementos de nuestro diseño podemos basarnos las etiquetas de HTML para títulos y encabezados (H1, H2, H3, H4, H5 y H6), párrafos § y párrafos más pequeños (small). Podemos definir que los títulos se trabajen en negrita y con tamaños de fuente más grandes, lo importante es que estas reglas se acomoden al sistema de diseño que estamos trabajando. Un ejemplo es el siguiente:
Es muy interesante realizar o documentarlo todo, a veces yo cometo el error de documentar en el código y sí aveces resulta dificil encontrarlo xD
Esto es lo mismo que en diseño editorial
¿Cuáles son las implicaciones de tener tipografía aplicada a un celular, tablet o monitor?
Tiene que ser optima, no puedes meter cualquier tipografía y no todas tienen la versión para web.
Google fonts para buscar tipografía
Utilizamos H1 hasta el H6 para generar jerarquías
P small para textos
Hay que tener una forma consistente de tamaños y grosos en las tipografías
Cuando trabajamos con tipografías deben ser responsive, que se adapten a distintos tipos de pantalla, debe de ser optima, entre más texto tengamos mas simple y practica debe ser la fuente y si tenemos menos texto más expresividad podemos darle.
La tipografía es importante por que le da consistencia a nuestro diseño y el usuario la pueda reconocer que es de nuestra plataforma, es recomendable no usar mas de 2 fuentes.
Es importante generar estas reglas de tipografía para nuestro SD y evitar así problemas futuros de tamaño y familia de nuestras fuentes. Además que ayuda a generar identidad con la consistencia y comunicar de forma clara.
Duda: Yo, utilizo la tipografía de Adobe. Qué pasa con el copyright, cunado deje de pagar Adobe? Me la mantendrá en el sitio? Cómo saber (no eres diseñador), que te ayudará en tu objetivo (personal o comercial)? Sé que en el feedback, me dirán si la estética (tipografía, y sitio), están bien.
La elección de fuentes coherentes y la definición de reglas de estilo para encabezados, párrafos y otros elementos textuales garantizan una experiencia de usuario consistente. Las tipografías también contribuyen a la identidad de la marca, transmitiendo su personalidad y tono. Al mantener la coherencia en la elección y aplicación de fuentes, se facilita la comprensión del contenido y se refuerza la imagen de la marca en el diseño general del producto.
Las tipografías son una decisión delicada, tenemos que prestar atencion a los detalles de cada una, sus variable, estilos, familias, etc
Es bastante importante que la tipografía sea completa, puede que te encuentres algunas que no soporten tildes :p
Yo hice una plantilla en Notion con lo que aprendi en esta clase y la comparto para quien quiera usarla. Enlace: Plantilla Tipografia
Yo utilizo mucho Dafont para descargar fuentes
Este articulo sobre cómo trabajar las tipografias del blog de Platzi me gusto mucho para reforzar lo que aprendimos en clase:
⚓️ Guía para elegir y trabajar con tipografía
Es importante usar tipografías que permitan ser usadas en desarrollo y que además funcionen con el producto.
Las colecciones
Cuando escogemos las fuentes y variantes que usaremos tenemos una colección. Así definimos la jerarquía y uso de las fuentes. Hacer esto permite generar una consistencia que hace reconocible para el usuario que se trata de tu producto.
Configurar y restringir las tipografías para que quede consistente
Con la tipografia lucho cada dia porque no se que poner para mi todas están bien
alguien tiene el material de notion completo, ingreso a traves del enlace y realmente solo tiene información el item de principios, los ortos son meros titulos vacios
Tipografía: Es el arte, el análisis y la técnica del manejo y selección de diferentes caracteres que componen un texto para crear trabajos de impresión, aspecto visual y diseño.
Hay muchos aspectos a considerar de la tipografía cuando desarrollamos software. Google Fonts es el mejor lugar para poder utilizar tipografías, ya que son personalizables y están hechas para el uso en web. Tenemos que definir que tipo de etiquetas de HTML usaremos para el texto y sus jerarquías, al igual que hay que definir que tamaños tendrá cada una de estas. Recuerda que tiene que haber CONSISTENCIA.
9. Tipografía
La tipografía debe ser óptima y debe estar establecida.
Se debe pensar de dónde sacar las typo.
Podemos usar diferentes variables usando como base la clasificación de HTML, como:
h1, h2, h3, p y small.
Nos vemos en el próximo curso XD
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?