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.
Estas pautas ayudan a los diseñadores a crear ilustraciones claras y atractivas que son representaciones de los productos y soluciones que ofrece Cloudflare y se alinean con la misión y los valores de la marca. Al seguirlas, los diseñadores se aseguran de que su trabajo amplíe la comprensión de los usuarios y represente la marca con precisión.
Estilo
Simple, claro, minimalista
Reduce los detalles que no agregan significado a tus ilustraciones para que resalten más los detalles importantes.
Coherencia
Debemos hacer todo lo posible por mantener la coherencia en nuestra representación de conceptos en todas las ilustraciones e iconografía.
Detalles escalables
La ilustración con menos detalles permite que nuestras ilustraciones sea legibles con tamaños de archivo más pequeños.
Media
Grande
Extragrande
Color
Para alinearlo con el color principal de las ilustraciones de la marca, utiliza la paleta naranja. Estos colores adicionales se pueden utilizar para crear imágenes ricas y dinámicas.
Naranja claro
Hex #FFE9CB
RGB 255, 233, 203
CMYK 0, 9, 20, 0
Magenta
Hex #911475
RGB 145, 20, 117
CMYK 0, 86, 19, 43
Amarillo claro
Hex #FFD43C
RGB 255, 212, 60
CMYK 0, 17, 76, 0
Púrpura claro
Hex #F2D6F4
RGB 242, 214, 244
CMYK 1, 12, 0, 4
Azul extraclaro
Hex #E0ECFF
RGB 224, 236, 255
CMYK 12, 7, 0, 0
Púrpura
Hex #941FBA
RGB 148, 31, 186
CMYK 20, 83, 0, 27
Azul claro
Hex #A8CBFF
RGB 168, 203, 255
CMYK 34, 20, 0, 0
Púrpura oscuro
Hex #4D1470
RGB 77, 20, 112
CMYK 31, 82, 0, 56
Éxito (claro)
Hex #BCECCB
RGB 188, 236, 203
CMYK 20, 0, 14, 7
Peligro (claro)
Hex #FCA39C
RGB 252, 163, 156
CMYK 0, 35, 38, 1
Éxito
Hex #57CF7D
RGB 87, 207, 125
CMYK 58, 0, 40, 19
Peligro
Hex #FC3D2E
RGB 252, 61, 46
CMYK 0, 75, 82, 1
Éxito (oscuro)
Hex #12523D
RGB 18, 82, 61
CMYK 78, 0 26, 68
Peligro (oscuro)
Hex #B0291C
RGB 176, 41, 28
CMYK 0, 77, 84, 31
Gris claro
Hex #747474
RGB 116, 116, 116
CMYK 0, 0, 0, 55
Gris oscuro
Hex #DFDFDF
RGB 223, 223, 223
CMYK 0, 0, 0, 13
Claridad
Elige imágenes sencillas y despejadas Haz que las imágenes sean sencillas y ordenadas, centrándote en los elementos esenciales que transmiten el mensaje.
Utiliza espacios en blanco Utiliza espacios en blanco para brindar un respiro visual y resaltar los componentes más importantes de la ilustración.
No compliques demasiado los elementos visuales No compliques demasiado los elementos visuales con elementos innecesarios que puedan confundir o distraer a los usuarios.
No sacrifiques la claridad No permitas que el estilo artístico enturbie el mensaje de la ilustración.
Coherencia
Mantén un estilo visual coherente Mantén un estilo visual coherente en todas las ilustraciones para establecer una identidad de marca cohesiva.
Respeta los colores de la marca Utiliza los colores de la marca, la tipografía y la iconografía de Cloudflare para mantener un aspecto unificado.
Mantén las ilustraciones reconocibles y distintivas Asegúrate de que estas sean reconocibles como conceptos de Cloudflare, incluso cuando se usan en varios productos.
No te desvíes del estilo visual No te desvíes del lenguaje visual establecido, ya que puede generar confusión y disminuir el reconocimiento de la marca.
No utilices estilos y colores no relacionados No introduzcas estilos o combinaciones de colores no relacionados. Todas nuestras ilustraciones deben parecer que pertenecen a la misma familia.
Accesibilidad
Considera la escala Es posible que los usuarios con problemas de visión necesiten ampliar las imágenes para verlas correctamente.
Considera el contraste 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 descripciones alternativas Ofrece descripciones de texto alternativas para las ilustraciones no decorativas para que sean comprensibles para los lectores de pantalla.
Transparencia y honestidad
Representa los productos y las funciones de forma honesta Representa claramente las funciones y funcionalidades de los productos de Cloudflare sin exageraciones ni imágenes engañosas.
Muestra los beneficios reales Utiliza ilustraciones para mostrar los beneficios reales del producto y los resultados para los usuarios.
Creatividad
Utiliza la curiosidad y la imaginación Fomenta la creatividad y la imaginación en el proceso de diseño para que las ilustraciones sean atractivas y memorables.
Utiliza metáforas y analogías Utiliza metáforas y analogías que tengan impacto en los usuarios y que transmitan conceptos complejos de una manera identificable.
No seas demasiado literal No seas demasiado literal en la representación de conceptos abstractos, limitando el atractivo visual. La mayoría de nuestros productos implican el uso de servidores de alguna manera, pero si cada ilustración es de un servidor, será imposible que el público distinga nuestras ofertas. Concéntrate en lo que es único en cada producto.
No utilices imágenes cliché y aburridas Ni imágenes que han sido demasiado utilizadas y carecen de originalidad. Hay muchas cosas que hacen que Cloudflare sea único. Enfócate en la diferenciación.
Representación
Utiliza ilustraciones diversas e inclusivas Asegúrate de que las ilustraciones reflejen comunidades diversas y entornos inclusivos.
Muestra diversos orígenes, culturas, etc. Representa a personas de diversos orígenes, culturas y demografías para crear una sensación de universalidad.
No crees entornos homogéneos No presentes a lo usuarios 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 No utilices estereotipos o caricaturas que perpetúen sesgos culturales o conceptos erróneos.
¿Necesitas recursos?
Descarga recursos creativos, incluidos logotipos, fotografías, fondos, banners, videos e ilustraciones.