[디자인] 8-Point Grid : 소개 - 1

디자이너로서 웹 사이트, 잡지 또는 모바일 앱 중 어느 것을 디자인하든 그리드-Grid 라는 용어를 들어보았을 것입니다. 모든 종류의 콘텐츠 준비를 위한 그리드가 있습니다. 우리는 가로 그리드를 사용하여 내용을 가로로 맞 춥니 다. 텍스트 본문을 세로로 정렬하는 Baseline grids입니다. 소프트 그리드 및 하드 그리드로 우리가 얼마나 엄격하게 준수하는지 설명합니다. 브린 잭슨 (Bryn Jackson)이 열심히 이야기 한 것을 듣고 필자는 8pt 그리드 시스템에 관심을 보였습니다. 나는 8pt 시스템이 내 디자인에 어떤 이점을 줄 수 있는지 알아보기로했다.

presentation

문제가 뭐지? 나는 8pt 시스템을 사용하지 않고서도 잘해오고 있는데.

Bootstrap이나 Foundation과 같은 디자인 시스템을 사용하여 웹 프로젝트를 시작하고 심지어 비슷한 시스템 몇 개를 직접 만들려고했습니다. 최근까지는 버튼과 같은 구성 요소를 개별적으로 아름답게 배치 할 수 있지만 더 큰 수프의 요소 및 내용으로 설정할 때 전반적인 디자인을 저하시킬 수 있다는 사실을 깨닫지 못했습니다. 이는 전반적인 페이지에 대한 예술적으로 즐거운 구성에 도달하는 것이 지속적으로 만들기가 어렵 기 때문입니다. 디자인 아이디어를 사용하여 여기저기서 몇 가지 요소를 미세하게 만들 수 있지만 동일한 비전을 공유하는 디자이너와 개발자 팀에 의존 할 수는 없습니다. 내 요소의 간격 관계를 정의하는 시스템이 없으면 일관성을 유지하기가 어렵습니다.
이 비교에서 양식의 요소를 수직으로 정렬하는 8pt 그리드 시스템과 공간 및 크기 요소에 임의의 숫자를 사용하는 보편적 인 디자인 시스템을 볼 수 있습니다.
presentation

내 인터페이스가 일관성을 유지해야하는 이유는 무엇입니까?

강요는 아닙니다. 그러나 전문적이고 신뢰할 수있는 외관을 원한다면 그렇게해야합니다. 온라인 쇼핑을 한 적이 있다면 구매를 클릭하면 신용 카드 입력 양식이 사이트와 다르게 보입니다. 상상이 가시죠? ^^

Bootstrap 또는 이와 유사한 시스템을 채택하지 않는 이유는 무엇입니까?

부트 스트랩은 설계자 / 개발자가 컨텐츠와 사용자 경험에 집중할 수 있도록하는 독창적인 구성 요소 라이브러리입니다. 웹을 통해 수많은 웹 사이트의 품질을 높였습니다. 그러나 측정 단위가 일관성이 없으면 특히 두 명 이상의 디자이너가있는 프로젝트에서 페이지 간의 레이아웃 불일치가 발생할 수 있습니다.
Pivotal에서 자체 브랜드 미학을 구축 할 때 종종 고유 한 구성 요소와 레이아웃을 만들어야합니다. 최근 UI 시스템을 통합하기 위해 노력하면서 우리 제품의 모든 부분에서 브랜딩이 약간 다름을 알게되었습니다. 전 세계의 다른 팀에 의해 구축 된 전반적인 개념은 동일하지만 실행은 약간 다릅니다. 어느 쪽이 잘못 되었습니까?
presentation
진실은 그들 중 누구도 아닙니다. 그들은 다른 높이와 패딩을 가지고 있지만 스타일 규칙 뒤에있는 생각을 명확하게 설명 할 수있는 시스템이 없기 때문에 왜 그것을 따라야합니까?

글쎄, 당신의 현명한 해결책은 무엇입니까?

8pt 그리드 시스템. 페이지의 요소 크기를 조정하고 간격을 늘리려면 8 씩 증가분을 사용하십시오. 나에게 이것은 정의 된 높이나 너비, 여백 또는 패딩이 8 씩 증가한다는 것을 의미합니다.
presentation

왜 8pts일까?

다양한 화면 크기와 픽셀 밀도가 계속해서 증가하여 asset 생성 작업이 디자이너에게 더욱 복잡해졌습니다. 크기 및 공간 요소에 8과 같은 짝수를 사용하면 다양한 장치를 쉽고 일관되게 확장 할 수 있습니다.
예를 들어 1.5 배 해상도의 장치는 홀수를 깨끗이 렌더링하는 데 어려움을 겪습니다. 5px를 1.5x로 스케일링하면 반 픽셀이 오프셋됩니다.
presentation

좋아, 나는 짝수를 얻는다. 그러나 진지하게, 왜 6이나 10이 아닌가?

인기있는 화면 크기의 대부분은 8로 나눌 수 있으며 이는 쉽게 맞습니다. 8 씩 증분하여 6 포인트 시스템과 같은 변수로 오버로드하거나 10 포인트 시스템처럼 제한하지 않고도 많은 양의 옵션을 제공합니다. 궁극적으로 잠재 고객에게 맞는 크기를 결정해야합니다. "시스템"은 따라하기 쉽고 반복하기 쉬운 경우에만 좋습니다.

8pt 시스템의 가치는 무엇입니까?

디자이너 : 효율성, 요소 간 품질의 리듬을 유지하면서 의사 결정을 최소한으로할 수 있습니다.

팀의 경우 : 디자이너와 개발자 간의 의사 소통의 쉬운 시스템 (픽셀을 넘기지 않음). 개발자는 매번 측정하지 않고도 8pt 단위로 쉽게 사용할 수 있습니다.

사용자 : 신뢰할 수있는 브랜드에 대한 일관된 디자인. 원하는 장치에서 흐릿한 반 픽셀 오프셋이 없습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
혹시나 읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 달아주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정고 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역글입니다.
원본링크입니다.