Sistema de diseño

#Novedades

La evolución de un ecosistema complejo de productos, comunicaciones y servicios digitales sin un estrategia clara de crecimiento genera irremediablemente incoherencia en el mensaje, la marca y en el apartado visual, además de frustración y fricción para el empleado y colaboradores a la hora de ejecutar cualquier cambio y avance en los productos y canales.

Requiere pues, un esfuerzo tanto de Marketing como de Diseño UX UI, de Maquetación, Front y Back para estar alineados y con un objetivo común, esto es clave para transmitir y desarrollar soluciones óptimas para llegar a nuestros usuarios, clientes, partners y colaboradores.

sistema de diseño

 

Qué es un sistema de diseño?

Un sistema de diseño nos ayuda a encontrar y categorizar los patrones y componentes con los que podemos construir los canales de nuestra marca, mantenerlos organizados reutilizables y evolucionables, para que los equipos de diseño y desarrollo construyan canales más consistentes, más rápido, y con menor coste.

Además un sistema de diseño constituye una potente plataforma de branding, desde la que contaremos al mundo nuestra misión, visión y valores y demostraremos nuestro amor por el diseño y los usuarios de nuestros productos y servicios.

Finalmente es el hub de encuentro entre diseño y desarrollo y de todas aquellas personas que en un momento determinado deban crear material visual; comerciales, ventas, marketing, comunicación, prensa..

sistemas de diseño

Porque un sistema de diseño?

Primero y muy evidente; consistencia.

Consistencia de forma, mensaje y experiencia del usuario en todos los canales; ya sean canales propios como web, app, aplicaciones corporativas, landings, materia promocional, presentaciones o canales externos como redes sociales, plataformas corporativas, agregadores de contenidos, bloging…

Un entorno de experiencias liquidas real.

Modularidad

La modularidad es la clave para poder construir productos y servicios digitales y sostener un lenguaje y experiencia consistente en un entorno con una gran multitud de tecnologías, entornos y dispositivos con sus multitudes de tamaños y sistemas operativos… lo que a su vez nos obliga a la tarea de garantizar experiencias uniformes en un gran variedad de dispositivos, desde smartphones, tablets, netbooks, laptops… hasta televisores y consolas.

Construimos productos y servicios más rápido.

Lo que irremediablemente provoca una reducción de los costes.

Que reducimos costes.

Disponer de un sistema de diseño permite disponer de una librería componetizada y de instrucciones claras de uso reducirá el coste de futuros desarrollos, tanto los que se afronten in como los que se deban externalizar. Todo el esfuerzo se destinará a la definición del producto en negocio.

Misión, Visión y Valores EVERYWHERE.

Un sistema de diseño es una herramienta para mostrar la misión, visión y valores de la compañía al exterior.

Todas las comunicaciones y canales corporativos se impregnan del mindset corporativo, y cada persona se convierte en embajador y propagador de ellos en cada comunicación que elabore.

Y es un elemento diferenciador respecto a la competencia.

Flujos de trabajo

Nos permite definir el ecosistema de trabajo interdepartamental para optimizar flujos de trabajo y de validación.

Evitaremos perdidas de información, malentendidos, dudas y comunicaciones o canales erróneos desde su concepción

sistemas de diseño

¿Qué tiene un sistema de diseño?

Un sistema de diseño se fundamenta en 5 pilares o verticales que sustentan el sentido y ser de un sistema de diseño, son complementarios, retroalimentados y y ninguno de ellos se entiende sin los otros.

Para hacer el sistema de diseño tenemos que tener en cuenta los siguientes elementos superiores claros; el propósito y la cultura de la compañía, la marca, la redacción y la comunicación, la librería de componentes y el ecosistema de trabajo que hace que todo funcione. Esto lo llevaremos a cabo mediante el desarrollo de:

sistema de diseños

¿Qué tiene un sistema de diseño?

  • Brand Guidelines
  • Brandbook
  • Libreria de Componentes
  • Framework
  • Workflow

Brand Guidelines

Es un documento, que detalla las instrucciones básicas que ayudan a entender el uso racional de la marca. En él, se detallan los elementos que la componen, las pautas a seguir y las indicaciones de uso y aplicación de esta. Este documento puede variar de extensión, en función del tipo de marca en cuestión, definiendo a la marca y su uso. No posee características técnicas, ya que su objetivo es ser un documento de trabajo práctico y útil.

  1. Historia de la compañía: de dónde venimos y cómo empezó todo?
  2. Plataforma de marca; misión, visión y valores. Propósito, posicionamiento y esencia.
  3. Identidad verbal; naming, estilo de escritura, tono de voz principal y lenguaje inclusivo.
  4. Identidad actitudinal; personalidad de la marca

Brandbook

El Brandbook o manual de identidad corporativa es un documento en el cual se definen, de manera concisa, todos los elementos que ayudan a construir la identidad de manera inspiradora, sencilla y didáctica.

  1. Imagotipo / logotipo; construcción y uso.
  2. Color; variantes y uso.
  3. Tipografia; familia, variantes, tamaños y uso.
  4. Iconografia; construcción, recursos y uso.
  5. Ilustraciones; justificación, estilo, recursos y uso.
  6. Imagen; justificación, estilo, recursos y uso.
  7. Material de oficina; construcción, recursos y uso.
  8. Email Marketing; construcción, recursos y uso.

Libreria de componentes

Un UI kit (del inglés user interface kit) es un archivo de diseño; en Figma, Sketch, Adobe XD… que incluye varios elementos y componentes para ayudarnos en el desarrollo de las interfaces de usuario en todos los canales necesarios. Se pueden editar fácilmente, de manera que podemos personalizarlos o adaptarlos a nuestras necesidades.

Desarrollado bajo un enfoque «atomic design» y utilizando «design tokens» es la máxima expresión de la modularidad, atomización, flexibilidad y evolución que podemos encontrar en una librería de diseño.

  1. Botones
  2. Cards
  3. Tablas
  4. Formularios
  5. Date Pickets
  6. Alerts
  7. Listas
  8. Espaciados

Framework

Un Framework es un esquema o patrón que nos ofrece un entorno genérico para escribir código en un lenguaje concreto. Elimina así inconsistencias en el diseño del producto, aumenta la colaboración, la eficiencia y la comunicación entre el diseño y los equipos de desarrollo y hace que las actualizaciones de diseño en adelante sean menos frustrantes a nivel tecnológico.

  1. Color
  2. Grid
  3. Reglas estilísticas
  4. Tipografia
  5. Iconos
  6. Componentes del UI KIT

El framework es extremadamente flexible, y nos permite adaptar los componentes un amplio abanico de lenguajes front. Además, un sistema de diseño bien gestionado propagará los cambios de los componentes de forma automática en los diferentes entornos del stack front.

Workflow

El flujo de trabajo es un concepto muy extendido dentro de los procesos de negocios. El workflow es la automatización de las tareas de un equipo, de tal manera que todo queda incluido dentro de un orden y jerarquía preestablecidos, con un midset agile y escalado y adecuado a las caracteriticas del cliente y del equipo al cargo del Sistema de Diseño.

  1. Organización del equipo; quien hace qué, jerarquias y validadores.
  2. Objetivos y metas.
  3. Reuniones; periodicidad, duración, organización y gestión.
  4. Definición de perfiles; quien es quien.
  5. Gestión de archivos y documentación; donde y como se gestiona el repositorio de los recursos.
  6. Metodologia y flujos. Peticiones, validaciones, desarrollos, evolutivos y publicaciones.
  7. Herramientas del proyecto.

Discover Design

¿Cómo desarrollamos un sistema de diseño?

Con nuestra metodología Discover Design.

La metodología ‘Discover Design’ combina metodologías ‘Agile’ con el ‘Design Thinking’, permitiendo su flexibilidad y adaptándola a las características del proyecto.

En cada fase la interacción es continua con el cliente, realizando entregables para su validación y permitiendo una constante visibilidad del proyecto a tiempo real. Asegurando un producto de calidad, evitando así modificaciones en el periodo de maquetación o desarrollo por un mal planteamiento inicial.

sistemas de diseño

Post Relacionados

¿Cómo sobrevivir a un mundo sin cookies de terceros?
Con la pérdida de información que podemos tener por la dependencia de las cookies de terceros, el reto hoy es poner el foco en la data propia o first party cookies y en la segmentación inteligente de audiencias que permitan diseñar acciones y alimentar modelos de inteligencia artificial. ¿Qué está pasando en el mundo del… View Article contact form 7 + acceptance label
Esther Hernández
21 / 06 / 2021 #
Videojuegos
Cuando tenía entre 9 y 11 años pasaba gran parte de mi tiempo jugando SimCity, un juego de simulación de ciudades donde con un presupuesto limitado el jugador debe crear y mantener una ciudad considerando temas como crimen, tráfico, etcétera. Este era mi juego favorito por excelencia y como una gran ciudad no se crea… View Article contact form 7 + acceptance label
Adolfredo Marcos Sembergman León
27 / 05 / 2021 #
Crónica de nuestra charla: Metamorfosis Digital
El pasado 22 de abril, tuvimos el placer de compartir con vosotros nuestra visión acerca de cómo las empresas se transforman para lograr un éxito sostenido. Para ello, y como ya es habitual en Digital Wolves by atSistemas, utilizamos nuestro canal de de charlas para hablar de la metamorfosis digital; que empresas ya establecidas deben… View Article contact form 7 + acceptance label
William Ernesto Guevara Chirinos
05 / 05 / 2021 #
Cómo las empresas se transforman para lograr un éxito sostenido
Si sentimos que el ritmo de los cambios en el mundo empresarial se está acelerando, es porque así lo es. Permitidme deciros por qué. Hemos estado siendo bombardeados por nuevas tecnologías digitales; comenzó con social, mobile, analytics, cloud, IoT y esto ha hecho que las organizaciones se vieran mareadas intentando comprender y aprovechar el uso… View Article contact form 7 + acceptance label
William Ernesto Guevara Chirinos
15 / 04 / 2021 #
El commerce y el marketing moderno pasan por el headless
La era de las soluciones monolíticas está llegando a su fin. Si algo hemos visto en Commerce es que confluyen multitud de servicios y funcionalidades que es imposible que una sola plataforma sea capaz de facilitar, por lo que intentar meter con calzador todos los componentes de un negocio en una sola aplicación ha demostrado con el paso del tiempo que no es una solución válida ni a nivel de tecnología ni a nivel de negocio.  contact form 7 + acceptance label
Daniel Vázquez López
06 / 04 / 2021 #, ,
Design Thinking, el motor para el cambio de rumbo.
Este último año hemos vivido momentos difíciles de imaginar, que han modificado nuestro día a día, nuestra forma de pensar, todo esto tiene un impacto directo en los hábitos de consumo, por ello es necesario realizar un cambio de rumbo, poniendo el foco en el factor humano. El primer paso hacía este cambio es aplicar… View Article contact form 7 + acceptance label
Digital Wolves
23 / 03 / 2021 #
¿Te gusta lo que lees?

Subscribete a nuestra newsletter