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