TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI
Phần 1: Đặt vấn đề
- Tên đề tài: Thiết kế website cung cấp dịch vụ ngân hàng
KINH TẾ
- Sinh viên thực hiện : Lê Thị KHOA
Kim Chung
- Mã SV: 21A470100017
- Lớp : K30TMĐT02
1. Lý do chọn đề tài :
Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinh doanh
ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công ty lớn
đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất. So với kinh
doanh truyền thống thì TMDT chi phí thấp hơn, hiệu quả đạt cao hơn. Hơn thế nữa,
với lợi thế của công nghệ Internet nên việc truyền tải thông tin về sản phẩm nhanh
chóng, thuận tiện. Kết hợp với bộ phận giao hàng tận nơi, là thông qua bưu điện và
ngân hàng để thanh toán tiền, càng tăng thêm thuận lợi để loại hình này phát
triển.Với các sản phẩm và dịch vụ ngân hàng cũng vậy. Biết được những nhu cầu đó,
xây dựng Website ngân hàng trực tuyến nhằm để đáp ứng cho mọi khách hàng, họ có
thể mua sản phẩm, sử dụng dịch vụ cần thiết. Do đó, với sự ra đời các website ngân
hàng trực tuyến , mọi người có thể giao dịch mọi lúc mọi nơi mà không cần phải tới
điểm giao dịch. Trước thực tế đó em đã thực hiện đề tài: “ Thiết kế website cung cấp
dịch vụ ngân hàng trực tuyến”.

BÀI TẬP LỚN

2. Kết quả cần đạt được:
MÔN: ngân
THIẾT
KẾ
VÀtuyến
TRIỂN

WEB
TMĐT
Tạo được website
hàng
trực
theoKHAI
đúng đề
ra, đủ
chức năng cơ bản của
một website thương mại điện tử, có bố cục, giao diện dễ nhìn, thân thiện dễ sử
ĐỀ TÀI:
dụng cho khách hàng
Thiết kế website cung cấp dịch vụ ngân hàng trực tuyến

Phần 2: Nội dung
1. Cơ sở lý thuyết:
Giảng viên hướng dẫn :Th.S Nguyễn Thị Quỳnh Như
- Áp dụng lý thuyết về website Thương mại điện tử
viên về
thực
Lê mềm
Thị Kim
Chung
- Áp dụngSinh
lý thuyết
sửhiện
dụng: phần
Photoshop
- Áp dụngLớp
lý thuyết

ngôn ngữ lập K30TMĐT02
trình HTML
:
2.
Cấu trúc thiết kế Website:
+ Trang web có 1 trang chủ, 5 trang con chính, độ sâu 4 trang.
1. Số lượng trang: 8
2. Độ sâu: 4 mức

Hà Nội 2022


3. Gam màu chủ đạo:
#000866, #f7aa00, #fffff

3. Lý do chọn màu sắc:
Màu xanh lam là màu mà rất nhiều người u thích. Trong tự nhiên nó là màu của
nước và bầu trời, nhưng hiếm khi thấy trên các loại trái cây và rau củ. Màu xanh lam
được coi là màu của thiên đường và đại diện của cơ quan nhà nước, tạo sự tin tưởng,
chuyên nghiệp, phù hợp cho ngành ngân hàng. Nó thuộc gram màu lạnh nhưng có
một chút ấm áp làm dịu đi sức nóng của màu đỏ Màu xanh lam đứng đầu với nhiều
người yêu thích nhất. 53% màu cờ các quốc gia có màu xanh lam. Màu xanh lam là
màu được sử dụng hầu hết trong các thiết kế nhận diện. Một bộ trang phục màu xanh
lam đậm là thể hiện của sự kinh doanh chuyên nghiệp. Hơn nữa, sử dụng màu xanh
lam làm nổi bật thiết kế và sự kết hợp của nó với màu vàng khiến thiết kế thêm sáng
tạo.
4. Phương pháp phối màu:
Sử dụng phương pháp bổ túc Phối màu bổ túc những cặp màu đối xứng nhau trên
bánh xe màu để tạo nên những phối màu năng động và tràn đầy năng lượng. Rõ ràng,
với cặp màu đối xứng được sử dụng, rất dễ để tạo điểm nhất cho các chi tiết quan

trọng trong thiết kế

5. Ý tưởng thiết kế các thành phần trên trang web (logo, menu, banner,…)
 Logo: Thiết kế từ bộ nhận diện thương hiệu
Bao gồm: + Phần logo: Ý tưởng của logo được bắt nguồn từ Đồng tiền, một biểu
tượng tượng trưng cho các giao dịch và dịch vụ của ngành ngân hàng cung cấp.
Trong đó, đồng tiền được thiết kế cách điệu theo chữ Chung- tên của ngân hàng.
+ Phần chữ : Tên viết tắt ngân hàng Kim Chung Bank
2


 Menu: Ngang, search box tích hợp vào thanh menu
 Body: Layout đa dạng phù hợp với từng chức năng của trang
 Banner: Số lượng 8 ; Layout tự do, đa dạng ; Style gradient và theo
bộ nhận diện thương hiệu.
 Footer: Thông tin trang web gồm: danh mục, địa chỉ, hotline, email,
website, …
 Sơ đồ liên kết website:

TRANG CHỦ

Dịch vụ

Về KCB

Thẻ

Tin tức

Trợ giúp


Đăng nhập

Chuyển tiền

Thanh tốn

3 Giao diện chính và chi tiết nội dung các trang được xây dựng:
 Ý tưởng thiết kế (prototype) của trang web:
Từ bản thiết kế các artboard mockup, sẽ được xuất file HTML và mở bằng trình
duyệt. Các button, Text được gắn link sẽ được liên kết sang các trang tương ứng.

3



Bản

sketch giao diện trang web:

4


5


 Bản wireframe giao diện trang web:
TRANG CHỦ:



TRANG DỊCH VỤ:


TRANG THẺ:


TRANG TIN TỨC:


TRANG VỀ KCB:


TRANG TRỢ GIÚP:


TRANG CHUYỂN TIỀN:


TRANG ĐĂNG NHẬP:

TRANG THANH TOÁN:


 Bản mockup giao diện trang web:


TRANG CHỦ: Đây là trang bao quát giới thiệu sơ lược về website, sản phẩm của
website



TRANG DỊCH VỤ: Đây là trang mà người dùng có thể thấy được toàn bộ danh sách
dịch vụ mà trang web ngân hàng đó cung cấp


TRANG DỊCH VỤ THẺ: Đây là trang mà người dùng thấy được các dịch vụ thẻ
Visa, Tín dụng,… mà ngân hàng đó cung cấp


TRANG VỀ KCB: Đây là trang giới thiệu chi tiết về thông tin ngân hàng KCB: Ra
đời, sứ mệnh, tầm nhìn, cổ đơng,…


TRANG TIN TỨC: Đây là trang mà người dùng có thể đọc được các bản tin, tin tức
mới nhất liên quan đến sản phẩm, dịch vụ, hoạt động của ngân hàng.


TRANG TRỢ GIÚP: Đây là trang mà người dùng có thể tìm kiếm nhanh các sản
phẩm, dịch vụ; Hỏi đáp, liên hệ chăm sóc khách hàng viên, liên hệ BOT chat nhanh
về các vấn đề mà khách hàng đang gặp phải.


TRANG ĐĂNG NHẬP: Đây là trang con của trang dịch vụ. Khi vào trang này
khách hàng cần điền thông tin tài khoản đăng nhập trước khi thực hiện các giao dịch
khác trong tài khoản.

TRANG CHUYỂN TIỀN: Đây là trang con của trang dịch vụ, khi vào trang này
khách hàng thấy được số dư tài khoản, lịch sử giao dịch và sẽ thực hiện được mọi
giao dịch liên quan đến tài khoản của mình online.



TRANG THANH TỐN: Đây là trang cuối cùng để hồn tất chuyển khoản/ giao
dịch gửi, nhận tiền. Bao gồm thông tin người gửi, người nhận, xác nhận OTP và kết
quả giao dịch.


Phần 3: Kết luận
 Tổng kết kết quả đạt được:
Trang web đã cơ bản mô phỏng được nguyên lý hoạt động của một website ngân
hàng trực tuyến. Trang web có giao diện thân thiện với người dùng và cũng rất độc
đáo ở bố cục sắp xếp các thành phần ở từng trang. Trang web được thiết kế xuyên
suốt theo bộ màu nhận diện thương hiệu và style gradient, font chữ quy định . Logo
có ý nghĩa. Mọi yếu tố như logo, banner, image, icon, có trên trang web đều tự thiết
kế bằng phần mềm PS và AI , thành phần tài nguyên trong đó được lấy từ các nguồn
internet.
 Những vấn đề chưa đạt được:
So với ý tưởng thiết kế ban đầu thì các chức năng của website chưa đầy đủ, chi tiết,
các button chưa liên kết vào đúng đích vì chưa hồn thành các bản thiết kế của trang
đích đó. Hơn nữa, thời gian thiết kế bị chậm hơn so với kế hoạch dự định.
 Hướng phát triển đề tài:
Đứng trước xu hướng phát triển của công nghệ thông tin và thương mại điện tử như
vũ bão, đề tài: Thiết kế website cung cấp dịch vụ ngân hàng trực tuyến sẽ vơ
cùng nóng vì nhu cầu lớn. Vì vậy tôi sẽ tiếp tục nghiên cứu và phát triển những ưu
điểm, khắc phục những nhược điểm, vấn đề chưa đạt được nói trên để có thể hồn
thiện, có thể đưa website này có thể hoạt động.

Phần 4. Tài liệu tham khảo và các phần mềm sử dụng
 Các phần mềm sử dụng:
Adobe Photoshop, Adobe Illustrator, Sublime text 3
 Tài liệu tham khảo:
1. Trang web BIDV: bidv.com

2. Trang web Momo: momo.vn
3. Trang web MB Bank: mbbank.com

4. Nguồn ảnh: Đính kèm file trong folder


Phần 5: Mục lục:

MỤC LỤC
Phần 1: Đặt vấn đề.....................................................................................................2
1.

Lý do chọn đề tài :...........................................................................................2

2.

Kết quả cần đạt được:...................................................................................2

Phần 2: Nội dung........................................................................................................2
1.

Cơ sở lý thuyết:..............................................................................................2

2.

Cấu trúc thiết kế Website:.............................................................................2

3 Giao diện chính và chi tiết nội dung các trang được xây dựng:...................4



Ý tưởng thiết kế (prototype) của trang web:............................................4



Bản mockup giao diện trang web:.............................................................5

Phần 3: Kết luận.......................................................................................................13
 Tổng kết kết quả đạt được:............................................................................13
 Những vấn đề chưa đạt được:........................................................................13
 Hướng phát triển đề tài:.................................................................................13
Phần 4. Tài liệu tham khảo và các phần mềm sử dụng.........................................13
 Các phần mềm sử dụng:.................................................................................13
 Tài liệu tham khảo:.........................................................................................13
Phần 5: Mục lục:.......................................................................................................14


Phần 6: Thang điểm