Puntos clave
1. Los sistemas de diseño son patrones interconectados y prácticas compartidas que sirven al propósito de un producto digital
Un sistema de diseño es un conjunto de patrones interconectados y prácticas compartidas organizados de manera coherente para cumplir con los objetivos de un producto digital.
Patrones y prácticas. Los sistemas de diseño se componen de dos elementos clave: patrones y prácticas. Los patrones son los elementos repetitivos que conforman una interfaz, como flujos de usuario, interacciones, botones, campos de texto, íconos, colores y tipografía. Las prácticas se refieren a cómo los equipos crean, capturan, comparten y utilizan esos patrones al trabajar en conjunto.
Diseño orientado al propósito. El objetivo final de un sistema de diseño es ayudar a alcanzar el propósito del producto digital al que sirve. Por ejemplo, el propósito de FutureLearn es “inspirar el aprendizaje permanente en todas las personas, en cualquier lugar”. Este propósito debe guiar todas las decisiones de diseño, desde los principios generales hasta los elementos más pequeños de la interfaz. Un sistema de diseño efectivo combina la rentabilidad en el proceso de diseño con la eficiencia y satisfacción en la experiencia del usuario, todo en relación con el propósito del producto.
Elementos interconectados. Los patrones de diseño no existen de forma aislada; forman un lenguaje interconectado que moldea toda la experiencia del usuario. Este lenguaje combina patrones funcionales (elementos tangibles de la interfaz), patrones perceptuales (cualidades estéticas) y otros tipos específicos del dominio y la plataforma del producto. Las conexiones entre patrones son tan importantes como los elementos individuales para crear una interfaz coherente y significativa.
2. Los principios de diseño efectivos ofrecen orientación práctica y tienen un punto de vista claro
Los buenos principios de diseño no intentan ser todo para todos. Tienen una voz propia y animan activamente al diseñador a adoptar una perspectiva.
Cualidades de principios efectivos. Los principios de diseño deben ser auténticos, prácticos, con opinión y memorables. Frases genéricas como “Hazlo simple” son menos útiles que consejos específicos y accionables. Por ejemplo, “No partes innecesarias. Cada elemento de diseño debe tener un propósito y contribuir al propósito de un elemento mayor del que forma parte” ofrece una guía clara para los diseñadores.
Equilibrio de prioridades. Los buenos principios ayudan a los equipos a definir prioridades y equilibrar factores en conflicto. Por ejemplo, los principios del Salesforce Lightning Design System están ordenados así: “Claridad. Eficiencia. Consistencia. Belleza.” Esto comunica que la claridad debe ser siempre lo primero, mientras que la belleza no debe prevalecer sobre la eficiencia o la consistencia.
Principios en evolución. Los principios de diseño no son inamovibles; deben evolucionar con el producto y ser probados y refinados regularmente. Incorporar los principios en las conversaciones y críticas diarias de diseño ayuda a mantenerlos relevantes y efectivos. Los equipos deben evaluar continuamente si sus principios están facilitando el proceso de diseño y ajustarlos si no es así.
3. Los patrones funcionales permiten o fomentan comportamientos específicos del usuario
Los patrones funcionales son los bloques tangibles de la interfaz. Su propósito es habilitar o incentivar ciertos comportamientos del usuario.
Diseño orientado al comportamiento. Al definir patrones funcionales, comienza identificando los comportamientos clave del usuario que deseas apoyar. Por ejemplo, en un sitio web de recetas, los comportamientos centrales pueden incluir seleccionar ingredientes, elegir una receta y seguir los pasos dentro de un tiempo asignado. Los patrones funcionales que diseñes (como tarjetas de receta o instrucciones paso a paso) deben facilitar directamente estos comportamientos.
Propósito y estructura. Cada patrón funcional debe tener un propósito claro relacionado con el comportamiento del usuario. Documentar este propósito ayuda a evitar duplicaciones y usos incorrectos a medida que el producto crece. Además, mapear la estructura del contenido de un patrón (elementos centrales, jerarquía y agrupaciones) puede ayudar a decidir si los patrones deben unificarse o mantenerse separados.
Evolución y consistencia. Aunque la ejecución y presentación de los patrones funcionales puede cambiar con el tiempo, su propósito central vinculado a los comportamientos del usuario suele mantenerse estable. Ser consciente del propósito de un patrón ayuda a los equipos a entender cómo funciona el sistema y a evitar fragmentaciones a medida que evoluciona. Inventarios regulares de interfaz y auditorías de patrones son esenciales para mantener la consistencia e identificar áreas de mejora.
4. Los patrones perceptuales moldean cómo se siente y se percibe un producto
Los patrones perceptuales siempre están presentes, incluso si no se diseñan intencionalmente. Hasta una herramienta puramente funcional tiene una estética.
Más allá del estilo visual. Los patrones perceptuales incluyen elementos como color, tipografía, espaciado, animaciones y tono de voz. Estos patrones trabajan juntos para crear la estética general y el impacto emocional de un producto. Incluso productos con funcionalidades similares pueden sentirse muy diferentes debido a sus combinaciones únicas de patrones perceptuales.
Expresión de marca. Los patrones perceptuales efectivos se convierten en poderosos diferenciadores del producto al expresar la marca a través de la interfaz. Ayudan a que un producto sea memorable y moldean cómo los usuarios perciben su calidad, confiabilidad y carácter. Por ejemplo, la sensación cálida y personal de Spotify se crea mediante una combinación de estilos de imágenes, proporciones de color, interacciones sutiles y elecciones tipográficas.
Enfoque sistemático. Para influir en la percepción de manera confiable y a gran escala, los equipos deben ser conscientes de los patrones que la generan. Esto implica:
- Identificar patrones distintivos y memorables
- Auditar estilos existentes y agruparlos por propósito
- Definir patrones claros de uso y principios guía
- Especificar bloques constructores (como paletas de color o escalas de tiempo para animaciones)
- Equilibrar la consistencia con la expresión creativa para evitar diseños genéricos
5. Un lenguaje compartido es crucial para sistemas de diseño cohesivos y la colaboración en equipo
Sin un lenguaje compartido, un grupo de personas no puede crear eficazmente en conjunto: cada persona tendrá un modelo mental diferente de lo que intenta lograr.
Nombrar colaborativamente. Nombrar los patrones en equipo ayuda a los miembros a comprender mejor su propósito y crea un vocabulario común. Los nombres efectivos suelen ser metafóricos, con personalidad y comunican el propósito del patrón. Por ejemplo, FutureLearn usa nombres como “Whisperbox” para un elemento promocional sutil y “Boss” para el botón principal de llamada a la acción.
Visibilidad y uso. Para establecer un lenguaje compartido:
- Haz visibles los patrones de diseño (por ejemplo, creando un muro de patrones)
- Refiérete consistentemente a los patrones por sus nombres acordados
- Incluye el sistema de diseño en el proceso de incorporación de nuevos miembros
- Organiza reuniones regulares sobre el sistema de diseño
- Fomenta la colaboración diversa entre disciplinas
- Mantén un glosario de términos
Cambio cultural. Crear un lenguaje compartido es un proceso gradual que requiere una cultura de equipo que lo apoye. No se trata solo de nombrar cosas juntos, sino también de establecer prácticas para evaluar, discutir y articular decisiones lingüísticas en equipo. Este proceso puede conducir a una mejor colaboración y a un enfoque de diseño más cohesivo.
6. Los sistemas de diseño pueden variar en rigurosidad, modularidad y estructura organizacional
El sistema adecuado para ti no es el sistema de otro. Lo que funciona para un equipo puede no funcionar para otro.
Espectro de rigurosidad. Los sistemas de diseño pueden ir desde estrictos (como el de Airbnb) con reglas y procesos precisos, hasta flexibles (como el de TED) que permiten un diseño más sensible al contexto. Los sistemas estrictos ofrecen consistencia pero pueden volverse rígidos, mientras que los flexibles brindan flexibilidad pero corren el riesgo de fragmentación.
Compensaciones de modularidad. Los sistemas modulares son adaptables y rentables, pero pueden generar diseños genéricos. Los diseños integrados son más coherentes y específicos, pero no escalan bien. El grado de modularidad debe depender de las necesidades y objetivos del producto.
Modelos organizacionales. Los sistemas pueden ser centralizados (gestionados por un solo grupo) o distribuidos (mantenidos por todos). Los modelos centralizados ofrecen propiedad enfocada pero pueden convertirse en cuellos de botella, mientras que los distribuidos son más ágiles pero difíciles de mantener cohesivos.
Ajuste cultural. La efectividad de un sistema de diseño depende de qué tan bien se alinea con la cultura del equipo y las estructuras de comunicación. Los equipos deben elegir un enfoque que les permita manejar las desventajas de forma efectiva, en lugar de intentar copiar directamente el sistema de otra empresa.
7. Define sistemáticamente los patrones comenzando por el propósito y los comportamientos del usuario
La intención de diseño puede expresarse de muchas maneras: los patrones no tienen que ser visuales. Pueden representarse en objetos físicos (como el interior de una librería) o ser transmitidos por una voz.
Inventario dirigido por el propósito. En lugar de enfocarse solo en la consistencia visual, realiza un inventario basado en los comportamientos del usuario y el propósito de los elementos de la interfaz. Este enfoque ayuda a conectar los patrones con la intención y el espíritu del producto.
Pasos para un inventario dirigido por el propósito:
- Identificar comportamientos clave para cada segmento del recorrido del usuario
- Desglosar esos comportamientos en acciones específicas
- Agrupar los elementos de interfaz existentes según las acciones que apoyan
- Definir patrones basados en esos agrupamientos
Definición de patrones. Al definir patrones:
- Usa una escala de especificidad para decidir si los elementos deben fusionarse o mantenerse separados
- Mapea las estructuras de contenido para entender las relaciones entre elementos
- Crea variantes para patrones que comparten estructura pero requieren presentaciones diferentes
- Elige nombres que reflejen el propósito del patrón y guíen su uso
Proceso continuo. Sistematizar una interfaz es un proceso iterativo. Comienza con los patrones centrales fundamentales para la experiencia y luego expande gradualmente a otras áreas. Auditorías e inventarios regulares ayudan a mantener el sistema en buen estado a medida que evoluciona.
8. Los patrones perceptuales deben definirse de forma holística para crear una estética cohesionada
Para influir en la percepción de manera confiable y escalable, debemos ser conscientes de los patrones que la generan.
Patrones distintivos. Comienza identificando los elementos más memorables y distintivos que hacen que tu producto se sienta de cierta manera. Este ejercicio ayuda a capturar la estética central y proporciona orientación para todo el proceso de definición de patrones perceptuales.
Enfoque sistemático. Para cada patrón perceptual (color, tipografía, animaciones, etc.):
- Define su propósito y la sensación que se busca en tu producto
- Audita las instancias existentes y agrúpalas por propósito
- Define patrones de uso basados en propósito y sensación
- Especifica bloques constructores (por ejemplo, paleta de colores, escala tipográfica, tiempos de animación)
- Acorda principios guía para su uso
Perspectiva holística. Considera cómo los diferentes patrones perceptuales trabajan juntos para crear la estética general. Por ejemplo, las elecciones de color afectan la legibilidad tipográfica, y el tiempo de animación influye en la percepción de interactividad. Equilibrar estos elementos crea un lenguaje de diseño cohesivo y con propósito.
9. Las bibliotecas de patrones requieren participación multidisciplinaria para ser realmente efectivas
Las bibliotecas de patrones multidisciplinarias son más resilientes y duraderas. Facilitan un lenguaje compartido en toda la organización y aportan valor a todos.
Creación colaborativa de contenido. Comienza documentando los patrones en un formato simple y accesible, como Google Docs. Esto permite que miembros de diferentes disciplinas contribuyan, revisen y den retroalimentación fácilmente. El contenido debe incluir nombres de patrones, propósitos, ejemplos y pautas de uso.
Organización flexible. No existe un único método para organizar patrones. Los métodos comunes incluyen:
- Separar patrones perceptuales y funcionales
- Listados alfabéticos
- Categorización jerárquica (por ejemplo, diseño atómico)
- Agrupación por propósito o estructura
Experimenta con diferentes esquemas organizativos y prepárate para ajustarlos según la retroalimentación del equipo y pruebas de usabilidad.
Documentación en evolución. Comienza con documentación ligera de los patrones centrales y expándela gradualmente. Enfócate en que la información sea fácil de escanear y relevante para distintas disciplinas. Incluye ejemplos claros, tanto visuales como de código, para demostrar el uso correcto. Revisa y actualiza regularmente la biblioteca de patrones para que siga siendo un recurso valioso y vivo para todo el equipo.
Última actualización:
FAQ
What’s "Design Systems: A practical guide to creating design languages for digital products" by Alla Kholmatova about?
- Focus on design systems: The book explores how to create, maintain, and evolve design systems for digital products, emphasizing both patterns and shared practices.
- Practical, real-world approach: It draws on case studies and interviews with companies like Airbnb, Atlassian, TED, and FutureLearn to illustrate effective design system strategies.
- Two-part structure: The book is divided into "Foundations" (covering principles, patterns, and shared language) and "Process" (covering planning, systemizing, and pattern libraries).
- Not a technical manual: While it discusses front-end practices, it’s not focused on code or development tools, but rather on systematic design thinking and team collaboration.
Why should I read "Design Systems" by Alla Kholmatova?
- For practical guidance: The book offers actionable advice for small and medium-sized teams looking to integrate design systems into their workflow.
- To improve team collaboration: It emphasizes the importance of shared language and practices, helping teams work more cohesively.
- To avoid common pitfalls: Real-world examples highlight both successes and challenges, helping readers anticipate and manage issues in their own organizations.
- To create sustainable systems: The book provides strategies for building design systems that evolve and remain effective over time.
What are the key takeaways from "Design Systems" by Alla Kholmatova?
- Purpose-driven systems: Effective design systems are built around the core purpose and ethos of the product.
- Patterns and practices: A design system is more than a pattern library; it’s a combination of reusable patterns and the practices for creating, sharing, and evolving them.
- Shared language is essential: Teams need a common vocabulary and understanding to create cohesive products.
- Continuous evolution: Design systems are not static; they require ongoing refinement, collaboration, and adaptation to changing needs.
How does Alla Kholmatova define a "design system" in "Design Systems"?
- Set of interconnected patterns: A design system is a collection of reusable, repeatable interface patterns (both functional and perceptual).
- Shared practices: It also includes the practices and processes teams use to create, capture, share, and use those patterns.
- Organized for purpose: The system is coherently organized to serve the specific goals and culture of a digital product.
- Not just a pattern library: While pattern libraries are tools within a design system, the system itself is broader and more holistic.
What are "functional patterns" and "perceptual patterns" in "Design Systems" by Alla Kholmatova?
- Functional patterns: These are tangible, actionable building blocks of the interface, like buttons, forms, menus, and navigation modules.
- Perceptual patterns: These are more abstract, relating to brand and aesthetics—such as color palettes, typography, iconography, spacing, and animation.
- Role in user experience: Functional patterns support user behaviors and actions, while perceptual patterns shape how a product feels and is perceived.
- Both are essential: A robust design system requires clear definitions and documentation of both types of patterns.
How does "Design Systems" by Alla Kholmatova recommend establishing effective design principles?
- Authentic and context-specific: Principles should be genuine, reflecting the unique ethos and goals of the product and team.
- Practical and actionable: They must offer clear, actionable guidance for design decisions, not just sound good.
- Point of view: Good principles help teams prioritize and balance conflicting values, providing a clear perspective.
- Memorable and relatable: Principles should be few in number, easy to remember, and regularly referenced in daily work.
What is the importance of shared language in "Design Systems" by Alla Kholmatova, and how can teams achieve it?
- Foundation for collaboration: Shared language ensures everyone on the team understands and uses patterns consistently.
- Naming matters: Effective, memorable names for patterns (often metaphorical or with personality) help teams remember and use them correctly.
- Collaborative process: Naming and language decisions should involve multiple disciplines and perspectives for better understanding and buy-in.
- Make it visible: Use pattern walls, glossaries, and regular discussions to immerse the team in the design language.
How does "Design Systems" by Alla Kholmatova suggest teams systemize and document functional patterns?
- Purpose-directed inventory: Start by identifying key user behaviors and mapping interface elements to those behaviors.
- Group by purpose: Organize elements not just by appearance, but by the actions and behaviors they support.
- Define structure and variants: Sketch the content structure of patterns and identify when to create variants versus new patterns.
- Regular audits: Conduct interface inventories regularly to prevent duplication and maintain consistency as the system evolves.
What process does "Design Systems" by Alla Kholmatova recommend for systemizing perceptual patterns?
- Start with signature patterns: Identify the most distinct and memorable aesthetic qualities of your product as a team.
- Audit by purpose: Collect and group existing styles (color, typography, animation, etc.) based on their roles and emotional impact.
- Define usage patterns: Specify not just the properties, but how and when each style should be used for consistency.
- Establish guiding principles: Agree on principles for each style to ensure they work together and support the product’s ethos.
What are the main parameters that shape a design system, according to "Design Systems" by Alla Kholmatova?
- Strictness of rules: Systems can be strict (with precise rules and documentation) or loose (allowing more experimentation and context sensitivity).
- Modularity vs. integration: Systems can be highly modular (with interchangeable parts) or more integrated (optimized for specific contexts).
- Centralized vs. distributed: Ownership and contribution can be centralized (managed by a core team) or distributed (everyone contributes).
- Team culture matters: The right balance depends on the organization’s size, culture, and product needs.
How does "Design Systems" by Alla Kholmatova advise teams to plan, implement, and maintain a design system?
- Secure stakeholder buy-in: Make a business case by quantifying time and cost savings, and demonstrating benefits like brand unity and faster launches.
- Set clear goals and roadmaps: Define objectives for both the interface and team processes, and create a transparent roadmap.
- Foster knowledge sharing: Use Slack channels, pattern walls, workshops, and regular catch-ups to encourage collaboration and learning.
- Maintain momentum: Complete foundational work in focused sprints, then integrate ongoing system work into regular team activities.
What are the best quotes from "Design Systems" by Alla Kholmatova and what do they mean?
- “A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product.”
This highlights the holistic nature of design systems, emphasizing both patterns and the practices that connect them. - “Patterns are the physical embodiment of the behaviors we’re trying to encourage or enable through the interface.”
Reminds teams to focus on user behaviors and goals when defining patterns, not just visual consistency. - “Shared language is fundamental to collaboration.”
Stresses that without a common vocabulary, teams cannot create cohesive products together. - “The right system for you is not someone else’s system. Whatever works for one team might not work for another.”
Encourages teams to tailor their design system to their unique culture, needs, and product context, rather than copying others blindly.
Reseñas
Sistemas de Diseño, escrito por Alla Kholmatova, ha recibido en su mayoría críticas positivas gracias a su exhaustivo abordaje de los conceptos fundamentales de los sistemas de diseño. Los lectores valoran especialmente sus consejos prácticos, ejemplos extraídos de la experiencia real y el énfasis en las filosofías que sustentan estos sistemas. Este libro resulta especialmente útil para quienes se acercan por primera vez a los sistemas de diseño o están iniciando su implementación. No obstante, algunos opinan que en ciertos pasajes se vuelve repetitivo y que carece de un análisis profundo en determinados temas. En conjunto, se considera un recurso valioso para diseñadores y desarrolladores que trabajan en productos digitales, ya que ofrece perspectivas claras para crear sistemas de diseño coherentes y efectivos.
Similar Books
