Derrota la Parálisis de Decisión: Construyendo un Asesino Sistema de Diseño en Aislamiento

Rate this content
Bookmark

En estos días todo tiene una aplicación o sitio web y los usuarios han llegado a esperar la perfección de sus interfaces de usuario. Con el listón tan alto, puede ser abrumador para aquellos de nosotros que diseñamos y construimos esas experiencias. Antes de empezar a construir necesitas elegir fuentes, tipo, espaciado y colores. Además, cada decisión que tomas parece llevar a aún más opciones.

Shaun te mostrará cómo trabajar a través de estas difíciles decisiones en pequeños pasos aislados que harán que esta enorme tarea parezca un paseo. Aprenderás a construir tus colores, tipos de letra y espaciado en tokens de diseño, construir un tema y desarrollar tus componentes en aislamiento utilizando herramientas como Storybook.

Shaun Evening
Shaun Evening
12 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Derrotando la parálisis de decisión al construir sistemas de diseño permitiendo que algunas decisiones las tomen las herramientas. Usando tokens de diseño para expresar decisiones de diseño como datos, incluyendo colores y tipografía. Alias de colores para darles nombres más específicos y definir la tipografía con una escala de tipo. Utilizar escalas de espaciado existentes y construir componentes en aislamiento para probar diferentes estados. Comenzar con lo básico, utilizar herramientas existentes y divertirse con ello.

Available in English

1. Venciendo la Parálisis de Decisión en Sistemas de Diseño

Short description:

¡Hola, amigos! Mi nombre es Sean Evening. Estoy aquí para hablarles hoy sobre cómo vencer la parálisis de decisión al construir sistemas de diseño. Deja de tomar tantas decisiones al principio. Deja que algunas herramientas tomen algunas decisiones por ti. No hay necesidad de reinventar la rueda. Tenemos Tailwind CSS, Redux UI y Shadcn para ayudarte a empezar. Entonces, ¿cuáles son los conceptos básicos? Vamos a necesitar algunos colores.

¡Hola, amigos! Mi nombre es Sean Evening. Mis pronombres son él, él, y estoy basado en Hamilton, Ontario, Canadá. Estoy aquí para hablarles hoy sobre cómo vencer la parálisis de decisión al construir sistemas de diseño. Entonces, vamos a profundizar. Con todo lo que un sistema de diseño puede ser, es realmente difícil saber por dónde empezar. ¿Cómo debería ser mi paleta de colores? ¿Cómo hago que esto funcione para el modo oscuro? ¿Debería tener un modo de alto contraste? ¿Qué tipo de fuentes debería usar? ¿Cómo se va a ver esto en móvil? ¿Idiomas como el francés y el alemán van a romper mis diseños? ¿Cómo voy a probar todo esto? Y muy pronto, si eres algo como yo, estás listo para desechar todo y llorar en un rincón. Pero no te preocupes, tengo algunos consejos para ti. En primer lugar, deja de tomar tantas decisiones al principio. Buenos ejemplos de esto serían si no vas a tener acciones asíncronas, no definas estados de carga, éxito, o fracaso. Ni siquiera necesitarías describir colores de éxito y error de esa manera. Si no vas a usar sombra de caja, no definas una escala de elevación. En pocas palabras, si no lo necesitas, olvídalo. Siempre puedes volver a ello más tarde. Y recuerda, ninguna decisión es permanente. A diferencia de este tatuaje de mano jQuery. Si no estás satisfecho, puedes cambiar estas cosas más tarde. A menos que realmente importe, no dejes que una decisión o la falta de una sea un obstáculo para que avances a la siguiente cosa. Mi próximo consejo es que dejes que algunas herramientas tomen algunas decisiones por ti. Al menos para empezar. No hay necesidad de reinventar la rueda. Hay muchas herramientas geniales por ahí para ayudarte a empezar. Y no hay respuestas incorrectas. Que es quizás parte del problema. Tenemos Tailwind CSS tiene grandes escalas de color, fuente y espaciado. Podrías usar Redux UI. Tienen grandes componentes accesibles sin estilo. Y Shadcn en realidad junta esos dos para darte algunos componentes realmente hermosos para empezar que son muy personalizables. Básicamente, solo copian y pegan el código del componente en tu base de código para ti. Es realmente, realmente genial.

2. Tokens de Diseño y Escalas de Color

Short description:

Estoy hablando de escala de grises y de colores primarios y secundarios. Tu escala de tipografía. Una escala de espaciado. Y cualquier otra cosa que sea crítica para tu caso de uso. Por ejemplo, si estás creando una aplicación de clima, podrías necesitar crear una escala de color de temperatura. Pero si no estás creando una aplicación de temperatura o de clima, no te preocupes por nada relacionado con las temperaturas. Hablemos de tokens de diseño. Los tokens de diseño son una forma de expresar las decisiones de diseño como datos. Consisten en un par de nombre y valor, con la opción de usar alias para diferentes contextos. Para los colores, podemos elegir de escalas accesibles existentes como Tailwind y elegir una escala de grises. También podemos seleccionar colores primarios y secundarios. Es importante recordar que no tenemos que usar toda la escala de color si no es necesario.

Entonces, ¿cuáles son algunos conceptos básicos? Para empezar, vamos a necesitar algunos colores. Estoy hablando de escala de grises y de colores primarios y secundarios. Tu escala de tipografía. Una escala de espaciado. Y cualquier otra cosa que sea crítica para tu caso de uso. Por ejemplo, si estás creando una aplicación de clima, podrías necesitar crear una escala de color de temperatura. Pero si no estás creando una aplicación de temperatura o de clima, no te preocupes por nada relacionado con las temperaturas. Pero antes de ir más lejos, solo quiero cubrir el tema de los tokens de design. Ahora, los tokens de design son una forma de expresar las decisiones de design como data. Como mínimo, un token de design es un nombre y un par de valores que pueden expresar eso. Entonces, tenemos nuestro nombre, que es como una referencia global al valor. Tenemos el valor en sí, el valor bruto. Y también puedes tener alias que hacen referencia a esos tokens con un nombre más descriptivo para un contexto particular. Y entraremos en eso pronto. Por ejemplo, aquí hay algunos ejemplos de Tailwind en la escala de color Sky Blue. Tenemos sky 50, que tiene un valor de F0F9FF. Pero podríamos aliasarlo como acento primario. Y Sky 500 aquí tiene un valor de 0EA5E9, pero podríamos querer aliasarlo como base primaria. Ahora, mientras estamos en el tema, hablemos de colores. En primer lugar, pensemos en lo que necesitamos. Podemos usar escalas accesibles ya existentes, de nuevo, como Tailwind. Queremos elegir una escala de grises. Resulta que hay varias escalas de grises diferentes que podrías usar, con diferentes tonos de azul o rojo o lo que sea. Usemos una. Y luego vamos a elegir nuestro color primario y secundario. Aquí hay un ejemplo de cómo he armado esto en Storybook. Estoy usando tres escalas de Tailwind. Tengo su gris, que es más neutral. Tengo la escala de rosa y la escala de cielo. Ahora, tener de 50 a 950 es bastante. Y podrías estar pensando, ¿qué vamos a hacer con todos estos colores? Bueno, solo porque se nos ha dado una escala completa no significa que tengamos que

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

The Whimsical Potential of JavaScript Frameworks
React Summit US 2023React Summit US 2023
28 min
The Whimsical Potential of JavaScript Frameworks
Top Content
When it comes to building whimsical interfaces, React is a surprisingly capable ally. In this talk, I'll show you how I use React to orchestrate complex interactions by digging into some examples from my blog.
Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
Proven Pinia Patterns
Vue.js London 2023Vue.js London 2023
20 min
Proven Pinia Patterns
Top Content
With Vue's new-and-improved state management library, Pinia, we gain a much more modular tool. While being more flexible, leaner, and lacking the Mutations of Vuex, Pinia presents us with more opportunities to be creative, for better or worse, with our app architecture and how state management is conducted and organized within it.This talk explores some @posva-approved best practices and architectural design patterns to consider when using Pinia in production.
Component Design Patterns
Vue.js London 2023Vue.js London 2023
18 min
Component Design Patterns
How do you write a good component? In this talk we’ll explore several different patterns for writing better components. We’ll look at techniques for simplifying our components, making them easier to understand, and getting more out of the components we’ve already got.
Design-Driven Full-stack: an End-to-End Dev Workflow that Scales
React Summit 2022React Summit 2022
32 min
Design-Driven Full-stack: an End-to-End Dev Workflow that Scales
I’m going to show you something you haven’t seen before — a simple, integrated workflow made possible by React, RedwoodJS, and Storybook. We’ll start from scratch, generate code for components, design and mock state, then finish with a secure API and CRUD UI.
Sounds hard? It was. But not anymore! 🤯
You’ll learn how to bridge existing development gaps between stateful designs, data fetching, and your API using Redwood Cell components — a one-stop-React-shop for fetch, state, mocks, and design. Teams can move faster. Solo devs can iterate more quickly. And there are secondary benefits from documentation to security to accessibility, which add up to improving long-term maintainability at scale.
Get ready to be inspired by what you’ll be able to build!
Building Figma’s Widget Code Generator
React Advanced Conference 2022React Advanced Conference 2022
19 min
Building Figma’s Widget Code Generator
Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.