2020년에도 여전히 유효한 8가지 웹 디자인 원칙
게시 됨: 2021-07-22웹사이트 디자인은 생각보다 전환에 중요합니다. 세상의 모든 전환 촉진 전략을 구현할 수 있지만 웹 디자인이 쓰레기처럼 보인다면 별로 도움이 되지 않을 것입니다.
디자인은 디자이너만 하는 것이 아닙니다. 디자인은 마케팅입니다. 디자인은 귀하의 제품이며 작동 방식입니다. 웹 디자인의 원리에 대해 더 많이 배울수록 더 나은 결과를 얻었습니다.
무료 UX 및 사용성 과정
원칙에서 실천으로 나아가십시오. UX 및 사용성에 대한 무료 과정을 시청하세요.
다음은 당신이 알고 따라야 할 8가지 효과적인 웹 디자인 원칙 입니다.
1. 시각적 계층
삐걱거리는 바퀴는 기름을 흡수하고 눈에 띄는 비주얼은 주의를 끕니다. 시각적 계층 구조는 좋은 웹 디자인의 가장 중요한 원칙 중 하나입니다. 그것은 인간의 눈이 보는 것을 인식하는 순서입니다.
운동. 중요도 순으로 서클의 순위를 매기십시오.
이러한 원에 대해 아무것도 모르고, 당신은 그 순위를 할 수 있었다
용이하게. 이것은 시각적 계층 구조입니다.
웹사이트의 특정 부분(양식, 클릭 유도문안, 가치 제안 등)은 다른 부분보다 더 중요하며 덜 중요한 부분보다 더 많은 관심을 받기를 원합니다.
웹 사이트 메뉴에 10개의 항목이 있는 경우 모두 똑같이 중요합니까? 사용자가 어디를 클릭하기를 원하십니까? 중요한 링크를 더 눈에 띄게 만드십시오.
계층은 크기에서만 오는 것이 아닙니다. Amazon은 색상을 사용하여 "장바구니에 추가" 및 "지금 구매" 클릭 유도문안 버튼을 더 눈에 띄게 만듭니다.
비즈니스 목표로 시작
비즈니스 목표에 따라 웹사이트에서 요소의 순위를 지정해야 합니다. 구체적인 목표가 없으면 우선순위를 정할 수 없습니다.
여기 예가 있습니다. Williams-Sonoma 웹사이트에서 가져온 스크린샷입니다. 그들은 야외 조리기구를 판매하려고 합니다.
가장 큰 눈길을 사로잡는 것은 거대한 고기 조각(보고 싶게 만드는 것)이고, 그 다음으로 헤드라인(무엇인지 말해보세요), 행동 유도(get it)가 뒤따릅니다. 4위는 헤드라인 아래의 텍스트 단락으로 이동합니다. 다섯 번째는 무료 배송 배너이며 상단 탐색은 마지막입니다.
이것은 웹 디자인의 시대를 초월한 원칙인 시각적 계층 구조입니다.
운동. 웹을 서핑하고 시각적 계층 구조에서 의식적으로 요소의 순위를 지정하십시오. 그런 다음 귀하의 사이트를 살펴보십시오. 중요한 것(예: 방문자가 찾는 핵심 정보)이 계층 구조에서 너무 아래에 있습니까? 더 두드러지게 만드십시오.
2. 신성한 비율
황금비는 마법의 숫자 1.618(φ)입니다. 황금 비율로 정의된 비율을 사용하는 디자인은 미학적으로 보기 좋습니다.
다음은 피보나치 수열입니다. 각 항은 이전 두 항(0, 1, 1, 2, 3, 5, 8, 13, 21 등)의 합입니다. 흥미로운 점은 겉보기에 관련이 없어 보이는 두 가지 주제가 정확히 동일한 숫자를 생성한다는 것입니다 .
황금 비율은 다음과 같습니다.
많은 예술가와 건축가는 황금 비율을 근사하기 위해 비율을 사용합니다. 유명한 예는 고대 그리스에 지어진 파르테논 신전입니다.
황금 비율이 웹 디자인에 적합합니까? 물론이지. 트위터는 다음과 같습니다.
다음은 몇 년 전 Twitter의 크리에이티브 디렉터 Doug Bowman이 한 말입니다. 디자인 선택은 우연이 아니었습니다.
따라서 레이아웃 너비가 960px인 경우 1.618(=593px)로 나눕니다. 콘텐츠 영역의 너비는 593픽셀이고 사이드바는 367픽셀이어야 합니다. 웹사이트 높이가 760px인 경우 470px 및 290px 청크로 분할할 수 있습니다(760/1.618=~470).
더 자세히 알고 싶다면 황금 비율을 타이포그래피에 적용하는 방법에 대한 이 기사를 확인하십시오.
3. 힉스의 법칙
힉스의 법칙은 선택이 추가될 때마다 결정을 내리는 데 필요한 시간이 늘어납니다.
식당에서 수없이 경험했습니다. 다양한 메뉴가 있어 저녁 식사를 선택하기가 어렵습니다. 두 가지 옵션이 제공된다면 결정을 내리는 데 훨씬 더 적은 시간이 소요될 것입니다. 이것은 선택의 역설과 유사합니다. 더 많은 선택을 제공할수록 아무것도 선택하지 않기가 더 쉽습니다. 두 원칙 모두 웹 디자인에 적용됩니다.
웹사이트에서 사용자가 선택할 수 있는 옵션이 많을수록 사용하기가 더 어려워집니다(사용하는 경우). 우리는 선택을 제거해야 합니다. 더 나은 웹 디자인을 만들려면 디자인 프로세스 전반에 걸쳐 주의를 산만하게 하는 옵션을 제거하는 데 집중하세요.
무한한 선택의 시대에 사람들은 더 나은 필터가 필요합니다! 많은 수의 제품을 판매하는 경우 더 나은 의사 결정을 위해 더 나은 필터를 추가하십시오. 와인 라이브러리는 엄청난 양의 와인을 판매합니다.
그들은 필터를 잘 사용합니다.
4. 피트의 법칙
Fitt의 법칙은 목표 영역으로 이동하는 데 필요한 시간(예: 버튼 클릭)이 목표 까지 의 거리 와 목표 크기의 함수라고 규정합니다. 즉, 물체가 클수록 가까울수록 사용하기 쉽습니다.
Spotify를 사용하면 다른 버튼보다 "재생"을 더 쉽게 누를 수 있습니다.
휴대전화 앱에서도 재생 버튼을 누르기 쉬운 위치에 배치했습니다.
더 크다고 항상 더 좋은 것은 아닙니다. 화면의 절반을 차지하는 버튼은 좋은 생각이 아니며 수학적인 연구가 필요하지 않습니다. 그럼에도 불구하고 Fitt의 법칙은 이진 로그입니다. 이는 개체의 사용성 예측 결과가 직선이 아닌 곡선을 따라 진행된다는 것을 의미합니다.
작은 버튼은 20% 크기 증가가 주어졌을 때 훨씬 더 쉽게 클릭할 수 있는 반면, 매우 큰 개체는 동일한 20% 크기 증가가 주어졌을 때 사용성 면에서 동일한 이점을 제공하지 못할 것입니다.
이는 목표 크기 의 규칙 과 유사합니다 . 버튼의 크기는 예상 사용 빈도에 비례해야 합니다. 마우스 추적을 사용하여 사람들이 가장 많이 사용하는 버튼을 확인한 다음 인기 있는 버튼을 더 크게(누르기 쉽게) 만들 수 있습니다.
사람들이 채우기를 원하는 양식이 있다고 가정해 보겠습니다. 양식 끝에 "제출" 및 "재설정"(필드 지우기)이라는 두 개의 버튼이 있습니다.
99.9999%가 "제출"을 누르기를 원합니다. 따라서 버튼은 '재설정'보다 훨씬 커야 합니다.
5. 3분의 1의 법칙
디자인에 이미지를 사용하는 것이 좋습니다. 시각 자료는 텍스트보다 훨씬 빠르게 아이디어를 전달합니다.
최상의 이미지는 3분의 1 법칙을 따릅니다. 이미지는 동일한 간격의 두 개의 수평선과 두 개의 동일한 간격의 수직선에 의해 9개의 동일한 부분으로 분할되어야 합니다. 중요한 구성 요소는 이러한 선을 따라 또는 교차점에 배치되어야 합니다.
아래에서 오른쪽 이미지가 어떻게 더 흥미로운지 볼까요? 이것이 3분의 1 법칙입니다.
아름답고 큰 이미지를 사용하면 좋은 웹 디자인에 기여합니다. 이미지가 더 흥미롭다면 웹사이트가 더 매력적일 것입니다.
6. 게슈탈트 설계 법칙
게슈탈트 심리학은 마음과 뇌의 이론입니다. 그 원리는 인간의 눈은 개별 부분을 인식하기 전에 사물 전체를 본다는 것입니다.
내가 의미하는 바는 다음과 같습니다.
개가 구성되어 있는 각각의 검은 반점에 초점을 맞추지 않고 어떻게 개를 볼 수 있는지 알 수 있습니까? 게슈탈트주의의 창시자인 쿠르트 코프카는 그것을 이렇게 설명했습니다. “전체는 부분과 독립적으로 존재합니다.”
웹 디자인과 관련하여 사람들은 머리글, 메뉴, 바닥글 등을 구별하기 전에 웹사이트 전체를 먼저 봅니다.
사람들이 어떤 것을 인식하는 방식을 예측할 수 있는 8가지 소위 게슈탈트 설계 법칙이 있습니다. 각각이 웹 디자인과 어떻게 관련되어 있는지는 다음과 같습니다.
1. 근접의 법칙
사람들은 공간에서 함께 가까운 것들을 함께 그룹화합니다. 그것들은 하나의 지각된 대상이 됩니다.
효과적인 웹 디자인을 위해서는 어울리지 않는 것들이 하나로 인식 되지 않도록 해야 합니다 . 마찬가지로 관련 디자인 요소(탐색 메뉴, 바닥글 등)를 그룹화하여 전체를 구성한다는 것을 전달합니다.
Craigslist는 이 법칙을 사용하여 "판매용"에 속하는 하위 범주를 쉽게 이해할 수 있도록 합니다.
2. 유사성의 법칙
우리는 비슷한 것들을 함께 그룹화합니다. 이 유사성은 모양, 색상, 음영 또는 기타 특성의 형태로 발생할 수 있습니다.
여기에서 우리는 검은 점들을 한 그룹으로, 흰 점들을 다른 그룹으로 묶습니다. 왜냐하면, 음, 같은 색의 점들은 서로 비슷해 보이기 때문입니다.
웹 디자인에 적용하면 어떤 모습일까요? Mixpanel은 사례 연구에 대한 링크에 유사한 디자인을 사용하므로 이를 단일 그룹으로 보고 각각이 서로를 강화합니다.
3. 폐쇄의 법칙
우리는 완전성을 추구합니다. 닫히지 않은 모양이나 그림의 일부가 누락되면 우리의 지각이 시각적 공백을 채웁니다. 아래 그래픽에는 두 가지 형태가 실제로 존재하지 않지만 우리는 원과 사각형을 봅니다.
닫힘의 법칙이 없으면 길이가 다른 다른 선을 볼 수 있습니다. 그러나 폐쇄의 법칙은 선을 결합하여 전체 모양을 형성합니다.
폐쇄의 법칙을 사용하면 로고나 디자인 요소를 더 흥미롭게 만들 수 있습니다. 좋은 예는 1961년 Peter Scott 경이 디자인한 World Wide Fund For Nature 로고입니다.
4. 대칭의 법칙
마음은 대상을 대칭으로 인식하여 중심점을 중심으로 형성됩니다. 물체를 짝수의 대칭 부분으로 나누는 것은 지각적으로 즐겁습니다.
연결되지 않은 두 개의 대칭 요소를 볼 때 마음은 지각적으로 연결하여 일관된 모양을 형성합니다.
위의 이미지를 보면 6개의 개별 브래킷이 아닌 3쌍의 대칭 브래킷을 관찰하는 경향이 있습니다.
사람들은 비대칭적인 것보다 대칭적인 모습을 선호합니다. 이미지와 텍스트의 교대 열, 중앙 슬라이더 및 3열 목록이 Trello 홈페이지 디자인의 시각적 즐거움을 더합니다.
5. 공동운명의 법칙
우리는 물체를 경로를 따라 움직이는 선으로 인식하는 경향이 있습니다. 우리는 움직임의 경향이 같으므로 같은 경로에 있는 물체를 함께 그룹화합니다.
정신적으로 사람들은 모두 같은 방향을 가리키기 때문에 어딘가를 가리키는 막대기나 손을 함께 그룹화합니다. 사이트 디자인에서 이를 사용하여 사용자의 관심을 유도할 수 있습니다(예: 가입 양식, 가치 제안 등).
예를 들어, 점 배열이 있고 점의 절반은 위쪽으로 이동하고 나머지 절반은 아래쪽으로 이동하는 경우 위쪽으로 이동하는 점과 아래쪽으로 이동하는 점을 두 개의 별개 단위로 인식합니다.
6. 연속성의 법칙
사람들은 선이 정해진 방향을 계속 유지하는 것으로 인식하는 경향이 있습니다. 물체(예: 선) 사이에 교차점이 있을 때 우리는 두 개의 선을 중단되지 않은 두 개의 단일 개체로 인식하는 경향이 있습니다. 자극은 겹치더라도 뚜렷하게 유지됩니다.
Fixel은 이것을 사용하여 얼굴을 바이오스에 연결합니다.
도형과 기초 또는 선한 게슈탈트의 법칙과 같은 다른 게슈탈트 법칙도 있습니다. (오브젝트가 올림픽 링과 같이 규칙적이고 단순하며 질서 있는 패턴을 형성하는 경우 지각적으로 함께 그룹화되는 경향이 있습니다.) 그러나 위에서 다룬 것들은 웹 디자인을 위한 최고의 지침 원칙입니다.
7. 여백과 깔끔한 디자인
공백("음수 공간"이라고도 함)은 웹 페이지에서 "비어 있는" 부분입니다. 그래픽 사이의 공간, 여백, 여백, 열 사이의 공간, 문자 줄 사이의 공간 또는 시각적 개체입니다.
단순히 "빈" 공간이 아니라 웹 디자인의 중요한 요소입니다. 그 안에 있는 개체가 존재할 수 있습니다. 공백은 정보, 타이포그래피, 색상 또는 이미지에 대한 계층 구조의 사용에 관한 것입니다.
공백이 없고 텍스트나 그래픽으로 가득 찬 페이지는 바쁘거나 어수선해 보일 위험이 있습니다. 일반적으로 읽기가 어렵습니다. (사람들은 귀찮게 하지도 않습니다.) 이것이 바로 단순한 웹사이트가 과학적으로 더 나은 이유입니다.
적절한 양의 여백은 웹사이트를 "깨끗하게" 보이게 합니다. 깔끔한 디자인은 명확한 메시지를 전달하는 데 중요하지만 콘텐츠가 적다는 의미는 아닙니다.
깨끗한 디자인은 그 안에 있는 공간을 최대한 활용합니다. 깨끗한 사이트 디자인을 만들기 위해서는 여백을 현명하게 사용하여 명확하게 소통하는 방법을 알아야 합니다. Made.com은 공백을 잘 사용합니다.
여백을 잘 활용하여 메인 메시지와 비주얼에 집중하기 쉽고, 본문은 읽기 쉽습니다. 일반적으로 여백은 우아함과 정교함을 촉진하고 가독성을 높이고 집중을 유도합니다.
여백과 단순성에 대해 자세히 알아보세요.
8. 오컴의 면도날
여러 가지 상충되는 가설이 주어졌을 때 Occam의 면도날은 가장 적은 가정을 하고 따라서 가장 간단한 설명을 제공하는 것을 선택하도록 촉구합니다. 웹 디자인의 맥락에서 Occam의 Razor는 가장 단순한 솔루션이 일반적으로 가장 좋다고 주장합니다.
Angelpad 경험에 대한 게시물에서 Pipedrive 팀은 다음과 같이 씁니다.
Angelpad 팀과 멘토들은 여러 가지 방법으로 우리에게 도전했습니다. "홈 페이지에 너무 많은 항목이 있습니다."는 처음에는 동의하지 않았지만 테스트하게 되어 기쁩니다. 그리고 우리가 실제로 틀렸다는 것이 밝혀졌습니다. 콘텐츠의 80%를 제거하고 홈페이지에 가입 버튼 하나와 자세히 알아보기 링크 하나를 남겼습니다. 가입 전환율이 300% 증가했습니다.
외모뿐만 아니라 작동 방식도 중요합니다. 37Signals와 같은 일부 회사는 "단순"을 비즈니스 모델로 전환했습니다. 다음은 설립자 Jason Fried가 쓴 책 Rework 에서 인용한 내용입니다.
많은 사람들이 우리 제품이 경쟁 제품보다 성능이 낮기 때문에 우리를 싫어합니다. 우리가 그들의 애완 동물 특징을 포함하기를 거부하면 그들은 모욕을 당합니다. 그러나 우리는 우리 제품이 하는 일만큼 우리 제품이 하지 못하는 일에 대해 자부심을 느낍니다. 우리는 대부분의 소프트웨어가 너무 복잡하다고 생각하기 때문에 단순하게 디자인합니다. 너무 많은 기능, 너무 많은 버튼, 너무 많은 혼란.
단순하고 미니멀한 디자인은 디자인이 작동한다는 것을 보장하지 않습니다. 그러나 내 경험에 따르면 단순한 것이 항상 반대보다 낫습니다. 따라서 우리는 웹 디자인을 단순화하기 위해 노력해야 합니다.
결론
효과적인 웹 디자인과 예술은 같지 않습니다. 그러나 많은 심리적 및 디자인 원칙이 웹사이트에 적용됩니다. 이러한 법률의 관련 측면을 레이아웃, 타이포그래피 및 이미지에 적용하여 훌륭한 웹사이트를 디자인할 수 있습니다.
사용자 와 비즈니스 목표를 위한 디자인. 좋은 웹 디자인은 미학적으로 만족스럽고 재정적으로 보람 있는 결과를 제공할 수 있습니다.