간단한 디자인을 만들기위한 7 가지 규칙

/2017-11-26 18:54:08/
Lujain
/제도법/

간단하고 바보처럼 유지하십시오. 이 개념은 미 해군이 KISS 원칙을 구현 한 1960 년으로 거슬러 올라갑니다. 이는 대부분의 시스템이 복잡하지 않고 단순 할 때 가장 잘 작동한다고 유지합니다. 거의 모든 디자인 프로젝트에서도 마찬가지입니다.

대부분의 그래픽 디자이너는 경력 초기에 KISS에 대해 배웁니다. 어떻게 할 수 있습니까? 단순한 디자인을 만드는 것은 생각보다 조금 더 복잡합니다. 다음은 디자인해야 할 7 가지 규칙으로, 모든 혼란을 없애고 아름답고 간단한 계정을 만드는 데 도움이됩니다.

디자인 리소스 살펴보기

1. 페이지 당 하나의 목표 설정

단순한 디자인의 시작은 프로젝트의 목표와 웹 사이트의 각 페이지에 대한 특정 목표로 시작됩니다. 각 페이지는 탐색 및 바닥 글을 제외한 사용자를 하나의 작업으로 안내해야합니다.

링크를 클릭하거나 양식에 정보를 입력하거나 비디오를 보거나 게임을하는 등 모든 것이 가능합니다. 그러나 모든 페이지는 단일 사용자 행동 또는 전환에 중점을 두어야합니다.

해야 할 일이 너무 많으면 사용자를 압도 할 수 있습니다. 어떤 조치를 취해야하는지 파악할 수 없어 바람직하지 않은 선택을 할 수 있습니다. 각 페이지가 사용자를 단일 목표로 이끌도록 디자인을 계획하십시오. 동일한 페이지에서 스크롤 위와 스크롤 아래의 모든 실행 가능한 버튼은 동일한 작업을 수행해야합니다. 이러한 일관성은 사용자가 자신의 사이트에있는 이유와해야 할 일을 이해하는 데 도움이됩니다. 이러한 선택의 단순성은 디자인을 쉽고 매력적으로 만듭니다.

2. 두 가지 유형의 가족에 충실

프로젝트에 세 가지 서체를 권장하는 많은 설계 지침이 있습니다. 두 가지 강력한 유형의 제품군으로 훨씬 더 간소화 할 수 있습니다.

일반 옵션과 굵은 체 또는 검은 색 옵션 사이에 대비가 여러 개인 가중치가 포함 된 유형 군을 찾으십시오. 더 화려하게 보이려면 대형 헤드 라인에 사용할 수있는 몇 가지 대체 문자가 포함 된 디스플레이 선택을 선택하십시오.

그런 다음 바디 서체와 디스플레이 서체를 혼합하여 일치시켜 전체 디자인에 적합한 글자 조합을 얻을 수 있습니다. 특정 웨이트 또는 스타일에 특정 용도로 더 많은 옵션을 선택한 경우와 마찬가지로 두 가지 유형의 패밀리를 사용하십시오.

이를 통해 관리하기 쉽고 시각적 일관성이있는 읽기 쉽고 사용하기 쉬운 타이포그래피 팔레트를 만들 수 있습니다.

3. 일관된 정렬 사용

왼쪽, 중앙 또는 오른쪽 – 원하는 정렬에 관계없이 디자인 전체에 적용됩니다. 여기에는 비슷하지는 않지만 그룹화에 적합한 텍스트 상자 및 요소와 같은 유사한 항목 정렬이 포함됩니다.

Adaptable은 홈페이지 슬라이더의 텍스트로이 작업을 훌륭하게 수행합니다. 이미지에 줄 수가 다른 텍스트에도 불구하고 각 제목은 클릭 유도 문안 버튼과 일치합니다. 요소 사이의 간격도 일정합니다.

또한이 일관된 정렬은 다른 헤드 라인 및 CTA 쌍과 함께 스크롤을 통해 전달됩니다.

정렬은 슬라이더의 흐름과 일치하며 보완 방향으로도 움직입니다. 텍스트 요소와 관련하여 가장 읽기 쉬운 왼쪽 및 가운데 정렬이 가장 일반적인 옵션입니다. 더 긴 텍스트의 경우 왼쪽 정렬이 선호되는 옵션입니다.

4. 계층 구성

사용자는 디자인을 살펴 보거나 무엇을 이동해야하는지 생각할 필요가 없습니다. 가장 단순한 시각적 구성도 고유 한 계층 구조를 가져야합니다.

그것은 지배적 인 시각으로 시작합니다. 이미지, 비디오 또는 텍스트 디스플레이 또는 첫 인상을 줄 수있는 기타 요소 일 수 있습니다.

그런 다음 디자인과 웹 사이트에서 통신하려는 내용을 사용자에게 알려주는 일종의 텍스트가 있어야합니다. 이것은 일반적으로 지배적 인 시각 자료와 함께 작동하는 간단한 헤드 라인의 형태입니다.

세 번째는 사용자가 완료 할 수있는 보조 텍스트 또는 작업입니다. 마지막 시각적 요소는 탐색 메뉴입니다. 사용자는 이러한 모든 요소를 찾아야하며 눈은 기본적으로이 순서대로 요소를 통과하도록 훈련됩니다. 그런 식으로 디자인하여 쉽게 만들 수 있습니다.

5. 요소에 충분한 공간 제공

지금까지 그것을 모른다면 이것을 기억하십시오. 공백은 친구입니다.

디자인의 모든 요소에 충분한 공간을 제공하십시오. 공간은 개별 요소에 대한 관심을 끌고 "공간"을 차지하여 캔버스를 어지럽히 지 않고 초점을 맞춘 전체 디자인을 만드는 데 도움이됩니다.

공간을 잘 사용하는 비결은 일관성입니다. 개별 요소를 둘러싸거나 텍스트 줄 사이에 들어갈 공간의 크기에 대한 규칙을 설정하십시오. 디자인이 너무 불규칙하게 보이면 간격을 약간 뒤로 당겨야 할 수도 있습니다. 디자인을 새로 열면 사용자가 먼저보고 싶은 곳으로 바로 이동할 수 있습니다. (무엇인지 확실하지 않은 경우 4 번 – 계층 구성으로 돌아갑니다.)

6. 앰프 대비

색상 선택에서 요소 크기에 이르기까지 고 대비 디자인 요소는 프로젝트를 최소한의 프레임 워크에서도 필요한만큼의 시각적 인 세밀 함을 제공 할 수 있습니다.

트렌디 한 옵션의 경우 밝은 대비 색상 팔레트를 사용하여 사용자의 관심을 끄십시오. 굵은 색은 단순한 디자인이 흑백 옵션보다 더 복잡하고 흥미 롭다는 느낌을줍니다. 대비되는 색상을 최대한 활용하려면 채도가 비슷한 색상환의 반대 위치에서 색조를 선택하십시오. 이 옵션이 마음에 들지 않으면 다른 색상환을 사용하십시오. (위의 자주색 및 청록색 조합과 같이 예기치 않은 새로운 즐겨 찾기를 찾을 수도 있습니다.)

7. 일관된 아이콘 및 요소 사용

디자인의 일관성은 킬러 디자인의 가장 중요한 비밀 중 하나입니다. 디자인 프로젝트가 웹 사이트의 나머지 그림과 일치하지 않는 여러 버튼 스타일이나 소셜 미디어 아이콘으로 흩어져 있기 때문에 너무 자주 잊혀지는 것들 중 하나입니다.

사용자 인터페이스 요소는 나중에 생각해서는 안됩니다.

아이콘 및 사용자 인터페이스 요소 세트와 규칙을 작성하고 동일한 방식으로 프로젝트 전체에서이를 사용하는 것이 중요합니다. (아이콘 글꼴 또는 사용자 인터페이스 요소 키트를 처음부터 작성하지 않으려면 구매하거나 다운로드 할 수 있습니다.)

요소의 색상을 선택하고 각각에 대해 동일한 호버 작업 또는 효과를 사용하고 (클릭 할 수있는 요소에 대해 하나, 그렇지 않은 요소에 대해 다른 것) 사용에 따라 요소의 크기를 조정하십시오. (보다 그래픽적인 요소의 경우 아이콘 크기와 대형 옵션을 모두 사용할 수 있습니다.)

Praticca Vending Machines는 더 큰 아이콘을 사용하여 더 많은 정보가 있다는 것을 사용자에게 알립니다. 컬러 아이콘 안에 +가 있습니다. 세 가지 아이콘은 모두 색상과 동일합니다. 그들은 호버에서 모두 동일한 작업을 수행하며 사용자가 클릭 할 때 동일한 방식으로 작동합니다. 동일한 아이콘이 사이트 전체에서 더 작게 사용되어 새로운 내용의 비트를 시작하고 사용자가 사본을 스캔 할 수 있습니다.