모든 디자이너가 알아야 할 20가지 디자인 요소 및 원칙

디자인이 지나치게 통제되던 시절이 있었다. 패턴이 너무 많습니다. 너무 안전합니다.

그러나 진화는 불가피했고 디자이너들은 조금 더 실험하기 시작했습니다.

거기에서 디자인은 더 대담하고 좋아졌습니다. 디자이너들은 잠재 고객의 행동 이면에 있는 과학을 더 깊이 파고들어 시장이 요구하는 것에 유연하게 대처할 수 있도록 했습니다.

[twitter_link]오늘날 디자인은 단순한 패턴과 트렌드 그 이상이 되었습니다. 그것은 라이프스타일이 되었습니다.[/twitter_link] 모든 인간의 반응과 일상에 조심스럽게 짜여진 것입니다. 그리고 이 라이프스타일에 수반되는 복잡함 아래에는 이 세상을 더 창의적이고 살기 좋은 곳으로 만드는 20가지 디자인 원칙이 있습니다.

이러한 원칙과 이를 디자인에 활용하기 위한 팁을 살펴보겠습니다.

윤곽

주변을 둘러보면 선이 보일 것입니다. 컴퓨터 화면의 가장자리. 키보드의 각 키 측면. 그 열쇠에 있는 글자도 선으로 되어 있는데, 어떤 것은 직선이고, 어떤 것은 구부러져 있고, 어떤 것은 기울어져 있습니다.

그것이 바로 라인이 얼마나 중요한지입니다. 그것들이 없으면 모든 것이 서로 무한히 혼합되어 세상을 하나의 얼룩으로 만들 것입니다.

선이 모든 것의 형태를 정의한다는 사실 외에도 선을 더욱 놀랍게 만드는 것은 선이 동등한 반응을 유도하는 감정과 아이디어로 변환된다는 사실입니다. 예를 들어 직선 수직선 옆에 구불구불한 선을 놓으면 한 쪽에서는 질서와 힘을, 다른 쪽에서는 혼돈과 혼란을 생각하기 시작할 것입니다. 특정 클릭 유도 문안에 응답하도록 잠재 고객에게 메시지를 표시하는 경우 매우 유용할 수 있습니다. 그들의 기분과 감정이 정해진 순간, 당신의 클릭 유도 문안을 순항하는 것이 더 쉽습니다.

웹 디자인에서 선이 하는 또 다른 역할은 청중의 시선을 각 페이지의 초점으로 이끈다는 사실입니다. 예를 들어, 다른 작은 텍스트의 바다에서 브랜드 이름 아래에 있는 강력한 선행 라인은 해당 이름을 돋보이게 하는 데 도움이 됩니다.

규모

스케일은 단일 디자인에서 서로 다른 요소의 크기를 지정하는 방법을 정의합니다. 기본적으로 논리를 조각으로 가져오거나 제거합니다. 예를 들어, 개 바로 옆에 개미를 그리려면 개가 개미보다 훨씬 더 크게 그려야 합니다(디자인에서 현실에서 벗어나도록 지시하지 않는 한).

규모는 드라마를 만드는 가장 좋은 방법이기도 합니다. 위에서 암시한 것처럼 일부 요소의 크기를 다른 요소보다 훨씬 작거나 크게 조정하여 현실감에서 벗어나 놀라운 효과를 만들어야 하는 경우가 있습니다.

크기 조정은 계층 구조를 강조하는 좋은 방법이기도 합니다. 예를 들어 영화 포스터를 보자. 주요 배역을 맡는 배우들은 대개 자신의 사진이 다른 배우보다 눈에 띄는데, 이는 조연 배우보다 키가 크거나 커서가 아니라 캐릭터가 더 중요하기 때문입니다.

이제 많은 그림이 아니라 많은 텍스트가 포함된 작업을 하고 있다고 가정해 보겠습니다. 스케일링은 여전히 ​​다른 세부 사항보다 일부 세부 사항을 강조하는 가장 좋은 방법임이 입증되었습니다. 예를 들어 통계를 크게 확장하여 청중의 시선을 해당 데이터로 바로 이끌 수 있습니다.

색상

색상이 모든 것에 미치는 영향은 믿을 수 없을 정도입니다. 사람의 기분과 감정뿐만 아니라 반응과 구매 결정에도 색상이 미치는 영향에 대한 연구가 계속해서 진행되었습니다.

브랜드에 흑백만을 사용하는 환경 회사를 상상할 수 있습니까? 아니면 밝은 네온 컬러로 프로페셔널한 아우라와 전통적 가치를 발산하고 싶은 기업인가요? 디자인에서 색상이 어떤 역할을 하는지 보여주는 충분한 설명이라고 생각합니다.

일관성

코카콜라를 생각할 때 녹색 또는 파란색을 상상합니까? 아마도 그렇지 않을 것입니다 – 당신의 마음은 자동적으로 빨간색으로 점프합니다.

이것이 바로 일관성입니다.

브랜드를 위한 디자인은 일관성에 관한 것입니다. 정확히 동일한 색상의 동일한 음영, 색조 및 색조와 동일한 글꼴 유형을 사용하는 것이 전부입니다. 사무실 보고서, 광고판, 배너 광고 – 브랜드와 관련된 모든 것은 항상 일관성이 있어야 합니다. 결국, 코카콜라가 매년 색 구성표를 바꾼다면 지금과 같은 브랜드 회상을 불러일으킬 것이라고 생각하십니까? 나는 그렇게 생각하지 않는다.

여백

여백이 반드시 흰색을 의미하는 것은 아니지만 어떤 색이든 상관없이 항상 같은 의미입니다. 많은 디자이너들이 열광하는 부정적인 공간인 요소 사이의 사용되지 않은 공간입니다.

일부에게는 사용하지 않는 모든 공간이 낭비처럼 보입니다. 그러나 전략적으로 비워두어 그 공간을 유리하게 사용할 때까지 기다리십시오. 청중의 마음을 사로잡을 완전히 새로운 수준의 창의성을 열 수 있습니다.

나를 믿지 않습니까? MC Escher의 Sky and Water를 확인하면 내가 의미하는 바를 정확히 알 수 있습니다.

대칭

당신의 눈은 자연스럽게 대칭적인 것에 끌린다는 것을 알고 계셨습니까? 이것은 Target 및 Chanel과 같은 브랜드가 로고를 매우 기억에 남도록 만드는 개념입니다.

대칭은 모든 디자인에 균형감과 질서를 부여하는 요소 중 하나입니다. 때로는 그렇게 명확하지 않을 수도 있지만 모든 훌륭한 예술 작품에는 눈을 즐겁게 하기 위해 대칭을 형성하는 독특한 방법이 있습니다.

불투명

디자인 요소의 불투명도는 그것이 얼마나 '투시'되는지를 보여줍니다. 그것은 모든 것이 얼마나 투명한지를 나타냅니다. 불투명도가 낮은 요소는 기본적으로 더 가볍고 불투명도가 높은 요소는 눈에 더 견고합니다.

불투명도를 사용하면 아래에 있는 요소를 완전히 제거하지 않고도 서로 다른 요소를 위에 놓을 수 있습니다. 이미지에 움직임을 더하기 위해 사용되기도 합니다.

조직

텍스처가 없으면 어떤 디자인도 텅 비어 있고 평범해 보일 수 있습니다. 약간의 텍스처를 추가하면 디자인이 살아나고 화면이나 인쇄된 표면에서 튀어나올 준비가 된 것처럼 보입니다.

그렇다고 모든 디자인에 질감이 필요한 것은 아닙니다. 깨끗하고 날카로울 때 더 좋아 보이는 디자인 프로젝트는 항상 있을 것입니다. 그러나 약간의 질감이 손상되지 않는 경우도 있습니다.

표면에 깊이를 더하는 배경을 추가하여 디자인의 질감을 멋지게 꾸밀 수 있습니다. 일부 요소에 엠보싱을 시도할 수도 있습니다.

균형

균형은 때때로 대칭과 혼동될 수 있지만 실제로는 서로 다른 두 가지입니다. 사물이 대칭이면 각 요소가 같은 여백에서 끝나거나 페이지 양쪽에 같은 수의 요소가 있을 수 있습니다. 이것은 일반적으로 균형 감각으로 이어지지만 대칭 디자인을 사용하지 않고도 그러한 느낌을 얻을 수 있습니다.

예를 들어 텍스트와 이미지가 포함된 정보 페이지를 디자인하고 싶다고 가정해 보겠습니다. 텍스트가 이미지와 동일한 요소는 아니지만 2열 레이아웃으로 균형감을 찾을 수 있습니다.

균형은 디자인을 완성시켜주는 요소일 뿐입니다. 이미지의 균형이 맞지 않으면 미완성으로 보이거나 더 나쁘게는 영감을 받지 못한 것처럼 보일 수 있습니다.

계층

계층 구조는 어떤 요소가 다른 모든 것보다 더 중요한지 보여줍니다. 이것은 계층 구조의 끝에 있는 요소(말하자면 하단 피더)가 없어도 된다는 의미는 아닙니다. 결국, 계층 구조의 다른 쪽 끝에 있는 요소가 없으면 목표로 하는 효과를 얻을 수 없습니다.

계층 구조는 스케일링 외에도 다양한 방식으로 표현될 수 있습니다. 먹이 사슬의 맨 위에 있는 사람들에게는 더 밝은 색상을 사용할 수 있으며 아래로 내려갈수록 색상이 더 밝아집니다.

차이

대조는 반대의 규칙입니다. 기본적으로 빛과 어둠, 큰 것과 작은 것을 구별합니다. 항상 자신의 디자인에서 한두 가지 요소를 돋보이게 하는 것을 목표로 하는 디자이너에게 대비는 일반적으로 그들이 사용하는 접근 방식 중 하나입니다.

그러나 대비는 단순한 미학보다 훨씬 더 깊습니다. 대비는 가독성에도 영향을 미칩니다. 텍스트와 배경에 거의 동일한 두 가지 색상을 사용하면 텍스트가 말하는 내용을 읽으려고 눈이 긁힐 것입니다. 콘트라스트가 높은 두 가지 색상을 사용하면 눈으로 봐야 할 것을 즉시 볼 수 있습니다.

프레이밍

액자가 그 안에 넣은 사진 주위에 어떻게 경계를 두는지 보십니까? 그것이 바로 프레이밍의 목적입니다. 기본적으로 그림의 일부가 되어야 하는 것과 포함되어서는 안 되는 것을 보여줍니다.

상자 윤곽선, 여백 - 이 모든 것이 프레이밍의 형태입니다. 또한 텍스트로 채워진 페이지 중간에 있는 작은따옴표와 같이 특정 요소를 다른 요소보다 강조 표시할 수 있습니다.

또한 창의력을 발휘하여 일반적인 선과 여백 외에 다른 것을 프레임에 사용할 수 있습니다. 예를 들어 해변을 주제로 한 포스터는 텍스트 주위에 조개껍데기를 사용하여 효과적으로 프레임을 만들 수 있습니다.

그리드

빈 공간에 물건을 정렬하는 것은 어려울 수 있습니다. 이것이 그리드가 디자인에서 매우 중요한 이유입니다.

그리드는 디자이너가 요소를 정렬하고 배열하는 데 도움이 됩니다. 이에 대한 완벽한 예는 잡지 페이지나 신문의 칼럼입니다. 그리드의 안내 없이 모든 텍스트가 무작위로 배치되는 것을 상상할 수 있습니까? 이해하려고 시도하는 것은 재앙이 될 것입니다.

반면에 조금 덜 딱딱한 디자인을 원한다면 그리드를 깨는 것이 즉각적으로 혼돈의 느낌을 만들어낼 수 있는 훌륭한 방법입니다. 우리의 눈은 자연스럽게 디자인의 레이아웃과 그리드를 찾는 경향이 있으므로 그 구조를 벗어나면 무질서한 느낌을 만드는 데 도움이 됩니다.

자발성

그래, 그래. 균형이 필요합니다. 대칭이 필요합니다. 그리드를 따르십시오. 선을 사용하여 프레임을 만듭니다. 그러나이 모든 것이 모든 것이 매뉴얼에 따라 수행되어야 함을 의미하지는 않습니다. 때로는 놀라운 디자인을 만들기 위해 약간의 미친 짓도 필요합니다.

열과 행 사이에 이미 명확한 구분이 있다고 해서 기존 프레임을 따르지 않고 갑자기 중간에 인용을 배치할 수 없다는 의미는 아닙니다. 그것이 그 선을 돋보이게 하는 가장 좋은 방법이라면 그렇게 하십시오.

디자인할 때 "규칙"에서 잠시 벗어나 예상치 못한 약간의 즉흥성을 위한 공간을 찾으십시오. 이것은 디자인에 필요한 것일 수 있습니다.

방향

이는 시각적 또는 그래픽 단서라고도 할 수 있습니다. 클릭 유도 문안 버튼을 가리키는 사람의 이미지를 배치하면 거의 모든 독자의 시선이 즉시 해당 버튼으로 이동합니다.

물론 눈은 페이지를 볼 때 특정 패턴을 따릅니다. 예를 들어 연구에 따르면 눈이 따르는 가장 일반적인 패턴은 E, F 또는 Z 모양입니다. 눈의 본능은 왼쪽 상단에서 오른쪽 상단으로 먼저 이동하는 것이기 때문에 페이지의 왼쪽 상단에 가장 중요한 콘텐츠를 배치하는 것이 가장 좋은 이유입니다.

규칙

예, 창의성은 종종 자발적이지만 따라야 할 디자인 규칙이 많이 있습니다. 하지만 이 규칙을 자주 어기면 놀라울 정도로 아름다운 작품을 만들게 될 것입니다.

그렇다면 언제 규칙을 따라야 하고 언제 위반해야 하는지 어떻게 알 수 있습니까?

첫째, 무엇을 깨뜨리고 있는지 정확히 알 수 있도록 기본 사항에 정통해야 합니다. 그런 다음 규칙을 위반하는 것이 당신이 하려는 요점과 일치하는지 확인하십시오.

움직임

인쇄된 디자인에 움직임을 만드는 데 마법이 필요하지 않습니다. 이미지가 움직이는 듯한 인상을 줄 수 있는 많은 효과를 사용할 수 있습니다.

예를 들어 자전거를 타는 아이의 이미지에서 아이 주변의 나머지 이미지를 흐리게 처리하여 아이가 지나가는 모든 것을 윙윙거리고 있다는 것을 보여줄 수 있습니다. 모션 라인과 웨이브 효과를 사용할 수도 있습니다. 위의 Vladimir Mirzoyan이 디자인한 이 로고와 같이 불투명도를 사용하여 움직임의 착시 효과를 줄 수도 있습니다.

깊이

물론 플랫 디자인은 몇 년 동안 대유행이었습니다. 일부 디자인에 깊이를 추가하는 것이 여전히 더 적합하다는 것을 인정해야 합니다. 결국, 물리적으로 2차원적인 것이 실제로 페이지에서 튀어나온 것처럼 보일 수 있다는 것이 얼마나 놀라운 일입니까?

다음과 같이 디자인에 깊이를 더하는 데 사용할 수 있는 몇 가지 기술이 있습니다.

• 그림자
• 겹침
• 원근감 있게 재생(3D 효과로 이어짐)

디자인이 약간의 수명이 필요할 것 같으면 다음 방법 중 하나를 시도하고 표면에서 일어나기 전에 이미지를 확인하십시오.

타이포그래피

디자인의 모든 이미지, 텍스처, 배경 및 기타 요소를 그대로 사용할 수 있지만 타이포그래피에 약간의 작업이 필요한 경우 전체 디자인이 손상됩니다. 타이포그래피는 단순한 글꼴 스타일과 글꼴 크기 이상입니다. 또한 크기 조정, 간격, 색상 및 기타 많은 기본 디자인 개념과 관련이 있습니다.

타이포그래피는 많은 분야를 다루기 때문에 타이포그래피를 개선하는 방법에 대한 이 책을 읽으면 더 많은 정보를 얻을 수 있을 것입니다.

구성

컴포지션은 독립적인 요소가 아니라 실제로 앞서 논의한 일부 요소의 조합입니다. 규모, 계층 구조, 깊이 - 이 모든 것이 디자인의 전체 구성에 기여합니다.

구성은 가장 기본적인 의미에서 디자인의 모든 단일 요소의 전반적인 배열을 다룹니다. 우리가 논의한 모든 요소를 ​​상상해보십시오. 함께 혼합하면 최종 결과가 작동합니까? 그것이 구성을 측정하는 방법입니다.

20가지 요소, 디자인을 만들거나 깨는 20가지 방법. 작업할 때 항상 이러한 요소 목록을 옆에 두고 다음 디자인 프로젝트를 완료할 때 발생하는 문제를 해결하려고 할 때 지침으로 삼으십시오.