Qué es un sistema de diseño y para qué sirve

¿Qué es un Sistema de Diseño?

Un Sistema de Diseño es un conjunto de elementos diseñados y desarrollados de manera modular y reutilizables en múltiples pantallas. Por ejemplo, los botones de nuestro producto o servicio, que deberían tener una uniformidad que se mantendrá a lo largo de todas las pantallas (mismo tamaño, mismo color, misma interacción, etc). Tiene su origen en el Atomic Design de Brad Frost. 

Los elementos que forman parte del Sistema de Diseño se crean, guardan y documentan por separado del prototipo de nuestro producto o servicio. La manera de realizar esto es muy variada y depende de los objetivos del proyecto y de las necesidades del equipo.  

Lo habitual es realizar los componentes en un programa de prototipado (como Figma), con una documentación, y un código de dichos componentes, preparado para reutilizar.  

En Itequia realizamos la parte del diseño en Figma, al igual que el prototipado del producto digital, con lo que estos mismos componentes serán los que se utilicen en el prototipado con el mismo programa, agilizando el proceso. 

¿Qué beneficios tiene el hacer un sistema de diseño? 

  • Aportará uniformidad a un proyecto, ya que todos los elementos recurrentes serán iguales. Esto es bueno tanto para los usuarios o clientes, que disfrutarán de una buena experiencia de usuario, como para las personas involucradas en el proyecto, que estarán sincronizadas e informadas. 
  • A la larga, ahorrará tiempos de diseño y desarrollo, porque no habrá que diseñar cada botón desde cero cada vez que haya una pantalla en donde haya botones.  

Un punto importante a tener en cuenta es que los Sistemas de Diseño requieren una inversión de tiempo al inicio, que se verá recuperada a medida que el producto avance y madure. 

Vamos a poner un ejemplo: una app móvil, que lanza una versión mínima (con pocas funciones) y que conforme van pasando los meses, agrega nuevas funciones. Con cada actualización, se necesitarán nuevas pantallas con elementos como botones, formularios, etc. Pues en caso de tener un Sistema de Diseño, no se tendrá que diseñar o desarrollar cada botón desde cero, sino que se reutilizarán en las pantallas que los necesiten.  

Así, la inversión inicial de crear el Sistema de Diseño se verá recuperada con creces con el tiempo que se ahorrará en posteriores fases del proyecto, donde los elementos ya estarán diseñados.  

Además, un Sistema de Diseño es un documento vivo, al que se pueden agregar nuevos elementos o actualizar los existentes a medida que el proyecto vaya creciendo. Con lo que también necesitarán un mantenimiento, pero es un tiempo mínimo comparado con la tarea de tener que crear cada elemento desde cero cada vez que se necesite. 

¿Qué componentes debería tener mi Sistema de Diseño? 

Depende de las necesidades de tu proyecto. Algunos componentes muy comunes son los botones, formularios, navegación, cards, tablas, iconos, etc. 

Antes de abordar la creación (o modificación) de un Sistema de Diseño, se debe hacer una lista de todo aquello que creamos que podremos necesitar. Debería ser una lista bastante completa, aunque no pasa nada si se olvida algo; el documento puede (y debe) ser revisado según vaya madurando el producto. 

En este prototipo puedes ver un pequeño ejemplo de algunos componentes básicos, así como su interacción. Recomendamos ponerlo a pantalla completa para una mejor visualización. 

Sistemas de Diseño existentes 

No siempre es necesario crear un Sistema de Diseño desde cero. Dependiendo de las necesidades del proyecto, es posible emplear Sistemas de Diseño ya creados, con amplia documentación y código preparado para usarse. Es posible también emplear un Sistema de Diseño existente como base y hacer modificaciones sobre él (por ejemplo, cambiar la tipografía, colores, tamaños, etc) para lograr un aspecto visual más único, sin tener que hacerlo todo desde cero. 

Bootstrap 

Bootstrap es la biblioteca de código front end (esto es, código ya escrito para que cualquier persona pueda utilizarlo en sus proyectos) más utilizada. En su página, tiene ejemplos de todos sus elementos, para que se puedan ver todas las opciones e interacciones posibles, y donde se puede conseguir el código de cada uno de ellos.  

 

Sistema-de-diseño-Bootstrap-Ejemplos-Itequia-Design

 

Los puntos fuertes de Bootstrap son la cantidad de elementos y variaciones que tiene, y su larga trayectoria como biblioteca (lanzada en 2011), lo que hace que muchos desarrolladores la conozcan. Esto último es un punto importante a considerar a la hora de elegir una biblioteca ya creada, ya que una biblioteca con poco recorrido, documentación o personas que la conozcan podrá incrementar los tiempos. 

Existen también UI Kits de Bootstrap para usar en Figma, que traen exactamente los mismos componentes, pero preparados para usar en este programa. 

 

Sistema-de-diseño-Bootstrap-Itequia-Design

 

¿Para qué proyectos es adecuado un sistema de diseño? 

Es adecuado crear uno cuando se está trabajando en una página o producto digital que vaya a existir a medio-largo plazo, sobre todo si se prevee que vaya a crecer o madurar.  

Es adecuado también en proyectos en los que están involucradas personas de múltiples departamentos, ya que es un punto en común para personas de diferentes especialidades, donde cada una obtiene la información que es relevante para su trabajo.  

No es adecuado para proyectos cortos donde los elementos se diseñan y usan una sola vez, o donde cambia el estilo por completo cada vez que se actualiza. Por ejemplo, una landing publicitaria que se vaya a usar una única vez para una acción concreta que utilice elementos de marca diferentes a los habituales no sería adecuada para crear un Sistema de Diseño. 

Sean cuales sean las necesidades de tu proyecto, puedes contactar con nosotros y te ayudaremos en el diseño de tu producto o servicio.

Suscríbete a la newsletter

    ¿En qué te podemos ayudar?