Mùa Biển - Web Design Guilde

Page 1

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

Email

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.