Present phương án website beerdaiviet.vn

Ý TƯỞNG VÀ GIẢI PHÁP TRÌNH BÀY WEBSITE DAIVIETBEER.COM.VNDesigned by

Mục Lục1. Mục tiêu thẩm mỹ2. Ý tưởng và giải pháp3. Thể hiện chuyên trang4. Giải pháp cho sự kiện


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.


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


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)

+ 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ệ �ash 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 �ash 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.


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.


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 �ash

bọt nước tinh tế và nhẹ nhàng gây ra cảm giác

thích thú cho người xem.


- 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.



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.

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!

Present phương án website beerdaiviet.vn

Design

Transcript of Present phương án website beerdaiviet.vn