NộI Dung
Bài báo này xuất hiện lần đầu tiên trên tạp chí .net số 229 - tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và phát triển web.
Một trong những điều quan trọng nhất mà bạn có thể tập trung khi nói đến việc bố trí một trang trong HTML / CSS là nhịp điệu theo chiều dọc - mô hình trực quan mà các khối loại hoặc dòng của loại hình thành khi bạn quét xuống trang.
Những thứ khác có thể ảnh hưởng đến nhịp điệu này như tiêu đề, mục danh sách, hình ảnh, v.v. Có nhịp điệu dọc tốt là điều tối quan trọng vì nó giúp khả năng đọc và khả năng quét của (các) trang của bạn.
Có khá nhiều hướng dẫn tuyệt vời (Ví dụ: xem tại đây và tại đây) trên web, nơi bạn có thể tìm thấy về cách đạt được nhịp dọc thích hợp về mặt kỹ thuật bằng cách sử dụng ems cho chiều cao dòng của bạn và tìm hiểu về cách giữ cho loại của bạn 'đúng pha' có nghĩa.
Hệ thống cấp bậc
Những điều cơ bản cần chú ý là chiều cao dòng giữa các phần tử và hệ thống phân cấp trực quan tổng thể trên trang. Đặt tỷ lệ chiều cao đường thẳng thích hợp có thể là một bài tập thiết kế liên quan nhưng điều quan trọng là bạn phải nắm vững. Hệ thống phân cấp cũng rất quan trọng, trong đó các yếu tố hình ảnh và văn bản phải hài hòa với nhau về mặt trực quan - những thứ quan trọng nhất thường lớn hơn và xuất hiện đầu tiên trên trang.
Các nhà thiết kế in ấn đã xử lý ý tưởng về nhịp điệu dọc trong nhiều năm và chỉ trong thời gian gần đây, các nhà thiết kế web mới phải thực sự bắt tay vào công cụ này. Với nhu cầu ngày càng tăng trong việc xây dựng các trang web bằng cách sử dụng bố cục lưới và chú ý đến các triển khai đáp ứng để phù hợp với nhiều chiều rộng màn hình, điều quan trọng hơn bao giờ hết từ quan điểm thiết kế trực quan, có lẽ còn hơn cả quan điểm kỹ thuật.
Năm ví dụ để kiểm tra
1. Các yếu tố của phong cách typographic Cuốn sách này của Robert Bringhurst là tiêu chuẩn cho việc nghiên cứu kiểu chữ. Đọc nó, tiêu thụ nó, đổ nó vào bộ não của bạn bất kỳ cách nào bạn có thể.
2. Frank Chimero Bên cạnh việc hoàn toàn tuyệt vời nói chung, thiết kế lại gần đây của trang web cá nhân của nhà thiết kế Frank Chimero thể hiện một nhịp điệu dọc tuyệt vời. Anh ấy sử dụng hiệu ứng thị sai để giúp điều khiển nhịp điệu về nhà khi bạn cũng cuộn trang xuống.
3. Dan Cederholm Để có một ví dụ điển hình về nhịp điệu dọc của typographic tuyệt vời, hãy xem blog của Dan Cederholm. Chiều cao dòng của bản sao và dòng tiêu đề theo tỷ lệ hoàn hảo.
4. Phòng thí nghiệm Focus Công ty thiết kế web và xây dựng thương hiệu Focus Lab sử dụng hệ thống phân cấp một cách khéo léo để giúp truyền đạt những gì quan trọng nhất đối với khách truy cập.
5. Typofonderie Trang web cho Typofonderie Studio Typography có nhịp điệu dọc tuyệt vời với hình ảnh và văn bản của nó. Khoảng cách giữa các phần tử theo tỷ lệ trên toàn bộ trang web và hệ thống phân cấp giữa hình ảnh chính và hình ảnh / phần phụ là hoàn hảo.
Khám phá 10 ví dụ tuyệt vời về thiết kế thử nghiệm tại Creative Bloq.
