1. QUY TRÌNH THIẾT KẾ GIAO
DIỆN WEBSITE
BY HOAT CHIK

2.  I . QUY TRÌNH
 II. GIAO DIỆN WEBSITE
 III.KÍCH THƯỚC WEB
 IV. TYPOGRAPHY
TỔNG QUAN
By Hoat Chik

3. I. QUY TRÌNH THIẾT KẾ
By Hoat Chik

4.  Bao gồm 9 bước cơ bản
1. xác định yêu cầu của khách hàng
2. phác thảo ý tưởng trên giấy
3. đánh giá phác thảo
4. thiết kế đồ họa đơn sắc
5. phối màu giao diện
6. xây dựng chuẩn css, script, folder cho trang web
7. sử dụng ngôn ngữ đánh dấu để thiết kế giao diện
8. kiểm thử giao diện trên các trình duyệt
9. chuyển mã tới bộ phận lập trình
I. QUY TRÌNH THIẾT KẾ
By Hoat Chik

5.  Bao quát giao diện, chức năng, cấu trúc nội dung, đối
tượng xem website
 Xây dựng bảng câu hỏi logic
 Liệt kê tính năng theo thứ tự : bắt buộc, mong muốn,
tùy chọn
1. XÁC ĐỊNH YÊU CẦU CỦA
KHÁCH HÀNG
By Hoat Chik

6. Mục đích : Địnhhình bố cục trang Web
 Đặt ra các tiêu chuẩn theo kinh nghiệm nên có vd theo tiêu
chuẩn của IWP 1.0
- Banner k quá 1/3 ,àm hình thực của user (màn hình đã bỏ đi các
thanh tool bar của browser)
- Siteber không lớn quá 25% chiều rộng trang web …
 Xây dựng chuẩn bố cục dựa trên nội dung với toàn bộ trang
web
- Vùng template (theo chuẩn IWP)
- Vùng hiệu chỉnh
2. PHÁC THẢO Ý TƯỞNG TRÊN GIẤY
By Hoat Chik

7. Ví dụ phác thảo giao diện
By Hoat Chik

8.  Nên có tối thiểu 3 mẫu phác trên giấy
3. ĐÁNH GIÁ MẪU PHÁC THẢO
By Hoat Chik

9.  Mục tiêu : đánh giá bản phác trên giấy
khi chuyển sang Đồ hoạ vi tính bố cục
có phù hợp với yêu cầu và mong muốn
của kháchhàng hay không.
 Chưa phối màu cho các mảng
màu,đường kẻ, chữ cho trang Web,
tất cả để thang màu xám để bướctiếp
theo phối màu dễ dàng hơn
4. THIẾT KẾ BẢN ĐƠN SẮC
By Hoat Chik

10.  Tuân thủ các phương pháp phối màu
 Đưa ra một vài phương án phối màu để khách chọn
5. PHỐI MÀU CHO GIAO DIỆN WEB
By Hoat Chik

11.  Thiết kế tất cả các trang chi tiết của website
NOTE
By Hoat Chik

12.  Thiết kế web theo bộ nhận diện thương hiệu phải hiểu được ý
tưởng , tuân thủ nghiêm các tiêu chuẩn nhận diện thương hiệu
NOTE
By Hoat Chik

13.  Bố cục 5 phần chính:
- Top Extra : menu bổ sung, menu phụ
- Top Menu :me nu chính
- Header Banner
- Main Content
- Footer
II. GIAO DIỆN WEBSITE
By Hoat Chik

14.  Thường có 2 dạng :
- Kích thước cố định (fixed layout)
- Kích thước lưu động (fluid layout)
 Ngoài ra còn có loại kích thước co giãn hợp thành từ 2
loại trên
III. KÍCH THƯỚC WEBSITE
By Hoat Chik

15.  Chiều rộng cố định, thường là 960px
 Ưu điểm: Dễ thiết kế và triển khai
- chiều rộng web là cố định và giống nhau trên tất cả các trình
duyệt bất chấp độ phân giải màn hình
- Được hỗ trợ bởi nhiều browser hơn
- Nội dung web vẫn có thể đọc dễ dàng trên những máy có độ
phân giải cao
 Nhược điểm: Tạo ra nhiều khoảng trống không cần thiết
- Có thể làm xuất hiện thanh cuộn ngang
1. KÍCH THƯỚC CỐ ĐỊNH
(FIXED LAYOUT)
By Hoat Chik

16. Các thành phần trong layout có chiều rộng là tỉ lệ % thay vì
đơn vị cố định px
 Ưu điểm: thân thiện với người dùng
- khoảng trắng dư thừa không quá khác biệt khi độ phân giải
chênh lệch
- Thoát khỏi tình trạng thanh cuộn ngang ở máy có độ phân giải
thấp
 Nhược điểm: Khó kiểm soát (hiển thị giao dieenjj, ảnh, video
có kích thước cố định)
- Tạo ra rất nhiều khoảng trắng với máy có độ phan giải rất lớn
khi nội dung không được bù đầy
2. KÍCH THƯỚC LƯU ĐỘNG
(FLUID LAYOUT – LIQUID LAYOUT)
By Hoat Chik

17.  Bao gồm :
- Font
- Color – icons
- Size
- Hierarchy (cấu trúc)
- Space (không gian)
IV. TYPOGRAPHY
By Hoat Chik