Quy trình thiết kế giao diện Website

1. Quy trình thiết kế giao diện Website Vũ Chí Hiếu hieuvc@gmail.com

2. Nội dung • Giới thiệu • Yêu cầu thiết kế giao diện • Quy trình thiết kế giao diện

3. Giới thiệu • Thiết kế giao diện: Designer, Marketer • Là một công việc trong quy trình phát triển Website • Thiết kế giao diện tốt làm tăng hiệu quả của Website

4. Yêu cầu thiết kế giao diện • Tính thẩm mỹ • Bố cục (layout) • Màu sắc • Hình ảnh,… • Tính phù hợp • Chủ đề website • Đối tượng người dùng • Tính hiệu quả • Tải nhanh: không lạm dụng hình ảnh kích thước lớn • Đúng chuẩn (www.w3c.org) • Tính thân thiện: dễ bảo trì, dễ phát triển

5. Quy trình thiết kế giao diện • Xác định yêu cầu khách hàng • Phác thảo ý tưởng trên giấy • Đánh giá mẫu phác thảo • Thiết kế đồ họa bản đơn sắc • Phối màu cho giao diện web • Xây dựng tài liệu về chuẩn CSS, client script, ảnh, folder cho trang web • Sử dụng ngôn ngữ đánh dấu thiết kế giao diện • Test giao diện trên các trình duyệt • Chuyển mã nguồn tới bộ phận phát triển web

6. B1. Xác định yêu cầu khách hàng • Mục tiêu • Xác định yêu cầu • Tư vấn cho khách hàng • Tiêu chí • Yêu cầu phải bao quát giao diện, chức năng, cấu trúc nội dung, đối tượng xem website • Chủ động tìm hiểu yêu cầu trước khi tiếp cận khách hàng • Xây dựng bảng câu hỏi cho khách hàng • Sau 3 năm nữa website sẽ phục vụ mục đích gì? • Liệt kê các tính năng của website? • Cho biết 3 website ưa thích? Điểm ưa thích?

7. B2. Phác thảo ý tưởng trên giấy • Mục tiêu: định hình bố cục trang web • Tiêu chí • Màn hình người dùng? (15”, 17”,…) • Banner không quá 1/3 màn hình thực • Sitebar không quá 25% chiều rộng trang web • Chia trang web thành 2 vùng • Vùng template • Không/ít hiệu chỉnh trong các trang web của website • Vùng hiệu chỉnh • Có thay đổi nội dung trong hầu hết các trang

8. B2. Phác thảo ý tưởng trên giấy

9. B2. Phác thảo ý tưởng trên giấy

10. B2. Phác thảo ý tưởng trên giấy

11. B3. Đánh giá mẫu phác thảo • Mục đích • Phù hợp yêu cầu • Đúng mong muốn khách hàng • Tiêu chí • Xây dựng 3 mẫu phác thảo • Trả lời • Mẫu thiết kế đáp ứng yêu cầu khách hàng? • Họ thích mẫu nào? • Tìm thông tin, chức năng có dễ không? • Bố cục rời rạc không? Thẩm mỹ không?

12. B4. Thiết kế đồ họa bản đơn sắc • Mục tiêu • Chuyển mẫu phác thảo trên giấy sang đồ họa vi tính • Kiểm tra bố cục có phù hợp yêu cầu không? • Tiêu chí • Chưa phối màu, chỉ sử dụng màu sám • Sau khi thiết kế xong, tiếp tục đánh giá như bước 3

13. B4. Thiết kế đồ họa bản đơn sắc

14. B5. Phối màu cho giao diện Web • Mục tiêu • Phối màu cho bố cục đơn sắc đã đáp ứng yêu cầu giao diện • Tiêu chí • Dựa vào màu sắc yêu cầu từ bảng câu hỏi: màu chủ đạo, màu thứ cấp, màu chói • Màu nền: tùy vào mục đích website • Màu chữ: tối đa 3 màu, 3 font, 3 cỡ chữ, 3 kiểu chữ,…

15. B5. Phối màu cho giao diện Web

16. B5. Phối màu cho giao diện Web

17. B6. Xây dựng chuẩn CSS, client script, ảnh, folder cho trang Web • Mục tiêu • Giúp website dễ bảo trì, nội dung hiển thị tốt hơn với tỷ lệ mã thấp • Giúp quy trình sản xuất, triển khai, bảo trì ít rủi ro • Tiêu chí • Định nghĩa vùng site, các vùng trong một thẻ DIV • Chuẩn đặt tên cho CSS, ảnh • Chuẩn đặt tên cho các thành phần, thư mục của website • Chuẩn đặt tên cho các file CSS, HTML, JS, XML

18. B6. Xây dựng chuẩn CSS, client script, ảnh, folder cho trang Web • Ví dụ: Chuẩn đặt tên trong một thẻ DIV

19. B7. Sử dụng ngôn ngữ đánh dấu thiết kế giao diện • Mục đích • Thiết kế web bằng HTML, CSS • Sử dụng Flash, JavaScript, AJAX,… nếu có • Tiêu chí • Sử dụng Photoshop để cắt thành các ảnh nhỏ • Sử dụng HTML, CSS thiết kế bố cục • Yêu cầu • Cần hiểu rõ về HTML, CSS, JavaScript. Nếu không giao diện sẽ hiển thị không như bản vẽ đồ họa vi tính trên các trình duyệt khác nhau

20. B8. Test trên các trình duyệt • Mục tiêu • Hiển thị chính xác giao diện web như thiết kế trên các trình duyệt phổ biến • Tiêu chí • Kiểm tra trên các trình duyệt phổ biến nhất • Tập trung các trình duyệt khách hàng sử dụng • Theo dõi loại trình duyệt khách hàng dùng để truy cập website (công cụ Google Analytics) để cập nhật theo xu hướng người dùng • Nghiên cứu kỹ CSS ứng dụng cho nhiều trình duyệt (CSS hack)

21. B8. Test trên các trình duyệt • Biểu đồ thị phần trình duyệt web (báo cáo ngày 30/04/2008 của LinkHits)

22. B9. Chuyển mã tới bộ phận lập trình • Mục tiêu • Chuyển toàn bộ mã thiết kế giao diện (HTML, CSS, JS,…), hình ảnh, tài liệu mô tả tới bộ phận lập trình • Tiêu chí • Phải có tài liệu mô tả để bộ phận lập trình hiểu ý đồ thiết kế