웹사이트 그리드 생성을 위한 6가지 경험 법칙

그리드는 페이지의 콘텐츠를 구성하고 정렬 및 순서를 생성하기 위한 시스템입니다. 사용자 인터페이스의 기본 구조 또는 골격을 형성합니다. 디자이너는 웹사이트 그리드를 사용하여 디자인 결정을 내리고 우수한 사용자 경험을 만듭니다.

모든 다양한 유형의 그리드를 포함하여 웹 디자인 그리드가 무엇인지, 그리고 마지막으로 그리드를 사용하는 방법과 시기를 배우는 것은 웹사이트 디자이너로서의 기술을 연마하여 앞으로 우리가 만드는 모든 웹사이트 디자인에 영향을 미칠 것입니다.

대부분의 경우 저충실도 와이어프레이밍 및 프로토타이핑을 포함하는 표준 웹사이트 디자인 프로세스를 여러 단계로 나누면 실제로 모든 웹 페이지가 정사각형과 직사각형으로 구성되어 있다는 것을 알 수 있습니다. 궁극적으로 어떤 요소의 개별 모양에 관계없이 그것들은 포괄적인 그리드 레이아웃 내에 위치하며, 그 안에는 실제로 많은 유형의 그리드 레이아웃이 있습니다.

웹 디자인에서 그리드는 페이지에 요소를 배치하는 방법과 위치를 디자이너에게 안내하는 데 사용됩니다. 이 지침은 여백, 공백 및 열을 집합적으로 통합하여 페이지 콘텐츠에 대한 포괄적이고 일관된 프레임워크를 제공합니다.

실제 웹사이트 자체에 격자선이 표시되는지 여부에 관계없이 기본 구조와 프레임워크는 디자이너가 페이지 또는 화면의 전체 레이아웃뿐만 아니라 각 요소 간의 비율과 비율을 관리하는 데 도움이 됩니다.

웹 디자인 프로세스에서 그리드 시스템을 사용하는 방식과 관련하여 그리드 시스템은 순차적인 열과 행을 기반으로 페이지 요소를 정렬하는 데 도움이 됩니다. 이 구조화된 프레임워크를 갖추면 텍스트, 이미지 및 실제로 모든 디자인 요소를 인터페이스 내에서 일관되고 질서 있는 방식으로 배치할 수 있습니다.

웹 및 모바일용으로 디자인할 때 우리가 디자인하는 페이지 또는 인터페이스의 목적은 다양한 사용자 흐름을 만드는 것입니다. 사용자 흐름에는 유사한 디자인 체계와 레이아웃을 반복하는 여러 화면이나 창이 포함되어 있는 경우가 많으므로 그리드를 사용하면 유사한 페이지에 대한 와이어프레임, 템플릿 또는 표준화된 레이아웃을 쉽게 개발할 수 있습니다.

그리드는 행과 열을 사용하여 페이지를 가로 및 세로로 분할하는 데 도움이 됩니다. 그리드 시스템은 디자이너가 요소를 조직적인 방식으로 배치하고 여러 페이지 또는 레이아웃에 대한 구성 요소를 디자인하는 모듈식 접근 방식을 제공할 수 있도록 하는 체계적인 접근 방식의 역할을 합니다. 그리드는 또한 각 디자인 요소가 준수해야 하는 크기, 간격 및 정렬을 지시하는 일관된 고정 측정 단위 집합을 정의합니다.

그리드 레이아웃의 개념은 종이, 특히 책과 신문에 손글씨를 배열하는 것을 목표로 타이포그래피의 맥락에서 사용되었을 때 인쇄 디자인에서 시작되었습니다. 즉, 그리드 기반 레이아웃에 의존하고 번성하는 현대 디자인의 많은 영역이 있습니다. 여기에는 웹 디자인, 인터랙션 디자인, 특히 반응형 디자인이 포함됩니다.

그리드 기반 레이아웃이 웹 제작자와 같은 디자인 프로세스에서 중요한 자산인 방법과 이유를 알아보기 전에 그리드 시스템을 구성하는 유형의 구성 요소에 대해 더 깊이 파헤쳐 보겠습니다.

웹 디자인 분야에는 익숙해지고 이해해야 할 많은 용어와 개념이 있지만 특히 웹 디자인에서 그리드의 역할에 관해서는 더욱 그렇습니다. 그리드 구조를 구성하는 많은 구성 요소들, 매우 다양한 그리드 유형, 그리고 콘텐츠와 디자인에 적합한 그리드 유형을 선택하는 사고 과정 사이에… 많은 것을 고려해야 합니다.

이 주제를 하나씩 분해해 보겠습니다.

웹사이트 디자인의 모든 그리드는 크든 작든, 얼마나 단순하든 복잡하든 상관없이 그리드 레이아웃으로 정의하는 공통 구성 요소가 있습니다.

기둥은 콘텐츠 영역의 높이에 걸쳐 있는 수직 섹션이며 그리드의 "구성 요소"로 간주됩니다. 열의 고유한 점은 그리드에 열이 많을수록 그리드가 더 유연하다는 것입니다. 이에 대해서는 곧 더 깊이 논의할 것입니다. 열의 너비는 항상 디자이너의 몫이지만 표준 관행의 관점에서 사용하는 전통적인 열 수는 데스크톱에서 12개, 태블릿에서 8개, 모바일에서 4개입니다. 대부분의 그리드의 열 너비는 60-80픽셀입니다. 열 너비는 실제 콘텐츠가 될 너비의 주요 영향 요인입니다.

짐작할 수 있듯이 행은 그리드의 가로 섹션입니다. 재미있게도 웹 디자인은 종종 그리드에서 행의 역할을 무시합니다. 그러나 이것은 우리가 모범 사례라고 부르는 것이 아닙니다. 행에 대해서도 나중에 자세히 설명합니다.

모듈은 행과 열이 교차하여 생성되는 공간의 단위입니다. 모듈 또는 콘텐츠 모듈은 종종 참조되는 페이지의 빌딩 블록으로 간주됩니다. 각 디자인 요소(텍스트, 이미지, 버튼 등)가 그리드의 직사각형 패턴으로 생성된 모듈에 적합하기 때문입니다. .

거터는 이러한 각 단위를 구분하는 열과 행 사이의 선입니다. 상당히 일반적인 거터 크기는 20px입니다. 거터의 역할은 열과 행 사이에 (크든 작든) 음의 공간을 형성하는 것입니다. 가장 단순한 용어로 거터는 열 사이의 공간과 행 사이의 공간입니다. 거터는 거터 너비가 레이아웃의 가장 중요한 세부 사항 중 하나인 석조 레이아웃에 특히 중요합니다.

여백은 형식과 콘텐츠의 바깥쪽 가장자리 사이의 음수 공간으로, "바깥 쪽 거터"라고도 생각할 수 있습니다. 측면 여백은 일반적으로 모바일에서 20-30픽셀 크기이며 데스크톱과 모바일 간에 많이 다릅니다.

여백은 디자인 요소 또는 컨테이너 주위에 공간을 만드는 속성으로 사용되는 HTML 및 CSS 전문 용어에서 여백이라는 단어를 인식할 수 있습니다. 여백의 크기는 옆에 있는 콘텐츠의 크기에 영향을 미치지 않습니다. 레이아웃 그리드의 컨텍스트에서 특히 콘텐츠의 외부 가장자리와 형식 사이의 공간을 나타내는 요소 주변의 공간을 정의합니다.