3 nguyên tắc thiết kế web bằng ngôn ngữ Front-end

3 nguyên tắc thiết kế web bằng ngôn ngữ Front-end

Có một số nguyên tắc thiết kế hẳn đã in hằn trong tâm trí bạn. Những điều mà các nhà thiết kế lâu năm đề xuất, những yếu tố về lý thuyết thiết kế, hay những gì mà bạn đã học được từ trường lớp. Nhưng có lẽ bạn cũng nên thử phá vỡ một vài trong số đó xem sao?

Xu hướng thiết kế và khái niệm thay đổi liên tục theo thời gian. Nói một cách cụ thể, các tiến bộ công nghệ đã thay đổi một số quy tắc này. Thiết kế là một quá trình phát triển và những gì hiệu quả hôm nay có thể thay đổi trong ngày mai. Với suy nghĩ đó, đây là ba quy tắc thiết kế bạn thực sự nên phá vỡ.

1. Sử dụng font chữ Sans Serif (không chân) trong thiết kế Web

Mọi nhà thiết kế web đều từng nói rằng bạn cần phải dùng typeface (kiểu chữ) sans serif cho các trang mạng. Điều đó giờ đã xưa rồi. Quên nó đi! Một sự kết hợp tinh tế giữa các typefaces dễ đọc mới chính là xu thế hiện nay. Nó bao gồm serifs (có chân), sans serifs và cả những phong cách như novelty (mới lạ) hay script (viết tay).

Chìa khoá để chọn ra được một kiểu typeface (hay bảng chữ) hợp lý đó là đi chọn lọc những kiểu dễ đọc. Đã có một số nghiên cứu được thực hiện nhằm củng cố cho ý kiến này. Jakob Nielsen của Nielsen Norman Group, vốn tập trung vào trải nghiệm người dùng, nghiên cứu và đào tạo, cho rằng các màn hình tốt hơn đang thay đổi các nguyên tắc về typography trong thiết kế web.

Nguyên tắc sử dụng typography trên mạng trước đây rất đơn giản: cứ dính chặt lấy kiểu sans-serif. Bởi lẽ màn hình máy tính vẫn còn quá tệ để có thể hiển thị serif một cách chính xác, việc cố gắng sử dụng serif ở kích thước văn bản khiến cho nét chữ bị mờ đi. Thật không may, nguyên tắc mới lại không rõ ràng như cái cũ. Nghiên cứu về mức độ dễ hiểu không xác định được liệu font serif có thực sự tốt hơn sans serif hay không.

Sự khác biệt về tốc độ đọc giữa serif và sans serif rõ ràng là không đáng kể. Do đó, không có nguyên tắc sử dụng rõ rệt nào cho thấy sử dụng cái này thì hơn cái kia, vì vậy bạn có thể chọn lựa dựa trên những cân nhắc khác – như thương hiệu hay cảm xúc được truyền đạt bởi một kiểu font chữ cụ thể. Vì thế hãy cứ phá vỡ cái nguyên tắc sans serif cũ rích ấy đi. Sau đây là một số điều bạn cần cân nhắc khi xét xem nên sử dụng font nào và liệu nó có dễ đọc hay không:

  • Sử dụng chữ có nét với độ đậm tầm trung hoặc bình thường. Định dạng siêu mỏng có thể sẽ hơi khó đọc.
  • Có yếu tố chiều cao (x-height) trung bình. Chữ siêu mỏng và cao thường gây khó đọc.
  • Khoảng cách giữa các chữ nhất quán, vừa đủ mà không lạm dụng kiểu chữ ghép hay hoạ tiết hoa.
  • Sử dụng kiểu chữ trang trí (ornate) cho khối văn bản nhỏ và chỉ cho một mục đích nhất định.
  • Chọn serif hay sans serif cho những nội dung lớn hơn. Tìm những chữ cái có định dạng đặc biệt lại dễ đọc trong nháy mắt.

2. Tránh xa hình nền với màu sắc rực rỡ

Suốt một khoảng thời gian chỉ có trắng và những màu sắc trung tính được phép sử dụng làm background (phông nền) cho các trang web. Tin được không! Những màu sắc rực rỡ, sắc nét có thể thừa sức là yếu tố tạo nên một background đẹp. Màu sắc giúp mang lại ấn tượng ban đầu mạnh mẽ cho người dùng, thiết lập tông màu cho thiết kế và là một cách phá vỡ các kiểu mẫu thiết kế cũ mèm hết sức thú vị.

Ngày càng nhiều trang web và thương hiệu lớn đang sử dụng màu sắc nhằm tạo ra một trải nghiệm đầy thú vị và gắn kết. Và người dùng có vẻ cũng rất thích điều đó. Phần thứ hai của nguyên tắc dễ loại bỏ này đó là, giới hạn số lượng màu trong bảng màu của bạn. Dù có một bảng màu thương hiệu đặc biệt là một ý kiến hay nhưng bạn cũng có thể thêm vào các dự án cá nhân của mình một chút năng lượng.

Những bảng màu đằng sau Material Design (Thiết kế chất liệu) kết hợp với những màu sắc rực rỡ hơn đã mở ra một thứ được coi là sang trọng và kệch cỡm. Nhiều màu sắc được chấp nhận hơn. Ngày càng nhiều trang web và thương hiệu lớn đang sử dụng màu sắc nhằm tạo ra một trải nghiệm đầy thú vị và gắn kết. Và người dùng có vẻ cũng rất thích điều đó.

Đương nhiên bạn cũng cần một bảng màu đơn giản làm chuẩn mực cho sự nhất quán, nhưng cũng có thể thêm một số màu khác (và tươi sáng hơn) cho những dự án đặc biệt. Bạn không cần phải thiết kế lại toàn bộ chất liệu thương hiệu của mình để có một background màu tím hay xanh lá rực rỡ, nhưng bạn cũng có thể kết hợp thêm nhiều màu sắc xu hướng vào các dự án theo một số cách sau.

  • Phủ một lớp màu lên hình ảnh.
  • Chọn màu sáng cho tiêu đề.
  • Đổi background trung tính sang cái gì đó đáng nhớ hơn.
  • Sử dụng màu sắc nổi bật hơn cho các nút ấn hay các phần kêu gọi hành động (Chúng không nhất thiết phải là đỏ hay xanh).
  • Sử dụng khối màu cho các trạng thái rê chuột để khuyến khích tương tác.

3. Tạo sự cân bằng đối xứng

Thời gian đầu trong sự nghiệp thiết kế của tôi, có quá nhiều nhà thiết kế lâu năm chú trọng vào sức mạnh của thiết kế đối xứng hoàn toàn nhằm tạo ra sự hài hoà và cân bằng. Nhìn lại thì đa số những concept đó đều buồn tẻ và an toàn quá mức.

Sự bất đối xứng có thể giúp bạn tạo nên sự hứng thú và cân bằng trực quan mà không cần đến thiết kế xẻ-làm-đôi. Đương nhiên là vẫn còn chỗ cho thiết kế đối xứng, tuy nhiên việc tạo ra sự cân bằng từ trọng lượng, không gian và các yếu tố đối nghịch còn có thể thú vị hơn rất nhiều. Để tận dụng tối đa sự bất đối xứng trong các dự án thiết kế, hãy cân nhắc những điều sau để tạo nên một cảm giác hài hoà và visual flow (dòng chảy thị giác):

  • Cân bằng giữa các yếu tố và không gian. Một thành phần nặng nề có thể trở nên hài hoà hơn khi được kết hợp với khoảng trắng.
  • Đặt trọng tâm vào các chuyển động theo ánh mắt qua thiết kế như dự định. Hãy suy nghĩ về cách mà người dùng đọc, rồi bắt đầu với các thành phần và văn bản mang tính nặng nề hơn ở bên trái mà “dịch chuyển” về hướng bên phải.
  • Dùng màu sắc để tạo ra tiêu điểm.
  • Sắp xếp mọi thứ dựa trên một hệ lưới để tạo cảm giác có tổ chức và trôi chảy.
  • Chú ý đến trọng lượng. Các thiết kế bất đối xứng không nên mang lại cảm giác “lệch lạc”. Người dùng có thể lướt qua các nội dung một cách dễ dàng. Sử dụng những thành phần tĩnh như điều hướng để tạo ra một container (vật chứa) cho các thành phần bất đối xứng.

Kết luận

Phá vỡ các nguyên tắc thiết kế nghe có vẻ tiếp thêm năng lượng … hoặc gây thảm hoạ. Hãy đưa ra những sự lựa chọn đúng đắn khi cân nhắc nên phá vỡ quy tắc gì (và khi nào) bằng cách nghĩ về mục tiêu mà bạn đặt ra cho dự án hay thiết kế đó. Làm sao để việc phá vỡ một quy tắc nào đó sẽ khiến cho dự án này trở nên tốt hơn? Liệu nó có cải thiện được khả năng sử dụng, chức năng hay khả năng giúp người dùng hiểu rõ thông điệp không?