Cuộc sống đến từ lối nhỏ
Giới thiệu
Phan Nhật Trung Instructor
Dương Quyền Đức
Nguyễn Đức Chính
Photographer
Site Map
Logo
User Flow
Research
Wire Frame
Design System
Style Guide
TVC Mockup
Layout Prototype 3
Mục lục
01.
02.
03.
Lý do chọn đề tài
Ý nghĩa Logo
Phác thảo ý tưởng
Kết quả khảo sát
Phác thảo ý tưởng
Hoàn thiện Site map
Research
Logo
Site Map
Thành phần Logo Hệ thống lưới & Vùng an toàn Cách sử dụng Logo Quy định màu sắc Kích thước tối thiểu
04.
05.
Phác thảo ý tưởng
Phông chữ
Hoàn thiện Userflow
Cỡ chữ
Userflow
Design System Button & Icon Input
4
06.
07.
Phác thảo ý tưởng
Layout hoàn thiện
Wireframe
Layout
Hoàn thiện Wireframe
08.
09.
10.
Prototype
Storyboard
Mockup web
Prototype
TVC
Mockup
Phân cảnh TVC
5
01. Research Lý do chọn đề tài Kết quả khảo sát
6
7
Sắc Hẻm
01. Research
Lý do chọn đề tài Hiện nay, du lịch đang là một ngành dịch vụ đang có xu hướng phát triển và rất tiềm năng. Thành phố Hồ Chí Minh nổi tiếng với những con đường, quận hay một khu vực nào đấy. Bên cạnh đó, chúng ta cũng không thể nào quên được hình ảnh của các con hẻm, những lối nhỏ, ở xung quanh những nơi nhộn nhịp của thành phố. Hẻm là nơi chứa nhiều kỷ niệm, giá trị văn hóa cũng như là bản sắc của con người nơi đây.
Mục tiêu Mục tiêu của Website Sắc Hẻm là phát triển hơn về du lịch ở các con hẻm tại Thành phố Hồ Chí Minh. Mang các giá trị về văn hóa, bản sắc địa phương đến với khách du lịch trong nước cũng như là khách du lịch người ngoài đến. Cung cấp thông tin về ẩm thực, đời sống, lịch sử,... và phổ biến rộng rãi vị trí của những con hẻm tiếp cận nhiều hơn với mọi người.
Giải pháp Cung cấp những thông tin cần thiết theo nhu cầu của mọi người bao gồm: ẩm thực, đời sống, văn hóa,... Hình ảnh được sử dụng màu sắc hài hòa phù hợp với mọi lứa tuổi khi tiếp cận mang đến sự thân thiện gần gũi. 8
Sắc Hẻm
01. Research
Khảo sát Bạn thuộc nhóm tuổi nào?
Bạn có thích du lịch khám phá không? Dưới 18
Không
Từ 18 - 24
Có
Từ 24 -30
Có chút ít
Công việc hiện tại của bạn?
Bạn có thích tìm hiểu về các con hẻm ở Thành phố Hồ Chí Minh không? Nhân viên văn phòng Học sinh sinh viên
Không
Làm việc tự do
Có Có chút ít
Bạn đến từ đâu? Đồng Nai TP. Hồ Chí Minh Bình Dương
Bạn thích trải nghiệm website với giao diện như thế nào? Khác Hiện đại Đơn giản
9
Sắc Hẻm
01. Research
Bạn biết những con hẻm ở
Đối với website có các thông tin về hẻm thì bạn
Thành phố Hồ Chí Minh nào dưới đây?
muốn tiếp nhận những nội dung nào?
Bạn biết đến những con hẻm đó vì điều gì?
Website sẽ có trải nghiệm tuyệt vời nếu như?
Kết quả khảo sát
Những con hẻm được biết nhiều nhất: 200 Xóm
Đối tượng truy cập vào website đa số là: Học sinh,
người Hoa,...
Sinh viên ( Độ tuổi từ 18 - 24 tuổi).
Nhu cầu truy cập vào website đa số là: Tìm hiểu về
Người truy cập sinh sống ở: Thành phố Hồ Chí Minh
ẩm thực.
là chủ yếu.
Người truy cập mong muốn vào website với nhu
Người truy cập có tính cách đa số: Thích du lịch
cầu đa số là: Giao diện dễ dùng và thông tin đầy
khám phá và tìm hiểu về các con hẻm.
đủ đến từ các con hẻm.
10
Chiếu, 76 Hai Bà Trưng, 14 Trần Bình Trọng, Hẻm
11
02. Logo Ý nghĩa Logo Phác thảo ý tưởng Thành phần Logo Hệ thống lưới & Vùng an toàn Cách sử dụng Logo Quy định màu sắc
12
13
Sắc Hẻm
02. Logo
Ý nghĩa
Logo
Logo được hình thành bởi 2 chữ cái tắt của tên Sắc hẻm là S và H. Tạo nên một không gian của một khu vực đầy màu sắc. Bên cạnh là có một số chổ bị khuất đó chính là ý nghĩa nói lên rằng, tuy là ở thành thị thành phố nhộn nhịp nhưng cũng không thể nào thiếu được những điều nhỏ nhất là cuộc sống ở các con hẻm.
Logo được phác thảo theo phối cảnh 2 điểm tụ tạo nên cảm giác đa diện và nhiều góc độ. Mang đến một chiều sâu không gian cùng phối với tone màu gradient. Màu sắc vừa hiện đại vừa cổ điển.
Icon thể hiện sự hiện đại kết hợp cùng với sự đơn điệu của text giúp liên tưởng tới sự cổ điển truyền thống của nét văn hóa.
14
Sắc Hẻm
02. Logo
Phác thảo ý tưởng
15
Sắc Hẻm
02. Logo
Thành phần Logo
LOGO MARK
Hệ thống lưới & vùng an toàn
16
WORD MARK
Sắc Hẻm
02. Logo
Cách sử dụng Logo
CÁC TRƯỜNG HỢP SỬ DỤNG LOGO SAI
17
Sắc Hẻm
02. Logo
Cách sử dụng Logo
NGUYÊN TẮC SỬ DỤNG LOGO TRÊN NỀN TƯƠNG PHẢN
18
Sắc Hẻm
02. Logo
Quy định màu sắc HEX: #00aeef R: 0 G: 174 B: 239 C: 69% M: 14% W: 0% K: 0% HEX: #457bd2 R: 69 G: 123 B: 210 C: 70% M: 50% W: 0% K: 0% HEX: #ec008c R: 236 G: 0 B: 140 C: 1% M: 99% W: 0% K: 0% HEX: #874ab6 R: 236 G: 0 B: 140 C: 58% M: 80% W: 0% K: 0%
Kích thước tối thiểu
Kích thước logo khi in ấn không thấp hơn 50mm. 50 mm 100 px
Kích thước tối thiểu khi hiển thị trên màn hình là 100px.
19
03. Site Map Phác thảo ý tưởng Hoàn thiện Site Map
20
21
Sắc Hẻm
03. Site Map
Trang chủ
Tin mới nhất
Đời sống
Hình ảnh
Tin hot tuần
Tin hot tháng
Nội dung
Giới thiệu
Hình ảnh
Xuất xứ
Ẩm thực
Phân loại
Đặc điểm
Đăng kí Đăng nhập
Liên hệ
Tìm kiếm 22
Tài khoản
Thông tin tài khoản
23
04. Userflow Phác thảo ý tưởng Hoàn thiện Userflow
24
25
Sắc Hẻm
04. Userflow
Trang chủ Video Trang chủ
Tin tức mới
Chia sẻ Nội dung
Instagram Chủ đề Hình ảnh Bài viết Bình luận
Đời sống Tin mới nhất Trang chủ
Đời sống
Tin hot tuần Tin hot tháng
Video Chia sẻ
Nội dung Chủ đề Hình ảnh Bài viết Bình luận
26
Sắc Hẻm
04. Userflow
Ẩm thực Phân loại Trang chủ
Hình ảnh
Ẩm thực
Chia sẻ Nguồn gốc
Nội dung
Đánh giá
Hình thành
Giá cả
Địa điểm Trở về
Tìm kiếm Trở về
Không tìm thấy
Hiển thị thông báo
Tìm thấy
Dẫn đến trang tìm kiếm
Bắt đầu tìm Trang chủ
Tìm kiếm Hiển thị Gợi ý 1 Gợi ý 2
27
Sắc Hẻm
04. Userflow
Đăng nhập/ Đăng ký Trở về
Đăng nhập bằng Facebook
Hợp lệ Đúng
Đăng nhập
Trang chủ
Không hợp lệ
Tài khoản Quên mật khẩu
Đăng ký bằng Facebook
Nhập Gmail
Đăng ký thành công Đăng ký bằng Gmail
Trở về
Liên hệ
Gợi ý 1
Tài khoản
Gợi ý 2
Gợi ý 3 Trở về 28
Nhập mã xác nhận
Xác nhận bằng Gmail
Đăng ký
Trang chủ
Quay lại
Đăng nhập bằng Gmail
Sai
Xác nhận bằng Facebook
29
05. Design System Phông chữ Cỡ chữ Button & Icon Input
30
31
Sắc Hẻm
05. Design System
Phông chữ UTM AVO
32
Aa
Regular
Aa
Italic
Aa
Blod
Aa
Blod Italic
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890.:,; ‘ “ (!?) +-*/=
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890.:,; ‘ “ (!?) +-*/=
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890.:,; ‘ “ (!?) +-*/=
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890.:,; ‘ “ (!?) +-*/=
Sắc Hẻm
05. Design System
Cỡ chữ
Heading 1 UTM Avo Blod - 60 pt
Subhead 1
Heading 2
UTM Avo Blod - 36 pt
UTM Avo Blod - 48 pt
Subhead 2 UTM Avo Blod - 24 pt
Body UTM Avo Regular - 14 pt
33
Sắc Hẻm
05. Design System
Button & Icon
Icon
Styling
Checkbox Khi chưa tick vào checkbox
Xem thêm
Khi đã tick vào checkbox
Xem thêm
Button Xem thêm
Xem thêm
34
Đăng ký
Đăng nhập
Tìm kiếm
Hủy
Sắc Hẻm
05. Design System
Input Nhập thông tin đăng nhập
Nhập thông tin đăng ký
Nhập bình luận cá nhân
Tìm kiếm thông tin
Bình luận...
35
06. Wireframe Phác thảo ý tưởng Hoàn thiện Wireframe
36
37
Sắc Hẻm
Trang chủ
38
06. Wireframe
Sắc Hẻm
06. Wireframe
Đời sống
39
Sắc Hẻm
Ẩm thực
40
06. Wireframe
Sắc Hẻm
06. Wireframe
Đăng nhập/ Đăng ký
41
07. Layout Hoàn thiện Layout
42
43
Sắc Hẻm
Trang chủ
44
07. Layout
Sắc Hẻm
07. Layout
Đời sống
45
Sắc Hẻm
Ẩm thực
46
07. Layout
Sắc Hẻm
07. Layout
Đăng nhập/ Đăng ký
47
08. Prototype Prototype
48
49
Sắc Hẻm
Trang chủ
50
08. Prototype
Sắc Hẻm
Đời sống
08. Prototype
Ẩm thực
51
Sắc Hẻm
Đăng nhập/ Đăng ký
52
08. Prototype
53
09. TVC TVC
54
55
Sắc Hẻm
56
09. TVC
Sắc Hẻm
09. TVC
57
10. Mockup Mockup website
58
59
60
61
62
63
64
Cảm ơn vì đã xem đến trang cuối cùng...
65