Phần 1:Cơ sở lý thuyết

1. Lý thuyết màu sắc

 Có 2 hệ màu:
RGB(+):Được sử dụng trong các ứng dụng thiết kế trang web và các thiết bị
điện tử.Trong đó,R nghĩa là Red(Đỏ),G nghĩa là Green(Xanh lá) và B nghĩa là
Blue(Xanh dương).
CMYK(-):Thường được sử dụng trong thiết kế và in ấn.Trong đó,C nghĩa là
Cyan(Xanh lơ),M nghĩa là Magenta(Hồng sẫm),Y nghĩa là Yellow(Vàng),K nghĩa
là Key(Đen).
Hệ màu sắc trong tự nhiên là màu trừ(Hấp thụ ánh sáng).Ánh sáng mặt trời là
màu cộng (được tập hợp bởi 7 màu tại mỗi thời điểm thích hợp) .
 Vòng màu thuần sắc:

Đỏ,cam,vàng,lục,lam,chàm,tím là những mà sắc cơ bản nhất trong hệ màu.

 Chia thành 3 bậc:

Màu bậc 1:Là màu không có màu nào pha ra được bắt đầu từ 3 màu cơ bản
là:Đỏ,vàng và xanh dương.

Màu bậc 2:Là màu được pha từ màu của bậc 1.

Màu bậc 3:Là màu được pha từ màu của bậc 2 với màu bậc 1 để sinh ra màu
bậc

 Màu tương đồng:

Là màu nằm cạnh nhau đem lại cảm giác hài hòa cho nhau.

 Màu tương phản:

 Là hai màu đối lập lẫn nhau trên vòng màu thuần sắc.Khi phối các cặp màu đối
lập lại với nhau sẽ làm nổi bật cả hai bên.Ví dụ:Hai cặp màu đối lập là cam và tím
được sử dụng trong thiết kế logo của ngân hàng TPBank.

 Màu nóng

Là những màu được tạo ra từ một số màu chính như đỏ, da cam, vàng.Khi sử
dụng những màu này trong thiết kế sẽ giúp ta cảm nhận được sự ấm cúng,thể hiện
được sự ấn tượng,đam mê,hạnh phúc,năng động và tràn đầy năng lượng.

 Màu lạnh

Là gồm những màu dịu nhẹ như: xanh lam, xanh lá, màu tím nhạt,… Khi sử
dụng những màu này trong thiết kế sẽ giúp tạo nên cảm giác dễ chịu thoải mái,nhẹ
nhàng êm dịu,yên bình và yên tĩnh.

 Ý nghĩa của màu sắc:

Tùy thuộc vào mỗi quốc gia mà màu sắc sẽ mang những ý nghĩa khác nhau.Ví
dụ: Trên thế giới, màu tím biểu trưng cho quyền lực, sự giàu có và độc quyền
nhưng ở một số quốc gia như:Brazil,Ấn độ thì máu tím lại tượng trưng cho sự chết
chóc và đen đủi.

2. Bố cục
 Bố cục:

Là nghệ thuật sắp xếp.

 Tỉ lệ vàng:

Là 1 tỉ lệ không phải do con người tạo ra,do tự nhiên mà có(trong tự nhiên).

A A +B
Công thức tính tỉ lệ vàng: = =1,618
B B
Phi:Được đặt trong tỉ lệ vàng.
Phi(1,618)= Φ=φ(Ký hiệu)
 Bố cục 1 phần 3:

Là chia thành 9 ô bằng nhau.Khi đó,sẽ tạo thành 4 điểm giao nhau.Khi muốn
thu hút sự chú ý thì đặt đối tượng chính vào 1 trong 4 điểm hoặc cả 4 điểm giao
nhau thì sẽ đem lại hiệu ứng về thị giác cho người nhìn.

Thường được dừng khi đưa ảnh vào website để tạo sự chú ý.

 Tỉ lệ đối xứng:

Khi là 1 không gian đồng bộ về màu sắc,khi đó có thể sử dụng tỉ lệ đối xứng

Chỉ sử dụng khi làm 1 không gian có 1 chủ thể duy nhất.Ví dụ:Trên bức tường
có 1 chiếc đồng hồ.

Hạn chế:Ít chủ thể hạn chế về mặt không gian.

 Bố cục lưới:

Khi có 1 không gian mà chẳng biết làm gì thì chúng ta căng dây lưới.Căng dây
lưới áp dụng theo tỉ lệ vàng.Nội dung đưa vào các ô để làm bật chủ thể và không
được đặt vào các điểm giao nhau.Để nội dung gọn vào trong ô.

 Tỉ lệ xếp chồng:

Vẽ lưới nhưng không vẽ lưới theo chiều dọc chỉ vẽ theo chiều ngang,tính theo
tỉ lệ vàng hoặc tỉ lệ gấp đôi.

 Tỉ lệ gấp đôi:

Chiều cao chữ cao bao nhiêu thì biên lề cách bấy nhiêu.

Dùng để căn chỉnh giữa chữ và lề.Thường được dung trong menu.
 Phần 2:Thiết kế sản phẩm
1. Bản phác thảo:

1.1:Phác thảo giao diện User

Hình 1:Giao diện đăng ký

Hình 2:Giao diện đăng nhập

 Hình 3:Giao diện quên mật khẩu

Hình 4:Giao diện cấp lại mật khẩu

Hình 5:Giao diện xác định mã OTP
Hình 6:Giao diện thông tin người dùng
Hình 7:Giao diện trang chủ
Hình 8:Giao diện danh sách sản phẩm
Hình 9:Giao diện chi tiết sản phẩm
Hình 10:Giao diện giỏ hàng và thanh toán đơn hàng
Hình 11:Giao diện đơn hàng
1.2:Phác thảo giao diện Admin

Giao diện login

Giao diện chi tiết sản phẩm

Giao diện chỉnh sửa sản phẩm

Giao diện thống kê

 Giao diện sản phẩm

Giao diện thêm sản phẩm

Giao diện nhập hàng
2. Giao diện mẫu:

2.1:Giao diện mẫu User:

Hình:Giao diện đăng ký

Hình:Giao diện đăng nhập

Hình:Giao diện quên mật khẩu

Hình:Giao diện cấp lại mật khẩu

 Hình:Giao diện xác nhận mã OTP

Hình:Giao diện thông tin người dùng

Hình:Giao diện trang chủ
Hình:Giao diện danh mục sản phẩm
Hình:Giao diện chi tiết sản phẩm
Hình:Giao diện giỏ hàng và thanh toán sản phẩm
Hình:Giao diện đơn hàng
Hình:Giao diện hủy đơn hàng
2.2:Giao diện mẫu Admin