디자인 요소

개요

'Cloud' 로고 마크에서 볼 수 있는 'Flare'는 디자인 시스템의 핵심 요소입니다. 플레어를 사용하면 브랜드가 크고 대담하게 강화됩니다. 그 형태는 우아하고 성숙한 흐름으로 우리의 자신감과 단순함을 기업 세계에 전달합니다.

플레어 호
디자인 요소 - 플레어 호 - 포지티브 플레어 호 - 이미지

포지티브 플레어 호
플레어는 시각적으로 4개의 호로 나눌 수 있습니다. 이들 호는 시각 시스템의 기본 요소입니다.

레이아웃으로 크로핑하고 겹쳐서 호 사이의 교차점을 만듭니다.
레이아웃 내에서는 완전한 플레어가 절대 보이지 않습니다. 단일 플레어에서 볼 수 있는 호는 두 개로 제한됩니다.

디자인 요소 - 플레어 호 - 네거티브 플레어 호 - 이미지

네거티브 플레어 호
플레어는 네거티브 모양과 포지티브 모양으로 볼 수 있습니다. 두 관점 모두 장점이 있습니다.

예를 들어, 네거티브 모양은 글자체를 읽을 수 있는 공간으로 만드는 부분으로 사용할 수 있습니다. 또는 사진 위에 배치할 수도 있습니다.

단일
디자인 요소 - 단일 - 단일 플레어 - 이미지

단일 플레어
디자인 시스템의 가장 기본적인 버전입니다. 브랜드 색상 그래디언트에 표시되어 있습니다. 단일 플레어는 단색으로도 실행할 수 있습니다.

디자인 요소 - 단일 - 플레어 포지셔닝 - 이미지

플레어 위치 지정
단일 플레어 호의 위치는 매우 융통성이 있습니다. 호는 모든 직사각형 형식의 모든 모서리에 위치할 수 있습니다.

다중
디자인 요소 - 다중 - 이중 플레어 - 이미지

이중 플레어
두 개 이상의 플레어를 겹쳐서 차원이 추가됩니다. 이는 Cloudflare의 기능과 제품의 광범위한 범위를 더 잘 표현해 줍니다.

디자인 요소 - 다중 - 삼중 플레어 - 이미지

삼중 플레어
교차 부분은 다양한 글로벌 생태계의 복잡성을(조화로운 방식으로) 해결하려는 Cloudflare의 다각적인 접근 방식을 나타냅니다.

라이브러리
개요

이 라이브러리는 다양한 자산에서 다양한 방식으로 사용할 수 있는 기성 플레어 이미지로 구성되어 있습니다. 모든 상황이 동일하지는 않으므로 자산에 따라 패턴의 배열과 자르기가 다를 수 있으며 이를 통해 브랜드를 참신하게 유지할 수 있습니다. 그에 따라 우아하고 대담하며 호기심을 불러일으키게 됩니다.

디자인 요소 - 라이브러리 - 다중 플레어 01 - 이미지

다중 플레어 01

디자인 요소 - 라이브러리 - 다중 플레어 03 - 이미지

다중 플레어 03

디자인 요소 - 라이브러리 - 다중 플레어 05 - 이미지

다중 플레어 05

디자인 요소 - 라이브러리 - 다중 플레어 02 - 이미지

다중 플레어 02

디자인 요소 - 라이브러리 - 다중 플레어 04 - 이미지

다중 플레어 04

디자인 요소 - 라이브러리 - 다중 플레어 06 - 이미지

다중 플레어 06

크로핑
개요

다중 플레어 이미지 덕분에 모든 모양과 크기의 동적 구성을 만들 때 유연성과 다양성이 제공됩니다. 전체, 풀 블리드, 크롭(예시 참조), 180° 회전 등의 형태로 사용할 수 있습니다. 브랜드 이미지를 다음에 대한 브랜드 그래디언트로 대체:

  • 사용할 수 없는 크로핑을 초래하는 시나리오

  • 이미지의 세부 사항을 읽을 수 없게 되는 작은 공간 형식

  • 최소한의/덜 산만한 브랜딩 터치가 필요한 디자인(프레임 가장자리를 따라 이어지는 가느다란 그래디언트 테두리를 생각해 보세요)

디자인 요소 - 크로핑 - 직사각형 - 이미지
디자인 요소 - 크로핑 - 직사각형 - 오른쪽 - 이미지

직사각형
다중 플레어 이미지를 사용하면 모든 모양과 크기에서 역동적인 구성을 유연하고 다양하게 만들 수 있습니다. 이 예시에서와 같이 전체, 회전, 풀 블리드, 크로핑을 사용할 수 있습니다.

디자인 요소 - 크로핑 - 정사각형 - 열 2개 - 왼쪽 - 이미지
디자인 요소 - 크로핑 - 정사각형 - 열 2개 - 오른쪽 - 이미지

정사각형
이미지를 너무 많이 크로핑하지 마세요. 너무 빡빡하게 크로핑하면 오렌지 톤 범위가 단조로워지고 플레어 호 모양이 인식되지 않으며 역동적인 흐름이 제한되는 등 세부 묘사의 선명도가 흐릿해질 수 있습니다.

디자인 요소 - 크로핑 - 수직 - 왼쪽 - 이미지
디자인 요소 - 크로핑 - 수직 - 오른쪽 - 이미지

수직
크로핑한 이미지에 겹치는 플레어의 교차점이 하나 이상 포함되어 있는지 확인하세요. 과다 크로핑을 방지하려면 이미지의 최소 20%를 x축과 y축 어느 방향으로든 사용하세요.

디자이너 업그레이드
디자인 요소 - 디자이너 업그레이드 - 그래디언트 및 스트로크 - 이미지

그래디언트 및 스트로크
레몬 색 스트로크로 플레어를 강조하고 초점과 선명도를 더합니다. 디자인에 따라 다르지만, 두 줄의 레몬 선 스트로크를 넘지 않도록 할 수 있습니다. 대부분의 경우 하나의 선 스트로크로 충분합니다.

디자인 요소 - 디자이너 업그레이드 - 플랫 및 스트로크 - 이미지

플랫 및 스트로크
그래디언트 다중 플레어 배경에서 플레어 스트로크와 화이트 플레어를 사용했습니다.

디자인 요소 - 디자이너 업그레이드 - 그래디언트, 스트로크, 네거티브 - 이미지

그래디언트, 스트로크, 네거티브
화이트를 추가하여 구도가 대담하고 역동적이며 눈길을 사로잡습니다. 오렌지와 균형을 잡는 데도 도움이 됩니다.

디자인 요소 - 디자이너 업그레이드 - 플랫, 스트로크, 네거티브 - 이미지

플랫, 스트로크, 네거티브
그래디언트 다중 플레어 배경으로 플레어 스트로크와 화이트 플레어를 사용했습니다.

응용
그래디언트 예시

Cloudflare에서는 광고판, 프레젠테이션 커버 등 대형 포맷은 더 크고 더 대담하게 제작합니다. 더 큰 크기에서는 Cloudflare가 얼마나 역동적이고 풍부한 표현력을 발휘할 수 있는지 보여줄 수 있습니다. 컬러 그래디언트 플레어 아트가 돋보이도록 넉넉한 여백을 주었습니다.

디자인 요소 - 응용 - 왼쪽 - 이미지
디자인 요소 - 응용 - 오른쪽 - 이미지
디자인 요소 - 응용 - 열 3개 - 왼쪽 - 이미지
브랜드 가이드라인 - 디자인 요소 - 응용 - 열 3개 - 중간 - 이미지
디자인 요소 - 응용 - 열 2개 - 오른쪽 - 이미지
디자인 요소 - 응용 - 아래 열 2개 - 왼쪽 - 이미지
디자인 요소 - 응용 - 아래 열 2개 - 오른쪽 - 이미지
플랫 예시

단색(2D)은 디지털 배너와 같은 작은 포맷에만 사용합니다. 이러한 접근 방식 덕분에 콘텐츠의 범위가 넓어져도 단순함과 명확성이 유지됩니다.

디자인 요소 - 플랫 예시 - 왼쪽 - 이미지
디자인 요소 - 플랫 예시 - 오른쪽 - 이미지

리소스가 필요하신가요?

로고, 사진, 배경, 배너, 동영상, 일러스트레이션 등의 크리에이티브 자산을 다운로드하세요.