Visión general de los Sistemas de Diseño

1

Construcción de Sistemas de Diseño con Figma

2

Conceptos Básicos de Figma para Sistemas de Diseño

3

Creación de un Sistema de Diseño: Pasos y Estrategias

4

Diseño Neobrutalista: Construcción de un Sistema de Diseño

5

Taller de Creación de Nombres para Design Systems

6

Documentación de Fundamentos en Sistemas de Diseño

Guía de Estilos con Figma

7

Conceptos y beneficios de los design tokens en diseño y desarrollo

8

Escalas Tipográficas y Proporción Áurea en Figma

9

Creación de Escalas Tipográficas en Figma

10

Teoría y Práctica del Color en Diseño de Interfaces

11

Creación y gestión de paletas de colores en Figma

12

Espaciado y Elevación en Diseño de Interfaces

13

Espaciado y Elevación en Figma: Guía Práctica y Aplicaciones

14

Uso de Íconos e Ilustraciones en Diseño de Aplicaciones

15

Documentación de Sistemas de Diseño en Figma

Librería de componentes

16

Atomic Design: Construcción de Componentes en Design Systems

17

Arquitectura y Auditoría de Componentes en Atomic Design

18

Creación de Botones con Variantes en Componentes UI

19

Creación de Componentes de Cart en Diseño UI

20

Creación de Headers Responsivos en Figma

21

Creación de Variantes de Componentes en Diseño de Interfaces

22

Publicación de Librerías y Componentes en Figma

23

Uso de Figma para Crear Interfaces con Design Systems

Implementación y medición

24

Vender y medir un sistema de diseño internamente en la empresa

25

Experiencia Creando un Design System en una Startup

26

Desarrollo de Sistemas de Diseño con JavaScript y CSS

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Uso de Íconos e Ilustraciones en Diseño de Aplicaciones

14/26
Recursos

¿Cuál es el papel de los íconos en el diseño de aplicaciones?

Los íconos han formado parte importante del diseño de aplicaciones y sitios web, permitiendo a los usuarios comprender rápidamente la funcionalidad de una aplicación o página. Su función principal es facilitar la navegación y la experiencia de usuario. Por ejemplo, al abrir la aplicación de Platzi, los íconos ayudan a abrir menús o a navegar hacia atrás sin necesidad de palabras. Es vital agrupar los íconos según categorías como flechas, feedback, o temas bancarios, entre otros. Además, aunque no es obligatorio, se recomienda acompañar los íconos con texto para ayudar al usuario a entender mejor el flujo de la aplicación. Algunos íconos, como el menú hamburguesa, pueden admitirse sin texto pues son de uso común y su función es ampliamente conocida.

¿Qué consideraciones debemos tener al usar íconos?

  • Agrupar íconos: Facilita la búsqueda y uso en las interfaces de usuario.
  • Uso cercano al texto: No reemplazan palabras, sino que las complementan.
  • Establecer pautas de uso: Es crucial decidir en qué partes de la interfaz se usarán ciertos íconos y sus tamaños, y documentarlo adecuadamente.

¿Cómo pueden mejorar las ilustraciones la interacción con el usuario?

Las ilustraciones en una aplicación no solo dan contexto visual, sino que también acompañan mensajes importantes que los usuarios deben recibir. Facilitan la comprensión de situaciones o instrucciones específicas dentro de una interfaz. Las ilustraciones confieren un toque humano y estético al diseño visual, reforzando el mensaje y la identidad de la marca.

¿Cómo asegurar consistencia en las ilustraciones?

  • Paleta de colores coherente: Usar el mismo esquema de colores de la marca.
  • Evitar distracciones: Las ilustraciones no deben restar importancia al contenido principal.
  • Aproximación al mundo real: Salvo excepciones intencionales, las ilustraciones deberían ser fácilmente reconocibles para evitar confusiones.

Recursos y herramientas para diseñadores

Existen múltiples herramientas y plugins que facilitan la incorporación de íconos e ilustraciones en proyectos digitales. En plataformas como Figma, se pueden encontrar plugins muy útiles, como uno que agrupa íconos por categorías (comunicación, diseño, marca, etc.) y permite usarlos de manera eficiente en diferentes aplicaciones.

¿Dónde encontrar ilustraciones gratuitas?

  • DrugKit: Ofrece ilustraciones gratuitas ideales para proyectos diversos.
  • Andro: Permite cambiar colores en las ilustraciones para adaptarlas a la paleta de colores de tu proyecto.

Además, la integración de las ilustraciones en Figma es sencilla: puedes descargar SVGs gratuitos y pegarlos directamente en tu proyecto, adaptándolos fácilmente a las necesidades específicas de diseño.

Finalmente, es imprescindible documentar las pautas de uso tanto de íconos como de ilustraciones adecuadamente. Esto asegura uniformidad y facilita la comprensión tanto para el equipo de diseño como para los usuarios finales. Recuerda siempre mantenerte actualizado con cursos y recursos especializados, como los que Platzi ofrece, para seguir mejorando tus habilidades de diseño.

Aportes 12

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Iconos: ayudan a comprender rápida y claramente cómo funcionan las cosas en cada experiencia


Ilustración: agregan información no verbal, contexto y comprensión de lo que se está haciendo


Consideraciones en los iconos

  • Agruparlos: bajo temas o funcionalidades.
  • Usarlos cerca a un texto: los iconos no reemplazan palabras.
  • Establecer pautas: guía de usos y aplicación.

Consideraciones en las ilustraciones

  • Ser consistentes: mantener el mismo estilo
  • Evitar distracciones: hay que mantener presente el objetivo del usuario en cada parte donde interactúe con el producto
  • Usar la misma paleta
  • Acercarlas al mundo real
  • Establecer pautas

iconos que no necesitan texto:

Caneca de basura = eliminar
x = cerrar
< = go back
= go next
corazón = like

Ejemplos

  • ⚙️ Configuración
  • 🔎 Busqueda
  • ✖️ Cerrar
  • 🔔 Notificaciones

Buenas! Creo que aporta 🧐 plugins para figma ➡️https://story.to.design/blog/best-figma-plugins-for-design-systems

**Íconos** que no necesitan estar acompañados de un texto: * 🏠 (inicio) * 🔍 (buscar) * 🗑️ (eliminar) * 🤍 (me gusta, favorito) * 🔔 (notificaciones) * 👁️ (ver)
⚠️ **Importante:** Para sobreescribir las propiedades al cambiar de un icono a otro, estos deben tener un solo vector y llamado de la misma forma: ejemplo: `Icon` ![](https://static.platzi.com/media/user_upload/image-f9b5ae27-e355-48a4-a3c3-ba67280daf1e.jpg)

Uno de los iconos mas llamativos es la famosa campanita, la cual nos notifica de eventos, nuevos cursos, post muy interesantes, entre otras ❤️

Los iconos nos ayudan a comprender rápida y claramente cómo funcionan las cosas en cada experiencia

Me esta gustando mucho este curso 🤩

👽: alien

▼: Desplegar contenido
ᐅ: Play
< >: Desplazamiento de contenido izquierda, derecha
"Lupa": Busqueda
"Campana": Notificaciones
"Tres puntos conectados": Compartir/share
"Engranaje": Configuraciones

Iconos: ayudan a comprender rapida y claramente como funcionan las cosas en cada experiencia.
.
.

Consideraciones:

  • Agruparlos, feedback, arrows, file,etc

  • Usarlos cerca a un texto: No para reemplazar palabras. (No es mandatorio)

  • Establecer pautas: tamanos, donde usarlos,etc
    .
    .
    .

Illustraciones:
Agregan informacion no verbal, contexto y comprension de lo que se esta haciendo.
.
.

Consideraciones:

  • Ser consistente (Ejemplo color, estilo de illustracion, etc)
  • Evitar distracciones
  • Usar la misma paleta
  • acercarlas al mundo real
  • establecer pautas.
    .
    .
    Martin Coronel - Product Designer
    Linkedin