Đây là phần 5 của một series chuyên về thiết kế UI. Bạn nên đọc các phần trước trước khi bắt đầu đọc phần này.

Luật số 5: Kỹ thuật pop và un-pop

Thiết kế chữ sao cho đẹp và dễ nhìn thì thường dùng những đặc tính tương phản, ví dụ như kích cỡ to đi cùng với kiểu dáng nhẹ nhàng.

Theo quan điểm của tôi thì thiết kế chữ là một trong những phần khó nhất của việc thiết kế UI. Để tạo hiệu ứng nổi bật cho chữ thì bạn có thể dùng những thuộc tính dưới đây

  • Kích cỡ (to hay nhỏ)
  • Màu sắc (màu nhiều tương phản hay ít tương phản, màu sáng hay màu tối)
  • Độ đậm của font (đậm hay mảnh)
  • Viết hoa (viết thường toàn bộ, VIẾT HOA TOÀN BỘ, Viết Hoa Chữ Cái Đầu )
  • Viết in nghiêng
  • Khoảng cách giữa các chữ
  • Margin (mặc dù đây không phải là thuộc tính của chữ, nhưng có thể dùng để gây ấn tượng nên để vào đây)

 

Có một vài phương pháp nữa để gây ấn tượng với người đọc, nhưng không hay được sử dụng và tôi cũng không thể khuyên bạn sử dụng như là:

  • Gạch chân. Chữ gạch chân ngày nay chỉ mang ý nghĩa là một link, và bạn không nên thể hiện một ý nghĩa khác nữa.
  • Chữ với màu nền. Không phổ biến nhưng trang web 37signals đã từng sử dụng một thời gian cho những link của họ
  • Chữ bị gạch ngang. Đừng dùng những thứ từ những năm 90s như thế!

Theo kinh nghiệm cá nhân của tôi thì, khi có một dòng chữ mà dường như không thể tìm ra cách thiết kế sao cho đúng đắn, thì thường không phải vì chưa thử viết hoa hoặc làm tối đi, mà là do chúng ta chưa tìm ra cách kết hợp cho những đặc tính tương phản với nhau.

Up-pop và down-pop

Bạn có thể chia tất cả các thể loại thiết kế chữ vào 2 nhóm

  • Thiết kế làm tăng tính hiện diện của chữ: To, đậm, viết hoa, v.v…
  • Thiết kế làm giảm tính hiện diện của chữ: Nhỏ, ít tương phản, ít margin, v.v…

Chúng ta sẽ gọi đó là “up-pop” và “down-pop“, theo cách gọi ưa thích của giới designer. Chúng ta sẽ không gọi một cách nhàm chán kiểu như là “độ nặng về thị giác” 🙂

Material Design

 

Có rất nhiều đặc tính up-pop ở trong chữ “Material Design”: cỡ lớn, độ tương phản caofont rất đậm.

Footer

 

Chữ ở dưới footer này thì ngược lại, cực kỳ down-pop: nhỏ, ít tương phảnfont rất mảnh.

Và bây giờ là phần quan trọng:

TIêu đề của page là phần duy nhất đi với toàn bộ các thuộc tính up-pop. Tất cả mọi thứ khác, cần cả up-pop và down-pop.

Nếu cần phải nhấn mạnh một thành phần nào đó trong trang web, hãy dùng cả up-pop và down-pop. Như thế sẽ ngăn nó trở nên quá nổi trội nhưng lại giữ được độ nhấn về thị giác.

Blu

 

Thiết kế này của trang web Blu Homes là cực kỳ hoàn hảo. Tiêu đề rất lớn, nhưng chữ cần nhấn mạnh thì được viết thường. Nếu lại dùng một thuộc tính up-pop để nhấn mạnh thì sẽ là quá nổi trội.

Blu

 

Những con số ở đây hướng mắt bạn trực tiếp vào màu sắc và các khoảng cách cân chỉnh. Nhưng hãy lưu ý là chúng cũng down-pop với một font rất mảnh và ít tương phản hơn màu đen.
Chữ bên dưới con số thì ngược lại, tuy nhỏmàu xám, nhưng lại được viết hoafont rất đậm.

Ở đây tất cả đều là nghệ thuật về sự cân bằng.

Contents Magazine

 

Contents Magazine là một case study rất tốt về up-pop và down-pop:

  • TIêu đề bài viết là thứ duy nhất không in nghiêng. Trong trường hợp này, Font đậm cùng với in thẳng là cách hiệu quả nhất để thu hút mắt nhìn của người đọc.
  • Tên tác giả được in đậm và trở nên nột bật hơn chữ “by” đằng trước.
  • Chữ “ALREADY OUT” trở nên nhỏ bé, tuy nhiên nó được viết hoa, khoảng cách giữa chữ được nới rộng cùng với margin hào phóng xung quanh. Bạn sẽ nhìn thấy nó vào đúng khoảnh khắc mắt bạn chạm đến nó.

Selected và hovered

Thiết kế chữ được chọn (selected) và chữ đang năm dưới con trỏ chuột (hovered) là bài học tiếp theo, và vì thế cũng khó hơn.

Thông thường thì thay đổi kích cỡ, viết hoa hoặc tăng độ đậm font sẽ thay đổi mất độ rộng của khoảng chứa chữ, và vì thế làm hỏng thiết kế. Như vậy những hiệu ứng có thể sử dụng còn lại là:

  • Màu sắc chữ
  • Màu nền
  • Bóng phủ
  • Gạch dưới
  • HIệu ứng (raising, lowering, v.v…)

Có một cách dễ làm và hiệu quả: đổi chữ màu trắng thành chữ có màu, hoặc đổi chữ có màu ngược trở lại màu trắng và làm tối nền xung quanh.

Selected and Hovered

 

Nhìn vào hình trên bạn sẽ thấy, phần được select đổi thành chữ trắng trên một nền tối hơn và trở nên rất tương phản.

Tôi sẽ nhắc lại với bạn một lần, thiết kế chữ là phần rất khó.

Cứ mỗi lần tôi nghĩ “Có khi cái chữ này không thể làm cho đẹp được” thì đó là tôi đã sai. Đơn giản là cần phải làm tốt hơn nữa, và cần phải thử nhiều thêm nữa.

Vì thế tôi có một lời khuyên dành cho bạn: nếu như chữ của bạn trông vẫn chưa được đẹp thì đừng lo lắng vội. Nó có thể trở nên đẹp nếu bạn làm tốt hơn nữa. Hãy tiếp tục thử và làm chính chúng ta giỏi lên trước hết…

… Phần sau: Chỉ dùng những font tốt …

Nguồn: kipalog.com