사용자 인터페이스의 3 가지 Cs : 색상, 대비 및 내용

많은 비즈니스 전략가들이 사용하는 오래된 비즈니스 모델 인 3 C가 있습니다. 회사, 고객 및 경쟁 업체 에 초점을 맞추는 것을 상기시켜줍니다. 많은 소규모 비즈니스 및 웹 사이트에서도이 모델을 사용합니다. 그러나 디자이너에게는 세 가지 C가 약간 다릅니다.

사용자 인터페이스를 만들 때는 색상, 대비 및 내용에 중점을 두어야합니다. 이 세 가지 요소는 훌륭한 디자인의 기초입니다. 그러나 각각은 표면에서 보이는 것보다 조금 더 복잡합니다. 다음은 3 가지 C 사용자 인터페이스를 생각하고 디자인 프로젝트에 통합하는 방법입니다.

디자인 리소스 살펴보기

색깔

색상은 대부분의 사용자에게 가장 분명한 시각적 요소 중 하나입니다. 디자이너와 비 디자이너 모두 색상과 특정 색조 또는 팔레트의 색상에 대해 이야기 할 수 있습니다.

색상은 다른 효과없이 고유 한 정서적 연결을 완전히 자체적으로 만들 수 있습니다. 색상 견본이나 칩을 거의 모든 사람에게 건네 줄 수 있으며 보이는 색상에 대한 반응을 얻을 수 있습니다. 또한 개인 및 디자인 환경 설정이 시간이 지남에 따라 거의 보편적으로 바뀌는 경향이 있다는 점에서 재미있는 디자인 요소입니다.

색상은 여러 가지 이유로 디자인을 만들거나 깨뜨릴 수 있지만 주로 많은 일을하고 무시할 수없는 많은 시각적 신호를 사용자에게 동시에 제공합니다.

색상 영향 :

• 유용성과 가독성
• 브랜드 인지도 및 인식
• 사용자가보고 상호 작용하는 위치
• 조직 및 사용자 흐름
• 디자인의 전반적인 성공

색상을 사용하여 작성하십시오.

• 명확하고 이해할 수있는 탐색
• 직관적 인 상호 작용
• 프로젝트 분위기
• 강력한 클릭 유도 문안 또는 사용 가능한 요소 만들기
• 현실과 판타지 같은 디자인에 대한 감각을 확립

이것은 모두 빨강, 초록, 파랑의 혼합처럼 단순한 무언가에 대한 높은 순서처럼 보일 수 있습니다.

그래서 어디에서 시작합니까? 아마도 색상과 관련하여 가장 중요한 변수는 사용자에게 매력적인 팔레트를 만드는 것입니다. 브랜딩 및 분위기와 같은 디자인에 대해 이야기합니다. 예를 들어, 빨간색이 아닌 파란색을 주 색상으로 사용하는 Coca-Cola 웹 사이트는 사용자에게 문제가 될 수 있습니다.

단색 팔레트는 색상 이론의 원리에 뿌리를두고 있습니다.

단색 팔레트는 색상 이론의 원리에 뿌리를두고 있습니다. 작동시키기 위해 두 가지 이상의 색상이 필요하지 않습니다. 2-3 가지 색상과 밝고 어두운 변형의 라이브러리가 충분합니다. Mockplus는 6 : 3 : 1 규칙을 권장합니다. 시간의 60 %를 사용하는 주요 색상, 시간의 30 %를 사용하는 보조 색상 및 남은 색상의 강조 색상을 포함하여 팔레트에 대해 3 가지 색상을 선택합니다. 디자인의 10 % 이 규칙은 디자인 이론의 주된 황금 비율에 기반을두고 있으며 훌륭한 출발점이 될 수 있습니다.

사용자 인터페이스에서 컬러 팔레트를 만드는 또 다른 규칙은 다음과 같습니다. 흑백으로 시작합니다. 색상없이 디자인을 사용할 수 있으면 색상을 추가 한 후에 작동 할 수 있습니다. 흑백 윤곽선은 또한 사용성을 높이기 위해 충분한 대비 (두 번째 C)로 색상을 선택하는 방법에 대한 좋은 아이디어를 제공합니다.

대조

명암은 요소를 구별합니다. 시각적 계층 구조, 스캔 가능성을 만드는 데 도움이되고 무언가를 빠르게 이해하는 데 도움이됩니다. 대비가 강한 요소를 사용하면 한 눈에서 다른 눈으로 쉽게 볼 수 있으므로 자연스러운 시각적 패턴과 사용자 흐름이 만들어집니다.

사용자 인터페이스 디자인에 대비가 중요한 이유는 사용자 인터페이스 디자인이 모든 작업의 ​​일부이기 때문입니다. 대비를 만드는 방법은 관련된 시각 효과 요소의 유형에 따라 다릅니다.

다음과 대비를 설정할 수 있습니다.

• 색깔
• 크기
• 방향
• 우주
• 모양

접근성 가이드 라인의 핵심 요소는 사용자가 디자인에서 한 요소를 다른 요소와 구별 할 수 있도록하기 때문에 대비입니다. 웹 접근성을보다 쉽게 ​​만드는 목표를 가진 A11Y 프로젝트는 다음과 같은 권장 사항을 갖습니다. 컬러 휠의 다른 세그먼트의 색상을 사용하여 색상 대비를 시작하거나 색상을 대조합니다. 컬러 휠의 반대편에있는 보색은 최대 대비를 제공합니다.

동일한 개념이 다른 요소들 사이의 대비를 만드는 데에도 적용됩니다. 다른 가족의 서체를 선택하거나 극도로 다른 크기를 사용하여 사용자가 단어를 빠르게 읽을 수 있습니다.

요컨대, 대조의 개념은 반대가 매력적이라는 것입니다.

방향 표시, 화살표 또는 이미지를 움직임과 함께 사용하여 사용자가 특정 방향을 보도록 강요 한 다음 방향 신호를 뒤집어 더욱 대비를 높이십시오.

좁은 공간과 열린 공간의 차이는 많은 대비를 만듭니다. 텍스트를 쉽게 읽고 읽을 수있게하려면주의를 끌 수있는 공간을 조금 더 확보하십시오.

요컨대, 대조의 개념은 반대가 매력적이라는 것입니다. 겉보기에 다른 요소는 실제로 함께 작동하여 한 눈에 쉽게 볼 수 있습니다.

대비가 의도 한대로 작동하는지 확인하려면 화면의 요소를 볼 때 몇 가지 요소를 고려하십시오.

• 가독성 : 모든 단어와 이미지를보고 쉽게 읽을 수 있습니까?
• 명확성 : 한 요소를 다른 요소와 쉽게 구별 할 수 있습니까?
• 접근성 : 가능한 많은 사람들에게 효과가 있습니까?
• 환경 : 사용자는 디자인이 사용될 장소에서 디자인을보고 이해할 수 있습니까?

함유량

세 C의 마지막은 내용입니다. 사용자 인터페이스 디자인은 여기에 포함 된 정보만큼 좋을 수 있습니다. 컨텐츠에는 이미지에서 텍스트, 일러스트레이션 및 아이콘, 로고 및 브랜드에 이르는 모든 것이 포함됩니다. 콘텐츠에는 전체 메시징 또는 내러티브에서 블로그 게시물에 이르기까지 비디오 및 모든 사본이 포함됩니다.

콘텐츠만으로는 충분하지 않습니다. 더 훌륭한 콘텐츠가 있어야합니다.

이러한 모든 요소는 디자인 및 사용자 인터페이스를 특별하게 만드는 요소에 대한 이야기를 제공합니다. 사용자가 다른 일을하기보다는 왜 시간을 주어야 하는가?

그리고 콘텐츠만으로는 충분하지 않습니다. 더 훌륭한 콘텐츠가 있어야합니다. 고해상도 컨텐츠. 고 부가가치 콘텐츠. 귀하의 콘텐츠는 사용자의 관심을 끌기 위해 경쟁하는 유사한 콘텐츠보다 우수 / 더 크게 / 더 특별해야합니다.

큰 주문이 될 수 있지만 대부분의 디자이너는 자신과 브랜드 및 메시지에 충실하여이 콘텐츠를 만들 수 있습니다. 당신이 무엇인지 알고 무엇을 고수하십시오. 사용자는이 진위를보고 디자인에 시간을 투자하여이를 소중하게 생각합니다.

결론

이제 회사, 고객 및 경쟁 업체의 이전 3 가지 C 비즈니스와 색상, 대비 및 컨텐츠의 3C 사용자 인터페이스 디자인으로 무장 한이 세상에서 벗어난 s 디자인 프로젝트를 만들 수있는 도구와 지식을 갖추게되었습니다. 좋은. (또는 최소한 매우 유용합니다.)

두 가지 전략을 모두 디자인 프로젝트에 적용함으로써 웹 사이트 소유자와 사용자에게 도움이되는 것을 만드는 방법에 대해 생각해야합니다. 디자인이 아름답고 기능적이기도합니다.

참고 :이 기사의 모든 예제는 Design Shack Gallery에서 가져온 것입니다. 주변을 둘러보십시오. 훌륭한 일과 영감으로 가득합니다.