Bạn đã bao giờ nhìn vào một thiết kế và suy nghĩ, “Một cái gì đó không cảm thấy đúng”? Nếu bạn không thể đưa ngón tay của bạn vào những gì nó được, tỷ lệ cược là tốt đó là một vấn đề với hệ thống phân cấp hình ảnh hoặc typographic của bạn.
Khi bạn nhồi nhét nội dung vào một trang có khối lượng ngắt quãng, chữ in đậm và in nghiêng – bạn chắc chắn sẽ có kết quả khó chịu. Các trang tìm kiếm tốt cần tình yêu nghiêm túc và trong những năm qua tôi đã phát hiện ra sáu mẹo đặc biệt hữu ích cho những thứ thiết kế mà mọi người thực sự muốn đọc.
1. Biết nội dung của bạn
Để tạo ra hệ thống phân cấp typographic thành công, điều quan trọng là bạn hiểu cả hai yếu tố cần thiết trên trang — và tầm quan trọng tương đối của chúng.
Theo truyền thống, sách được chia thành các phần, chương, phần và đoạn văn, mỗi cuốn sách có quy tắc sắp xếp riêng. Trong thế giới trung tâm web ngày nay, chúng ta vẫn nắm giữ nhiều nguyên tắc hướng dẫn. Các chương bây giờ sống trên các trang riêng lẻ, các bảng nội dung được tổ chức trong thanh điều hướng và các đoạn văn và phần vẫn giữ nguyên như trước đây.
Cách tiếp cận của Apple Music đối với phân cấp typographic là lý tưởng — tối thiểu và dễ đọc.
Nếu bạn nhìn vào một trang điển hình từ trang web của Apple Music ở trên, bạn sẽ nhận thấy họ đặc biệt chú ý đến hệ thống phân cấp typographic của họ. Có sự phân biệt rõ ràng giữa tiêu đề trang, đoạn văn bản dẫn và các phần nội dung riêng lẻ, bao gồm các tiêu đề của các phần đó.
Trải nghiệm đọc của các trang được tạo thủ công hoàn hảo này có vẻ trơn tru và dễ dàng, nhưng yêu cầu nhà thiết kế phải suy nghĩ kỹ về nội dung, yếu tố cá nhân và tầm quan trọng tương đối của chúng.
Vì vậy, trước khi bạn sao chép / dán một đoạn văn bản của khách hàng, hãy dành chút thời gian để thực sự đọc nội dung của nó. Bạn sẽ nhanh chóng có được một ý tưởng tốt hơn về cách bạn cần cấu trúc nó.
2. Phân tách các phần từ các đoạn văn
Đoạn văn là một đoạn văn bản nhỏ được phân cách bằng dòng mới hoặc thụt đầu dòng. Một phần là một nhóm các đoạn giao dịch với một chủ đề nhất định, thường là với một tiêu đề.
Chúng ta hãy xem ví dụ trên. Đối với mắt chưa được đào tạo, hai trang này trông giống nhau, nhưng trải nghiệm đọc rất khác nhau.Tại sao? Bởi vì trang bên trái không phân biệt giữa các phần và đoạn riêng lẻ. Khoảng cách dòng là giống hệt nhau, làm cho trang cảm thấy giống như một cuộc chạy đua bất tận cho người đọc. Đây là một phân tích trong hệ thống phân cấp typographic.
Tuy nhiên trên trang bên phải, chúng ta có thể thấy một phòng hơi thở nhỏ giữa các phần (còn gọi là phần phá vỡ) cung cấp cho nội dung cấu trúc rất cần thiết và dễ đọc hơn. Khoảng cách giữa các đoạn văn cũng đã được điều chỉnh để ít xâm phạm hơn, nhưng vẫn hiển thị. Tất cả điều này dẫn đến một thiết kế trang hài hòa hơn và trải nghiệm đọc tốt hơn.
Vì vậy, thời gian tới, đừng quên để cho phần của bạn nghỉ ngơi.
3. Thử nghiệm với các loại kết hợp khác nhau
Người New York tạo ra hệ thống phân cấp typographic thông qua các cỡ chữ, kiểu chữ, màu sắc và cách bố trí khác nhau.
Kích thước, màu sắc, vị trí, kiểu chữ. Đây chỉ là một số thuộc tính mà bạn có thể thử nghiệm để tạo phân cấp typographic. Sự kết hợp phù hợp sẽ cung cấp cho nội dung của bạn một cái nhìn hoàn toàn mới, làm cho tiêu đề phần pop và giúp hướng dẫn người đọc mắt của bạn thông qua trang.
Theo quy tắc chung, luôn chọn kiểu tiêu đề của bạn trước khi giải quyết trên loại nội dung . Nếu không, bạn có thể thấy mình sử dụng các phiên bản màu lớn hơn. Hoặc màu khác nhau của cùng một kiểu chữ. Thay vào đó, bạn nên tìm kiếm các kết hợp tuyệt vời để mang lại hương vị phù hợp cho dự án của bạn. Đôi khi, đó là tất cả những gì bạn cần để làm cho công việc của bạn trông thật đẹp.
4. Sử dụng loại lớn hơn cho văn bản nội dung
Đây là kích thước thực tế của bản sao cơ thể trên Forbes . Dù ý kiến của bạn về nó là gì, nó chắc chắn làm cho một dễ đọc.
Nếu bạn ghét nhìn thấy loại lớn trên màn hình. Đây là những gì các chuyên gia khả năng sử dụng Oliver Reichstein đã nói về nó:
“16 pixel không lớn. Đó là trình duyệt kích thước văn bản hiển thị theo mặc định. Đó là trình duyệt kích thước văn bản được thiết kế để hiển thị… Nó có vẻ lớn lúc đầu nhưng một khi bạn sử dụng nó. Bạn nhanh chóng nhận ra lý do tại sao tất cả các nhà sản xuất trình duyệt đã chọn. Điều này làm kích thước văn bản mặc định ”.
Nếu bạn vẫn chưa thuyết phục, hãy thử đọc một bài viết dài với phông chữ 12px. Có thể bạn sẽ không làm cho nó kết thúc. Việc sử dụng loại nhỏ bắt nguồn từ độ tuổi khi màn hình máy tính quá nhỏ, nên cần phải hiển thị càng nhiều nội dung càng tốt. Không ai đang nghĩ về thiết kế hoặc khả năng đọc lại sau đó.
Thời gian đã thay đổi và do đó bạn nên. Sử dụng loại lớn hơn!
5. Đặt hình ảnh lên trên nội dung liên quan
Trang bên trái khó tiêu hóa hơn trang bên phải. Bạn thực sự không thể biết được hình ảnh thuộc về văn bản ở trên hay bên dưới.
Hướng đọc tự nhiên của chúng tôi là trái sang phải, từ trên xuống dưới. Nhưng có một nhược điểm. Bộ não của chúng tôi nhận thức và xử lý hình ảnh nhanh hơn nhiều so với văn bản, có nghĩa là chúng ta nhìn thấy hình ảnh đầu tiên, sau đó tự nhiên tiến hành đọc bất cứ điều gì chúng tôi tìm thấy theo chúng.
Khi bạn đặt mô tả ở trên hình ảnh. Bộ não của bạn không thể xử lý thông tin mà không cần phải nâng vật nặng. Dẫn đến trải nghiệm đọc kém.
Vì lý do này, nội dung đi kèm với hình ảnh phải luôn ở bên dưới hình ảnh.
6. Mô phỏng văn bản cho các dự án giàu nội dung
Đối với hầu hết các dự án, bạn có thể thử nghiệm với loại trong khi làm việc với các yếu tố khác trong bố cục của mình. Rất có thể bạn sẽ không cần nhiều hơn tiêu đề trang, tiêu đề phần và văn bản đoạn văn.
