The Way Humans를 사용하여 웹 디자인에서 시각 정보 처리하기
지난 몇 년 동안 웹 사이트와 사용자 인터페이스를 설계하는 것이 훨씬 쉬워졌습니다. UI를 개발할 때 처음부터 새로 시작하는 것이 무의미한 툴을 사용할 수 있습니다 (새로운 UI 컴파일을 확인하십시오). 하지만 나는 웹 디자인의 죽음에 대해 논쟁하기 위해 여기에 온 것이 아닙니다..
대신, 내가 할 일은 시각 디자인 도구 (가장 기본적인 CSS 키트부터 가장 고급 프리미엄 테마까지) 뒤에있는 기본 심리학 기반 개념을 설명하는 것입니다.. 당신은 단지 그들을 사용하지 않을뿐만 아니라 그것들을 이해합니다.. 나는 또한 이것이 기존의 것들을 성공으로 쉽게 수정할 수 있다고 확신한다..
시각 정보를 처리 할 때 인간의 마음과 몸이 어떻게 작동하는지, 그리고이 지식이 웹을위한 설계로 어떻게 해석되는지 살펴 보겠습니다..
지각 조직의 원리
게슈탈트 심리학에 따르면, 전체가 그 부분들의 합보다 다르다.. 이 사상 학교의 추종자들은 인간의 마음이 어떻게 집단화되는지에 관한 몇 가지 원칙이 있다고 주장합니다. 이것들은 단순히 이론은 아니지만 마음에 들지만 시각적 그룹 구성에 관한 실제적인 사실.
아래에서는 몇 가지 법칙과 이러한 원칙에 대해 널리 알려진 잘 알려진 사용법을 확인할 수 있습니다. 다음 디자인을위한 새로운 아이디어를 찾을 수도 있습니다..
유사성의 법칙
첫 번째 원칙은 유사한 작은 개체는 그룹으로 인식됩니다., 동일한 작은 객체의 여러 인스턴스가 아닌 유사성은 모양, 색상, 음영 또는 다른 품질을 기반으로 할 수 있습니다. 이 원칙은 패턴 디자인 뿐만 아니라 많은 기하학적이고 최소한의 로고 디자인.
예를 들어이 그림은 별도의 삼각형 대신 원형 로고로 표시됩니다. 독수리 바닥의 삼각형 모양은 우리가 그 모양이 또한 이미지의 일부라고 생각하게합니다..
당신은 아마이 법을 무의식적으로 활용하여 몇 가지를 만들 수도 있습니다., 동일한 크기의 추천 콘텐츠 상자 귀하의 웹 사이트. 특정 콘텐츠 요소가 중요하거나 유사한 정보를 공유하고 있음을 보여주고 싶다면, 그 목적을 위해 특정한 모양을 만들어라.. 이렇게하면 사용자는 특정 모양을 특정 정보 영역과 즉시 연관시킵니다.
근접 법
이 법에 따르면 가까이있는 물건 서로에게 같은 그룹으로 간주되는. 같은 사각형을 가까운 옆에서 서로 근접하여 렌더링 할 때 그룹화 감각이 생깁니다..
이 원칙은 최근 웹에서 특히 큰 작업에 사용되었습니다. 콘텐츠 루프, 예 : 블로그 및 웹샵.
국경이나 배경없이 제목, 추천 이미지, 메타 데이터 및 발췌 부분을 함께 그룹화 할 수 있습니다. 디자인에서 불필요한 선과 색상을 제거하여 더욱 단순하고 완벽하게 이해할 수 있습니다..
귀하의 편의를 위해 Wikipedia도 인용 할 것입니다 :
좋은 양식의 법칙
Pragnanz 또는 Good Gestalt의 법칙으로도 알려져있는이 법칙에 따르면이 법칙에 따라 객체를 그룹화하는 경향이 있습니다. 단순하고 규칙적이고 질서 정연한 패턴을 형성한다.. 우리의 마음은 복잡하고 지각 적으로 어려운 형태를 단순히 이해할 수있는 형태의 여러 그룹으로 분리하려고 시도합니다. 이것은 간결함의 중요성.
이것은 또한 성공의 이유 중 하나입니다. 그리드 기반 디자인 그리고 이것은 테이블과 프레임 기반 (다행히도 디자인의 어두운 시대의 것들) 웹 구조가 그렇게 대중적으로 만들어졌습니다.
이 원칙을 염두에두면 위의 다른 법칙을 통해 염두에 두어야 할 복잡한 형태의 콘텐츠 블록으로 채워진 웹 사이트가 만들어지지 않을 것입니다. 아직도, 당신은 할 수있다. 흥미로운 방식으로 개체를 그룹화하십시오., 예 : 다이아몬드 또는 연 모양으로, 그것들은 여전히 정돈되고 간결한 모양으로 인식되기 때문에.
색상 이론, 인식 및 사용법
색상의 시각 및 인식은 다음과 같습니다. 크게 주관적인 ~에 근거하여 시청자의 두뇌 반응 다채로운 물체 나 모양으로 반사되는 빛의 물결 규칙은 다른 사람들이 시각 장애가 없어도 같은 색깔의 물건을 볼 수 있다는 것입니다 (드레스를 기억할 수도 있습니다).
색상 속성
여전히 색상의 세 가지 객관적인 속성이 있습니다. 색조, 값 과 강렬.
색조 색상환 또는 무지개에 표시된 색상의 이름입니다. 기본 색조는 적색, 주황색, 황색, 녹색, 파란색 및 보라색 6 개 (또는 대화 상대에 따라 12 개) 있습니다..
노랑, 파랑 및 빨강 행성, 오렌지, 초록, 보라색은 반성 색조; 또한있다 제삼기 2 개의 1 차 및 2 차 색상 (예를 들어, 황록색 또는 적자색)의 직접 혼합물 인 색상,.
값 색상의 밝기 또는 어둡기. 높은 가치 밝은 색 또는 가치가 낮은 어두운 색.
강렬 는 밝기 또는 어둠 색깔의; 즉, 동일한 색상과 동일한 값을 가진 색상은 밝기를 변경하고 다른 색상 출력을 만들어 계속 흐리게하거나 밝게 만들 수 있습니다..
모든 색상의 가장 높은 강도는 색상환에 표시되는 색상이며 (아래 참조) 가장 낮은 색상은 회색입니다..
색상 대비
위에서 언급 한 유사성의 법칙을 참조하면, 지각 자의 마음은 비슷하거나 다른 속성 (종종 색상)을 기반으로하는 작은 객체 그룹을 만듭니다.
웹 사이트에 색상 팔레트를 선택했을 때, 특히 최소한의 접근 방법을 택하거나 텍스트가 많은 콘텐츠 영역을 디자인하는 경우 (예 : 블로그 또는 광고를 다른 색 대비를 알고 있어야한다. 최상의 결과를위한 적절한 색상 값을 찾는 데 도움이 될 수 있습니다..
요하네스 이튼 (Johannes Itten)에 따르면 7 가지 색상 대조가 있습니다..
1. 색조의 대비
전체 강도에서 노란색, 빨간색 및 파란색 직접적이고 생생한 대조이다. 2 차 색상은 덜 선명한 구분을하지만 3 차 색상과 마찬가지로 여전히 작동합니다. 기본 색상과 마찬가지로 멋진 결과.
2. 보완 대비
서로 섞여서 중성 회색을 만들면 두 색상이 서로 보완 적으로 대조됩니다. 이것들은 또한 이상한 쌍. 인접한 경우 생생함과 강도를 향상 시키며 함께 섞으면 서로 취소됩니다. 모든 색상은 단 하나만 보완됩니다. 컬러 휠에서 쌍은 대각선으로 서로 마주 보게됩니다..
3. 명암 대조
단색 웹 사이트를 실험하고 싶다면, 동일한 색조의 다른 값 사용 멋진 결과를 얻을 수 있습니다. 최소한의 웹 디자인에서 자주 사용되는 경우 사용자에게 테마 색상 옵션을 제공하려는 경우 밝고 어두운 대비를 기반으로 훌륭한 결과를 얻을 수도 있습니다. 이 대비는 그레이 스케일 디자인에도 사용됩니다..
남은 4 가지 색상 대조를 추구하려면 여기에서 찾을 수 있습니다..
팔레트 만들기 및 대조 확인
이론을 아는 것은 훌륭합니다. 당신의 아이디어를 해석하는 것은 또 다른 일입니다. 그래도 걱정할 필요는 없습니다. 웹은 색상을 저글링하는 데 필요한 큰 지원을 제공합니다. 색상 대비 규칙을 기반으로 맞춤 색상 패턴을 만드는 데 도움이되는 다양한 도구가 있습니다. Paletton 또는 Adobe Kuler.
웹용으로 Jonathan Snook 사이트에서 webAIM에서 사용하기로 선택한 대비를 확인하거나 The Paciello Group의 Color Contrast Analyzer 인스턴스를 다운로드 할 수 있습니다.
결론
새로운 테마로 작업을 시작하거나 기존 테마를 수정하기 시작할 때, 컨텐츠의 구성 원리에 대해 생각해보고 디자인에 최종 형태와 색조를 줄 때 색상 규칙을 고려해야합니다.
편집자 주: 이 게스트 포스트는 Hongkiat.com을 위해 작성되었습니다. Marton Fekete. Marton은 최근 WordPress에 매달린 헝가리 사이트 개발자입니다. 그는 자유 시간에 RPG를 즐기는 것을 좋아하는 재 설계 전문가이자 프리랜서 콘텐츠 작가입니다..
