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

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

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

거기에서 디자인은 더 대담하고 더 좋아졌습니다. 디자이너들은 청중의 행동 이면에 숨어 있는 과학을 더 깊이 파고들기 시작했고, 이를 통해 청중이 시장이 요구하는 것에 유연하게 대처할 수 있었습니다.

“오늘날 디자인은 단순한 패턴과 트렌드가 아닙니다. 라이프스타일이 되었습니다. " 모든 인간의 반응과 일상에 신중하게 짜여진 것. 그리고 이러한 라이프스타일에 수반되는 복잡성 이면에는 이 세상을 더 창의적이고 살기 좋은 곳으로 만드는 20가지 디자인 원칙이 있습니다.

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

윤곽

주위를 둘러보면 선이 보일 것입니다. 컴퓨터 화면의 가장자리. 키보드의 각 키 측면. 그 키에 적힌 글자들도 선으로 이루어져 있는데, 일부는 직선이고, 일부는 곡선이고, 일부는 비스듬합니다.

그것이 바로 선이 얼마나 중요한지입니다. 그것들이 없으면 모든 것이 서로 무한히 섞여 세상을 하나의 덩어리로 만들 것입니다.

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

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

규모

배율은 단일 디자인에서 다양한 요소의 크기를 지정하는 방법을 정의합니다. 기본적으로 논리를 조각으로 가져오거나 제거합니다. 예를 들어 개 바로 옆에 개미를 그린다면 개를 개미보다 훨씬 크게 만드는 것이 의미가 있습니다(디자인에서 현실에서 벗어나도록 지시하지 않는 한).

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

크기 조정은 계층 구조를 강조하는 좋은 방법이기도 합니다. 예를 들어 영화 포스터를 보자. 주연 배우들은 보통 다른 배우들보다 자신의 사진이 더 돋보이는데, 이는 그들이 조연들보다 키가 크거나 덩치가 있기 때문이 아니라 캐릭터가 더 중요하기 때문입니다.

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

색깔

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

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

일관성

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

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

브랜드 디자인은 일관성에 관한 것입니다. 정확히 같은 색상의 정확히 동일한 음영, 톤 및 색조와 동일한 글꼴 유형을 사용하는 것입니다. 사무실 보고서, 광고판, 배너 광고 - 브랜드와 관련된 모든 것은 항상 일관성이 있어야 합니다. 결국, 코카콜라가 매년 또는 그 정도 색상 구성표를 변경하더라도 지금과 같은 브랜드 회상을 계속 가져올 것이라고 생각하십니까? 나는 그렇게 생각하지 않는다.

여백

Frame Inc. 명함

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

어떤 사람들에게는 사용되지 않는 공간이 모두 낭비처럼 보입니다. 그러나 전략적으로 비워 두어 해당 공간을 유리하게 사용할 때까지 기다리십시오. 청중의 마음을 날려버릴 완전히 새로운 차원의 창의성을 열 수 있습니다.

날 믿지 않아? MC Escher의 하늘과 물을 확인하면 내가 의미하는 바를 정확히 알 수 있습니다.

대칭

Garrett Godsey의 Ares Patch

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

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

불투명

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

불투명도를 사용하면 아래에 있는 요소를 완전히 제거하지 않고 서로 다른 요소를 겹쳐서 배치할 수 있습니다. 또한 이미지에 움직임을 추가하는 데 사용됩니다.

조직

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

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

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

균형

Eddie Lobanovskiy의 탭

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

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

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

계층

Melanie Taube의 계층 구조

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

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

차이

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

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

프레이밍

Sean McCabe의 최고의 카메라는 당신이 가지고 있는 카메라입니다.

프레임이 당신이 넣은 사진 주위에 경계를 어떻게 두는지 보셨습니까? 그것이 바로 프레이밍을 위한 것입니다. 기본적으로 그림의 일부가 되어야 하는 것과 하지 말아야 하는 것을 보여줍니다.

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

또한 창의적이고 일반적인 선과 여백 외에 프레임에 다른 것을 사용할 수도 있습니다. 예를 들어 해변을 주제로 한 포스터는 텍스트 주위에 정렬된 껍질을 사용하여 텍스트를 효과적으로 구성할 수 있습니다.

그리드

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

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

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

자발성

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

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

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

방향

Allan Peters의 나선형 Artcrank 디자인

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

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

규칙

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

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

첫째, 무엇을 깨고 있는지 정확히 알기 위해서는 기본 사항에 정통해야 합니다. 그런 다음 규칙을 어기는 것이 당신이 만들고자 하는 요점과 일치하는지 확인하십시오.

움직임

인쇄된 디자인에 움직임을 만드는 데 마법이 필요하지 않습니다. 이미지가 움직이는 느낌을 줄 수 있도록 사용할 수 있는 효과가 너무 많습니다.

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

깊이

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

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

• 그림자
• 겹침
• 원근법으로 재생(3D 효과 생성)

디자인이 약간의 수명을 사용할 수 있는 것처럼 보이면 이러한 접근 방식을 시도하고 표면에서 떠오르기 전에 이미지를 확인하십시오.

타이포그래피

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

타이포그래피는 많은 영역을 다루기 때문에 타이포그래피를 더 잘 만드는 방법에 대한 이 책을 읽는다면 아마 더 계몽될 것입니다.

구성

Romain Rdb의 웨이브

구성은 단독으로 존재하는 요소가 아니라 실제로 앞에서 논의한 일부 요소의 조합입니다. 규모, 계층 구조, 깊이 - 이 모든 것과 훨씬 더 많은 것이 디자인의 전체 구성에 기여합니다.

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

20가지 다른 요소, 20가지 방법으로 디자인을 만들거나 깨뜨릴 수 있습니다. 작업할 때 항상 이러한 요소 목록을 옆에 두고 다음 디자인 프로젝트를 완료하는 데 따르는 어려움을 헤쳐 나갈 때 지침으로 삼으십시오.