목차
시각적 디자인의 기초를 배울 수 있는 전체 가이드입니다.
백만 달러짜리 질문: 좋은 디자인의 비결은 무엇입니까?
이 문제에 대해 철학적으로 접근할 수 있습니다. , 하지만 일반적으로 좋은 디자인의 '비밀'은 캔버스와 관련하여 시각적 요소를 구성하는 방식에 있습니다. 기본적으로 레이아웃 디자인에 대해 설명했습니다. 생각해 보면 어디에나 있습니다.
잡지의 레이아웃을 예로 들어 보겠습니다. 디자인은 고전적인 그리드 시스템을 따릅니다(그리드에 대한 모든 내용은 잠시 후에 배울 예정입니다). 모든 것은 일반적으로 왼쪽, 오른쪽 및 아래쪽에 정렬됩니다. 열은 특히 페이지를 시각적으로 매력적일 뿐만 아니라 읽기 쉽고 권위 있게 만드는 뚜렷한 정렬을 가지고 있습니다. 큰 제목은 보는 사람의 관심을 끌고, 부제목은 정보의 시각적 계층 구조를 만들기 위해 크기 대비로 제공됩니다.
Linda Gaom, Behance
이러한 모든 특성이 페이지를 만듭니다. 깨끗하고 구조적이며 읽기 쉬운 디자인으로 다음에 이야기할 팁과 조화를 이룹니다. 그러나 먼저 레이아웃 디자인 자체에 대해 자세히 알아보겠습니다.
레이아웃 디자인이란 무엇입니까?
레이아웃 디자인은 독자의 관심을 끌고 시각적으로 매력적인 방식으로 특정 메시지를 전달하기 위한 그래픽 요소의 배열과 관련이 있습니다. .그래서 우리는 이야기하지 않습니다나머지 요소는 방향을 전달합니다.
이를 이해하는 간단한 방법은 예를 들어 당사 웹 사이트를 예로 들면 됩니다. 그래픽은 텍스트와 명확하게 구분되며 클릭 유도문안도 마찬가지이므로 보는 사람의 주의는 정보의 한 클러스터에서 다음 클러스터로 이동합니다.
원칙 #5. 대비 사용
디자인에 충분한 대비가 있는지 확인하세요.
대비는 디자인을 구성하는 데 도움이 되며 절실히 필요한 계층 구조를 설정하고 중요한 것을 강조합니다.또한 대비를 잘 사용하면 디자인 전체에 시각적인 흥미를 더할 수 있습니다. 모든 것이 같은 크기, 모양 또는 색상으로 구성된 레이아웃은 지루해 보일 것입니다. 대비는 분위기를 더해줍니다.
따뜻함과 차가움, 어두움과 밝음, 파란색과 주황색 등 색상 대비가 먼저 떠오를 수 있습니다. 그러나 색상은 대비의 매우 필수적인 원칙이지만 유형, 정렬 및 크기의 대비도 있습니다. 대비도 상대적이라는 점을 기억하십시오. 다른 요소와 병치할 때만 의미가 있습니다.
이 규칙을 스마트하고 아름다운 방식으로 사용하는 레이아웃의 몇 가지 예는 다음과 같습니다. 타이포그래피, 색상, 요소 간 크기의 대조에 주목하십시오.
출처: IAG 화해 실행 계획
원칙 #6. 반복, 패턴, 리듬
반복하면 떠오르는같은 요소를 반복해서 사용합니다.
하지만 디자인이 다릅니다. 확실히 그렇게 지루하지는 않습니다. 반복을 올바르게 사용하면 실제로 디자인에 힘을 실어줄 수 있습니다.
레이아웃 전체에서 모티프를 식별하고 재사용하여 다양한 영역이 연결되어 있고 동일한 구성의 일부라고 느끼도록 하세요. 그것은 당신의 디자인이 테마를 갖는 데 도움이 될 것입니다. 요소를 반복함으로써 청중의 기대에 부응할 뿐만 아니라 사용자 경험도 향상시킬 수 있습니다. 일관성을 유지하면 사용자가 더 편안하게 느낄 수 있습니다.
모양이나 기호를 반복하면 됩니다. 또는 색 구성표, 서체 및 일반적으로 동일한 스타일.
들어가는 좋은 습관은 대가족과 함께 서체를 사용하는 것입니다. 패턴, 선 두께/스타일 및 색상의 다른 수를 제한하고 전체적으로 반복합니다. 또한 이미지와 그래픽의 스타일을 동일하게 유지하십시오. 예를 들어, 같은 아티스트의 일러스트레이션을 사용하세요.
출처: Thepentool.co
그게 다입니다. 다음은 디자인을 구성하고 더 깨끗하고 전문적이며 균형 잡힌 레이아웃을 만드는 데 도움이 되는 6가지 원칙입니다.
하지만 여정은 여기서 끝나지 않습니다. 그래픽 디자인은 정확한 과학이 아니며 팁과 원칙에 국한되어서는 안됩니다. 창조의 모든 영역에서 그러하듯이 엄격한 경험 법칙은 없습니다. 미묘한 방식으로 이러한 팁을 벗어나면 깊이와 다양성이 추가됩니다.당신의 디자인.
그럼에도 불구하고 그것들은 훌륭한 출발점이며 우리는 당신이 그것들을 시도해 볼 것을 권장합니다. 어떻게 작동했는지 알려주세요!
시작하려면 Vectornator를 다운로드하세요
디자인을 한 단계 업그레이드하세요.
파일 다운로드
여기 로고 디자인에 대해. 하지만 신문, 잡지, 포스터와 같은 인쇄 자료의 디자인과 이에 상응하는 디지털 자료는 물론 웹, 앱 또는 UX/UI 디자인.'레이아웃'이라는 단어는 많은 힌트를 줍니다. 페이지에 미리 정해진 요소를 배치하는 것을 의미합니다.
레이아웃이 효과적일 때 보기에도 좋고, 디자인이 전달하려는 메시지를 보는 사람이 이해할 수 있도록 안내합니다. 따라서 레이아웃을 이해하는 것은 매력적이고 효과적이며 사용자 친화적이고 만족스러운 구성을 만드는 데 중요합니다.
레이아웃이 청중에게 메시지를 잘 전달하지 못한다면, 즉 "잘 읽히지 않는 것"입니다. "라고 한다면 디자인은 아무리 트렌디해 보여도 효과가 없을 것입니다. 레이아웃 디자인 영역에서 콘텐츠는 트렌드와 속임수를 대신합니다.
레이아웃 디자인의 목적
메시지를 빠르게 전달하려면
이것이 핵심입니다. 레이아웃 디자인은 그래픽 자산 간의 관계를 설정하여 효과와 효과를 극대화하기 위해 눈의 움직임이 원활하게 흐르도록 합니다.
균형을 만들기 위해
레이아웃 디자인의 원칙을 사용하는 것이 가장 간단한 제작 방법입니다. 지루해지지 않고 디자인 프로젝트에서 균형과 대칭을 느낄 수 있습니다.
집합력 만들기
레이아웃을 사용하면 디자인의 많은 요소를 쉽게 소화할 수 있고 일관성 있고 논리적인 방식으로 배열할 수 있습니다.
아름다움을 창조하려면
균형과 구조가 자연스럽게 아름다움을 만듭니다.레이아웃 디자인이 올바르게 완료되면 보는 사람에게 시각적으로 매력적으로 보일 것입니다. 보는 사람이 메시지를 이해하는 데 필요한 노력이 적을수록 디자인이 더 매력적으로 보일 것입니다.
Frank Philippin의 저서 '나는 디자인 학생이었습니다: 그때- 지금.' 출처: DesignBoom
레이아웃 디자인의 요소
텍스트
여기에는 텍스트 본문이나 단락뿐만 아니라 헤드라인, 부제, 머리글 및 바닥글도 포함됩니다. 타이포그래피, 색상 및 크기를 선택하면 레이아웃이 청중에게 전달되는 방식에 따라 다양한 효과를 얻을 수 있습니다.
이미지
가장 일반적인 유형의 이미지는 사진, 일러스트레이션 또는 인포그래픽입니다.
도형
도형은 매우 각이 진 기하학적이거나 자연 세계를 모방한 유기적일 수 있습니다. 추상적일 수도 있습니다. 추상적인 모양은 웹 디자이너가 복잡하고 거대한 구성에 추상적인 모양을 통합하는 것을 보았기 때문에 작년에 매우 유행했습니다.
모양은 이미지를 대체할 수 있습니다. 또는 페이지에 그래픽 요소를 추가하거나 텍스트를 강조 표시하거나 다른 시각적 요소 사이의 공간을 구분하는 데 사용할 수 있습니다.
공백
모든 레이아웃 디자인에는 일정량의 공백이 있습니다. 요소가 스스로 숨 쉬고 돋보이도록 합니다.
레이아웃 디자인의 황금 원칙
원칙이레이아웃 디자인은 디자인의 기본 원칙을 많이 따릅니다. 특정 방식으로 색상을 사용하는 것처럼 타이포그래피, 반복, 대비, 계층 및 균형.
원칙 #1. 그리드 사용
그리드는 디자이너가 텍스트 및 이미지와 같은 다양한 디자인 요소를 일관되고 따라가기 쉬운 방식으로 배치하는 데 도움이 됩니다.
그리드는 질서 감각을 제공하고 요소가 서로 압도되지 않도록 합니다. , 그리고 가장 중요한 것은 그리드가 정렬도 수정한다는 것입니다. 보다 깨끗하고 전문적인 작업을 할 수 있습니다.
출처: hgmlegal.com
The anatomy of grids
수직선과 수평선으로만 생각할 수도 있지만 그리드는 여러 부분으로 구성됩니다. 실제로 많은 사람들이 있습니다. 기본 그리드에서 알아야 할 가장 중요한 용어는 다음과 같습니다.
- 형식 은 최종 디자인의 전체 영역입니다. 따라서 인쇄용으로 디자인하는 경우 형식은 페이지이고 웹 디자이너라면 형식은 웹 페이지 또는 브라우저 창입니다.
- 여백 은 형식과 디자인 사이의 의도적인 빈 공간입니다.
- 흐름선 은 레이아웃을 평행 섹션으로 구분하는 수평선입니다. 흐름선은 디자인의 가독성을 높이고 독자가 콘텐츠를 올바르게 따라갈 수 있도록 안내합니다.
- 모듈 은 수평선과 수직선으로 구성된 블록입니다.모든 그리드의 흐름선. 당신이 그것에 대해 생각한다면, 그들은 모든 그리드의 빌딩 블록입니다. 모든 수직 모듈은 열을 생성하고 모든 수평 그리드는 행을 생성합니다.
- 영역 은 수직 또는 수평으로 연결된 모듈 그룹입니다. 이를 구성하는 방법에 대한 규칙은 없습니다.
출처: Radversity
격자 유형
레이아웃 격자는 처음에 정렬하는 데 사용되었습니다. 종이에 필기.
그 기원은 프랑스 예술가인 Villard De가 여백이 있는 인쇄 페이지 레이아웃을 생성하기 위해 격자 시스템을 황금 비율과 병합한 13세기 초로 거슬러 올라갑니다. 대부분의 인쇄된 책과 잡지 레이아웃이 증명하듯이 오늘날까지 이 그리드 시스템을 볼 수 있습니다. 게시자, 편집자 및 디자이너는 보기에 좋을 뿐만 아니라 독자가 특정 위치에 특정 디자인 요소가 있을 것으로 기대하기 때문에 표준 그리드를 사용하는 것을 선호합니다.
그리드는 두 가지 방식으로 디자인할 수 있습니다. 또는 비대칭. 대칭 그리드 는 수직 및 수평 영역이 서로 동일한 중심선을 따릅니다.
비대칭 그리드 에서는 이름에서 알 수 있듯이 여백과 열이 모두 동일하지 않습니다.
이 분류에 따라 신뢰할 수 있는 전 세계적으로 사용되는 5가지 주요 레이아웃 그리드 유형이 있습니다.
원고grids 은 문서에 대한 가장 일반적인 종류의 그리드입니다. 머리글, 바닥글 및 여백을 구분하고 기본적으로 텍스트에 경계를 제공하는 형식(또는 페이지) 내부에 사각형을 만듭니다. 그들은 잡지, 신문 및 책의 기반입니다. 따라서 가장 친숙한 레이아웃일 것입니다.
출처: UXplanet
출처: Radversity
기둥 그리드 은 잡지 출판 분야에서 또 하나의 인기 상품입니다. 일반적인 잡지 레이아웃은 열 그리드를 사용하여 텍스트를 읽기 쉬운 섹션으로 구분합니다. 그러나 그들은 웹 사이트에서도 매우 인기가 있습니다. 2개에서 최대 6개까지의 그리드를 사용할 수 있습니다. 더 많은 것이 가능하지만 일반적이지는 않습니다. 기둥 그리드에서 매우 중요한 점은 기둥 사이의 간격 또는 여백이 서로 동일한 거리에 있다는 것입니다.
대칭 기둥 그리드는 예를 들어 신문에서 사용되는 반면 비대칭 기둥 그리드는 웹 디자인에서 선호됩니다. .
출처: UX Planet
출처: Radversity
모듈식 그리드 컬럼 그리드와 비슷하지만 그들은 또한 수평 흐름선을 설명합니다. 이 유형의 그리드는 레이아웃의 다양한 요소를 구성해야 하고 기둥 그리드로는 충분하지 않을 때 필요합니다.
모듈식 그리드에는 동일한 크기의 모듈이 있어 다양한 방식으로 공간 영역을 매우 쉽게 시각화할 수 있습니다.
출처: UXPlanet
출처: Radversity
기준선 그리드 는 텍스트 기반 구성에 환상적입니다. 기준선은 입력할 때 텍스트가 놓이는 선이고 행간은 두 기준선 사이의 간격입니다. 제목 또는 부제목의 크기가 궁금하십니까?
기준선 격자는 텍스트에 흐르는 듯한 리듬을 제공하는 데 도움이 됩니다.
출처: UX Planet
출처: Fragaria
또한보십시오: 격리의 지루함을 치료하기 위한 창의적인 팁계층적 그리드 상대방. 그럼에도 불구하고 중요한 순서대로 디자인 요소를 구성할 때 매우 유용합니다. 계층적 그리드는 모듈식 그리드를 기반으로 하거나 직접 생성할 수도 있습니다. 웹사이트는 이 그리드를 많이 사용하며, 특히 디지털 잡지와 신문은 디지털로 전환하는 과정에서 기둥 그리드보다 계층적 그리드에 더 의존하는 경향이 있습니다.
출처: UX Plane
Principle #2. 네거티브 스페이스 사용
우리는 종종 공허함, 침묵 또는 색상 부족이 나쁜 것이라고 생각합니다. 그러나 우리는 그것들이 대비의 견고한 기초가 되는 방법을 고려하지 않습니다.
여백이라고도 하는 네거티브 스페이스는 실제 요소가 없는 디자인 영역입니다. 비어있는 공간입니다. 그것은 당신의 자산을 둘러싸고 있을 뿐만 아니라 그들 사이에 필요한 유대감을 형성합니다. 그렇기 때문에 네거티브 스페이스는 정당한 디자인 요소이며 레이아웃 효과에 막대한 영향을 미칩니다.디자인은.
좋은 네거티브 공간과 나쁜 네거티브 공간
네거티브 공간은 디자인의 다양한 영역을 구분하는 데 도움이 되는 동시에 레이아웃이 숨 쉴 수 있도록 합니다. 시각적 계층 구조와 시각적 균형에 도움이 됩니다. 핵심 요소에 대한 사용자의 초점을 설정합니다. 주의 산만 수준을 줄입니다. 마지막으로 디자인에 스타일과 우아함을 더해줍니다.
경험이 없는 디자이너는 텍스트를 확대하거나 로고나 이미지를 크게 만들어서 가능한 한 캔버스의 많은 부분을 채우는 경향이 있을 수 있습니다. 그러나 요소에 여유 공간을 제공하면 시청자가 특정 정보 단서를 더 빠르고 편안하게 선택할 수 있습니다.
모든 것이 시청자의 주의를 끌면 아무 소리도 들리지 않습니다.– Aaron Walter, 'Design for 감성'
네거티브 공간을 결정하는 쉬운 방법은 모듈식 그리드를 사용하는 것입니다. 이를 디자인 위에 배치하면 비어 있을 수 있는 모듈과 채워야 하는 모듈을 쉽게 시각화할 수 있습니다.
Designer by Brunswicker, 출처: Codesignmag.com
원칙 #3. 단일 초점 선택
클라이언트가 로고를 더 크게 만들어달라고 요청한 적이 있습니까? 그리고 헤드라인을 더 크게 하려면?
모든 것을 강조할 수는 없습니다. 그것은 좋은 디자인의 요점을 이깁니다. 시간과 마찬가지로 초점도 상대적입니다. 한 요소가 돋보이려면 다른 요소가 배경이 되어야 합니다. 디자인이 표시되려면 일부 요소가 다른 요소보다 우선해야 합니다.시각적 계층 구조.
디자인의 초점은 시각적 무게가 가장 큰 요소입니다. 레이아웃에서 다른 어떤 것보다 먼저 시선을 끄는 요소입니다.포컬 포인트는 디자인에서 시청 여정이 시작되는 위치를 잠재 고객에게 알립니다. 그래서 당신이 하고 있는 이야기의 시작입니다.
일반적으로 이것은 큰 이미지나 큰 타이포그래피 소스를 사용하여 달성할 수 있습니다. 아래의 초점이 얼마나 효과적인지 확인하세요.
Bloomberg Businessweek를 위해 Braulio Amado가 디자인함, 출처: 좋은 점은
그러나 초점이 잠재고객의 관심을 끌기는 하지만, 다음 규칙은 이를 안내하는 데 도움이 될 것입니다.
또한보십시오: 온라인 만화로 돈을 버는 방법원칙 #4. 근접성과 흐름을 생각하라
근접성의 원리는 간단하다. 서로 관련된 요소가 함께 배치되었는지 확인합니다.
근접성은 시각적 자산이 연결되어 레이아웃을 구성하는 데 도움이 되는 하나의 시각적 단위가 됨을 나타냅니다.따라서 서로 관계가 있는 디자인 자산만 클러스터링하고 디자인에 대한 정보를 사용하여 잠재 고객이 소비해야 하는 관련 콘텐츠로 안내합니다. 이것을 흐름 원리라고도 합니다.
출처: Satori Graphics
흐름이 좋은 디자인은 레이아웃 전체에서 요소에서 요소로 쉽게 보는 사람의 시선을 이끕니다. 당신의 초점은 시선을 끌고 될 것입니다
