¿Para qué utilizar los componentes?

Clase 9 de 16 • Curso de Patrones y Componentes en Sistemas de Diseño

Contenido del curso

Introducción

1
Patrones y Componentes en Sistemas de Diseño
02:33 min

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD

Tomar examen

Comentarios

Santi Orduño

student•

¿Para que utilizar los componentes?

Son los módulos ya preparados que poseen características de los patrones funcionales y los perceptivos juntos.

Características

No son excesivamente específicos en cuanto a contenido. Ya que un mismo componente puede ser usado en diferentes lados de una interfaz.
El dato es general y descriptivo del uso.

Sus ventajas

Como diseñadores nos interesa tener los componentes listos para al momento de armar nuestra interfaz hacerlo ágilmente. Y así el equipo de Product Design se puede enfocar en problemas más importantes que darle estilos a los formularios.

Angel Flores

student•

Gracias por el resumen

Jhon Edward Bedoya

student•

🟢 Hello!

Te felicito, tomas excelentes apuntes! 👏🏼 Te invito a que pruebes la herramienta de Notion, en ella lograrías cosas increíbles con tu capacidad de síntesis 🤗

Si quieres dominar la herramienta como todo un expert!, te recomiendo el Curso de Organización y Productividad con Notion, está genial! 🚀

Un abrazo de gol! 🦾

Pedro Isaac Aguilar

student•

Los componentes son módulos ya preparados que poseen características de los patrones funcionales y los patrones perceptivos juntos, es decir, cumplen una función específica al resolver un problema y apelan visualmente a la guía de estilo de nuestro SD. Idealmente, tendremos dos grupos de componentes que se tendrán que mantener alineados:

Para Diseño: UI Kit (archivo-librería en Figma, Sketch, etc.)
Para Desarrollo: Librería de componentes con las instancias de código de cada uno (en un repositorio como GitHub)

Diego Perdomo

student•

Los componentes son los módulos ya preparados con las características funcionales y perceptivas.

No son específicos en cuanto al contenido. Puede tener la misma estructura, pero podría variar el texto o el color.
El dato es general y descriptivo del uso. Ventajas para diseño:
Agilidad.
Foco en el problema y no en el estilo.

Ventajas para el desarrollo... A las personas que se encargan de desarrollarlo les conviene tener una librería con los componentes desarrollados a nivel de Front-end para implementar las decisiones de diseño rápidamente. Idealmente, tendremos dos grupos de componentes que se tendrán que mantener alineados:

UI Kit.
Librería de componentes (con instancias de código, puede estar en Github).

Vladimir Benitez

student•

Recuerdo que confundía componentes con Design system pero hoy en día me queda claro que con los componentes creamos un Design system.

Sofia Funes

student•

Se podría decir que un product designer no está involucrado en el sistema de diseño, en realizarlo? Sino que es algo que hace un ui designer?

Marta Monterde Alonso

teacher•

Hola Sophia! Esto dependerá del proyecto, porque si consideramos que nuestro Sistema de Diseño es un producto más, podemos tener una o varias personas representando el papel de product designer. Pero puede haber ambos roles al mismo tiempo. La persona que se encarga del product design tendrá una visión más general del sistema como producto completo, mientras que en UI design se centrarán más en los elementos con los que interactúa el usuario o la usuaria final. Espero haber resuelto tu duda!

Luis Ángel Morales Hernández

student•

Los componentes son como bloques de construcción reutilizables para interfaces de usuario. En lugar de diseñar cada botón, barra de navegación o cuadro de texto desde cero cada vez que trabajas en un nuevo proyecto, creas componentes. Estos son elementos de diseño predefinidos y consistentes que se pueden usar una y otra vez en diferentes partes de tu aplicación o sitio web.

Héctor Alonso Padilla Ramírez

student•

Los componentes en un sistema de diseño son elementos reutilizables que siguen un conjunto de reglas y principios consistentes para garantizar coherencia y escalabilidad en el diseño de productos digitales. Estos componentes permiten a los diseñadores y desarrolladores crear interfaces de usuario de manera eficiente, manteniendo una apariencia y funcionalidad unificadas.

Características de los componentes en un sistema de diseño:

1. Modularidad:

Cada componente es autónomo y se puede combinar con otros para construir interfaces más complejas. Por ejemplo, un botón, una tarjeta o una barra de navegación son componentes independientes que pueden reutilizarse en diferentes contextos.

2. Reutilizabilidad:

Un componente se puede utilizar múltiples veces en diferentes partes de un producto, reduciendo la duplicación de esfuerzos y asegurando consistencia visual y funcional.

3. Consistencia:

Los componentes garantizan que los elementos visuales y de interacción se vean y funcionen de la misma manera en todo el sistema, lo que mejora la experiencia del usuario.

4. Escalabilidad:

A medida que un producto o sistema crece, los componentes pueden adaptarse fácilmente, ya sea modificando su estilo o funcionalidad, sin tener que rediseñar desde cero.

5. Accesibilidad:

Los componentes deben ser diseñados teniendo en cuenta las mejores prácticas de accesibilidad, lo que significa que deberían ser fáciles de usar para todos los usuarios, incluidos aquellos con discapacidades.

6. Flexibilidad:

Aunque los componentes tienen reglas específicas, deben ser lo suficientemente flexibles para adaptarse a diferentes necesidades sin perder su identidad o funcionalidad principal.

Ventajas de los componentes en un sistema de diseño:

1. Ahorro de tiempo:

Al reutilizar componentes ya diseñados, el equipo puede concentrarse en otros aspectos del desarrollo en lugar de recrear elementos de interfaz desde cero.

2. Mejora de la colaboración:

Los diseñadores y desarrolladores trabajan con un lenguaje común. Los componentes actúan como bloques de construcción que ambos equipos entienden, facilitando la comunicación y reduciendo errores.

3. Coherencia visual y funcional:

Un sistema de diseño basado en componentes asegura que todos los elementos del producto mantengan una apariencia y comportamiento consistentes, lo que mejora la experiencia de usuario y refuerza la identidad de marca.

4. Actualización sencilla:

Cuando se realiza un cambio en un componente del sistema de diseño, se actualiza automáticamente en todas las partes del producto donde se haya implementado, evitando inconsistencias.

5. Mejora del rendimiento:

Los desarrolladores pueden optimizar el código subyacente de cada componente para que sean más eficientes, lo que puede mejorar el rendimiento general de la aplicación.

6. Escalabilidad del producto:

Los componentes permiten que el producto crezca sin problemas. Nuevas páginas, pantallas o funcionalidades se pueden construir rápidamente utilizando los componentes existentes.

¿Para qué utilizar los componentes?

Introducción

Patrones y Componentes en Sistemas de Diseño

Patrones en los SSDD

Diseño Atómico: Creación de Patrones y Componentes Eficientes

Principios de Diseño para Sistemas Digitales

Patrones de Lenguaje en Diseño de Interfaces

Patrones Funcionales en Productos Digitales: Definición e Importancia

Patrones perceptivos

Definición de patrones en tu sistema

Documentación de los patrones

Componentes en los SSDD

¿Para qué utilizar los componentes?

Tipos de componentes

Requisitos mínimos

UI Kit y SSDD

Consejos para el UI Kit

Documentación del UI Kit

Design Tokens

Resumen y despedida

Autoevaluación del Curso de Patrones y Componentes en Sistemas de Diseño