본 블로그의 포스팅 내용은 Udemy Vako Shvili의 "Complete Web Design: from Figma to Webflow to Freelancing" 강의 내용의 일부입니다.
Contrast
Contrast는 가장 널리 사용되는 Design Trick 중 하나입니다.
실제로 시각적 계층 구조를 정의하는 데 자주 사용됩니다.
Contrast는 세 가지 주요 방법으로 composition에서 표현할 수 있습니다.
- Contrast in Weight. 가벼운 물체와 무거운 물체를 연결 합니다.
- Contrast in Size. 아주 큰 물체와 아주 작은 물체를 나란히 놓습니다.
- Contrast in Color. 검은색과 흰색, 파란색과 노란색, 빨간색과 흰색 등과 같은 대비되는 상호 보완적인 색상을 일치시킵니다.
White Space
White Space는 요소 주변의 빈 공간이며 object에 주의를 집중 시킵니다.
White Space를 통해 Object를 보는 것이 더 쉬워지는 것 뿐만 아니라 훨씬 더 흥미롭고 중요하게 느껴집니다.
Repetition
Repetition은 인기있는 Design Trick입니다.
혼자서는 흥미롭지 않을 수 있는 아이템을 하나씩 가져가다가 여러 번 반복하게 되면 더 재미있는 아이템이 탄생하게 됩니다.
Repetition trick은 동일한 항목에만 적용되는 것이 아닙니다.
color, style, spacing, layout과 같은 거의 모든 것에 적용 할 수 있습니다.
Overlapping
Trick은 서로 다른 요소를 가져 와서 겹치는 것입니다.
동상의 손이 내셔널 지오그래픽 제목과 노란색 프레임과 어떻게 겹치는 지 보이시나요?
그것은 디자인을 더 흥미롭게 만들고 구성에 추가적인 차원을 추가합니다.
Overlapping은 두 개의 분리된 요소를 함께 묶습니다.
그리고 그것은 또한 design에서 drama적인 요소를 만들어냅니다.
뭔가 흥미로운 일이 일어나고 있고 우리의 눈은 이제 퍼즐을 푸는 것에 관심이 가게 됩니다.
💡 직사각형 및 원과 같은 간단한 모양을 사용하여 사진과 같은 다른 개체 뒤에 배치 할 수 있습니다.
Tension
design에서 시각적 긴장감은 작품을 매우 흥미롭게 만들 수 있습니다.
디자인의 Tension은 다음에 의해 생성 될 수 있습니다.
- 기울이는 요소와 각도를 사용하여 움직임의 감각을 생성
- 가장자리로 물체를 이동
- 균형을 잃도록 요소 이동
- 개체의 일부 숨기기 (Extreme cropping 역시 Tesion trick입니다.)
- Overlapping 요소 (Overlapping trick처럼)
- 기본적으로 dramatic한 design을 만드는 모든 것들
💡 불필요한 Tension을 조심해야 합니다.
이것은 보통 Tension을 조성하려는 의도가 아니었을 때 우연히 일어납니다.
두 요소가 서로 너무 가까운 경우가 대표적인 예시입니다.
Consistency
일관성없는 design은 쉽게 알 수 있습니다.
우리는 pattern을 인식하고 이러한 pattern의 중단을 감지하도록 연결되어 있습니다.
일관성은 실제로 trick이 아니라 design의 핵심 원칙에 가깝습니다.
DON'T BREAK THE CONSISTENCY!
일관성은 모든 것에 적용되지만 여기에 몇 가지 주요 사항이 있습니다.
Layout Consistency
page에서 일관된 layout을 유지하기위한 grid의 목적입니다.
단일 frame에 다른 정렬 style을 혼합하지 마세요.
예를 들어, 중앙 정렬된 headline이 있지만 같은 section에 왼쪽 정렬된 단락이 존재하는 것처럼.
Typographic Consistency
Typography에서 일관성을 만드는 것은 매우 간단합니다.
각 Event에 대한 특정 Font style을 만든 다음 해당 Font style을 유지하면 됩니다.
예를 들어, 한 문단 유형을 가지고 section, page 및 site의 모든 위치에서 문단 유형을 유지하는 것처럼.
Color Consistency
색상과 일관성을 유지하기 위해서는 Project의 color palette를 설정하고 이를 고수해야 합니다.
Consistency of shape & Form
일관성을 깨는 한 가지 방법은 page에서 다른 모양을 혼합하는 것입니다.
예를 들어 모서리가 둥근 버튼 하나가 있다면 다른 모든 버튼도 같은 방식이어야 합니다.
또한 card, image 및 기타 직사각형과 같은 버튼 외에 다른 모양을 둥글게 처리해야합니다.
Photo Consistency
photo style의 불일치는 다음과 같은 방법으로 만들어지게 됩니다.
- 일반 box형 image와 함께 분리된(unboxed) image 사용.
- 서로 다른 확대 / 축소 수준
- 사진 속 model들의 매우 다른 감정
- 사진 filter에서 눈에 띄는 차이점
💡 동일한 사진 작가 / 기여자의 사진을 찾습니다.
비슷한 photo style을 쉽게 선택할 수 있습니다. 때로는 같은 사진 촬영에서도 마찬가지입니다.
Icon Consistency
사진처럼, icon을 다른 style로 조합하면 일관성이 없고 세련되지 않은 모양이 됩니다.
아래의 사진에서 세 번째 icon은 처음 두 icon과 다른 style입니다.
같은 색상 palette, 비슷한 둥근 모양이지만 여전히 어울리지 않습니다.
차이점은 한 가지 세부 정보에서만 나타납니다. 앞 두개의 icon은 윤곽선이 있지만 세 번째 icon은 그렇지 않습니다.
💡 같은 pack에서 icon을 선택합니다.
pack 안의 icon은 서로 매우 일관적으로 보이도록 만들어졌습니다.
