Ilustración

Descripción general

Las ilustraciones transmiten significado a simple vista, simplifican ideas complejas y mejoran la comprensión del usuario a través de la narración visual. Reducen la brecha entre los conceptos técnicos y la comprensión del usuario, haciendo que las ideas abstractas sean más tangibles y atractivas.

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

Principios fundamentales

Ilustración de la marca - Simple y claro
Simple y claro

Concéntrate en lo esencial. Reduce los detalles innecesarios para que se destaquen los elementos importantes. Usa líneas limpias, formas simples y una paleta de colores mínima para que las imágenes sean fáciles de interpretar.

Ilustración de marca - Muestra, no digas
Muestra, no cuentes

Utiliza metáforas y analogías para representar ideas complejas. La ilustración debe ayudar al público a comprender un concepto rápidamente, sin necesidad de mucho texto.

Ilustración de marca - La consistencia es clave
La consistencia es clave

Sigue estrictamente la paleta de colores, la tipografía y el grosor de las líneas de la marca de Cloudflare, y reutiliza imágenes icónicas de la biblioteca existente. Esto garantiza que todas las ilustraciones se perciban como una parte cohesiva del lenguaje visual de nuestra marca.

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

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

Ilustración de marca - Sé accesible
Sé accesible

Diseña teniendo en cuenta la accesibilidad. Garantiza líneas, formas y colores distintivos mediante el uso de patrones y etiquetas para diferenciar los elementos, especialmente si tienen propósitos diferentes. Ofrece contraste entre colores y descripciones de texto alternativas para todas las ilustraciones no decorativas, para que las comprendan las personas que usan lectores de pantalla.

Ilustración de la marca - Integra la esencia de la marca
Integra la personalidad de la marca

Utilizamos la ilustración para expresar el carácter único de nuestra marca. Las ilustraciones no solo deben ser claras, sino también reconocibles al instante como nuestras. Adopta nuestro lenguaje visual específico e impregna cada pieza con nuestra paleta de colores única, ingenio y rasgos distintivos.

Estilo y composición

Ilustración de marca - Rasgos de personalidad
Personas y personalidad

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

Descarga las pautas para ilustrar personas
Ilustración de marca - 2d isométrica
2-D e isométricas

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

No

No compliques demasiado

No compliques demasiado los elementos visuales con detalles innecesarios que puedan confundir o distraer a los usuarios.

No introducir

No introduzcas estilos o combinaciones de colores no relacionados, ya que pueden generar confusión y reducir el reconocimiento y la confianza de la marca.

No uses una miniatura ajustada

No utilices imágenes cliché ni imágenes que carezcan de originalidad. Hay muchas cosas que hacen que Cloudflare sea único. Enfócate en la diferenciación.

No presentes miniaturas

No presentes a los usuarios o entornos de forma homogénea. Haz todo lo posible por representar una variedad de usuarios siempre que puedas. No perpetúes estereotipos, sesgos o conceptos erróneos que generen sesgos culturales.

Paleta de colores

La paleta de colores de nuestro estilo de ilustración se basa en la identidad de la marca Cloudflare. Se destacan principalmente los tonos mandarina, mango, rubí, junto con frambuesa y cereza para crear una sensación de calidez y optimismo. Estos se complementan con un conjunto de colores más fríos, como arándano, morado, gris claro y azul claro, que brindan equilibrio y contraste. El blanco se utiliza como una base neutra, lo que brinda a las ilustraciones un aspecto pulcro y moderno. El resultado general transmite profesionalismo, confianza y una energía sutil.

En las ilustraciones de nuestra marca, los colores rojo y verde se utilizan con un propósito. El rojo representa un riesgo evidente o una amenaza, lo que indica de forma eficaz ciberataques, vulneraciones de seguridad acciones fallidas. Por el contrario, el verde transmite seguridad, éxito y protección, e ilustra conexiones seguras, defensas eficaces o una acción completada. El uso uniforme 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.

Primario

Color - Mandarina

Mandarina

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

Color - Rubí

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

Secundario

Color - Limón

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 - Arándano

Arándano

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

Color: Mora

Arándano

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

Terciario

Color - Naranja claro

Naranja claro

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

Color - Azul extraclaro

Azul extraclaro

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 - Púrpura claro

Morado claro

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

Color - Púrpura

Púrpura

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

Color - Púrpura 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