bài giảng thiết kế web dạng slide phần 2

1
Tổng quan về thiết kế Web
1
Tổng quan về thiết kết WEB
Chương 2
Tổng quan về thiết kế Web
2
Lâm Quang V
Lâm Quang V
ũ
ũ
Phần 1 –Xác định mục đích, yêu cầu
của Website cần thiết kế
l Mục tiêu, yêu cầu cơ bản của WebSite
l Đối tượng phục vụ
l Chủ để của WebSite
Tổng quan về thiết kế Web
3
Lâm Quang V
Lâm Quang V
ũ
ũ
1.1 Mục tiêu, yêu cầu cơ bản
l Đề ra mục tiêu khái quát, ngắn gọn, rõ ràng
của Website cần thiết kế
l Làcông cụ để đánh giásựthành bại của một
Website
l Mục tiêu phải dài hạn, bao trùm toàn bộ kế
hoạch phát triển.
2
Tổng quan về thiết kế Web

4
Lâm Quang V
Lâm Quang V
ũ
ũ
1.2 Đối tượng phục vụ
l Xác định loại đọc giả chính của Website
l Tìm hiểu về:
– Sự hiểu biết
– Trình độ
– Sở thích
– Kinh nghiệm duyệt Web …
l Thiết kế tốt = thích hợp cho một dải rộng các loại
đọc giả cótrình độ vànhu cầu khách nhau
Tổng quan về thiết kế Web
5
Lâm Quang V
Lâm Quang V
ũ
ũ
1.3 Chủ đề
l Giúp định hướng cho nhàthiết kế
– Giáo dục
– Huấn luyện (online trainning)
– Tin tức
– Giải trí
– Diễn đàn trao đổi thảo luận
– Mua bán, quản lý….
l Xem vídụ
Tổng quan về thiết kế Web

6
Lâm Quang V
Lâm Quang V
ũ
ũ
Vídụ-Diễn đàn
3
Tổng quan về thiết kế Web
7
Lâm Quang V
Lâm Quang V
ũ
ũ
Vídụ-Online training
Tổng quan về thiết kế Web
8
Lâm Quang V
Lâm Quang V
ũ
ũ
Vídụ-tin tức
Tổng quan về thiết kế Web
9
Lâm Quang V
Lâm Quang V
ũ
ũ
Vídụ
4
Tổng quan về thiết kế Web

10
Lâm Quang V
Lâm Quang V
ũ
ũ
Vídụ-Online Shopping
Tổng quan về thiết kế Web
11
Lâm Quang V
Lâm Quang V
ũ
ũ
Phần 2 -Thiết kế giao diện
l Điểm khác biệt giữa tài liệu thông thường và
trang WEB
l Một số vấn đề liên quan đến việc thiết kế
giao diện cơ bản
l Thiết kế giao diện WebSite
Tổng quan về thiết kế Web
12
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3 Thiết kế giao diện Website
Menu
Header
Content
Logo
5

Tổng quan về thiết kế Web
13
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3 Thiết kế giao diện Website
2 x 2 Layout
Tổng quan về thiết kế Web
14
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3 Thiết kế giao diện Website
Tablewithin a table
Tổng quan về thiết kế Web
15
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3 Thiết kế giao diện Website
Theouter table
6
Tổng quan về thiết kế Web
16
Lâm Quang V
Lâm Quang V
ũ

ũ
2.3 Thiết kế giao diện Website
Theinner table
Tổng quan về thiết kế Web
17
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3 Thiết kế giao diện Website
Centeredwith three columns
Tổng quan về thiết kế Web
18
Lâm Quang V
Lâm Quang V
ũ
ũ
Reallycomplicated design!
7
Tổng quan về thiết kế Web
19
Lâm Quang V
Lâm Quang V
ũ
ũ
2.1 Điểm khác biệt giữa tài liệu thông
thường vàtrang WEB
l Giống nhau: phải được trải qua sự phát triển
vàchuẩn hóa.
l Khác nhau: các mối liên kết siêu văn bản,

multimedia…
à cho phép người đọc truy nhập đến một
trang đơn lẻ màkhông cần đến lời tựa đề.
Tìm kiếm nhanh và đơn giản hơn.
Cóthể quay lại một loạt các liên kết.
Tổng quan về thiết kế Web
20
Lâm Quang V
Lâm Quang V
ũ
ũ
2.2 Một số vấn đề liên quan đến việc
thiết kế giao diện cơ bản.
l Thiết kế hướng tới người sử dụng
l Các giúp đỡ định hướng rõ ràng
l Không cótrang cuối cùng (dead-end)
l Băng thông và ảnh hưởng
l Đơn giản vàtính nhất quán
l Tính ổn định của các trang Web
l Phản hồi và đối thoại
l Tính tương thích trên các trình duyệt khác nhau
(thay thế)
Tổng quan về thiết kế Web
21
Lâm Quang V
Lâm Quang V
ũ
ũ
2.2.1 Thiết kế hướng tới người sử
dụng

l Người sử dụng là đối tượng chính quyết định
sự thành bại của Website
l Yêu cầu mức độ hoàn hảo của thiết kế giao
diện đồ họa
l Xây dựng các kịch bản mẫu cho các loại đối
tượng sử dụng khác nhau
l Cách tốt nhất: thử nghiệm à nhận các phản
hồi từ đọc giả.
8
Tổng quan về thiết kế Web
22
Lâm Quang V
Lâm Quang V
ũ
ũ
2.2.2 Các giúp đỡ định hướng rõ ràng
l Đọc giả cóthể trả lời các câu hỏi:
– Đang ở đâu ?
– Cóthể làm gì?
– Cóthể đi tiếp tới đâu ?
l Biểu tượng nhất quán, dễ hiểu, theo chuẩn
qui định
l Luôn cókhả năng quay lại trang chủ, các
trang chủ chốt trên Website
Tổng quan về thiết kế Web
23
Lâm Quang V
Lâm Quang V
ũ
ũ

2.2.3 Không cótrang cuối cùng (dead-
end)
l Mỗi trang cóít nhất một liên kết
l Trang “dead-end” à thất vọng, mất khả
năng đến với các trang khác.
l Nên để liên kết về trang chủ trong mọi trang.
Tổng quan về thiết kế Web
24
Lâm Quang V
Lâm Quang V
ũ
ũ
2.2.4 Băng thông và ảnh hưởng
l Sự kiên nhẫn của đọc giả cógiới hạn.
l Tốc độ đôi khi làyếu tố quyết định đến việc
lựa chọn Website.
l Phân biệt giữa thiết kế cho Internet và
Intranet.
9
Tổng quan về thiết kế Web
25
Lâm Quang V
Lâm Quang V
ũ
ũ
2.2.5 Đơn giản vàtính nhất quán
l Tùy vào loại ứng dụng
l Đọc giả sẽ không ấn tượng vàsựphức tạp
không lý do. Đặc biệt là đọc giả phục thuộc
vào thời gian vàthông tin chính xác.

l Các biểu tượng đơn giản, quen thuộc, nhất
quán trong tất cả các trang
Tổng quan về thiết kế Web
26
Lâm Quang V
Lâm Quang V
ũ
ũ
2.2.6 Tính ổn định của các trang Web
l Ổn định về cấu trúc vànội dung
l Cấu trúc: các thành phần được đặt đúng chỗ
vàhoạt động nhịp nhàng.
l Nội dung: các mối liên kết luôn đảm bảo có
đích đến, nội dung luôn đảm bảo thích hợp
vàphải cập nhật cho phùhợp với ngữ cảnh
tại thời điểm đọc giả duyệt Web.
Tổng quan về thiết kế Web
27
Lâm Quang V
Lâm Quang V
ũ
ũ
2.2.7 Phản hồi và đối thoại
l Chuẩn bị trước cho việc trả lời, đáp ứng các
đòi hỏi, góp ý của đọc giả một cách nhanh
nhất cóthể.
l Luôn cócung cấp địa chỉ để liên kết với
“Webmaster”
l Lên kế hoạch nhân sự phụ trách lâu dài.
10

Tổng quan về thiết kế Web
28
Lâm Quang V
Lâm Quang V
ũ
ũ
2.2.8 Tính tương thích trên các trình
duyệt khác nhau (thay thế)
l Không phải mọi trình duyệt đều hiển thị trang
web của chúng ta giống nhau.
l Lưu ý khi có đọc giả sử dụng web browser
không cókhả năng hỗ trợ đồ họa.
l Sử dụng nhãn (tag) ALT trong HTML để thay
thế.
Tổng quan về thiết kế Web
29
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3 Thiết kế giao diện Website
l Xác định kiểu chữ, màu sắc
l Xác định kích thước khung nhìn
l Xác định các kỹ thuật, công cụ thiết kế
l Cắt đoạn, tóm lược thông tin
l Hệ thống Menu điều khiển, các liên kết giữa
các trang
l Xác định cấu trúc WebSite
Tổng quan về thiết kế Web
30

Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.1 Xác định kiểu chữ, màu sắc
l Phông chữ à phụ thuộc vào
– Đặc điểm thông tin
– Độc giả
– Trình duyệt, độ phân giải
– Ngôn ngữ sử dụng
– Font cóchân, không chân…
l Gam màu à thống nhất trong toàn bộ Website
l Font tiếng Việt: VNI, TCVN3, Unicode…
11
Tổng quan về thiết kế Web
31
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.2 Xác định kích thước khung nhìn
l Phải làm cho đọc giả cảm nhận được kích
thước của trang thông tin, biết họ đang ở
đâu, cóthể làm gì ?
l Lưu ý, hầu hết các trang web đều không vừa
khớp với màn hình 14-15 inch.
Tổng quan về thiết kế Web
32
Lâm Quang V
Lâm Quang V

ũ
ũ
Vídụ:
Tổng quan về thiết kế Web
33
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.3 Xác định các kỹ thuật, công cụ
thiết kế
l Phụ thuộc nhiều yếu tố:
– Môi trường hosting
– Đội ngũ thiết kế
– Chi phíthiết kế
– Băng thông đường truyền
– ….
è Chi phí
12
Tổng quan về thiết kế Web
34
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.4 Cắt đoạn, tóm lược thông tin
l Luôn cómột số lợi điểm:
– Đọc giả cóít thời gian để đọc các tài liệu trên màn hình.
– Luôn cónhu cầu muốn tìm phần thông tin chủ định, không
nên chia cắt quánhỏ, tóm lược quángắn à gây thất vọng

– Hình thức vàcách tổ chức đồng nhất à kinh nghiệm tìm
kiếm, khám phá.
– Thông tin ngắn gọn, súc tích thích hợp với màn hình máy
tính (bị giới hạn tầm nhìn).
l Việc áp dụng phải linh động, nhất quán.
Tổng quan về thiết kế Web
35
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.5 Hệ thống Menu điều khiển, các
liên kết giữa các trang
l Hệ thống đk đồ họa phong phú, nhất quán,
mang tính gợi nhớ
l Hệ thống phím ấn đồng nhất, logic
l Cóthể liên kết đến một site khác cũng như
quay lại site trước.
l Các liên kết đến các site cógiátrị sẽ tăng giá
trị chính website của chúng ta.
Tổng quan về thiết kế Web
36
Lâm Quang V
Lâm Quang V
ũ
ũ
Vídụ
13
Tổng quan về thiết kế Web
37

Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.6 Xác định cấu trúc WebSite
l Hệ thống phân cấp
l Hệ thống các trang nối tiếp
l Ô Lưới
l Mạng nhện
Tổng quan về thiết kế Web
38
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.6.1 Phân cấp
Tổng quan về thiết kế Web
39
Lâm Quang V
Lâm Quang V
ũ
ũ
Hệ thống Phân cấp
l Dùng để tổ chức các khối thông tin phức
hợp.
l Làhệthống được dùng thông dụng nhất
l Gần với mô hình tổ chức thế giới thực
l Dễ hình dung tổ chức website
è Cái nhìn tổng quan từ trang chủ
14

Tổng quan về thiết kế Web
40
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.6.2 Nối tiếp
Tổng quan về thiết kế Web
41
Lâm Quang V
Lâm Quang V
ũ
ũ
Hệ thống các trang nối tiếp
l Biểu diễn thông tin tuần tự, các bảng tường
thuật nối tiếp theo thời gian
l Các thông tin tra cứu tham khảo: tự điển
báck khoa, tự điển thuật ngữ
l Thích hợp cho hệ thống website nhỏ.
Tổng quan về thiết kế Web
42
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.6.2 Ô lưới
15
Tổng quan về thiết kế Web
43
Lâm Quang V

Lâm Quang V
ũ
ũ
Hệ thống Ô lưới
l Danh sách khóa học, các biến cố, sự kiện
l Từng đơn vị trong cấu trúc phải cócùng cấu
trúc cho các chủ đề lớn vànhỏ
l Khóhiểu đối với khi xác định mối liên quan
giữa các loại thông tin.
l Rất tốt đối với những đọc giả cókinh
nghiệm, cósẵn kiến thức về hệ thống, chủ
đề trong hệ thống
Tổng quan về thiết kế Web
44
Lâm Quang V
Lâm Quang V
ũ
ũ
2.3.6.4 Mạng nhện
Tổng quan về thiết kế Web
45
Lâm Quang V
Lâm Quang V
ũ
ũ
Hệ thống mạng nhện
l Tố chức ít hạn chế cho việc sử dụng mẫu thông tin
l Mô hình tự khám phá, khai thác triệt để ưu điểm của
hyperlink
l Cấu trúc phi thực tế nhất, khóhiểu, khódự đoán cho

đọc giả
l Thích hợp với những site nhỏ, đọc giả chuyên
nghiệp hoặc trình độ cao, tìm kiếm các kiến thức
chuyên sâu
16
Tổng quan về thiết kế Web
46
Lâm Quang V
Lâm Quang V
ũ
ũ
Phần 3 –Các thành phần cơ bản của
Website
l Trang chủ (HomePage)
l Hệ thống Menu, Logo, định danh
l Các trang thành viên
Tổng quan về thiết kế Web
47
Lâm Quang V
Lâm Quang V
ũ
ũ
3.1 Trang chủ
l Mọi website đều được thiết lập quanh
Homepage
l Điều kiện cơ bản để website thành công
l Lưu ý khi sử dụng hệ thống đồ họa
Tổng quan về thiết kế Web
48
Lâm Quang V

Lâm Quang V
ũ
ũ
3.2 Hệ thống menu,logo, định danh
l Hệ thống menu phải rõ ràng, đầy đủ sẽ giúp
đọc giả hình dung được cấu trúc, tổ chức
website.
l Cần quan tâm đến vị trí, các thể hiện (cóhay
không cóhiệu ứng)
l Vị trí logo, định danh công ty phải cố định
nhất quán
17
Tổng quan về thiết kế Web
49
Lâm Quang V
Lâm Quang V
ũ
ũ
3.3 Các trang thành viên
l Xây dựng theo cấu trúc cơ bản của website
l Nhất quán, phùhợp với các thuộc tính đã
định dạng trước
Tổng quan về thiết kế Web
50
Lâm Quang V
Lâm Quang V
ũ
ũ
Phần 4 –Một số vấn đề cần quan tâm
l Thời gian quản lý

l Liên kết các trang Web, quảng cáo
l Phụ lục, nguồn thông tin, các trang giúp đỡ,
FAQ
l Thiết kế trang Web cho mạng Interanet
Tổng quan về thiết kế Web
51
Lâm Quang V
Lâm Quang V
ũ
ũ
4.1 Thời gian quản lý
l Website cần được cập nhật thông tin để đọc
giả luôn cảm nhận được cái mới
l Nếu phần nào đó được cập nhật à thêm ký
hiệu “New”
l Ghi thời gian cập nhật, số người truy cập…
l Nếu website phức tạp à thêm một trang
“What new ?”
18
Tổng quan về thiết kế Web
52
Lâm Quang V
Lâm Quang V
ũ
ũ
4.2 Liên kết trang web, quảng cáo
l Tạo liên kết đến các trang thông tin (đối tác,
khách hàng…) à tăng uy tín
l Khi đã ổn định à chuyển đổi hình thức kinh
doanh, thu phí:

– Thuê đặt logo, quảng cáo
– Thu phíthành viên
– ….
Tổng quan về thiết kế Web
53
Lâm Quang V
Lâm Quang V
ũ
ũ
4.3 Phụ lục, nguồn thông tin, các trang
giúp đỡ, FAQ
l Thông tin báo cáo thường cô đọng à trên
web cóthêm các phụ lục
l FAQ (Frequently Asked Questions) lý tưởng
cho việc thiết kế website hỗ trợ
l FAQ à giảm thiểu nhân sự vàchi phícho
việc hỗ trợ, tư vấn khách hàng
Tổng quan về thiết kế Web
54
Lâm Quang V
Lâm Quang V
ũ
ũ
4.4 Thiết kế trang web cho mạng
Intranet
l Một số site thiết kế riêng cho các tổ chức, sử
dụng mạng LAN
l Mục tiêu : nâng cao thời gian truy cập, dẫn
dắt vào sâu trong cấu trúc website à đòi hỏi
thông tin phải hấp dẫn, cógiátrị

l Đừng để ý tới băng thông vàtốc độ à chú
trọng đến nội dung cógiátrị vàsựhấp dẫn
cho website.
19
Tổng quan về thiết kế Web
55
Lâm Quang V
Lâm Quang V
ũ
ũ
LAB2 –Khảo sát các Website
l Khảo sát các trang Web vàrút ra các nhận
xét về cách thiết kế trang Web
l Làm quen với cách sử dụng một số công cụ
tiện ích hỗ trợ trong quátrình thiết kế Web
– Swish
– Frontpage
– Dreamweaver
l Sử dụng FTP Server