Ilustración

Información general

Las ilustraciones transmiten un significado a simple vista, simplifican ideas complejas y mejoran la comprensión del usuario a través de la narrativa visual. Sirven de puente entre los conceptos técnicos y la comprensión del usuario, y mejoran la accesibilidad y el atractivo de las ideas abstractas.

En los productos y servicios de Cloudflare, las ilustraciones captan la atención, despiertan la curiosidad y guían a los usuarios de forma eficaz. Transforman conceptos intangibles en imágenes identificables, mejorando su comprensión y accesibilidad.

Principios básicos

Ilustración de marca - Imágenes sencillas y claras
Imágenes sencillas y claras

Céntrate en lo esencial. Reduce los detalles innecesarios para que destaquen los elementos significativos. Utiliza líneas limpias, formas sencillas y una paleta de colores mínima para que los elementos visuales sean fáciles de interpretar.

Ilustración de marca - Una imagen dice más que mil palabras
Una imagen dice más que mil palabras

Utiliza metáforas y analogías para representar ideas complejas. La ilustración debe ayudar al espectador a comprender con rapidez un concepto, sin necesidad de mucho texto.

Ilustración de marca - La coherencia es fundamental
La coherencia es fundamental

Sigue estrictamente la paleta de colores, la tipografía y los grosores de línea de la marca Cloudflare, y reutiliza imágenes icónicas de la biblioteca existente. Esto garantiza que todas las ilustraciones parezcan un componente coherente del lenguaje visual de nuestra marca.

Ilustración de marca - Garantiza la escalabilidad
Garantiza la escalabilidad

Las ilustraciones deben ser tan legibles y efectivas en tamaño pequeño como en tamaño grande.

Ilustración de marca - Accesibilidad
Accesibilidad

Diseña teniendo presente la accesibilidad. Asegúrate de utilizar líneas, formas y colores distintivos mediante patrones y etiquetas que permitan diferenciar los elementos, especialmente si tienen fines distintos. Proporciona contraste entre colores y descripciones de texto alternativas para todas las ilustraciones no decorativas a fin de que las puedan entender las personas que usen lectores de pantalla.

Ilustración de marca - Incorpora la marca
Incorpora la personalidad de la marca

Utilizamos la ilustración para expresar el carácter excepcional de nuestra marca. Las ilustraciones no solo deben ser claras. También deben reconocerse de inmediato como nuestras. Adopta nuestro lenguaje visual específico e incorpora en todas las ilustraciones nuestra unívoca paleta de colores, nuestro ingenio y nuestras peculiaridades distintivas.

Estilo y composición

Ilustración de marca - Personalidad de las personas
Personas y personalidad

La diversidad es un aspecto integral de cómo representamos a las personas en Cloudflare. Se deben utilizar distintos rasgos, tonos de piel, peinados y prendas de vestir para añadir personalidad a nuestras ilustraciones y representar la diversidad de nuestros empleados y clientes.

Descargar directrices para la representación de personas
Ilustración de marca - Imágenes bidimensionales e isométricas
Imágenes bidimensionales e isométricas

Aunque el estilo es principalmente bidimensional, algunas ilustraciones utilizan un degradado y un sombreado sutiles para crear una sensación de profundidad y dimensión. Esto evita que estas ilustraciones parezcan demasiado simplistas. En algunos casos, las ilustraciones isométricas transmiten mejor el significado.

No

No lo compliques en exceso

No compliques en exceso las imágenes con elementos innecesarios que puedan confundir o distraer a los usuarios.

No aplicar

No apliques estilos o esquemas de color no relacionados, ya que esto puede generar confusión y reducir el reconocimiento de la marca y la confianza en ella.

No utilices miniatura fijadas

No utilices imágenes estereotipadas o utilizadas en exceso que carezcan de originalidad. Cloudflare es único en muchos aspectos. Céntrate en la diferencia.

No presentar miniatura

No presentes a los usuarios o los entornos de forma homogénea. Siempre que puedas, intenta representar la diversidad de los usuarios. No perpetúes estereotipos, prejuicios o conceptos erróneos que pueden provocar prejuicios culturales.

Paleta de colores

La paleta de colores de nuestro estilo de ilustración se basa en la marca Cloudflare. Incluye predominantemente los colores mandarina, mango, rojo rubí con frambuesa y cereza, lo que genera calidez y optimismo. Estos colores se complementan con otro conjunto de colores más fríos, como el zarzamora, el morado, el gris claro y el azul claro, que proporcionan equilibrio y contraste. El blanco se utiliza como un neutro básico, lo que da a las ilustraciones un aspecto limpio y moderno. El efecto general transmite profesionalidad, confianza y un punto de dinamismo.

En las ilustraciones de nuestra marca, los colores rojo y verde se utilizan con un propósito. El rojo representa un peligro o una amenaza evidente, lo que indica eficazmente ciberataques, fugas de seguridad o una acción fallida. Por el contrario, el verde transmite seguridad, éxito y protección, y representa conexiones seguras, una protección eficaz o una acción completada correctamente. El uso coherente de estos colores en todas nuestras imágenes garantiza una experiencia unificada e intuitiva para nuestros clientes y les ayuda a comprender rápidamente el estado de su seguridad.

Principal

Color - Mandarina

Mandarina

Hex #F6821F
RGB 246, 130, 31
CMYK 0, 60, 100, 0
PMS 1495 C

Color - Rojo rubí

Rojo rubí

Hex #FF6633
RGB 255, 102, 51
CMYK 0, 80, 93, 0
PMS 1645 C

Color - Mango

Mango

Hex #FBAD41
RGB 251, 173, 64
CMYK 0, 37, 84, 0
PMS 1365 C

Secundarios

Color - Amarillo limón

Amarillo limón

Hex #FFD43C
RGB 255, 212, 60
CMYK 0, 17, 76, 0

Color - Frambuesa

Frambuesa

Hex #CE2F55
RGB 206, 47, 85
CMYK 0, 77, 59, 19

Color - Cereza

Cereza

Hex #960C3E
RGB 150, 12, 62
CMYK 0, 92, 59, 41

Color - Azul arándano

Azul arándano

Hex #3E74FF
RGB 62, 116, 255
CMYK 76, 55, 0, 0

Color- Zarzamora

Zarzamora

Hex #0F006B
RGB 15, 0, 107
CMYK 86, 100, 0, 58

Color - Negro

Negro (texto)

Hex #000000
RGB 0, 0, 0
CMYK 0, 0, 0, 100

Terciarios

Color - Naranja claro

Naranja claro

Hex #FFE9CB
RGB 255, 233, 203
CMYK 0, 9, 20, 0

Color - Azul muy claro

Azul muy claro

Hex #E0ECFF
RGB 224, 236, 255
CMYK 12, 7, 0, 0

Color - Azul claro

Azul claro

Hex #A8CBFF
RGB 168, 203, 255
CMYK 34, 20, 0, 0

Color - Morado claro

Morado claro

Hex #F2D6F4
RGB 242, 214, 244
CMYK 1, 12, 0, 4

Color - Morado

Morado

Hex #941FBA
RGB 148, 31, 186
CMYK 20, 83, 0, 27

Color - Morado oscuro

Morado oscuro

Hex #4D1470
RGB 77, 20, 112
CMYK 31, 82, 0, 56

Color - Éxito (claro)

Éxito (claro)

Hex #BCECCB
RGB 188, 236, 203
CMYK 20, 0, 14, 7

Color - Éxito

Éxito

Hex #57CF7D
RGB 87, 207, 125
CMYK 58, 0, 40, 19

Color - Éxito (oscuro)

Éxito (oscuro)

Hex #12523D
RGB 18, 82, 61
CMYK 78, 0 26, 68

Color - Peligro (claro)

Peligro (claro)

Hex #FCA39C
RGB 252, 163, 156
CMYK 0, 35, 38, 1

Color - Peligro

Peligro

Hex #FC3D2E
RGB 252, 61, 46
CMYK 0, 75, 82, 1

Color - Peligro (oscuro)

Peligro (oscuro)

Hex #B0291C
RGB 176, 41, 28
CMYK 0, 77, 84, 31

Color - Gris claro

Gris claro

Hex #747474
RGB 116, 116, 116
CMYK 0, 0, 0, 55

Color - Gris oscuro

Gris oscuro

Hex #DFDFDF
RGB 223, 223, 223
CMYK 0, 0, 0, 13