BÁO cáo học PHẦN tư DUY THIẾT kế vật vờ studio, liên kết đến website vatvostudio vn

PHÂN HIỆU ĐẠI HỌC ĐÀ NẴNG TẠI KON TUM KHOA CÔNG NGHỆ BÁO CÁO HỌC PHẦN TƯ DUY THIẾT KẾ GVHD : ThS Lê Thị Bảo Yến SVTH : Phan Sử Bảo San Kimlong Oum Chanmakara MSSV : 2017480201026 1917480201020 1917480201017 Lớp : K20TT Kon Tum, tháng 02 năm 2022 MỤC LỤC GIỚI THIỆU 1.1 Tên website 1.2 Chủ website 1.3 Chức website .1 PHÂN TÍCH TƯ DUY THIẾT KẾ .2 2.1 Bố cục website sử dụng .2 2.1.1 Header 2.1.2 Footer 2.2 Quy tắc đơn giản .4 2.2.1 Xây dựng sản phẩm tập trung vào giá trị cốt lõi .4 2.2.2 Loại bỏ điều không cần thiết 2.2.3 Quá nhiều lựa chọn khiến người dùng hoảng sợ 2.2.4 Sử dụng màu sắc typography để thể phân cấp nội dung trang 2.3 Quy tắc phối màu 2.3.1 Phối màu đơn sắc (Monochromatic) 2.4 Các nguyên tắc typography ĐÁNH GIÁ THIẾT KẾ 3.1 Ưu điểm thiết kế 3.2 Nhược điểm thiết kế .8 3.3 Đề xuất giải pháp DANH MỤC HÌNH Hình 1.1 – Vinh Vật Vờ Hình 2.1 – Bố cục trang web Hình 2.2 – Logo Vật Vờ Studio Hình 2.3 – Liên kết đến trang mạng xã hội .2 Hình 2.4 – Danh mục viết theo chủ đề Hình 2.5 – Thanh tìm kiếm .3 Hình 2.6 – Footer trang web Hình 2.7 – Tập trung vào giá trị cốt lõi Hình 2.8 – Loại bỏ điều không cần thiết Hình 2.9 – Quá nhiều lựa chọn khiến người dùng hoảng sợ Hình 2.10 – Phân cấp nội dung trang Hình 2.11 – Phối màu đơn sắc Hình 2.12 – Typography tên danh mục tiêu đề Hình 2.13 – Typography nội dung GIỚI THIỆU 1.1 Tên website Vật Vờ Studio, liên kết đến website: vatvostudio.vn 1.2 Chủ website Trần Xuân Vinh (Vinh Vật Vờ) Hình 1.1 – Vinh Vật Vờ Vinh Vật Vờ biết đến blogger tiếng lĩnh vực công nghệ Anh chuyên làm video đưa bình luận, review thiết bị mới, đặc biệt điện thoại thương hiệu khác như: Apple, Samsung, Xiaomi Tất sản phẩm, thiết bị thị trường anh đội ngũ nhân viên nhanh chóng cập nhật đưa nhận xét khách quan, chi tiết để người dùng có thêm thơng tin tham khảo 1.3 Chức website Vật Vờ Studio kênh công nghệ hàng đầu Việt Nam với nội dung đánh giá chi tiết chất lượng cao sản phẩm như: điện thoại thông minh, máy tính bảng, laptop, PC, nhà thơng minh, đồ gia dụng… Ngoài ra, cập nhật tin tức, thủ thuật, đánh giá hàng ngày sản phẩm công nghệ Các viết đầu tư trau chuốt từ nội dung hình ảnh PHÂN TÍCH TƯ DUY THIẾT KẾ 2.1 Bố cục website sử dụng Bố cục sử dụng bố cục dọc Màn hình chia thành 2/3 với phần lớn tập trung vào nội dung đáng ý Các viết đăng kèm với hình ảnh minh họa, tiêu đề và mô tả ngắn gọn cho người dùng lựa chọn Phần nhỏ bên phải dùng để giới thiệu thủ thuật công nghệ dành cho quảng cáo Hình 2.2 – Bố cục trang web 2.1.1 Header Phần đầu web, logo Vật Vờ Studio đặt hình, gây ý: Hình 2.3 – Logo Vật Vờ Studio Phía bên trái đường liên kết đến trang mạng xã hội khác studio: Hình 2.4 – Liên kết đến trang mạng xã hội Tiếp đến danh mục viết: Hình 2.5 – Danh mục viết theo chủ đề Cuối nút tìm kiếm, ấn vào tìm kiếm cho người dùng nhập tìm viết muốn Hình 2.6 – Thanh tìm kiếm 2.1.2 Footer Cuối trang web liên kết đến trang mạng xã hội thơng tin liên hệ Hình 2.7 – Footer trang web 2.2 Quy tắc đơn giản 2.2.1 Xây dựng sản phẩm tập trung vào giá trị cốt lõi Vật Vờ Studio trang web có mục đích đánh giá thiết bị công nghệ Như vậy, đa phần viết tập trung phần lớn vào nội dung, đưa nội dung lên hàng đầu Mỗi viết có hình ảnh minh họa, tiêu đề được phóng to tạo nởi bật, cộng với vài dịng mơ tả thơng tin kèm Từ giúp cho người dùng có thể dễ dàng lựa chọn nội dung mà muốn tìm hiểu Hình 2.8 – Tập trung vào giá trị cốt lõi 2.2.2 Loại bỏ điều khơng cần thiết Mỗi viết có phần mô tả ngắn gọn khoảng từ đến dịng với chủ đề viết Đôi khi, phần thời gian tác giả viết lược bớt Do đó, người dùng có cho trải nghiệm tớt dễ xác định thơng tin muốn hướng tới, không bị phân tâm bởi những điều thừa thãi Hình 2.9 – Loại bỏ điều khơng cần thiết 2.2.3 Quá nhiều lựa chọn khiến người dùng hoảng sợ Khi có viết đăng lên, người thiết kế website xếp chúng cách khoa học theo danh mục, chủ đề riêng Như vừa tiết kiệm thời gian cho người dùng, vừa tránh choáng ngộp trước mặt họ nhiều lựa chọn Hình 2.10 – Quá nhiều lựa chọn khiến người dùng hoảng sợ 2.2.4 Sử dụng màu sắc typography để thể phân cấp nội dung trang Để thể phân cấp nội dung trang, nhà thiết kế áp dụng hiệu màu sắc typography Điều khơng giúp cho viết truyền tải nội dung cách thu hút mà cịn khiến trở nên dễ dàng nhận diện đáng nhớ Hình 2.11 – Phân cấp nội dung trang Trong hình minh họa, ta thấy phần danh mục viết chuyển thành màu đỏ để tạo khác biệt Tiêu đề in đậm sử dụng font chữ có chân (serif) để tăng tính bật Chưa hết, nội dung được trình bày với format dọc, một dòng gồm khoảng 10-13 từ, giúp người đọc lướt từ xuống dưới mà không phải đảo mắt nhiều, tăng hiệu suất đọc 2.3 Quy tắc phối màu 2.3.1 Phối màu đơn sắc (Monochromatic) Sử dụng màu chủ đạo sử dụng nhiều kiểu sắc độ khác màu để chúng cộng hưởng với Ở chữ đen trắng, chữ trắng đen Vì khơng q cầu kì phức tạp, nên kiểu phối màu đơn sắc nhìn dễ chịu với người nhìn Hình 2.12 – Phối màu đơn sắc 2.4 Các nguyên tắc typography Đầu tiên phần tên danh mục viết Việc sử dụng font sans-serif, in hoa toàn (UPPERCASE) thu nhỏ khiến khơng thu hút q nhiều ý Tiếp đó, phần tiêu đề viết sử dụng font Times News Roman Bold (serif), với kích cỡ lớn Kiểu cách cổ điển thông dụng chữ lựa chọn tuyệt vời để trở nên bật mắt người đọc Hình 2.13 – Typography tên danh mục tiêu đề Cuối phần nội dung viết hong cách đại, rõ ràng font sans-serif với cỡ chữ thông dụng (12), giãn cách dòng vừa phải giúp cho người xem hình máy tính đọc dễ dàng hiệu Hình 2.14 – Typography nội dung ĐÁNH GIÁ THIẾT KẾ 3.1 Ưu điểm thiết kế - Bố cục nội dung phù hợp với mục tiêu website, đơn giản, dễ tiếp cận - Vận dụng hợp lý quy tắc thiết kế - Dễ thao tác điều hướng - Tương thích tốt với hình nhỏ điện thoại máy tính bảng 3.2 Nhược điểm thiết kế - Màu sắc chủ đạo phông màu trắng sáng, tiên dễ nhìn, Nhưng đọc lâu khiến người dùng dễ bị mỏi, nhức mắt - Chưa có phần bình luận để người dùng nêu quan điểm, đánh giá, nhận xét, góp ý cá nhân viết thông tin cung cấp - Đơn giản đơn điệu, chưa có nhiều danh mục viết cho người dùng tìm tịi thêm 3.3 Đề xuất giải pháp - Có thể thay đổi màu thành màu khác đỡ sáng hơn, thêm chủ để tối (dark theme) để phù hợp cho người dùng phần lớn thời gian làm việc điều kiện thiếu ánh sáng - Thêm phần bình luận cuối viết - Thêm số danh mục để tiết kiệm thời gian tìm kiếm ... GIỚI THIỆU 1.1 Tên website Vật Vờ Studio, liên kết đến website: vatvostudio. vn 1.2 Chủ website Trần Xuân Vinh (Vinh Vật Vờ) Hình 1.1 – Vinh Vật Vờ Vinh Vật Vờ biết đến blogger tiếng lĩnh... Hình 2.3 – Logo Vật Vờ Studio Phía bên trái đường liên kết đến trang mạng xã hội khác studio: Hình 2.4 – Liên kết đến trang mạng xã hội Tiếp đến danh mục viết: Hình 2.5 – Danh mục viết theo chủ... LỤC GIỚI THIỆU 1.1 Tên website 1.2 Chủ website 1.3 Chức website .1 PHÂN TÍCH TƯ DUY THIẾT KẾ .2 2.1 Bố cục website sử dụng .2 2.1.1