Giới thiệu
Bản Sắc Việt Nam được thành lập bởi Hueaholic - Đội ngũ những người trẻ đi tìm những giá trị văn hóa âm nhạc dân gian với mong muốn mang đến sự yêu thích cho giới trẻ trong việc tìm hiểu về cội nguồn văn hóa. Với mục đích truyền đạt kiến thức, Bản Sắc Việt Nam sẽ mang đến một trải nghiệm sống động, trẻ trung, năng động với những hình minh họa có phong cách độc đáo cùng những gam màu ấn tượng. 6 loại hình văn hóa sẽ được sắp xếp rõ ràng, dễ hiểu nhưng không kém phần logic, đem lại hưng khởi đến cho người dùng có thêm niềm đam mê đối với nền văn hóa dân gian.
Mai Trần Anh Thi
Nguyễn Ngọc Hào
Đàm Hà Yên Thảo
Graphic Designer
Graphic Designer
Graphic Designer
Illustration Wireframe Logo TVC
Illustration Wireframe Site map Layout book TVC
Illustration Userflow TVC Content
01
MỤC LỤC
02
KHẢO SÁT
03
LOGO
Lí do chọn đề tài
04
Kết quả khảo sát
06
04
SITE MAP
USERFLOW
Ý nghĩa
11
Phác thảo
21
Phác thảo
24
Phát thảo
12
Hoàn thiện Sitemap
22
Hoàn thiện Userflow
25
Hệ thống lưới
13
Logo
14
Quy định màu sắc
16
Cách sử dụng
18
Kích thước tối thiểu
19
05
STYLE GUIDE
06
07
WIREFRAME
LAYOUT
Phông chữ
31
Phác thảo
36
Layout hoàn thiện
43
Cỡ chữ
32
Hoàn thiện Wireframe
37
Hình minh họa
49
Button - Icon
33
Input
34
08
09
PROTOTYPE Prototype
10
TVC 60
ẤN PHẨM
Storyboard
65
Mockup Web
Phân cảnh TVC
66
Mockup sản phẩm
01 KHẢO SÁT Lí do chọn đề tài
04
Kết quả khảo sát
06
Khảo sát
Lí do chọn đề tài
LÝ DO CHỌN ĐỀ TÀI? Hiện nay, có rất nhiều nét văn hóa đặc trưng của Việt Nam đang ngày càng bị lãng quên bởi những nét văn hóa du nhập từ các nước khác và các bạn trẻ có kiến thức,hiểu rất rõ những đặc điểm văn hóa nước bạn mà quên đi mất nền văn hóa đất nước Việt Nam ta cũng vô cùng đa dạng, thú vị không kém. Vì thế, để giúp mọi người biết thêm những nét văn hóa độc đáo đó. Chúng mình đã quyết định chọn ngay chủ đề này để làm đồ án môn Thiết kế Web.
GIẢI PHÁP - Thông tin được chắt lọc từ nhiều nguồn. - Bán thêm những ấn phẩm giúp quảng bá trang rộng rãi đến nhiều người biết và duy trì trang. - Sử dụng hình ảnh minh họa kết hợp chuyển động làm cho trang web trở nên sinh động tạo hứng thú cho người truy cập.
6
MỤC TIÊU Mục tiêu của website Bản Sắc Việt Nam là trở thành một trang cung cấp thông tin về những nét văn hóa đặc trưng của Việt Nam bằng những hình ảnh minh họa động hiện đại giúp cho người truy cập có thêm kiến thức đầy đủ nhất có thể. Đồng thời, trang web cũng cho bán một số những ấn phẩm của Bản Sắc Việt Nam để quảng cáo rộng rãi trang cho nhiều người được biết hơn.
Tiêu đề
Đề mục
7
Khảo sát
8
Kết quả khảo sát
Khảo sát
Kết quả khảo sát
KẾT QUẢ KHẢO SÁT - Đối tượng truy cập vào trang đa số là: Sinh viên (Độ tuổi từ 20-30 tuổi). - Khả năng nhận biết các loại nghê thuật của nước ta: Mức độ trung bình. - Những nét văn hoa ít người biết đến cần được quảng bá: Hát then, Chèo, Dân ca Quan họ. - Việc có một trang web tổng hợp những nét văn hóa tiêu biểu của Việt Nam: Sẽ được nhiều người ủng hộ. - Những thông tin người truy cập muốn biết khi đến với web: Nguồn gốc, Đặc điểm của từng loại hình, Lịch sử. - Những sản phẩm khiến người truy cập có khả năng chi tiền khi đến với web: Túi tote, Sách, Ốp điện thoại
9
02 LOGO Ý nghĩa logo
11
Phác thảo ý tưởng
12
Thành phần logo
13
Hệ thống lưới & vùng an toàn
14
Cách sử dụng logo
16
Quy định màu sắc
18
Kích thước tối thiểu
19
Tiêu đề
12
Đề Tiêu mục đề
Logo
Ý nghĩa logo
Logo được lấy cảm hứng từ ngọn lửa kết hợp với phông chữ hiện đại mới mẻ thể hiện cho sự nhiệt huyết, máu lửa của tuổi trẻ trong việc duy trì, tiếp nối kế thừa những truyền thống văn hóa nghệ thuật của ông cha ta đã dày công sáng tạo, phát triển cho đến ngày nay. Giúp chúng ngày càng trở nên phổ biến và không bị mai một bởi những nền nghệ thuật đến từ các nền văn hóa khác.
13
Logo
14
Phรกc thแบฃo logo
Logo
Thành phần logo
LOGO MARK
WORD MARK
15
Logo
16
Hệ thống lưới & vùng an toàn
Logo
Hệ thống lưới & vùng an toàn
PRIMARY LOGO
SECONDARY LOGO
17
Logo
Cách sử dụng logo
NGUYÊN TẮC SỬ DỤNG LOGO TRÊN NỀN TƯƠNG PHẢN
18
Logo
Cách sử dụng logo
CÁC TRƯỜNG HỢP SỬ DỤNG SAI
19
Logo
Quy định màu sắc
LOGO TRẮNG TRÊN NỀN VÀNG
LOGO VÀNG TRÊN NỀN TRẮNG
LOGO VÀNG TRÊN NỀN XANH ĐEN
20
Logo
Kích thước tối thiểu
18 mm 120 px
Kích thước tối thiểu của logo khi đem đi in ấn chiều cao không được thấp hơn 18 mm. Kích thước tối thiểu khi hiển thị trên màn hình là 120 px.
21
03 SITE MAP Phác thảo
21
Hoàn thiện Site map
22
Site map
Phรกc thแบฃo Site map
23
Site map
Hoàn thiện Site map
Then Video Chèo
Thanh toán & giao hàng
24
04 USERFLOW Phác thảo
24
Hoàn thiện Userflow
25
Userflow
26
Phรกc thแบฃo Userflow
Userflow
Hoàn thiện - Trang chủ
MÚA RỐI NƯỚC Video
Facebook Instagram
Hình thành
HÁT THEN Video Then
Facebook Instagram
Hình thành
27
Userflow
Hoàn thiện - Trang chủ
TUỒNG Video
Facebook Instagram
Hình thành
DÂN CA QUAN HỌ BẮC NINH Video
Facebook Instagram
Hình thành
28
Userflow
Hoàn thiện - Trang chủ
NHÃ NHẠC CUNG ĐÌNH HUẾ Video
Facebook Instagram
Hình thành
CHÈO Video Chèo
Facebook Instagram
Hình thành
29
Userflow
Hoàn thiện - Mua hàng, Theo dõi đơn hàng
MUA HÀNG
Thanh toán Thành công
Facebook Instagram
THEO DÕI ĐƠN HÀNG
30
Mua hàng thành công
Userflow
Hoàn thiện - Đăng kí/đăng nhập, Tìm kiếm
ĐĂNG KÍ/ ĐĂNG NHẬP
Sai
TÌM KIẾM
31
05 STYLE GUIDE Phông chữ
31
Cỡ chữ
32
Button - Icon
33
Input
34
Style guide
Phông chữ
FS Bella
Aa
abcdefghijmnopqrstuvxwyz ABCDEFGHIJMNOPQRSTUVXWYZ 1234567890!?
Iciel Samsung Sans Sharp
Aa Aa Aa
Regular
abcdefghijmnopqrstuvxwyz ABCDEFGHIJMNOPQRSTUVXWYZ 1234567890 Medium
abcdefghijmnopqrstuvxwyz ABCDEFGHIJMNOPQRSTUVXWYZ 1234567890 Bold
abcdefghijmnopqrstuvxwyz ABCDEFGHIJMNOPQRSTUVXWYZ 1234567890
33
Style guide
Cỡ chữ
CỠ CHỮ
FS Bella
Iciel Samsung Sans Sharp
Headline 1
Heading 5
Headline 2
Heading 6
Headline 3
Heading 7
Headline 4
Heading 8
FS Bella 20px
Iciel Samsung Sans Sharp Bold - 24px
Subtitle
Subhead 1
FS Bella 68px
FS Bella 40px
FS Bella 33px
34
Iciel Samsung Sans Sharp Bold - 30px
Iciel Samsung Sans Sharp Bold - 28px
Iciel Samsung Sans Sharp Bold - 26px
Iciel Samsung Sans Sharp Medium - 20px
Iciel Samsung Sans Sharp Medium - 18px
Underline
Subhead 2
Iciel Samsung Sans Sharp Medium - 16px
Iciel Samsung Sans Sharp Bold - 18px
Body 1
Body 2
Iciel Samsung Sans Sharp Regular - 20px
Iciel Samsung Sans Sharp Regular - 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
Style guide
Button - icon
ICON
STYLING
CHECKBOX Khi chưa tick vào checkbox Khi đã tick vào checkbox
BUTTON
35
Style guide
input
INPUT Nhập thông tin đăng nhập
36
Nhập thông tin đăng ký
Nhập thông tin tài khoản
Nhập thông tin thay đổi mật khẩu
Tìm kiếm thông tin
Điền ghi chú đơn hàng
06 02 WIREFRAME SITE MAP Phác thảo Wireframe
Phác thảo
36
01
Hoàn thiện Wireframe
Hoàn thiện Site map
37
02
Wireframe
38
Sketch
Wireframe
Hoàn thiện Wireframe
TRANG CHỦ
CÁC THỂ LOẠI TRÊN TRANG CHỦ
39
Wireframe
NGUỒN GỐC THỂ LOẠI
VIDEO THỂ LOẠI
PHÂN LOẠI THỂ LOẠI
40
Hoàn thiện Wireframe
NỘI DUNG THỂ LOẠI
Wireframe
Hoàn thiện Wireframe
ĐĂNG NHẬP
ĐĂNG KÍ
CỬA HÀNG
THÔNG TIN SẢN PHẨM
41
Wireframe
Hoàn thiện Wireframe
TÀI KHOẢN
THÔNG TIN TÀI KHOẢN
THANH TOÁN
DANH SÁCH SẢN PHẨM
42
Wireframe
CHI TIẾT ĐƠN HÀNG
LIÊN HỆ
Hoàn thiện Wireframe
ĐƠN HÀNG CỦA TÔI
TÌM KIẾM
43
07 LAYOUT Layout hoàn thiện
43
Hình minh họa
49
Layout
Hoàn thiện layout
TRANG CHỦ
CÁC THỂ LOẠI TRÊN TRANG CHỦ
45
Layout
NGUỒN GỐC THỂ LOẠI
VIDEO THỂ LOẠI
PHÂN LOẠI THỂ LOẠI
46
Hoàn thiện layout
NỘI DUNG THỂ LOẠI
Layout
Hoàn thiện layout
CỬA HÀNG
47
Layout
Hoàn thiện layout
THÔNG TIN SẢN PHẨM
THANH TOÁN
DANH SÁCH SẢN PHẨM
48
Layout
TÀI KHOẢN
Hoàn thiện layout
THÔNG TIN TÀI KHOẢN
CHI TIẾT ĐƠN HÀNG
49
Layout
Hoàn thiện layout
LIÊN HỆ
TÌM KIẾM
50
Layout
Hình minh họa
MINH HỌA THỂ LOẠI TUỒNG TUỒNG
Tuồng, luông tuồng, hát bộ, hát bội là những cách gọi một loại hình nhạc kịch thịnh hành tại Việt Nam bắt nguồn từ kinh kịch Trung Hoa.
51
Layout
Hình minh họa
MINH HỌA THỂ LOẠI MÚA RỐI NƯỚC MÚA RỐI NƯỚC
52
Múa rối có ở nhiều quốc gia trên thế giới, nhưng múa rối nước thì chỉ duy nhất có ở Việt Nam. Múa rối nước đã được UNESCO công nhận là di sản văn hóa thế giới.
Layout
Hình minh họa
MINH HỌA THỂ LOẠI DÂN CA QUAN HỌ DÂN CA QUAN HỌ
Dân ca Quan họ là một trong những làn điệu dân ca tiêu biểu của vùng châu thổ sông Hồng ở miền Bắc Việt Nam.. Dân ca quan họ đã được ghi danh là di sản văn hóa phi vật thể đại diện của nhân loại.
53
Layout
Hình minh họa
MINH HỌA THỂ LOẠI HÁT CHÈO HÁT CHÈO
54
Chèo là loại hình nghệ thuật sân khấu cổ truyền Việt Nam. Chèo phát triển mạnh ở phía bắc Việt. Loại hình sân khấu này phát triển cao, giàu tính dân tộc.
Layout
Hình minh họa
MINH HỌA THỂ LOẠI NHÃ NHẠC CUNG ĐÌNH HUẾ NHÃ NHẠC CUNG ĐÌNH HUẾ
Nhã nhạc cung đình Huế là thể loại nhạc của cung đình thời phong kiến, được biểu diễn vào các dịp lễ hội. Đây là di sản phi vật thể của Việt Nam đã được UNESCO chính thức ghi danh.
55
Layout
Hình minh họa
MINH HỌA THỂ LOẠI HÁT THEN HÁT THEN
56
Hát then là một thể loại dân ca tín ngưỡng của cộng đồng người Choang, dân tộc Tày, Nùng. Mang trường ca, mang màu sắc tín ngưỡng thuật lại cuộc hành trình lên thiên giới để cầu xin Ngọc hoàng giải quyết một vấn đề gì đó cho gia chủ.
Layout
Hình minh họa
MINH HỌA TRANG CHỦ
57
Layout
HOA VĂN MINH HỌA RỒNG VÀ CÁ TRONG HỒ SEN
58
Hình minh họa
Layout
Hình minh họa
59
08 PROTOTYPE Prototype
60
Tiêu đề
Đề mục
61
Prototype
62
Prototype
63
Prototype
64
Prototype
65
09 TVC Storyboard
65
Phân cảnh TVC
66
TVC
Storyboard
67
TVC
PHÂN CẢNH TVC
68
Phân cảnh TVC
TVC
Phân cảnh TVC
69
10 ẤN PHẨM Mockup Website Mockup sản phẩm
Tiêu đề
Đề mục
71
Tiêu đề
72
Đề mục
Tiêu đề
Đề mục
73
Tiêu đề
74
Đề mục
Tiêu đề
Đề mục
75
Tiêu đề
76
Đề mục
Tiêu đề
Đề mục
77
Tiêu đề
78
Đề mục
Tiêu đề
Đề mục
79
Tiêu đề
80
Đề mục
Tiêu đề
Đề mục
81
Tiêu đề
Đề mục
Vậy là bạn đã đi đến những trang cuối cùng của cuốn sách này. Cảm ơn sự kiên nhẫn của các bạn. Mọi ý kiến thắc mắc xin vui lòng liên hệ chúng mình. Chúc các ban thật nhiều sức khoẻ và thành công.
82
Tiêu đề
Đề mục
83
Tiêu đề
84
Đề mục