THIẾT KẾ GIAO DIỆN WEBSITE
Lễ Hội Miền Biển
Việt Nam
Instructor
Team
Phan Nhật Trung
Trần Hồng Ân 1
Phạm Mai Khanh
Lê Ngô Thu Hương
Giới thiệu
Mùa Biển được thành lập bởi CCV - đội ngũ thiết kế trẻ với nhiệt huyết duy trì và phát triển những lễ hội dân gian miền biển Việt Nam. Với mục tiêu chính là mang đến cảm hứng cho mọi người đặc biệt là thế hệ trẻ có thể tiếp cận gần hơn và góp phần gìn giữ các nét văn hóa dân gian truyền thống của dân tộc. 3 lễ hội biển đặc trưng sẽ được truyền tải một cách trực quan, cụ thể nhưng cũng không kém phần sáng tạo, mong rằng sẽ mang đến cho mọi người sự hứng thú khi tìm hiểu thêm về các lễ hội văn hóa miền biển.
Thầy Phan Nhật Trung Giáo viên hướng dẫn
Lê Ngô Thu Hương
Phạm Mai Khanh
Trần Hồng Ân
Graphic Design
Graphic Design
Graphic Design
Illustration
Illustration
Sitemap
Layout book
Logo
Userflow
TVC
TVC
Wireframe
Content
Prototype Content
3
01
Khảo sát Lý do chọn đề tài Kết quả khảo sát
02
Logo
Ý nghĩa logo Phát thảo ý tưởng Thành phần logo Hệ thống lưới Quy định màu sắc Logo trên nền tương phản Vùng an toàn Kích thước logo Các trường hợp sử dụng sai
03
Sitemap Phát thảo Hoàn thiện Sitemap
04
Userflow Đăng nhập Trang chủ Thông tin lễ hội
4
05
Design System Màu-Phông chữ Kích thước chữ Ui Element
06
Wireframe
07
Phát thảo Hoàn thiện Wireframe
Layout
Hoàn thiệnLayout Hình minh họa
09
08
Prototype
TVC
Storyboard Phân cảnh TVC
10
Ấn phẩm
5
01
KHẢO SÁT . Lí do chọn đề tài . Kết quả khảo sát
6
8 9
7
Lý do chọn đề tài
Khảo sát
LÝ DO CHỌN ĐỀ TÀI Hiện nay ở Việt Nam có hơn 7.966 lễ hội lớn nhỏ khác nhau trải dài trên khắp mọi miền đất nước. Trong đó phải kể đến các lễ hội miền biển vì những nét văn hóa đặc sắc và ý nghĩa truyền thống của nó. Bên cạnh đó, du lịch đến các tỉnh thành có bờ biển đẹp ở Việt Nam luôn là những lựa chọn được ưu tiên của các vị du khách trong và ngoài nước trong các dịp lễ, Tết. Vì những lý do trên, chúng mình muốn giới thiệu đến mọi người một số lễ hội miền biển tiêu biểu, hi vọng có thể mang lại cho mọi người một số niềm vui khi du lịch biển.
MỤC TIÊU Website Mùa Biển hi vọng có thể truyền bá văn hóa lễ hội miền biển, bên cạnh đó góp phần gợi nhớ những cái đẹp ở các vùng biển Việt Nam cho giới trẻ, góp phần củng cố kiến thức bảo vệ chủ quyền biển đảo của Việt Nam, tăng cường lòng yêu nước.
GIẢI PHÁP Cung cấp các thông tin chính xác, hình ảnh minh họa mới và video TVC để mang tới một website đậm tính nghệ thuật và văn hóa.
8
Kết quả khảo sát
Khảo sát Bạn thuộc độ tuổi nào?
Giới tính của bạn là?
363 responses
363 responses
Bạn có thường xuyên đi du lịch không?
Bạn có quan tâm đến các lễ hội ở Việt Nam không?
363 responses
363 responses
Bạn đã từng tham gia lễ hội miền biển nào ở Việt Nam chưa?
Bạn có muốn tìm hiểu thêm về lễ hội văn hóa miền biển không ?
363 responses
363 responses
9
Kết quả khảo sát
Khảo sát Bạn cảm thất các trang web du lịch Việt Nam thiếu sót những gì?
Nếu có một trang web cung cấp thông tin về lễ hội, bạn mong muốn trên web sẽ có những thông tin gì?
363 responses
363 responses
Giao diện rối rắm, khó tìm thông tin
Hình thức tổ chức, các nét đặc sắc của lễ hội Địa điểm, thời gian, hướng dẫn cách lựa chọn phương tiện di chuyển Lịch sử lễ hội
185 (51.2%)
Hình ảnh không bắt mắt
146 (40.4%)
Nội dung nhàm chán, ít thông tin
220 (60.9%)
0
50
100
150
200
250
297 (82.3%) 303 (83.9%) 167 (46.3%)
Lưu ý khi tham gia lễ hội
224 (62%)
Thông tin tuyên truyền bảo vệ chủ quyền biển đảo Việt Nam
174 (48.2%) 0
100
200
300
400
Nếu có một trang web cung cấp thông tin về lễ hội, bạn mong muốn trên web sẽ có những thông tin gì? 363 responses
Thông tin chính xác, bổ ích
282 (78.1%)
Giao diện trực quan, thân thiện
219 (60.7%)
Cách tiếp cận thông tin nhanh gọn
264 (73.1%)
Có tranh minh họa
211 (58.4%) 0
100
200
300
KẾT QUẢ KHẢO SÁT - Độ tuổi phổ biến truy cập trang web: 18 - 25 tuổi - Người tham gia khảo sát thường đi du lịch nhưng ít tham gia các lễ hội miền biển - Mọi người tương đối quan tâm đến các lễ hội miền biển. Các thông tin được quan tâm nhất là: địa điểm, thời gian, hướng dẫn cách lựa chọn phương tiện di chuyển, hình thức tổ chức, các nét đặc sắc của lễ hội. - Mọi người mong muốn website có thông tin chính xác, bổ ích và cách tiếp cận trực quan nhanh gọn.
10
11
02
LOGO . Ý nghĩa logo . Phát thảo ý tưởng . Thành phần logo . Hệ thống lưới . Quy định màu sắc . Logo trên nền tương phản . Vùng an toàn . Kích thước logo . Các trường hợp sử dụng sai
12
14 15 16 16 17 17 18 18 19
13
Ý nghĩa logo
Logo
- Logo được lấy cảm hứng từ khung cảnh bình minh trên biển kết hợp cùng những hình ảnh biểu trưng cho các lễ hội miền biển. Màu sắc logo mang đến sự năng động, sáng tạo và nhiệt huyết. - Mặt trời được lấy ý tưởng từ họa tiết vảy rồng và sóng biển chính là hình ảnh cách điệu cá ông. - Mặt trời vào thời khắc bình minh chính là sự khởi đầu tích cực, hy vọng những nét văn hóa dân gian này sẽ trường tồn và ngày càng được biết đến rộng rãi.
14
Phát thảo ý tưởng
Logo
15
Thành phần logo - Hệ thống lưới
Logo
LOGO MARK
WORD MARK
Không vẽ lại hoặc thay đổi logo, bao gồm cả vị trí và tỉ lệ các thành phần có trong logo.
16
Quy định màu sắc
Logo
D44517
D9643E
D87E62
(RGB:212/69/23
(RGB:217/100/62
(RGB:216/126/98
CMYK:4/88/91/2)
CMYK:5/76/81/1)
CMYK:70/60/62/0)
abb9aa
327770
183E42
(RGB:171/185/170
(RGB:50/119/112
(RGB:24/62/66
CMYK:28/11/26/2)
CMYK:73/27/44/14)
CMYK:52/35/30/69)
- Vui lòng sử dụng màu gốc theo quy định của chúng tôi. - KHÔNG thay đổi màu của logo trừ trường hợp sử dụng màu nền thay thế đã được hướng dẫn trước
NGUYÊN TẮC SỬ DỤNG LOGO TRÊN NỀN TƯƠNG PHẢN
17
Vùng an toàn - Kích thước logo
Logo
Vùng an toàn
Không gian trống: - Luôn duy trì không gian trống xung quanh để bảo vệ logo khỏi những nội dung hoặc hình ảnh gây mất tập trung. - Không gian trống được tính bằng 10% logo trong đo đạc chiều dọc và 10% logo trong đo đạc chiều ngang của logo.
Kích thước logo
22mm 120px
-Kích thước tối thiểu của logo khi đem in ấn chiều cao không được thấp hơn 22mm. -Kích thước tối thiểu khi hiển thị trên màn hình là 120px. -Vì kích cỡ của logo quá nhỏ có thể giảm tính ứng dụng hoặc khó chú ý, vui lòng không sử dụng logo ở kích cỡ nhỏ hơn.
18
Các trường hợp sử dụng sai
Logo
CÁC TRƯỜNG HỢP SỬ DỤNG SAI LOGO - Làm biến dạng logo: kéo dãn, co nhỏ theo các chiều dọc hoặc ngang, không duy trì tỉ lệ ban đầu. - Xoay dọc, xoay ngang logo. - Sử dụng sai màu đã quy định của logo - Sử dụng sai font đã được quy định - Thay đổi vị trí tên dự án của logo - Thay đổi khoảng cách của tên dự án Mùa Biển trên logo
19
03
SITEMAP . Phát thảo . Hoàn thiện
20
21 22
Phát thảo Site map
Site map
21
Hoàn thiện Site map
Site map
Trang chủ
Lễ hội Đền Phúc
Địa điểm, thời gian
Lễ hội Đua Thuyền
Cách thức
Lễ hội Cầu Ngư
Nét đặc sắc
Lễ hội Nghinh Ông
Hướng dẫn di chuyển
Tuyên truyền biển đảo
Lưu ý khi tham gia
Giới thiệu
Liên hệ
22
USEFLOW . Đăng nhập . Trang chủ . Thông tin lễ hội
23
4 25 26
04
Đăng nhập
Userflow
Trang mở đầu
Video intro
Đăng nhập
Tạo tài khoản
Quên mật khẩu
Đăng nhập Google
Đăng nhập Facebook
Nhập email Nhập tên đăng nhập Nhập mật khẩu Nhập lại mật khẩu Nhập capcha
Nhập email Nhập capcha
Chọn tài khoản
Tiếp tục dưới tên người dùng
Sai email Sai mật khẩu
Báo lỗi Báo lỗi Tên đăng nhập đã có người sử dụng Mật khẩu nhập lại sai Sai mã xác nhận
Email chưa được đăng ký
Khôi phục mật khẩu
Nhập mật khẩu Nhập lại mật khẩu Nhập mã capcha Quay lại trang đăng nhập Đăng nhập thành công
Trang chủ
24
Nhập email Nhập mật khẩu
Báo lỗi
Vui lòng kiểm tra email của bạn và nhấp vào đường dẫn đính kèm để lấy lại mật khẩu của bạn
Đăng ký thành công
Đăng nhập tài khoản web
Trang chủ
Userflow
Trang chủ
Lễ hội đền Phúc Quảng Nam, Quảng Xương
Các lễ hội
Lễ hội đua thuyền Quảng Bình
Lễ hội Cầu Ngư xã Ngư Lộc Thanh Hóa
Liên hệ
Lễ hội Nghinh Ông Sông Đốc, Cà Mau
Số điện thoại
Góp ý ẩn danh
Gọi điện
Gửi email
Hộp thư trả lời
Gửi thư góp ý
Nhập tiêu đề Nhập góp ý Gửi góp ý thành công. Chúng mình sẽ trả lời bạn trong vòng 48 tiếng tiếp theo. Xin chân thành cảm ơn góp ý của bạn
Giới thiệu
Quay lại trang chủ
25
Thông tin lễ hội
Userflow
Lễ Hội Đền Phúc
Trang chủ
Các lễ hội
Lễ hội đền Phúc Quảng Nam,Quảng Xương
Địa điểm Thời gian
Lịch sử lễ hội
Các hoạt động các nét đặc sắc
Hướng dẫn cách lựa chọn phương tiện di chuyển
Các lưu ý khi tham gia lễ hội
Thông tin chủ quyền biển đảo Viêt Nam
Hình ảnh Bình luận
Chia sẻ
Nội dung
Chia sẻ qua Facebook Chia sẻ qua Zalo
Lễ Hội Đua Thuyền Trang chủ
Các lễ hội
Lễ hội đua thuyền Quảng Bình
Địa điểm Thời gian
Lịch sử lễ hội
Các hoạt động các nét đặc sắc
Hướng dẫn cách lựa chọn phương tiện di chuyển
Các lưu ý khi tham gia lễ hội
Thông tin chủ quyền biển đảo Viêt Nam
Hình ảnh Bình luận Nội dung 26
Chia sẻ
Chia sẻ qua Facebook Chia sẻ qua Zalo
Thông tin lễ hội
Userflow
Lễ Hội Cầu Ngư
Trang chủ
Các lễ hội
Lễ hội Cầu Ngư xã Ngư LộcThanh Hóa
Địa điểm Thời gian
Lịch sử lễ hội
Các hoạt động các nét đặc sắc
Hướng dẫn cách lựa chọn phương tiện di chuyển
Các lưu ý khi tham gia lễ hội
Thông tin chủ quyền biển đảo Viêt Nam
Hình ảnh Bình luận
Chia sẻ
Nội dung
Chia sẻ qua Facebook Chia sẻ qua Zalo
Lễ Hội Nghinh Ông Trang chủ
Các lễ hội
Lễ hội Nghinh Ông Sông Đốc, Cà Mau
Địa điểm Thời gian
Lịch sử lễ hội
Các hoạt động các nét đặc sắc
Hướng dẫn cách lựa chọn phương tiện di chuyển
Các lưu ý khi tham gia lễ hội
Thông tin chủ quyền biển đảo Viêt Nam
Hình ảnh Bình luận Nội dung 27
Chia sẻ
Chia sẻ qua Facebook Chia sẻ qua Zalo
05
DESIGN SYSEM . Màu-Phông chữ . Kích thước chữ . UI Element
28
29 30 31
Màu-Phông chữ
Design System Màu
Phông chữ
SFU Fenice
Aa
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!?
Roboto
Aa
Light
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!? Bold
Aa
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!? Extra Bold
Aa
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!?
29
Kích thước chữ
Design System
Headline
SFU Fenice 130px
Subhead 1
Heading
Roboto Bold 90px
Subhead 2
Roboto Bold 35px
Roboto Bold 19px
Subhead 3 Roboto Light 19px
Body 2
Body 1 Roboto Light Italic14px
Roboto Light 16px Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
30
UI Element
Design System
Form Email hongantran1410@gmail.com Tên Trần Hồng Ân Nhập lại mật khẩu Nhập lại mật khẩu
Button
31
UI Element
Design System
Popup
Gửi tin nhắn thành công. Chúng mình sẽ phản hồi trong vòng 24h tiếp theo.
Vui lòng kiểm tra email và nhấp vào đường dẫn đính kèm để lấy lại mật khẩu.
Đăng nhập thành công
Box
32
33
06
WIREFRAME . Phát thảo . Hoàn thiện Wiireframe
34
35 36
Phát thảo Wireframe
Wireframe
35
Hoàn thiện Wireframe
Wireframe
TRANG MỞ ĐẦU
VIDEO
ĐĂNG NHẬP
ĐĂNG NHẬP THÀNH CÔNG
ĐĂNG KÝ
36
Hoàn thiện Wireframe
Wireframe
ĐĂNG KÝ THÀNH CÔNG
QUÊN MẬT KHẨU
THÔNG BÁO MẬT KHẨU
KHÔI PHỤC MẬT KHẨU
GỬI TIN NHẮN THÀNH CÔNG
37
Hoàn thiện Wireframe
Wireframe Thông báo mật khẩu
Giới thiệu
LIÊN HỆ
LIÊN HỆ
38
Hoàn thiện Wireframe
Wireframe
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
39
Hoàn thiện Wireframe
Wireframe
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
40
Hoàn thiện Wireframe
Wireframe
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
41
Hoàn thiện Wireframe
Wireframe
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
42
43
07
LAYOUT . Hoàn thiện . Hình minh họa
44
45 54
Hoàn thiện Layout
Layout
TRANG MỞ ĐẦU
VIDEO
ĐĂNG NHẬP
ĐĂNG NHẬP THÀNH CÔNG
ĐĂNG KÝ
45
Hoàn thiện Layout
Layout
ĐĂNG KÝ THÀNH CÔNG
QUÊN MẬT KHẨU
THÔNG BÁO MẬT KHẨU
KHÔI PHỤC MẬT KHẨU
GỬI TIN NHẮN THÀNH CÔNG
46
Hoàn thiện Layout
Layout
THÔNG BÁO MẬT KHẨU
GIỚI THIỆU
LIÊN HỆ
LIÊN HỆ
47
Hoàn thiện Layout
Layout
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
48
Hoàn thiện Layout
Layout
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
49
Hoàn thiện Layout
Layout
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
50
Hoàn thiện Layout
Layout
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
51
Hoàn thiện Layout
Layout
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
52
Hoàn thiện Layout
Layout
THÔNG TIN VỀ LỄ HỘI
THÔNG TIN VỀ LỄ HỘI
53
Hình minh họa
Layout
MINH HỌA LỄ HỘI ĐỀN PHÚC
54
Hình minh họa
Layout
MINH HỌA LỄ HỘI ĐUA THUYỀN
55
Hình minh họa
Layout
MINH HỌA LỄ HỘI CẦU NGƯ
56
Hình minh họa
Layout
MINH HỌA LỄ HỘI NGHINH ÔNG
57
08
PROTOTYPE
58
Prototype
58 59
Prototype
60
Prototype
61
Prototype
62
Prototype
63
09
TVC
64
TVC
65
TVC
66
67
10
ẤN PHẨM
68
ẤN Phẩm
69
ẤN Phẩm
70
ẤN Phẩm
71
ẤN Phẩm
72
ẤN Phẩm
73
Đây là kết thúc của cuốn sách này! Cảm ơn các bạn đã đồng hành cùng tụi mình xuyên suốt cuốn sách này. Chúc các bạn một ngày tốt lành!
74
75
76