TR ANG 1
W E BS I T E
G U I D E L I N E
Thực hiện: Nhựt Trường x Nguyên Nhất
TR ANG 3
WEBSITE PROJECT
Mr. Phan Nhật Trung Giáo viên hướng dẫn
Nguyễn Nhựt Trường Thiết kế UI/UX & lập trình Web
Võ Nguyên Nhất
Minh họa/Photo Manipulation
Mục lục Một.
Giới thiệu đề tài
Hai. 07
Bộ nhận diện Web
12
Lý do chọn đề tài
08
Logo
13
Mục tiêu
08
Các nguyên tắc sử dụng Logo
16
Giải pháp
08
Màu sắc
22
Kết quả khảo sát
09
Typography
23
Năm.
Wireframes
Sáu. 35
Layout Design
42
Sketch
36
Hệ thống hình minh họa
44
Wireframes hoàn chỉnh
37
Hệ thống Icon
48
Layout hoàn chỉnh
49
TR ANG 5
Ba.
Sitemap & Userflow
Bốn. 25
Style Guide
30
Phát thảo Sitemap
26
Quy chuẩn kích thước chữ
32
Phát thảo Userflow
27
Các nút bấm
33
Sitemap hoàn chỉnh
28
Userflow hoàn chỉnh
29
Bảy. Prototypes
Prototypes hoàn chỉnh
Tám. 56 58
TVC Quảng bá
60
Styleframe
62
Final clip
64
TR ANG 7
— MỘT
Giớ i thiệu đề tài Lý do chọn đề tài Mục tiêu Giải pháp Kết quả khảo sát
—— GIỚI THIỆ U ĐỀ TÀI
Lý do chọn đề tài Quần thể danh thắng Tràng An, Ninh Bình là một vùng du lịch tổng hợp dược UNESCO công nhận là Di sản Văn hóa & Thiên nhiên Thế giới (năm 2014). Đây là duy sản thế giới kép đầu tiên và duy nhất tại Việt Nam và Đông Nam Á. Tuy nhiên, giá trị to lớn này của Tràng An chưa được nhiều bạn trẻ và đại chúng biết đến. Các hình thức quảng bá du lịch Tràng An trên các website hiện có còn chưa đẹp, chưa xứng tầm một Di sản thế giới. Nhận thấy được vấn đề này, nhóm sinh viên chúng tôi quyết định chọn Tràng An làm để tài để phát triển website du lịch.
——
Mục tiêu
1. Phát triển Website với giao diện hiện đại, tinh tế và có tính thẩm mỹ cao. 2. Cung cấp hình ảnh những thông tin hữu ích về các điểm đến du lịch. 3. Cung cấp thông tin về các tour du lịch từ các công ty du lịch, dẫn người dùng đến trang thông tin chi tiết và booking của các đơn vị đối tác này. 4. Từ đó, góp phần quảng bá, thúc đẩy phát triển du lịch Tràng An.
——
Đối tượ ng người dùng 1. Người yêu thích, có nhu cầu du lịch nhưng chưa có kế hoạch cụ thể. 2. Người muốn tìm hiểu chi tiết về thiên nhiên và văn hóa Tràng An.
——
TR ANG 9
Kết quả khảo sát Để tìm hiểu rõ hơn về nhu cầu và thị hiếu sử dụng website du lịch, chúng tôi đã thực hiện một cuộc khảo sát nho nhỏ với hơn 100 người tham gia khảo sát.
Đối tượng khảo sát
Giới tính
Sở thích du lịch
Nam Nữ
Có Không
Độ tuổi
41% Thỉnh thoảng đến thường xuyên du lịch
Tần suất du lịch
Dưới 18 Từ 18 - 30 Từ 30 - 45 Trên 45
(Từ thấp đến cao)
Nhu cầu và thị hiếu sử dụng website du lịch
85%
Thường xuyên hay luôn luôn tham khảo các website du lịch trước khi quyết định điểm đến.
96%
Nhận định một website đẹp mắt, cuốn hút có ảnh hưởng tích cực tới cảm nhận nhận chung về một địa điểm du lịch
91%
Cho việc phát triển một website du lịch chuyên nghiệp cho Tràng An là cần thiết.
Về du lịch Tràng An
Điểm đặt trưng nhất Thiên nhiên kì vĩ Nét văn hóa cổ kính Giá trị tâm linh Giá trị lịch sử
——
Có thể thấy, nhu cầu phải triển một website chuyên nghiệp cho Quần thể Danh thắng Tràng An là rất cần thiết.
TR ANG 11
— HAI
Hệ thống nhận diện Website Logo Các nguyên tắc sử dụng Logo Màu sắc Typography
—— LOGO
TR ANG 13
Cảm hứ ng chủ đạo
Núi non hùng vĩ, trùng điệp
Nét văn hóa cổ kính
Đặc trưng sông nước
—— LOGO
Ý tưởng Logo +
+
+
Núi non ẩn hiện sau
Kiến trúc mang nét
Nét vẽ tối giản
Nét thanh đậm của
hình dáng các kỹ tự
văn hóa cổ kính
hình ảnh sông nước
văn hóa phương đông
=
——
Phác thảo Logo
TR ANG 1 5
—— LOGO
Hệ thống lướ i & vùng an toàn x tiêu chuẩn & vùng an toàn Logo x
x
x
x
x
x Wordmark & vùng an toàn x
x
x
x x
x
——
Trường hợ p ngoại lệ Logo kết hợp tagline hoặc caption
——
Kích thướ c tối thiểu Chiều cao: 60px / 1cm khi in ấn
TR ANG 1 7
—— LOGO
Màu sắc Logo
Green #16613A
Black #16613A
White #FFFFFF
——
Logo trên nền tương phản
TR ANG 19
1. Trong quá trình sử dụng, cần đảm bảo độ tương phản tối thiểu tương đương 2 ví dụ dưới đây:
2. Khi sử dụng logo trên nền ảnh, luôn thêm một layer Black Solid #000000 45% Opacity để tạo đủ độ tương phản giữa logo với nền. Tránh các trường hợp dùng sai như sau:
—— LOGO
Các trường hợ p dùng sai Trong bất kì trường hợp, tuyệt đối không được sử dụng logo sai quy cách tương tự các ví dụ sau đây:
Outline logo
Thêm drop shadow
Xoay logo
Thay đổi tỉ lệ logo
Làm nghiêng logo
Thêm hiệu ứng đặc biệt
Thay đổi khoảng cách
Đổ gradient
Sử dụng logo làm mask
Thêm element khác
Dùng màu ngoài quy chuẩn
các thành phần
Dùng sai tương phản
TR ANG 2 1
—— HỆ THỐNG NHẬN DIỆ N
Hệ thống màu sắc Theo khảo sát của chúng tôi khi nhắc tới Tràng An, đa số đối tượng nghĩ ngay đến "thiên nhiên kì vĩ" (61%), tiếp theo đó là "nét văn hóa cổ kính" (27%). Chính vì thế, chúng tôi quyết định lựa chọn màu xanh thiên nhiên kết hợp với màu cam đất, màu mái ngói để tôn vinh nét văn hóa - với xanh là màu chủ đạo và cam là tông màu điểm xuyết.
NATURE GREEN
CULTURE
DARK GREY
ORANGE
#16613A
#B4523B
#333333
—— HỆ THỐNG NHẬN DIỆ N
Hệ thống Typography Để hòa hợp với nét thanh đậm & các kí tự serif của logo, Boiling (một serif typeface) được sử dụng chủ yếu với vai trò Headline tạo điểm nhấn. Bên cạnh đó là Okta Neue, một sans-serif typeface hiện đại giúp trung hòa lại tổng thể thiết kế, mang lại cảm giác mới mẻ, chuyên nghiệp. Hệ thống phân cấp thông tin Typography sẽ được nêu rõ ở mục Bốn. Style Guide.
Boiling A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0
Okta Neue A BC D E FG H I JK L M N O PQ R S T U V W X Y Z a b cdefg h i j k l m no p q rstu v w x yz 12 3 4 5 6789 0
TR ANG 2 3
TR ANG 2 5
— BA
Sitemap & Userflow Phát thảo Sitemap
Phát thảo Userflow Sitemap hoàn chỉnh Userflow hoàn chỉnh
——
Phát thảo Sitemap
——
Phát thảo Userflow
TR ANG 2 7
—— SITEMAP & USE R F LOW
Sitemap hoàn chỉnh Trang chủ
Giới thiệu
Inforgraphic
Điểm đến
Tour
Thiên nhiên
Các tour
Văn hóa
Trang book tour của các đối tác du lịch
Tâm linh
Lịch sử
Các bài viết
Liên hệ
——
TR ANG 2 9
Userflow hoàn chỉnh Trang chủ
Giới thiệu
Điểm đến
Chia sẻ
Thiên nhiên
Bài viết
Chia sẻ
Văn hóa
Bài viết
Chia sẻ
Book tour tại trang web của đối tác
Tâm linh
Bài viết
Chia sẻ
Tour
Lịch sử
Bài viết
Chia sẻ
Liên hệ
Gửi ý kiến đóng góp
— BỐN
Style Guide
Quy chuẩn kích thước chữ Các nút bấm
TR ANG 3 1
—— S T YLE GUIDE
Quy chuẩn kích thướ c chữ
——
TR ANG 33
Các nút bấm Default
Hover
Active
ME N U
MENU
ME NU
Trường nhập liệu Nhập tên
TR ANG 3 5
— NĂM
Wireframes Phát thảo
Wireframes hoàn chỉnh
—— WIR E F R AME S
Phát thảo
——
Wireframes hoàn chỉnh
TR ANG 37
——
——
TR ANG 39
——
——
TR ANG 4 1
— SÁU
Layout Design
Hệ thống hình minh họa Hệ thống Icon Layout hoàn chỉnh
TR ANG 4 3
—— L AYOUT DE SIG N
Hệ thống hình minh họa
——
TR ANG 4 5
——
——
TR ANG 47
——
—— L AYOUT DE SIG N
Hệ thống Icon
TR ANG 49
——
Layout Design
——
TR ANG 5 1
——
——
TR ANG 5 3
——
TR ANG 5 5
— BẢY
Prototype
Prototype hoàn chỉnh
TR ANG 57
—— PROTOT YPE
Prototype hoàn chỉnh
on scroll on click
TR ANG 59
— TÁM
TVC Quảng bá
Storyboards Final clip
TR ANG 61
—— PROTOT YPE
Storyboards
TR ANG 6 3
Website Showcase
—— PROTOT YPE
Final Clip
Mời bạn click hoặc scan mã QR bên cạnh để xem TVC quảng bá Website Quần thể Danh thắng Tràng An.
TR ANG 6 5
— C HÍN
Hình ảnh quảng bá Hình ảnh website thực tế.
—— HÌNH ẢNH QUẢNG BÁ
TR ANG 67
—— HÌNH ẢNH QUẢNG BÁ
TR ANG 69
Cám ơn bạn đã theo dõi! Mời bạn truy cập trangandanhthang.github.io để trải nghiệm website.