BÁO CÁO SẢN PHẨM THIẾT KẾ WEB CƠ BẢN ĐỀ TÀI WEBSITE BÁN GIÀY – WIS SNEAKERBÁO CÁO SẢN PHẨM THIẾT KẾ WEB CƠ BẢN ĐỀ TÀI WEBSITE BÁN GIÀY – WIS SNEAKERBÁO CÁO SẢN PHẨM THIẾT KẾ WEB CƠ BẢN ĐỀ TÀI WEBSITE BÁN GIÀY – WIS SNEAKERBÁO CÁO SẢN PHẨM THIẾT KẾ WEB CƠ BẢN ĐỀ TÀI WEBSITE BÁN GIÀY – WIS SNEAKERBÁO CÁO SẢN PHẨM THIẾT KẾ WEB CƠ BẢN ĐỀ TÀI WEBSITE BÁN GIÀY – WIS SNEAKER
BÁO CÁO SẢN PHẨM • Xác định yêu cầu Quy trình thực sản phẩm Nội dung • Ý tưởng sản phẩm • Thiết kế wireframe • Xây dựng website I Xác định yêu cầu Xây dựng phần website bao gồm: Trang chủ Trang đăng ký Trang đăng nhập 01 trang nội dung Trang thoát (exit) Sử dụng ngơn ngữ lập trình HTML/CSS, Javascrip II Ý tưởng - Xây dựng website bán giày - Nguồn tham khảo: https://drake.vn/ III Thiết kế wireframe Xác định thành phần trang Tiêu chí thiết kế giao diện Thiết kế wireframe Xác định thành phần trang Tiêu chí thiết kế giao diện Xây dựng điều hướng Điều hướng – phụ Menu điều hướng phụ trang web ln xuất trang chủ thường có mặt tồn trang thứ cấp website Điều hướng nội trang Các nút kêu gọi hành động trang thứ Các liên kết nội hai trang thứ cấp website Các liên kết Các liên kết mạng xã hội Điều hướng – phụ Horizontal navigation menu Horizontal – drop down Breadcrumbs bar v Điều hướng nội trang Các nút kêu gọi hành động trang thứ Các liên kết nội hai trang thứ cấp website v Điều hướng nội liên kết Các liên kết mạng xã hội Trang chủ - Điều hướng chính, phụ - Các thương hiệu giày có cửa hàng - List sản phẩm (đi kèm với lọc) - Giới thiệu viết liên quan Trang đăng ký - Điều hướng chính, phụ - Thơng tin nhân (tên, sđt, email) - Địa - Mật - Điều hướng nội Trang đăng nhập - Điều hướng chính, phụ - Tên đăng nhập - Mật - Điều hướng nội Trang nội dung - Điều hướng chính, phụ - Thơng tin sản phẩm - Tùy chọn (màu sắc, size, số lượng) - Sản phẩm tương tự - Điều hướng nội Trang thoát - Xác nhận đặt hàng thành công - Theo dõi đơn hàng - Tiếp tục mua hàng Thiết kế wireframe Xác định thành phần trang Tiêu chí thiết kế giao diện Tiêu chí thiết kế giao diện Khả sử dụng Thói quen người dùng Khả sử dụng II I Di chuyển III Nguyên tắc Thị giác 7(+/-)2 - - - Số lượng sản phẩm hàng tối đa Các nội dung phân thành mục, mục có nội dung Phần đăng kí có nội dung dài chia thành mục tối đa lần thao tác - - Tăng kích thước nút bấm để người sử dụng dễ dàng thao tác Nhóm xếp nội dung tương tự cạnh Sử dụng khoảng trắng để tạo danh giới cho mục tránh việc người dùng ấn nhầm - Trắng-đen kết hợp an toàn hiệu Sử dụng khoảng trắng tạo cảm giác thơng thống, giúp nội dung dễ đọc Sản phẩm bán có màu sắc đa dạng, cần tối giản phơng Sử dụng font chữ quán Sử dụng font không chân để giảm cảm giác mỏi mắt đọc Kích thước font dãn dịng hợp lý Kích thước tìm kiếm rộng giúp người dùng dễ dàng xem lại xác minh nội dung tìm kiếm Thói quen người dùng Đọc từ xuống Khơng có thói quen từ trái qua phải sử dụng cuộn lần đầu truy - Phần thơng tin đăng kí, đăng nhập có label phía bên Nội dung sản phẩm xếp theo thứ tự từ xuống: hình ảnh thông tin chi tiết cập Cần ưu tiên xếp nội dung quan trọng bật lên đầu: thương hiệu, nhãn hàng, hình ảnh để thu hút ý, xu hướng, hỗ trợ, Chú ý thơng tin dạng hình ảnh văn - Đặt phần banner lên đầu trang để tạo ý - Sử dụng icon quen thuộc với người dùng IV Xây dựng website Ngôn ngữ sử dụng: HTML/CSS, Javascript - Phân tích giao diện để xác định bố cục thư viện cần dùng Thu thập tài nguyên: hình ảnh, font, icon,… Code: tạo folder file html, css, image, font để dễ quản lý Kiểm tra sửa lỗi (nếu có) Tối ưu