Si te dedicas al diseño web es posible que te interese saber qué es un sistema de diseño y cómo usarlo en tus proyectos. Se trata de una ayuda extra que te puede apoyar a realizar el trabajo de forma más eficiente.
Pero para conseguir esto es necesario que entiendas el concepto de sistema de diseño y cómo funciona. Y de esto mismo es de lo que te vamos a hablar en este artículo. Échale un vistazo porque podría interesarte.
Índice
Qué es un sistema de diseño
Lo primero que debes tener en cuenta a la hora de conceptualizar qué es un sistema de diseño es que hablamos de procesos o principios. Estos sirven para planificar y construir ese proyecto digital de tal manera que se escogen cuáles son los elementos que debe tener y se organizan dentro de la estructura o arquitectura del sitio web para obtener un resultado.
Para que te sea más fácil entenderlo, imagina que tienes que desarrollar la página web de una empresa. Tienes que crear su estructura y esta debe estar rellena de ciertos componentes o elementos que la conformen. Por ejemplo, el botón de suscripción, los módulos de categorías de productos, una galería de imágenes…
Otra forma de definir el sistema de diseño es como el conjunto de reglas que se deben tener en cuenta a la hora de realizar un proyecto.
Sí debes saber que, dentro del sistema de diseño, habrá tanto elementos tangibles, como pueden ser las herramientas, los componentes, los colores…; como elementos no tangibles, como los valores de la marca, las creencias, la mentalidad…
Ejemplos de sistema de diseño
En la actualidad existen tres documentos en los que se materializa todo el trabajo que se lleva a cabo dentro de un sistema de diseño.
Manual de identidad
También conocido como guía de estilo, se trata de un documento en el que se recogen todas las referencias visuales y de diseño que hay que tener en cuenta para una página web.
El tipo de color, la tipografía, los logotipos, las palabras afectadas y prohibidas…. Son algunos de los elementos que te encuentras dentro de este documento.
Librería de componentes
También se le suele conocer como bibliotecas de diseño y en ellas se suele recoger el nombre de los componentes que se utiliza, la descripción de qué es ese componente y cómo se utiliza, los atributos o ajustes que se les realiza a ese componente para adaptarlo a la página web o al diseño web concreto, los fragmentos de código así como los marcos front-end y back-end.
Biblioteca de patrones
Si bien la biblioteca de patrones podría estar dentro de la anterior, lo cierto es que es muy diferente a esta. En este documento te encuentras con grupos de elementos que forman parte de la interfaz de usuario, es decir, de los artículos del blog, de los formularios, del footer…
Cómo usar un sistema de diseño en tus proyectos
Ahora que sabes que es un sistema de diseños toca saber cómo usarlo en tus proyectos. Y el primer paso que debes llevar a cabo es conocer cuáles son los objetivos que se quieren conseguir con ese proyecto.
Dicho de otra manera, necesitarás conocer el porqué de ese proyecto para entender qué es lo que necesita para llevarse a cabo.
Necesidades funcionales y no funcionales
Antes te hemos dejado con la idea de que con los objetivos puedes saber lo que necesita el proyecto. Y dentro de esas necesidades estarían las funcionales, es decir, aquellas que están relacionadas con los usuarios y con el uso que se le puede dar a la página o al proyecto; y las no funcionales, que son necesarias para el correcto funcionamiento del proyecto.
Siguiendo con el ejemplo que te hemos puesto antes, si estás elaborando el diseño web de una página lo que quieres es que es el usuario pueda pinchar sobre una categoría y que le lleve al catálogo de productos que están dentro de la misma. Eso sería una necesidad funcional. Mientras que el hecho de que el hosting funcione sin que haya fallos ni vaya lento sería una necesidad no funcional, pero igual o incluso más importante que la anterior.
Tipos de sistemas
El siguiente paso a la hora de usar un sistema de diseño es establecer cuál es el que vas a seguir.
Y es que existen diferentes métodos, cada uno de ellos más o menos adecuado. Los más habituales son los siguientes:
- Diseño arquitectónico, centrado sobre todo en la estructura.
- Diseño físico, compuesto por tres pasos: el diseño de la interfaz, el de datos, y el de procesos.
- Diseño lógico, en el que se representan los flujos de todo el sistema y las conexiones o relaciones que hay entre ellos.
Ventajas y desventajas de un sistema de diseño
Todo sistema conlleva una serie de pros y contras y en el sistema de diseño no iba a ser diferente.
Una de las ventajas que tiene utilizar este modo de trabajo es la posibilidad de replicarlo de manera rápida para otros proyectos que sean similares. Lo único que tendrías que cambiar son las características, pero la base sería la misma.
Otra ventaja es la consistencia visual que se establece para ver el resultado final. Pero también para trabajar en equipo ya que cada uno podría enfocarse en una determinada área conociendo las limitaciones que tendría en general el proyecto.
Ahora bien, el mantenimiento de un sistema de diseño no es fácil y requiere de mucho tiempo tanto para enseñarlo a otros miembros del equipo como para hacer que sea útil con el paso de los años.
A eso hay que sumarle que las tendencias van cambiando y el sistema de diseño puede quedarse obsoleto en muy poco tiempo con lo cual a veces no es rentable llevarlo a cabo.
Ahora que ya sabes que es un sistema de diseño y cómo usarlo en tus proyectos, el último paso que te queda es aprender un poco más sobre él y aplicarlo en tus trabajos. Existen muchas empresas que utilizan esto para trabajar como puede ser IBM, Polaris o Airbnb. ¿Te animas a ponerlo en práctica?