Bài 2: Thiết kế mĩ thuật giao diện website | Mĩ Thuật 12 (Thiết Kế Mĩ Thuật Đa Phương Tiện) - Lớp 12 - Kết Nối Tri Thức Với Cuộc Sống

(Trang 15)

Yêu cầu cần đạt

- Nhận biết được các yếu tố thẩm mĩ, hệ thống cấu trúc và phân cấp nội dung trên website.

- Lựa chọn được chủ đề, phác thảo và thiết kế mĩ thuật một giao diện website.

- Phân tích, đánh giá được thiết kế mĩ thuật website phù hợp với đối tượng sử dụng.

- Yêu thích và hiểu biết cơ bản về thiết kế mĩ thuật website.

KHÁM PHÁ

Trên môi trường internet, website là một tập hợp các dữ liệu hiển thị dưới dạng văn bản, hình ảnh mà người dùng tương tác trên các thiết bị máy tính, điện thoại thông minh… Website có cấu trúc dễ dàng thì càng thuận tiện theo dõi và tải thông tin (nếu cần), trong đó sử dụng câu từ ngắn gọn dễ hiểu và có thể đồng bộ, tương thích đối với đa số trình duyệt.

Một bố cục thiết kế mĩ thuật website sử dụng hệ thống biểu tượng⁽¹⁾

Câu hỏi:

1. Kể tên một số loại thiết bị có thể sử dụng để truy cập website?

2. Nội dung và mục đích của các website có ảnh hưởng đến việc chọn lựa bố cục thiết kế không? Tìm một số ví dụ để làm rõ.

(1) Nguồn: Shutterstock

(Trang 16)

NHẬN BIẾT

Một số kiểu bố cục thông dụng trong thiết kế mĩ thuật website

Quy tắc 1/3:

Chia màn hình ra làm 3 phần theo chiều ngang và 3 phần theo chiều dọc. Bố cục các cụm thông tin và nội dung theo các vị trí đã chia. Hình ảnh và thông tin nổi bật ưu tiên hiển thị ở giao điểm của lưới 1/3. Quy tắc 1/3 hay được sử dụng cho bố cục giao diện trang chủ.

- Tỉ lệ vàng:

+ Xác định bằng cách chia đoạn thẳng AB thành 2 phần, trong đó đoạn A dài hơn đoạn B. Lấy tổng A + B chia cho A nếu bằng giá trị 1.618 thì đó là tỉ lệ vàng.

+ Công thức tổng quát xác định tỉ lệ vàng:

A/B = (A+B)/A = 1.618 = Φ

+ Dùng cho trang chủ, những trang tạo ấn tượng có nhiều hình ảnh, lượng thông tin ít.

- Quy tắc cột:

+ Số cột thông thường là 12 cột, nên quy tắc thiết kế dựa trên việc nhóm các cột nhỏ thành 3 hoặc 4 cột lớn cho toàn trang là quy tắc rất phổ biến.

- Quy tắc khối tiêu chuẩn:

+ Phân cấp các phần thông tin tương tự nhau thành các khối   bằng nhau về kích thước và giống nhau cách sắp xếp các chi tiết. Các khối này thường được đặt thẳng hàng theo cả chiều dọc lẫn chiều ngang.

+ Các trang có nhiều tin tức, nội dung liệt kê, ví dụ: trang sản phẩm, trang album ảnh,...

- Quy tắc lưới phân cấp:

+ Cách tạo diện tích mới bằng cách nhóm các số lượng cột khác nhau. Số lượng cột được nhóm càng nhiều thì diện tích càng lớn. 

+ Diện tích lớn trình bày nội dung quan trọng, nổi bật, các diện tích nhỡ hoặc bé hơn thể hiện nội dung khác ít quan trọng hơn theo kịch bản phân cấp thông tin của trang.

- Quy tắc khối lớn:

+ Dùng để trình bày những trang chi tiết có nội dung thông tin đơn giản như một đoạn văn bản hoặc một bức ảnh đơn lẻ. 

+ Nội dung chính ở chính giữa và chiếm diện tích khoảng một phần ba diện tích toàn màn hình.

(Trang 30)

THẢO LUẬN

Trao đổi, thảo luận với thành viên trong nhóm về sản phẩm thiết kế đã thực hiện theo các nội dung sau:

- Đặc trưng trong thiết kế mĩ thuật của website là gì?

- Thiết kế mĩ thuật website này đã phù hợp với đối tượng hướng đến chưa? Vì sao?

- Việc ấn tượng hấp dẫn với người truy cập website này thể hiện ở những yếu tố nào?

VẬN DỤNG

Lên ý tưởng thiết kế một website của một đơn vị tổ chức mà em biết.

Gợi ý:

- Tổng hợp các yêu cầu của dự án;

- Phân tích các vấn đề và mục tiêu cần thực hiện;

- Quan sát, so sánh và đưa ra những nhận định về các website tương tự;

- Đề xuất các phương án về kiến trúc thông tin, bố cục, màu sắc, sắp đặt chữ và hình ảnh thiết kế.

EM CÓ BIẾT

Tỉ lệ màn hình máy tính tỉ lệ tương thích với kích thước (dài × rộng) của hình ảnh đang hiển thị.

Tỉ lệ của các dòng màn hình phổ biến hiện nay:

- Tỉ lệ 4:3 chuẩn với: 960×720 hoặc 1440×1080 pixels.

- Tỉ lệ 16:9 chuẩn với: 1280×720, 1920×1080 hoặc 1600×900 pixels (chuẩn HD).

- Tỉ lệ 3:2 chuẩn với: 1152×768 hoặc 1440×960 pixels.

- Tỉ lệ 5:4 chuẩn với: 1280×1024 hoặc 1800×1440 pixels.

- Tỉ lệ 14:9 chuẩn với: 1152×720, 1280×800, hoặc 1440×900 pixels.

- Tỉ lệ 21:9 chuẩn với: 1280×544 hoặc 1920×816 pixels.

Tỉ lệ màn hình sẽ được tính bằng cách lấy chiều rộng chia cho chiều cao.

(Trang 31)

Để biểu thị tỉ lệ màn hình người ta thường sử dụng hai số dương viết liền với nhau có hai dấu chấm ở giữa. Với một màn hình có tỉ lệ x:y thì x sẽ được hiểu là chiều rộng, y là chiều cao.

Kích thước màn hình (chiều rộng × chiều cao) của các màn hình máy tính từ 15 inch đến 29 inch⁽¹⁾

(1) Nguồn: Minh Thúy