Quytrinh layout hit
Download as PPTX, PDF1 like371 views
Tài liệu mô tả quy trình thiết kế giao diện website bằng 9 bước, từ xác định yêu cầu của khách hàng đến chuyển mã cho lập trình viên. Nó cũng đề cập đến các loại kích thước web như cố định và lưu động, cùng với ưu nhược điểm của từng loại. Ngoài ra, tài liệu còn nhấn mạnh tầm quan trọng của typography trong thiết kế.
Quytrinh layout hit
- 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