Trang này được xây từ những mảnh rất nhỏ
Người ta hay nghĩ làm web là vẽ từng trang. Thật ra tôi chỉ thiết kế những mảnh nhỏ, rồi để chúng tự ghép thành trang. Lối nghĩ này gọi là atomic design, Brad Frost đặt tên năm 2013: atom ghép thành molecule, molecule ghép thành organism, giống hoá học hồi cấp hai.
Trang bạn đang đọc chính là một ví dụ sống. Ở dưới, tôi tháo nó ra từng lớp cho bạn xem. Mọi mẫu đều lấy từ đúng bộ mã đang chạy, không phải ảnh chụp.
Giấy và mực
Tôi muốn đọc ở đây giống ngồi đọc sách buổi tối, nên không bắt đầu bằng màu. Tôi bắt đầu bằng một tờ giấy ngà và một lọ mực nâu đen. Chỉ có một màu được phép nổi bật, màu đất nung, và nó chỉ dành cho hai việc: liên kết, và chuyện tiền nong.
Nền của gần như mọi thứ
Các khối muốn lùi lại một chút
Chữ chính, nút chính
Chữ phụ, chú thích
Liên kết và nút mua, chỉ vậy thôi
Hai giọng chữ
Trang này nói bằng hai giọng. Lora có chân, chậm rãi, dùng khi kể chuyện. Be Vietnam Pro không chân, gọn gàng, dùng khi chỉ đường: menu, nhãn, nút. Cả hai đều có bộ dấu tiếng Việt tử tế, dấu hỏi dấu ngã không bị vẽ đè lên nhau.
Ăn quả nhớ kẻ trồng cây
Trang chủ · Chuyện nghề thiết kế · Viết vu vơ
Tiêu đề lớn nhất 64px trên máy tính, tự thu về 40px trên điện thoại. Không có cỡ nào phải chọn bằng tay.
Atoms
Atom là những mảnh không chia nhỏ được nữa: một cái nút, một cái nhãn, một ô nhập. Chúng nhàm chán một cách cố ý. Nhàm chán nghĩa là gặp ở đâu cũng cư xử y hệt nhau.
Nút đất nung hiếm khi xuất hiện. Cả trang chủ chỉ có đúng một cái, ở khối e-book.
Molecules
Ghép vài atom lại thì được một molecule, mảnh đầu tiên bắt đầu có nghĩa. Đây là phân tử chăm chỉ nhất trang: một hàng bài viết. Ngày, tiêu đề, tóm tắt, thời gian đọc. Bốn nguyên tử chữ đứng cạnh nhau thành một lời mời đọc.
Mẫu sống: đây đúng là bài mới nhất trên blog, bấm vào đọc được thật.
Organisms
Nhiều molecule hợp lại thành một organism, những khối lớn bạn gặp trên mọi trang. Chúng sống quanh bạn ngay lúc này.
Logo, bốn lối đi, một ô tìm kiếm. Trên điện thoại nó nhường chỗ cho thanh tab dưới đáy, nơi ngón cái với tới dễ hơn.
Cột chữ 680px, mắt không phải quét dòng quá dài. Trên tablet có thêm cột danh sách bên trái, đọc xong bài này lướt sang bài khác không cần quay ra.
Ba thẻ giá đứng cạnh nhau. Thẻ đang bán được viền đậm hơn một chút, vì hệ thống cũng cần biết chỉ chỗ đáng nhìn.
Whitespace
Khoảng trắng ở đây không phải chỗ thừa, nó là nhịp nghỉ giữa hai câu. Cả trang chỉ dùng một thang khoảng cách, nhân dần từ 4px, nên mọi thứ tự khắc thẳng hàng với nhau.
Hình như email thiếu phần đuôi. Bạn xem lại giúp tôi nhé.
Không có "Error 422". Chỉ có một câu người thật sẽ nói.
Vì sao tôi mở cho bạn xem
Vì hệ thống này là lý do blog ra bài được mỗi ngày. Mỗi bài mới không phải quyết định lại màu gì, chữ nào, cách nhau bao nhiêu. Các quyết định đã nằm sẵn trong atom, tôi chỉ việc viết.
Và vì tôi làm nghề này. Nếu bạn tò mò cách tôi nghĩ khi làm việc thật, chuỗi bài chuyện nghề là chỗ tôi kể tiếp.