Bài giảng Thiết kế Web 1 - Chương 4: Quy trình thiết kế giao diện Website - Vũ Chí Hiếu

Vũ Chí Hiếu hieuvc@gmail.com  Giới thiệu  Yêu cầu thiết kế giao diện  Quy trình thiết kế giao diện 2  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 3  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 4  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 5  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? 6  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 7 8 9 10  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? 11  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 12 13  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ữ, 14 15 16  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 17 18  Ví dụ: Chuẩn đặt tên trong một thẻ DIV  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 19  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) 20  Biểu đồ thị phần trình duyệt web (báo cáo ngày 30/04/2008 của LinkHits) 21  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ế 22 23