Thiết kế mĩ thuật giao diện website
Bài học trình bày các nguyên tắc bố cục giao diện, cách đánh giá sản phẩm và yêu cầu xây dựng phương án thiết kế phù hợp người dùng.
Hiểu bài
Website hiển thị dữ liệu dưới dạng văn bản, hình ảnh và các dạng nội dung khác để người dùng tương tác bằng máy tính hoặc điện thoại thông minh qua trình duyệt. Cấu trúc càng rõ ràng thì việc theo dõi và tải thông tin càng thuận tiện; câu từ cần ngắn gọn, dễ hiểu và có khả năng tương thích với nhiều trình duyệt.
Một số kiểu bố cục thông dụng
Quy tắc 1/3: Chia màn hình thành ba phần theo chiều ngang và ba phần theo chiều dọc. Các cụm thông tin được bố trí theo lưới; hình ảnh hoặc thông tin nổi bật được ưu tiên tại những giao điểm. Quy tắc này thường dùng cho giao diện trang chủ.
Tỉ lệ vàng: Chia đoạn thẳng thành hai phần A và B, trong đó A dài hơn B, sao cho:
[ \frac{A}{B}=\frac{A+B}{A}=1.618=\Phi. ]
Bố cục theo tỉ lệ vàng thường phù hợp với trang chủ hoặc trang cần tạo ấn tượng bằng nhiều hình ảnh và ít thông tin.
Sơ đồ tỉ lệ vàng với đoạn A, B và đường xoắn ốc màu xanh; phía dưới là trang web NXB Giáo dục Việt Nam với banner sách và nút Đăng ký. SGK trang 18
Quy tắc cột: Thiết kế website thường dùng hệ 12 cột rồi nhóm thành ba hoặc bốn cột lớn. Cách tổ chức này làm diện tích các phần thông tin rõ ràng, đồng bộ và giúp thay đổi hoặc đảo vị trí cột linh hoạt hơn.
Ở phần thảo luận, người học đánh giá đặc trưng mĩ thuật, mức độ phù hợp với đối tượng và các yếu tố tạo ấn tượng. Nhiệm vụ vận dụng yêu cầu tổng hợp yêu cầu dự án, phân tích mục tiêu, so sánh website tương tự và đề xuất kiến trúc thông tin, bố cục, màu sắc, chữ cùng hình ảnh. Tỉ lệ màn hình được biểu thị dạng x:y, trong đó x là chiều rộng và y là chiều cao; tỉ lệ được tính bằng chiều rộng chia cho chiều cao.