BÀI tập THẢO LUẬN NHÓM WEB căn bản thiết kế website bán hàng thời trang IVYmoda

E1 _ i HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG BÀI TẬP THẢO LUẬN NHĨM WEB CĂN BẢN Thiết kế website bán hàng thời trang IVYmoda GIẢNG VIÊN: Trần Thị Tuyết Mai Nhóm Dương Thị Loan Phùng Thị Minh Anh Ngô Thị Vân Anh Nguyễn Thị Luyến Nguyễn Thị Thắm Phạm Thị Hồng Dịu Nguyễn Thị Phượng HÀ NỘI - 2021 Ì1 MỤC LỤC I II III I Planning Phân tích yêu cầu website a, Nghiên cứu khách hàng mục tiêu • Độ tuổi: 20-30 tuổi • Giới tính: thường nữ • Cơng việc: nhân viên văn phịng, kinh doanh, nội trợ • Thu nhập: khoảng 5tr trở lên • Phong cách thời trang: đại lịch trẻ trung cá tính • Tần suất mua hàng Online: với độ tuổi từ 20-30 thuộc tầng lớp trẻ yêu thích lạ đồng thời độ tuổi độ tuổi vừa học vừa làm nên bận rộn nên muốn nhanh chóng -> tần suất mua hàng Online cao b, Xác định mục tiêu người dùng • Mục đích vào website thời trang khách hàng tìm kiếm thơng tin sản phẩm mua hàng • Ngồi họ cịn tìm hiểu thơng tin công ty thương hiệu xem tin tức thời trang, c, Phân tích đề xuất tính cho website IV • sản phẩm Khi vào website để mua hàng khách hàng quan tâm đến vấn đề sản phẩm giá mẫu mã chất lượng số lượng hàng : V ^ Giá phải phù hợp với túi tiền khách hàng Đặc biệt họ quan tâm đến sản phẩm có chương trình ưu đãi khuyến mại VI VII ^ Mẫu ^ mã mẻ đẹp so với đối thủ cạnh tranh Chất lượng sản phẩm: điều khách hàng cảm thấy lo lắng mua sắm online Vì việc đưa thơng tin chi tiết sản phẩm đánh giá sản phẩm khách hàng mua trước lòng tin cho khách hàng chất lượng sản phẩm VIII • • Giao diện website Khách hàng thích giao diện website có bố cục dễ nhìn cân đối; cách trình bày đẹp mắt, phù hợp với mục đích, thói quen sử dụng trang web họ Ngoài nhắc đến thương hiệu thời trang “IVY moda” xa lạ với nhiều người nên cần tạo giao diện bắt mắt ưa nhìn độc vào trang web thu hút ý họ khiến họ lại trang web lâu Họ thường vào trang web với mục đích để mua hàng nên khơng thích phần quảng cáo gây khó chịu gây thời gian Trang web hạn chế hiển thị quảng cáo không đưa quảng cáo không liên quan đến thời trang để tránh làm phiền người dùng IX • Tốc độ truy cập Khi vào trang web, tất khách hàng ln muốn có tốc độ truy cập nhanh Việc chờ lâu để tải trang làm khách hàng cảm thấy khó chịu muốn rời trang Nên để tăng tốc độ cho web làm làm tối ưu trang web sử dụng tên miền ngắn, không sử dụng plugin phải trả phí liên quan đến mã HTML, CSS ,JS phải tối ưu X • • • • Cơng cụ tìm kiếm, giỏ hàng tốn Trên trang web thường có nhiều danh mục sản phẩm khác nhau, chia làm nhiều phân loại nên người dùng thích có tìm kiếm trang để thuận tiện việc tìm kiếm sản phẩm Ngồi ra, cần có lọc sản phẩm giúp họ tìm kiếm nhanh chóng Sự xuất giỏ hàng sản phẩm giúp người dùng thêm hàng vào giỏ họ xem sản phẩm mà không cần phải trang để tìm đến giỏ hàng; Việc mua sản phẩm thời trang trang web tiện lợi việc chọn size, màu sắc, kiểu dáng cho phù hợp với khó mua trực tiếp cửa hàng Do khách hàng mong muốn tư vấn sản phẩm trước mua để có lựa chọn đắn Vì trang web có tính trị chuyện để khách hàng liên hệ trực tiếp với nhân viên bán hàng dễ dàng Khách hàng thích trang web bán hàng có nhiều phương thức tốn để dễ dàng lựa chọn tốn Vì web cần liên kết với nhiều cách thức toán khác XI • Liên kết với mạng xã hội Khách hàng thích trang web có liên kết với trang mạng xã hội Facebook, Instagram, để thuận tiện việc tìm hiểu sản phẩm, thơng tin thơng qua mạng xã hội Vậy nên trang web IVY moda thiết kế liên kết với trang mạng xã hội hãng Kiến trúc thông tin XII Xây dựng tổ chức thông tin cho web: Trang Web bao gồm: XIII Header: • • • Logo: phía bên trái trang web Trong menu có trang chủ, thời trang nữ, phụ kiện, chăm sóc, ưu đãi xếp theo hàng ngang phía trang web Thanh search, tài khoản, giỏ hàng: đặt bên phải trang Body: • Hình ảnh: liên quan đến sản phẩm, rõ nét, đẹp mắt, thể chất sản phẩm chia thành hàng, giao diện desktop tabletsẽ để ảnh hàng cịn với giao diện phone có kích thước nhỏ để ảnh hàng XIV • Nội dung trang chia làm mục như: sản phẩm bật, sản phẩm theo xu hướng, phụ kiện, tin tức, XV Footer bao gồm: sách, địa chỉ, liên lạc, hỗ trợ khách hàng xếp dàn trải cuối trang web XVI Ngoài trang web cịn có nút “back-to-top”, nút tin nhắn đặt góc bên phải cuối trang hiển thị XVII Bên cạnh trang web điều hướng sang trang mạng xã hội để làm tăng độ thị trang web tăng lượng khách hàng vào trang web XVIII II Design Wirefram XIX Head er • Logo: vị trí phía bên trái, tuỳ thuộc • • • • XX Body vào giao diện Menu:theo nguyên tắc 7+-2, bao gồm Trang chủ, Thời trang nữ, Phụ kiện , Chăm sóc, Ưu đãi Thanh search: giúp người dùng tìm kiếm sản phẩm theo nhu cầu nhanh Biểu tượng tài khoản: đăng nhập / đăng kí Giỏ hàng:khách hàng thêm vào giỏ hàng để hàng chờ mà không cần phải mua ln • Banner: vị trí header có nhiều chấm trịn thể dạng slide • Nội dung, hình ảnh mục sản phẩm XXII XXI Foote • Chính sách: bán hàng, bảo mật thơng tin, giao r hàng tốn • Địa • Hỗ trợ khách hàng: tìm kiếm, giói thiệu, đổi trả, dịch vụ • Liên lạc: qua hotline, nút biểu tượng link quan trang mạng xã hội khác Facebook, Twitter, Youtobe, Instagram a) Desktop XXIII Tỷ lệ khung:1440W-4653H XXIV Phần Header Footer giống mơ tả bên trang nhóm nói body trang XXV Trang chủ: • • • • • Banner chia theo chủ đề sản phẩm Nội dung sản phẩm chia thành : Sản phẩm bật; Sản phẩm theo xu hướng; Phụ kiện; Tin tức Mỗi hàng phần nội dung xuất sản phẩm gồm hình ảnh, tên giá sản phẩm tượng trưng cho shop Bên cạnh nhóm thiết kế người dùng hover vào sản phẩm mua giỏ hàng dễ dàng vào mua thay phải vào sản phẩm chi tiết đến bước Có “ Chat” thiết kế bên phải: Khi người dùng cần tư vấn Nút “Quay đầu trang” đặt bên phải để ng dùng quay đầu trang XXVI XXVII (Wirefram trang chủ- Desktop) XXVIII Trang đăng nhập,Trang đăng ký, Trang đăng ký thành cơng, Trang thốt: • • Nhóm phủ lớp opacity lên trang chủ, nội dung đè lên lớp đăng ký, đăng nhập thoát Mục đích để làm giảm nội dung trang bật lên ô đăng ký đăng nhập để người khơng bị lỗng thơng tin Đặc biệt trang nhóm dựa theo trải nghiệm người dùng thường họ không may click vào nút x tab bị trang nên nhóm làm trang exit để thơng báo cho người dùng có chắn muốn rời khỏi hay khơng XXIX Trang thời trang nữ: • • • Phần Header: giữ lại phần header trang chủ sau đăng nhập nên nhóm thay icon tài khoản thành avatar người dùng cung cấp Dòng “Trang chủ/Thời trang nữ”: thể vị trí người dùng từ trang đến trang Phần nội dung: XXX Nhóm chia Grid thành phần nhau: XXXI J Phần 1:Bộ lọc tìm kiếm: tất sản phẩm shop có bán, size, Đánh giá sản phẩm Điều để người dùng lựa chọn sản phẩm theo ý nhanh XXXII cột XXXIII J Các phần lại nội dung: hình ảnh , giá, tên sản phẩm chia cho Ở phía nhóm có điều hướng cho khách hàng sang trang tiếp nút điều hướng để người dùng có nhiều lựa chọn sản phẩm trang XXXIV < > b) Tablet XXXV XXXVI trang c) Smartphone Tỷ lệ khung: 768W-2982H Giữ nguyên toàn bố cục trang Desktop thay đổi chiều rộng XXXIX XL Header: • • • • • XXXVII XXXVIII (wrieframe trang chủ- smartphone) Logo: đặt hình Smartphone: kích thước điện thoại nhỏ, nên đặt mắt người dùng ý đến Biểu tượng “3 dấu gạch ngang” đặt phía bên trái: Khi ấn vào có mục phần Menu Biểu tượng “Kính lúp” đặt bên phải hình: thể nút tìm kiếm nhanh Biểu tượng “hình người” Tài khoản: để đăng ký đăng nhập Biểu tượng “giỏ hàng”: đặt đầu ng dùng cho sản phẩm vào giỏ chưa đưa định mua XLI Footer: XLII Chia thành dịng hàng ngang: Chính sách, Địa chỉ, Liên lạc, Về hỗ trợ khách hàng Bên cạnh dòng trên: có mũi “tên bên cạnh trỏ xuống”: thể khách hàng cần biết thêm thơng tin cần ấn xuống đọc XLIII XLIV Phần trang chủ(body): Phần nội dung Smartphone tương tự phần Desk Table: Nhưng thiết kế ta thiết kế hàng hiển thị sản phẩm phù hợp với giao diện điện thoại XLV Phần trang chủ 3: thể menu click vào icon danh mục XLVI Trang thời trang nữ(body): • • Để tối ưu trang nhóm em thay đổi lọc cụ thể lọc ẩn người dùng click vào hiển thị thông tin size, sản phẩm hay đánh giá Sản phẩm chia bố cục trang chủ Visual design XLVII Hệ thống lưới (Grid) chia thành 12 cột sử dung xuyên suốt giao diện để đảm bảo độ xác thiết kế XLVIII Dựa vào wireframe, nhóm thay sản phẩm vào khung dựng trước thêm vào hình ảnh màu sắc cho trang web XLIX Đối tượng khách hàng chủ yếu từ độ tuổi 20-30 đặc biệt khách hàng làm văn phòng màu sắc lựa chọn chủ yếu trang web màu nhã nhặn: hồng phấn, xám, trắng với màu làm highlight cho L.lần hover click chuột LI Color Styles LII FDF8F& màu LIII B62121- màu nỏi bật LIV Màu chữ LV (màu sử dung xuyên suốt trang web) LVI Text Styles LVII Ag 43px-h1 ■ 43/Auto LVIII Ag 35px-h2 ■ 35/Auto LIX Ag 22px-hi3 - 22/Airto LX Ag 18px-p ■ 18/Auto LXI Ag 14px-ncrte ■ 18/Auto LXII (font chữ sử dụng giao diện Desktop) LXIII LXIV LXV LXVI LXVII LXVIII LXIX LXX LXXI LXXII LXXIII LXXIV LXXV LXXVI LXXVII LXXVIII LXXIX LXXX LXXXI LXXXII LXXXIII LXXXIV LXXXV LXXXVI LXXXVII LXXXVIII LXXXIX XC XCI XCII XCIII XCIV I (hình ảnh visual design trang chủ ) II III Đánh giá website III Thông tin sơ XCV XCVI XCVII XCVIII XCIX Tên website: IVY Moda C URL: https://ivymoda1.com/ CI Mục đích đánh giá website: Xem xét đánh giá nội dung hình thức bố cục giao diện tính website CII • Các chức cung cấp website IVY moda Cách bố trí hình ảnh, sản phẩm chương trình khuyến mãi, ưu đãi đầy đủ thông tin dễ dàng nhìn thấy • Các hình ảnh phù hợp với nội dung • Phong cách nội dung phù hợp với việc kinh doanh • Độ tương phản màu sắc chữ, hình ảnh hài hịa • Kích thước văn Website vừa phải, có thay đổi theo kích thước hình • Giao diện, văn bản, hình ảnh website dễ dàng thay đổi kích thước trình duyệt • Những loại hình ảnh sử dụng website: JPEG, PNG • Phần lọc chi tiết với tồn thuộc tính để lọc sản phẩm xếp hết đầu Để ý thấy thường trang web khác ẩn thuộc tính đi, người dùng ấn vào chọn lọc Chính nhờ yếu tố mà người dùng dễ dàng tìm kiếm sản phẩm với nhu cầu Chat trực tuyến : Cho phép khách hàng người quản lý website chat trực • tiếp với website • Có tìm kiếm văn • Điều hướng: CIII J Có nút “back-to-top” cho trang dài CIV J Nhãn điều hướng rõ ràng CV J Có dấu hiệu để người dùng biết vị trí trạng thái điều hướng CVI J đường dẫn website để kết nối đến trang khác • trang trang chủ, thời trang nữ, đăng kí đăng nhập, Footer: đặt cố định cuối trang, bao gồm thông tin công ty thể liên hệ cần thiết • Liên kết mạng xã hội : công cụ giúp website liên kết với nhiều trang mạng xã hội phổ biến Facebook, Instagram, Zalo, Ngồi việc tìm hiểu website,khách hàng tìm hiểu,quan tâm nhãn hàng trang mạng xã hội CVII CVIII Kết luận chung : Nội dung đầy đủ,phù hợp với mục tiêu xây dựng website, với đối tượng khách hàng mà nhóm hướng đến Bố cục xếp cách hợp lý,tạo điều kiện cho người đọc dễ định hướng website Hình thức đẹp,phù hợp với chủ đề nội dung Các tính website hoạt động tốt,đáp ứng nhu cầu khách hàng CIX IV Bảng phân chia công việc CX CXI Họ tên CXII M CXIII Thiết CXIV B STT ã sinh viên kế web áo cáo, slide • Trang chủ • Phần CXVI Dươ CXVII B CXV ng Thị Loan (Nhóm trưởng) CXVIII CXIX Phùn 19DCTM037 CXX g Thị Minh Anh Ngô CXXII CXXIII 19DCTM007 19DCTM001 Thị Vân Anh CXXIV CXXVIII CXXIX Ngu CXXX yễn Thị Luyến B B • Prototype • Sitemap • Trang chủ • Trang chủ CXXV Trang nội dung B • 19DCTM041 • Trang đăng nhập Trang đăng kí CXXXI CXXXII Phạ CXXXIII B CXXXIV m Thị Hồng • 19DCTM015 • Trang nội dung Dịu CXXXVI CXXXVII CXXXVIII CXXXIX • B19DCTM073 Nguyễn Thị Thắm CXLII CXLIII Ngu CXLIV yễn Thị Phượng 19DCTM059 B Trang chủ Trang • Trang đăng kí thành cơng • design • Thuyết trình CXXI • Phần planning • CXXVI Phần • CXXVII Slide • Tổng hợp báo CXXXV • Phần planning • CXL Phần CXLI đ ánh giá • CXLV Phần CXLVI đánh giá ... trang web bán hàng có nhiều phương thức toán để dễ dàng lựa chọn tốn Vì web cần liên kết với nhiều cách thức toán khác XI • Liên kết với mạng xã hội Khách hàng thích trang web có liên kết với trang. .. nên trang web IVY moda thiết kế liên kết với trang mạng xã hội hãng Kiến trúc thông tin XII Xây dựng tổ chức thông tin cho web: Trang Web bao gồm: XIII Header: • • • Logo: phía bên trái trang web. .. đường dẫn website để kết nối đến trang khác • trang trang chủ, thời trang nữ, đăng kí đăng nhập, Footer: đặt cố định cuối trang, bao gồm thông tin công ty thể liên hệ cần thiết • Liên kết mạng