Cuando no estandarizamos el uso de iconos, corremos el riesgo de romper el sistema de diseño ya que no respetamos las reglas básicas a nivel de alineación y tamaño 😰😅.
¿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
Los iconos son muy útiles para comunicar o resaltar características y funcionalidades de nuestros productos, podemos construir nuestras propias librerías de iconos personalizados o utilizar librerías como Font Awesome y completar los iconos que hagan falta si no tenemos un equipo tan grande.
Para definir las reglas y la documentación de una iconografía consistente debemos tener en cuenta los siguientes aspectos:
Aportes 38
Preguntas 1
Cuando no estandarizamos el uso de iconos, corremos el riesgo de romper el sistema de diseño ya que no respetamos las reglas básicas a nivel de alineación y tamaño 😰😅.
Apuntes: ### Iconografía
Puedes tomar 2 caminos:
Ya sabes, documenta todo esto.
Herramienta para gestionar y modificar tus iconos cuando estas diseñando interfaces, es basado en browser y tambien tiene una version para desktop
¡Enjoy it!
Yo utilizo la librería de material design tiene muy buenos íconos
https://icomoon.io/ icomoon este sitio web ofrece iconos gratis y premium. muy útil para sitio web, aplicativos web,plantillas cms y etc…
mas información aquí
Mientras avanza más el curso noto lo complicado que sería no documentar un sistema de diseño 😰
Por un momento pense que mi pantalla esta sucia 😐
¡Hola a todos!
Aquí una excelente página web de iconos:
https://www.flaticon.es/
⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.
✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.
Una buena herramienta para crear iconos custom es Fontastic.
http://fontastic.me/
Creo que este es el mejor final de vídeo que haya visto en Platzi xDDD
Me gusta mucho usar este sitio para inspirarme o descargar iconos, se las comparto https://www.flaticon.com/
Podemos usar iconos de librerías que ya existen como font awesome, crearla nosotros o hacer un mixed de ambos.
Tenemos que utilizar un grid para saber los espaciados que tienen y que estos sean uniformes
Los shapes son las formas o figuras que puede tener nuestro icono (líneas, picos, etc)
Los tamaños son para estandarizar los elementos dentro de otros componentes y que no se salgan de su tamaño
Styles, es básicamente que estilo quieres: realista, funky, etc
Los íconos hoy en día son fundamentales a la hora de querer comunicar a través del diseño. Hay que tomar en cuenta que la gente no lee si no que escanea, esta es la razón principal por la que un ícono se vuelve fundamental ya que es una herramienta que ayudará al usuario a entender mejor las cosas.
Recuerden que la intención de los iconos es comunicar. Lo cual es ideal para sustituir palabras, obvio en textos no. Un ejemplo puede ser los iconos de redes sociales, en lugar de escribir Facebook o Twitter bastará con poner su icono respectivamente.
Tratándose del uso de iconografía, se recomienda utilizar una librería de íconos existente y sobre esa personalizarla agregando íconos propios de tu marca, de otro modo, crear una librería iconográfica desde cero puede ser muy tardado y laborioso, sólo conveniente en equipos grandes donde un diseñador puede dedicarse de lleno sólo a crear nueva iconografía propia de la marca.
Un plugin que me gusta es “Material System” de google listo para usar en Figma
[me encanta esta iconografia] (https://iconsax.io/)
15. Iconografía
Al documentar vamos a definir los tamaños en un grid.
Luego vamos a definir un shape, son las restricciones que tendrán nuestros íconos.
Luego definir el style, que dirá cómo es la iconografía.
Recuerden: Sean claros y concisos!
cuando Rulótico nos dice que debemos tener una librería se refiere a que se puede conseguir gratis o de pago? pues solo conozco flaticon, iconfinder… algo más para agregar.
Los iconos bien diseñados pueden representar fácilmente actividades específicas, como correr, caminar o andar en bicicleta, de manera visualmente intuitiva.
Estos iconos no solo agregan un toque estético, sino que también facilitan la comprensión rápida de la información, haciendo que la interfaz sea más accesible y fácil de usar. Además, los iconos coherentes en todo el sistema de diseño proporcionan una sensación de uniformidad y cohesión, contribuyendo así a una experiencia del usuario más armoniosa y amigable.
Me parece increíble que Rulotico siempre encuentre una nueva forma de despedirse en cada clase
Sospechaba de la existencia de como crear los íconos, pero no esperaba esto 😛
MESSIRVE esta clase!
Como se utilzan los iconos en los sitemas de diseno? Como se estandarizan y que tengan el mismo lenguaje?
.
Varios caminos:
**Notas sobre el tono y estilo:
Categorización de palabras: la idea es tener una librería que exprese la “personalidad” de la plataforma o marca y que sirva de referencia para todo el equipo que la desarrolla: -Buzzwords: palabras claves, propias de la marca, que sustituyen a otras de uso común. Por ej.: en Movistar no se habla de “ofertas” se dice “beneficios“ del Club. -Frases: frases cortas y estandarizadas que explican o comunican sobre la marca. Sirven para automatizar el proceso de creación sin tener que depender de un copywriter en todos los casos. -Objetivo: definir objetivo comunicacional. -Características: definen personalidad de marca. -Íconografía: definir si es propia o de terceros, las formas (shapes), tamaños y estilos. En la documentación se pueden dejar solo las referencias gráficas para que el equipo pueda crear sus propias formas.
Cuando se esta trabajando solo o son muy poquitos los diseñadores involucrados en el producto, la vieja confiable siempre será FontAwesome, muy rápidos de utilizar y en cada update van agregando más.
Me parece razonable, utilizare material design ya que todos los iconos tienen consistencia
Es super importante definir de manera clara y concisa la iconografía. Ya que es la manera en que nos comunicamos con el usuario y romper el diseño puede ser muy malo para nuestro producto.
no rompas las reglas!
Usamos iconos cuando las palabras no bastan. Muchas veces con esto podríamos a utilizarlos de las librerías que ya existen, pero también podemos utilizar una librería creada desde 0. Tambien hay una opción mixta donde utilizamos una librería construida y agregamos iconos que creamos que hacen falta.
Si creamos iconos necesitamos pensar en:
Podemos usar referencias para darle ideas al equipo de como poder hacerlo.
Cuando no estandarizamos el uso de iconos, corremos el riesgo de romper el sistema de diseño ya que no respetamos las reglas básicas a nivel de alineación y tamaño 😰😅.
Me ha pasado mas que todo al trabajar con otros que al no saber la importancia de definir la iconografía de nuestro sistema hacemos un solo desastre.
Ahora con este curso eso va cambiar 💚
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?