QUY TRÌNH THIẾT KẾ GIAO DIỆN WEBSITE

BY HOAT CHIK

I . QUY TRÌNH II. GIAO DIỆN WEBSITE III.KÍCH THƯỚC WEB IV. TYPOGRAPHY

TỔNG QUAN

By Hoat Chik

I. QUY TRÌNH THIẾT KẾ

By Hoat Chik

Bao gồm 9 bước cơ bản1. xác định yêu cầu của khách hàng2. phác thảo ý tưởng trên giấy3. đánh giá phác thảo4. thiết kế đồ họa đơn sắc5. phối màu giao diện6. xây dựng chuẩn css, script, folder cho trang web7. sử dụng ngôn ngữ đánh dấu để thiết kế giao diện8. kiểm thử giao diện trên các trình duyệt9. chuyển mã tới bộ phận lập trình

I. QUY TRÌNH THIẾT KẾ

By Hoat Chik

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

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

Ví dụ phác thảo giao diện

By Hoat Chik

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

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

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

Thiết kế tất cả các trang chi tiết của website

NOTE

By Hoat Chik

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

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

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

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

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

Bao gồm : - Font- Color – icons- Size- Hierarchy (cấu trúc)- Space (không gian)

IV. TYPOGRAPHY

By Hoat Chik