BÀI GIỚI THIỆU NHỮNG KHÍA CẠNH TỔNG QUAN VỀ THIẾT KẾ WEB MỤC TIÊU BÀI HỌC Các khía cạnh thiết kế web Những kỹ thiết yếu thiết kế website Quy trình thiết kế website Một số vấn đề thiết kế website Một số website có thiết kế tiêu biểu Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web Các khía cạnh thiết kế web Nội dung Trình bày giao diện Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web Yếu tố khác Nội dung Nội dung phần thiết yếu tạo nên trang web, bao gồm: Văn Hình ảnh đồ họa & multimedia Các thành tố khác Nội dung cần cân nhắc kỹ theo mục đích cho phù hợp với độc giả Website phương tiện để đưa nội dung tới độc giả/khách hàng Trình bày giao diện Trình bày nội dung (HTML, màu sắc, typography) Bố cục giao diện (layout, CSS) Thiết kế thành phần đồ họa Graphic Flash Các yếu tố khác Cách tổ chức truyền tải nội dung Thiết kế sáng tạo Tính tiện dụng (Usability) KỸ NĂNG THIẾT YẾU TRONG THIẾT KẾ WEBSITE KỸ NĂNG THIẾT YẾU TRONG THIẾT KẾ WEBSITE Kết điều tra cộng đồng chuyên gia thiết kế web kỹ thiết yếu nghề TKW % đồng tình 90% 80% 70% 60% 50% 40% % đồng tình 30% 20% 10% 0% CSS HTML Layout Typography Flash Color XHTML http://teachtheweb.com/monograph.php Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web QUY TRÌNH THIẾT KẾ WEBSITE QUY TRÌNH THỰC HIỆN WEBSITE Quy trình thiết kế web Đây trình gặp khách hàng xem họ muốn làm Đưa thơng tin thu thập từ phía khách hàng để phân tích, thử nghiệm Tìm hiểu Thực Khảo sát Bắt tay thực layout Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 10 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Thiết kế web: Resolution (độ phân giải) Thiết kế phù hợp với trình duyệt Màu sắc web Chế độ nén hình ảnh sử dụng web Text (một số nguyên liệu tạo nên typography web) Khả truy cập (Accessibility) Tính tiện dụng (Usability) Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 14 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Resolution (độ phân giải) Độ phân giải hình Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web Độ phân giải hình ảnh 15 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Độ phân giải hình: Hầu hết hình máy tính hiển thị với độ phân giải 72-96 ppi (pixels per inch) Khi nói tới độ phân giải hình, thường tham chiếu tới kích thước hình, số lượng pixel hiển thị hình Kích cỡ hình chi phối web ngày nay: 800 600 1024 768 Độ phân giải hình 2005 2004 Lớn 11% 10% 1024x768 56% 50% 800x600 28% 35% Nhỏ 5% 5% Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 16 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Độ phân giải hình ảnh: Là kích thước tồn vẹn tổng thể hình ảnh Thường sử dụng để định nghĩa kích thước pixel độ phân giải khơng gian: • Kích thước pixel (Pixel dimensions): số lượng pixel tạo nên hình ảnh Megapixel triệu điểm ảnh, hiểu (width height / 1,000,000) • Độ phân giải không gian: số lượng điểm ảnh inch Độ phân giải không gian phổ biến 72ppi (độ phân giải cho hình) 300ppi (độ phân giải cho in ấn) Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 17 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Thiết kế phù hợp với trình duyệt: Trình duyệt giao diện người sử dụng tương tác với thông tin web Cung cấp framework để hiển thị thông tin công cụ điều hướng cho tương tác Điều chỉnh mã sử dụng Cascading Style Sheets (CSS) để đưa thiết kế phù hợp với trình duyệt Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 18 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Thiết kế phù hợp với trình duyệt: Kích thước trình duyệt thực sự: kích thước hình người dùng xác định số lượng thông tin hiển thị thời điểm Nên thiết kế cần xem xét khơng gian trình duyệt, trừ kích thước hình tổng thể để đưa kích thước web xác Kích thước hình IE Firefox Opera Netscape 800x600 779x400 781x434 777x427 781x389 1024x768 1003x568 1005x602 1001x595 1005x557 Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 19 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Màu sắc web: Là tập hợp màu sắc làm web quán trình duyệt hai hệ điều hành (Windows OSX) Chế độ nén hình ảnh sử dụng web: GIF (Graphics Interchange Format): • • • • Độ sâu màu từ 1-bit (2 colors) to 8-bit (256 colors) Hỗ trợ suốt Hỗ trợ ảnh động Kích thước tập tin: 20%-90% kích thước ban đầu Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 20 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE JPEG (Joint Photographic Experts Group): • Độ sâu màu từ 8-bit (256 colors) or 24-bit (16,777,216 colors) • Cho phép thiết lập kiểm sốt chất lượng theo tỷ lệ phần trăm • Kích thước tập tin 5%- 20% kích thước ban đầu PNG (Portable Network Graphics): • Độ sâu màu từ 8-bit (256 colors) or 24-bit (16,777,216 colors) • Hỗ trợ kênh màu alpha độ suốt • Thơng thường nén hình ảnh 5% - 25% tốt GIF Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 21 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Text: Một số nguyên liệu tạo nên typography web Để font chữ hiển thị xác trình duyệt font phải cài đặt máy người dùng Để hỗ trợ việc nên sử dụng họ font Một số họ font thường sử dụng: • • • • • • Arial, Helvetica, sans-serif Times New Roman, Times, serif Courier New, Courier, mono Georgia, Times New Roman, Times, serif Verdana, Arial, Helvetica, sans-serif Geneva, Arial, Helvetica, sans-serif Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 22 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Khả truy cập (Accessibility): Hỗ trợ việc tiếp cận thông tin web dành cho đối tượng, đặc biệt người khuyết tật Đây vấn đề quan trọng cần xem xét dự án thiết kế Tính tiện dụng (Usability): Website đáp ứng mục tiêu người sử dụng mà lại sử dụng thuận tiện Đang dần trở thành khái niệm chuẩn, liên quan tới thành công web ngày Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 23 TRAO ĐỔI MỘT SỐ VÍ DỤ WEBSITE CĨ THIẾT KẾ ĐIỂN HÌNH WEBSITE CĨ THIẾT KẾ ĐIỂN HÌNH http://www.bbc.co.uk/ Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 25 WEBSITE CÓ THIẾT KẾ ĐIỂN HÌNH http://www.csszengarden.com/ Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 26 WEBSITE CĨ THIẾT KẾ ĐIỂN HÌNH http://www.microsoft.com/en-us/default.aspx Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 27 TỔNG KẾT khía cạnh thiết kế web: Nội dung Trình bày Yếu tố khác (tổ chức truyền tải nội dung, usability,…) Các kỹ thiết yếu thiết kế web: CSS, HTML/XHTML, layout, typography, flash, color Nên ý cách sử dụng thành phần web để đạt hiểu tốt nhất: text, hình ảnh, tính tiện dụng,… Cập nhật thường xuyên best practices thiết kế web từ sách Internet Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 28 ... BÀI HỌC Các khía cạnh thiết kế web Những kỹ thiết yếu thiết kế website Quy trình thiết kế website Một số vấn đề thiết kế website Một số website có thiết kế tiêu biểu Slide - Giới thiệu khía cạnh. .. thiệu khía cạnh tổng quan thiết kế trang web 25 WEBSITE CĨ THIẾT KẾ ĐIỂN HÌNH http://www.csszengarden.com/ Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 26 WEBSITE CĨ THIẾT KẾ ĐIỂN... 10 24x768 10 03x568 10 05x602 10 01x595 10 05x557 Slide - Giới thiệu khía cạnh tổng quan thiết kế trang web 19 VẤN ĐỀ QUAN TÂM TRONG THIẾT KẾ WEBSITE Màu sắc web: Là tập hợp màu sắc làm web quán trình