Bài tập lớn Thiết kế giao diện trang Web bán điện thoại - Công nghệ thông tin | Đại học Mở Hà Nội

Website có mục đích phân phối trực tiếp sản phẩm, dịch vụ của cửa hàng tới khách hàng thông qua hoạt động mua sắm trực tuyến. Tài liệu được sưu tầm giúp bạn tham khảo, ôn tập và đạt kết quả cao trong kì thi sắp tới. Mời bạn đọc đón xem !

TRƯỜNG ĐI HC M NI
KHOA
CÔNG
NGH
THÔNG
TIN
BÀI TP LN
N:
THIẾẾT
K
WEB
Đ
i:
Thiếết
K
ế
ế
Giao Din Trang Web Bán Đin Thoi
Ging viền hướng dẫẫn: Dương C Bằng
Sinh viền thc hin: Phm Th Dung
SV: 21A100100054
Khoa: ng ngh Thông Tin
Ni, năm 2022
Mục lục
I.
GI
I
THIU ................................................ 3
1.
do chn
đ
i ...................................... 3
2.
Mc đích ca
đ
i ................................. 3
3.
Kết qu mong muôến đt được .............. 4
4.
Các
phẫền
mềềm
s
d
ng
.......................... 4
II.
Ý
T
ƯỞ
NG
THIẾẾT
K
.................................
4
1.
Xác đnh phẫn tích yều cẫều ............ 4
2.
Phác tho ý tưởng thiềết
k
ế
.................... 5
3.
B
ô
ế
trí trang con ....................................... 8
4.
B
ô
ế
c
c
layout
s
n
ph
mc
a
trang
web
...............................................................
9
IV.
TÀI
LI
U
THAM
KH
O
.......................... 26
1
I.
GI
I
THIU
1.
do
ch
n
đ
i
Trong th
i đ
i 4.0 hi
n nay khoa h
c công ngh
ngày
càng phát tri
n t
o ra nhiềều s
n ph
m công ngh
tiền
tiềến thun tin cho đi sôếng con người được s dng
ph biềến
chính
đin
thoi.
Số lượng người dùng
smartphone ngày càng gia tăng, giá thành hợp túi tiền khiến
cho smartphone xuất hiện và thay thế máy tính, laptop.
Thêm vào đó, việc sử dụng điện thoại di động để lướt web
tiện lợi hơn nhiều cho việc di chuyển thường xuyên. vậy
việc thiết kế website chuyên bán điện thoại di động giúp
người dùng thể tham khảo sản phẩm, giá cả dễ dàng
quyết định mua hàng nhanh chóng.
2.
Mc đích ca
đ
tài
Tiếp cận được nhiều khách hàng hơn: Việc một website
bán điện thoại sẽ giúp doanh nghiệp của ta kết nối với khách
hàng chuyển đổi hành vi thành hành động. Thay chỉ
dùng các phương thức truyền thống như phát tờ rơi, quảng
cáo, trưng bày sản phẩm tại cửa hàng đợi khách hàng đến
xem thì việc thiết kế website sẽ giúp ta một cửa hàng thu
nhỏ để tiếp cận tới khách hàng rộng khắp nhờ hệ thống
Internet.
2
Website mục đích phân phối trực tiếp sản phẩm,
dịch vụ của cửa hàng tới khách hàng thông qua
hoạt động mua sắm trực tuyến. Website giúp
khách hàng tiết kiệm thời gian, khách hàng
nhiều sự lựa chọn dễ dàng so sánh giá cả sản
phẩm giữa các website bán hàng trực tuyến với
nhau. Trang web được thiết kế phải giao diện
sáng, dễ nhìn, dễ dàng truy cập trên c thiết bị từ
màn hình HD, FULL HD hay màn hình điện thoại tỷ
lệ 16:9 hoặc 18:9.
3.
K
ế
t
qu mong mến đt được
Website đầềy đ
nhìn.
tính năng, giao di
n ph
ng,
d
Website hi
n th
r
ng khác nhau.
phù hp trền nhiềều thiềết b đ
Website được thiềết
k
ế
ràng, nhng người không
nh
i
u
kinh nghi
m v
công ngh
d
dàng
4.
Các
phẫền
mềềm
s
d
ng
Phầền
mềềm:
-
Microsoft Visual Studio Code
-
Adobe Photoshop CC 2021
Ngôn ng
th
s
d
ng
3
-
HTML
-
CSS
Trình duy
t ki
m th
-
Google Chrome
II.
Ý
T
ƯỞ
NG
THIẾẾT
K
1.
Xác
đ
nh
phẫn
tích
yều
c
u
Hi
n nay, v
i xu h
ướ
ng công ngh
thông tin th
i đ
i 4.0, khi
m
i gia đình, nhần đ
u
d
dàng truy c
p
internet t
thiềết
b
smartphone, laptop, smart TV. Nền
vic mua hàng trc
tuyềến
m
t d
ch v
cầền
thiềết
đ
tha mãn nhu cầều ca mi người mt cách
d
dàng hơn.
Khách hàng công ty
m
u
ôế
n
hướng ti gôềm các tầết c
các la tui .
Mt
s
ôế chc năng chính ca trang web bao gôềm:
Menu: Phầền header đầềy đ các đường dầễn đềến
các trang con, thiềết l
p menu con
c
ế
p
1, cầếp 2.
Đăng ký, đăng nhp
Gi
hàng
Trang ch:
-
Hin th đin thoi theo đ ph biềến
-
danh mc gi ý đin thoi, hãng ni tiềếng,
Trang con:
Các trang con bao gôềm tìm kiềếm, đin thoi theo
hãng , thông tin tng sn phm . Môễi trang con
s
e
b
ô
ế
cc khác nhau.
4
2.
Phác
th
o
ý
t
ưở
ng
t
h
i
ế
t
k
ế
Trang web bán đin thoi
cầều sau:
ph
i đáp
ng m
t
s
ôế yều
-
Trang web màu ch đo vàng , đen, trăếng.
(Phôếi màu tương phn)
Màu vàng màu của ánh nắng mặt trời, đi liền với sự
thông thái, mạnh mẽ hạnh phúc. Màu vàng mang đến
cho người truy cập cảm giác ấm áp, làm tăng sự thích thú,
kích thích trí óc hoạt động mạnh mẽ hơn.
Màu đen thường được sử dụng làm màu sắc
kết
hợp với màu sắc thương hiệu tính chất màu
trung tính, dễ kết hợp với nhiều màu khác
nhau. Sử dụng màu đen cũng đem lại
cảm giác
sang trọng hơn cho tổng thể thiết kế website.
Màu đen thể kết hợp với một số màu như
vàng, cam, đỏ,... đều được. Sự tương phản
màu sắc giữa các màu này cũng giúp tổng thể
website bán điện thoại trở nên ấn tượng
điểm nhấn hơn
-
Web thiềết
k
ế
chun responsive cho các thiềết b
thoi, máy tính, máy tính bng…
đin
-
Tham kh
o b
ng màu ch
đ
o:
-
5
#
f6de9d
#
f9d060
#ecad00
#7c7a7a
#ffffff
#000000
Màu ch đo: 6
S
ô
ế lượng trang: 9
Font ch: Time News Roman
-
Logo:
6
3.
B
ô
ế
trí
trang
con
Trang web được phần
b
ô
ế
vi các trang con như sau:
TRANG
CH
Trang
ĐT
theo
hãng
Hin th nhng sn
phm theo hãng , sn
phm ph biềến bán
chy ca tng hãng.
Trang Đin
Tho
i
Hin th nhng sn
ph
m giá r
.
Trang
Đằng
Nh
p/Đằng
Cho phép người dùng
đã tài khon đăng
nhp đ s dng,
nhng người chưa
tài khon đăng kí.
Đăng nh
p qua
email
ho
c
Google,
Facebook
Trang
Thông
Tin Sn Phm
Chi
Ti
ế
t
Cho biềết nhng thông
tin chi tiềết ca sn
phm, nhng đc
đim ni bt , cho sn
phm vào gi ng.
Trang Gi Hàng
Người dùng seễ xem
được sn phm mình
chn thc hin tr
phí dch v xem phim
ti trang này.
th thanh toán bă
ng
th tín dng, VNPayQR,
Viettel Pay, Momo,
7
4.
B
ô
ế
c
c
layout
s
n
ph
m
c
a
trang
web
8
9
10
11
12
13
14
15
16
17
18
19
| 1/28

Preview text:

TRƯỜNG ĐẠI HỌC MỞ NỘI KHOA
CÔNG NGHỆ THÔNG TIN
BÀI TẬP LỚN
MÔN: THIẾẾT KẾẾ WEB
Đềề Tài:
Thiếết Kếế Giao Diện Trang Web Bán Điện Thoại
Giảng viền hướng dẫẫn: Dương Chí Bằềng
Sinh viền thực hiện: Phạm Thị Dung
SV: 21A100100054
Khoa: Công nghệ Thông Tin
Ni, năm 2022 Mục lục
I. GIỚI THIỆU ................................................ 3
1. Lí do chọn đềề tài ...................................... 3
2. Mục đích của đềề tài ................................. 3
3. Kềết quả mong muôến đạt được .............. 4
4. Các phẫền mềềm sử dụng .......................... 4
II. Ý TƯỞNG THIẾẾT KẾẾ
................................. 4
1. Xác định phẫn tích yều cẫều ............ 4
2. Phác thảo ý tưởng thiềết kềế .................... 5
3. Bôế trí trang con ....................................... 8
4. Bôế cục layout sản phẩmcủa trang
web
............................................................... 9
IV. TÀI LIỆU THAM KHẢO .......................... 26 1
I. GIỚI THIỆU
1. Lí do chọn đềề tài
Trong thi đi 4.0 hin nay khoa hc công nghngày
càng
phát trin to ra nhiềều sn phm công nghtiền
tiềến
thun tin cho đi sôếng con người được sdng
ph
biềến chính đin thoi. Số lượng người dùng
smartphone ngày càng gia tăng, giá thành hợp túi tiền khiến
cho smartphone xuất hiện và thay thế máy tính, laptop.
Thêm vào đó, việc sử dụng điện thoại di động để lướt web
tiện lợi hơn nhiều cho việc di chuyển thường xuyên. Vì vậy
việc thiết kế website chuyên bán điện thoại di động giúp
người dùng có thể tham khảo sản phẩm, giá cả dễ dàng và
quyết định mua hàng nhanh chóng.
2. Mục đích của đềề tài
Tiếp cận được nhiều khách hàng hơn: Việc có một website
bán điện thoại sẽ giúp doanh nghiệp của ta kết nối với khách
hàng và chuyển đổi hành vi thành hành động. Thay vì chỉ
dùng các phương thức truyền thống như phát tờ rơi, quảng
cáo, trưng bày sản phẩm tại cửa hàng và đợi khách hàng đến
xem thì việc thiết kế website sẽ giúp ta có một cửa hàng thu
nhỏ để tiếp cận tới khách hàng rộng khắp nhờ hệ thống Internet. 2
Website có mục đích phân phối trực tiếp sản phẩm,
dịch vụ của cửa hàng tới khách hàng thông qua
hoạt động mua sắm trực tuyến. Website giúp
khách hàng tiết kiệm thời gian, khách hàng có
nhiều sự lựa chọn và dễ dàng so sánh giá cả sản
phẩm giữa các website bán hàng trực tuyến với
nhau. Trang web được thiết kế phải có giao diện
sáng, dễ nhìn, dễ dàng truy cập trên các thiết bị từ
màn hình HD, FULL HD hay màn hình điện thoại tỷ lệ 16:9 hoặc 18:9.
3. Kềết quả mong muôến đạt được
Website đầềy đtính năng, giao din phng, dềễ nhìn.
Website hin thphù hp trền nhiềều thiềết b đ
rng khác nhau.
Website được thiềết kềế ràng, nhng người không
nhiềều kinh nghim vềề công ngh thsdng dềễ dàng
4. Các phẫền mềềm sử dụng
Phầền mềềm:
- Microsoft Visual Studio Code
- Adobe Photoshop CC 2021 Ngôn ng 3 - HTML - CSS
Trình duyt kim th- Google Chrome
II. Ý TƯỞNG THIẾẾT KẾẾ
1. Xác định phẫn tích yều c ẫ ều
Hin nay, vi xu hướng công nghthông tin thi đi 4.0, khi
mi gia đình, nhần đ ề ều dềễ dàng truy cp
internet
tthiềết bsmartphone, laptop, smart TV. Nền
vic mua hàng trc tuyềến là mt dch vcầền thiềết đ
tha mãn nhu cầều ca mi người mt cách dềễ dàng hơn.
Khách hàng công ty mu ôến hướng ti gôềm các tầết c
các la tui .
Mt sôế chc năng chính ca trang web bao gôềm:
Menu: Phầền header đầềy đcác đường dầễn đềến
các trang con, thiềết lp menu con c ầ ếp 1, cầếp 2.
Đăng ký, đăng nhp Gihàng
Trang ch:
- Hin thđin thoi theo đphbiềến
- Có
danh mc gi ý đin thoi, hãng ni tiềếng, Trang con:
Các trang con bao gôềm tìm kiềếm, đin thoi theo
hãng , thông tin tng sn phm . Môễi trang con seễ
bôế cc khác nhau. 4
2. Phác thảo ý tưởng thiềết kềế
Trang web bán đin thoi
phi đáp ng mt sôế yều cầều sau:
- Trang web màu chđo vàng , đen, trăếng.
(Phôếi màu tương phn)
Màu vàng là màu của ánh nắng mặt trời, nó đi liền với sự
thông thái, mạnh mẽ và hạnh phúc. Màu vàng mang đến
cho người truy cập cảm giác ấm áp, làm tăng sự thích thú,
kích thích trí óc hoạt động mạnh mẽ hơn.
Màu đen thường được sử dụng làm màu sắc kết
hợp với màu sắc thương hiệu vì tính chất màu
trung tính, dễ kết hợp với nhiều màu khác
nhau. Sử dụng màu đen cũng đem lại cảm giác
sang trọng hơn cho tổng thể thiết kế website.
Màu đen có thể kết hợp với một số màu như
vàng, cam, đỏ,... đều được. Sự tương phản
màu sắc giữa các màu này cũng giúp tổng thể
website bán điện thoại trở nên ấn tượng có điểm nhấn hơn
- Web thiềết kềế chun responsive cho các thiềết bđin
thoi, máy tính, máy tính bng…
- Tham kho bng màu chđo: - 5 # f6de9d #7c7a7a # f9d060 #ffffff #ecad00 #000000
Màu chđo: 6
Sôế lượng trang: 9
Font ch: Time News Roman - Logo: 6
3. Bôế trí trang con
Trang web được phần bôế vi các trang con như sau:
Trang ĐT theo Trang Thông hãng
Tin Sản Phẩm
Hin thnhng sn Chi Tiềết
phm theo hãng , sn
Cho biềết nhng thông
phm phbiềến bán
tin chi tiềết ca sn
chy ca tng hãng.
phm, nhng đc
đim ni bt , cho sn
phm vào gihàng. Trang Điện Thoại
Hin thnhng sn
phm giá r. Trang Đằng TRANG
Nhập/Đằng CHỦ
Cho phép người dùng
đã tài khon đăng
nhp đsdng,
nhng người chưa
tài khon đăng kí.
Đăng
nhp qua email
hoc Google, Facebook
Trang Giỏ Hàng
Người dùng seễ xem
được sn phm mình
chn thc hin tr
phí dch vxem phim
ti trang này.
ththanh toán băềng
thtín dng, VNPayQR,
Viettel Pay, Momo, 7
4. Bôế cục layout sản phẩm của trang web 8 9 10 11 12 13 14 15 16 17 18 19