완벽한 색상 팔레트와 글꼴 조합을 선택하는 방법

웹사이트 영향력은 브랜드와 회사 문화의 시각적 표현에 관한 것입니다. 구성 외에도 색상 및 글꼴 조합은 사이트와 제품 또는 서비스에 대한 사용자의 인상에 무의식적으로 영향을 미칩니다. 웹 사이트 디자인에서 시각적 계층 구조는 특정 요소에 주의를 끌기 위해 글꼴 크기, 두께, 스타일 및 색상을 활용하여 특정 부분의 중요성을 강조합니다. 이는 궁극적으로 사용자 경험과 참여에 영향을 미칩니다. 목표는 색상과 글꼴 쌍 조합의 올바른 균형을 얻는 것입니다.

브랜드를 대표하다

당신의 브랜드는 무엇입니까? 그것은 무엇을 나타냅니까? 그 성격은 무엇입니까? 당신의 타겟 고객은 누구입니까? 어떤 유형의 사람들이 귀하의 제품이나 서비스를 구매합니까? 핵심 디자인 원칙은 이러한 질문에 답하는 데 도움이 되어야 합니다.

미니멀리스트, 맥시멀리스트, 아니면 "딱 맞아"?

회사 로고와 일부 텍스트만 포함되어 세련미가 물씬 풍기는 깔끔하고 깔끔한 느낌을 주는 매우 깔끔하고 미니멀한 인터페이스를 보는 것이 일반적입니다. Apple은 수많은 서체와 레이아웃을 실험하면서 이를 최선을 다해 수행합니다.

일반적으로 매우 단순한 색상 구성에는 회색, 흰색 및 넓은 네거티브 공간 영역이 혼합되어 있습니다. 그러나 많은 물건을 판매한다면 화면 공간을 최대화하는 것이 더 좋습니다. eBay와 Amazon.com이 좋은 예입니다. 웹사이트의 색상 팔레트는 단순하지만 지배적인 색상은 제품에서 나옵니다.

계절성

겨울에는 파란색과 흰색, 봄에는 노란색과 녹색, 여름에는 빨간색과 녹색, 가을에는 주황색, 노란색, 빨간색 색조가 패션 및 디자이너 아이템과 같은 계절 제품에는 잘 어울리지만 비계절 제품에는 적합하지 않을 수 있습니다. .

무드 보드

모든 캠페인이나 웹사이트 계획에 대한 무드 보드를 사용하면 원하는 스타일이나 컨셉을 즉시 시각화할 수 있습니다. 대화형으로 요소를 선택하고 변경하여 아이디어와 색상 및 글꼴 조합을 빠르게 테스트할 수 있습니다.

독서 사이트

신문, 글쓰기 사이트, 블로그 등과 같은 읽기 사이트에는 텍스트가 매우 많습니다. 대부분의 브라우저는 "zen-mode" 읽기 모드를 제공하므로 이 점도 고려하십시오. 2~3개의 글꼴만 선택하거나 단일 글꼴 모음을 선택하십시오. 이미지와 디자인 요소를 통합하여 긴 텍스트 섹션을 분할하세요.

완벽한 색상 팔레트 선택

색상은 아름다움과 스타일 그 이상을 전달하며 청중의 감정적인 반응도 불러일으킵니다. 색상 상징은 문화 전반에 걸쳐 보편적이라는 점을 기억하십시오. 색상은 고려해야 할 디자인 측면 중 하나일 뿐이며, 웹사이트에는 거부할 수 없는 색상 팔레트가 많이 있습니다.

웹사이트 디자인 외에도 이러한 색상 원칙은 고객이 자신만의 티셔츠를 만드는 등 제품 맞춤화에도 적용될 수 있습니다. 다양한 색상 중에서 선택할 수 있게 하면 개인화 경험이 향상되고 개인의 스타일 선호도에 맞게 조정됩니다.

색 구성표(색상 팔레트 조합)

색 구성표는 특정 스타일, 분위기 또는 시각적 메시지를 전달하는 디자인 목표를 충족하기 위해 하나 이상의 색상 팔레트에서 여러 색상을 결합합니다. 몇 가지 예는 다음과 같습니다.

• 단색 색상 구성표(단일 색상) – 색상, 색조, 색조 및 음영을 다양하게 만듭니다. 흰색, 회색, 검정색과 같은 중성색은 팔레트를 확장하여 밋밋해 보이지 않도록 밝고 어두운 색조를 제공합니다.
• 중성 색상 구성(베이지, 황갈색, 회백색 등과 같은 중성에 가까운 색상과 결합된 무채색 흰색, 회색 및 검정색). 채도가 낮은 색상은 중성적인 미학을 전달하고 클래식할 수 있으며 화려한 색상과 잘 어울립니다.
• 보색 구성표(색상환의 반대쪽) – 인기 있는 색상은 파란색과 주황색, 빨간색과 녹색, 노란색과 보라색입니다.
• 유사한 색 구성표(색상환에서 서로 인접한 세 가지 색상 그룹) – 기본 색상과 인접한 두 가지 색상이 잘 조화됩니다. 예를 들어 일출이나 일몰 테마를 전달하는 빨간색, 분홍색, 주황색 색상이 있습니다.
• 삼원색 구성표(색상환에서 서로 등거리에 위치한 세 가지 색상) – 파란색, 빨간색, 노란색이 한 세트로, 보라색, 녹색, 주황색이 다른 세트로 사용됩니다. 색상 충돌을 피하기 위해 색상을 활용하고 채도를 낮추십시오.

색상 팔레트를 생성하기 위한 여러 온라인 도구가 있으며 Coolors는 인기 있는 무료 사이트 중 하나입니다. 색상 팔레트를 빠르고 정확하게 생성하는 데 도움이 됩니다.

출처: Coolors.co, 2023

색맹을 위한 디자인

전 세계적으로 약 3억 명의 사람들이 어떤 형태로든 색맹(주로 적록색맹)을 앓고 있습니다. 이는 귀하의 웹 사이트 요소 중 일부 또는 대부분을 볼 수 없는 상당히 큰 잠재 고객 기반입니다. 적록색맹의 네 가지 주요 형태는 다음과 같습니다.

• 백색맹(Protanopia) : 빨간색 음영은 눈에 띄지 않으며 검은색으로 인식됩니다. 색상은 파란색 또는 금색 음영으로 표시됩니다. 짙은 갈색은 빨간색, 주황색, 녹색과 같은 다른 색상의 어두운 색조와 혼동됩니다.
• Deuteranopia : 녹색은 눈에 띄지 않습니다. 블루스와 골드가 일반적으로 보입니다. 빨간색과 녹색 음영은 서로 바꿔서 인식됩니다. 노란색과 밝은 녹색 음영이 동일하게 보입니다.
• Protanomaly : 빨간색이 어두운 회색으로 나타납니다. 모든 빨간색은 덜 밝습니다.
• Deuteranomaly : 주로 파란색, 노란색 및 일반적으로 차분한 색상을 참조하십시오.

다른 유형으로는 청황색맹 등이 있습니다. 다행히 일부 온라인 도구를 사용하면 안전한 테마를 디자인하고 색상 팔레트를 조정하는 데 도움이 될 수 있습니다.

Adobe Color의 접근성 도구를 사용하면 슬라이더를 드래그하여 올바른 색상 값을 얻을 수 있습니다. 테마를 웹사이트에 끌어서 놓아 현재 팔레트 구성표를 확인할 수도 있습니다.

글꼴 페어링 기술

많은 온라인 그래픽 디자인 학위 프로그램에서 가르치는 것처럼 타이포그래피의 네 가지 기본 원칙은 대비, 공간, 계층 및 크기입니다. 주요 목표는 디자인의 스타일과 가독성의 균형을 맞추는 것입니다. 시도해 볼 수 있는 글꼴 조합에 대한 몇 가지 주요 아이디어는 다음과 같습니다.

• 가볍고, 보통이고, 굵은 글꼴 가중치(동일한 글꼴)를 사용해 보세요.
• 다양한 글꼴 모음과 서체를 결합합니다.
• 단어, 구문 또는 문장에 개별 문자의 커닝 또는 간격을 통합합니다.
• 본문의 첫 글자가 크고, 종종 양식화되어 있으며, 어떤 디자인에도 적용 가능한 드롭 캡을 사용하세요. 고서에서 사용하는 고전적인 방법이다.
• 글꼴 미학은 전체 디자인과 균형을 이루어야 합니다.
• 흥미로움이나 참신함을 전달하기 위해 일부 글꼴 영역을 기발하거나 엉뚱하게 보이도록 만드세요. 하지만 단순함이 필요한 경우에는 단순하게 유지하세요!
• CJK 글꼴(중국어, 일본어, 한국어 스크립트)을 통합하여 감각을 더해보세요. 번역의 미묘한 뉘앙스는 원어민에게 문의하세요.
• 기본 서체에 원하는 스타일이나 효과가 없을 경우 보조 서체를 사용하세요.

몇 가지 예는 다음과 같습니다.

• 에이브릴 팻페이스와 포핀스
• Alegreya(굵게 및 일반)
• 바로우 컨덴시드(Barlow Condensed)와 몬세라트(Montserrat)
• 가마우지 가라몬드와 프로자 리브레
• DM Serif 디스플레이 및 DM Sans
• Etcetera Type Company의 에필로그 및 누구든지

• IBM Plex Sans Condensed 및 IBM Plex Sans
• 칼라와 인콘솔라타
• 칼라와 메리웨더
• Libre Baskerville(볼드 및 레귤러)
• Libre Baskerville 및 Source Sans Pro
• Impallari Type별 Lobster Two 및 Kaushan 스크립트
• 몬세라트와 하인드
• 누니토와 PT 산스
• Nunito Sans(굵게 및 일반)
• 오스왈드와 소스 산스 프로

• 오스왈드와 소스 세리프 프로
• 플레이페어 디스플레이와 라토
• Playfair 디스플레이 및 Source Sans Pro
• 콰트로센토와 로라
• 콰트로센토 및 콰트로센토 산스
• 유사(굵게 및 일반)
• Roboto Condensed 및 Roboto
• Stint Ultra Expanded 및 Pontano Sans
• 울트라와 PT 세리프
• 워크샌즈와 메리웨더
• 예세바 원(Yeseva One)과 조세핀 산스(Josefin Sans)

글꼴 페어링 도구

1. Google Fonts는 글꼴 조합 선택에 대한 일반적인 아이디어를 얻기 위해 꼭 봐야 할 사이트입니다. 모든 글꼴은 오픈 소스이며 무료로 사용할 수 있습니다.
2. FontPair를 사용하면 대화형 글꼴 쌍과 무료로 사용할 수 있는 Googe Fonts의 모든 글꼴을 볼 수 있습니다.

글꼴 개발

그냥 글꼴을 만들어보면 어떨까요? Apple은 Helvetica Neue에서 자체적으로 만든 San Francisco라는 글꼴로 변경했는데, 이는 Apple에게 잘 작동했습니다. 무료 온라인 도구는 오픈 소스 Birdfont입니다. 글꼴을 만들고 테스트해 보세요!

색상과 글꼴은 멀리 있습니다!

위의 기술은 메시지와 UX에만 부차적입니다. 디자인은 피드백에 따라 달라지며 반복적입니다. 소규모 사용자 및 고객 샘플에 대한 A/B 테스트를 통해 몇 가지 디자인 변경이 예상됩니다. 상상력을 발휘하여 길을 만들어보세요!