Đề xuất phát triển Website DEOCA Investment., JSC

Đề xuất phát triển
Website
DEOCA Investment., JSC

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


Mục lục
1. Xu hướng thiết kế Web & Portal
2. Phân tích hiện trạng website Deo Ca, một số
website trong nước và nước ngoài
3. Tổng kết điểm nổi bật
4. Đề xuất giải pháp thiết kế và giải pháp kỹ thuật
5. Thảo luận

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


1.
Xu hướng thiết kế

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


Một vài xu hướng thiết kế website
Responsive Web Design

Flat/ Material Design

Thiết kế hiển thị Web tự động tương thích với

Thiết kế phẳng là xu hướng thiết kế tối

các kích cỡ màn hình của các thiết bị khác

giản các chi tiết, khơng sử dụng nhiều hiệu

nhau như máy tính để bàn, laptop, điện thoại

ứng, màu đơn sắc, rõ ràng tạo không gian

di động, iPad,…

mở, ví dụ như thiết kế trên Windows
Phone

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


Một vài xu hướng thiết kế website
Smart menu

Big Image/ Video

Thanh menu làm nhiệm vụ điều hướng

Sử dụng hình ảnh lớn hoặc video ở

người dùng xuất hiện/ẩn đi linh hoạt tùy

đầu trang

thuộc vào thao tác, hành động của người
dùng, tiết kiệm khơng gian màn hình

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


Một vài xu hướng thiết kế website
Modular design

Long Scroll design

Nội dung trang web được phân chia thành

Nội dung website trải dài trong một trang,

nhiều mô đun khác nhau và tách biệt thành

xuất hiện dần khi kéo thanh cuốn đi xuống,

một khối, mỗi mô đun đi kèm đoạn nội

giảm thiểu số lần click chuột, tăng tốc độ

dung minh họa ngắn gọn

load trang web

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved

Tổng kết xu hướng cho website hiện đại
Hiển thị tương thích với tất cả kích cỡ màn hình thiết bị
Tập trung hiển thị các nội dung chính, thiết kế tinh gọn, tối giản các chi tiết tạo sự
hiện đại
Hướng đến sự tiện dụng cho người dùng, giảm thiểu các thao tác click chuột,
đơn giản hóa các menu, thanh điều hướng
Thơng tin thể hiện dưới dạng hình ảnh trực quan, có tính tương tác và thu hút

người đọc lâu hơn

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


2.
Phân tích hiện trạng
Website Deo Ca, một
số website trong
nước và nước ngồi
Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


1.Phân tích hiện trạng website Deo Ca
Đưa quá nhiều text (nội dung ở dạng câu chữ) lên trang chủ, thông tin dàn trải
chiếm nhiều diện tích
Hầu hết nội dung trên trang chủ liên quan đến tin tức-sự kiện nên chưa làm nổi
bật được các dư án trọng điểm, các điểm mạnh, tầm nhìn của cơng ty
Hiệu ứng hình ảnh chưa thu hút, đôi chỗ gây rối mắt cho người dùng
Bố cục sắp xếp ảnh và vị trí đặt video chưa hợp lý
Giao diện hiển thị chưa tương thích với kích cỡ màn hình các thiết bị (chưa có

responsive)
Cấu trúc menu chưa rõ ràng, chưa phân tách được phần nội bộ và nội dung
chung nên có thể gây rối cho người dùng cuối

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


1.Phân tích hiện trạng website Deo Ca

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


1.Phân tích hiện trạng website Deo Ca
Cấu trúc menu chưa rõ ràng, chưa phân tách được phần nội bộ và nội dung chung
gây rối cho người dùng cuối

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


1. Phân tích hiện trạng website Deo Ca
Bốc cục ở một số trang chưa hợp lý, các cột chữ lệch với ảnh

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


2. Khảo s t một số website nước ngo i
Website: />Hình ảnh lớn, trực quan
Smart menu
Phân nhóm danh mục theo chức năng

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


2. Khảo s t một số website nước ngo i
Website: />Tin tức được chia thành từng mô đun, nội dung mô tả từng mô đun trên trang chủ ngắn gọn
tạo sự rõ ràng, dễ theo dõi

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


2. Khảo sát một số website nước ngồi
/>Hình ảnh lớn, trực quan

Phân nhóm danh mục theo chức năng

Tối giản thơng tin

Màu sắc đồng nhất

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


2. Khảo sát một số website nước ngoài
Website: />Footer đầy đủ link, thông
tin truy cập
Logo lớn, màu sắc
bắt mắt

Sử dụng hình ảnh lớn
Màu sắc đồng nhất

Thơng tin liên hệ được
đưa lên header của
trang

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


2. Khảo sát một số website nước ngoài
Website: />Trang contact hiện đại, tương tác cao sự thuận tiện cho người dùng
Thơng tin đưa ra hợp lý

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


3.Khảo sát một số website trong nước
Nhược điểm
Hình ảnh chất lượng chưa tốt, phần nhiều nội dung là câu chữ khó theo dõi
Chưa tạo được điểm nhấn, sự hấp dẫn

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


3.Khảo sát một số website trong nước
Nhược điểm
Màu sắc chưa nổi bật, tính nhận diện thương hiệu khơng cao
Khơng làm nổi bật được điểm mạnh của doanh nghiệp hay nội dung để trả lời câu hỏi:
”Tại sao chúng tôi nên hợp tác với bạn?”

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved

3.
Tổng kết điểm nổi bật
dựa trên khảo sát

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


1. Về thiết kế
Xu hướng thiết kế ứng dụng material design và big image design
Màu sắc đồng bộ, ấn tượng, tăng cường nhận diện thương hiệu
Bố cục thống, thơng tin cô đọng
Tạo cảm giác thân thiện, hiện đại

2. Về chức năng
Tập trung vào sự quan tâm và nhu cầu của khách hàng, tăng cường sự tương
tác, khả năng trải nghiệm.
Tạo sự tiện ích thoải mái khi truy cập
Thu thập thơng tin khách hàng

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


4.
Đề xuất giải pháp

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


1. Đề xuất thiết kế giao diện

Áp dụng thiết kế
phẳng

Sử dụng đồng nhất
màu sắc theo nhận
diện thương hiệu
Dùng hiệu ứng sinh
động cho ảnh banner
Dùng banner hình
ảnh lớn
Phân chia menu theo
nhóm chức năng

Trang chủ
Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


1. Đề xuất thiết kế giao diện
Font chữ, màu chuẩn
theo màu nhận diện

xuyên suốt website
Bố cục tập trung
Thông tin tối giản, cơ
đọng
Chia bố cục theo các
mơ đun

Trang chủ

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved


1. Đề xuất thiết kế giao diện
Áp dụng Responsive design tương thích trên mọi kích thước thiết bị
Hỗ trợ nhiều dạng tương tác (người dùng có thể chọn cách hiển thị theo dạng cột hay

bảng…)

Copyright © 2006-2016 VietSoftware International Inc. All rights reserved