BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG -🙦🙦🙦 - BÁO CÁO KẾT THÚC HỌC PHẦN THIẾT KẾ WEBSITE Mục lục I Phân tích Website………………………………………………………… Nội dung……………………………………………………….………… Giao diện…………………………………………………………….…… 3 Công nghệ………………………………………………………………… Trải nghiệm người dùng……………………………… ……………… II Xây dựng website………………………………………… …………… 1.Thiết kế Figma……………………………………… …………… Xây dựng Website Visual Studio Code…………….…………… I Phân tích website Nhóm em báo cáo dựa 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 - Về nội dung, mục đích trang web để bán hàng, quảng bá thông tin sản phẩm đến người mua hàng Sản phẩm bán giày thể thao số phụ kiện liên quan quần, áo, balo Đối tượng hướng đến người trẻ có nhu cầu mua sắm sản phẩm local brand, độ tuổi từ 16 đến 28 tuổi - Về tổ chức website: + Hình thức tổ chức web: dạng lưới đầy đủ (full-mesh) + Số trang thiết kế bao gồm: trang chủ, trang nội dung sản phẩm, trang đăng nhập, đăng xuất, đăng ký Giao diện (UI) Sẽ đánh giá trang web dựa tiêu chí: a Sắp xếp bố cục hợp lý: - Bố cục trang web thiết kế mạch lạc giữ nhiều khoảng trắng tạo đại, cung cấp cho người dùng đủ mục cần thiết sản phẩm cửa hàng, danh mục mua hàng, sản phẩm hạ giá, sản phẩm mới, thông tin địa liên lạc,… - Các đề mục chia rõ ràng, vùng rộng đem lại trải nghiệm tốt cho người dùng - Trang web áp dụng tốt định luật miller chia nhỏ khối thơng tin giúp mua dễ theo dõi kiếm sản phẩm mà muốn tìm cách dễ dàng b Khoảng trắng website: - Web trình bày dễ nhìn, thống, khơng q nhiều kênh thơng tin, chủ yếu hình ảnh sản phẩm; giúp người xem không bị phân tâm chi tiết thừa, làm khách hàng ý, tập trung vào sản phẩm c Thu hút ý qua bố cục hình ảnh - Các kênh thơng tin, hình ảnh có bố cục thay đổi nhẹ tạo điểm nhấn riêng cho phần - Sự lựa chọn hình ảnh dựa yếu tố (kích cỡ, màu sắc, khoảng trống) - Lựa chọn ảnh có đen ảnh khơng d Màu sắc giao diện - Nền trắng, chữ đen (nền đen chữ trắng với phần đầu trang phần thông tin cuối trang) - Màu sản phẩm lựa chọn kết hợp với màu tạo trẻ trung động, sang trọng e Chất lượng hình ảnh - Tốt, có đầu tư mặt hình ảnh - Sản phẩm tự chụp tách nền, chất lượng cao, rõ nét, thể thương hiệu sản phẩm f Typography - Font chữ sử dụng trang web Roboto - Được in đậm, kích cỡ khác với kênh thông tin tương ứng g Đ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 - Làm cho người dùng dễ việc di chuyển trang web - Có thiết kế lọc giúp người dùng tìm kiếm dễ dàng h Thiết kế tối ưu đa tảng - Có thể sử dụng web laptop/pc, tablet, smartphone Công nghệ - Trang web sử dụng ngơn ngữ lập trình html kết hợp với css 4 Trải nghiệm người dùng (UX) - Trang web trì đồng thiết kế (màu sắc, font, hình ảnh,…) - Áp dụng phong cách thiết kế đơn giản tăng khả sử dụng, tiện lợi tảng - Các hình ảnh sử dụng trang web có kích thước lớn, độ phân giải cao giúp người dùng dễ dàng tương tác mang lại trải nghiệm chân thực trước tiến hành mua sản phẩm II Xây dựng website Thiết kế Figma Phiên Desktop (chính) Trang chủ Trang đăng nhập/ đăng ký Trang nội dung Trang đăng xuất Xây dựng Website Visual Studio Code a Header b footer c body d Css