Ý đồ thiết kế

Lấy cảm hứng từ tranh Đông Hồ

Trang web của tổ chức Đoàn thường dùng chung một kiểu cổng thông tin xanh đỏ, nên tỉnh nào trông cũng giống nhau. Để trang có nét riêng, thiết kế mượn phong cách của tranh Đông Hồ, dòng tranh dân gian của Bắc Ninh: mảng màu đặc, nét viền rõ, hoạ tiết đơn giản. Phong cách này cũng dễ dùng trên màn hình điện thoại. Vì vậy trang không dùng màu chuyển sắc, hiệu ứng phát sáng hay hình 3D.

Trang dùng lặp lại hai hình trang trí: hình bông hoa tròn có tám cánh và đường lượn sóng. Cả hai được vẽ đơn giản lại theo kiểu hoạ tiết thường gặp trong tranh.

Bốn màu chính

Mỗi màu có một công dụng riêng. Màu primary chỉ dùng cho nút chính và mục đang chọn, nên trên mỗi màn hình người xem thấy ngay một chỗ cần bấm. Màu đỏ để dành cho lỗi và huỷ, không dùng để nhấn mạnh. Bốn màu này lấy từ design-system/tokens.json, cùng nguồn với Mini App.

Fonts chữ tiếng Việt

Tiêu đề dùng font Phudu, nét đậm và hơi hẹp. Nội dung dùng Be Vietnam Pro. Điều cần chú ý nhất là khoảng cách giữa các dòng: tiếng Việt có chữ mang hai dấu chồng lên nhau, nếu các dòng xếp quá sát thì dấu bị cắt hoặc chạm vào dòng trên, rất khó đọc.

Ấn tượng đầu tiên

Người xem thường quyết định ở lại hay rời trang trong vài giây đầu. Vì vậy, ngay khi mở trang và chưa cần cuộn, người xem phải biết được ba điều dưới đây. Tiêu đề ghi thẳng những nội dung mà người dùng thật sự quan tâm, thay vì một khẩu hiệu chung chung như “Đồng hành cùng tuổi trẻ”.

Thứ tự và bố cục trang

Các phần trên trang xếp theo mức độ người xem cần, thứ cần nhất đặt lên trước. Hai phần liền nhau dùng màu nền và cách sắp xếp khác nhau, để người xem dễ nhận ra khi chuyển sang nội dung mới.