콘텐츠
이 기사는 웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지 인 .net 잡지 229 호에 처음 게재되었습니다.
HTML / CSS에서 페이지를 레이아웃 할 때 집중할 수있는 가장 중요한 것 중 하나는 페이지를 스캔 할 때 유형 블록 또는 유형 행이 형성되는 시각적 패턴 인 수직 리듬입니다.
제목, 목록 항목, 이미지 등과 같은 다른 것들이이 리듬에 영향을 미칠 수 있습니다. 좋은 수직 리듬을 갖는 것은 페이지의 가독성과 스캔 가능성을 높이기 때문에 가장 중요합니다.
선 높이에 ems를 사용하고 유형을 '단계'로 유지하는 방법에 대해 학습하여 기술적으로 적절한 수직 리듬을 얻는 방법에 대해 찾을 수있는 웹에는 몇 가지 훌륭한 자습서 (예 : 여기 및 여기 참조)가 있습니다. 방법.
계층
주의해야 할 기본 사항은 요소 사이의 선 높이와 페이지의 전체 시각적 계층 구조입니다. 적절한 선 높이 비율을 설정하는 것은 복잡한 디자인 연습이 될 수 있지만 마스터하는 것이 중요합니다. 계층 구조도 중요합니다. 이미지와 텍스트 요소가 시각적으로 서로 조화를 이루어야한다는 점에서 가장 중요한 요소는 일반적으로 더 크고 페이지에서 먼저 표시됩니다.
인쇄 디자이너는 수년 동안 수직 리듬에 대한 아이디어를 다루어 왔으며 웹 디자이너가 실제로 이러한 작업을 수행해야하는 것은 최근의 과거입니다. 그리드 레이아웃을 사용하여 웹 사이트를 구축하고 여러 화면 너비를 수용 할 수있는 반응 형 구현에주의를 기울여야하는 필요성이 계속 증가함에 따라 시각적 디자인 관점에서 기술적 인 관점보다 그 어느 때보 다 중요합니다.
확인해야 할 다섯 가지 예
1. 활자체 스타일의 요소 Robert Bringhurst가 쓴이 책은 타이포그래피 연구의 표준입니다. 그것을 읽고, 소비하고, 당신이 할 수있는 모든 방법으로 당신의 두뇌에 부어 라.
2. 프랭크 키 메로 일반적으로 절대적으로 놀라운 것 외에도 디자이너 Frank Chimero의 개인 웹 사이트의 최근 재 설계는 뛰어난 수직 리듬을 보여줍니다. 그는 시차 효과를 사용하여 페이지를 아래로 스크롤 할 때 리듬이 집으로 돌아가도록 도와줍니다.
3. 댄 세더 홀름 훌륭한 활자체 수직 리듬의 좋은 예는 Dan Cederholm의 블로그를 참조하세요. 카피와 헤드 라인의 라인 높이는 완벽한 비율입니다.
4. 포커스 랩 웹 디자인 및 브랜딩 회사 인 Focus Lab은 계층 구조를 능숙하게 사용하여 방문자에게 가장 중요한 것을 전달합니다.
5. 타이포 폰 데리 Typography Studio Typofonderie의 웹 사이트는 이미지와 텍스트로 훌륭한 수직 리듬을 가지고 있습니다. 요소 사이의 간격은 웹 사이트 전체에 걸쳐 비례하며 메인 이미지와 보조 이미지 / 섹션 사이의 계층 구조가 완벽합니다.
Creative Bloq에서 실험적 디자인의 놀라운 10 가지 예를 살펴보세요.
