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.

12 min
15 Nov, 2023

AI Generated Video Summary

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.

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

3. Alias de Colores y Definición de Tipografía

Short description:

Voy a dar alias a algunos de los colores para darles nombres más específicos, como fondo, acento de fondo y primer plano para la escala de grises. Esto nos ayuda a entender su propósito. Además, tenemos colores de desplazamiento, activo, primario, secundario y base.

necesitamos usar todo. Así que lo que voy a hacer es tomar algunos de esos colores y voy a darles alias para darnos una idea de para qué se utilizan. Así que puedes ver para la escala de grises tengo fondo, que era 50. Vamos a tener el acento de fondo, que creo que era 200. Y primer plano, que era 900. Así que he reducido los colores aquí y les he dado nombres más específicos. Aunque desplazamiento y activo y primario y secundario probablemente sea bastante explicativo, para qué se va a utilizar. También tenemos fondo

4. Tipografía y Escala de Espaciado

Short description:

Entonces, hablemos un poco sobre la tipografía a continuación. Escogiendo tu escala de tipo. Son los tamaños de tus fuentes. Siempre me adhiero a un encabezado de visualización y subtítulo. Tus etiquetas de encabezado son una jerarquía semántica para un documento. Lo último que vamos a necesitar es averiguar nuestro estilo de párrafo también. Entonces, ¿cómo hacemos esto? Aquí está mi ejemplo en Storybook. Ahora, hablemos sobre la escala de espaciado. Cuando estás eligiendo una escala de espaciado, usa algo existente. Simplifícalo un poco.

acento de fondo y el color base, también. Entonces, hablemos un poco sobre la tipografía a continuación. Escogiendo tu escala de tipo. ¿Qué queremos decir cuando necesitamos una escala de tipo? Son los tamaños de tus fuentes. Siempre me adhiero a un encabezado de visualización y subtítulo. Piensa en eso como un héroe. Lo llamaron Jumbotron. Quieres tus tamaños para tus niveles de encabezado. Uno a través de seis. Ahora, solo porque tenemos etiquetas h1 a h6, te animaría a mantener las dos separadas. Puedes querer estilizarlas por defecto usando esta escala. Pero recuerda que tus etiquetas de encabezado son una jerarquía semántica para un documento. Entonces, no sientas que necesitas mantener el estilo atado a la etiqueta en sí misma para propósitos de design. Y lo último que vamos a necesitar es averiguar nuestro estilo de párrafo también. Entonces, ¿cómo hacemos esto? De nuevo, podemos usar una existente Estoy usando nuevamente la escala de tamaño de fuente de Tailwind y la personalizaré a medida que avance. Hablaré sobre eso pronto. Pero primero y ante todo, encuentra tu fuente más tarde. Si no tienes experiencia en escoger fuentes como yo, hay tantas para pasar por alto, incluyendo algunas de estas horrendas joyas en la pantalla aquí. Entonces, adelante y simplemente pon eso a un lado para más tarde. Eso es una tarea en sí misma. Entonces, habiendo dicho todo eso, aquí está mi ejemplo en Storybook. Puedes ver que tengo mi encabezado de visualización y subtítulo y va todo el camino hacia abajo, encabezado 1 a través de 6. Eso está un poco cortado allí. Pero ahora que tenemos esto mostrado en Storybook, si hago cambios a esta escala más tarde, tengo un lugar para ver todo cambiar en un solo lugar. Muy agradable. Entonces, por último, hablemos sobre la escala de espaciado. Ahora, desafortunadamente, esto nos dio un poco demasiado difícil de pegar mi cara en él. Vas a tener que lidiar con Ron Atkinson. Pero me desvío. Cuando estás eligiendo una escala de espaciado, de nuevo, usa algo existente.

5. Construcción de Componentes y Conclusión

Short description:

Su escala es extensa, pero comienza con un pequeño fragmento. Utiliza componentes existentes y estilízalos más tarde. Construye de forma aislada en Storybook para probar diferentes estados. Hice botones, enlaces y tarjetas con diferentes tonos de rosa. Utilicé shadcn para generar código. Aún no es un sistema de diseño completo, pero es todo lo que necesito por ahora. Comienza con lo básico, ajusta más tarde, utiliza herramientas existentes y diviértete con ello.

De nuevo, estoy usando Tailwind en este ejemplo, pero lo simplifico un poco. Su escala es muy, muy extensa. Realmente probablemente no necesitas todo, así que comienza con un pequeño fragmento de ella. Y aquí es lo que podría parecer en Storybook. Hice un rápido componente para mostrar cómo podría verse el tamaño allí.

Pero ahora tenemos nuestras piezas fundamentales que necesitamos para comenzar a construir algunos componentes. Entonces, ¿qué hacemos a continuación? Bueno, en primer lugar, solo construye lo que necesitas. No tengas miedo de usar componentes existentes y estilizarlos a tu gusto más tarde. Y también no olvides, construye de forma aislada en Storybook para probar tus diferentes estados y variaciones. Así que vamos a echar un vistazo rápido a lo que he hecho aquí. Puedes ver que he hecho un botón con estilos primarios y secundarios. También he hecho uno para un enlace. También hice una tarjeta. Puedes ver en esta tarjeta primaria aquí, puedes ver que estoy usando los diferentes tonos de rosa que creé en mi escala aquí. Tenemos el fondo, tenemos el borde, tenemos la base en aquí, y también estamos usando el primer plano para parte del texto. Y ahí lo tienes. También utilicé shadcn aquí para poder generar gran parte de este código con anticipación. Y luego utilicé mi design sistema, mis colores, y mi espaciado, y todo para hacer que parezca y se sienta como un sistema completo aquí. Bueno, completo en el sentido que he demostrado. Definitivamente no es un sistema de design completo aún. Pero eso está bien. Porque esto es todo lo que necesito por ahora.

Entonces, para concluir, comienza con lo básico. Siempre puedes ajustar cosas más tarde. No olvides utilizar herramientas existentes para evitar comenzar desde cero. Y también, mientras lo haces, simplemente diviértete con ello. Pero eso es todo por mi parte. Muchas gracias. Puedes encontrarme en estas plataformas de redes sociales aquí. Y si quieres echar un vistazo a algunos de los ejemplos de código del storybook que mostré, tengo el enlace en la parte inferior aquí para que revises ese repositorio. Muchas gracias. Cuídate. Adiós.

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

Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
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
Vue.js London 2023Vue.js London 2023
20 min
Proven Pinia Patterns
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.
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.
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.
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!