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

Nhiệm vụ 1: Thành phần của website

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

- GV chia HS thành các nhóm, yêu cầu chọn một website theo các nhóm chủ đề khác nhau (thương mại, báo điện tử, văn hóa, giải trí,...) và trả lời câu hỏi:

+ Trình bày thành phần cơ bản của website đó (phân biệt tiêu đề, danh mục chính, nội dung chính, chân trang,...). 

+ Thuyết trình phần nào trên website tập trung nhiều nội dung/ yếu tố mĩ thuật, phần nào cố định/ thay đổi linh hoạt,... và giải thích lí do.

- GV yêu cầu HS tìm hiểu lưu ý khi thiết kế mĩ thuật website.

- GV định hướng cho việc lựa chọn bố cục, lên ý tưởng thiết kế mĩ thuật website ở bài sau:

+ Chọn kích thước màn hình phù hợp, từ đó đưa ra những thông số chính xác về kích thước màn hình để có thể xác định được các vị trí và đưa ra những sắp xếp phù hợp.

+ Sau khi chọn được kích thước màn hình và phân chia cấu trúc cơ bản của website, lưu ý thiết kế và trình bày nội dung và hình ảnh của website quan trọng nhất là trang chủ.

+ Trong quá trình sắp xếp, bố cục nội dung thông tin, hình ảnh của website, cần lưu ý đến thói quen, quy luật về hướng đọc và khả năng nhận biết cũng như tương tác của người dùng với các vị trí theo phân cấp thông tin.

- GV yêu cầu HS làm việc theo nhóm 4, lựa chọn một trong số các dạng website ở trên và nêu nhiệm vụ: Hãy quan sát và chỉ ra đâu là khu vực Tiêu đề (Header), Điều hướng (Navigation), Nội dung chính (Content) và Chân trang (Footer).

- GV mở rộng: Sử dụng điện thoại tìm kiếm từ khóa 'Website wireframe examples' (Ví dụ khung dây website) để xem các nhà thiết kế quy hoạch các vùng này như thế nào trước khi vẽ chi tiết.

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, đọ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ề thành phần của 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. 

- HS quan sát, chỉ vị trí trên hình.

- Tra cứu hình ảnh wireframe để hiểu cấu trúc khung xương.

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ề thành phần của website.

- HS xác định đúng các khu vực.

- 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 chốt kiến thức về 5 thành phần cơ bản của website.

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

NHẬN BIẾT

1. Thành phần của website

- Tiêu đề:  phần đầu trang thường chứa tên trang, ô tìm kiếm, lựa chọn ngôn ngữ.

- Danh mục chính (Thanh điều hướng – menu): danh mục các trang chính của trang thông tin điện tử, giúp người dùng truy cập trang mình cần tìm một cách nhanh chóng, thường nằm cạnh phần tiêu đề.

- Nội dung chính: tổng hợp những nội dung, bài viết trên trang.

- Chân trang: chứa các thông tin lặp lại của tiêu đề và thông tin liên hệ, cơ quan chủ quản, bản quyền, liên kết nhanh,...

Nhiệm vụ 2: Thiết kế mĩ thuật giao diện website căn cứ theo các yếu tố: nội dung và chức năng

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

- GV chia HS cả lớp thành 2 nhóm, quan sát Hình ảnh, đọc thông tin mục Nội dung SGK tr.7, 8 và trả lời câu hỏi:

+ Dạng website tĩnh thường xuất hiện ở nhóm website nào đã được làm quen ở hoạt động Khám phá? Vì sao? 

+ Yếu tố mĩ thuật trong hai dạng website (tĩnh/ cố định và động/ tương tác) có đặc điểm gì? 

+ Nhóm em thích loại website nào? Vì sao? 

+ Việc xác định đúng thể loại có ý nghĩa thế nào trong thiết kế website? Vì sao?

- GV tiếp tục yêu cầu HS thảo luận nhóm, quan sát Hình ảnh, đọc thông tin mục Chức năng SGK tr.8 – 10 và trả lời câu hỏi:

+ Giao diện website của mỗi nhóm có đặc điểm gì? Nhóm em ấn tượng với giao diện của nhóm website nào? Vì sao? 

+ Yếu tố mĩ thuật trong các nhóm website có đặc điểm gì? Việc sử dụng ảnh chụp hay hình đồ họa tác động thế nào trong việc thiết kế website? Vì sao? 

+ Việc xác định đúng chức năng có ý nghĩa thế nào trong thiết kế website? Vì sao?

- GV trình chiếu cho HS quan sát hình ảnh về thiết kế mĩ thuật giao diện website căn cứ theo các yếu tố: nội dung và chức năng (Đính kèm phía dưới Nhiệm vụ 2).

- GV yêu cầu HS khi giới thiệu, phân tích cần tìm ví dụ minh họa, trao đổi và giới thiệu lại những hiểu biết của bản thân/ nhóm về thiết kế giao diện website.

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 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ề thiết kế mĩ thuật giao diện website căn cứ theo các yếu tố: nội dung và chức năng.

- 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ề thiết kế mĩ thuật giao diện website căn cứ theo các yếu tố: nội dung và chức năng.

- 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 nhiệm vụ mới. 

2. Thiết kế mĩ thuật giao diện website căn cứ theo các yếu tố: nội dung và chức năng

* Nội dung

- Website tĩnh: 

+ Trang web cơ bản, không thường xuyên thay đổi nội dung và không được người quản lí cập nhật phần thiết kế giao diện. Những trang web loại này được tạo ra cho mục tiêu thông tin.

+ Sử dụng các trang có cùng một kích thước và bố cục cho tất cả các thiết bị nên không được tối ưu hoá. Tốc độ truy cập nhanh nhưng việc theo dõi trên điện thoại thông minh không được hiệu quả bởi cần phải phóng to các trang trên màn hình để đọc.

- Website động: 

+ Trang web có nội dung cập nhật thường xuyên. Nhà thiết kế tự tạo một số nội dung hoặc định hướng những gì khách hàng muốn xem bằng các bộ lọc, thẻ, cũng như tự động phản hồi tất cả các hành động và hiển thị nội dung cập nhật cho người sử dụng website. Những website này phổ biến ở những công ty bán hàng trực tuyến hay có tính thương mại.

+ Được xác lập thống nhất tỉ lệ của trang bất kể nó được mở trên thiết bị nào, giúp cho các yếu tố điều hướng và tương tác sẽ chiếm cùng một lượng không gian tương đối, bất kể kích thước của màn hình thiết bị sử dụng truy cập, cũng như hiển thị các yếu tố tương tác chính một cách chính xác cho dù thiết bị sử dụng để truy cập là gì.

* Chức năng

- Các website cá nhân: thể hiện góc độ sáng tạo của một cá nhân về một hay nhiều lĩnh vực khác nhau như người nổi tiếng, nhật kí trực tuyến (blog),...

- Các website của công ty: trình bày thương hiệu với mục đích giới thiệu, tạo cho khách hàng tiềm năng kết nối trực tiếp với các đại diện của công ty.

- Các website truyền thông (mạng xã hội): 

+ Thiết lập một nền tảng mọi người có thể trao đổi ý kiến và chia sẻ suy nghĩ.

+ Có tính mở để giao tiếp và thường dựa trên nội dung do người dùng tạo.

- Các website thương mại điện tử: 

+ Bán sản phẩm hoặc dịch vụ cho khách hàng trực tuyến. 

+ Cho phép người dùng thuận tiện lựa chọn sản phẩm, mua hàng, thanh toán, giao hàng, đánh giá,... 

- Website chia sẻ: 

+ Người dùng chia sẻ nhiều nội dung khác nhau như ảnh, video, nhạc, đồ họa, bản sao,... 

+ Những người dùng khác có thể tải xuống nội dung để sử dụng cho mục đích của họ, trả phí hoặc miễn phí tuỳ thuộc vào chiến lược nền tảng.

- Các website giáo dục: 

+ Có nội dung để học những điều mới, từ bách khoa toàn thư, thư viện cho đến các bài học trực tuyến và các khóa học chuyên nghiệp; các trang web của bảo tàng, phòng trưng bày triển lãm.

- Website tin tức: một loại tạp chí hoặc báo trực tuyến. Mục tiêu của trang là thông báo cho người dùng về những tin tức và sự kiện mới nhất.

HÌNH ẢNH VỀ THIẾT KẾ MĨ THUẬT GIAO DIỆN WEBSITE 

Nhiệm vụ 3: Định hướng gợi ý trong thiết kế mĩ thuật website

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

- GV giới thiệu cho HS các bước cơ bản thiết kế website:

+ Xây dựng bố cục để thể hiện ý tưởng thiết kế.

+ Sử dụng hình ảnh làm nền.

+ Sử dụng nghệ thuật chữ ở phần tiêu đề và thông tin.

+ Sử dụng màu sắc.

- GV chia HS thành 4 nhóm, quan sát các bước gợi ý cách thể hiện ý tưởng nội dung trong thiết kế mĩ thuật website về khởi nghiệp trong lĩnh vực chăm sóc thú cảnh SGK tr.12 – 14 và thực hiện nhiệm vụ: Em hãy lựa chọn, thiết kế một website ở lĩnh vực yêu thích.

- GV yêu cầu các nhóm sử dụng phác thảo ở các hoạt động trước để điều chỉnh và hoàn thiện.

- GV tiếp tục yêu cầu HS thực hiện thuyết minh:

+ Ý tưởng thiết kế là gì? 

+ Các yếu tố hình, màu, nghệ thuật chữ được thể hiện thế nào khi cụ thể hóa ý tưởng? 

+ Trong tổng thể, thiết kế mĩ thuật có hài hòa, phù hợp với đặc điểm về nội dung, chức năng của website không?

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 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ề định hướng gợi ý trong thiết kế mĩ thuật 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ề định hướng gợi ý 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 (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.

3. Định hướng gợi ý trong thiết kế mĩ thuật website

- Xây dựng bố cục để thể hiện ý tưởng thiết kế:

+ Họa sĩ thiết kế hiểu và xác lập những mục nào cần thiết để sắp xếp khoa học và đưa các mục này lên trang chủ như logo, nút tác động đến hành vi, thanh tìm kiếm, hình ảnh có tính tiêu biểu,... 

+ Thống nhất lược bỏ những thành phần không cần thiết hoặc chuyển sang mục khác để trang chủ không bị dày đặc thông tin, khó có thể sắp xếp đạt tính thẩm mĩ cao.

- Sử dụng hình ảnh làm nền: đảm bảo chủ đề, phong cách của hình ảnh nhận diện luôn ăn nhập với thông điệp chủ sở hữu website muốn truyền tải.

- Sử dụng nghệ thuật chữ ở phần tiêu đề và thông tin: lựa chọn kiểu chữ, kích cỡ, màu sắc, độ nghiêng, độ đậm và khoảng cách các kí tự, góp phần hoàn thiện trải nghiệm tuyệt vời cho người sử dụng website.

- Sử dụng màu sắc:

+ Muốn sử dụng màu sắc phù hợp, hiệu quả, phải tính đến tâm lí người dùng, sản phẩm, thông tin và đối tượng hướng đến của website.

+ Nắm vững cách kết hợp màu, kết hợp với các họa tiết làm nổi bật các thành tố quan trọng cho cả tổng thể website.