MỤC LỤC GIỚI THIỆU TỔNG QUAN
1.
Thành viên Sự ra đời của dalat.aste Câu chuyện về dalat.aste Xuất xứ sản phẩm Mục tiêu của website
3 4 4 4 5
Ý nghĩa Giới thiệu về logo Tỷ lệ logo Hệ thống lưới Vùng an toàn Cách sử dụng logo Nguyên tắc sử dụng logo trên nền tương phản Các trường hợp sử dụng sai
7 8 8 8 9
LOGO
2.
9 10
Quy định màu sắc Giới hạn kích thước logo Kích thước logo tối thiểu
11 12 12
Sitemap
14
SITEMAP
3.
VISUAL LAYOUT
USERFLOW
4.
Userflow
16
STYLE GUIDE
5.
Font UI elements Input
6.
30
TVC
21 22 23
8.
Phân cảnh TVC
38
ẤN PHẨM
WIREFRAME Wireframe
7.
Layout
24
9.
Mockup website
42
thành viên
1.
GIỚI THIỆU TỔNG QUAN
2
thành viên
3 cô gái trẻ với sở thích ăn trái cây tươi và tình yêu thiên nhiên vô hạn đã kết hợp cùng nhau tạo nên một dalat.aste sống động qua từng trang web.
SẦM NHƯ HẢI CODE / ANIMATE
NGUYỄN TRƯƠNG QUẾ CHÂU 2D / CONTENT
ĐINH DẠ NHẬT CODE / TVC
Chúng tôi trân quý từng kỉ niệm và khoảnh khắc bên nhau.
3
sự ra đời của dalat.aste
câu chuyện về dalat.aste
Chúng tôi sinh ra và lớn lên tại Sài Gòn, một thành phố lớn nhộn nhịp với lối sống năng động, không bao giờ nghỉ. Mỗi sáng thức giấc đều phải lao đầu vào công việc. Chỉ nhìn thấy thiên nhiên trong mỗi giấc mơ và luôn phàn nàn rằng không có đủ giờ cho một ngày. Sống một cuộc sống hối hả và ăn những loại thực phẩm không rõ nguồn gốc, thiếu an toàn. Tình cờ có dịp đi nghỉ mát cùng nhau tại Đà Lạt, nơi có không khí trong lành, thời tiết dễ chịu và nguồn thực phẩm dồi dào, tươi sạch, đáp ứng đầy đủ những tiêu chí về an toàn thực phẩm. Giây phút ấy, chúng tôi tự hỏi rằng, tại sao mình không xây dựng nên một thương hiệu cung cấp trái cây sạch từ Đà Lạt tại Sài Gòn này nhỉ? Và từ đó Dalat.aste cũng được ra đời, mang trong mình những hoài bão và giấc mơ đem thực phẩm sạch đến với mọi nhà.
xuất xứ sản phẩm - Tìm kiếm nhà cung cấp chất lượng, đảm bảo tiêu chuẩn đầu vào lẫn đầu ra, ít nhất là phải có chứng nhận uy tín. - Kiểm tra, phân tích, kiểm định tất cả các sản phẩm khi nhập về hệ thống Dalat.aste. - Tất cả các sản phẩm đều được lập hồ sơ theo dõi, truy xuất nguồn gốc. -Vì vậy Dalat.aste cam kết các sản phẩm tại cửa hàng dễ dàng truy xuất khi khách hàng yêu cầu.
4
mục tiêu của website
mục tiêu Trở thành một trang web cung cấp các loại trái cây tươi có xuất xứ rõ ràng. Ngoài ra còn cung cấp thông tin về
sản phẩm cũng như sức khỏe cho người tiêu dùng có thể dễ dàng truy cập tìm hiểu, thông qua những hình ảnh minh họa sống động, hiện đại, nhưng không kém phần dễ thương phù hợp với mọi đối tượng khách hàng. Trở thành một địa điểm trái cây tươi và sạch đáng tin cậy cho mọi nhà.
giải pháp - Thông tin được chắt lọc từ nhiều nguồn. - Sử dụng hình ảnh minh họa và hình ảnh sản phẩm sắc nét, rõ ràng, kết hợp các chuyển động làm cho trang web trở nên sinh động tạo hứng thú cho người truy cập.
5
thành viên
2.
HỒ SƠ THIẾT KẾ LOGO
6
giới thiệu về logo
ý nghĩa Nhắc đến Đà Lạt là nhắc đến khí trời se lạnh, những làn sương mù vào buổi sớm mai hay hoàng hôn chiều ta, các con đường dốc quanh co qua những rừng thông xanh bạc ngàn, tất cả tạo nên một vẻ đẹp bí hiểm, mơ hồ. Ngoài ra, được thiên nhiên phú cho khí hậu ôn hòa cùng với đất đai màu mỡ, Đà Lạt là mảnh đất nối tiếng với rất nhiều loại nông sản tươi ngon, đặc biệt là các loại trái cây như dâu tây, chuối la ba, bơ sáp và hồng giòn. Từ những đặc trưng đó, chúng tôi đã tạo nên logo của Dalat.aste dựa trên những yếu tố sau.
“ĐÀ LẠT” đề bài
“TASTE” Logo được thiết kế dựa theo đề tài là trang web kinh doanh trái cây organic xuất xứ Đà Lạt. Logo cần phải thiết kế đơn giản, hiện đại và dễ nhớ trong mắt khách hàng.
giải quyết Sử dụng trực tiếp 2 chữ “Đà Lạt” kết hợp cùng chữ “taste” để tạo nên logo. “Taste” trong tiếng Anh có nghĩa là hương vị. Đà Lạt taste có nghĩa là “vị Đà Lạt”. Chúng tôi cam kết đem đến cho khách hàng một hương vị Đà Lạt thơm ngon trong từng loại trái cây. Chữ A được cách điệu thành hình trái bơ, vẽ thêm các nét để nhân hóa hình ảnh. Tạo nên nét tinh nghịch, dễ thương cho logo, làm điểm nhấn thương hiệu. Mang lại cảm giác thân thiện, dễ nhớ và thể hiện đúng tinh thần mà chúng tôi mong muốn mang đến cho khách hàng mỗi khi sử dụng sản phẩm - luôn hạnh phúc và vui vẻ. Logo được bố cục ngang theo chiều của chữ, thể hiện được sự đơn giản và tinh tế trong thiết kế. Font chữ Quicksand Regular thanh mảnh, hiện đại đáp ứng đủ yêu cầu đề ra.
7
tỷ lệ logo
hệ thống lưới và vùng an toàn 7X
X X: đơn vị tỷ lệ (cm, inch, pixel...) 8
cách sử dụng logo
nguyên tắc sử dụng logo trên nền tương phản
9
cách sử dụng logo
các trường hợp sử dụng sai
10
quy định màu sắc
#A9BD4B
#FFFFFF
#000000
RGB: 169/189/75 CMYK: 39/12/89/0
RGB: 255/255/255 CMYK: 0/0/0/0
RGB: 0/0/0 CMYK: 0/0/0/100
Logo trắng trên nền màu. Ví dụ: logo trắng trên nền màu vàng.
Logo chuẩn trên nền trắng.
Logo trắng trên nền đen. (Mẫu 1)
Logo trắng trên nền đen. (Mẫu 2)
11
giới hạn kích thước logo
kích thước logo tối thiểu Gíup logo hiển thị đầy đủ và rõ ràng, không bị mất chi tiết khi sử dụng ở kích thước nhỏ.
28px 150px 38px
Khi sử dụng riêng biểu tượng
38px
Khi sử dụng đầy đủ thành phần
Trên đây là các phiên bản của logo sử dụng cho cả trong in ấn và hiển thị trên màn hình. Kích thước tối thiểu của logo không được phép nhỏ hơn kích thước tối thiểu nhằm đảm bảo tính rõ ràng, độ sắc nét và dễ nhận diện. Không giới hạn kích thước logo lớn.
12
3.
SITEMAP
14
sitemap sản phẩm 1
- Play bằng button trên trang chủ. - Khách hàng có thể bấm skip.
sản phẩm 2 TRANG CHỦ
clip quảng cáo
danh mục sản phẩm
sản phẩm 3
thông tin sản phẩm
sản phẩm 4 sản phẩm 5
NAVIGATION
sản phẩm 1
GIỚI THIỆU
sản phẩm 2 danh mục sản phẩm
CỬA HÀNG
sản phẩm 3
thông tin sản phẩm
sản phẩm 4 TIN TỨC
sản phẩm 5
LIÊN HỆ
ICON
TÀI KHOẢN
thông tin tài khoản
lịch sử đơn hàng
GIỎ HÀNG
danh sách sản phẩm
thanh toán và giao hàng
theo dõi đơn hàng
TÌM KIẾM
15
4. USERFLOW
16
userflow
trang chủ - thanh navigation tìm kiếm
TRANG CHỦ clip quảng cáo
skip
danh mục sản phẩm
giới thiệu
tiếp tục xem
cửa hàng
tin tức - sự kiện
liên hệ
NAVIGATION sản phẩm 1 sản phẩm 2
sản phẩm 1 sản phẩm khác
chi tiết tin tức - sự kiện
sản phẩm 2 thông tin sản phẩm
sản phẩm 3
thông tin sản phẩm
sản phẩm 3 mua hàng
sản phẩm 4 sản phẩm 5
sản phẩm khác đánh giá sản phẩm
sản phẩm 4 mua hàng
đánh giá sản phẩm
sản phẩm 5
17
userflow
mua hàng - thanh toán SẢN PHẨM mua hàng
giỏ hàng
chọn số lượng
thanh toán
đăng nhập
xác nhận thanh toán
TRANG CHỦ
cửa hàng
sản phẩm
thông tin sản phẩm
theo dõi đơn hàng thông tin tài khoản TRANG CHỦ
TÀI KHOẢN đơn hàng
18
điền thông tin mua hàng
chi tiết đơn hàng
mua hàng thành công
userflow
đăng ký - đăng nhập đăng nhập bằng Facebook đăng nhập thành công
ĐĂNG NHẬP đăng nhập bằng Gmail TRANG CHỦ
tài khoản
quên mật khẩu
nhập Gmail
nhập mã xác nhận
ĐĂNG KÝ
đăng ký bằng Facebook
đăng ký bằng Gmail
xác nhân bằng Facebook
xác nhân bằng Gmail
đăng ký thành công
19
5.
STYLEGUIDE
20
font
Barlow Semi Condensed Regular
Aa
abcdefghijmnopqrstuvxwyz ABCDEFGHIJMNOPQRSTUVXWYZ 1234567890!? Medium
Aa
abcdefghijmnopqrstuvxwyz ABCDEFGHIJMNOPQRSTUVXWYZ 1234567890!? SemiBold
Aa
abcdefghijmnopqrstuvxwyz ABCDEFGHIJMNOPQRSTUVXWYZ 1234567890!? Bold
Aa
abcdefghijmnopqrstuvxwyz ABCDEFGHIJMNOPQRSTUVXWYZ 1234567890!? 21
UI elements
icon
Khám phá
checkbox
styling
khi đã tick vào checkbox
Khám phá
button
22
khi chưa tick vào checkbox
0
Tiến hành thanh toán
input
23
6. WIREFRAME
24
trang chủ
menu trang chủ
đăng nhập
đăng ký
wireframe
25
wireframe
tin tức - sự kiện
chi tiết tin tức - sự kiện liên hệ
26
giới thiệu
wireframe
giỏ hàng
chi tiết sản phẩm
cửa hàng
thanh toán
27
wireframe
lịch sử đơn hàng
thông tin tài khoản
28
theo dõi đơn hàng
7.
VISUAL LAYOUT
30
layout TRANG CHỦ
31
layout TRANG CHỦ
32
layout thông tin tài khoản
giới thiệu
liên hệ
33
layout
giỏ hàng
chi tiết sản phẩm
cửa hàng
thanh toán
34
layout
lịch sử đơn hàng
theo dõi đơn hàng
35
thành viên
8. TVC
36
phân cảnh tvc
37
phân cảnh tvc
Quét “tớ” để xem nhé! 38
9. ẤN PHẨM
40
mockup website
41
mockup website
42
Thank you !