ĐỀ TÀI: Thiết kế website ngân hàng trực tuyến bài tập lớn môn Thiết kế website thương mại điện tử

ĐỀ TÀI: Thiết kế website ngân hàng trực tuyến bài tập lớn môn Thiết kế website thương mại điện tử BÀI TẬP LỚN MÔN THIẾT KẾ VÀ TRIỂN KHAI WEB TMĐT ĐỀ TÀI Thiết kế website cung cấp dịch vụ ngân hàng trực tuyến

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI

KHOA KINH TẾ

BÀI TẬP LỚNMÔN: THIẾT KẾ VÀ TRIỂN KHAI WEB TMĐT

ĐỀ TÀI:

Thiết kế website cung cấp dịch vụ ngân hàng trực tuyến

Giảng viên hướng dẫn :Th.S Nguyễn Thị Quỳnh Như Sinh viên thực hiện : Lê Thị Kim Chung

Hà Nội 2022

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

- Tên đề tài: Thiết kế website cung cấp dịch vụ ngân hàng

- Sinh viên thực hiện : Lê Thị Kim Chung

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”

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

Tạo được website ngân hàng trực tuyến theo đúng đề ra, đủ chức năng cơ bản củamộ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ử dụng cho khách hàng

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

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 yê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 xanhlam đậ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

 Menu: Ngang, search box tích hợp vào thanh menu

3

 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:

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ìnhduyệt Các button, Text được gắn link sẽ được liên kết sang các trang tương ứng

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

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

TRANG CHỦ:

5

TRANG DỊCH VỤ:

TRANG THẺ:

TRANG TIN TỨC:

TRANG VỀ KCB:

9

TRANG TRỢ GIÚP:

TRANG CHUYỂN TIỀN:

11

TRANG ĐĂNG NHẬP:

TRANG THANH TOÁN:

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

13

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

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

15

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,…

17

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

19

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àykhá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ọigiao dịch liên quan đến tài khoản của mình online

TRANG THANH TOÁN: Đây là trang cuối cùng để hoàn tất chuyển khoản/ giaodị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ếtquả giao dịch.

21

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ồninternet

 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 hoà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ể hoà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

23

Phần 6: Thang điểm