Tài liệu presentation phương án thiết kế website nhãn hàng Bia Đại Việt - Tập Đoàn Hương Sen. Đề xuất bởi Comsoft. co., ltd (http://www.comsoftvn.com)

1. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
Mục Lục
1. Mục tiêu thẩm mỹ
2. Ý tưởng và giải pháp
3. Thể hiện chuyên trang
4. Giải pháp cho sự kiện

2. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
1. Mục tiêu thẩm mỹ:
- Hướng đến một cái nhìn mới, trau chuốt và tinh tế về
giao diện.
- Cần thể hiện được yếu tố quy mô, trang trọng và
truyền thống của một thương hiệu lớn của Việt Nam
- Thể hiện nét độc đáo, nghệ thuật dành cho lĩnh vực
đồ uống vốn là một phần rất quan trọng trong văn hóa
ẩm thực.
- Đồng bộ được nhận diện thương hiệu, thể hiện được
bản sắc của thương hiệu tập đoàn Hương Sen và bia đại
việt.

3. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
2. Ý tưởng và giải pháp:
- Tông màu đỏ trầm đặc trưng của thương hiệu tập đoàn Hương Sen và bia Đại Việt
- Thể hiện trên nền chất liệu giấy vàng nhạt. Mục đích tạo nên một cảm giác bao trùm website là một xu hướng nghệ
thuật
- Website sử dụng các yếu tố nền như những bức tranh cổ, những cánh đồng rộng mênh mông khởi nguồn của
nguyên liệu làm nên những giọt bia vàng đồng thời thể hiện sự thoáng đãng trong tầm nhìn.
- Nền trong vùng thể hiện của các trang sử dụng một bức tranh có ba đối tượng chính: Chùa Keo ( hình ảnh đặc trưng
của Thái Bình) chuyển dần sang một cánh đồng trải dài đến hình ảnh đô thị phồn hoa. Mục đích của việc thể hiện này
nhằm thể hiện sơ lược nơi hình thành, phát triển và đến với người tiêu dùng của thương hiệu bia Đại Việt | Tập đoàn Hương
Sen

4. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
3. Thể hiện chuyên trang:
a) Trang chủ tối đơn giản chỉ bao gồm logo bia Đại Việt,
mảng workart lớn.
- Menu chính bố trí theo chiều dọc nằm sát ngoài cùng tay trái web-
site theo dạng tab. Chiếm diện tích tối thiểu nhưng vẫn giữ được sự tiện lợi
trong việc chuyển qua lại giữa các thành phần nội dung trang web. Tối giản
được khoảng cách ngang giữa các thành phần trong menu để tránh việc
người sử dụng phải thao tác chuột quá nhiều để chọn một menu.
- Slideshow hình ảnh các sản phẩm với chuyển động video clip chạy
nền phía sau là những chuyển động chậm rãi, nhẹ nhàng tinh tế không quá
phô trương nhưng đủ để tạo ra sự chú ý của người xem vào các dòng sản
phẩm lướt qua màn hình.
+ Slideshow sử dụng chuyển động mượt mà của công nghệ jquery
cho độ tương thích cao với các trình duyệt và thiết bị di động. (xem tiếp
trang sau)

5. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
+ Mỗi thành phần chuyển động tách biệt so với nền và dễ dàng quản
lý, thay thế. Có thể thêm các yếu tố như: tem thông báo khuyến mại, tem
thông báo hàng mới, tem thông báo hàng đặc biệt.... (Có ví dụ bằng hình
ảnh)
+ Có thể đặt liên kết lên các thành phần để kích trực tiếp lên hình ảnh
thì chuyển vào các trang nội dung trong.
+ Chuyển động nền sử dụng các mini video clip với các hiệu ứng bọt
bia, chuyển động của dòng chất lỏng. Ngoài ra có thể thể hiện các
chuyển động như mở nắp chai bằng công nghệ flash ba chiều.
+ Ở trên giao diện này mặc dù người thiết kế hướng đến độ tương
thích mạnh với các trình duyệt và thiết bị di động như Ipad, tablet PC....
nhưng cũng không vì thế mà bỏ qua những hiệu ứng tuyệt đẹp của
Flash. Tuy nhiên với cách xử lý tinh tế, những hiệu ứng flash chỉ thể hiện
khi hover chuột lên các thành phần cần tô điểm. Trên những thiết bị
không hỗ trợ cũng không làm phá vỡ đi tính thẩm mỹ của website.

6. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
3. Thể hiện chuyên trang:
b) Trang giới thiệu:
- Ở thiết kế này, chúng tôi đặc biệt chú trọng đến
trang giới thiệu tập đoàn. Không giống như các trang web
khác thể hiện trang giới thiệu là một bài viết dài nhàm
chán. Chúng tôi thể hiện trang giới thiệu vẫn nằm gọn
trong màn hình của thị khách khi thiết kế các thành phần
dưới dạng timeline (dòng thời gian) thể hiện các mốc lịch
sử quan trọng gắn với các sự kiện và bước ngoặt trong quá
trình hình thành, phát triển tập đoàn Hương Sen.
- Tuy nhiên, để không mất đi tính năng đọc đầy đủ
dạng một bài viết, chúng tôi vẫn đặt cho thị khách một nút
ở phía dưới chuyên trang với tính năng: xem đầy đủ để thể
hiện dạng một bài viết đầy đủ và kéo trượt theo chiều dọc.

7. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
c) Trang Sản phẩm:
- Trang sản phẩm thể hiện một danh
sách sản phẩm đơn giản với tiêu đề tên sản
phẩm, một hình ảnh đặc thù. Với hiệu ứng khi
hover chuột lên sản phẩm có sự phóng to một
chút để gây sự chú ý. Sử dụng hiệu ứng flash
bọt nước tinh tế và nhẹ nhàng gây ra cảm giác
thích thú cho người xem.

8. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
- Khi click vào chi tiết sản phẩm, Người xem được trải
nghiệm những tính năng đầy đủ và thích thú khi khám
phá một sản phẩm của tập đoàn khi được xem sản phẩm
dưới dạng xoay ba chiều. Những sản phẩm có tính năng
đặc biệt được thể hiện luôn ở trạng thái này.
+ Ngay bên dưới khung xoay ba chiều là khung hình
ảnh phụ. Khung hình ảnh này Không chỉ thể hiện ảnh
tĩnh mà khi hover chuột lên các khung này có hiện
thêm cả hình ảnh phóng to và video clip. Tại sao chúng
tôi chọn cách này. Lý do thiên về sự tinh tế và lịch sự khi
hover lên clip mới bắt đầu play và phát âm thanh, bỏ
hover chuột clip lại dừng lại, tránh việc tự động chơi và
phát âm thanh gây ra sự khó chịu cho người xem nhất
là trong thời buổi văn hóa văn phòng đang được đề cao
hiện nay.

9. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
- Khi click vào chi tiết sản phẩm, Người xem được trải
nghiệm những tính năng đầy đủ và thích thú khi khám
phá một sản phẩm của tập đoàn khi được xem sản phẩm
dưới dạng xoay ba chiều. Những sản phẩm có tính năng
đặc biệt được thể hiện luôn ở trạng thái này.
+ Ngay bên dưới khung xoay ba chiều là khung hình
ảnh phụ. Khung hình ảnh này Không chỉ thể hiện ảnh
tĩnh mà khi hover chuột lên các khung này có hiện
thêm cả hình ảnh phóng to và video clip. Tại sao chúng
tôi chọn cách này. Lý do thiên về sự tinh tế và lịch sự khi
hover lên clip mới bắt đầu play và phát âm thanh, bỏ
hover chuột clip lại dừng lại, tránh việc tự động chơi và
phát âm thanh gây ra sự khó chịu cho người xem nhất
là trong thời buổi văn hóa văn phòng đang được đề cao
hiện nay.

10. Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VN
Designed by
4. Giải pháp cho các sự kiện
Dựa trên một thiết kế website đồng bộ về thương
hiệu, chúng tôi vẫn luôn luôn hướng đến sự linh động trong
cách bài trí website. Sự kiện, khuyến mại... là những thành
phần phát sinh vô cùng quan trọng theo thời gian thực trên
website của khách hàng. Đây chỉ là một trong những cách
thể hiện sáng tạo mỗi sự kiện của khách hàng mà chúng tôi
đưa ra.
Website là một kênh quảng bá thương hiệu có độ
linh hoạt nhưng cũng cần mang tính ổn định cao về hình
thức và tổng thể. Mỗi yếu tố gây chú ý để hướng đến sự
kiện trên trang chính chỉ nhằm mục đích liên kết tới trang
riêng về sự kiện đó. Và khi khách hàng có nhu cầu triển khai
chúng tôi luôn sẵn sàng phục vụ việc tạo các chuyên trang
với tính quy mô và thẩm mỹ cao nhất.

11. Trên đây chúng tôi vừa trình bày sơ lược những giải pháp đề xuất cho quá trình thực hiện website của
quý công ty. Do thời gian thực hiện demo hạn chế có những thành phần chúng tôi chưa thể trình bày chi tiết
trong bản giới thiệu này. Tuy nhiên qua những trình bày vừa rồi, hy vọng quý vị đã nắm được tương đối đầy
đủ xu hướng thiết kế cũng như giải pháp công nghệ mà chúng tôi muốn giới thiệu đến quý vị.
Comsoft kính mong được hợp tác cùng quý doanh nghiệp!
Trân trọng kính gửi!