Đồ án môn thiết kế sản phẩm đa phương tiện, đồ họa tĩnh (4)

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG TIỆN -🙞🙜🕮🙞🙜 - BÁO CÁO ĐỀ TÀI ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: NGHIÊN CỨU VỀ KHOẢNG TRẮNG (WHITESPACE) VÀ ỨNG DỤNG VÀO THIẾT KẾ WEBSITE CHO CÔNG TY VIEON CHANNEL Giảng viên : Trần Quốc Trung Môn học : Đồ án thiết kế sản phẩm đa phương tiện Sinh viên: Bùi Long Nhật - B17DCPT153 01 TÍNH KHẢ THI: (Trình bày kĩ kiến thức có 04 năm học theo định hướng chun sâu mình) có minh chứng sản phẩm, thiết kế điểm cộng) Mục đích nhiệm vụ nghiên cứu:  Mục đích: Nghiên cứu nhằm đem lại nhìn đắng cụ thể yếu tố Khoảng trắng thiết kế nói chung thiết kế website nói riêng  Nhiệm vụ: Đưa nhìn đánh giá tổng quan Khoảng trắng thiết kế website Từ đó, nâng cao sản phẩm thiết kế, đảm bảo tính thẩm mỹ tạo sức hút người dùng Các sản phẩm thiết kế website: o Thiết kế trang web nhà hàng SV Cafe: o Thiết kế trang web bán đồ ăn vặt: 02 TÍNH KHOA HỌC: ( Danh sách tài liệu chọn lọc để sử dụng đồ án, trình bày tóm tắt nội dung sử dụng tài liệu để phục vụ cho đồ án) Tài liệu tham khảo: Sách :”Whitespace is not your enemy”  Lĩnh vực: Thiết kế đồ họa, thiết kế website  Thông tin tài liệu: - Công ty phát hành: CRC Press Ngày xuất bản: Tấc giả: Rebecca Hagen Kim Golombisky Giới thiệu: Cuốn sách chứa thông tin thu từ nguồn xác thực đánh giá cao chuyên gia lĩnh vực thiết kế Cuốn sách đưa yếu tố quan trọng giúp người đọc hiểu nắm bắt thiết kế Khoảng trắng từ đến nâng cao Ngoài ra, thành phần liên quan website màu sắc, typo, bố cục, layout… đề cập “4 điều cần biết thiết kế Khoảng trắng website” https://designervn.net/threads/4-diu-ma-designer-nen-bit-vkhoang-trang-trong-thit-k.5765/ - Tác giả: DesignerVN - Lĩnh vực: Thiết kế đồ họa - Nội dung: Trình bày điều mà designer nên biết khoảng trắng Ngồi ra, trang web cịn đưa hình ảnh minh họa, câu dẫn chứng nhà thiết kế tiếng Khoảng trắng thiết kế Từ đưa nhìn khách quan, cụ thể cho người đọc Tổng quan khoảng trắng: a Khái niệm : “Khoảng trắng” hay “không gian âm” đề cập đến khoảng không gian trống, vùng khơng có nội dung trang Tóm lại, lề khoảng trống yếu tố thiết kế (khối văn hình ảnh) Khoảng trắng coi phần bố cục giống từ ngữ, hình ảnh Ngồi việc mang lại cho yếu tố “không gian thở”, việc sử dụng khoảng trắng hợp lý cải thiện đáng kể hấp dẫn trực quan cho thiết kế người dùng tập trung nhiều vào yếu tố trình bày Tuy nhiên khoảng trắng khơng phải khoảng khơng gian phải có màu trắng khoảng trống Nó phần mang màu sắc, texture để người dùng tập trung vào yếu tố thiết kế b Lịch sử đời: Vào khoảng thời gian dấu hiệu xuất tường hang động, tức khoảng 150.000 năm trước Khoảng trắng ban đầu xuất yếu tố phân cách không gian từ ngữ (năm 800 sau CN), lề biên đầy tính sáng tạo hữu dụng dành cho ký hiệu (từ năm 1300 sau CN), yếu tố thứ ba (chữ, hình ảnh, khoảng trắng) (vào năm đầu kỷ 20) Cũng cho khoảng trắng “phát minh” họa sĩ thiết kế nhà nghề thuộc trường phái Bauhaus năm 1920, tác phẩm họ tiến hóa từ nhiều phong trào nghệ thuật khác hai thập kỷ trước: Chủ nghĩa biểu hiện, Xu hướng lập thể, De Stijl Chủ nghĩa kết cấu, Ngày 01 tháng 04 năm 2003, Slashdot đưa đánh giá ngôn ngữ lập trình C++ Ý tưởng sử dụng ký tự khoảng trắng tạo thành tốn tử tạo thành “Chương trình khoảng trắng” Từ đó, khoảng trắng xác định rõ ràng c Phân loại khoảng trắng: Có hai loại khoảng trắng chính: khoảng trắng chủ động (active white space) khoảng trắng thụ động (passive white space) Khoảng trắng chủ động định nghĩa “không gian cố ý để trống để tạo điểm nhấn làm cho cấu trúc bố cục trực quan hơn”, khoảng trắng thụ động định nghĩa “không gian trống xung quanh bên trang vùng trống xuất tự nhiên bên nội dung ví dụ phần lề, khoảng cách 10 chữ dịng khoảng khơng gian xung quanh đối tượng” Hai thành phần không gian trắng chủ động không gian vĩ mô (macro) không gian vi mơ (micro) Khơng gian vĩ mơ định nghĩa khoảng không gian lớn phần tử bố cục khơng gian xung quanh bố cục thiết kế Đó "bức tranh lớn"dễ nhận thấy ví dụ trang chủ Google.com ví dụ Khơng gian vi mơ khoảng khơng gian nhỏ yếu tố thiết kế Khoảng trắng siêu nhỏ có ảnh hưởng trực tiếp đến mức độ dễ đọc nội dung thường thấy dòng đoạn văn, ký tự, d Tác dụng khoảng trắng thiết kế website:  Cải thiện mức độ dễ đọc: Những khoảng trắng thường mang lại khơng gian thống đãng giúp độc giả phân biệt rõ ràng ranh giới thành phần trang Việc sử dụng khoảng trắng kết hợp với phân cấp thiết kế chữ góp phần quan trọng làm bật nội dung đoạn văn Đối với người không chuyên thiết kế, cách để làm đối tượng bật làm cho to hơn, nhiên sử dụng khoảng trắng đem lại bật nhấn mạnh nội dung hiệu 11 Các khoảng trắng tạo cho mắt có khoảng nghỉ, tránh gây rối mỏi mắt phải đọc đoạn văn có nội dung dài dễ dàng ghi nhớ Việc sử dụng khoảng trắng văn tăng khả đọc lên đến 20%  Thu hút ý: Có mối quan hệ khoảng cách ý, khoảng cách lớn ý nhiều Sử dụng khoảng trắng hợp lý với nguyên lý truyền thông thị giác giúp thu hút ý người dùng Khoảng trắng góp phần hình thành mảng thiết kế tổng thể, nhấn mạnh nội dung Sử dụng khoảng trắng thiết kế website cách hiệu để thu hút mạnh mẽ ý người dùng đến phần hình cụ thể  Tạo cân bằng: Khi sản phẩm có q nhiều văn hình ảnh cần yếu tố để cân khơng thứ trở nên q tải Chính chúng phải cân khu vực nghỉ ngơi khoảng trắng thường giải pháp tốt cho vấn đề Một sản phẩm thiết kế khơng có bố cục chặt chẽ khơng có khoảng trắng Khoảng trắng làm cân yếu tố khác, làm cho chúng có vị trí thích hợp trang web Nếu có q khoảng trắng dẫn đến việc nhầm lẫn, thiếu tổ chức không tạo tin tưởng - phẩm chất không thương hiệu muốn gắn với trang web Mặt khác, nhiều khoảng trắng làm thiếu nội dung thiếu hướng dẫn người dùng Chìa khóa để giải vấn đề cân thiết kế để khoảng trắng hoạt động công cụ tuyệt vời để tách phần nội dung để dễ dàng truy cập cải thiện trải nghiệm người dùng Khoảng trắng tạo cân trực quan thiết kế web như: 12 - Cân đối xứng: Nếu muốn đối tượng trang web tồn trang web trang nhã nên tạo trang web đối xứng Hiệu ứng dễ dàng đạt cách đặt đối tượng tương tự hai bên trục trung tâm Ví dụ khoảng trắng tạo đối xứng tạo nhìn hài hịa phần bên trái phần bên phải website - Cân bất đối xứng: Tính bất đối xứng mang lại tinh thần giản dị vào thiết kế Cân không đối xứng tạo cảm giác không tự nhiên người xem, lại tạo cho người xem nhìn khác lạ, độc đáo ấn tượng Thơng thường, trang web có ảnh lớn có đối tượng nằm lệch trục bố cục - Cân ngang: Cân ngang điển hình cho bố cục trang web Hầu hết văn hóa đọc từ trái sang phải, việc quan sát yếu tố tương tự bên trái bên phải trang web điều tự nhiên - Cân dọc: Cân dọc xảy yếu tố thiết kế giống Hình ảnh nặng cân với khoảng trắng để tạo ngăn nắp cho website  Tạo trang trọng, tinh tế: Khoảng trắng yếu tố tác động nhiều đến cảm xúc diện mạo thiết kế website Người dùng thường liên tưởng thiết kế sử dụng khoảng trắng lớn mang lại cảm giác sang trọng tinh tế Như vậy, coi việc sử dụng khoảng trắng cách hiệu để đem lại ấn tượng cảm xúc vào sản phẩm thiết kế Khoảng trắng thường sử dụng rộng rãi thị trường cao cấp Những thương hiệu lớn với mặt hàng đắt tiền thường áp dụng 13 khoảng trắng giao diện trang web họ Hầu hết nhãn hàng lớn, mang định vị sang trọng, cao cấp, giao diện website họ sử dụng khoảng trắng lớn, màu mè, giảm thiểu tối đa lộn xộn thông tin không cần thiết Tất họ muốn đẩy mạnh ý người dùng vào sản phẩm, nhấn mạnh sản phẩm họ có chất lượng đắt giá  Định vị thương hiệu: Khoảng trắng góp phần tạo nên đồng điệu cho tổng thể thiết kế Nếu khoảng trắng sử dụng cách định vị thương hiệu theo nhiều chiều hướng khác nhau: đại, lịch, sang trọng bình dân Các trang web có nhiều khoảng trắng vĩ mơ phản ánh tối giản sang trọng Các trang web có lượng khoảng trắng macro nhỏ có nhiều thơng tin, trường hợp trang web tin tức Đây điểm gây ấn tượng mạnh mẽ để website thương hiệu doanh nghiệp khắc sâu hình ảnh vào tâm trí người dùng e Những lưu ý thiết kế website cho hiệu quả: Nên tạo wireframe - áp dụng , thử nghiệm không gian trắng trước đưa vào thiết kế Sử dụng chủ yếu hình khối để mơ tả phần hình ảnh, nội dung,… so với việc ngồi làm thiết kế sản phẩm bao gồm hình ảnh , nội dung cách làm tối ưu hơn, giúp việc xem xét phần khoảng trắng (khoảng cách, bố cục thành phần) dễ dàng Việc thử nghiệm khoảng trắng wireframe giúp tạo khung thiết kế nhanh chóng, rút ngắn thời gian thử nghiệm với kiểu bố cục, để từ đưa kế cuối , với xác số lượng, khoảng cách yếu tố Nên cân nhắc xếp bố cục, tạo khoảng trắng sử dụng thiết kế Thay đổi bố cục - khoảng trắng ảnh hưởng đến hiệu suất đọc trải nghiệm người dùng theo hướng tiêu cực (khiến người dùng cảm giác khó đọc, theo dõi nội dung) theo hướng tích cực (tạo phá cách cho thiết kế, khiến người đọc có cảm giác lạ thích thú ) Chính vậy, người thiết kế cần lưu ý xếp yếu tố, nghiên cứu thêm 14 yếu tố thị giác người để áp dụng khoảng trắng cách hiệu Khoảng trắng định hướng thị giác người dùng , giúp tập trung vào nội dung cần nhấn mạnh cách thay đổi khoảng cách yếu tố xung quanh Do đó, cần làm bật nội dung đó, thay đổi bố cục, tạo độc đáo thiết kế Nguyên tắc cần lưu ý thiết kế khoảng trắng văn trang web Khi thiết kế cần đảm bảo chiều rộng đoạn văn lề không rộng Điều giúp cải thiện khả đọc đoạn văn làm cho văn dễ nhìn Để giảm kích thước lề, người thiết kế nên cân nhắc thiết kế đoạn văn, triển khai ý tưởng mới, độc đáo tránh gây cảm giác nhàm chán cho toàn sản phẩm Nội dung web thường tập trung vào vài đoạn văn khác nhau, tiêu đề có từ H1-H6 hầu hết trang web sử dụng phổ biến H1-H4 Đối với nhà thiết kế cần phân cấp thông tin cho đoạn văn cách rõ ràng Khoảng cách đoạn văn quan trọng giúp xác định trạng thái nội dung Khi người dùng nhìn thấy tiêu đề, họ nhận biết nội dung họ xem nội dung nội dung viết trước Điều phụ thuộc vào kết hợp hồn hảo kích thước, màu sắc kiểu dáng văn tiêu đề giúp tạo kỳ vọng phù hợp cho người dùng Khoảng trắng văn cho biết trạng thái nội dung trang Phần nội dung có nhiều không gian chiếm ưu phụ đề nên gần với đoạn nội dung có liên quan thông qua ngữ cảnh Tất liên quan đến việc tạo phân cấp nội dung để phân biệt trực quan văn trang Mỗi tiêu đề phải phản ánh phong cách độc đáo riêng nó, điều giúp tiêu đề bật so với nội dung khác trang web Thực tế cho thấy, việc tạo tiêu đề xuất sắc áp dụng tốt thiết kế khoảng trắng giúp đoạn văn dễ dàng tiếp nhận Tiêu đề phân đoạn đặc biệt thú vị thiết kế chúng tùy chỉnh nhiều kích thước từ to đến nhỏ tùy thuộc vào mục đích trang web Tuy nhiên, kích thước tiêu đề khơng thực quan trọng mối quan hệ khoảng tiêu đề đoạn văn trang web Một lưu ý thiết 15 kế tiêu đề có tiêu đề lớn nên sử dụng thêm khơng gian phần tiêu đề để tạo cảm giác trực quan điểm cho tiêu đề, đồng thời gắn kết với tiêu đề phụ phần nội dung trang web để tạo nên khối thống Sử dụng tiêu để phụ bổ trợ khối văn để nội dung văn cụ thể rõ ràng Khoảng cách tiêu đề đoạn văn xác định đoạn văn thuộc tiêu đề Tương tự, nên chèn nhiều khoảng trống tiêu đề phụ tiêu đề Việc sử dụng khoảng trắng giúp xác định thứ bậc thiết kế trực quan kiểu chữ Một hệ thống phân cấp trực quan phải rõ ràng thơng qua việc sử dụng khơng gian, kích thước, màu sắc kiểu văn Cần lưu ý số điều: ● Nên đặt tiêu đề phụ trước đoạn văn bắt đầu tồn văn ● Đặt gần với tiêu đề cách ngắn gọn để truyền tải ý tưởng nhanh chóng rõ ràng Về chủ đề khoảng trắng văn bản, đoạn văn xương sống nội dung trang web.Nhưng tùy theo mục đích sử dụng trang web mà phần trình bày nội dung có khác Xét ví dụ cụ thể, tạp chí tin tức trực tuyến tiếng sử dụng phong cách trình bày đoạn văn khác với blog làm vườn nhỏ Số lượng nội dung, độ dài nội dung mức độ chi tiết có tác dụng đến phong cách thiết kế cho đoạn văn Người thiết kế phải khéo léo phân bố văn đủ lớn để đọc rõ ràng chiều ngang hình máy tính Kích thước văn tỉ lệ thuận với mật độ khoảng trắng Nếu kích thước văn q lớn, chiếm nhiều khơng gian hình u cầu cuộn nhiều Nhưng nhỏ, người dùng khơng đọc được, người dùng gặp khó khăn phải di chuyển mắt họ từ dòng sang dòng khác Hai điều quan trọng cần ghi nhớ lề đoạn văn chiều cao dòng (khoảng cách dịng) Kích thước văn đoạn văn ảnh hưởng lớn đến hai yếu tố khoảng trắng phụ thuộc vào kích thước Giá trị chiều cao dòng phải đủ lớn để kết nối với dịng mà khơng cảm thấy thừa Đây số lưu ý cần cân nhắc: 16 • Tránh làm cho chiều cao dòng lớn dịng văn thơng thường • Đơn vị phơng chữ em hồn hảo để tạo kích thước đồng tất trình duyệt • Chiều cao dịng thường phải lớn chút so với kích thước phơng chữ • Thử kích thước phơng chữ 1em kết hợp với độ cao dòng 1,5em Một lưu ý cuối sử dụng khoảng trắng không lạm dụng nhiều khoảng trắng Trong trình thiết kế cần cân khoảng trắng nội dung thông tin trang web Đảm bảo độ tương phản để phân cấp nhóm Khoảng cách kết hợp với độ tương phản thu hút ý người dùng đến liên kết trắng trì theo dõi thơng tin Ngồi thực tế, với trang web khác mục đích sử dụng khác mà việc bố trí khoảng trắng phần nội dung cần trọng “whitespace” – Mark Boulton - Lĩnh vực: Thiết kế - Nhà phát hành: Graphic Design, Layout & Grids - Năm phát hành: ngày 9/01/2007 - Nội dung: Cuốn sách giải thích chi tiết thuật ngữ thiết kế website, đưa cách đánh giá yếu tố cho đẹp Giải thích định nghĩa, tầm quan trọng, phân loại, tác dụng Khoảng trắng Cuốn sách cịn đưa lời khun bổ ích cho người bắt đầu thiết kế nên ý vào nội dung website Chính vậy, sách tốt cho người bắt đầu tìm hiểu thiết kế đặc biệt thiết kế website 03 KHUNG ĐỀ CƯƠNG ĐỒ ÁN TỐT NGHIỆP: ( Lý lựa chọn đề tài, Các chương mục đồ án.) I Lý chọn đề tài: 17 Trong thời đại 4.0, phát triển công nghệ dẫn tới việc internet sử dụng ngày rộng rãi Đồng nghĩa với việc lượng tin tức, kiến thức từ báo, trang web, ứng dụng ngày tăng lên Chính thế, người dùng tiếp thu thơng tin cách chủ động có chọn lọc Địi hỏi nhà thiết kế phải đầu tư vào sản phẩm cho hấp dẫn người đọc Có nhiều yếu tố sử dụng để tạo sức hút người dùng tất yếu tố thiết kế quan trọng, việc xếp thành phần trang web cho hợp lý lại yếu tố quan trọng nhất, gọi khoảng trắng Thông thường, khoảng trắng coi không gian trống, chúng giúp người xem cân lượng nội dung tiếp cận Nếu sử dụng tốt cách, biến đổi thiết kế đem lại nhiều lợi cho trang web Khoảng trắng không tạo nên hài hòa, cân đối giúp tạo dựng thương hiệu cho trang web mà cịn sử dụng để dẫn dắt người đọc từ yếu tố sang yếu tố khác Từ đó, việc giữ chân người đọc trở nên dễ dàng hơn, dần khiến họ trở thành khách hàng mục tiêu website Mục tiêu khoảng trắng làm cho trang web trở nên đơn giản, gọn gàng mà cung cấp đầy đủ thơng tin Chính thế, khoảng trắng không nên coi “không gian trống”, mà cịn yếu tố thiết kế, yếu tố giúp thành phần khác xuất Khơng gian trống cân thứ nên trang web có yếu tố khoảng trắng hồn hảo tức trang web đẹp I Các chương mục đồ án: CHƯƠNG 1: TỔNG QUAN a Đặt vấn đề b Nhận thức khoảng trắng thiết kế c Phạm vi đề tài d Phương pháp nghiên cứu CHƯƠNG 2: NỘI DUNG NGHIÊN CỨU a Tổng quan khoảng trắng b Lịch sử đời c Phân loại khoảng trắng d Tác dụng khoảng trắng thiết kế website e Những lưu ý thiết kế website cho hiệu 18 CHƯƠNG 3: KẾT QUẢ NGHIÊN CỨU: a Sản phẩm website trước sau ứng dụng “khoảng trắng” vào thiết kế website b Thảo luận kết vấn đề chưa giải c Kết luận đề nghị TÀI LIỆU THAM KHẢO 19 ... vụ: Đưa nhìn đánh giá tổng quan Khoảng trắng thiết kế website Từ đó, nâng cao sản phẩm thiết kế, đảm bảo tính thẩm mỹ tạo sức hút người dùng Các sản phẩm thiết kế website: o Thiết kế trang web... Những lưu ý thiết kế website cho hiệu 18 CHƯƠNG 3: KẾT QUẢ NGHIÊN CỨU: a Sản phẩm website trước sau ứng dụng “khoảng trắng” vào thiết kế website b Thảo luận kết vấn đề chưa giải c Kết luận đề... hàng SV Cafe: o Thiết kế trang web bán đồ ăn vặt: 02 TÍNH KHOA HỌC: ( Danh sách tài liệu chọn lọc để sử dụng đồ án, trình bày tóm tắt nội dung sử dụng tài liệu để phục vụ cho đồ án) Tài liệu tham