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

Vì vậy người dùng ngày càng hướng đến những sản phẩm có thành phần từ tự nhiên an toàn khi sử dụng, chấp nhận với giá thành rất cao.. Sản phẩm trên mạng thì đa dạng nhiều chủng loại với

NHÓM :03 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

BÀI BÁO CÁO

I Tổng quan đề tài:

- Kinh tế ngày càng phát triển, nhu cầu làm đẹp của con người ngày một cao Việc làm đẹp không chỉ tập chung vào giới trẻ mà còn phổ biến với tất cả mọi người Xuất phát từ đó, các ý tưởng kinh doanh bán mỹ phẩm ra đời ngày căng nhiều Nhưng cũng

vì thế mà xuất hiện nhiều sản phẩm kém chất lượng gây hại cho người dùng Vì vậy người dùng ngày càng hướng đến những sản phẩm có thành phần từ tự nhiên an toàn khi sử dụng, chấp nhận với giá thành rất cao

- Công nghệ thông tin ngày một phát triển, hàng triệu người trên thế giới đều sử dụng Internet và xem đây là nơi lý tưởng để tìm kiếm thông tin cũng như mua sắm sản

phẩm Thì website được xem là một trong những phương tiện hỗ trợ đắc lực nhất cho

hoạt động kinh doanh bên cạnh các trang mạng xã hội Sản phẩm trên mạng thì đa dạng nhiều chủng loại với nhiều mức giá khác nhau khiến người tiêu dùng không biết nên chọn hãng nào,loại nào thì tốt Vì vậy với mong muốn đem đến thông tin chính xác, an toàn cho người sử dụng với mức giá phù hợp với từng người nên beauty shop

có thể giúp các bạn

II Các sản phẩm cùng chủ đề.

1 Beauty Graden: Đây là một trang web bán mỹ phẩm nổi tiếng ở trong nước

Tại đây danh mục sản phẩm chủ yếu các mỹ phẩm của các hãng nổi tiếng và an toàn với nhiều người sử dụng, được sự tin dùng của rất nhiều người

- Ngoài ra website còn cung cấp thông tin về các thực phẩm chức năng cho người dùng, phụ kiện hỗ trợ cho việc trang điểm và các thương hiệu nổi tiếng về mỹ phẩm

https://beautygarden.vn/

2 Sulwhasoo: Trang web là sử dụng các nguyên thuần Hàn, bao gồm nhânsâm, ngọc trúc, cây địa hoàng, hoa ly trắng, hoa mẫu đơn, hoa sen hồng.

III Ý tưởng thiết kế

Dựa trên beauty graden.vn

 Một trang web chuyên bán mỹ phẩm và các 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 và dễ sử dụng

 Có đầy đủ các loại sản phẩm và các loại giá cả hợp lý

 Có đầy đủ các chức năng như tìm kiếm, giỏ hàng, đăng nhập, liên hệ,…

IV Chi tiết

1 Demo tổng quan: Bố cục : gồm ba thành phần chính : header, content, footer 1.1.

1.2 Header:

gồm hình ảnh thương hiệu, danh mục các thanh menu, chuyên mục điều hướng người dùng đến các trang con và các bài viết cụ thể: vị trí đặt thanh menu là thanh 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ớingười dùng

+ Ô tìm kiếm: Phát huy vai trò đắc lực trong việc tìm kiếm một sản phẩm mà khách hàng cần tìm kiếm một cách nhanh nhất

+ 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 một cách nhanh nhất, tiện lợi trong việc cần tư vấn

+ giỏ hàng: là một thành phần không thể thiếu của một website bán hàng, nó

giúp khách hàng luôn cập nhật được những sản phẩm mà mình đã sở hữu và dễ dàng thêm, bớt nếu muốn

1.3 Body :

là nơi thể hiện nội dung của trang web Đây là phần tập trung và thể hiện nhiều nhất Doanh nghiệp cần sáng tạo và xây dựng nội dung hấp dẫn người đọc Trong trang web này thì chia nội dung được trải đều từ trên xuống dưới, từ trangtrước ra trang sau Và trang chủ là nơi đảm nhận chủ yếu về các thông tin tóm tắtnhất của trang web Và các trang con sẽ thể hiện chi tiết nhất về các nội dung đó.

1.4 Footer:

là nơi shop đưa ra các thông tin về shop như: địa chỉ shop (google map), email,

số điện thoại, các chi nhánh con, có thông tin khuyến mãi,…

2 Màu sắc:

• màu sắc chủ đạo của trang web là màu xanh lá cây đậm và xanh lá cây nhạt vì:

• +Xanh lá cây là màu của thiên nhiên mang ý nghĩa sức khỏe, tươi mát, êm đềm

và yên bình

• +Màu xanh đậm thì tạo ra 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 toàn, sạch sẽ, ngon miệng

• Vì vậy sử dụng màu xanh lá cây để người dùng có thể an tâm khi sử dụng sản phẩm do hãng bán ra và đồng thời hãng có thể mang đến cho người dùng sản phẩm an toàn, có nguồn gốc từ thiên nhiên

Hình ảnh: vì đây là trang web bán mỹ phẩm nên hình ảnh cũng có liên quan

về mỹ phẩm với chiết xuất từ thiên nhiên

Hình ảnh có chứa các loại mỹ phẩm với các cách sản xuất khác nhau:có

thể là đồ tự làm như các sản phẩm mặt nạ tự nhiên hoặc được sản xuất theo dây chuyền công nghệ hiện đại

3 Font chữ:

4 Phông chữ được sử dụng Algerian, Cooper Black, Arial.

B2: Tạo phần header với Rectangle Marqueue Tool với màu là 25ad25 và

1f7a1f và 94de99.

B3:Sau khi tạo màu xong ta tạo khung mua sắm và 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 và màu 94de99 và màu trắng

Blending Options-> Stroke

Sau đó vào custom shape tool(U)->shape Chọn hình giỏ hàng và ghi chữ.Sản phẩm đạt được là

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 và màu trắng

Blending Options-> Stroke.Sau đó vào custom shape tool(U)->shape Chọn hìnhtìm kiếm

Ta được sản phẩm

B4: ta bổ sung thêm các mục menu và các ikon

• Trước tiên ta lấy ảnh sau đó chọn rectagular marquee tool(M)->kéo để định hìnhkhung cắt->ctrl+j ta được layer vừa cắt

Sau đó Hoặc ta chọn magnetic lasso tool(L) nếu muốn cắt thành các layer chi tiết Nếu hình ảnh mà bạn muốn cắt lại có chữ trên đó và bạn muốn xóa nó đi thì bạn có thể chọn healing brush tool(J) để xóa chữ mà không bị mất đi cả nền của hình ảnh.

• Sau đó chọn layer mà bạn muốn ghép kéo sang bên web thiết kế và thả vào phầnhì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 của khung ảnh.

B2: Sau khi đã lấy được tất cả ảnh sản phẩm mỹ phẩm ta ghép chúng vào các

phần thiết kế Kết quả đạt được là:

Chú ý: Khi lấy ảnh việc bị vỡ ảnh là điều khó tránh khỏi, do đó 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 của ảnh ban đầu sao cho phù hợp với bố cục

B3 Tạo phần hotline để khách hàng liên hệ khi cần tư vấn hay đặt hàng qua mạng

Rectangle tool-> Blending options-> Grandient overlay.Chọn màu

25ad25,94de99 và màu trắng

• Blending options->stroke Chọn elliptical marquee tool (m) Viết chữ và tạo hình

biểu tượng và số điện thoại

• Ta được sản phẩm

Sản phẩm hoàn thiện là:

*Ở phần tạo trang phụ

1 Tạo trang

Kích thước trang phụ là 2600x2900px

Các bước tạo heder giống như các bước tạo ở trang chủ Chỉ có điều khác

là lúc này ta phân chia thành các hình để chứa hình ảnh và thông tin sản phẩm

Ta được sản phẩm

Ta tạo khung danh sách sản phẩm bằng 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 các loại sản phẩm bằng kiểu chữ arial

Tiếp theo ta lấy ảnh và lòng vào các khung đã chia và ghi thông tin sản phẩm

Cuối cùng ta tạo ô chuyển trang :

Các bước tạo giống ở trên

Sau đó ta lồng hình ảnh banner và khuyến mãi sản phẩm

Kết quả cuối cùng là:

III Ý TƯỞNG THIẾT KẾ

IV CHI TIẾT