Doraemyths
Thiết kế và xây dựng website dành cho người yêu thích Doraemon, từ tra cứu thông tin đến khám phá nội dung giải trí.
1. Một website về Doraemon trong hai tuần
Doraemyths là website về thế giới diệu kỳ của Doraemon, với thông tin tra cứu, bài viết và nội dung giải trí. Mình cùng nhóm 5 thành viên đã thực hiện dự án trong 2 tuần (cùng lúc với vài môn khác nữa) cho môn Thiết kế và Quản trị Website.
Công việc được chia thành hai mảng thiết kế và nội dung để các thành viên phối hợp thực hiện. Mình là trưởng nhóm kiêm thiết kế và kỹ thuật chính. Ngoài ra để kịp tiến độ thì mình cũng tham gia hỗ trợ xây dựng một phần nội dung của website.
Bạn có thể tự mình trải nghiệm Doraemyths tại: https://doraemyths.framer.website/
Ảnh 1 - Doraemyths và nhóm Chồn Xanh
2. Tra cứu và khám phá thế giới Doraemon
Website gồm bốn chuyên mục: Dorawiki, Dorablogs, Doramemes và Dorahistory. Ở Dorawiki, người xem có thể tìm nội dung theo chủ đề và mở từng trang thông tin chi tiết.
Ảnh 2 - Phần giới thiệu mục Dorawiki
Ảnh 3 - Danh mục nội dung trong Dorawiki
Ảnh 4 - Trang thông tin về nhân vật Doraemon
Ảnh 5 - Danh sách bài viết trong Dorablogs
Ảnh 6 - Bộ sưu tập ảnh trong Doramemes
Ảnh 7 - Các dấu mốc của Doraemon trong Dorahistory
Ảnh 8 - Fun facts về Doraemon trên trang chủ
Ảnh 9 - Trang 404 với nút quay về trang chủ
3. Hoàn thiện website trực tiếp trên Framer
Với thời gian 2 tuần, mình chọn thiết kế và hoàn thiện website trực tiếp trên Framer. Nhóm kết hợp các template có sẵn, rồi điều chỉnh bố cục, màu sắc và kiểu chữ cho phù hợp với Doraemyths. Nội dung Wiki, Blog và Memes được quản lý qua CMS, với bố cục dùng chung cho từng loại trang.
Màu xanh lam, đỏ và vàng lấy cảm hứng từ Doraemon. Các thành phần như thanh điều hướng, nút và thẻ nội dung được dùng lại để giữ giao diện nhất quán.
Ảnh 10 - Màu sắc, kiểu chữ và các thành phần giao diện của Doraemyths
4. Kết quả và điều mình rút ra
Sau hai tuần, nhóm đã xuất bản website với 49 trang từ 12 kiểu bố cục. Góp ý từ giảng viên và bạn học cho thấy những điểm còn cần cải thiện: tốc độ tải, liên kết giữa các nội dung, cách sắp xếp nhãn và bố cục trên màn hình nhỏ…
Qua dự án, mình học được cách xác định phạm vi vừa sức, phối hợp phần thiết kế với nội dung và tận dụng công cụ để đưa ý tưởng thành một website có thể sử dụng.
Trung Nguyên
Tác giả
Cảm ơn bạn dành thời gian xem qua. Dù đây chỉ là một dự án nhóm phục vụ môn học ở trường và phải làm khá gấp rút nhưng bản thân mình và nhóm đã đặt rất nhiều tâm huyết và tình yêu vào đó.
Website vẫn còn nhiều thiếu sót nhưng là một cột mốc đáng nhớ với mình trong hành trình theo đuổi UX/UI.