Giáo án NLS Mĩ thuật 12 kết nối Bài 2: Thiết kế mĩ thuật giao diện website

Ngày soạn:…/…/…

Ngày dạy:…/…/…   

NỘI DUNG: THIẾT KẾ MĨ THUẬT ĐA PHƯƠNG TIỆN

BÀI 2: THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE

(11 tiết)

I. MỤC TIÊU

1. Kiến thức

Sau bài học này, HS sẽ:

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

2. Năng lực

Năng lực chung: 

• Năng lực giao tiếp và hợp tác: khả năng thực hiện nhiệm vụ một cách độc lập hay theo nhóm; Trao đổi tích cực với giáo viên và các bạn khác trong lớp.
• Năng lực tự chủ và tự học: biết lắng nghe và chia sẻ ý kiến cá nhân với bạn, nhóm và GV. Tích cực tham gia các hoạt động trong lớp.
• Giải quyết vấn đề và sáng tạo: biết phối hợp với bạn bè khi làm việc nhóm, tư duy logic, sáng tạo khi giải quyết vấn đề.

Năng lực riêng: 

• Lựa chọn chủ đề, phác thảo và thiết kế mĩ thuật 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.

Năng lực số:

• 1.1.NC1b: Sử dụng chiến lược tìm kiếm hiệu quả để thu thập tư liệu hình ảnh, icon, font chữ phục vụ thiết kế từ các nguồn tài nguyên số mở.
• 3.1.NC1a: Sử dụng thành thạo phần mềm thiết kế giao diện chuyên dụng (như Figma, Adobe XD) hoặc các công cụ đồ họa trực tuyến (Canva, Wix) để tạo lập bản thiết kế (Mockup).
• 3.3.NC1a: Tuân thủ quy định về bản quyền khi sử dụng tài nguyên số (hình ảnh, mã nguồn giao diện) và hiểu về giấy phép Creative Commons.
• 2.4.NC1a: Sử dụng các nền tảng cộng tác trực tuyến (Figma comment, Padlet) để làm việc nhóm, chia sẻ ý tưởng và nhận xét bản thiết kế thời gian thực.
• 5.3.NC1a: Sử dụng công cụ số để giải quyết vấn đề mô phỏng trải nghiệm người dùng (Prototype) trên giao diện thiết kế. 

3. Phẩm chất

• Yêu thích và hiểu biết cơ bản về thiết kế mĩ thuật website. 
• Trách nhiệm: Thiết kế nội dung web lành mạnh, tuân thủ Luật An ninh mạng.
• Chăm chỉ: Kiên trì tinh chỉnh từng chi tiết điểm ảnh (pixel-perfect) để có giao diện đẹp.

II. THIẾT BỊ DẠY HỌC

1. Đối với giáo viên

• SGK, KHBD Mĩ thuật 12 – Kết nối tri thức.
• Hình ảnh hoặc đường dẫn của một số website với các nội dung và chủ đề khác nhau.
• Máy tính, máy chiếu. 
• Video AI được tạo bằng các công cụ AI để khởi động bài học.
• Học liệu số: Các mẫu giao diện website đẹp (UI Kits), Video hướng dẫn sử dụng Figma/Canva, Link các trang web mẫu (Awwwards, Dribbble).
• Phần mềm: Figma (ưu tiên vì tính cộng tác cao), Canva.

2. Đối với học sinh

• SGK Mĩ thuật 12.
• Giấy vẽ A4, bút chì, màu nước, màu da, màu sáp, thước…
• Ảnh tư liệu về các website hoặc ảnh tư liệu cho chủ đề website yêu thích. 
• Thiết bị di động/Máy tính bảng có kết nối Internet để tra cứu và tìm ý tưởng.

III. CÁC HOẠT ĐỘNG DẠY HỌC 

HOẠT ĐỘNG 1: KHỞI ĐỘNG

…………………………………………..

…………………………………………..

…………………………………………..
 

HOẠT ĐỘNG 2: KHÁM PHÁ

a. Mục tiêu: Thông qua hoạt động, có thông tin về vai trò, nhiệm vụ và sự phát triển của website trên môi trường internet.

b. Nội dung: GV tổ chức cho các nhóm HS tìm hiểu và thuyết trình một số nội dung liên quan đến: 

- Vai trò, nhiệm vụ và sự phát triển của website trên môi trường internet. Những dấu mốc và sự xuất hiện của một số website ở Việt Nam. 

- Một số website thuộc các nhóm nội dung chủ đề khác nhau ở Việt Nam như: giáo dục, giải trí, báo điện tử, thương mại điện tử, doanh nghiệp. 

c. Sản phẩm: Bài thuyết trình của HS.

d. Tổ chức thực hiện:

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

- GV giao nhiệm vụ cho HS và mời các nhóm lên trình bày :

+ Nhóm 1 + 2: Vai trò nhiệm vụ và sự phát triển của website trên môi trường internet.

+ Nhóm 3 + 4: Các website phổ biến thuộc các chủ đề khác nhau.

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

- HS các nhóm phân công nhiệm vụ cụ thể cho thành viên các nhóm. 

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

+ Chuẩn bị bài thuyết trình của mỗi nhóm.

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

+ Sự tham gia của HS trong lớp. 

+ 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 trình bày kết quả thảo luận về nội dung: Vai trò, nhiệm vụ và sự phát triển website trên môi trường internet.

- 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ận xét, đánh giá và chuẩn kiến thức: 

- Vai trò nhiệm vụ và sự phát triển của website trên môi trường internet: 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 xuống nếu cần. 

- Các website phổ biến thuộc các chủ đề khác nhau: Ví dụ chủ đề liên quan đến thông tin: trang báo điện tử, trang thông tin của doanh nghiệp, thương liệu lớn của Việt Nam, chủ đề liên quan đến thương mại gồm có trang bán sản phẩm cụ thể của các doanh nghiệp như thời trang, nội thất, đồ thủ công mĩ nghệ….)

+ Các website cụ thể, trình bày nội dung và cách sắp xếp, nêu ra các đặc điểm nổi bật.

+ Phong cách, thể hiện của các website thông qua hình ảnh, màu sắc, kiểu chữ, bố cục thông tin….

HOẠT ĐỘNG 3: NHẬN BIẾT

a. Mục tiêu: Thông qua hoạt động, HS:

- Biết được đặc điểm và nhiệm vụ của từng thành phần cơ bản trên website. 

- Hiểu nội dung và cách hoạt động của từng thành phần. 

- Biết và hiểu về đặc điểm các dạng bố cục thông dụng trong thiết kế website. 

- Nhận biết phân cấp thông tin trong các loại bố cục website. 

- Vận dụng được kiến thức về bố cục cho các nội dung khác nhau của website. 

- Biết cách tìm ý tưởng và xây dựng phác thảo cho website.

b. Nội dung: GV tổ chức cho HS thực hành để nhận biết về những nội dung liên quan đến lĩnh vực thiết kế mĩ thuật giao diện website theo mục tiêu đề ra.

c. Sản phẩm: HS nhận biết, có ý tưởng và bản vẽ thiết kế mĩ thuật website theo chủ đề tùy chọn. 

d. Tổ chức thực hiện:

…………………………………………..

…………………………………………..

…………………………………………..
 

HOẠT ĐỘNG 4: THẢO LUẬN

a. Mục tiêu: Củng cố những kiến thức đã hình thành ở hoạt động Khám phá – Nhận biết.

b. Nội dung: GV tổ chức cho HS trao đổi, thảo luận theo câu hỏi. 

c. Sản phẩm: Củng cố nhận thức về lĩnh vực thiết kế mĩ thuật giao diện website. 

d. Tổ chức thực hiện:

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

- GV chia HS cả lớp thành 4 nhóm. 

- GV yêu cầu các nhóm thực hiện nhiệm vụ: Trao đổi về sản phẩm thiết kế đã thực hiện theo câu hỏi gợi ý 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?

+ Sự ấ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?

- GV tiếp tục đặt câu hỏi để củng cố kiến thức, kĩ năng cho HS:

+ Thiết kế website của HS có gì khác biệt so với sản phẩm thiết kế cũ? 

+ Sản phẩm có thể hiện được đầy đủ ý tưởng và đạt được mức độ như kì vọng không? 

+ Sản phẩm thiết kế của HS có thể hiện được bản sắc thiết kế riêng hay điểm mạnh của HS (về bố cục, minh họa, thiết kế,…) không? 

+ Sản phẩm có thể hiện đủ nội dung và tính năng cần thiết của website không? 

+ HS khác nhận xét như thế nào về cách sắp xếp, bố cục và nội dung trình bày website của nhau? Nêu ra những điểm mạnh và mặt hạn chế.

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 nhóm, vận dụng kiến thức đã học về thiết kế mĩ thuật giao diện website để trả lời câu hỏi. 

- 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ả hoạt động, thảo luận

- GV mời đại diện các nhóm lần lượt trả lời theo các nội dung.

- 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á và kết luận.

- GV chuyển sang hoạt động mới. 

HOẠT ĐỘNG 5: VẬN DỤNG

a. Mục tiêu: HS vận dụng kiến thức đã học để thực hành thiết kế trang thông tin điện tử cụ thể dựa trên ý tưởng lựa chọn của HS (không cần là 1 trang theo chủ đề có sẵn. 

b. Nội dung: GV tổ chức cho HS trao đổi, thảo luận lên ý tưởng thiết kế website của một đơn vị, tổ chức. 

c. Sản phẩm: Bản vẽ thiết kế mĩ thuật website của HS.

d. Tổ chức thực hiện: 

…………………………………………..

…………………………………………..

…………………………………………..