모든 프로젝트를위한 10 가지 웹 디자인 계명

/2015-08-26 10:25:11/
Bellagrace
/프로그램들/

웹 사이트 디자인과 관련하여 규칙이 있습니까? 거의 모든 웹 디자인 프로젝트에 적용되는 규칙이 있습니다.이를 "웹 디자인 계명"이라고합니다.

웹 사이트의 크기에 상관없이 이러한 규칙은 훌륭한 디자인의 기초입니다. 이 기본 지침을 따르고 시작하는 모든 프로젝트에 대한 생각의 일부로 만들면 설계자가 넘어 질 수있는 많은 함정을 피할 수 있습니다!

1. 너는 일관되어야한다

사용자가 쉽게 상호 작용할 수 있도록 디자인하기

일관된 디자인은 사용하기 쉽고 디자인을 이해합니다. 시각적 디자인뿐만 아니라 사용자 참여 및 작업도 단일 디자인 전체에서 모양과 용도가 비슷해야합니다.

즉, 버튼의 색상은 동일하고 동일한 호버 상태를 사용하여 사용자가 상호 작용하는 방법을 알고 헤드 라인의 크기는 동일하며 디자인 전체에서 동일한 서체를 사용하고 색상과 같은 요소는 식별 가능하고 연관된 팔레트를 따릅니다. 브랜드.

다른 시각적 요소는 아이콘이나 사진, 비디오 또는 일러스트레이션과 같은 요소의 스타일 및 사용 계획과 함께 일관된 스타일을 따라야합니다. 디자인에는 전체적인 미학과 일치하는 복사 블록에 사용되는 음성이 있어야합니다.

이러한 일관성 요소는 전체적인 유용성에 기여하여 사용자가 가능한 한 쉽게 디자인 할 수 있도록합니다.

2. 공백을 사용해야합니다

요소 주위에 추가 공간이 있으면 분리가 가능하고 쉽게 읽을 수 있습니다.

모든 단일 요소를 스크롤 위의 공간에 넣을 필요는 없습니다. 공백을 사용하여 리듬과 흐름을 설정하고 시각적 계층을 만들고 사용자가 디자인을 쉽게 이동할 수 있도록합니다.

내용이 좋으면 스크롤됩니다.

공백은 실제로 화면 아래로 눈을 당겨 사용자 작업을 장려하는 데 도움이 될 수 있습니다.

화면 크기가 작아 질수록 공백이 더 중요합니다. 요소 주위에 추가 공간이 있으면 분리가 가능하고 쉽게 읽을 수 있습니다. (버튼을 쉽게 누르는 데 약간의 여유 공간이 얼마나 유익 할 수 있는지 생각해보십시오.)

디자인에서 공백을 어디에 포함 시킬지 잘 모르시겠습니까? 여기에서 시작하십시오 :

주변 버튼 또는 기타 대화 형 요소
쉽게 읽을 수 있도록 유형의 줄 사이의 줄 간격
텍스트 블록에 포함 된 사진의 줄 바꿈과 같이 구분하기 위해 요소 사이의 색조
양식 필드에서 모바일 화면을 쉽게 탭할 수 있습니다.
사용자가 집중할 요소 주변

3. 그리드를 사용해야합니다

그리드는 사용자 경험의 기초입니다. 그리드를 사용하여 디자인하면 최종 웹 사이트가 더 정확하고 일관되며 시각적으로 이해하기 쉬운 순서로 요소가 배치됩니다.

가장 잘 알려진 웹 디자인 그리드는 요소를 정렬하기위한 12 열 세로 열 그리드 일 수 있지만 그리드는 수평 및 수직입니다.

그리드는 디자인 프로세스에서만 볼 수있는 요소이며 요소의 배치를 찾거나 구성 개요를 작성하는 데 문제가있는 경우 그리드는 전체 생명의 은인이 될 수 있습니다.

4. 사용자 패턴을 잊어서는 안됩니다

사용자는 특정 방식으로 작업을 수행하고 디자인에서 특정 작업을 기대합니다. 가능한 한 많은 성공을 거두려면 디자인에서 사람들이 디자인이 어떻게 작동하는지 정확하게 알 수 있도록 일반적으로 허용되는 사용자 패턴 (디자인 문제에 반복되는 솔루션)을 사용해야합니다.

일반적인 사용자 패턴은 다음과 같습니다.

이름 또는 이메일로 시작하여 "제출"으로 끝나는 양식의 정보 순서
탐색 메뉴 배치
전자 상거래 용 장바구니 아이콘의 위치 및 클릭 가능한 특성
알림 작동 방식
무엇보다도 검색 및 채팅 아이콘

UI 디자인 패턴에는 모든 유형의 디자인 상황에 대한 긴 사용자 패턴 목록이 있습니다.

5. UI 동작에서 유사성을 사용해야합니다

웹 사이트 디자인의 모든 요소는 동일한 유형의 다른 모든 요소와 같이 작동해야합니다. 이러한 요소는 시각적 정체성을 가져야 사용자가 자신이 무엇인지, 한 눈에 무엇을하는지 알 수 있습니다.

유사성에 대한 Gestalt 원칙을 준수하는 것이 디자인에 내장 될 수있는 사용자 인터페이스 동작이 너무 많습니다. 시각적 요소와 동작을 시각적으로 식별 할 수 있도록 그룹화하면 사용자에게 더 나은 전반적인 경험을 제공하는 데 도움이됩니다.

6. 타이포그래피를 잘 사용해야합니다

디자인에서 물러나서 멀리서 글자를 쉽게 읽을 수 있는지 확인하십시오.

타이포 그래퍼가 될 필요는 없지만 확실히 도움이됩니다.

좋은 디자인을 구성하는 많은 것들이 가독성과 가독성에 뿌리를두고 있습니다. 이러한 개념은 서체를 선택하고 사용하는 방법에 따라 다릅니다.

확실하지 않은 경우, serif 및 sans serif와 같은 간단한 서체 쌍을 선택하십시오. 디자인에서 물러나서 멀리서 글자를 쉽게 읽을 수 있는지 확인하십시오. 그런 다음 전화 화면과 같은 작은 캔버스에서 글자를보고 한 눈에 쉽게 읽을 수 있도록하십시오.

어두운 배경의 밝은 유형 또는 밝은 배경의 어두운 유형과 같이 고 대비 환경에서 유형을 사용하여 모든 단어를 쉽게 읽을 수 있도록하십시오.

7. 레티 나 스크린을 잊지 말아야합니다

가장 작은 화면에서도 거의 픽셀에 가까운 요소와 이미지를 렌더링 할 수 있습니다.

화면 크기에 관계없이 모든 것이 아름답게 렌더링되도록 이미지, 아이콘 및 기타 요소를 처리하는 방법을 고려해야합니다. 가능하면 벡터 형식을 사용하는 것이 이상적인 솔루션 일 수 있습니다. 이것이 SVG가 항상 인기를 얻고있는 이유 중 하나입니다.

일반적인 화면 크기에 맞는 해상도의 이미지가 없으면 사용하지 마십시오. 이미지가 불량하거나 픽셀 화 된 이미지보다 낫습니다.

8. 정직해야한다

귀하의 디자인은 소규모 비즈니스, 정보 또는 브랜드에 충실해야하며 귀하가하는 일에 투명해야합니다. 디자인이나 이미지를 훔치지 말고, 잘못된 키워드를 사용하여 트래픽을 유도하고 사용자의 콘텐츠에 대한 정보를 제공하십시오.

웹 클러 터가 많기 때문에 사용자는 진정한 디자인과 상호 작용하기를 원합니다. 사용자가 무언가를하거나 제품이나 서비스에 가입하도록 유도하거나 주제 나 정보에 대해 오도하는 것은 개인의 윤리 강령에 위배됩니다. 디자인에서 이것을 기대하는 프로젝트를 수행하지 마십시오.

9. 당신은 접근성을 무시해서는 안된다

웹은 가능한 많은 사람들이 사용할 수 있어야합니다. 그리고 디자인에 액세스하기가 어려운 것처럼 들리지만 생각만큼 복잡하지는 않습니다.

Google은 웹 사이트 접근성에 대한 훌륭한 가이드를 제공합니다.

일반적으로 사이트에 액세스 할 수 있다고 말하면 사이트의 컨텐츠를 사용할 수 있으며 사실상 모든 사람이 해당 기능을 운영 할 수 있음을 의미합니다. 개발자는 모든 사용자가 키보드, 마우스 또는 터치 스크린을보고 사용할 수 있으며 페이지 내용과 동일한 방식으로 상호 작용할 수 있다고 가정하기 쉽습니다. 이로 인해 일부 사람들에게는 효과가 있지만 간단한 성가심에서 다른 사람들의 쇼 스토퍼에 이르기까지 다양한 문제가 발생합니다.

따라서 접근성은 좁은 범위의 '일반적인'사용자가 아닌 사용자가 예상 한 것과 다르게 액세스하거나 상호 작용할 수있는 사용자의 경험을 말합니다. 특히, 일부 유형의 장애 또는 장애가있는 사용자와 관련이 있으며 해당 경험이 비 물리적이거나 일시적 일 수 있음을 명심하십시오.

크기, 대비 및 공간과 같은 우수한 디자인 원칙 중 많은 부분이 전체 액세스 가능성에 기여합니다.

WebAIM에는 디자인에 액세스 할 수 있는지 확인하는 데 도움이되는 검사 도구와 기타 도구가 있습니다. 점검표는 접근성과 관련된 네 가지 영역을 다룹니다. 디자인이인지 가능하고 작동 가능하며 이해 가능하고 강력합니까?