(TIỂU LUẬN) 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 PHÂN TÍCH TƯ DUY THIẾT KẾ 2.1 Bố cục website sử dụng 2.1.1 Header 2.1.2 Footer 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 .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ế 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 Hình 2.4 – Danh mục viết theo chủ đề Hình 2.5 – Thanh tìm kiếm 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ợ .5 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 Tên website Vật Vờ Studio, liên kết đến website: vatvostudio.vn 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Ế 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 đê va mô ta 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 vao nôi dung, đưa nôi dung lên hang đâu Mỗi viết có hinh anh minh hoa, tiêu đê đươc phóng to tạo nơi bât, cộng với vài dịng mơ ta thơng tin kèm Từ giúp cho dung co thê dê dang lưa chon 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ơ ta ngắn gon khoảng từ đến dịng với chu đê viết Đôi khi, phần thơi gian tác giả viết lược bớt Do đó, dung co cho trai nghiêm tơt dêễ xác định thơng tin muốn hướng tới, không bi phân tâm bơi đ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 sắắ́p 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 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 trinh bay vơi format doc, môt dong gồm khoang 10-13 tư, giup đoc lươt tư xuông dươi ma không phai đao mắt nhiêu, tăng hiêu suât đoc 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Ế Ư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 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 Đề 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 8 ... GIỚI THIỆU 1 Tên website Vật Vờ Studio, liên kết đến website: vatvostudio. vn 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... 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 PHÂN TÍCH TƯ DUY THIẾT KẾ 2.1 Bố cục website sử dụng 2.1.1 Header