Neo-Brutalism como base de un design system

Curso Práctico de Sistemas de Diseño con Figma

Contenido del curso

Visión general de los Sistemas de Diseño

Guía de Estilos con Figma

Librería de componentes

Implementación y medición

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:41

Neo-Brutalism como base de un design system

Curso Práctico de Sistemas de Diseño con Figma

Clase 4 de 26

Clase 4 / 26

Comentarios (21)21 comentarios

Daniel Peralta

Hace 4 años

En lo personal me voy por un estilo en modo oscuro y minimalista jeje, escogí una aplicación de Cine que tiene ciertas inconsistencias en el diseño de su app y le voy a dar un toque personal. Creado el documento

Estefany Aguilar

Profesor

Hace 4 años

Ufff, pinta genial ! Quedo al pendiente de tu resultadooo 😍

Jorge Torres

Hace 4 años

no puedo creer que estemos usando gumroad como ejemplo de algo T-T justamente yo detesto ese marketplace porque es un laberinto buscar cosas 😭 si pudiera, re-haría toda la página desde 0.

PD: la explicación de la profesora genial, mi problema es con gumroad.

Iran Aguirre

Hace 4 años

Llevo meses esperando un curso como este, me siento tan feliz de que lo creaste. Estoy muy animado por todo lo que estoy aprendiendo y lo que aprendere en las siguientes clases. Mil gracias!

Martin Coronel

Hace 3 años

Neubrutalism, una tendencia de diseno, "Amor a lo feo" Textos muy grandes, bordes muy marcados, cualquier persona lo puede hacer.

Este es un concepto que sale de la arquitectura.

Los fundamentos del proyecto son:

Type scale (Tipografia)
Paleta de colores
Espaciado
Elevation.

Componentes:

Buttons
Cards
header
hero

Martín Coronel Product Designer email: dis.mcr@gmail.com

Ketty Reyes

Hace 4 años

Profe Estefany que alegría volver a estar en otro curso contigo, excelente la forma de explicar, tanto visual como el tono de voz.

Martha Liliana Dominguez Gonzalez

Hace 4 años

Escogeré un proyecto personal que quiero que tenga un estilo minimalista y techie. Vamos a ver qué tal!

Estefany Aguilar

Profesor

Hace 4 años

Maravilloso, Martha ! Feliz de ver tu resultado 😍

Miguel Alejandro Camacho Sánchez

Hace 2 años

Puntos importantes de la clase:

Neo Brutalismo es la tendencia de diseño que se utilizará en el curso, caracterizada por:
- Textos fuertes y muy notorios.
- Bordes marcados y secciones bien definidas.
- Inspiración en un estilo "retro" y simple, similar a PowerPoint o Paint.
- Romper con las reglas tradicionales del diseño, siendo más vanguardista y crítico.
La tendencia Neo Brutalismo proviene del Brutalismo en la arquitectura, que rompe con las formas tradicionales.
Fundamentos del proyecto:
- Tipografía: Escalas y jerarquías tipográficas.
- Colores: Elección de una paleta adecuada.
- Elevación: Definir niveles visuales y cómo afectan el diseño.
Componentes del proyecto:
- Botón: Diferentes variantes y su arquitectura.
- Card: Variantes y su arquitectura.
- Header: Responsive tanto para móvil como escritorio.
- Hero: Funcional en dispositivos móviles y desktop.
El sistema de diseño será flexible y puedes adaptar cualquier tendencia de diseño que prefieras.
En la próxima clase se trabajará en nombrar el design system, lo que es crucial para la identidad del proyecto.

Patrick Jhonatan Hernandez Blanco

Hace 2 años

La página que más me encanta y que usa Neo Brutalismo es la de Elementor 👉

Juan Esteban Galvis

Hace 4 años

Me encanta 🤩 aunque un pequeño detalle que me fije (no sé si más adelante se tratará el tema de la accesibilidad 😅) pero los botones con fondo morado y texto negro no tienen buen contraste (tras checar con los hexadecimal tiene muy mal contraste jaja) entonces como por accesibilidad se debería cambiar el color del texto, blanco por ejemplo quería increíble 🤩

Estefany Aguilar

Profesor

Hace 4 años

Hola, Juan ! Gracias por tu comentario, me alegra saber que estás siempre pendiente de la accesibilidad 👏🏼 Pregunta, qué color tomaste para hacer la revisión de contraste ?

El color del botón es el #BA68C8 y cumple con WCAG AA. Más adelante en el curso les cuento cómo escoger colores junto con herramientas poderosas para ello 🥰

Carlos Espinoza

Hace 3 años

La verdad no es mi estilo, pero bueno aprender de todo jajaja

Luis Emmanuel Hernández Rivera

Hace 3 años

Me encanta que Estefany mencione el brutalismo y cómo este ha sido traslapado al mundo WEB. Sin embargo creo que puedo dejar mi aporte sobre otros tipos de movimientos en el diseño y cómo usarlos en el diseño UI.

Erick Jesús Orozco Rocha

Hace 6 meses

A mi me encanta el minimalismo y glassmorphism, que por cierto se decía que había pasado de moda pero desde el año pasado volvió muy fuerte en interfaces mobile principalmente.

Ester Sarai Galvez V.

Hace 6 meses

a mi no me parece tan feo el neobrutalismo

Rony Romero Duque

Hace 3 años

Dónde, cómo, cuándo...? jejeje Existe algún website recomendado donde pueda ver las tendencias de diseño e inspiracionales?

Carlos García García

Hace 3 años

Hola, te recomiendo estas lecturas. UI Trends 2023 y Top 10 UI Trends Every Designer Should Know

Platzi Team

Hace 3 años

Hola! ¿Cómo puedo conocer más sobre tendencias de diseño? ¿Existe alguna pagina que recomienden que te mantiene actualizad_ con ello?

Carlos García García

Hace 3 años

Hola, te recomiendo estas lecturas. UI Trends 2023, Top 10 UI Trends Every Designer Should

Valeria Belén Cerpa Salas

Hace 3 años

Me encanta, muy moderno, fácil de leer y organizada toda la info. Me genera una onda académica.

Erimer Alcantara Peña

Hace 3 años

Excelente! Me gusta mas el Diseño plano, veremos cual aplico en mi proyecto.

Pedro Isaac Aguilar

Hace 3 años

Esta tendencia de diseño Neobrutalista se me hizo bastante similar a Flat Design, el Pop Art y el Vanguardismo, donde predominan las plastas de color con mucho contraste, colores vibrantes, líneas rectas y bordes bien marcados. Lo cual los hace adecuados para ciertos usos, industrias y objetivos pero no para otros.

Otimar Guia

Hace 3 años

A mi me encantó esa página, pero es como dices no es para todo tipo de producto.

MAURICIO MENDOZA

Hace 4 años

Wow muy lindo

Recursos

El Neo-Brutalism es una tendencia de diseño que rompe con la pulcritud tradicional y celebra lo crudo, lo marcado y lo aparentemente feo. Si estás construyendo un sistema de diseño y buscas un estilo vanguardista con personalidad, esta corriente puede ser tu punto de partida ideal para diferenciar interfaces digitales.

¿Qué es el Neo-Brutalism en diseño digital?

Se trata de una estética que abraza lo imperfecto: textos enormes y contundentes, bordes muy marcados, ilustraciones que recuerdan a PowerPoint o Paint, y composiciones que parecen hechas a mano alzada. La idea no es esconder la rusticidad, sino convertirla en lenguaje visual.

¿Qué significa Neo-Brutalism? Es una tendencia de diseño que se traduce como amor a lo feo. Usa tipografías fuertes, bordes evidentes y elementos crudos para generar interfaces con carácter y autenticidad.

Un ejemplo claro es Gumroad, una plataforma que se atrevió a llevar esta estética a su producto. Allí no hay pierde: cada sección está delimitada, los textos gritan jerarquía y las ilustraciones se sienten como collages artesanales. Lo interesante es que, con las pautas correctas, lo "feo" se vuelve memorable.

¿De dónde viene esta tendencia?

Viene de la arquitectura. Existe un concepto previo llamado Brutalism que rompe con la idea de la casa simétrica de cuatro paredes y propone formas inesperadas, materiales expuestos y estructuras honestas. Esa misma filosofía migró al diseño digital.

Y aquí está lo interesante: conceptos de arquitectura, música y química terminan influyendo en cómo diseñamos productos digitales. No estás trabajando en una burbuja, estás recogiendo ideas de muchas disciplinas.

¿Cuándo conviene usar Neo-Brutalism?

No todas las aplicaciones encajan con este estilo. Un banco o un e-commerce tradicional probablemente pierdan credibilidad si lo adoptan, porque sus usuarios buscan confianza y limpieza visual. En cambio, plataformas creativas, portafolios, marcas independientes o productos digitales con personalidad pueden brillar con esta estética.

Si tú prefieres otra corriente, como el Glassmorphism, también puedes adaptarla a este proceso. La tendencia no está escrita en piedra, lo que importa es que tu sistema de diseño tenga coherencia.

¿Puedo usar otra tendencia distinta al Neo-Brutalism? Sí. El proceso de construir un design system es el mismo, solo cambian las decisiones visuales. Puedes elegir Glassmorphism, Minimalismo o cualquier otra y aplicar las mismas bases.

¿Qué incluye el proyecto del curso?

El proyecto se divide en dos grandes bloques: fundamentos y componentes. Ambos forman la columna vertebral de cualquier sistema de diseño funcional.

¿Cuáles son los fundamentos del design system?

Estos son los pilares que vas a definir antes de construir cualquier interfaz:

Tipografía: escalas tipográficas que ordenan jerarquías y mejoran la lectura.
Colores: una paleta coherente que represente la identidad del sistema.
Espaciado: reglas de separación entre elementos para mantener ritmo visual.
Elevación: niveles de profundidad que dan sensación de capas e interacción.

Estas bases pueden ser tan robustas como necesites. Empresas como Uber o Shopify las llevan a niveles muy elaborados, pero para empezar son suficientes y escalables.

¿Qué componentes vas a construir?

La segunda parte del proyecto se centra en diseño atómico, es decir, construir piezas pequeñas que luego se combinan en estructuras más grandes. Vas a trabajar con:

Un botón con sus diferentes variantes y arquitectura interna.
Una card con variantes y estructura definida.
Un header responsive que se adapte a distintos tamaños de pantalla.
Un hero que funcione tanto en mobile como en desktop.

Cada componente se diseña pensando en reutilización y consistencia, dos principios que sostienen cualquier design system serio.

¿Por qué importa elegir bien la tendencia visual?

La tendencia que escojas marca el tono de toda tu interfaz. El Neo-Brutalism, por ejemplo, transmite cercanía, autenticidad y un punto de rebeldía que conecta con audiencias que valoran lo distinto. Otras tendencias proyectan elegancia, sofisticación o transparencia.

Lo clave es que tu elección esté alineada con el producto, el público y la promesa de marca. Un sistema de diseño no es solo un conjunto de componentes bonitos, es la traducción visual de una intención.

¿Te animas con el Neo-Brutalism o prefieres explorar otra tendencia? Cuéntame en los comentarios cuál vas a usar para tu propio sistema de diseño.

Resumen

¿Qué es el Neo-Brutalism en diseño digital?

¿Qué significa Neo-Brutalism? Es una tendencia de diseño que se traduce como amor a lo feo. Usa tipografías fuertes, bordes evidentes y elementos crudos para generar interfaces con carácter y autenticidad.

¿De dónde viene esta tendencia?

¿Cuándo conviene usar Neo-Brutalism?

¿Puedo usar otra tendencia distinta al Neo-Brutalism? Sí. El proceso de construir un design system es el mismo, solo cambian las decisiones visuales. Puedes elegir Glassmorphism, Minimalismo o cualquier otra y aplicar las mismas bases.

¿Qué incluye el proyecto del curso?

El proyecto se divide en dos grandes bloques: fundamentos y componentes. Ambos forman la columna vertebral de cualquier sistema de diseño funcional.

¿Cuáles son los fundamentos del design system?

Estos son los pilares que vas a definir antes de construir cualquier interfaz:

Tipografía: escalas tipográficas que ordenan jerarquías y mejoran la lectura.
Colores: una paleta coherente que represente la identidad del sistema.
Espaciado: reglas de separación entre elementos para mantener ritmo visual.
Elevación: niveles de profundidad que dan sensación de capas e interacción.

Estas bases pueden ser tan robustas como necesites. Empresas como Uber o Shopify las llevan a niveles muy elaborados, pero para empezar son suficientes y escalables.

¿Qué componentes vas a construir?

La segunda parte del proyecto se centra en diseño atómico, es decir, construir piezas pequeñas que luego se combinan en estructuras más grandes. Vas a trabajar con:

Un botón con sus diferentes variantes y arquitectura interna.
Una card con variantes y estructura definida.
Un header responsive que se adapte a distintos tamaños de pantalla.
Un hero que funcione tanto en mobile como en desktop.

Cada componente se diseña pensando en reutilización y consistencia, dos principios que sostienen cualquier design system serio.

¿Por qué importa elegir bien la tendencia visual?

¿Te animas con el Neo-Brutalism o prefieres explorar otra tendencia? Cuéntame en los comentarios cuál vas a usar para tu propio sistema de diseño.

Visión general de los Sistemas de Diseño

Anatomía de un design system en Figma

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

Pasos para crear un design system

Neo-Brutalism como base de un design system

Taller para nombrar tu design system

Documentación de Fundamentos en Sistemas de Diseño

Guía de Estilos con Figma

Design tokens: qué son y cuándo usarlos

Escalas tipográficas con proporción áurea

Creación de Escalas Tipográficas en Figma

Psicología del color para design systems

Tokens de color en Figma con Material Design

Espaciado y elevación en design systems

Espaciado y elevación con tokens en Figma

Iconos e ilustraciones en tu design system

Documentación de Sistemas de Diseño en Figma

Librería de componentes

Atomic Design: Construcción de Componentes en Design Systems

Arquitetura e auditoria de componentes no Figma

Cómo crear variantes de botón en Figma

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

Cómo crear un header con variantes en Figma

Cómo construir un hero con variantes en Figma

Cómo publicar tu librería de Figma

Diseña una landing page con tu design system

Implementación y medición

Calculadora de ROI para design systems

Cómo construimos un design system en startup

Qué sigue después de tu design system

Neo-Brutalism como base de un design system

Progreso del curso

Visión general de los Sistemas de Diseño

Guía de Estilos con Figma

Librería de componentes

Implementación y medición

Recursos

Recursos