Thiết kế web Đề tài thiết kế website bán hàng thời trang công sở sky

VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TINMôn: Thiết kế web Đề tài: Thiết kế website bán hàng thời trang công sở Sky Giảng viên hướng dẫn: Nguyễn Thị Quỳnh Như Sinh viên thực hiện:

VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN

Môn: Thiết kế web

Đề tài: Thiết kế website bán hàng thời trang công sở

Sky

Giảng viên hướng dẫn: Nguyễn Thị Quỳnh Như Sinh viên thực hiện: Trần Trường GiangLớp hành chính: 2210A02

Hà Nội – Năm 2023

1

Phần 1: Đặt vấn đề

I Giới thiệu

- Tên đề tài: Thiết kế website bán hàng thời trang công sở Sky

- Họ tên: Trần Trường Giang Lớp: 2210A02

II Nội dung

1 Giới thiệu

1.1 Lí do chọn đề tài:

- Nhu cầu mua sắm lớn: Xã hội ngày càng phát triển hiện đại, đòi hỏi mọi thứ cũng nên thay đổi theo xu hướng đó và trang phục nơi công sở cũng không phải ngoại lệ Qua từng năm, trang phục nơi công sở trở nên đơn giản hơn nhưng vẫn đảm bảo tính thời trang, lịch sự, phù hợp với văn hóanơi làm việc Vì vậy, những trang phục công sở có tính thời trang vẫn được rất nhiều người quan tâm

- Sự phổ biến và thương hiệu: Hiện nay có rất nhiều cửa hàng kinh doanh thời trang trực tiếp lẫn trực tuyến, vì vậy sự phổ biến càng tăng đồng nghĩa với sự cạnh tranh cũng càng tăng Việc phát triển thương hiệu là vô cùng quan trọng để doanh nghiệp có chỗ đứng trên thị trường và phát triển một website thương mại điện tử là việc vô cùng cần thiết trong thời đại công nghệ này

1.2 Mục đích của đề tài:

- Những website thương mại điện tử đã xuất hiện từ lâu và có xu hướng ngày càng phát triển Nhu cầu mua sắm thời trang trực tuyến rất lớn Việcthiết kế ra một website kinh doanh mặt hàng thời trang công sở nhằm tiếpcận tới khách hàng có nhu cầu, giúp cho khách hàng tham khảo các sản phẩm ngay trên những thiết bị công nghệ của mình mà không cần phải đi đâu xa

- Cũng gần giống như khi đi mua hàng trực tiếp, thiết kế ra website thương mại điện tử có các chức năng như hiển thị các sản phẩm, chi tiết sản phẩm, giỏ hàng, thanh toán,… là rất quan trọng để giúp thuận tiện cho người dùng

1.3 Kết quả mong muốn đạt được:

- Bố cục thông tin sản phẩm phù hợp, đồng bộ làm thuận tiện cho người xem

- Kết hợp màu sắc hợp lí, đủ độ tương phản, dễ chịu cho mắt

2

- Đầy đủ các chức năng cơ bản cần có của website thương mại điện tử

- Đáp ứng được những tiêu chuẩn trong thiết kế website

- Hiển thị đầy đủ thông tin các sản phẩm

- Tạo thương hiệu và quảng bá cho nhiều đối tượng trên internet

1.4 Kế hoạch làm việc:

- 24/06/2023: Tham khảo tài liệu và các website thương mại điện tử

- 25/06/2023: Lên ý tưởng bố cục các trang web

- 26/06/2023: Thiết kế các trang web bằng photoshop

- Gam màu chủ đạo: màu xanh lá (#3E99C8) và màu trắng (#FFFFFF)

- Màu sử dụng thêm: đỏ (#F30A0B), xanh đen (#232F3E), đen (#000000)

Lí do chọn màu:

o Đối với màu trắng: thể hiện sự thanh lịch, sạch sẽ, hiện đại, đơn giản, trung thực, trong cuộc sống hàng ngày con người thường tiếp xúc rất nhiều với màu trắng ví dụ như: vở viết, các văn bản trên máy tính, điện thoại,… tạo cảm quen thuộc

o Đối với màu xanh lá: thể hiện sự tươi mới trẻ trung, sự hứa hẹn, phát triển Màu xanh lá cũng giúp cho mắt được dễ chịuhơn giúp thoải mái cho người xem

Kết hợp 2 màu này sẽ tạo ra một màu năng động nhưng vẫn mang sự nhẹ nhàng

- Phương pháp phối màu: phối màu tương phản

Việc phối màu tương phản sẽ giúp cho các chi tiết quan trọng trongwebsite trở nên nổi bật, đồng thời việc sử dụng các màu sắc không quá sặc sỡ giúp cho người xem tập trung vào những yếu tố quan trọng hơn (sản phẩm, hình ảnh, thanh toán,…) và không bị rối mắt.Menu: nền xanh chữ trắng

Content và Content chi tiết: nền trắng chữ đen (giá tiền chữ đỏ)Footer: nền xanh đen chữ trắng

- Độ rộng layout trang web là 1340px

3

- Trang con:

Trang sản phẩm:

5

o Sketch:

o Wireframe:

6

Trang sản phẩm chi tiết:

7

o Sketch:

8

o Wireframe:

9

Trang đăng kí:

o Sketch:

10

o Wireframe:

11

Trang đăng nhập:

o Sketch:

12

o Wireframe:

13

Trang giỏ hàng:

o Sketch:

14

o Wireframe:

15

Trang thanh toán:

o Sketch:

16

o Wireframe:

17

Trang địa chỉ:

o Sketch:

18

o Wireframe:

19

- Ý tưởng thiết kế các thành phần trang web (logo, menu, banner,…)

- Sơ đồ layout web:

22

II Giao diện chính và chi tiết các trang

- Trang chủ:

23

- Trang sản phẩm

24

- Trang chi tiết sản phẩm

25

- Trang đăng kí

26

- Trang đăng nhập

27

- Trang địa chỉ

28

- Trang giỏ hàng

29

- Trang thanh toán

- Trang thông tin liên hệ

30

Website ít thu hút được người xem

Các chức năng nhiều nên vẫn chưa đủ

Bản hoàn chỉnh có chỉnh sửa so với bản thiết kế ban đầu

Cần phải bổ sung một số chức năng và trang web

31

Phần 4: Tài liệu tham khảo

- Website CellphoneS: CellphoneS - Đi n tho i, laptop, tablet, ph ki n chính hãng ệ ạ ụ ệ

- Mikotech: Các Lo i Bốố C c Website Chu n SEO Đ p Trong Thiếốt Kếố 2023 (mikotech.vn) ạ ụ ẩ ẹ

- Amazon: Amazon.com Spend less Smile more.

32

Mục lục

Phần 1: Đặt vấn đề 3

I Giới thiệu 3

II Nội dung 3

1 Giới thiệu 3

1.1 Lí do chọn đề tài: 3

1.2 Mục đích của đề tài: 3

1.3 Kết quả mong muốn đạt được: 3

1.4 Kế hoạch làm việc: 4

1.5 Các phần mềm sử dụng: Adobe Photoshop 2018, microsoft word 4

1.6 Ý tưởng thiết kế 4

Phần 2: Nội dung 5

I Cấu trúc thiết kế website 5

- Trang chủ: 5

Trang sản phẩm: 7

Trang sản phẩm chi tiết: 9

Trang đăng kí: 11

Trang đăng nhập: 13

Trang giỏ hàng: 15

Trang thanh toán: 17

Trang địa chỉ: 19

- Ý tưởng thiết kế các thành phần trang web (logo, menu, banner,…) 21

II Giao diện chính và chi tiết các trang 24

- Trang chủ: 24

- Trang sản phẩm 25

- Trang chi tiết sản phẩm 26

- Trang đăng kí 27

- Trang đăng nhập 28

- Trang địa chỉ 29

- Trang giỏ hàng 30

- Trang thanh toán 31

- Trang thông tin liên hệ 31

Phần 3: Kết luận 32

Phần 4: Tài liệu tham khảo 33

33