Introducción al Kit Digital USS para Diseño
Primeros pasos para diseñar con el kit digital.
Cómo diseñar productos para la USS
Cómo diseñar productos para la USS
El sistema del Kit Digital USS está pensado como una herramiemta para apoyar el desarrollo de productos y experiencias digitales de nuestra universidad. El sistema consta de código fuente HTML/CSS, componentes y recursos de diseño para el desarrollo de interfaces.
Librerías de diseño con metodología Atomic Design
Librerías de diseño con metodología Atomic Design
El Kit Digital USS incluye librerías de diseño disponibles para Figma, con componentes listos para ser usados como piezas de lego que juntos forman las interfaces.
Estas librerías están diseñadas con la metodología Atomic Design, que consiste en construir sistemas de diseño partiendo desde las definiciones más básicas de los elementos. Como colores, tipografías, espaciados e íconos. Estas definiciones primarias se combinan para crear elementos más complejos, que a su vez se juntan y se reutilizan de manera modular y flexible. Como botones, cards, un menú de navegación o incluso un template o página completa.
Átomos
Moléculas
Organismos
Templates
Paginas
Tener un set de componentes y patrones de diseño disponibles reduce la cantidad de decisiones a tomar y el tiempo requerido para diseñar las interfaces. Un beneficio importante es que permite al equipo de diseño enfocarse en el problema y cómo solucionarlo en lugar de la estética de la interfaz.
Estructura de librerías Figma
Estructura de librerías Figma
El kit está dividido en 3 librerías. La librería de fundamentos de diseño contiene todas las bases (átomos). Las librerías de componentes estan conectadas a los fundamentos de diseño en cascada usando todos los estilos y tokens de color correspondientes.
Componentes y patrones de diseño disponbiles para interfaces de pantallas desde 1024px de ancho en adelante.
Conoce más
Componentes y patrones de diseño disponibles para interfaces de pantallas hasta 575px de ancho.
Conoce másDiseñar componentes nuevos que no se incluyen en las librerías actualizadas
Diseñar componentes nuevos que no se incluyen en las librerías actualizadas
Las librerías son productos que están en constante evolución. A medida que van surgiendo nuevas necesidades se van incluyendo nuevos componentes o variantes.
Es posible que no encuentres un componente particular que necesitas. En este caso deberás usar los átomos de la librería de fundamentos, que incluye las tipografías, colores, espaciados, layout e íconos disponibles. Procura diseñar nuevos componentes sólo cuando sea estrictamente necesario y asegúrate de respetar las bases del kit.