디자인 입문 강의 5주차 숙제(디자인 원칙 사례 찾아보기)

이번 강의는 디자인 원칙과 종류들에 대해 다룬다.

숙제를 하기에 앞서 디자인 원칙의 정의 정리와 어떤 종류들이 있는지 정리를 먼저 하려고 한다.

이번 강의 내용에서는 많은 내용의 원칙을 설명하고 있어 길지만 세세하게 정리를 해보았다.

 

 

 디자인 원칙이란? 

인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것 

 

 

 디자인 원칙의 종류 

• 게슈탈트 심리학
• UX 비주얼 디자인 원칙
• UX/UI 심리학 법칙
• 기업의 디자인 원칙

 

 게슈탈트 심리학이란? 

(착시현상과 비슷하다)

사람은 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론이다.

사람의 뇌는 대상을 있는 그대로 받아들이지 않고 형태의 정보 중 필요 없는 것은 지우고 기억하기 쉬운 상태로 정리해 받아들인다.

유사성, 근접성, 폐쇄성, 연속성, 공통성의 원리들이 있다.

 

 1. 유사성의 원리 The law of similarity 

크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향

• 모양을 이용한 유사 관계 형성
• 크기를 이용한 유사 관계 형성
• 색상을 이용한 유사 관계 형성
• 방향을 이용한 유사 관계 형성

 

 

 2. 근접성의 원리 The law of proximity 

가까운 것끼리 묶어서 지각하려는 경향

 

 

 3. 폐쇄성의 원리 The law of closure 

공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향

• 도형의 일부가 끊어져 있거나, 이어져 있지 않더라도 완벽한 형태로 인식한다.

• 이미지의 일부가 잘려있어도 폐쇄성의 원리를 이용해 옆으로 계속 요소들이 이어질 것이라고 추측이 가능하다.

 

 

 4. 연속성의 원리 The law of continuance 

연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향

• 사람은 어떤 요소가 방향성을 가지고 연속되어 있을 때 편안함을 느낀다.
• 직선이나 곡선을 따라 배열된 대상을 하나의 단위로 인식한다.

 

 

 5. 공통성의 원리 The law of common fate 

같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향

• 모양, 색상 등에 관계없이 함께 움직이거나 바뀌는 요소가 더 관련 있다고 느낀다.

• 이 원리는 주로 모션 그래픽에서 자주 사용된다.

 

 

 UX 비주얼 디자인 원칙이란? 

UX에 영향을 끼치는 시각 디자인의 원칙을 정리한 것이다.

스케일, 시각적 위계, 균형, 대비의 원칙이 있다.

 

 1. 스케일 Scale 

상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것을 말한다.

• 가장 중요한 요소는 덜 중요한 요소보다 크게 표현한다.
• 크기가 크면 더 주목받을 가능성이 높다.
• 시각적으로 보기 좋은 디자인은 일반적으로 3가지 이하의 크기를 사용한다.

 2. 시각적 위계 Visual hierarchy 

중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것을 말한다.

• 시각적 위계는 크기, 색상, 간격, 배치 등을 통해 표현할 수 있다.
• 사용자가 화면에서 정보를 찾는 데 어려움을 겪는 경우 명확한 시각적 위계가 없을 가능성이 높다.
• 명확한 시각적 위계를 만들기 위해서는 2~3개 정도의 텍스트 크기를 사용해야 한다.
• 위계의 낮음, 중간, 높음에 따라 요소의 크기를 large, medium,small로 분류한다.
• 중요하다고 생각되는 요소는 채도가 높고 색상 대비가 크게, 덜 중요한 요소에는 채도가 낮고 색상 대비가 크지 않도록 적용한다.

 3. 균형 Balance 

디자인 요소 간에 적당한 배열이나 비율을 주는 것이다.

• 시소처럼 디자인 요소 간의 균형을 맞추는 것이다.
• 수직이나, 수평의 가상 축에 비슷한 양의 시각적 정보가 배치되도록 하는것이다. 이때 꼭 대칭이 아니어도 괜찮다.
• 대칭(안정적인 느낌을 줄때), 비대칭(신선한 느낌을 줄 때), 방사형(시선을 중앙에 집중시키고 싶을 때)

 4. 대비 Contrast 

• 특정 부분을 사용자에게 돋보이게 하고 싶을 때 사용한다.
• 크기나 색상을 사용해 두 디자인 요소 간에 뚜렷한 차이를 준다.
• 주로 명암의 차이를 주거나 색상의 차이를 주는 방법을 많인 사용한다.
• 주의해야 할 것은, 덜 중요한 텍스트의 강조를 줄이기 위해 배경과의 명도 차이가 너무 많이 나면 안 된다. (흐릿한 글자는 사용성을 떨어트리기 때문)

 

 UX/UI 심리학 법칙이란? 

사람이 어떻게 행동하고, 왜 그런 행동을 하는지를 설명한다.

정량적, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거가 되어준다.

명확한 이론적 근거를 바탕으로 주장할 수 있고, 팀원들을 설득할 무기로 사용된다.

심리학의 법칙에는 10가지가 있다.

1. 제이콥의 법칙
   • 사용자는 새로운 제품을 사용할 때도 자신이 이미 알고 있는 익숙한 제품과 같은 방식으로 작동하길 원한다.
2. 피츠의 법칙
   • 터치 대상에 도달하는 시간은 거리와 크기와 함수 관계에 있다.
3. 힉의 법칙
   • 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다.
4. 밀러의 법칙
   • 보통 사람은 작업 기억에 7(±2)개의 항목밖에 저장하지 못한다.
5. 포스텔의 법칙
   • 자기 자신에게는 엄격하고, 남의 것을 받아들일 때는 너그럽게 해야 한다.
6. 피크엔드 법칙
   • 인간의 경험은 전체 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
7. 심미적 사용성 효과
   • 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
8. 폰 레스토프 효과
   • 비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
9. 테슬러의 법칙
   • 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
10. 도허티 임계
    • 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션 하면 생산성이 급격히 높아진다.

 

 기업의 디자인 원칙이란? 

기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드이다.

 

 

 숙제 

이번 숙제는

1. 게슈탈트 심리학에서 3가지를 골라 실제 사례를 찾아보는 것,

2. UX 비주얼 디자인 원칙에서 3가지를 골라 실제 사례를 찾아보는 것,

3. 온보딩, 로딩, 검색, 회원가입, 리스트 중 하나를 골라 좋은 사례의 제품 화면을 근거를 대며 설명하는 것이다.

 

 

1. 먼저 쿠팡에서 발견한 게슈탈트 심리학의 유사성의 원리, 폐쇄성의 원리, 공통성의 원리를 소개한다.

• 유사성의 원리를 사용하여 비슷한 사이즈의 컴포넌트로 하나의 카테고리를 만든것을 알 수 있다.
• 폐쇄성의 원리를 사용하여 화면상에 다 보이지는 않지만 옆에 다른 이미지가 나올것을 알 수 있다.
• 공통성의 원리를 사용하여 같은 방향으로 움직이는 이미지들이 하나의 카테고리라는 것을 알 수 있다.

 

 

 

 

 

2. 당근에서 발견한 UX 비주얼 원칙의 시각적 위계, 대비, 스케일을 소개한다.

• 시각적 위계를 이용하여 중고 물품의 사진, 내용, 판매자 정보와 가격 순으로 볼 수 있다.
• 대비를 이용하여 글쓰기 버튼을 빠르게 찾을 수 있다.
• 스케일을 이용하여 제일 중요한 선택 지역을 먼저 확인 할확인할 수 있고, 밑에 다른 요소들을 후에 확인할 수 있다.

 

 

 

 

3. 애플 공식 홈페이지의 메인 화면을 분석해보았다.

여러 가지 디자인 원칙을 사용하며 사용자가 페이지를 보았을 때 많은 정보가 있음에도 불구하고 정리된 듯한 느낌을 받을 수 있다. 대칭이 아닌 비대칭을 이용해 페이지를 보았을 때 지루하지 않고 오히려 들어있는 요소들 하나하나에 집중하기 좋다.