Website thương hiệu vàng bạc PNJ

Website cổng dịch vụ công quốc gia

Website thời trang ELISE

Website thương hiệu MUJI

HOẠT ĐỘNG CỦA GV - HS

DỰ KIẾN SẢN PHẨM

NLS/AI

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

Bước 1: GV chuyển giao nhiệm vụ học tập

- GV yêu cầu HS: Truy cập vào 2 website thuộc 2 lĩnh vực khác nhau (Ví dụ: 1 trang thương mại điện tử như Shopee/Tiki và 1 trang tin tức như VnExpress/Dantri).

- GV nêu nhiệm vụ: Sử dụng công cụ Chụp màn hình cuộn (Scrolling Screenshot) (tiện ích mở rộng hoặc tính năng có sẵn) để chụp lại toàn bộ trang chủ của 2 website đó. Dùng công cụ Ghi chú ảnh (Markup) để khoanh vùng và gọi tên các phần: Header (Đầu trang), Navigation (Điều hướng), Content (Nội dung), Footer (Chân trang).

- GV yêu cầu: So sánh sự khác biệt về cách sắp xếp bố cục giữa 2 trang.

- GV yêu cầu HS thảo luận theo cặp, quan sát Hình ảnh, đọc thông tin SGK tr.16 – 21 và cho biết: Em hãy trình bày 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

Tỉ lệ vàng

Quy tắc cột

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

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

Quy tắc khối lớn

- GV yêu cầu HS phân tích những mặt tích cực, hạn chế.

- GV tiếp tục yêu cầu HS ở mỗi dạng bố cục, lựa chọn website phù hợp với dạng bố cục này để phác thảo ra giấy.

- GV trình chiếu cho HS quan sát hình ảnh về các loại bố cục thiết kế trang website (Đính kèm dưới Nhiệm vụ 1).

Bước 2: HS tiếp nhận, thực hiện nhiệm vụ học tập

- HS thảo luận theo cặp, quan sát Hình ảnh, đọc thông tin SGK kết hợp sưu tầm thông tin, tư liệu, hình ảnh để tìm hiểu về một số kiểu bố cục thông dụng trong thiết kế mĩ thuật website.

- GV quan sát việc tham gia hoạt động học tập trên lớp của HS:

+ Sự tham gia của mỗi thành viên trong nhóm.

+ Sự tích cực đặt câu hỏi, trả lời trong phần thảo luận.

Bước 3: Báo cáo kết quả thực hiện nhiệm vụ học tập

- GV mời đại diện HS so sánh hai trang web bán hàng và tin tức (đính kèm dưới hoạt động)

- GV mời đại diện một số HS trình bày về một số kiểu bố cục thông dụng trong thiết kế mĩ thuật website.

- GV yêu cầu các HS khác lắng nghe, nhận xét, nêu ý kiến bổ sung hoặc đặt câu hỏi cho nhóm bạn (nếu có).

Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập

- GV đánh giá, nhận xét và kết luận.

- GV chuyển sang nhiệm vụ mới.

NHẬN BIẾT

1. 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.

1.1.NC1.a: Sử dụng thành thạo tính năng chụp màn hình nâng cao và công cụ chú thích ảnh để phân tích đối tượng số.

1.2.NC1.b: Phân tích, so sánh giao diện của các website thực tế để rút ra nhận định về nguyên lý thiết kế.

SO SÁNH GIAO DIỆN VÀ BỐ CỤC CỦA TRANG WEB BÁN HÀNG (SHOPEE) VÀ TRANG WEB TIN TỨC (VNEXPRESS)

CÁC LOẠI BỐ CỤC THIẾT KẾ TRANG WEBSITE

Nhiệm vụ 2: Quy trình thiết kế mĩ thuật giao diện website

Bước 1: GV chuyển giao nhiệm vụ học tập

- GV dẫn dắt: Thiết kế mĩ thuật trong website dựa trên nội dung thông tin, cấu trúc nhằm đáp ứng được tính thẩm mĩ. Để thiết kế mĩ thuật cho giao diện website, có thể chỉ cần một người hoặc cũng có thể cần đến một nhóm người cùng tìm hiểu nghiên cứu, đưa ra các giải pháp về tổ chức và cấu trúc nội dung.

- GV yêu cầu HS thảo luận cặp đôi, quan sát Hình ảnh, đọc thông tin SGK tr.24 – 29 và thực hiện nhiệm vụ: Em hãy trình bày quy trình thiết kế mĩ thuật giao diện website.

- GV chia HS cả lớp thành 4 nhóm và thực hiện nhiệm vụ:

+ Tìm ý tưởng trình bày, lựa chọn bố cục phù hợp với các nội dung khác nhau của website.

+ Xây dựng kiến trúc thông tin của trang như sơ đồ trang thông tin (sitemap) và cách người dùng hoạt động (di chuyển) trên website.

+ Phác thảo cấu trúc cơ bản của website.

+ Lựa chọn phong cách, màu sắc và các kiểu chữ cho các phân cấp thông tin khác nhau và tiến hành thiết kế website.

+ Tìm hoặc vẽ các hình ảnh, biểu tượng được sử dụng trên website như logo, biểu tượng, icon và các hình minh hoạ.

+ Sắp xếp, hoàn thiện nội dung các trang phù hợp với cấu trúc thành phần của website theo phong cách, màu sắc, minh hoạ đã thiết kế.

+ Tham khảo ý kiến của người dùng (các thành viên trong lớp) và GV để tinh chỉnh lại giao diện website cho phù hợp.

- GV hướng dẫn HS phân tích vai trò ra quyết định của con người khi sử dụng các công cụ AI hỗ trợ tạo layout website. Trí tuệ thẩm mĩ, tư duy phân cấp thông tin và năng lực ra quyết định cuối cùng luôn thuộc về quyền kiểm soát tối cao của chính HS.

- GV trình chiếu cho HS quan sát video về thiết kế giao diện website:

https://www.youtube.com/watch?v=D693Aym8y-0

Bước 2: HS tiếp nhận, thực hiện nhiệm vụ học tập

- HS làm việc theo cặp, sau đó làm việc theo nhóm, quan sát Hình ảnh, đọc thông tin SGK kết hợp sưu tầm thông tin, tư liệu, hình ảnh để tìm hiểu về quy trình thiết kế mĩ thuật giao diện website.

- GV quan sát, hướng dẫn, hỗ trợ HS (nếu cần thiết).

Bước 3: Báo cáo kết quả thực hiện nhiệm vụ học tập

- GV mời đại diện một số HS trình bày về quy trình thiết kế mĩ thuật giao diện website.

- GV yêu cầu các HS khác lắng nghe, nhận xét, nêu ý kiến bổ sung (nếu có).

Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập

- GV nhận xét, đánh giá, chuẩn kiến thức.

- GV chuyển sang nội dung mới.

2. Quy trình thiết kế mĩ thuật giao diện website

- Bước 1: Lên phương án thiết kế mĩ thuật giao diện website

+ Lên những phương án trình bày về tiêu đề, danh mục chính, nội dung chính, chân trang với những thông tin, hình ảnh, công nghệ tương ứng.

- Bước 2: Xây dựng kiến trúc thông tin website

+ Tổ chức cấu trúc của trang, tập hợp các trang như sơ đồ trang thông tin và sơ đồ cách người dùng di chuyển, tương tác trên trang.

+ Cần nghiên cứu và xem xét các kiến thức cơ bản:

• Nhu cầu người dùng.
• Tài nguyên thông tin của trang.
• Mục tiêu đơn vị, tổ chức sở hữu trang thông tin.

- Bước 3: Xác định cấu trúc cơ bản của website

+ Cách sắp xếp, tổ chức, liên kết các nội dung.

+ Người dùng dễ chịu khi ghé thăm website và nhanh chóng tìm thấy thông tin cần tìm.

- Bước 4: Lựa chọn màu sắc, hòa sắc phù hợp và áp dụng lên bản thiết kế

+ Xác định rõ đối tượng mục đích để chọn màu có tính cách phù hợp.

+ Chọn một màu chủ đạo cho toàn thiết kế.

+ Phát triển hệ màu đi kèm để bổ trợ cách tăng, giảm sắc độ, màu tương đồng, hoặc màu tương phản với màu chủ đạo đã chọn.

+ Tinh chỉnh màu sắc đã chọn để phù hợp với màu nền và màu đen trắng của website.

- Bước 5: Vẽ minh họa và thiết kế các biểu tượng (icon) cho website

+ Hình minh họa, biểu tượng thực hiện chức năng làm đẹp, truyền tải thông tin, là điểm nhấn giúp thu hút sự chú ý.

+ Minh họa và các biểu tượng được sử dụng với kích thước nhỏ và đôi khi có kèm hiệu ứng chuyển động.