UI 디자인에서 색상을 사용하는 방법 (How to use colors in UI Design)

실용 팁 및 Tools.

색상은 다른 모든 것과 비슷하며, 적당히 사용하는 것이 가장 좋습니다. 색 구성표에 최대 3가지 기본 색상을 기준으로 하면 더 나은 결과를 얻는 경향이 있습니다. 디자인 프로젝트에 색상을 적용하는 것은 균형을 이루는 데 많은 도움이 되며 사용하는 색상이 많을수록 균형을 이루는 것이 더 복잡해집니다.
색은 디자인에 쾌적한 품질을 더해 주지 않는다- 색은 디자인을 강화시켜 준다. 피에르 보나르 - Pierre Bonnard
팔레트에서 정의한 색상 이외의 추가 색상이 필요하면 음영(shades)과 색조(tints)를 사용하십시오. 음영(shades)과 색조(tints)는 서로 다른 톤을 제공할 것입니다.

60–30–10 규칙

이 인테리어 디자인 규칙은 색 구성표를 쉽게 조합하는 데 도움이 되는 시대를 초월하는 꾸미기 기술입니다. 60%+30%+10% 비율은 색상 균형을 유지하기 위한 것입니다. 이 공식은 균형 감각을 만들고 눈이 한 초점에서 다른 초점으로 편안하게 움직일 수 있기 때문에 효과가 있습니다. 믿을 수 없을 정도로 적용하기 쉽습니다.
60%가 메인 색상이고 30%는 보조 색상이며 10%는 강조 색상입니다.
presentation
벽 페인트, 가구, 액세서리.

색상 의미

과학자들은 수 세기 동안 특정 색의 생리적 효과를 연구했습니다. 미학 이외에도 색상은 감정과 연상의 창조자입니다. 색상의 의미는 문화와 환경에 따라 다를 수 있습니다. 그래서 흑과 백 패션 가게를 볼 수 있습니다. 그들은 우아하고 빛나게 보이기를 원합니다.
presentation
Asos는 녹색 CTA가있는 순수한 흑백입니다. 이렇게 만든 것은 이유가 있다.
  • 빨간색-Red : 열정, 사랑, 위험 (Passion, Love, Danger)
  • 파란색-Blue : 고요함, 책임감, 안전 (Calm, Responsible, Safe)
  • 블랙-Black : 신비함, 우아함, 악마 (Mystery, Elegance, Evil)
  • 흰색-White : 순수, 침묵, 청결 (Purity, Silence, Cleanliness)
  • 녹색-Green : 새로움, 신선한, 자연 (New, Fresh, Nature)
이 목록을 더 확인하고 싶다면 — color culture.

그레이 스케일(grayscale) 우선

우리는 디자인 초기에 색상(colors)과 톤(tones)를 가지고 놀고 싶지만, 기본색(primary color)을 조절하는 데만 3시간이 걸린다는 것을 알게 됩니다. 우리는 이것을 피하는 법을 배워야 합니다.
대신에 여러분은 공간과 요소를 배치하는 데 집중하도록 하십시오. 당신은 많은 시간을 절약할 것입니다. 이런 종류의 제약은 매우 생산적입니다. 반면 지루해 보이게 할 필요는 없습니다. 원한다면 더 좋아 보일 수 있도록 다른 톤(tones)으로 시도해보십시오.
presentation
드리블(dribbble)에서 찾을 수 있는 작품 중 하나. 간단한 단색 색상과 요소에 중점을 둡니다.

순수한 회색 음영(grayscale)과 검은색(black)을 멀리하십시오.

내가 배운 가장 중요한 컬러 트릭 중 하나는 채도(saturation) 없이 회색(gray) 색상을 사용하지 않는 것입니다. 실생활에서는 순수한 회색이 거의 존재하지 않습니다. 검은색(black)도 마찬가지입니다.
presentation
이 이미지의 가장 어두운 색상은 #000이 아니며 #0A0A10입니다.
색상에 항상 약간의 채도(saturation)를 추가하는 것을 잊지 마십시오. 무의식적으로 사용자에게는 더 자연스럽고 익숙해 보일 것입니다.
presentation


presentation

자연을 믿어라.

최고의 색상 조합은 자연에서 왔습니다. 그들은 항상 자연스러워 보일 것입니다. 환경을 디자인 솔루션으로 바라보는 가장 좋은 점은 팔레트가 항상 바뀌고 있다는 것입니다.
영감을 얻으려면 주위를 둘러봐야 합니다.

대비(contrast) 유지

일부 색상은 서로 잘 어울리며 다른 색상은 서로 충돌합니다. 색상환(Color wheel)에서 가장 잘 관찰할 수 있는 상호 작용 방식에 대한 결정적인 규칙이 있습니다. 이 방법을 알고 있어야 하지만 그렇다고 수동으로 작업할 필요는 없습니다.
presentation
색상 이론에 대해 자세히 알고 싶다면이 글을 참조하십시오 -Color Theory For Designers: Creating Your Own Color Palettes (디자이너를위한 색상 이론 : 나만의 색상 팔레트 만들기)

영감을 얻으십시오.

우리가 UI 레퍼런스에 관해 이야기할 때, 드리블 (dribbble)이 최상의 장소입니다. 또한 다른 디자이너가 특정 색상을 사용한 방법에 대한 시각적 연구를 원하면 여기를 클릭하여 dribbble.com/colors 참조하십시오.
presentation
비디오, 프린트 디자인, 인테리어 디자인, 패션 등 많은 영감을 주는 장소들이 있습니다. 그러한 팔레트에 비활성화되지 말고 흥미로운 것들을 모두 저장하십시오.
presentation

presentation

presentation
종종 KPOP 비디오 클립에서 색상 훔치기를 좋아합니다. 그들은 화려합니다.

도구들 (Tools)

일을 쉽게 하기 위해, 나는 2017년에 이용 가능한 색상 팔레트를 선택할 수 있는 가장 좋은 도구(tools) 몇 가지를 찾았습니다. 이것들은 여러분의 시간을 많이 절약해 줄 겁니다.

Coolors.co

확실하게 제가 가장 좋아하는 색 선택 도구입니다. 선택한 색을 잠그고(lock) 공백을 눌러 팔레트를 생성할 수 있습니다. Coolors는 또한 이미지를 업로드하고 이미지를 컬러 팔레트로 만들 수 있습니다. 멋진 점은 하나의 결과에만 국한되지 않고 참조 점을 수정할 수 있는 선택기(picker)가 있다는 것입니다.
presentation

Kuler

Adobe의 이 도구는 오랫동안 우리와 함께했습니다. 브라우저 및 데스크탑 버전에서 사용할 수 있습니다. 데스크톱 버전을 사용하는 경우 색 구성표를 Photoshop에 내보낼 수 있습니다.
presentation

Paletton

Kuler와 유사하지만 차이점은 5개의 톤(tones)에만 국한되지 않는다는 것입니다. 기본 색상을 가지고 있고 추가 톤(tones)으로 작업하고 싶을 때 유용한 도구입니다.
presentation

Designspiration.net

컬러 팔레트에 대한 아이디어가 있다고 가정하고 이 혼합의 예를 보고 싶습니다. Designispiration은 이를 위한 훌륭한 도구입니다. 최대 5가지 색상을 선택하고 검색어와 일치하는 이미지를 검색할 수 있습니다. 특정 팔레트로 이미지를 찾는 것뿐만 아니라 실제 팔레트로 이미지를 찾는 것이 좋습니다.

Shutterstock Lab Spectrum

내가 선택한 색상으로 사진을 검색하려면 어떻게 해야 합니까? 음, Shutterstock에는 특정 톤으로 사진을 검색할 수 있는 Spectrum이라는 도구가 있습니다. 워터 마크가 있는 작은 미리 보기 이미지로 인해 팔레트를 생성하기에 충분합니다. 구독(subscription)은 필요하지 않습니다.
presentation

Tineye Multicolr

그러나 사진의 색상 조합을 검색하고 각 사진의 양을 지정하려면 Tineye가 도움이 됩니다. 이 웹 사이트는 Flickr의 1천만 개의 Creative Commons 이미지 데이터베이스를 사용합니다.

마지막 생각들

색은 특히 디지털 시대에서 마스터하기 까다로운 개념입니다. 위에서 언급 한 팁을 사용하면 올바른 색상을 찾는 작업을 쉽게 수행할 수 있습니다. 근사한 색 구성표를 만드는 법을 배우는 가장 좋은 방법은 실습을 통해 자신에게 호의를 베풀고 색으로 노는 것입니다.


presentation
안녕하세요!
Early adopter입니다. 제 번역 블로그를 자주 찾아 주셔서 감사드립니다. 이번에 페이스북에 [DTF] 디자인 번역 공장 - Design Translation Factory라는 공개 그룹을 만들어 보았습니다.
저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
그리고 페이스북 친구도 거의 없습니다. ㅠㅠ 친구 맺어주시고 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.

번역 글 추천(신청) 받습니다.
안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.
이 글은 번역 글입니다. 원본 링크입니다.
이 게시물을...