무작위 색상을 디자인 방향으로 변환하기

1. 한 문장의 디자인 도전 과제 작성하기

당신이 무엇을 디자인할지 알기 전에는 색상을 생성하지 마세요. 도전 없이는 개인적으로 그것이 마음에 드는지 여부에 따라서만 결과를 판단할 수 있습니다. 명확한 요약은 색상이 특정 청중, 메시지 및 행동을 지원할 수 있는지 판단할 수 있게 합니다.

프로젝트, 청중 및 원하는 반응을 포함하는 한 문장을 작성하세요. 예를 들어: '독립 사진작가가 자신의 서비스를 전문적이면서도 친근하게 제시할 수 있도록 돕는 랜딩 페이지를 만드세요.' 다른 요약은 다음과 같을 수 있습니다: '대학생들이 지역 재활용 프로그램에 참여하도록 장려하는 캠페인 아이덴티티를 디자인하세요.'

당신의 문장은 색상을 설명할 필요가 없습니다. 그것은 커뮤니케이션 문제를 설명해야 합니다. 이것은 모든 생성된 결과를 미리 결정된 시각적 답변으로 강요하는 것을 방지합니다.

프로젝트가 새로운 상업 아이디어와 연결되어 있다면, 온라인 비즈니스를 시작하기 전에 해야 할 12가지 결정을 다루는 우리의 가이드가 아이덴티티 디자인을 시작하기 전에 청중, 오퍼 및 고객 여정을 명확히 하는 데 도움이 될 수 있습니다.

2. 끝없는 스크롤 없이 색상 생성하기

무작위 색상 생성기를 열고 여러 결과를 만드세요. 위험은 도구가 당신이 이미 원하던 색상을 표시할 때까지 계속하는 것입니다. 그것은 무작위 탐색을 당신의 기존 선호도에 대한 위장된 확인으로 변환합니다.

시작하기 전에 멈추는 규칙을 정하세요. 정확히 5가지 색상을 생성하고 세 번째 결과를 개발하기로 결정할 수 있습니다. 또 다른 방법은 6개의 후보를 저장하고 무작위 숫자 생성기를 사용하여 1부터 6까지의 숫자를 선택하는 것입니다.

무작위 선택은 사용할 수 없는 결과를 발행해야 한다는 의미가 아닙니다. 그것은 선택된 색상을 거부하기 전에 진지하게 조사하기로 동의한다는 의미입니다. 즉시 생성 버튼을 다시 누르는 대신 적어도 15분 동안 그 가능성을 탐색하세요.

선택된 색상과 생성 번호를 메모에 캡처하세요. 이것은 운동에 명확한 시작을 제공하고 프로젝트가 연결되지 않은 스크린샷의 끝없는 컬렉션이 되는 것을 방지합니다.

3. 색상을 사용 가능한 형식으로 기록하기

스크린샷은 적절한 색상 기록이 아닙니다. 생성된 HEX, RGB 및 HSL 값을 작업 문서에 복사하세요. 각 형식은 동일하게 표시된 색상을 다르게 설명하며 워크플로우의 다른 부분에서 유용할 수 있습니다.

MDN의 CSS 색상 값 가이드 는 16진 표기법, rgb(), hsl() 및 최신 색상 함수를 사용하여 색상을 표현하는 방법을 설명합니다.

원본 값을 변경하지 않고 기록하세요. 나중에 지원하는 변형을 만들 것이지만, 초기 결과는 운동 전체에서 참고 지점으로 남아 있어야 합니다.

4. 이름 대신 그 특성 연구하기

색상 이름은 일관성이 없습니다. 한 사람의 '해양 파란색'은 다른 사람의 청록색, 청록색 또는 청록색일 수 있습니다. 이름에 대해 논쟁하는 대신, 색상이 어떻게 작동하는지에 영향을 미치는 특성을 검토하세요.

명도부터 시작하세요. 색상이 어두운 전경, 옅은 배경 또는 중간톤 악센트에 자연스럽게 적합하게 느껴집니까? 그런 다음 채도를 검토하세요. 높은 채도의 결과는 강한 강조를 만들 수 있지만 넓은 영역에 걸쳐 사용될 때 지쳐질 수 있습니다. 미묘한 색상은 차분한 분위기를 만들 수 있지만 중요한 작업 주위에는 더 강한 대비가 필요할 수 있습니다.

마지막으로 온도와 주변 관계를 고려하세요. 색상이 따뜻한지 시원한지요? 순백색, 따뜻한 회색, 숯검정 및 검은색 옆에서 어떻게 변합니까? 색상은 실제 디자인에 들어가면 절대 고립되어 나타나지 않습니다.

5. 고정관념에 의존하지 않고 분위기 만들기

'파란색은 신뢰를 의미합니다,' '녹색은 자연을 의미합니다' 또는 '보라색은 사치를 의미합니다'와 같은 보편적인 주장을 하려고 유혹하는 것입니다. 이러한 연결은 때때로 유용할 수 있지만 고정된 규칙이 아닙니다. 의미는 문화, 맥락, 산업, 타이포그래피, 이미지 및 주변 색상에 따라 변합니다.

하나의 감정을 즉시 할당하는 대신, 두 가지 또는 세 가지 가능한 해석을 만드세요. 미묘한 녹색은 천연 스킨케어, 재정적 안정성 또는 교육 응용 프로그램을 지원할 수 있습니다. 강한 주황색은 한 프로젝트에서 친근함을, 다른 프로젝트에서 긴급함을, 세 번째 프로젝트에서 저렴한 에너지를 전달할 수 있습니다.

각 가능한 해석에 대해 3개의 형용사를 작성하세요. 그런 다음 이러한 형용사를 원래 디자인 도전 과제와 비교하세요. 색상과 프로젝트 간의 가장 유용한 관계를 만드는 해석을 선택하세요.

이 방법은 동일한 색상이 하나의 보편적인 심리적 의미를 가지고 있다고 가정하지 않으면서 다양한 이야기를 지원할 수 있게 합니다.

6. 색상을 위한 프로젝트 개념 만들기

실제 클라이언트가 아닌 실습을 위해 운동을 사용하는 경우 색상에 가상 프로젝트를 제공하세요. 프로젝트 개념은 매력적이지만 설명이 없는 무드보드를 만드는 대신 청중, 톤, 레이아웃 및 콘텐츠에 대한 결정을 하도록 강제합니다.

이름 생성기 를 사용하여 가상 응용 프로그램, 카페, 의류 레이블, 캐릭터, 이벤트 또는 서비스의 이름을 만드세요. 그런 다음 프로젝트가 제공하는 것과 누구를 위해 제공하는지에 대한 짧은 설명을 작성하세요.

색상을 설명하기만 한다는 이유로 이름을 선택하지 마세요. 모든 녹색 개념을 '숲' 또는 모든 파란색 개념을 '바다'라고 부르는 것은 창의적인 방향을 제한합니다. 이름은 프로젝트를 설명하고 색상은 그 성격에 기여해야 합니다.

당신의 개념은 간단하게 유지할 수 있습니다: '북라인은 복잡한 프로젝트 관리 소프트웨어 없이 클라이언트 마감을 구성해야 하는 프리랜서를 위한 계획 응용 프로그램입니다.' 이것은 의도적인 시각적 선택을 시작하기에 충분한 맥락입니다.

7. 색상을 시각적 규칙으로 변환하기

디자인 방향은 팔레트 이상을 포함합니다. 타이포그래피, 간격, 모양, 아이콘 스타일, 사진 및 모션 모두 선택된 색상이 해석되는 방식에 영향을 미칩니다.

선명한 모서리, 압축된 타이포그래피 및 고대비 사진과 쌍을 이룬 생생한 노란색을 상상해보세요. 그것은 활력 있고 방해적으로 느껴질 수 있습니다. 동일한 노란색은 둥근 카드, 넉넉한 간격 및 친근한 삽화와 결합되면 장난기 있고 접근 가능하게 느껴질 수 있습니다.

하나의 제목 스타일, 하나의 본문 텍스트 스타일, 두 개의 버튼 모양, 샘플 카드, 이미지 참조 및 선택된 색상을 포함하는 작은 방향 보드를 만드세요. 모든 결정은 5단계에서 선택한 동일한 3개의 형용사를 지원해야 합니다.

결과가 전문적인 사례 연구가 될 수 있다면, 당신의 가치를 증명하는 온라인 포트폴리오 구축에 대한 우리의 가이드를 검토하세요. 강력한 사례 연구는 광택이 난 최종 화면만 표시하는 대신 방향 뒤의 도전, 제약 및 추론을 설명합니다.

8. 색상이 얼마나 나타나는지 제어하기

색상은 작은 버튼에서 아름답게 작동할 수 있지만 전체 페이지에 적용될 때 압도할 수 있습니다. 더 많은 화면을 개발하기 전에 무작위 색상이 차지해야 할 시각적 공간의 양을 결정하세요.

60-30-10 개념은 시작 연습을 제공할 수 있습니다: 지배적인 기초에 약 60%, 지원 영역에 30%, 악센트에 10%. 그것은 보편적인 법칙이 아니며, 인터페이스 레이아웃은 완벽한 수학 블록으로 거의 나뉘지 않습니다. 그 가치는 당신이 비율에 대해 생각하도록 강제한다는 것입니다.

프레젠테이션을 준비하거나 큰 시각적 영역의 배포를 추정할 때 백분율 계산기를 사용하세요. 더 중요한 것은 시청자의 주의가 먼저 어디로 가는지 조사하세요.

높은 채도의 무작위 색상은 종종 더 작은 양에서 가장 잘 작동합니다. 텍스트와 컨트롤이 명확하게 구별되는 한, 부드러운 색상은 더 큰 표면을 덮을 수 있습니다.

9. 중립색을 추가하고 기능적 역할 할당하기

무작위 색상은 배경, 표면, 텍스트 색상 및 테두리의 지원이 필요합니다. 선택된 색상을 동등하게 강한 여러 경쟁자로 둘러싸는 것보다 제한된 중립 기초를 추가하세요.

다음으로, 무작위 색상이 실제로 무엇을 하는지 결정하세요. 그것은 기본 작업, 선택된 탐색 항목, 차트 강조 표시 또는 장식 그림을 식별할 수 있습니다. 명확한 이유 없이 한 곳에서 '상호 작용식'을 의미하고 다른 곳에서 '장식'을 의미하게 하지 마세요.

Google의 색상 역할에 대한 Material Design 지침 은 팔레트를 구조화되지 않은 색상 표본 컬렉션으로 취급하기보다는 목적에 따라 색상을 할당하는 가치를 보여줍니다.

10. 하나의 현실적인 디자인 샘플 만들기

무드보드만으로 방향을 승인하지 마세요. 진정한 텍스트와 기능 요소를 포함하는 작은 현실적인 아티팩트 하나를 만드세요. 이것은 랜딩 페이지 영웅, 모바일 프로필, 프로모션 카드, 이벤트 포스터 또는 애플리케이션 대시보드일 수 있습니다.

개념에 소셜 아이덴티티가 필요하다면, Instagram 사용자 이름 생성기는 모의 프로젝트의 사용 가능한 이름 지정 스타일을 탐색하는 데 도움이 될 수 있습니다. 선택한 사용자 이름을 고립된 장식으로 표시하는 대신 현실적인 프로필 헤더 또는 캠페인 게시물 내에 배치하세요.

QR 코드 생성기 를 사용하여 기능 테스트를 만들 수도 있습니다. 포스터, 명함 또는 패키징 개념에 QR 코드를 추가하고 디자인 방향이 실질적인 요구 사항을 견디는지 확인하세요. QR 코드와 배경 사이에 강한 대비를 유지하고, 명확한 주변 공간을 유지하고, 둘 이상의 장치로 최종 출력을 스캔하세요.

실제 콘텐츠는 약점을 빠르게 노출시킵니다. 큰 직사각형에서 인상적으로 보이는 색상은 버튼 레이블 뒤, 사진 옆 또는 작은 모바일 구성 요소 내부에서 사용될 때 실패할 수 있습니다.

11. 방향을 CSS로 옮기기

개념이 웹사이트를 위한 것이라면, 선택된 값을 CSS 사용자 정의 속성으로 기록하세요. 다른 사람이 각 색상이 존재하는 이유를 이해할 수 있도록 의미론적 이름을 사용하세요.

:root {
  --color-page: #f7f7f4;
  --color-surface: #ffffff;
  --color-text: #1d1e20;
  --color-text-muted: #63666b;
  --color-primary: #7b4de3;
  --color-on-primary: #ffffff;
  --color-border: #d9d9df;
}

구성 요소 내에서 테스트한 후에만 호버, 누름 및 선택된 상태를 만드세요. Smashing Magazine의 CSS color-mix()로 팔레트 단순화 에 대한 기사는 기존 테마 색상에서 컨텍스트 변형을 파생시키는 방법에 대해 논의합니다.

파생된 값은 여전히 시각 및 접근성 테스트가 필요합니다. 자동 혼합은 일관된 관계를 만들 수 있지만, 모든 텍스트, 아이콘 및 배경 조합이 충분히 명확한지 여부를 결정할 수 없습니다.

12. 최종 방향 스트레스 테스트 및 문서화하기

원래 프레젠테이션보다 덜 호의적인 상황에서 방향을 테스트하여 마무리하세요. 작은 화면에서 보고, 버튼 내에 긴 텍스트를 배치하고, 지원 사진의 품질을 줄이고, 밝은 환경과 어두운 환경에서 디자인을 비교하세요.

다른 사람에게 그들이 먼저 무엇을 주목하는지, 그들이 어떤 유형의 프로젝트라고 생각하는지, 어떤 요소가 상호 작용하는 것으로 보이는지 물어보세요. 당신의 의도를 설명하면서 시작하지 마세요. 자신의 해석은 시각 시스템이 당신이 계획한 것을 전달하는지 여부를 드러냅니다.

원래 무작위 색상, 최종 색상 값, 프로젝트 요약, 선택된 형용사, 기능적 역할, 거부된 방향 및 중요한 변경 이유를 문서화하세요. 이것은 재미있는 운동을 반복 가능한 디자인 증거로 변환합니다.

마지막으로 명확한 결정을 내리세요: 채택, 수정 또는 거부. 테스트에서 프로젝트를 지원할 수 없다는 것을 보여줄 때 생성된 색상을 거부하는 것은 허용됩니다. 새로운 가능성을 규율 있게 검토하는 데 도움이 되었다면 운동은 여전히 성공했습니다.