Chương 2 Thiết kế giao diện website UI/UX Designer người chịu trách nhiệm về thiết kế giao điện và trải nghiệm người dùng Graphic Design Người chịu trách nhiệm thiết kế hình ảnh, UI về mặt đồ họa[.]
Chương 2: Thiết kế giao diện website UI/UX Designer: người chịu trách nhiệm thiết kế giao điện trải nghiệm người dùng Graphic Design: Người chịu trách nhiệm thiết kế hình ảnh, UI mặt đồ họa Web Developer: Người chịu trách nhiệm chuyển thiết kế đồ họa (hình ảnh sang trang web thật, bao gồm front end developer back end developer) Copywriter: người viết cho website SEO Specialist: Chuyên gia Search Engineer Optimation, để cơng cụ tìm kiếm tìm website bạn Các yếu tố cần xem xét thiết kế giao diện Người dùng đưa liệu/thông tin vào hệ thống — — Hệ thống cung cấp biểu diễn liệu cho người dùng — — Điền form: ô nhập văn bản, ô lựa chọn, nút bấm, Kéo thả Chữ, số, bảng biểu, đồ thị, hình vẽ, … Giá trị hay mối quan hệ liệu (đồ thị) Sử dụng màu sắc Hiệu ứng âm Thông báo lỗi Các yếu tố cần xem xét thiết kế giao diện Người dùng đưa liệu/thông tin vào hệ thống Hệ thống cung cấp biểu diễn liệu cho người dùng Sử dụng màu sắc — — — Hiệu ứng âm — Giới hạn số lượng màu sử dụng Độ tương phản Nhất quán việc lựa chọn màu Âm khác báo hiệu điều vừa xảy để giảm bớt nhầm lẫn Thông báo lỗi — Cần có tính xây dựng (trợ giúp người sử dụng không lặp lại lỗi) Yêu cầu cho thiết kế giao diện Tính thẩm mỹ, hình thức — — — Tính phù hợp — — Bố cục (layout) Màu sắc Hình ảnh, … Chủ đề website Đối tượng người dùng Tính hiệu — — Tải nhanh: khơng lạm dụng hình ảnh kích thước q lớn Đúng chuẩn (www.w3c.org) Nhất quán Dễ bảo trì Quy trình thiết kế giao diện website Các bước thường làm thiết kế website: Xác định yêu cầu khách hàng Phác thảo ý tưởng thiết kế giao diện giấy Đánh giá mẫu phác thảo Dựng giao diện đồ họa sử dụng công cụ đồ họa Photoshop Cắt thiết kế thành mảnh nhỏ tương ứng đối tượng giao diện Web Chuyển thiết kế sang HTML, CSS Test giao diện trình duyệt khác Chuyển mã nguồn giao diện cho đội lập trình Bước 1: 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 Chuẩn bị trước — — Tìm hiểu trước yêu cầu khách hàng, đối tượng người dùng Xây dựng bảng hỏi Bước 2: phác thảo ý tưởng Mục tiêu: định hình bố cục trang web Một số yếu tố cần xem xét — — — — — Kích cỡ hình: 15’’, 17’’,… Banner: khơng q 1/3 hình Sitebar: không 25% chiều rộng trang web Vùng template: khơng hiệu chỉnh Vùng hiệu chỉnh: thường thay đổi nội dung Bước 2: phác thảo ý tưởng Bước 2: phác thảo ý tưởng Bước 3: đánh giá mẫu phác thảo Mục đích: — — Xác nhận mẫu phác thảo phù hợp yêu cầu Xác nhận mẫu phác thảo yêu cầu khách hàng Nếu có nhiều mẫu phác thảo cần lựa chọn mẫu để sử dụng Bước 4: dựng giao diện đồ họa Dựng đơn sắc Phối màu Bước 4: dựng giao diện đồ họa Dựng đơn sắc Phối màu Bước 5: cắt thiết kế thành mảnh nhỏ Cắt thiết kế thành mảnh nhỏ tương ứng đối tượng giao diện Web Lưu ảnh nhỏ tệp ảnh Bước 6: chuyển thiết kế sang HTML, CSS Chuyển thiết kế sang HTML, CSS (ví dụ: sử dụng chức Save Web photoshop) — — Thư mục Images (lưu toàn ảnh mảnh nhỏ) Tệp mã nguồn HTML, CSS trang web tương ứng với thiết kế Tham khảo thêm sử dụng photoshop cho thiết kế website: https://www.youtube.com/watch?v=9ddHyExfr3g Một số mẫu giao diện ... … Chủ đề website Đối tượng người dùng Tính hiệu — — Tải nhanh: khơng lạm dụng hình ảnh kích thước lớn Đúng chuẩn (www.w3c.org) Nhất quán Dễ bảo trì Quy trình thiết kế giao diện website Các... bảng hỏi Bước 2: phác thảo ý tưởng Mục tiêu: định hình bố cục trang web Một số yếu tố cần xem xét — — — — — Kích cỡ hình: 15’’, 17’’,… Banner: khơng q 1/3 hình Sitebar: khơng q 25 % chiều rộng... web Vùng template: khơng hiệu chỉnh Vùng hiệu chỉnh: thường thay đổi nội dung Bước 2: phác thảo ý tưởng Bước 2: phác thảo ý tưởng Bước 3: đánh giá mẫu phác thảo Mục đích: — — Xác nhận mẫu phác