Trang An World Heritage Website Report

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.

TR ANG 7 1