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ính thân thiện: dễ bảo trì, dễ phát triển
4
◦ Tải nhanh: không lạm dụng hình ảnh kích thước lớn ◦ Đúng chuẩn (www.w3c.org)
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
Tiêu chí
◦ Xác định yêu cầu ◦ Tư vấn cho khách hàng
◦ 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í
Chia trang web thành 2 vùng
◦ 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
◦ 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
Tiêu chí
◦ Phù hợp yêu cầu ◦ Đúng mong muốn khách hàng
◦ 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
Tiêu chí
◦ 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?
12
◦ 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
Mục tiêu
Tiêu chí
◦ Phối màu cho bố cục đơn sắc đã đáp ứng yêu cầu giao diện
◦ 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
14
◦ 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
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
Tiêu chí
◦ Giúp quy trình sản xuất, triển khai, bảo trì ít rủi ro
17
◦ Đị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
Ví dụ: Chuẩn đặt tên trong một thẻ DIV
18
Mục đích
Tiêu chí
◦ Thiết kế web bằng HTML, CSS ◦ Sử dụng Flash, JavaScript, AJAX,… nếu có
Yêu cầu
◦ Sử dụng Photoshop để cắt thành các ảnh nhỏ ◦ Sử dụng HTML, CSS thiết kế bố cục
19
◦ 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
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
Tiêu chí
duyệt phổ biến
◦ 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
20
hack)
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,…),
Tiêu chí
hình ảnh, tài liệu mô tả tới bộ phận lập trình
22
◦ Phải có tài liệu mô tả để bộ phận lập trình hiểu ý đồ thiết kế
23