일러스트레이션
개요
일러스트레이션은 시각적 스토리텔링을 통해 복잡한 아이디어를 단순화하고 사용자의 이해를 높여 의미를 한눈에 전달합니다. 일러스트레이션은 기술 개념과 사용자 이해 사이의 간극을 메워 추상적 아이디어를 더 실감나게 하고 매력적으로 만들 수 있습니다.
Cloudflare의 제품 및 서비스에서 일러스트레이션은 주의를 끌고 호기심을 유발하며 사용자를 효과적으로 안내합니다. 일러스트레이션은 무형의 개념을 관련 있는 시각 자료로 변환하여 명확성과 접근성을 개선합니다.
핵심 원칙
단순 명확
핵심에 집중하세요. 불필요한 세부 사항을 줄여 의미 있는 요소가 돋보이도록 해야 합니다. 깨끗한 선, 단순한 모양, 최소한의 색상표를 사용하여 시각적 개체를 쉽게 해석할 수 있도록 하세요.
말하지 말고 보여주기
은유와 비유를 사용하여 복잡한 아이디어를 표현합니다. 일러스트레이션은 보는 사람이 많은 텍스트 없이도 개념을 빠르게 이해할 수 있도록 도와야 합니다.
일관성이 핵심
Cloudflare 브랜드의 색상표, 타이포그래피, 선 굵기를 엄격하게 따르고, 기존 라이브러리의 상징적인 이미지를 재사용해야 합니다. 따라서 모든 일러스트레이션이 Cloudflare 브랜드의 시각적 언어의 응집력 있는 부분처럼 느껴지도록 합니다.
확장 가능성
일러스트레이션은 작은 크기에서도 큰 크기만큼이나 가독성 높고 효과적이어야 합니다.
접근성 보장
접근성을 염두에 둔 디자인. 서로 다른 목적을 가진 요소를 명확히 구분할 수 있도록 패턴과 라벨을 활용해 선, 형태, 색상을 분명하게 구분하세요. 색상 간 충분한 대비를 제공하고, 장식 목적이 아닌 모든 일러스트레이션에는 대체 텍스트 설명을 포함하여 화면 낭독기를 사용하는 사용자도 내용을 이해할 수 있도록 해야 합니다.
브랜드 개성 부여
우리는 일러스트레이션을 사용하여 브랜드의 고유한 특성을 표현합니다. 일러스트레이션은 명확할 뿐만 아니라 즉시 알아볼 수 있어야 합니다. Cloudflare의 특정한 시각적 언어를 수용하고 Cloudflare 고유의 색상, 위트, 뚜렷한 특징을 모든 일러스트레이션에 주입하세요.
스타일 및 구성
사람과 개성
다양성은 Cloudflare에서 사람들을 묘사하는 방식에서 필수적입니다. 다양한 생김새, 피부색, 헤어 스타일, 의복을 사용하여 일러스트레이션에 개성을 더하고 동료 직원과 고객의 다양성을 표현해야 합니다.
2D 및 등각투영
스타일은 주로 2차원이지만, 일부 일러스트레이션은 미묘한 그래디언트와 음영을 사용하여 깊이와 차원감을 만듭니다. 이를 통해 지나치게 단순해 보이는 것을 방지할 수 있습니다. 등각투영 일러스트레이션이 의미를 더 잘 전달하는 경우도 있습니다.
피해야 할 사항
사용자를 혼란스럽게 하거나 주의를 분산시킬 수 있는 불필요한 요소로 시각적 요소를 너무 복잡하게 만들지 마세요.
관련 없는 스타일이나 색 구성표를 도입하지 마세요. 혼란이 초래되고 브랜드 인지도와 신뢰가 저하될 수 있습니다.
독창성이 부족하고 진부하거나 과도하게 사용된 이미지를 사용하지 마세요. Cloudflare를 독특하게 만드는 요소는 아주 많습니다. 차별화에 집중하세요.
사용자나 환경을 동질적인 방식으로 나타내지 마세요. 가능한 한 다양한 사용자를 대표하려고 노력해야 합니다. 문화적 편견을 야기하는 고정 관념, 편견, 오해를 영속화하지 마세요.
색상표
Cloudflare 일러스트레이션 스타일의 색상표는 Cloudflare 브랜드에 기반을 두고 있습니다. 탠저린, 망고, 루비와 라즈베리, 체리가 주로 들어가 따뜻한 느낌과 낙관적인 느낌을 줍니다. 이는 균형과 대비를 드러내는 블랙베리, 퍼플, 라이트 그레이, 라이트 블루 등의 차가운 계열 색상으로 보완됩니다. 화이트를 기본적인 뉴트럴로 사용하여 일러스트레이션에 깨끗하고 현대적인 느낌을 더했습니다. 전체적인 효과는 전문적이고 신뢰할 수 있으며 미묘하게 활력이 넘칩니다.
Cloudflare의 브랜드 일러스트레이션에서는 레드 와 그린 이 목적에 맞게 사용됩니다. 레드는 명확한 위험이나 위협을 나타내며, 사이버 공격, 보안 침해 또는 실패한 조치를 효과적으로 알립니다. 반대로 그린은 안전한 연결, 효과적인 방어 또는 완료된 조치를 보여 안전, 성공, 보호를 전달합니다. 모든 시각 자료에서 이러한 색상을 일관되게 사용하면 고객에게 통합되고 직관적인 경험을 제공하여 보안 상태를 빠르게 이해할 수 있도록 돕습니다.
기본
탠저린
Hex #F6821F
RGB 246, 130, 31
CMYK 0, 60, 100, 0
PMS 1495 C
루비
Hex #FF6633
RGB 255, 102, 51
CMYK 0, 80, 93, 0
PMS 1645 C
망고
Hex #FBAD41
RGB 251, 173, 64
CMYK 0, 37, 84, 0
PMS 1365 C
보조
레몬
Hex #FFD43C
RGB 255, 212, 60
CMYK 0, 17, 76, 0
라즈베리
Hex #CE2F55
RGB 206, 47, 85
CMYK 0, 77, 59, 19
체리
Hex #960C3E
RGB 150, 12, 62
CMYK 0, 92, 59, 41
블루베리
Hex #3E74FF
RGB 62, 116, 255
CMYK 76, 55, 0, 0
블랙베리
Hex #0F006B
RGB 15, 0, 107
CMYK 86, 100, 0, 58
블랙(텍스트)
Hex #000000
RGB 0, 0, 0
CMYK 0, 0, 0, 100
3차 색상
라이트 오렌지
Hex #FFE9CB
RGB 255, 233, 203
CMYK 0, 9, 20, 0
엑스트라 라이트 블루
Hex #E0ECFF
RGB 224, 236, 255
CMYK 12, 7, 0, 0
라이트 블루
Hex #A8CBFF
RGB 168, 203, 255
CMYK 34, 20, 0, 0
라이트 퍼플
Hex #F2D6F4
RGB 242, 214, 244
CMYK 1, 12, 0, 4
퍼플
Hex #941FBA
RGB 148, 31, 186
CMYK 20, 83, 0, 27
다크 퍼플
Hex #4D1470
RGB 77, 20, 112
CMYK 31, 82, 0, 56
성공(밝음)
Hex #BCECCB
RGB 188, 236, 203
CMYK 20, 0, 14, 7
성공
Hex #57CF7D
RGB 87, 207, 125
CMYK 58, 0, 40, 19
성공(어두움)
Hex #12523D
RGB 18, 82, 61
CMYK 78, 0 26, 68
위험(밝음)
Hex #FCA39C
RGB 252, 163, 156
CMYK 0, 35, 38, 1
위험
Hex #FC3D2E
RGB 252, 61, 46
CMYK 0, 75, 82, 1
위험(어두움)
Hex #B0291C
RGB 176, 41, 28
CMYK 0, 77, 84, 31
라이트 그레이
Hex #747474
RGB 116, 116, 116
CMYK 0, 0, 0, 55
다크 그레이
Hex #DFDFDF
RGB 223, 223, 223
CMYK 0, 0, 0, 13