Ilustración basada en componentes usando Sketch, Parte 1: principios, estilos y características

"Sistemas de diseño" se trata de cómo abordar su proceso de diseño de manera más sistemática y garantizar que su sistema de diseño ayude a lograr el propósito de su producto y se ajuste a la cultura de su equipo.

- Alla Kholmatova. "Sistemas de diseño".

# 1 de 3 de la serie Ilustración basada en componentes que usa Sketch:
Resumen | Parte 1 | Parte 2 | Parte 3

1. Definir el tema de la ilustración.

Esta es la etapa inicial antes de decidir qué tipo de ilustración queremos hacer. El tema de la ilustración debe estar relacionado con el negocio de una aplicación / sitio web. En este caso, queremos crear un par de ilustraciones para la aplicación / sitio web de servicios de transporte. Por lo tanto, tenemos que definir temas relacionados con los servicios de transporte de pasajeros, así como objetos relacionados (vehículos, automóviles, motocicletas, pasajeros, pasajeros, calles, edificios, etc.)

2. Principios de diseño de ilustración

¿Cómo nos aseguramos de que el propósito del producto se manifieste a través del diseño? Al establecer unos pocos valores y principios básicos. Para hacer un sistema de diseño para ilustración, los principios de diseño son muy importantes como base del diseño. Exprese nuestro enfoque de diseño en tres a cinco oraciones. Aquí están mis principios de diseño de ilustración:

  1. Sencillo
  2. Impresionante
  3. Vistoso
  4. Alegre
  5. Coleccionable

3. Esquemas de colores básicos

Tenemos 2 tipos de colores, color brillante (azul y verde) y color cálido (amarillo y rojo).

Esquemas de color básicos

En la ilustración, uso colores más brillantes para preservar y mostrar la identidad de la marca. Es por eso que el 80% de las ilustraciones tienen un color azul y verde más dominante que cualquier otro color.

4. Componentes reutilizables

Cree un conjunto de componentes y plantillas en una sola guía de estilo, que estos componentes y plantillas se pueden reutilizar sin tener que hacerlo desde cero.

Componentes reutilizables

Esto puede ayudarnos a mantener la consistencia del diseño y mejorar el proceso de diseño. Y también tenemos estándares y bases para nuestro diseño de ilustración.

Uso de componentes 1Uso de componentes 2Uso de componentes 3

Podemos cambiar el color de los componentes que se refieren a los esquemas de color existentes. Estos componentes se seguirán actualizando según las necesidades y se actualizarán periódicamente.

5. Características de estilo y diseño

El estilo y las características son 2 cosas que deben ser propiedad del diseño.

¿Sabes qué personaje animado se muestra arriba? Creo que todos saben quién es él. El personaje de arriba tiene un estilo y características. Lo mismo con nuestras ilustraciones, tenemos que entender el estilo y las características de nuestro diseño. Los objetivos son mantener la consistencia del diseño y crear estándares de diseño. Y también haga que todos sepan y recuerden el estilo y las características de nuestras ilustraciones.

Características y estilos de ilustración 1Características y estilos de ilustración 2Características y estilos de ilustración 3Características y estilos de ilustración 4

Estas son algunas de mis características y estilos de ilustración:

  1. Humano. Los estilos de personajes son humanos con cabeza grande, manos pequeñas y sin detalles, y también pies pequeños.
  2. Estilo de cara kawaii. Kawaii es la cultura de la ternura en Japón. Puede referirse a artículos, humanos y no humanos que son encantadores, vulnerables, tímidos e infantiles.
  3. Degradado de color. Mezclando el color de esquemas básicos a otro color.
  4. 2 dimensiones Todos los elementos de la ilustración parecen bidimensionales.
  5. Colorido con 2 componentes de color, color brillante (azul y verde) y color cálido (amarillo y rojo).
  6. Estilo redondeado Casi todos los elementos de la ilustración están redondeados para que parezca más moderno.

Las características y el estilo anteriores serán el punto de referencia de todos los diseñadores para crear las ilustraciones. Entonces tenemos las mismas y consistentes ilustraciones.

Siguiente →

  • Ilustración basada en componentes usando Sketch, Parte 2: Concepto y proceso de diseño
  • Ilustración basada en componentes usando Sketch, Parte 3: Actualizar y mantener la biblioteca de componentes