Thiết kế web chữ thanh kết hợp nét chữ mảnh với khoảng cách rộng để trang đi chậm lại, cho ảnh và thông tin có thời gian được nhìn. Phong cách Chữ thanh, nhiều khoảng thoáng hợp với thương hiệu muốn khách ở lại lâu hơn là bấm nhanh hơn.
Điều khó của lối này không nằm ở cách chọn phông, mà ở chỗ phải biết khoảng trống đang làm việc gì. Mẫu tham chiếu nằm trong thư viện giao diện Mạnh An AI.
Vì sao mẫu Êm Nhà thoáng dù có nhiều khối?
Mẫu Êm Nhà thoáng nhờ lề rộng, chữ mảnh cỡ lớn và ảnh sáng, chứ không nhờ ít nội dung. Là một ví dụ thiết kế web chữ thanh, trang này vẫn có ảnh phòng ngủ tràn khổ, ba ảnh vải, bốn bộ chăn, ba không gian, bốn lý do và chân trang đầy đủ.
Khi mới nhìn, ta dễ tưởng đây là một trang vắng. Nhìn kỹ lại, mọi thứ một cửa hàng cần đều có mặt: chất liệu, sản phẩm, màu lựa chọn, nơi sử dụng và cách liên hệ. Chỉ khác là chúng không chen vai nhau, và dòng tiêu đề “Dịu nhẹ cho từng giấc ngủ.” được một mảng tường sáng đỡ phía sau.
Cũng cần nói thật về một chỗ yếu. Chữ trắng mảnh đặt trên dải ảnh phủ nâu là nơi kém rõ nhất, còn các chú thích xám nhỏ dưới ảnh vải nhìn khá nhạt. Đó là điều nhìn thấy trên ảnh tĩnh, phải đo lại khi dựng trang thật.
Khoảng trống làm việc gì trên một trang?
Khoảng trống cho biết cái gì đi với cái gì, và cái gì đáng được nhìn lâu. Nó không phải phần còn lại sau khi đã xếp xong nội dung, mà là một thứ phải được sắp đặt như ảnh và chữ.
Hai vật đứng gần nhau được hiểu là cùng một ý, hai vật cách xa được hiểu là hai chuyện. Vì thế, khoảng cách giữa các nhóm thông tin nên rộng hơn hẳn khoảng cách bên trong một nhóm, nếu không sự rộng rãi chỉ khiến mọi thứ trôi dạt. Nhiều trang loãng đi không phải vì quá trống, mà vì khoảng trống ở đâu cũng bằng nhau.
Có một cách kiểm tra khá giản dị. Hãy xác định thông điệp của từng phần trước, rồi nhìn xem khoảng trống có đang dồn mắt về đúng thông điệp đó hay không. Nếu một khoảng trống không dẫn mắt đi đâu, có lẽ nó chỉ đang che giấu việc còn thiếu nội dung.
Nét mảnh cần được đỡ như thế nào?
Nét mảnh cần cỡ chữ lớn, màu đủ đậm và nền yên tĩnh; thiếu một trong ba thì vẻ thanh lịch biến thành khó đọc. Một tiêu đề mảnh ở cỡ lớn trông duyên dáng, còn cùng nét ấy ở cỡ nhỏ thì gần như mất hút.
Vì vậy, tiêu đề có thể rất thanh, nhưng phần mô tả nên về một kiểu chữ dễ đọc hơn, như chính mẫu gốc đã làm. Tiếng Việt lại đòi hỏi thêm một điều: dấu thanh và dấu mũ là những nét nhỏ nhất của chữ, nên phông phải được vẽ đủ dấu, và dòng cần đủ cao để các dấu không chạm nhau.
Con số cũng giúp giữ mình tỉnh táo. Theo tiêu chí tương phản tối thiểu của WCAG, chữ thường cần ít nhất 4,5:1. Một màu xám ấm đề xuất #8B8780 trên nền #FBFAF7 chỉ đạt khoảng 3,42:1, trong khi #5E5A54 đạt khoảng 6,56:1 mà vẫn giữ được vẻ dịu. Đây là mã để tham khảo, không phải mã đo từ ảnh mẫu.
Trên điện thoại, sự thoáng có còn giữ được không?
Có, nhưng phải chuyển từ khoảng trống hai bên sang khoảng trống trên dưới. Màn hình hẹp không có lề rộng để dành, nên nhịp chậm đến từ khoảng cách giữa các khối và những đoạn văn thật ngắn.
Ảnh trên điện thoại cần được chọn lại chứ không chỉ thu nhỏ, vì một căn phòng rộng khi thu lại sẽ thành một vệt màu. Sau mỗi nhóm thông tin, khách vẫn phải tìm thấy bước tiếp theo, nên một đường liên hệ rõ ràng không làm hỏng sự nhẹ nhàng. Trang chậm rãi vẫn có thể có đường đi rõ ràng.
Cũng cần lưu ý rằng chậm rãi trong cảm giác không có nghĩa là chậm trong tải trang. Ảnh lớn là linh hồn của lối này, cho nên phải nén cẩn thận và chỉ tải một hai kiểu chữ, kẻo khách chưa kịp thấy gì đã rời đi.
Ba thương hiệu giữ nhịp chậm theo cách nào?
Khi áp dụng thiết kế web chữ thanh, phòng tranh để tường trắng làm khoảng trống, khu nghỉ dưỡng để sương và mặt hồ làm khoảng trống, còn thương hiệu nến để một mảng nền kem bao quanh một vật duy nhất. Cả ba đều là thương hiệu giả định, số 0987.654.321 chỉ là số ví dụ, không phải dự án đã bàn giao.
Phòng tranh: bức tường là khoảng trống có sẵn
Phòng Tranh Lặng là tên giả định, và banner của nó gần như một căn phòng thật: một bức tranh sơn mài đỏ vàng, một băng ghế gỗ, ánh nắng in trên tường, với dòng “Đứng lâu hơn một chút” ở mảng tường bên trái. Tên họa sĩ và tên tác phẩm đều là giả định. Càng xuống dưới, trang càng dày hơn với sáu tác phẩm và ba ảnh cận vết sơn, nhưng các nhãn vẫn nhỏ, để tranh giữ phần lời.
Nghỉ dưỡng thiền: thiên nhiên làm thay khoảng trắng
Tĩnh Am là tên giả định của một khu nghỉ bên hồ. Dòng “Về đây để chậm lại” nằm trên mặt hồ lúc sớm, rồi ba chữ Thở, Đi, Ngồi đứng cách nhau rất xa. Một ngày ở đó được kể bằng năm chặng chỉ gọi tên buổi, không ghi giờ. Đây là ví dụ về việc gạt bỏ con số để giữ cảm giác thời gian đi chậm.
Thương hiệu nến: một cây nến giữa khoảng nền rộng
Sáp & Khói là tên giả định, mở đầu bằng một cây nến hổ phách trên phiến đá, đặt lệch phải, để dòng “Một mùi hương, một buổi tối” có khoảng nền rộng bên trái. Khối nền tối chụp sát ngọn lửa tạo một nốt trầm giữa trang, sau đó trang sáng trở lại với bốn bước làm nến và ba nơi đặt nến. Trang có nhiều khối, nhưng một ngọn lửa đã đủ để giữ nhịp.
12 ngành khác có thể mượn nhịp chậm này ra sao?
Ngành có sản phẩm đẹp mượn ở ảnh lớn, ngành dịch vụ riêng tư mượn ở đoạn văn ngắn, còn ngành văn hóa mượn ở khoảng lặng giữa các phần. Dưới đây là 12 ngành khác cùng một gợi ý cho mỗi ngành.
- Gốm thủ công: một ảnh lớn cho mỗi dòng gốm.
- Trà đặc sản: đoạn văn ngắn về vùng trồng.
- Trang sức bạc: ảnh cận trên nền rộng.
- Nhà hàng chay: mỗi món một ảnh và một dòng.
- Homestay trên núi: ảnh tràn khổ, ít khối giá phòng.
- Spa dưỡng sinh: trình tự buổi chăm sóc kể bằng văn xuôi.
- Hoa nghệ thuật: ảnh dọc lớn, chú thích rất nhỏ.
- Áo dài may đo: ảnh người mặc, khoảng nền rộng.
- Nhà xuất bản nhỏ: trích đoạn sách trên trang trắng.
- Studio ảnh cưới: một bộ ảnh mỗi màn hình.
- Nội thất gỗ: một đồ vật giữa căn phòng thật.
- Dịch vụ tưởng niệm: lời văn ngắn, không có nút nổi bật.
Khi nào không nên chọn thiết kế web chữ thanh?
Không nên chọn thiết kế web chữ thanh khi khách đang vội, cần so sánh nhiều thông số, hay khi doanh nghiệp chưa có ảnh đủ đẹp. Thiếu ảnh tốt, khoảng trống sẽ không còn là sự chọn lựa mà trở thành một lời xin lỗi.
Nếu thứ bạn tìm là sự gọn gàng hơn là sự chậm rãi, lối tối giản, trắng thoáng sẽ thẳng thắn hơn. Nếu điều cần nhấn là vẻ cao cấp, phong cách sang trọng, tinh tế cho phép dùng thêm màu tối và ánh kim. Còn khi muốn sự dịu dàng đến từ hình khối, những đường cong mềm mại là một hướng để so sánh.
Câu hỏi thường gặp về thiết kế web chữ thanh
Có cần dùng chữ có chân không?
Không bắt buộc, nhưng chữ có chân mảnh thường tạo vẻ này rõ nhất ở tiêu đề. Phần mô tả nên dùng kiểu chữ dễ đọc ở cỡ nhỏ.
Trang thoáng có làm mất thông tin cần cho khách không?
Không, nếu bạn chỉ giãn chứ không bỏ. Mẫu gốc vẫn có đủ sản phẩm, chất liệu và cách liên hệ, nhưng trình bày theo từng nhóm tách xa nhau.
Nút bấm có nên mảnh theo chữ không?
Nút viền mảnh hợp với lối này, nhưng phải đủ lớn để chạm và đủ tương phản để nhận ra. Nút liên hệ chính vẫn có thể là một mảng đặc, như mẫu gốc đã làm.
Nên làm gì trước khi chọn thiết kế web chữ thanh?
Hãy nhìn lại trang hiện có và thử bỏ đi một khối, rồi giãn phần còn lại ra. Nếu câu chuyện của bạn rõ hơn, thì lối chậm rãi này có thể là con đường đúng; nếu khách mất đi thông tin cần thiết, thì nên giữ lại khối đó.
Khi đã thử xong, bạn có thể đọc các bước Mạnh An AI thiết kế và bàn giao website và xem bảng giá thiết kế website AI. Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể gửi ảnh sản phẩm tốt nhất của bạn để trao đổi trước khi bắt đầu.
Thông tin đơn vị
Đơn vị: Công Ty TNHH Mạnh An Service
Dịch vụ: Mạnh An AI – Thiết kế website
Phạm vi phục vụ: Khách hàng trên toàn quốc
Địa chỉ văn phòng: Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
Điện thoại: 083.5431.678
Email: info@manhan.vn
