Elementos de diseño

Descripción general

El "destello" que se encuentra en la logomarca de nube "Cloud" es el elemento principal del sistema de diseño. El uso del destello refuerza la marca de una manera destacada y contundente. Su forma tiene una dinámica sofisticada y equilibrada que transmite nuestra confianza y simplicidad al mundo empresarial.

Arcos del destello
Elementos de diseño - Arcos del destello - Arcos del destello positivos - Imagen

Arcos de destello positivos
El destello se puede dividir visualmente en cuatro arcos. Estos arcos son los elementos fundamentales del sistema visual.

Se recortan en el diseño y se superponen para crear intersecciones entre arcos.
En el diseño, nunca mostramos un destello completo. Se pueden visibilizar solo dos arcos en un solo destello.

Elementos de diseño - Arcos del destello - Arcos del destello negativos - Imagen

Arcos de destello negativos
El destello se puede ver como forma negativa y positiva. Ambas perspectivas tienen sus ventajas.

Por ejemplo, las formas negativas se pueden utilizar como contenedores para dar a la tipografía un lugar donde sea legible. O bien, encima de una foto.

Único
Elementos de diseño - Simple - Destello simple - Imagen

Destello único
Esta es la versión más básica del sistema de diseño. Se muestra aquí en el degradado del color de la marca. También se puede ejecutar en colores planos.

Elementos de diseño - Sencillo - Posicionamiento de los destellos - Imagen

Posicionamiento del destello
El posicionamiento de un solo arco del destello es muy flexible. El arco puede estar en cualquier esquina de cualquier formato rectangular.

Múltiple
Elementos de diseño - Múltiple - Doble destello - Imagen

Doble destello
La dimensión se agrega al superponer dos o más destellos. Esto expresa aún más la amplia gama de capacidades y ofertas de Cloudflare.

Elementos de diseño - Múltiple - Triple destello - Imagen

Triple destello
Las intersecciones representan nuestro enfoque multifacético para resolver la complejidad en un ecosistema global diverso (de una manera armoniosa).

Biblioteca
Descripción general

Esta biblioteca contiene imágenes de destellos listas para usar que se pueden usar de muchas maneras en una amplia gama de activos. No todas las situaciones son iguales, por lo que la disposición y el corte de los patrones pueden ser diferentes según el activo y nos permite mantener la marca fresca. El resultado es elegante, audaz y despierta la curiosidad.

Elementos de diseño - Biblioteca - Multi-destello 01 - Imagen

Multidestello 01

Elementos de diseño - Biblioteca - Multi-destello 03 - Imagen

Multidestello 03

Elementos de diseño - Biblioteca - Multi-destello 05 - Imagen

Multidestello 05

Elementos de diseño - Biblioteca - Multi-destello 02 - Imagen

Multidestello 02

Elementos de diseño - Biblioteca - Multi-destello 04 - Imagen

Multidestello 04

Elementos de diseño - Biblioteca - Multi-destello 06 - Imagen

Multidestello 06

Recorte
Descripción general

Las imágenes con destellos múltiples ofrecen flexibilidad y variedad para crear composiciones dinámicas en todas las formas y tamaños. Se pueden utilizar enteras, con sangrado completo, recortadas (ver ejemplos), giradas a 180°. Sustituye la imagen de marca por un degradado de marca para:

  • Situaciones que dan lugar a recortes inutilizables.

  • Formatos de espacio pequeño donde el detalle de la imagen se vuelve ilegible.

  • Diseños que requieren un toque de marca mínimo o que distraiga menos (piensa en un borde degradado delgado que se extiende a lo largo del borde de un marco).

Elementos de diseño - Recorte - Rectángulo - Imagen
Elementos de diseño - Recorte - Rectángulo - Derecha - Imagen

Rectángulo
Las imágenes con múltiples destellos ofrecen flexibilidad y variedad para crear composiciones dinámicas en todas las formas y tamaños. Se pueden utilizar enteras, rotadas, con sangrado completo, recortadas, como se muestra en estos ejemplos.

Elementos de diseño - Recorte - Cuadrado - Dos columnas - Izquierda - Imagen
Elementos de diseño - Recorte - Cuadrado - Dos columnas - Derecha - Imagen

Cuadrado
No recortar demasiado la imagen. Un recorte demasiado ajustado puede hacer que se pierda la definición en los detalles, como el aplanamiento de la gama tonal naranja y el reconocimiento de la forma de los arcos de los destellos, así como la limitación de un flujo dinámico.

Elementos de diseño - Recorte - Vertical - Izquierda - Imagen
Elementos de diseño - Recorte - Vertical - Derecha - Imagen

Vertical
Asegúrate de que la imagen recortada contenga al menos una intersección de destellos superpuestos. Para evitar el recorte excesivo, utiliza un mínimo del 20 % de la imagen en cualquier dirección de los ejes x e y.

Actualizaciones de diseñadores
Elementos de diseño - Actualizaciones de diseño - Degradado y trazo - Imagen

Degradado y trazo
El trazo de la línea amarillo limón acentúa los destellos y agrega enfoque y definición. En función del diseño, no excedas los dos trazos de línea amarillo limón.En la mayoría de los casos, un trazo de línea será suficiente.

Elementos de diseño - Actualizaciones de diseño - Plano y trazo - Imagen

Plano y trazo
Se utiliza un trazo de destello y un destello blanco sobre un fondo degradado de múltiples destellos.

Elementos de diseño - Actualizaciones de diseñadores - Degradado, trazo y negativo - Imagen

Degradado, trazo y negativo
Con las adiciones de blanco, las composiciones se vuelven audaces, dinámicas y llamativas. También ayuda a equilibrar el color naranja.

Elementos de diseño - Actualizaciones de diseñadores - Plana, trazo y negativo - Imagen

Plano, trazo y negativo
Se utiliza un trazo de destello y un destello blanco sobre un fondo degradado de múltiples destellos.

Aplicaciones
Ejemplos de degradados

Podemos ser más audaces en formatos más grandes, como carteleras publicitarias y portadas de presentaciones. Los tamaños más grandes nos brindan una plataforma para mostrar cuán dinámicos, expresivos y dimensionales podemos ser. Creamos un espacio en blanco amplio que permite que se destaque el arte de los destellos en degrade de colores.

Elementos de diseño - Aplicaciones - Izquierda - Imagen
Elementos de diseño - Aplicaciones - Derecha - Imagen
Elementos de diseño - Aplicaciones - Tres columnas - Izquierda - Imagen
Pautas de la marca - Elementos de diseño - Aplicaciones - Tres columnas - Centro - Imagen
Elementos de diseño - Aplicaciones - Tres columnas - Derecha - Imagen
Elementos de diseño - Aplicaciones - Dos columnas abajo - Izquierda - Imagen
Elementos de diseño - Aplicaciones - Dos columnas abajo - Derecha - Imagen
Ejemplos planos

Solo utilizamos color sólido (2D) en formatos más pequeños, como los banners digitales. Este enfoque mantiene la simplicidad y la claridad con una mayor variedad de contenido.

Elementos de diseño - Ejemplos planos - Izquierda - Imagen
Elementos de diseño - Ejemplos planos - Derecha - Imagen

¿Necesitas recursos?

Descarga recursos creativos, incluidos logotipos, fotografías, fondos, banners, videos e ilustraciones.