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
Visión general de los Sistemas de Diseño
Anatomía de un Sistema de Diseño
Fundamentos de diseño para Figma: lo que necesitas saber antes de comenzar
¿Cómo crear un sistema de diseño? Proceso, principios y flujo de trabajo
Neo Brutalismo: tendencias de diseño y proyecto del curso
Taller Creativo: Nombramiento de nuestro Sistema de Diseño
Conceptos y recursos importantes en Sistemas de diseño
Guía de Estilos con Figma
Design Tokens: cómo y cuándo usarlos
Cómo calcular escalas tipográficas matemáticamente
Guía de Tipografías en Figma: tamaños, escalas y tokens
Cómo escoger colores: psicología, pautas y accesibilidad
Guía de Colores en Figma
Espaciado y elevación
Guía de espaciado y elevación en Figma
Guía de iconos e ilustraciones en Figma
Cómo Documentar Sistemas de Diseño
Librería de componentes
Atomic Design
Arquitectura y auditoría de componentes
Átomo: botón y variantes
Molécula: card responsiva y variantes
Molécula: header responsivo y variantes
Organismo: hero y variantes
Publicando la librería de componentes
Reto: template y páginas
Implementación y medición
Cómo vender y medir un Sistema de Diseño
Mi experiencia creando Sistemas de Diseño (desde cero) en Startups
Toma el Curso de Sistemas de Diseño con Storybook
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
13 Días
16 Hrs
24 Min
48 Seg
Neo Brutalismo: tendencias de diseño y proyecto del curso
4/26Recursos
Aportes 16
Preguntas 2
Ordenar por:
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!
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.
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: [email protected]
Profe Estefany que alegría volver a estar en otro curso contigo, excelente la forma de explicar, tanto visual como el tono de voz.
Escogeré un proyecto personal que quiero que tenga un estilo minimalista y techie. Vamos a ver qué tal!
La verdad no es mi estilo, pero bueno aprender de todo jajaja
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 🤩
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.
### **Puntos importantes de la clase:**
1. **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.
2. La tendencia **Neo Brutalismo** proviene del **Brutalismo** en la arquitectura, que rompe con las formas tradicionales.
3. **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.
4. **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.
5. El sistema de diseño será flexible y puedes adaptar cualquier tendencia de diseño que prefieras.
6. En la próxima clase se trabajará en nombrar el **design system**, lo que es crucial para la identidad del proyecto.
Me encanta, muy moderno, fácil de leer y organizada toda la info. Me genera una onda académica.
Excelente! Me gusta mas el **Diseño plano,** veremos cual aplico en mi proyecto.
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.
A mi me encantó esa página, pero es como dices no es para todo tipo de producto.
Wow muy lindo
Yo creo que usaré Flat Design para mi proyecto del curso.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?