Chức năng của website Vật Vờ Studio là một trong những kênh công nghệ hàng đầu Việt Nam với những nội dung đánh giá chi tiết chất lượng cao về các sản phẩm như: điện thoại thông minh, má
Trang 1PHÂ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
Kon Tum, tháng 02 năm 2022
Trang 2MỤC LỤC
1 GIỚI THIỆU 1
1.1 Tên website 1
1.2 Chủ website 1
1.3 Chức năng của website 1
2 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
2.1.2 Footer 3
2.2 Quy tắc của sự đơ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 của nó 4
2.2.2 Loại bỏ những điều không cần thiết 4
2.2.3 Quá nhiều lựa chọn sẽ khiến người dùng hoảng sợ 5
2.2.4 Sử dụng màu sắc và typography để thể hiện phân cấp nội dung trên trang 5 2.3 Quy tắc phối màu 7
2.3.1 Phối màu đơn sắc (Monochromatic) 7
2.4 Các nguyên tắc typography 7
3 ĐÁNH GIÁ THIẾT KẾ 8
3.1 Ưu điểm của thiết kế 8
3.2 Nhược điểm của thiết kế 8
3.3 Đề xuất giải pháp 8
Trang 3DANH MỤC HÌNH
Hình 1.1 – Vinh Vật Vờ 1
Hình 2.1 – Bố cục của trang web 2
Hình 2.2 – Logo Vật Vờ Studio 2
Hình 2.3 – Liên kết đến các trang mạng xã hội 2
Hình 2.4 – Danh mục bài viết theo từng chủ đề 3
Hình 2.5 – Thanh tìm kiếm 3
Hình 2.6 – Footer của trang web 3
Hình 2.7 – Tập trung vào giá trị cốt lõi 4
Hình 2.8 – Loại bỏ những điều không cần thiết 4
Hình 2.9 – Quá nhiều lựa chọn sẽ khiến người dùng hoảng sợ 5
Hình 2.10 – Phân cấp nội dung trên trang 6
Hình 2.11 – Phối màu đơn sắc 7
Hình 2.12 – Typography trong tên danh mục và tiêu đề 7
Hình 2.13 – Typography trong nội dung 8
Trang 41 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ờ được biết đến là một blogger nổi tiếng trong lĩnh vực công nghệ Anh chuyên làm các video đưa ra bình luận, review về các thiết bị mới, đặc biệt là điện thoại của các thương hiệu khác nhau như: Apple, Samsung, Xiaomi Tất cả sản phẩm, thiết bị mới trên thị trường đều được anh cùng đội ngũ nhân viên của mình nhanh chóng cập nhật và đưa ra 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 năng của website
Vật Vờ Studio là một trong những kênh công nghệ hàng đầu Việt Nam với những nội dung đánh giá chi tiết chất lượng cao về các 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 về các sản phẩm công nghệ Các bài viết đều được đầu tư trau chuốt từ nội dung cho tới hình ảnh
1
Trang 52 PHÂN TÍCH TƯ DUY THIẾT KẾ
2.1 Bố cục website sử dụng
Bố cục được sử dụng là bố cục dọc Màn hình được chia thành 2/3 với phần lớn tập trung vào những nội dung đáng chú ý Các bài viết mới nhất được đă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ỏ hơn
ở bên phải được dùng để giới thiệu những thủ thuật về công nghệ hoặc dành cho quảng cáo
Hình 2.2 – Bố cục của trang web
2.1.1 Header
Phần đầu web, logo Vật Vờ Studio được đặt chính giữa màn hình, gây sự chú ý:
Hình 2.3 – Logo Vật Vờ Studio
Phía bên trái là đường liên kết đến các trang mạng xã hội khác của studio:
2
Trang 6Hình 2.4 – Liên kết đến các trang mạng xã hội
Tiếp đến là những danh mục các bài viết:
Hình 2.5 – Danh mục bài viết theo từng chủ đề
Cuối cùng là nút tìm kiếm, khi ấn vào thì thanh tìm kiếm sẽ hiện ra cho người dùng nhập và tìm bài viết mình muốn
Hình 2.6 – Thanh tìm kiếm
2.1.2 Footer
Cuối trang web là liên kết đến các trang mạng xã hội cũng như thông tin liên hệ
Hình 2.7 – Footer của trang web
3
Trang 72.2 Quy tắc của sự đơ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 của nó
Vật Vờ Studio là trang web có mục đích chính là đánh giá các thiết bị công nghệ Như vậy, đa phần các bài viết đều sẽ tập trung phần lớn vào nội dung, đưa nội dung lên hàng đầu Mỗi bài viết đều có hình ảnh minh họa, tiêu đề được phóng to tạo sự nổi bật, cộng với vài dòng mô tả và thông tin đi kèm Từ đó sẽ giúp cho người dùng có thể dễ dàng lựa chọn nội dung mà mình muốn tìm hiểu hơn
Hình 2.8 – Tập trung vào giá trị cốt lõi
2.2.2 Loại bỏ những điều không cần thiết
Mỗi bài viết đều có phần mô tả rất ngắn gọn trong khoảng từ 2 đến 3 dòng và cùng với đó là chủ đề của bài viết Đôi khi, phần thời gian và tác giả bài viết cũng sẽ được lược bớt đi Do đó, người dùng có được cho mình một trải nghiệm tốt hơn vì dễ xác định được 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ỏ những điều không cần thiết
4
Trang 82.2.3 Quá nhiều lựa chọn sẽ khiến người dùng hoảng sợ
Khi có bài viết mới được đăng lên, người thiết kế của website sẽ sắp xếp chúng một cách khoa học theo từng danh mục, chủ đề riêng Như vậy sẽ vừa tiết kiệm được thời gian cho người dùng, vừa được tránh sự choáng ngộp khi trước mặt họ là quá nhiều sự lựa chọn
Hình 2.10 – Quá nhiều lựa chọn sẽ khiến người dùng hoảng sợ
5
Trang 92.2.4 Sử dụng màu sắc và typography để thể hiện phân cấp nội dung trên trang
Để thể hiện phân cấp nội dung trên trang, các nhà thiết kế đã áp dụng hiệu quả màu sắc và typography Điều này không những giúp cho bài viết có thể truyền tải được nội dung một cách thu hút mà còn khiến nó trở nên dễ dàng nhận diện hơn và đáng nhớ hơn
Hình 2.11 – Phân cấp nội dung trên trang
Trong hình minh họa, đầu tiên ta thấy phần danh mục của bài viết đã được chuyển thành màu đỏ để tạo sự khác biệt Tiêu đề được in đậm và sử dụng font chữ có chân (serif) để tăng tính nổi bật của nó Chưa hết, nội dung được trình bày với format dọc, trên một dòng chỉ gồm khoảng 10-13 từ, giúp người đọc lướt từ trên xuống dưới
mà không phải đảo mắt nhiều, tăng hiệu suất đọc
6
Trang 102.3 Quy tắc phối màu
2.3.1 Phối màu đơn sắc (Monochromatic)
Sử dụng một màu chủ đạo hoặc sử dụng nhiều kiểu sắc độ khác nhau trong cùng một màu để chúng cộng hưởng với nhau Ở đây là chữ đen trên nền trắng, hoặc chữ trắng trên nền đen Vì không quá cầu kì và phức tạp, nên kiểu phối màu đơn sắc nhìn rất 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 là phần tên danh mục của bài viết Việc sử dụng font sans-serif, in hoa toàn bộ (UPPERCASE) và thu nhỏ sẽ khiến nó không thu hút quá nhiều sự chú ý Tiếp đó, phần tiêu đề bài viết sử dụng font Times News Roman Bold (serif), với kích cỡ lớn Kiểu cách khá cổ điển và thông dụng của con chữ là một lựa chọn tuyệt vời để nó trở nên nổi bật trong mắt người đọc
Hình 2.13 – Typography trong tên danh mục và tiêu đề
7
Trang 11Cuối cùng là phần nội dung của bài viết hong cách hiện đại, sạch sẽ và rõ ràng của font sans-serif cùng với cỡ chữ thông dụng (12), giãn cách dòng vừa phải sẽ giúp cho người xem trên màn hình máy tính có thể đọc dễ dàng và hiệu quả hơn
Hình 2.14 – Typography trong nội dung
3 ĐÁNH GIÁ THIẾT KẾ
3.1 Ưu điểm của thiết kế
- Bố cục và nội dung phù hợp với mục tiêu của website, đơn giản, dễ tiếp cận
- Vận dụng hợp lý những quy tắc thiết kế
- Dễ thao tác và điều hướng
- Tương thích tốt với những màn hình nhỏ hơn như điện thoại và máy tính bảng
3.2 Nhược điểm của thiết kế
- Màu sắc chủ đạo của phông nền là màu trắng sáng, thoạt tiên thì có vẻ dễ nhìn, sạch sẽ Nhưng đọc lâu sẽ 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 về bài viết hoặc về những thông tin được cung cấp
- Đơn giản nhưng cũng khá đơn điệu, chưa có quá nhiều những danh mục bài 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 nền thành một màu khác đỡ sáng hơn, hoặc thêm chủ để tối (dark theme) để phù hợp cho những người dùng phần lớn thời gian làm việc trong điều kiện thiếu ánh sáng
- Thêm phần bình luận cuối mỗi bài viết
- Thêm một số danh mục con để tiết kiệm thời gian tìm kiếm
8
