HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG KHOA ĐA PHƯƠNG TIỆN BÁO CÁO BÀI TẬP CUỐI KỲ MÔN THIẾT KẾ WEB CƠ BẢN SẢN PHẨM TRANG WEB THƯƠNG MẠI ĐIỆN TỬ VỚI MẶT HÀNG MĨ PHẨM Mục lục I Phân tích Website 3 1 N[.]
HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG TIỆN BÁO CÁO BÀI TẬP CUỐI KỲ MÔN THIẾT KẾ WEB CƠ BẢN SẢN PHẨM TRANG WEB THƯƠNG MẠI ĐIỆN TỬ VỚI MẶT HÀNG MĨ PHẨM Mục lục I Phân tích Website……………………………………………………… Nội dung……………………………………………………………… Giao diện……………………………………………………………… 3 Công nghệ…………………………………………………………… 4 Trải nghiệm người dùng……………………………………………… II Xây dựng Website Thiết kế Figma………………………………………………………… Xây dựng Website Visual Studio Code………………………… I Phân tích Website Website phân tích yếu tố: Nội dung, giao diện (UI), công nghệ, trải nghiệm người dùng (UX), mục đích lưu lượng web Nội dung - Xét mặt nội dung, mục đích trang web để bán hàng, giới thiệu sản phẩm, quảng bá thông tin sản phẩm đến khách hàng Sản phẩm trang web mỹ phẩm chăm sóc tóc ví dụ dầu gội, dầu xả, tinh dầu, lược, … Đối tượng hướng phụ nữ có độ tuổi từ 16 đến 40 - Về tổ chức website: + Số trang bao gồm: trang chủ, trang nội dung sản phẩm, trang đăng nhập, đăng kí Giao diện (UI) Trang web kế dựa tiêu chí: a Sự sếp bố cục hợp lý: - Bố cục trang web thiết kế đảm bảo đủ phần: header, content footer Các phần đảm bảo đủ yêu cầu cung cấp thông tin cần thiết trang web bán hàng nói chung thơng tin nhãn hàng, thơng tin sản phẩm, cách thức liên lạc - Các đề mục phân chia rõ ràng dễ quan sát, phân biệt Sản phẩm làm bật, dễ gây ấn tượng, thu hút cho người xem b Khoảng trắng website - Website trình bày dễ nhìn, tối giản, khơng có q nhiều text, hình ảnh làm lớn giúp sản phẩm bật, mang lại hiệu cao việc tiếp cập tập trung khách hàng c Màu sắc, giao diện - Nền trắng chữ đen tạo tối giản dễ đọc - Màu nâu sáng mang lại giá trị thẩm mỹ, tinh tế, phù hợp với màu sắc thương hiệu, logo thể sang trọng, uy tín, an tồn d Chất lượng hình ảnh - Hình ảnh có độ phân giải cao, rõ nét - Các hình ảnh lựa khơng mang lại giá trị thẩm mỹ mà cịn có giá trị nghệ thuật cao - Hình ảnh sản phẩm tách nền, rõ nét, bật kết hợp với hiệu ứng di chuyển vào đổi sang ảnh mang lại nhiều thơng tin hình ảnh cho khách hàng e Typography - Website có kết hợp sử dụng nhiều phơng chữ khác tùy thuộc vào mục đích - Các phông chữ liên quan đến thông tin sản phẩm có điểm chung mềm mại, bo trịn mang lại cảm giác nhẹ nhàng, sang trọng f Điều hướng người dùng - Trang web thiết kế mục điều hướng dựa hành vi tìm kiếm tập khách hàng - Người dùng dễ dàng thao tác lần đầu biết tới trang web tối giản, rõ ràng cách phân chia đề mục - Cách thiết kế lọc giúp người dùng dễ tìm kiếm g Thiết kế đa tảng - Thiết kế phù hợp với nhiều thiết bị phổ thông laptop, tablet, smartphone nhằm đa dạng người dùng Công nghệ - Website xây dựng dựa ngơn ngữ lập trình HTML, CSS Trải nghiệm người dùng (UX) - Trang web trì đồng thiết kế bố cục (màu sắc, font, hình ảnh, …) - Hình ảnh sử dụng có kích thước lớn, rõ nét giúp người dùng dễ dàng đánh giá chất lượng sản phẩm, tăng hiểu trải nghiệm - Người dùng nhanh chóng, dễ dàng sử dụng tính trang web tìm kiếm, mua bán II Xây dựng website Thiết kế Figma Phiên destop (Chính) Trang chủ Trang đăng nhập Trang đăng kí Trang sản phẩm Xây dựng Website Visual Studio Code a Header b Footer c Body d CSS