Thiết kế web cơ bản sản phẩm thiết kế website ananas vn

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 CUỐI KỲ MÔN: THIẾT KẾ WEB CƠ BẢN SẢN PHẨM: THIẾT KẾ WEBSITE ANANAS.VN Mã môn học Nhóm mơn học Giảng viên giảng dạy : : : 01 Nguyễn Thị Tuyết Mai Nguyễn Thị Thanh Tâm Hà Nội – 1, 2022 Mục lục I Phân tích Website Nội dung 2 Giao diện (UI) Công nghệ 4 Trải nghiệm người dùng (UX) II Xây dựng Website Thiết kế Figma Xây dựng Website Visual Code Studio 11 I Phân tích Website Chúng em phân tích 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, trang web có mục đích để bán hàng, quảng bá thông tin sản phẩm hướng đến người mua hàng Các sản phẩm chủ yếu bao gồm giày thể thao, mũ áo, balo số phụ kiện liên quan Đối tượng hướng đến người trẻ, có nhu cầu mua sắm local brand, có độ tuổi từ 18 đến 26 tuổi - Về tổ chức website: + Hình thức tổ chức web: dạng lưới đầy đủ (full-mesh) + Số trang bao gồm trang: trang chủ (home), trang nội dung sản phẩm, trang toán, trang exit + Tổng số liên kết Px(P-1) = 4x3 = 12 liên kết - Về điều hướng website: website có điều hướng đa dạng, bao gồm nhiều loại hình điều hướng: + Điều hướng kết hợp điều hướng vị trí: (chữ L ngược – Inverted L) giúp người dùng có nhìn tổng quan website sử dụng website cách dễ dàng thuận tiện + Điều hướng liên kết kết hợp điều hướng footer: điều hướng giúp người dùng truy cập trang không quan trọng website, thường điều hướng cung cấp thông tin website + Điều hướng tiện ích: giúp người dùng có điều hướng trang web ngồi website, góp phần tìm hiểu thêm sản phẩm website 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, đại, cung cấp cho người dùng đủ mục cần thiết sản phẩm cửa hàng, thông tin đăng nhập, danh mục mua hàng, sản phẩm hạ giá - Các đề mục chia rõ ràng, đem lại trải nghiệm tốt cho người sử dụng - Trang web áp dụng tốt định luật miller chia nhỏ khối thông tin giúp người mua dễ theo dõi tìm kiếm sản phẩm mà muốn tìm cách nhanh chóng b Khoảng trống website: - Web trình bày trông dễ thở, với không nhiều chữ , chủ yếu hình ảnh sản phẩm - Nhưng theo cá nhân tơi thấy phần hình ảnh đầu trang chủ trước mục instagram to Việc thiết kế trang web với nhiều khoảng trống(không nhiều chữ) đem lại hiệu quả, làm cho người xem không bị phân tâm chi tiết thừa, làm khách hàng ý vào hình ảnh quảng cáo sản phẩm trang web c Thu hút ý qua bố cục hình ảnh - Như tơi nói trên, ngồi việc khó chịu với hai hình ảnh to trang web, nhìn chung web có bố cục hình ảnh hợp lý - Sự lựa chọn hình ảnh dựa yếu tố (kích cỡ, màu sắc, khoảng trống) - Cá nhân thấy web làm gần tốt: Hình ảnh có tính đồng điệu màu sắc, khoảng cách, kích cỡ ảnh phù hợp d Màu sắc giao diện - Nền trắng , chữ màu đen , khơng phù hợp với tên thương hiệu- ananas (Trái dứa) - Màu sắc nhẹ nhàng thể trẻ trung, động e Chất lượng hình ảnh - Tốt, có đầu tư mặt hình ảnh - Các hình ảnh sản phẩm tự chụp, chất lượng hình ảnh cao, rõ nét, thể thương hiệu sản phẩm f Typography - Hai font chữ dùng trang web Geometric ExtraBold -cho mục tiêu đề Nunito sans Bold l - cho phần nội dung - Phần Typo trang nhìn chung ổn với phần in đậm cho đề mục kết hợp với font chữ Geometric ExtraBold font chữ hình học mang lại cảm giác lịch(phù hợp với gam màu trang) - Việc kết hợp hai font chữ ( font chữ hình học font chữ mang hướng đại có cân tốt ) đem lại cảm giác hài hòa , đại trẻ trung cho trang web - Bố cục text tốt dễ nhìn, màu chữ màu có tương phản g Điều hướng người dùng hợp lý - Về mặt điều hướng, trang web có 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ễ dàng 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 html5 ( hầu hết trang web năm gần sử dụng) với ưu điểm: + HTML5 sử dụng cho nhiều ứng dụng hơn: Một số ứng dụng SVG, canvas… HTML5 hỗ trợ, dùng HTML phải sử dụng thêm phương tiện bổ trợ + JavaScript chạy web browser: HTML5 hỗ trợ hoàn tồn cho JavaScript chạy web browser, cịn HTML phiên cũ khơng thể thực - Bên cạnh html5, web sử dụng css3: + Hiển thị cho thiết bị có kích thước khác Hỗ trợ tương thích với kích thước hình mà khơng cần chỉnh sửa nội dung hiển thị + Tối ưu hóa cơng cụ tìm kiếm SEO khả loại bỏ đoạn code HTML thừa giúp website hoạt động tốt + Tăng khả qn, hỗ trợ tương thích với trình duyệt giúp tối ưu hạn chế lỗi tảng trình duyệt khác 4 Trải nghiệm người dùng (UX) - Trang web trì đồng thiết kế (bao gồm màu sắc, font chữ, hình ảnh, ) - Áp dụng phong cách thiết kế đơn giản đồng thiết bị pc, smartphone tablet giúp tăng khả sử dụng, dễ dàng tương tác điều hướng - Các ký hiệu, nút biểu tượng sử dụng theo thiết kế tiêu chuẩn tạo cho người dùng độ tin cậy quen thuộc cho người dùng trình sử dụng - Tuy nhiên bên cạnh web cịn thiếu số tính quan trọng chức đăng ký đăng nhập Đây tính giai đoạn hình thành người dùng nhấn “đăng ký” “đăng nhập”, hệ thống đưa thông báo cho người dùng - Màu trắng xám sử dụng chủ yếu thiết kế mang lại trẻ trung điềm tĩnh, đơn giản mà mặt hàng trang web hướng đến - 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 - Các thiết kế ln hướng người dùng đến đích đến cuối giúp người dùng mua hàng từ trang web (vd: người dùng truy cập vào sản phẩm theo nhiều cách từ trang web, đường dẫn đến mục sản phẩm xuất theo nhiều cách khác nhau, ) II Xây dựng Website Thiết kế Figma a Phiên Desktop Trang chủ Trang đăng ký Trang danh mục sản phẩm Trang chi tiết sản phẩm Trang tốn Trang hồn tất mua hàng b Phiên Tablet Trang chủ Trang đăng ký Trang danh mục sản phẩm Trang chi tiết sản phẩm Trang tốn Trang hồn tất mua hàng c Phiên Smartphone Trang chủ Trang đăng ký Trang danh mục sản phẩm Trang chi tiết sản phẩm Trang menu 10 Xây dựng Website Visual Studio Code Trang chủ Trang đăng ký Trang danh mục sản phẩm 11 Trang chi tiết sản phẩm Trang toán Trang hoàn tất mua hàng 12 ... cung cấp thông tin website + Điều hướng tiện ích: giúp người dùng có điều hướng trang web ngồi website, góp phần tìm hiểu thêm sản phẩm website Giao diện (UI) Sẽ đánh giá trang web dựa tiêu chí:... mua sản phẩm - Các thiết kế hướng người dùng đến đích đến cuối giúp người dùng mua hàng từ trang web (vd: người dùng truy cập vào sản phẩm theo nhiều cách từ trang web, đường dẫn đến mục sản phẩm. .. danh mục sản phẩm Trang chi tiết sản phẩm Trang tốn Trang hồn tất mua hàng c Phiên Smartphone Trang chủ Trang đăng ký Trang danh mục sản phẩm Trang chi tiết sản phẩm Trang menu 10 Xây dựng Website