Bài tập lớn môn: Thiết kế giao diện web Đề tài: Thiết kế bán hàng mỹ phẩm

MÔN:THIẾT KẾ GIAO DIỆN WEB tÊN ĐỀ TÀI:THIẾT KẾ GIAO DIỆN WEB BÁN HÀNG MỸ PHẨM  TÊN THÀNH VIÊN PHAN QUỲNH ANH-637706 VŨ THỊ LAN ANH-637701 HỒ THỊ THÚY NGA -637750 Giáo viên hướng dẫn: Phạm Thị Lan Anh   I Tổng quan đề tài: - Kinh tế ngày phát triển, nhu cầu làm đẹp người ngày cao Việc làm đẹp không tập chung vào giới trẻ mà phổ biến với tất người Xuất phát từ đó, ý tưởng kinh doanh bán mỹ phẩm đời ngày căng nhiều Nhưng mà xuất nhiều sản phẩm chất lượng gây hại cho người dùng Vì người dùng ngày hướng đến sản phẩm có thành phần từ tự nhiên an toàn sử dụng, chấp nhận với giá thành cao - Công nghệ thông tin ngày phát triển, hàng triệu người giới sử dụng Internet xem nơi lý tưởng để tìm kiếm thơng tin mua sắm sản phẩm Thì website xem phương tiện hỗ trợ đắc lực cho hoạt động kinh doanh bên cạnh trang mạng xã hội Sản phẩm mạng đa dạng nhiều chủng loại với nhiều mức giá khác khiến người tiêu dùng nên chọn hãng nào,loại tốt Vì với mong muốn đem đến thơng tin xác, an toàn cho người sử dụng với mức giá phù hợp với người nên beauty shop giúp bạn II Các sản phẩm chủ đề Beauty Graden: Đây trang web bán mỹ phẩm tiếng nước Tại danh mục sản phẩm chủ yếu mỹ phẩm hãng tiếng an toàn với nhiều người sử dụng, tin dùng nhiều người - Ngoài website cịn cung cấp thơng tin thực phẩm chức cho người dùng, phụ kiện hỗ trợ cho việc trang điểm thương hiệu tiếng mỹ phẩm https://beautygarden.vn/ Sulwhasoo: Trang web sử dụng nguyên Hàn, bao gồm nhânsâm, ngọc trúc, địa hoàng, hoa ly trắng, hoa mẫu đơn, hoa sen hồng III Ý tưởng thiết kế Dựa beauty graden.vn • Một trang web chuyên bán mỹ phẩm sản phẩm dành cho việc làm đẹp cho phụ nữ • Tốc độ truy cập trang web nhanh • Giao diện bắt mắt dễ sử dụng • Có đầy đủ loại sản phẩm loại giá hợp lý • Có đầy đủ chức tìm kiếm, giỏ hàng, đăng nhập, liên hệ,… IV Chi tiết Demo tổng quan: Bố cục : gồm ba thành phần : header, content, footer 1.1 Header: gồm hình ảnh thương hiệu, danh mục menu, chuyên mục điều hướng 1.2 người dùng đến trang viết cụ thể: vị trí đặt menu ngang cố định,tên thương hiệu, … + Phần slider: trang chủ có hình ảnh với hiệu ứng chuyển đổi tạo ấn tượng với người dùng + Ô tìm kiếm: Phát huy vai trị đắc lực việc tìm kiếm sản phẩm mà khách hàng cần tìm kiếm cách nhanh + Hotline: cách thức liên lạc giúp khách hàng liên hệ với chủ cửa hàng cách nhanh nhất, tiện lợi việc cần tư vấn + giỏ hàng: thành phần thiếu website bán hàng, giúp khách hàng ln cập nhật sản phẩm mà sở hữu dễ dàng thêm, bớt muốn 1.3 Body : nơi thể nội dung trang web Đây phần tập trung thể nhiều Doanh nghiệp cần sáng tạo xây dựng nội dung hấp dẫn người đọc Trong trang web chia nội dung trải từ xuống dưới, từ trang trước trang sau Và trang chủ nơi đảm nhận chủ yếu thơng tin tóm tắt trang web Và trang thể chi tiết nội dung 1.4 Footer: nơi shop đưa thông tin shop như: địa shop (google map), email, số điện thoại, chi nhánh con, có thơng tin khuyến mãi,… Màu sắc: • màu sắc chủ đạo trang web màu xanh đậm xanh nhạt vì: • +Xanh màu thiên nhiên mang ý nghĩa sức khỏe, tươi mát, êm đềm • • • n bình +Màu xanh đậm tạo cảm giác ổn định, khao khát ,khỏe mạnh, phát triển +Màu xanh nhạt tạo cảm giác mát mẻ, an tồn, sẽ, ngon miệng Vì sử dụng màu xanh để người dùng an tâm sử dụng sản phẩm hãng bán đồng thời hãng mang đến cho người dùng sản phẩm an tồn, có nguồn gốc từ thiên nhiên Hình ảnh: trang web bán mỹ phẩm nên hình ảnh có liên quan mỹ phẩm với chiết xuất từ thiên nhiên Hình ảnh có chứa loại mỹ phẩm với cách sản xuất khác nhau:có thể đồ tự làm sản phẩm mặt nạ tự nhiên sản xuất theo dây chuyền công nghệ đại Font chữ: Phông chữ sử dụng Algerian, Cooper Black, Arial VD: Chi tiết phần: Header: B1: Tạo file (File -> New) với kích thước 2600x2000px 72 dpi B2: Tạo phần header với Rectangle Marqueue Tool với màu 25ad25 1f7a1f 94de99 B3:Sau tạo màu xong ta tạo khung mua sắm tìm kiếm 3.1 Tạo khung mua sắm Chọn Rounded Rectangle Tool(U)-> Blending Options->chọn Grandient Overlay->chọn màu 25ad25 màu 94de99 màu trắng Blending Options-> Stroke Sau vào custom shape tool(U)->shape Chọn hình giỏ hàng ghi chữ Sản phẩm đạt 3.2.Tạo khung tìm kiếm Chọn Rounded Rectangle Tool(U)-> Blending Options->chọn Grandient Overlay->chọn màu 94de99 màu trắng Blending Options-> Stroke.Sau vào custom shape tool(U)->shape Chọn hình tìm kiếm Ta sản phẩm B4: ta bổ sung thêm mục menu ikon Kết đạt được: • • Body: B1: Ghép hình ảnh vào khung Ghép hình ảnh mang tính thân thiện với mơi trường Trước tiên ta lấy ảnh sau chọn rectagular marquee tool(M)->kéo để định hình khung cắt->ctrl+j ta layer vừa cắt Sau Hoặc ta chọn magnetic lasso tool(L) muốn cắt thành layer chi tiết Nếu hình ảnh mà bạn muốn cắt lại có chữ bạn muốn xóa bạn chọn healing brush tool(J) để xóa chữ mà khơng bị hình ảnh • Sau chọn layer mà bạn muốn ghép kéo sang bên web thiết kế thả vào phần hình ảnh Nhấn ctrl+t để chỉnh sửa kích thước layer cho phù hợp với kích thước khung ảnh B2: Sau lấy tất ảnh sản phẩm mỹ phẩm ta ghép chúng vào phần thiết kế Kết đạt là: Chú ý: Khi lấy ảnh việc bị vỡ ảnh điều khó tránh khỏi, ta sử dụng công cụ Convert to Smart Opject để tránh vỡ ảnh, sử dụng phím tắt Ctrl + T để thay đổi kích thước ảnh ban đầu cho phù hợp với bố cục B3 Tạo phần hotline để khách hàng liên hệ cần tư vấn hay đặt hàng qua mạng Rectangle tool-> Blending options-> Grandient overlay.Chọn màu • 25ad25,94de99 màu trắng Blending options->stroke Chọn elliptical marquee tool (m) Viết chữ tạo hình • biểu tượng số điện thoại Ta sản phẩm • Footer: B1:Tạo phần địa shop hình ảnh thể tính an tồn Lí do: Thứ nhất: sản phẩm có thành phần từ thiên nhiên nên thân thiện với môi trường đưa môi trường Thứ hai :ta cần tạo hứng thú khách hàng sản phẩm shop Địa cửa hàng ghi bên trang web Sản phẩm hoàn thiện là: *Ở phần tạo trang phụ Tạo trang Kích thước trang phụ 2600x2900px Các bước tạo heder giống bước tạo trang chủ Chỉ có điều khác lúc ta phân chia thành hình để chứa hình ảnh thơng tin sản phẩm Ta sản phẩm Ta tạo khung danh sách sản phẩm cách: Rectangle tool (U)->Fill( chọn màu trắng) Bleding options ->stroke (chọn viền đen) Ta viết tên loại sản phẩm kiểu chữ arial Tiếp theo ta lấy ảnh lòng vào khung chia ghi thông tin sản phẩm Cuối ta tạo ô chuyển trang : Các bước tạo giống Sau ta lồng hình ảnh banner khuyến sản phẩm Kết cuối là: MENU I TỔNG QUAN ĐỀ TÀI II CÁC SẢN PHẨM CÙNG CHỦ ĐỀ Beauty Graden Sulwhasoo III Ý TƯỞNG THIẾT KẾ IV CHI TIẾT Bố cục 1.1 Demo tổng quan 1.2 Header 1.3 Body 1.4 Footer Màu sắc Hình ảnh Font chữ Chi tiết ... Các sản phẩm chủ đề Beauty Graden: Đây trang web bán mỹ phẩm tiếng nước Tại danh mục sản phẩm chủ yếu mỹ phẩm hãng tiếng an toàn với nhiều người sử dụng, tin dùng nhiều người - Ngoài website... sen hồng III Ý tưởng thiết kế Dựa beauty graden.vn • Một trang web chuyên bán mỹ phẩm sản phẩm dành cho việc làm đẹp cho phụ nữ • Tốc độ truy cập trang web nhanh • Giao diện bắt mắt dễ sử dụng... tâm sử dụng sản phẩm hãng bán đồng thời hãng mang đến cho người dùng sản phẩm an tồn, có nguồn gốc từ thiên nhiên Hình ảnh: trang web bán mỹ phẩm nên hình ảnh có liên quan mỹ phẩm với chiết xuất