Design #1 LAYOUT IS KING

yonpark·2021년 5월 6일
0

Deisgn & Figma & Webflow

목록 보기
2/10
post-thumbnail

본 블로그의 포스팅 내용은 Udemy Vako Shvili의 "Complete Web Design: from Figma to Webflow to Freelancing" 강의 내용의 일부입니다.

Alignment & Grid

Alignment

간단한 정렬만으로도 어떤 것이 디자인된 것처럼 보일 수 있습니다.
반면에 정렬되지 않은 것은 허술해보이고 아마추어의 작품 같아 보이게 합니다.

💡 각 페이지에서 하나의 맞춤 스타일을 고수하는게 좋습니다.
예를 들어, 히어로 샷에서 두 개의 헤드라인, 단락, 버튼이 있는 경우 모든 헤드라인을 가운데 또는 왼쪽/오른쪽에 정렬하는 것 처럼 말이죠.
스타일을 섞지 말고 맞추세요.

Grid

페이지를 가져다가 같은 너비 열로 나누면 그리드가 나옵니다.
그런 다음 이 컬럼 내에서 요소를 정렬하여 균형 있고 구조화된 페이지를 작성할 수 있습니다.

컬럼 옵션을 선택하여 시그마에서 그리드를 추가하는 작업은 레이아웃 그리드 옵션에서 수행됩니다. 일반적으로 사용되는 그리드는 12개의 컬럼으로 만들어지며 약 20-40px의 거터를 가집니다.

Grid

Count : 12

Margin
Desktop(1440p) : 140px
Macbook : 60px

Gutter : 30
Opacity : 10%

Visual Hierarchy

시각적 계층구조는 관객이 정보를 쉽게 이해하는데 도움을 줍니다.
우리는 한 번에 한 가지에만 집중하게 됩니다.
그렇기에 모든 것이 똑같이 중요할 때 정보의 혼란에 멍해집니다.
하지만 좋은 디자인은 관객들을 이끌게 됩니다.

계층을 설정하는 것은 매우 간단합니다.
큰 것이 더 눈에 띄므로 계층구조가 더 높습니다.
작거나 덜 보이는 요소는 계층 구조에서 더 낮아집니다.

💡 항상 초점(Focal Point) 부터 시작합니다.
그것이 시각적으로 가장 중요한 물체이고, 구성요소 중 가장 중요한 주도권을 가진 것입니다.
(이 부분은 해석이 조금 어렵네요)

Proximity

좋은 디자인은 공통점을 가진 요소들을 서로 더 가깝게 묶는 것(Grouping elements)을 좋아합니다. 이것은 근접성이라는 디자인 컨셉입니다.

근접성의 기본 개념
1.관련되어 있을 수록, 더욱 가깝게
2.관련되어 있지 않을 수록, 더 멀게

profile
👋 반가워요 저는 경영학을 전공했고, 2020년부터는 컴퓨터공학도 공부하기 시작했어요. 최근에는 리액트 프로젝트를 위주로 프론트엔드에 관심이 있습니다~

0개의 댓글