Tài liệu PTTK Web Tiến trình 1

Machine Translated by Google
3 Lập kế hoạch thành công

Trang web: Phần 1
Trang chủ
Trang Giới thiệu

Chi tiết Chi tiết Chi tiết Chi tiết
Chương 1 và 2 đã giới thiệu cho bạn về Internet và World Wide Web, các loại trang web khác nhau
Trang Trang Trang Trang

cũng như các công cụ và vai trò thiết kế web cơ bản. Bạn cũng đã tìm hiểu về các kỹ thuật
quan trọng để viết văn bản cho trang web, sử dụng màu sắc làm công cụ thiết kế cũng như giải
quyết các vấn đề cần cân nhắc về quyền riêng tư và bảo mật.
Chương 3 và 4 giải thích các bước quan trọng trong việc lập kế hoạch trang web. Trong này
Ngõ cụt
Trang
chương này, bạn khám phá một số bước đầu tiên trong quy trình phát triển trang web: xác
định mục đích và đối tượng mục tiêu của trang web; xác định nội dung chung của trang web; và
chỉ định cấu trúc của trang web. Sau đó, sử dụng những gì bạn đã học được về quy trình lập kế
hoạch trang web, bạn bắt đầu phát triển kế hoạch cho trang web của riêng mình. Bạn hoàn thành kế
hoạch trang web của mình trong Chương 4. Việc hoàn thành các bước trong Chương 3 và 4 sẽ giúp
6a
g
H 1ỳ
n
H
A 0K
ô
y
N
C
o 2
©
C
t
T
F
H
bạn tạo một trang web toàn diện. Thứ tự của các bước có thể trùng lặp hoặc thay đổi tùy thuộc
vào mức độ phức tạp của trang web của bạn và số lượng người tham gia vào việc lập kế hoạch.
Điều quan trọng là phải coi trang web như một dự án hoàn chỉnh, trong đó mỗi bước và thành
phần phải bổ sung và phù hợp với kế hoạch cho các bước khác. Trước khi hoàn thiện kế hoạch trang
web của mình, bạn nên xem lại tất cả các bước để đảm bảo rằng không có xung đột giữa các bước
sau và các quyết định được đưa ra trước đó trong dự án.

e'
rs 6e
d 1o
a 0J
r 2
©
T
Mục tiêu
Sau khi hoàn thành chương này, bạn sẽ có thể:
1. Mô tả quy trình lập kế hoạch phát 3. Hoàn tất Bước 2: Xác định nội dung
triển website chung của website
2. Hoàn thành Bước 1: Xác định mục 4. Hoàn tất Bước 3: Chọn cấu
đích và đối tượng mục tiêu của trúc website
trang web
Bản quyền 2018 Cengage Learning. Đã đăng ký Bản quyền. Không được sao chép, quét hoặc sao chép toàn bộ hoặc một phần. WCN 02-200-203
72 Chương 3 Lập kế hoạch cho một trang web thành công: Phần 1
Quy trình lập kế hoạch phát triển trang web

Cách tốt nhất để đảm bảo sự thành công của bất kỳ dự án nào là lập kế hoạch cẩn thận. Cần phải có
sự chuẩn bị kỹ lưỡng để phát triển một trang web có thể đạt được mục tiêu cũng như thu hút và
gây ảnh hưởng đến khán giả. Tạo một trang web đòi hỏi bạn phải đầu tư nhiều thời gian và các
nguồn lực khác; lập kế hoạch giúp đảm bảo rằng quá trình phát triển trang web hiệu quả, tiết
kiệm chi phí và thành công. Trước khi bắt đầu tạo trang web đầu tiên, bạn phải phát triển một kế
hoạch chi tiết, chắc chắn cho trang web, được gọi là kế hoạch trang web hoặc kế hoạch thiết kế. Kế
hoạch này xác định mục đích, đối tượng, nội dung, cấu trúc, hệ thống định vị, thiết kế trực quan
cũng như chiến lược xuất bản và bảo trì. Thực hiện theo sáu bước chính được minh họa trong Hình 3-1
là một cách tốt để tiếp cận việc phát triển một kế hoạch trang web chi tiết.
BƯỚC 1: Xác định mục đích và đối tượng mục tiêu của trang web
BƯỚC 2: Xác định nội dung chung của website
BƯỚC 3: Chọn cấu trúc của trang web
BƯỚC 4: Chỉ định hệ thống điều hướng của trang web
BƯỚC 5: Thiết kế giao diện website
BƯỚC 6: Xây dựng kế hoạch kiểm tra, xuất bản và bảo trì trang web
Hình 3-1 Tạo một trang web thành công bắt đầu bằng việc phát triển một kế hoạch trang web chi tiết.
THIẾT KẾ Khi tạo một kế hoạch thiết kế, hãy đảm bảo có đồng nghiệp, người quản lý hoặc các
MẸO bên liên quan khác xem xét kế hoạch. Mặc dù bạn có thể nghĩ rằng thiết kế trực
quan là khía cạnh quan trọng nhất của trang web, nhưng trước tiên bạn cần xác định
mục đích, đối tượng, nội dung và cấu trúc. Những kết luận này ảnh hưởng đến các
quyết định liên quan đến việc tạo ra một thiết kế trực quan đáp ứng nhu cầu trang web của bạn.
Vì việc lập kế hoạch là rất quan trọng cho sự phát triển của một trang web thành công
nên cuốn sách này dành hai chương để thảo luận kỹ lưỡng về sáu bước được minh họa trong Hình 3-1.
Chương này thảo luận về các Bước 1 đến 3. Chương 4 thảo luận về các Bước 4 đến 6. Trong chương
này và các chương tiếp theo, một ví dụ thiết kế web cụ thể được sử dụng để giải thích các khái
niệm liên quan đến việc phát triển một kế hoạch thiết kế chi tiết. Trong kịch bản này, bạn là
trưởng bộ phận thiết kế web tại Fit4U, một công ty thương mại điện tử B2C mới tập trung vào
việc bán các sản phẩm và dịch vụ liên quan đến thể dục. Bạn cần làm việc với nhóm thiết kế web
của mình để phát triển kế hoạch trang web cho công ty mới.
Bước 1: Xác định mục đích và đối tượng của trang web 73
Bước 1: Xác định mục đích và đối tượng của trang web
Bước đầu tiên của bạn trong việc phát triển một kế hoạch thiết kế trang web vững chắc là xác định mục tiêu,
mục đích và đối tượng của trang web, sau đó xây dựng một tuyên bố mục đích bằng văn bản cho trang web.
Mục tiêu là kết quả bạn muốn trang web của mình đạt được trong một khung thời gian cụ thể; bạn có thể đặt ra
các mục tiêu riêng cho những tuần, tháng hoặc năm kinh doanh đầu tiên. Mục tiêu có thể bao gồm doanh số
bán hàng, số lượng khách truy cập hoặc tương tác trên mạng xã hội. Mục tiêu là những phương pháp bạn sẽ
sử dụng để hoàn thành mục tiêu của trang web. Mặc dù bất kỳ ai cũng có khả năng truy cập trang web của bạn
nhưng bạn phải xác định nhóm khách truy cập cụ thể mà bạn muốn tiếp cận. Nhận biết đối tượng mục tiêu của
trang web và biết mong muốn, nhu cầu cũng như kỳ vọng của họ sẽ cho phép bạn tạo một trang web mang lại
nhiều giá trị nhất cho đối tượng đó. Một tuyên bố mục đích chính thức bằng văn bản tóm tắt các mục tiêu và
mục tiêu của trang web của bạn để đảm bảo rằng chúng đáp ứng được mong đợi và nhu cầu của khán giả.
Mục tiêu trang web
Mặc dù một trang web có mục tiêu chính nhưng nó có thể sẽ có thêm các mục tiêu phụ. Ví dụ: trong ví
dụ của chương này, mục tiêu chính của trang web của bạn là bán sản phẩm hoặc dịch vụ. Bạn có thể đặt các
mục tiêu phụ hỗ trợ mục tiêu chính của trang web, chẳng hạn như cung cấp dịch vụ khách hàng, hướng dẫn khách
hàng về sản phẩm hoặc dịch vụ mới, thúc đẩy giao tiếp giữa nhân viên và khách hàng, thông báo cho các cổ đông
về sự phát triển kinh doanh hoặc thông báo cho khách hàng về những thay đổi trong hoạt động kinh doanh
trong ngành của bạn.
Trong ví dụ này, nhóm của bạn đã xác định mục tiêu chính và nhiều mục tiêu phụ cho trang web mới:
•Mục tiêu chính:
° Tăng doanh số bán các sản phẩm, quần áo và dịch vụ liên quan đến thể dục.
•Mục tiêu phụ:
° Thúc đẩy nhận thức về công ty cũng như các sản phẩm và sứ mệnh của công ty, đồng thời xây dựng một
cộng đồng khách hàng gắn kết và khách hàng tiềm năng.
° Thiết lập uy tín của công ty trong lĩnh vực kinh doanh tập trung vào thể dục.
° Hướng dẫn khách truy cập trang web về việc kết hợp thể dục vào cuộc sống hàng ngày.
° Thông báo cho các cổ đông và nhà đầu tư tiềm năng về kế hoạch và phát triển kinh doanh.
° Khuyến khích khách truy cập quay lại trang web bằng cách cung cấp thông tin cập nhật trong
hình thức blog với các bài viết của các chuyên gia thể dục.
Mục tiêu trang web
Sau khi xác định mục tiêu của trang web, bước tiếp theo của bạn là xác định mục tiêu của trang web—
các phương pháp mà nhóm phát triển của bạn sẽ sử dụng để hoàn thành mục tiêu. Ví dụ: nếu mục tiêu chính là
bán sản phẩm hoặc dịch vụ thì mục tiêu để hoàn thành mục tiêu đó có thể bao gồm việc đăng lời chứng thực từ
những khách hàng đã mua sản phẩm hoặc dịch vụ hoặc giảm giá 20% cho những khách hàng mua sản phẩm hoặc
dịch vụ ở 30 ngày tiếp theo.
Bạn và nhóm của mình đã xác định các mục tiêu sau cho trang web Fit4U để hoàn thành các mục tiêu chính
và phụ của trang web mới:
•Phát triển một trang web hấp dẫn, nhiều thông tin và dễ sử dụng theo RWD
nguyên tắc để nâng cao nhận thức trực tuyến về công ty.
•Cung cấp thông tin và lời khuyên có thẩm quyền tại trang web để tạo dựng uy tín.
•Bao gồm các liên kết đến các bài viết và mẹo nhanh để hướng dẫn khách truy cập trang web về
tầm quan trọng của việc có vóc dáng cân đối và khỏe mạnh.
•Sử dụng các công cụ truyền thông xã hội để thông báo và thu hút khách hàng hiện tại và tiềm năng
và các nhà đầu tư.
Tại sao CTA quan

•Cung cấp các công cụ trực tuyến để khuyến khích khách truy cập trang web thực hiện các thay đổi để nâng cao
ỏđ
H
trọng?
iá
p
mức độ thể lực.

CTA giúp bạn đo lường
sự thành công của trang
Mỗi trang web nên bao gồm lời kêu gọi hành động trong danh sách mục tiêu của nó. Lời kêu gọi hành động (CTA)
web bằng cách cung cấp
các phương pháp để là một gợi ý hoặc ưu đãi yêu cầu khách truy cập trang web tương tác với trang web bằng cách mua sản phẩm,
khách truy cập tương tác với
theo dõi (các) tài khoản mạng xã hội của công ty, quyên góp, chia sẻ hoặc bình luận về một bài viết, yêu
trang mạng. CTA là
cầu một cuộc hẹn, đăng ký tài khoản , hoặc đăng ký tham gia một sự kiện hoặc chương trình.
thước đo lợi nhuận
chi phí đầu tư (ROI),
là sự so sánh giữa chi Bạn và nhóm của bạn xác định lời kêu gọi hành động sau đây mà bạn sẽ kết hợp vào trang web Fit4U để giúp đạt
phí chi tiêu và thu được mục tiêu của trang web:
nhập được tạo ra.
Để biết thêm thông tin, hãy •Mua sản phẩm
sử dụng công cụ tìm kiếm
•Đăng ký hồ sơ tài khoản
để tìm kiếm lời kêu gọi hành
động trên trang web. •Theo dõi hồ sơ truyền thông xã hội của trang web
CỦA BẠN Khám phá lời kêu gọi hành động

XOAY
1. Tìm kiếm ba trang web bạn thường truy cập và mở từng 3. Ghi chú các lời kêu gọi hành động bổ sung
trang web trong tab trình duyệt mới. bạn có thể thêm vào trang chủ hoặc các trang
tiếp theo trên trang web.
2. Ghi lại bất kỳ lời kêu gọi hành động nào bạn tìm thấy. Những đề xuất này có thể giúp nâng cao mục tiêu của
Hãy ghi chú xem liệu lời kêu gọi hành động có trang web như thế nào?
nằm trên trang chủ hoặc trang tiếp theo. 4. Gửi những phát hiện của bạn theo mẫu mà người hướng dẫn
Mục đích của lời kêu gọi hành động là gì? của bạn yêu cầu.
THIẾT KẾ Bạn sẽ liên tục xem lại các mục tiêu và mục tiêu của mình khi hoàn thành kế hoạch trang web. Trước khi
MẸO xuất bản trang web, bạn nên đánh giá xem nội dung, cấu trúc và thiết kế của trang web giúp đáp
ứng các mục tiêu và mục tiêu của trang web như thế nào.
Hồ sơ đối tượng mục tiêu
Để bắt đầu quá trình tạo hồ sơ về đối tượng mục tiêu của trang web, hãy tưởng tượng khách truy cập lý
tưởng cho trang web của bạn: họ là ai và tại sao họ truy cập trang web của bạn. Hãy nghĩ đến trải nghiệm trang
web của khách truy cập sẽ mang lại cho họ những gì và hành động của họ có thể giúp bạn đạt được mục tiêu trang
web của mình như thế nào. Hồ sơ đối tượng mục tiêu là tổng quan dựa trên nghiên cứu bao gồm thông tin về
nhân khẩu học và tâm lý của khách truy cập trang web tiềm năng
đặc trưng. Các đặc điểm nhân khẩu học bao gồm giới tính, nhóm tuổi, trình độ học vấn, thu
nhập, địa điểm và các đặc điểm khác xác định khách truy cập trang web của bạn là ai. Các
đặc điểm tâm lý bao gồm các liên kết nhóm xã hội, lựa chọn lối sống, sở thích mua hàng và
liên kết chính trị. Những đặc điểm này và các đặc điểm khác giải thích lý do tại sao khách
truy cập có thể muốn truy cập trang web của bạn và cách họ có thể tương tác với trang web
của bạn. Hồ sơ đối tượng mục tiêu rất quan trọng khi đưa ra quyết định liên quan đến
giao diện người dùng (UI) và trải nghiệm người dùng (UX).
Đảm bảo rằng hồ sơ đối tượng mục tiêu của bạn phù hợp với mục tiêu và mục đích của bạn. THIẾT KẾ
Bạn có thể cần phải sửa lại kế hoạch trang web của mình để đảm bảo rằng đối tượng mục tiêu MẸO
sẽ tương tác với trang web của bạn theo cách giúp trang web của bạn đạt được mục tiêu.
Một trang web có thể có

Sử dụng nghiên cứu và báo cáo do các công ty chuyên nghiên cứu nhân khẩu học và
nhiều hơn một đối
ỏđ
iá
p H
tâm lý học chuẩn bị và bán, bạn có thể hỏi và trả lời các câu hỏi tương tự như sau để phát
tượng mục tiêu?
triển hồ sơ đối tượng mục tiêu chính thức cho trang web của mình: Có, nhiều trang web có
nhiều đối tượng mục tiêu.

•Độ tuổi khán giả tiềm năng của bạn là bao nhiêu?
Ví dụ: trang web
•Giới tính, trình độ học vấn và tình trạng hôn nhân của khán giả là gì? thương mại điện tử Office
Depot quảng bá các cửa

• Nghề nghiệp và mức thu nhập điển hình của khán giả là gì?
hàng truyền thống dành
•Khán giả của bạn thường sử dụng những loại thiết bị nào để truy cập cho khách hàng ghé thăm,
trang mạng? bán thiết bị văn phòng
và vật tư trực tuyến cho

•Đối tượng khán giả của bạn thường sử dụng hồ sơ truyền thông xã hội nào? người tiêu dùng cá
•Khán giả sống ở đâu? nhân và cung cấp các
dịch vụ chuyên biệt hướng

•Các nhóm xã hội của khán giả là gì, lựa chọn lối sống, sở thích, tới khách hàng doanh nghiệp.
và sở thích mua hàng?
•Lý do chính và phụ của khán giả là gì?

truy cập và tương tác với trang web?
Làm cách nào để tạo một
Dựa trên thông tin này, nhóm của bạn đã phát triển hồ sơ đối tượng mục tiêu cho iá
p ỏđ
H
hồ sơ đối tượng mục
trang web mới cho ví dụ Fit4U, như trong Hình 3-2. tiêu?
Các nguồn như Cục Lao
động Hoa Kỳ
Thống kê, Hoa Kỳ
Cục điều tra dân số và

Trang web Fit4U Cục quản lý doanh
Hồ sơ đối tượng mục tiêu nghiệp nhỏ
cung cấp tài nguyên
để xác định nhân

Khách truy cập trang web điển hình
khẩu học của khán giả
• Từ 20 đến 45 tuổi nói chung.
• 60% có khả năng là nữ và 40% có khả năng là nam Hiện có các tài
• Có tối thiểu hai năm đại học nguyên dành riêng cho
• Có thu nhập hàng năm ít nhất là 40.000 USD ngành, chẳng hạn như Hiệp
• Sống chủ yếu ở khu vực ngoại thành hội ngành Thể thao & Thể
hình dành cho các trang
• Sử dụng mạng xã hội thường xuyên, chủ yếu qua điện thoại thông minh
web về thể dục như Fit4U. Để
• Độc thân hoặc mới kết hôn, chưa có con
biết thêm thông tin về
• Nhận thức được xu hướng tập thể dục hiện tại và cam kết thực hiện lối sống lành mạnh
cách phát triển hồ sơ
đối tượng mục tiêu, hãy sử
dụng công cụ tìm kiếm

Hình 3-2 Hồ sơ đối tượng mục tiêu xác định khách truy cập trang web tiềm năng bằng cách xác định họ là ai và tại sao họ có thể
để tìm cách tạo hồ sơ
truy cập trang web của bạn.
đối tượng mục tiêu
trên trang web.
Sau khi bạn xác định được các thành viên của đối tượng mục tiêu, bước tiếp theo của bạn là xác định
mong muốn, nhu cầu và mong đợi của khán giả.
Hồ sơ đối tượng mục tiêu

Mong muốn, nhu cầu và mong đợi của đối tượng mục tiêu
ỏđ
H
ảnh hưởng đến UX như

iá
p
thế nào?
Một trang web thành công đáp ứng mong muốn, nhu cầu và mong đợi của khán giả theo cả cách
Các quyết định về trải
nghiệm người dùng (UX) chung và cụ thể. Nhìn chung, tất cả khán giả đều mong đợi một trang web hấp dẫn, thú vị và được tổ
dựa trên hồ sơ đối tượng chức tốt, truyền tải thông tin hữu ích và dễ sử dụng. Kỳ vọng cụ thể của khán giả đối với một trang
bao gồm phông chữ, màu sắc
web sẽ khác nhau tùy theo mục đích của trang web. Ví dụ: trang web B2C phải cung cấp các sản phẩm hoặc
và các lựa chọn liên
dịch vụ mà khách truy cập muốn mua để đáp ứng mong đợi cụ thể của khán giả. Nếu một trang web không đáp
quan đến thiết kế cài đặt
tâm trạng khác, cũng như ứng được những kỳ vọng khác nhau của đối tượng mục tiêu, khách truy cập sẽ đưa hoạt động kinh doanh của
việc sử dụng và phân phối đa họ đi nơi khác.

phương tiện cũng như
Sau khi bạn xác định đối tượng mục tiêu của trang web, hãy tiến hành đánh giá nhu cầu bằng cách
các quyết định về cấu trúc và điều hướng.
trả lời các câu hỏi như sau để xác định mong muốn, nhu cầu và mong đợi của đối tượng mục tiêu:
Để biết thêm thông tin, hãy
sử dụng công cụ tìm kiếm

để tìm kiếm thiết kế
•Khán giả mong đợi đạt được điều gì khi truy cập vào trang web của bạn?
web cân nhắc UX.
•Khán giả có thường xuyên sử dụng các công cụ truyền thông xã hội để chia sẻ và bình luận về
Nội dung trang web?
•Các vấn đề về khả năng sử dụng hoặc khả năng tiếp cận nào là quan trọng đối với khán giả?
• Khán giả thường là người dùng web có kinh nghiệm hay thiếu kinh nghiệm?
•Liệu khán giả có bất kỳ thành kiến, chuẩn mực hoặc phong tục văn hóa nào mà bạn phải không?
phù hợp với thiết kế và tổ chức của trang web?
Nhóm của bạn đã thực hiện đánh giá nhu cầu và xác định mong muốn hoặc hành vi, nhu cầu hoặc
yêu cầu chính của đối tượng mục tiêu cũng như kỳ vọng đối với ví dụ về trang web mới, như trong Hình
3-3.
Trang web Fit4U
Mong muốn, nhu cầu và mong đợi của đối tượng mục tiêu
Khách truy cập trang web điển hình:
Hành vi cư xử
• Thường xuyên truy cập các trang web có nội dung, bài viết và mẹo sản phẩm hiện tại
• Tìm kiếm lời khuyên về cách đưa ra những lựa chọn có ý thức về thể chất
• Chia sẻ bài viết và sản phẩm với người khác bằng mạng xã hội
Yêu cầu
• Truy cập web bằng nhiều loại thiết bị
• Ưu tiên các trang web đáp ứng tiêu chuẩn truy cập web
• Chọn các trang web có điều hướng trang web dễ sử dụng
Kỳ vọng
• Các trang web hấp dẫn, chuyên nghiệp chứa nội dung đáng tin cậy
• Các trang web nhấn mạnh vào UI/UX và đáp ứng các tiêu chuẩn về RWD và
khả năng tiếp cận
• Tích hợp phương tiện truyền thông xã hội để xây dựng cộng đồng và cho phép chia sẻ nội dung
Hình 3-3 Một trang web thành công đáp ứng được mong đợi của khán giả mục tiêu bằng cách tạo ra một trang web có nội dung
phong phú, hấp dẫn và hữu dụng.
THIẾT KẾ Để tạo một trang web thành công, bạn nên đánh giá mong muốn, nhu cầu và mong đợi của
MẸO đối tượng mục tiêu. Những yếu tố này xác định cách khán giả sẽ tương tác với trang web của
bạn, cho phép bạn thiết kế trang web để làm hài lòng họ.
Nếu bạn có nguồn lực hạn chế và khung thời gian eo hẹp cho việc phát triển trang web ban đầu, hãy Việc xác định mong
iáỏđ
H
muốn, nhu cầu và kỳ vọng
p
bắt đầu bằng cách xác định hai hoặc ba nhu cầu hàng đầu của đối tượng mục tiêu và lập kế hoạch trang
của đối tượng mục tiêu có
web của bạn để đáp ứng những nhu cầu đó. Sau đó, sau khi bạn xuất bản trang web, hãy tiếp tục thu
phải là quá trình chỉ diễn ra
hút phản hồi từ đối tượng mục tiêu của bạn để thiết lập những mong muốn, nhu cầu và mong đợi bổ sung, một lần không?
đồng thời cập nhật trang web của bạn để đáp ứng chúng khi cần thiết. Không. Sau khi tạo trang web,
bạn nên liên tục thu thập
phản hồi từ đối tượng mục
Tuyên bố mục đích trang web tiêu để cập nhật hồ sơ đối
tượng mục tiêu và tinh
chỉnh hoạt động của trang

Sau khi xác định mục tiêu, đối tượng và đối tượng của trang web, bạn nên tạo một tuyên bố mục đích,
web.
đây là một bản tóm tắt chính thức bằng văn bản về lý do xuất bản trang web. Một tuyên bố mục đích được
viết tốt sẽ tổng hợp thành một vài từ lý do hoặc các lý do khiến bạn xuất bản trang web của mình và giải nội dung.
thích các mục tiêu chung của trang web cũng như các mục tiêu cụ thể được thiết kế để đạt được các
mục tiêu đó. Nó cũng bao gồm một bản tóm tắt ngắn gọn về nhân khẩu học và mong đợi của đối tượng mục
tiêu. Hình 3-4 minh họa tuyên bố mục đích đã được phê duyệt cho trang web Fit4U mới.
Trang web Fit4U

mục tiêu
chính
Tuyên bố mục đích:
Mục tiêu của website Fit4U trong năm đầu tiên là tăng doanh số bán sản phẩm
Và dịch vụ. Để thực hiện được điều này, trang web phải:
• Thúc đẩy nhận thức trực tuyến về công ty và xây dựng cộng đồng
khách hàng và nhà đầu tư

mục tiêu
phụ
• Xây dựng uy tín của công ty bằng cách cung cấp lời chứng thực của khách hàng
• Hướng dẫn khách truy cập trang web về xu hướng tập thể dục hiện tại
Công ty sẽ phát triển một hệ thống hấp dẫn và dễ sử dụng, không phụ thuộc vào thiết bị
trang web để thực hiện các mục tiêu này. Trang web sẽ đáp ứng những điều sau đây
mục tiêu:
• Cung cấp các bài viết, thủ thuật và đánh giá sản phẩm do các chuyên gia trong ngành viết
• Bao gồm hình ảnh và video để tạo sự quan tâm và giúp ích cho khách truy cập trang web
kết hợp xu hướng tập thể dục
• Cung cấp các công cụ thương mại điện tử như giỏ hàng, danh sách mong muốn và mục tiêu
các sản phẩm được đề xuất nhằm hợp lý hóa và tăng cường việc mua hàng
kinh nghiệm
• Sử dụng các nền tảng và công cụ truyền thông xã hội để thu hút khách hàng
Hình 3-4 Tuyên bố mục đích giải thích các mục tiêu tổng thể của trang web và các mục tiêu cụ thể sẽ được sử dụng để đạt được các mục tiêu đó.
Tuyên bố mục đích có thể hoạt động như một thỏa thuận giữa nhà thiết kế web và khách THIẾT KẾ
hàng, để đảm bảo rằng trang web không chỉ đáp ứng nhu cầu của khán giả mà còn cả mục MẸO
tiêu của chủ sở hữu trang web.
Bước 2: Xác định nội dung chung của trang web

Một trang web có thể sẽ bao gồm nhiều trang web bao gồm sự kết hợp của văn bản, hình ảnh, âm thanh,
video, hình động và đa phương tiện. Phần này cung cấp tổng quan về ba loại trang web: trang chủ, trang
phụ và trang đích hoặc trang nhập. Ngoài ra, phần này còn giới thiệu nội dung có thể xuất hiện trên
các trang này.
Có phải khách truy cập luôn

vào một trang web từ
Trang chủ, công ty con và trang đích
trang chủ của nó
Hầu hết các trang web bao gồm một trang chủ và các trang phụ. Trang chủ là điểm neo cho toàn bộ
trang?
Không. Khách truy cập trang web trang web và các trang phụ cung cấp nội dung chi tiết và sự quan tâm. Khách truy cập trang web sẽ
có thể truy cập một trang truy cập các trang phụ bằng cách sử dụng các công cụ điều hướng mà trang web của bạn cung cấp, hộp
đích, đi theo các liên kết từ tìm kiếm hoặc liên kết từ trang chủ hoặc trang đích. Bạn sẽ tìm hiểu thêm về cách cấu trúc các trang
các trang web khác để xem các
phụ ở phần sau của chương này. Một số trang web cũng có trang đích, là trang mà trình duyệt của bạn
trang cụ thể trên trang web
của bạn hoặc sử dụng các công

điều hướng đến khi bạn nhấp vào liên kết trong quảng cáo, email hoặc quảng cáo trực tuyến khác từ một
cụ tìm kiếm để định vị các trang web khác.

trang cụ thể trên trang web của bạn.
Vì những lý do này,
điều quan trọng là tất TRANG CHỦ Như bạn đã biết, trang chính của một trang web là trang chủ của nó.
cả các trang trên trang web Nói chung, trang chủ là trang web đầu tiên mà khách truy cập nhìn thấy. Trang chủ phải chỉ ra những
của bạn đều phải chứa các
điều sau, như được hiển thị trên trang chủ của Trader Joe trong Hình 3-5.
yếu tố duy trì sự thống
nhất và nhận dạng trực quan.
Ai? được trả lời
bằng logo và tên công

ty
Ở đâu? được trả lời bằng
các liên kết
Trình chiếu
dẫn đường
Tại sao? trả lời bằng tin tức

và thông báo
Cái gì? đã trả lời
bằng hình ảnh và văn bản

e'
rs 6e
d 1o
a 0J
r 2
©
T
Hình 3-5 Trang chủ của trang web phải trả lời câu hỏi của khách truy cập là Ai?, Cái gì?, Tại sao? và Ở đâu? câu hỏi.
•Ai: Tên công ty ở dạng văn bản, logo đồ họa, dòng thẻ, ký hiệu bản quyền và
các yếu tố tương tự xác định rõ ràng ai sở hữu và xuất bản trang web.
•Cái gì: Văn bản và hình ảnh tóm tắt cho khách truy cập biết nội dung nào có sẵn tại
trang web và lời kêu gọi hành động nào được yêu cầu hoặc bắt buộc.
Bước 2: Xác định nội dung chung của website 79
•Tại sao: Văn bản, hình ảnh hoặc liên kết tạo nên giá trị của trang web và đưa ra lý do
tại sao một người nên truy cập và tương tác với trang web.
•Ở đâu: Các liên kết điều hướng dễ dàng xác định để cho biết thông tin cụ thể ở đâu
hoặc các tính năng được tìm thấy và/hoặc phương pháp tìm kiếm nội dung trang web.
Câu trả lời cho Ai? câu hỏi phải được thể hiện rõ ràng trên toàn bộ trang web bằng cách sử dụng logo
công ty, liên kết liên hệ và thông báo bản quyền. Trang chủ của một trang web thương mại điện tử có thể trả
lời câu hỏi Cái gì? câu hỏi bằng cách sử dụng trình chiếu hoặc cửa sổ theo thẻ để hiển thị nhiều loại sản
phẩm hoặc dịch vụ được bán trên trang web hoặc giải thích cách người dùng có thể tạo tài khoản và theo dõi
Tôi nên đưa thông tin gì
hồ sơ truyền thông xã hội của trang web. Cung cấp
ỏđ
H
lên trang chủ của mình?
iá
p
khách truy cập trang web có thông tin về các chứng nhận hoặc giải thưởng cho một trang web thông tin hoặc tổ
chức hoặc chia sẻ báo giá của khách hàng cho một trang web thương mại điện tử khuyến khích khách truy Đơn giản nhất, trang chủ cho
người truy cập trang web

cập chọn trang web của bạn hơn những trang web khác và trả lời câu hỏi Tại sao? câu hỏi.
biết nội dung họ có thể
Trang chủ của trang web B2B bán dịch vụ lưu trữ web có thể có liên kết đến các trang nêu chi tiết các loại dịch vụ
mong đợi tìm thấy và cách
lưu trữ được cung cấp, phí, thông tin hỗ trợ khách hàng, thông tin chính sách bảo mật và quyền riêng tư, v.v. tìm thấy nội dung đó.
để trả lời câu hỏi Ở đâu? câu hỏi. Để biết thêm thông tin về
chiến lược tạo trang

Trang chủ của một trang web lớn phải bao gồm tính năng tìm kiếm, là một hộp văn bản để người dùng nhập cụm
chủ, hãy sử dụng công cụ
từ tìm kiếm vào; công cụ tìm kiếm sau đó sẽ tìm kiếm trang web cho cụm từ đó. Tính năng tìm kiếm hoạt động như
tìm kiếm để tìm kiếm các
công cụ tìm kiếm nhưng chỉ tìm kiếm trong trang web để có kết quả phù hợp. mẹo nội dung trang chủ.
Trang chủ của trang web phải chứa các yếu tố thu hút khách truy cập và khuyến THIẾT KẾ
khích sự khám phá hoặc tương tác sâu hơn. Trang chủ cũng phải đủ khác biệt để MẸO
nổi bật làm trang chính nhưng vẫn kết nối trực quan với các trang khác trên trang
web.
Ngoài ra, trang chủ của trang web phải chứa các yếu tố thiết lập nhận dạng hình ảnh của trang web. ỏđ
H
Tại sao thương hiệu lại
quan trọng đến vậy?

iá
p
Chương 2 đã giới thiệu các khái niệm về xây dựng thương hiệu và sử dụng các yếu tố thiết kế để tạo và duy trì
Xây dựng thương hiệu
bản sắc hình ảnh. Các tổ chức và công ty chi một khoản lớn
cho phép một công
lượng thời gian và tiền bạc để xác định, tạo ra và duy trì một thương hiệu tích cực, dễ nhận biết. Như bạn đã ty được nhận biết bằng
học ở Chương 2, bạn có thể khai thác sức mạnh của thương hiệu trên trang chủ bằng cách sử dụng các yếu tố thiết kế— logo, cách phối màu hoặc
khẩu hiệu. Thông thường,

hình ảnh, logo, phông chữ và cách phối màu—riêng lẻ hoặc kết hợp để thiết lập và duy trì nhận dạng hình ảnh.
việc xây dựng thương hiệu
thành công đến mức công

Một cách để thêm nội dung vào trang chủ mà không tạo ra sự lộn xộn là sử dụng tab ty tượng trưng cho một
cửa sổ, trình chiếu hoặc băng chuyền để cung cấp quyền truy cập vào một số bài viết, video hoặc nội dung sản phẩm hoặc dịch vụ cụ
thể. Ví dụ: tên và logo

khác cùng một lúc. Trên hầu hết các trang, những phần tử này hiển thị sự xoay vòng của các bài viết hoặc hình ảnh và
của McDonald's và Hội chữ
tự động chuyển sang tab hoặc màn hình tiếp theo, cũng như cung cấp cho người dùng các điều khiển để điều hướng đến thập đỏ Hoa Kỳ lần lượt đồng
hoặc tạm dừng ở một màn hình nhất định (Hình 3-5). Nhấp vào màn hình trong cửa sổ theo thẻ, trình chiếu hoặc nghĩa với thức ăn nhanh
băng chuyền sẽ mở trang nội dung hoàn chỉnh trong trình duyệt. Bố cục thẻ như bố cục trên trang chủ Hallmark và cứu trợ thiên tai.
(Hình 3-6) cũng cung cấp phương pháp hiển thị nhiều chủ đề hoặc bài viết bằng cách trình bày từng chủ đề trong
một khu vực hình vuông hoặc hình chữ nhật. Nội dung bố cục thẻ có thể bị ảnh hưởng bởi các tìm kiếm trước đây của
khách truy cập trang web hoặc các lượt truy cập trang web và việc cung cấp các chế độ xem nội dung tùy chỉnh.
Logo
dẫn đường
bố trí thẻ
6C
,kraml
y
p 1L
ấ
é
l 0L
i
h
a 2
©
G
p
H
Hình 3-6 Bố cục thẻ cung cấp các vùng có thể nhấp để hiển thị nhiều chủ đề hoặc bài viết.
CỦA BẠN Khám phá nội dung trang chủ

XOAY
1. Sử dụng công cụ tìm kiếm để tìm các trang chủ sau: 4. Hãy lưu ý rằng, theo ý kiến của bạn, trang web
Bảo tàng Guggenheim, AutoZone và Uvault. Mở mỗi thực hiện tốt nhất việc trả lời bốn câu hỏi này
trang chủ trong một tab trình duyệt riêng biệt. Ghi và trang web thực hiện công việc kém nhất. Bạn sẽ
lại đối tượng mục tiêu có thể là ai cho mỗi trang web. đưa ra đề xuất thiết kế nào để cải thiện từng
trang chủ về mặt trả lời những câu hỏi này?
2. Xem lại từng trang chủ và xác định xem nội dung của
mỗi trang trả lời các câu hỏi Ai?, Cái gì?, Tại sao?
và Ở đâu? câu hỏi. 5. Gửi những phát hiện của bạn theo định dạng
3. Tóm tắt đánh giá trang chủ của bạn. Thảo luận về nội mà người hướng dẫn của bạn yêu cầu.
dung được sử dụng tại mỗi trang web để giải quyết
bốn câu hỏi này.
CÁC TRANG PHỤ Trong Chương 2, bạn cũng đã biết rằng một trang web thường bao
gồm nhiều trang phụ hoặc trang cơ bản cung cấp chi tiết về thông tin tóm tắt
được hiển thị trên trang chủ của trang web. Các liên kết kết nối trang chủ với
một trang phụ và khi cần thiết, kết nối một trang phụ với một trang phụ khác. Ví dụ,
Các trang phụ điển hình được tìm thấy tại một trang web thương mại điện tử bao gồm các trang cung cấp những
thông tin sau:
•Danh mục sản phẩm
•Thông tin giỏ hàng và thanh toán
•Thông tin tài khoản khách hàng
•Thông tin dịch vụ khách hàng
•Thông tin liên lạc
•Chính sách quyền riêng tư và thông tin bảo mật
•Một blog
Mỗi trang phụ tại một trang web phải bao gồm các thành phần giống nhau—tên, logo,
phông chữ, cách phối màu—làm trang chủ để mang lại sự thống nhất và quảng bá bản sắc hình ảnh.
Hình 3-7 mô tả hai trang phụ tại trang web Hallmark; so sánh các trang này với trang chủ được hiển
thị trong Hình 3-6 minh họa cách Hallmark đã triển khai sự thống nhất về mặt hình ảnh trên toàn
bộ trang web của mình. Ngoài ra, giống như hai trang phụ của Hallmark, mỗi trang phụ tại một
trang web phải cung cấp liên kết quay lại trang chủ của trang web đó.
Logo
dẫn đường
6C
,kraml
y
p 1L
ấ
é
l 0L
i
h
a 2
©
G
p
H
Hình 3-7 Các trang phụ phải bao gồm hầu hết các yếu tố nhận dạng hình ảnh giống như trang chủ.
Khám phá các loại trang phụ CỦA BẠN

XOAY
1. Sử dụng công cụ tìm kiếm để tìm ít nhất năm để xây dựng thương hiệu và tính nhất quán. Các trang
các trang web thương mại. Bao gồm hai B2C và web khác nhau và liên quan đến trang chủ như thế
hai trang web B2B và một trang web C2C. nào?
Mở mỗi trang web trong tab riêng của nó. 3. Liệt kê các danh mục trang con tiêu biểu có ở từng loại
2. Xem xét các loại trang phụ được cung cấp tại mỗi website. website thương mại.
Đánh giá các trang web Hãy chuẩn bị để thảo luận về những phát hiện của bạn trong lớp.
Tôi nên đặt gì trên trang

TRANG Đích Như bạn đã học ở Chương 1, trang đích là một trang xuất hiện khi khách truy cập đến một trang
ỏđ
H
đích của mình?

iá
p
web bằng cách nhấp vào liên kết, quảng cáo hoặc kết quả tìm kiếm. Các nhà tiếp thị web sử dụng phương
tiện truyền thông xã hội, chiến dịch email và tối ưu hóa công cụ tìm kiếm (SEO)
Trang đích phải bao gồm văn
bản liên quan trực kỹ thuật để tạo khách hàng tiềm năng đến trang đích. Các trang web sử dụng trang đích làm công cụ tiếp thị để
tiếp đến truy vấn tìm kiếm đo lường tính hiệu quả của quảng cáo bằng cách đánh giá số lần trang được truy cập và liệu khách truy
hoặc quảng cáo mà khách truy
cập có tiếp tục hoàn tất giao dịch trên trang web hay không. Trang đích thường có một trong hai mục
cập trang web sử dụng để truy
đích: cung cấp thông tin tham khảo và cụ thể cho khách hàng về sản phẩm hoặc sự kiện hoặc khuyến khích
cập trang đích. Để biết
thêm thông tin về khách truy cập trang web hoàn tất giao dịch bán hàng hoặc tương tác cụ thể khác.
cách tạo trang đích hiệu
quả, hãy sử dụng công

Trong ví dụ về trang web Fit4U, bạn và nhóm thống nhất về cấu trúc cho trang web mới,
cụ tìm kiếm để tìm kiếm
sẽ bao gồm một trang chủ và nhiều trang phụ, như trong Hình 3-8.
nội dung trang đích.
Trang web Fit4U
Trang web
Trang web sẽ chứa các loại trang sau:

• Trang chủ có bố cục trình chiếu
• (Các) trang đích quảng cáo tương ứng với kế hoạch tiếp thị
chiến dịch
• Trang tóm tắt Giới thiệu về chúng tôi, cùng với Báo cáo thường niên, Nhóm quản lý và
Trang chi tiết lịch sử
• Trang chứng thực của khách hàng
• Các trang sản phẩm, bao gồm trang tổng quan và các danh mục dành cho Video,
Đào tạo và quần áo
• Trang Liên hệ với chúng tôi có các liên kết dịch vụ khách hàng, số điện thoại và mạng xã hội
liên kết truyền thông
Hình 3-8 Trang web Fit4U sẽ bao gồm một trang chủ và nhiều trang phụ.
Nội dung giá trị gia tăng
Chống lại sự cám dỗ để lấp đầy trang web của bạn bằng nội dung nhằm mục đích lấp đầy các trang web.
Bạn nên chọn lọc, dựa trên việc lựa chọn các yếu tố về mức độ hiệu quả mà chúng sẽ đóng góp cho thông
điệp và mục đích của trang web cũng như cách khán giả của bạn sẽ được hưởng lợi từ nội dung. Nội dung
đồ họa thông
nhằm nâng cao mục đích của trang web sẽ tăng thêm giá trị cho trang web chứ không chỉ lấp đầy không gian
trên trang. Nội dung giá trị gia tăng là thông tin phù hợp, giàu thông tin và kịp thời; chính xác và chất
ỏđ
H
tin là gì?
iá
p
Infographic là dữ liệu lượng cao; và có thể sử dụng được.

hoặc thông tin được trình
Nói chung, bạn nên tạo các thành phần nội dung gốc được chuẩn bị riêng cho web thay vì chọn các thành
bày một cách trực quan,
phần nội dung hiện có được thiết kế để in. Ví dụ: trên trang Giới thiệu về chúng tôi của trang web, hãy
chẳng hạn như trong biểu
đồ hoặc kim tự tháp hoặc

kết hợp một đoạn video ngắn về Giám đốc điều hành giải thích về
để hiển thị một chuỗi sự kiện . lịch sử và sứ mệnh của công ty chứ không phải là dòng thời gian hoặc văn bản khác.
Nếu bạn phải sử dụng thành phần nội dung hiện có từ một phương tiện khác, bạn nên sử dụng lại
hoặc sửa đổi thành phần đó cho web. Việc tái sử dụng nội dung thường liên quan đến việc rút ngắn hoặc viết
lại văn bản, thêm siêu liên kết vào thông tin nền hoặc thông tin bổ sung, quét lại hoặc thay đổi ảnh, tạo
đồ họa thông tin và chỉnh sửa hoặc phân đoạn âm thanh và video. Quan trọng nhất, nó đòi hỏi tư duy sáng
tạo và lưu ý đến môi trường web cũng như nhu cầu và mong đợi của khán giả.
Tạo nội dung mới hoặc tái sử dụng nội dung in để nó tăng thêm giá trị. Thêm thương hiệu trực THIẾT KẾ
quan vào nội dung văn bản của bạn để phù hợp với phần còn lại của trang web. MẸO
Tài liệu phạm vi

Các tiêu chí sau đây giúp bạn xác định xem nội dung bạn định thêm có đáng giá hay không, bất công cộng là gì?
iá
p ỏđ
H
kể bạn đang xem xét hình ảnh, hoạt ảnh, tính tương tác hay nội dung được tạo động trên trang web của mình. Tôn Quyền đối với các tài
liệu thuộc phạm vi
trọng bản quyền và ghi công cho nội dung bạn sử dụng lại từ nguồn khác, nếu thích hợp.
công cộng thuộc về công
chúng nói chung. Ví dụ
Chỉ sự sẵn có của công nghệ tiên tiến không bao giờ là lý do chính đáng để sử dụng nó. Yếu tố nội dung phải bao gồm tài liệu
đáp ứng tất cả các tiêu chí sau:
cũ hơn mà bản quyền đã hết
hạn, tài liệu mới hơn được
•Nó tăng thêm giá trị cho trang web.
người sáng tạo rõ ràng
•Nó thúc đẩy mục đích của trang web. đưa vào phạm vi công
cộng và tác phẩm của
•Nó nâng cao trải nghiệm của khách truy cập tại trang web. chính phủ Hoa Kỳ,
chẳng hạn như các ấn
•Nó khuyến khích sự tương tác.
phẩm hoặc ảnh không
được bảo vệ bản quyền.
VĂN BẢN Hãy nhớ rằng, khách truy cập thường quét văn bản trang web để tìm thông tin thay vì đọc văn bản từng Bản quyền hoặc bằng sáng
chế không bảo vệ
chữ. Tránh viết đoạn văn dài và chia văn bản bằng hình ảnh, liên kết và đa phương tiện. Khi viết văn bản
tài liệu thuộc phạm vi
gốc, hãy làm theo các hướng dẫn viết cho web được giới thiệu ở Chương 2. Bạn cũng có thể làm theo các hướng công cộng. Để biết
dẫn tương tự để sử dụng lại văn bản xuất bản in cho web: thêm thông tin, hãy
tìm kiếm các tài

liệu thuộc phạm vi công cộng.
• Cắt nhỏ văn bản để có thể quét được.
•Đặt thông tin giải thích hoặc chi tiết trên các trang phụ, được liên kết.
• Giữ nội dung ở một trang nếu có thể để tránh bị cuộn.
•Sử dụng giọng nói chủ động, động từ hành động và giọng điệu thân thiện.
•Xóa các từ và cụm từ chuyển tiếp như đã nêu trước đó, tương tự, và do đó, có thể không phù hợp với văn bản
bị phân đoạn.
Khám phá cách sử dụng lại văn bản cho web CỦA BẠN
XOAY
1. Sử dụng công cụ tìm kiếm để tìm kiếm các mẹo và đoạn văn trong báo cáo hoặc tài liệu.
lời khuyên về việc tái sử dụng văn bản cho web. Để ghi nhận, hãy trích dẫn nguồn của văn bản
2. Mở một báo cáo hoặc tài liệu bạn đã tạo cho lớp được sử dụng lại ở dòng bên dưới văn bản.
này hoặc lớp khác bao gồm một số 4. Gửi báo cáo hoặc tài liệu gốc cùng với văn bản
các trang văn bản. Bạn nên thay đổi văn bản như được sửa lại cho người hướng dẫn của bạn. Hãy
thế nào để sử dụng lại nó cho web? chuẩn bị để so sánh văn bản được sử dụng
3. Sử dụng các nguyên tắc tái sử dụng văn bản in lại của bạn với văn bản gốc trong lớp.
cho web, hãy sử dụng lại ít nhất bốn
HÌNH ẢNH Hình ảnh là các tệp bao gồm các yếu tố đồ họa như clip art, hình minh họa, đồ họa thông tin, sơ
đồ và ảnh. Sau văn bản, hình ảnh là thành phần nội dung được sử dụng phổ biến nhất trên các trang web. Hình ảnh
trên trang web có thể làm quen với những điều chưa biết
và hỗ trợ trong việc ra quyết định.
Bạn có thể gửi tin nhắn và/hoặc nhắc nhở một hành động vượt quá khả năng của văn bản chỉ bằng cách
sử dụng hình ảnh, chẳng hạn như clip art hoặc ảnh chụp. Giả sử bạn là một người đam mê leo núi và cần thuê
một chiếc xe bốn bánh có thể vượt qua những địa hình khó khăn.
Trước khi đến đại lý, bạn quyết định mua sắm trực tuyến và truy cập trang web của Jeep. Khi
bạn nhấp qua để xem ảnh của các mẫu xe Jeep khác nhau, ảnh của chiếc Jeep® kiểu dáng đẹp
Wrangler đĩnh đạc trong rừng (Hình 3-9) thu hút sự quan tâm của bạn. Những hình ảnh hấp dẫn
1L
6C
A 0L
C
S 2
©
F
U
Hình 3-9 Hình ảnh mạnh mẽ có thể góp phần thu hút khách truy cập trang web mua hoặc tìm hiểu về sản phẩm của bạn.
khuyến khích bạn tìm kiếm trên trang web để tìm thông tin về các lựa chọn xe Jeep
hiện có (Hình 3-10). Các hình ảnh sẽ nhắc bạn đọc thông số kỹ thuật của xe trên trang web
và liên hệ với đại lý địa phương để đăng ký lái thử.
1L
6C
A 0L
C
S 2
©
F
U
Hình 3-10 Hình ảnh hấp dẫn khuyến khích khách truy cập tìm kiếm thông tin bổ sung và thực hiện hành động.
THIẾT KẾ Hình ảnh trang web có thể truyền đạt và thúc đẩy mạnh mẽ. Chọn hình ảnh có liên quan, chất
MẸO lượng cao để hỗ trợ mục đích của trang web. Thực hiện các chỉnh sửa, chẳng hạn như cắt xén,
các hình ảnh có liên quan và xem giao diện của hình ảnh trên nhiều
thiết bị và kích cỡ màn hình.
Bạn có thể vẽ hình minh họa và sơ đồ của riêng mình bằng phần mềm minh họa hoặc tự chụp ảnh bằng máy ảnh kỹ
thuật số. Các tập đoàn lớn sẽ trả tiền cho việc chụp ảnh chuyên nghiệp các sản phẩm của họ để giới thiệu chúng dưới
ánh sáng đẹp nhất. Bạn có thể tìm thấy hình ảnh có sẵn miễn phí hoặc chi phí thấp —clip nghệ thuật và ảnh—từ
nhiều nguồn trực tuyến khác nhau.
Trong Chương 5, bạn tìm hiểu thêm về hình ảnh trang web và các công cụ bạn có thể sử dụng để tạo và/hoặc chỉnh sửa
chúng.
Cho dù bạn tạo hình ảnh của riêng mình hay lấy chúng từ nguồn khác, việc chọn trước hình ảnh có
liên quan, chất lượng cao sẽ tăng thêm giá trị cho trang web của bạn là một phần của quy trình lập kế hoạch
trang web. Trong ví dụ đang diễn ra cho Fit4U, nhóm yêu cầu bạn nghiên cứu những bức ảnh phù hợp để đi kèm với các
bài viết trên trang web.
Hãy nhớ đảm bảo rằng các yếu tố nội dung bạn sử dụng trên trang web của mình không bị hạn chế THIẾT KẾ
về bản quyền. MẸO
Khám phá những bức ảnh có sẵn CỦA BẠN

XOAY
1. Tìm kiếm trên web bằng các từ khóa như 3. So sánh tất cả các nguồn ảnh có sẵn.
ảnh stock hoặc ảnh stock để tìm ít nhất sáu nguồn Tạo bảng so sánh, bao gồm các cột thông tin sau:
ảnh stock. tên nguồn, loại ảnh được cung cấp và chi phí điển
Bao gồm các nguồn ảnh miễn phí bản quyền và ảnh hình. Thêm bảng thứ hai liệt kê bốn bức ảnh
có giá bản quyền thấp cũng như những nguồn mà được chọn cho trang web Fit4U. Bao gồm tên ảnh
bạn phải trả phí cấp phép hoặc phí bản quyền tiêu hoặc tài liệu tham khảo nhận dạng khác, mô tả, tên
chuẩn. nguồn và chi phí.
2. Nghiên cứu các nguồn đã chọn cung cấp hình ảnh liên
quan đến thể dục và xác định tổng cộng bốn bức
ảnh từ sáu nguồn phù hợp cho trang web Fit4U. 4. Gửi kết quả của bạn theo định dạng
Tại sao bạn chọn những hình ảnh này? Bạn có thể sử được yêu cầu bởi người hướng dẫn của bạn. Hãy chuẩn
dụng những hình ảnh này với mục đích gì? bị để thảo luận về kết quả nghiên cứu của bạn
trong lớp.
ÂM THANH VÀ VIDEO Âm thanh hoặc âm thanh có thể khác nhau về cả hình thức và cường độ—từ lời thì thầm của một đứa
trẻ đến bài phát biểu Thông điệp Liên bang của tổng thống hoặc từ một ban nhạc kim loại nặng đến Dàn hợp xướng Hải
quân Hoa Kỳ. Âm thanh có thể thuyết phục, truyền cảm hứng, cá nhân hóa, động viên hoặc xoa dịu.
Âm thanh cũng tăng cường khả năng gợi lại trí nhớ hoặc gây ra phản ứng. Có một lời bài hát giữ
cứ lởn vởn trong đầu khiến bạn nhớ đến một sự kiện quan trọng trong cuộc đời? Có một bài phát biểu gây xúc động
khiến bạn có cảm giác như đang nghe trực tiếp lời nói của diễn giả? Hãy nghĩ về những cách
âm thanh đó—với khả năng gợi lên cảm xúc, thúc đẩy hành động và kích hoạt trí nhớ—có thể mang lại lợi ích cho
trang web của bạn. Ví dụ: hãy tưởng tượng tác dụng thuyết phục của lời chứng thực sôi nổi về sản phẩm của bạn
từ một khách hàng hài lòng hoặc nhớ lại khả năng của một đoạn nhạc leng keng hấp dẫn.
Thông báo cho khách truy cập khi liên kết trang web khởi chạy tệp âm thanh hoặc video THIẾT KẾ
có âm thanh để họ sử dụng tai nghe hoặc tắt loa để không làm phiền những người xung quanh. Những MẸO
âm thanh lặp đi lặp lại có thể gây khó chịu cho những người truy cập trang web thường xuyên,
vì vậy hãy sử dụng âm thanh một cách tiết kiệm.
Tôi nên sử dụng

Thông thường, video hoặc hình ảnh chuyển động kết hợp các thành phần mạnh mẽ của chuyển động-
phương tiện truyền
âm thanh và âm thanh để diễn đạt và truyền đạt ý tưởng. Cung cấp video chất lượng qua
phát trực tuyến hoặc có thể tải
xuống trên trang web của mình?

web hiệu quả có thể đưa ra những thách thức. Vấn đề chính là kích thước cực lớn của tệp video,
Phương tiện có thể tải xuống do lượng dữ liệu khổng lồ cần thiết để mô tả âm thanh và video. Một giải pháp là nhúng video phát
mà bạn không sở hữu có trực tuyến hoặc liên kết tới video phát trực tuyến. Như bạn
thể đi kèm với các hạn chế
đã học ở Chương 1, phương tiện truyền trực tuyến, chẳng hạn như âm thanh hoặc video, bắt đầu phát
về bản quyền.
Để biết thêm thông tin, hãy sử

ngay khi dữ liệu bắt đầu truyền hoặc truyền tới trình duyệt. Ngược lại, người dùng phải chuyển
dụng công cụ tìm kiếm để toàn bộ phương tiện có thể tải xuống sang máy tính hoặc thiết bị của người dùng trước khi xem
tìm kiếm các hạn chế về bản
hoặc nghe nó. Liên kết hoặc nhúng video từ nguồn bên ngoài, chẳng hạn như YouTube, giúp giảm
quyền phương tiện.
kích thước trang web và cung cấp nền tảng để phát video. Yêu cầu người truy cập trang web nhấp
vào Phát để bắt đầu video giúp giữ nguyên thời gian tải trang web
xuống và đảm bảo rằng video không bắt đầu phát nếu không có sự tương tác của khách truy cập.
THIẾT KẾ Nhúng video phát trực tuyến hoặc liên kết đến video phát trực tuyến và yêu cầu tương tác của
MẸO người dùng để bắt đầu phát video nhằm tránh các vấn đề về băng thông có thể làm nản lòng khách
truy cập trang web.
Trình cắm thêm là gì?

TÍNH TƯƠNG TÁC VÀ CÁC YẾU TỐ HOẠT HÌNH Mặc dù các định nghĩa khác nhau,
hoạt hình và
đa phương tiện có thể kết hợp văn bản, hình ảnh, chuyển động, âm thanh hoặc video và cũng
các phần tử tương tác có thể
thường có thể liên quan đến tính tương tác. Tính tương tác đề cập đến các yếu tố khuyến khích
yêu cầu khách truy cập
của bạn cài đặt plug-in khách truy cập trang web nhấp chuột, trả lời câu hỏi, đưa ra nhận xét, tìm kiếm hoặc thực
trình duyệt web, phần mềm cho hiện các hành động khác.
phép các phần tử này phát
Các yếu tố hoạt hình rất phổ biến vì chúng có thể thêm hành động, sự phấn khích và
trong trình duyệt web của khách
truy cập. Nhiều người,

tính tương tác vào các trang web. Ví dụ về các phần tử hoạt hình bao gồm hình ảnh xoay, xuất
nếu không phải là hầu hết, hiện ở dạng 3D hoặc bật lên khi bạn cuộn trong trang web. Hình 3-11
khách truy cập trang web của hiển thị trang web cho bộ phim tài liệu Eat: The Story of Food, bao gồm đồ họa hoạt hình
bạn đã tải xuống và cài đặt phương
hấp dẫn. Các công cụ web như JavaScript, phần tử <canvas> trong HTML5 và nhiều công cụ khác
tiện trình duyệt
giúp việc thêm hoạt ảnh vào hình ảnh tĩnh trở nên dễ dàng kết hợp.
người chơi. Hầu hết các plugin
cần thiết để chạy phương tiện
được tự do. Một số người dùng
cảnh giác khi cài đặt plug-in
vì lo ngại về bảo mật. Để
biết thêm thông tin về hoạt
động của plugin, hãy sử dụng công
cụ tìm kiếm để tìm kiếm
plugin của trang web.
Đa phương tiện và hoạt hình ảnh
hưởng đến khả năng truy cập web
như thế nào?
Một số người dùng có
những khác biệt về hình
ảnh, học tập hoặc những
khác biệt khác ảnh hưởng
đến trải nghiệm trang web của họ.
Để biết thông tin về cách
đa phương tiện và
hoạt ảnh có thể tác động đến
khả năng truy cập web, hãy sử
dụng công cụ tìm kiếm để tìm

4a
h 1ị
n 0Đ
ê 2
©
K
kiếm hoạt ảnh và đa phương
tiện về khả năng truy
cập web. Hình 3-11 Các yếu tố hoạt hình có thể thêm hành động, sự phấn khích và tính tương tác cho trang web.
Các yếu tố hoạt hình có thể tạo thêm sự thú vị và hấp dẫn cho trang web của bạn. Sử dụng chúng một cách tiết kiệm
và chỉ để hỗ trợ mục đích trang web của bạn—và chỉ khi làm như vậy đáp ứng được mong đợi của đối tượng mục
tiêu về nội dung trên trang web của bạn. Ví dụ: một trang web chuyên đề quảng bá các hoạt động thể thao cho đối
tượng mục tiêu là giới trẻ có thể hưởng lợi từ việc sử dụng các hoạt ảnh khuyến khích họ tham gia. Tuy nhiên,
đối tượng mục tiêu của trang web thương mại điện tử B2B cung cấp dịch vụ tư vấn có thể thấy hoạt ảnh lặp đi lặp
lại hoặc nhiều hoạt ảnh gây mất tập trung và khó chịu.
Hoạt hình và phim đơn giản không khó tạo ra như bạn sẽ học ở Chương 6.
Ngoài ra, nhiều nhà cung cấp trực tuyến cung cấp hoạt ảnh miễn phí hoặc chi phí thấp.
Giống như bất kỳ yếu tố nào, việc sử dụng quá nhiều hoạt ảnh trên trang web của bạn có THIẾT KẾ
thể khiến khán giả không tập trung vào nội dung khác và che giấu mục đích của trang web. MẸO
Việc lạm dụng các đối tượng xoay, văn bản cuộn, biểu ngữ quảng cáo hoạt hình hoặc video
phát tự động có thể gây khó chịu cho khách truy cập trang web đến mức họ có thể thoát khỏi
trang web của bạn và không quay lại.
Mặc dù người xem có thể thấy các yếu tố hoạt hình trong trang web của bạn hấp dẫn và thú vị nhưng
việc phát triển các yếu tố hoạt hình cho trang web của bạn trong nội bộ có thể đòi hỏi chuyên môn, thời gian
và tiền bạc đáng kể. Do đó, có thể sẽ hiệu quả hơn về mặt chi phí nếu mua các phần tử đa phương tiện thích hợp
từ một nhà phát triển đa phương tiện chuyên nghiệp.
Các nhà thiết kế web không có tài nguyên lập trình cần thiết và chuyên môn có thể THIẾT KẾ
mua các phần tử đa phương tiện làm sẵn từ các nhà phát triển đa phương tiện chuyên MẸO
nghiệp.
Bạn có thể thêm các yếu tố tương tác vào trang web của mình như cuộc thăm dò ý kiến, câu đố, tính Phụ lục C: RWD
Để biết thông tin về
năng nhận xét, v.v. Các trang web khảo sát hoặc bỏ phiếu như Survey Monkey hoặc Doodle (Hình 3-12) có thể cung cấp
cách sử dụng hình ảnh,
ỘC
GNỤ
Ô B
cấu trúc câu hỏi mà bạn có thể liên kết hoặc nhúng vào
hoạt ảnh và các dạng
trang web của bạn, thậm chí theo dõi và chiếu kết quả trở lại trang web. Tính năng bình luận là những bổ sung phổ đa phương tiện khác
biến cho các bài đăng và bài viết trên blog. Ai đó tại trang web nên theo dõi các bình luận và các tính năng có thể tác động đến
tương tác khác để đảm bảo các bình luận và bài đăng có liên quan và không gây kích động. Bạn sẽ tìm hiểu thêm về thiết kế web đáp
ứng, hãy xem Phụ lục C.
nhận xét và các thành phần trang web tương tác khác trong Chương 6.
6o
eld 0D
1o 2
©
Hình 3-12 Khảo sát và thăm dò ý kiến bổ sung tính tương tác cho trang web của bạn.
CỦA BẠN Khám phá các tính năng hoạt hình

XOAY
1. Sử dụng công cụ tìm kiếm để tìm các trang chủ của 4. Tóm tắt những phát hiện của bạn bằng cách xác định
NBC Universal, Golf Channel, Zappos và mỗi trang web và mục đích của nó, đồng thời chọn một yếu
VisitCalifornia. tố hoạt hình cho mỗi trang web phù hợp nhất
2. Mở mỗi trang web trong một tab mới. Ôn tập phù hợp với mục đích của trang web. Hãy chuẩn bị để thảo
trang chủ và ba trang phụ ở mỗi trang web. Ghi lại loại luận về những phát hiện của bạn trong lớp.
và đối tượng mục tiêu của từng 5. Tìm kiếm các trang web mà bạn có thể
mua hình ảnh động và đa phương tiện có tính phí. Truy
trang mạng. cập một trong các trang web và tìm ít nhất một thành
3. Đánh giá xem mỗi bên tốt như thế nào phần mà bạn cảm thấy phù hợp với trang web Fit4U.
trang web sử dụng các yếu tố hoạt hình trên Ghi lại chi phí, yêu cầu kỹ thuật và chất lượng của
trang chủ và trang phụ hỗ trợ mục đích của trang web và phần tử. Xác định xem phần tử có đáp ứng các tiêu chí để
đáp ứng nhu cầu và mong đợi của đối tượng mục tiêu. đưa vào hay không.
NỘI DUNG ĐƯỢC TẠO ĐỘNG Nội dung được tạo động, không giống như thông tin tĩnh, cập nhật
định kỳ và có thể xuất hiện trên các trang của trang web khi được kích hoạt bởi một
sự kiện cụ thể, chẳng hạn như thời gian trong ngày hoặc theo yêu cầu của khách truy cập. Các
trang web hiển thị nội dung được tạo động thường lấy thông tin từ cơ sở dữ liệu.
Cơ sở dữ liệu là một tệp lưu trữ dữ liệu, chẳng hạn như kho hàng của cửa hàng hoặc danh mục
thẻ của thư viện, sao cho nội dung có thể tìm kiếm được và cập nhật dễ dàng. Các trang
web sử dụng cơ sở dữ liệu để tạo nội dung động là các trang web dựa trên cơ sở dữ liệu.
Hình 3-13 minh họa kết quả của yêu cầu nội dung được tạo động—thông tin về khóa học và lịch trình—
từ cơ sở dữ liệu của Cao đẳng Cộng đồng Portland.
các chương
trình được
thu hẹp
theo danh mục
các chương
trình trong
danh mục đã chọn

0r
dnalt
g 0o
o
n 0P
a
ẳ
ộ
ồ 2
©
C
đ
Hình 3-13 Nội dung động được cập nhật để phản ánh các điều kiện thay đổi.
THIẾT KẾ Sử dụng cơ sở dữ liệu để cung cấp nội dung động cho các trang web thương mại điện tử nhằm theo dõi các
MẸO mặt hàng đã bán và cập nhật tính sẵn có và hàng tồn kho của sản phẩm hoặc cho một trang web học thuật để
đảm bảo rằng việc đăng ký lớp học trực tuyến tuân theo nguyên tắc về quy mô lớp học.
Bước 3: Chọn Cấu trúc Website 89
Tiếp tục với ví dụ về Fit4U, bạn và nhóm đồng ý rằng nội dung giá trị gia tăng cho trang
web của bạn sẽ bao gồm các bài viết văn bản và mẹo, ảnh và hình ảnh logo phù hợp, thông tin sản
phẩm và video clip về lời chứng thực của khách hàng. Được tạo động
nội dung là cần thiết để điền vào danh mục sản phẩm. Hình 3-14 minh họa sự phát triển tiếp
theo của tài liệu lập kế hoạch cho trang web Fit4U.
Trang web Fit4U
Nội dung giá trị gia tăng
Nội dung giá trị gia tăng của trang web sẽ bao gồm:
• Logo công ty
• Hình ảnh sản phẩm
• Video clip cảm nhận của khách hàng và nhận xét của nhân viên
• Trang tin tức hiện tại với các bài viết, thông cáo báo chí và chuyên mục
• Mẹo và thủ thuật tập thể dục trên hầu hết các trang
Hình 3-14 Nội dung giá trị gia tăng cho trang web Fit4U bao gồm văn bản, hình ảnh, video clip và nội dung được tạo động.
Tổ chức tập tin trang web
Khi phát triển trang web của mình, bạn nên sắp xếp các tệp kết quả, bao gồm HTML, hình
ảnh, hoạt ảnh và tệp đa phương tiện để giúp duy trì chúng và xuất bản trang web của bạn dễ dàng
hơn. Nếu trang web của bạn nhỏ—tổng số ít hơn 5–10 tệp—hãy cân nhắc việc tạo một thư mục duy
nhất cho tất cả các tệp. Nếu trang web của bạn vượt quá 10 tệp, hãy cân nhắc việc tạo các
thư mục con hợp lý, riêng biệt; ví dụ: bao gồm các thư mục con cho mã HTML, ảnh, âm thanh,
video, hoạt ảnh và tệp đa phương tiện. Hãy nhớ rằng một trang web có thể bao gồm nhiều tệp
vì mỗi thành phần đồ họa và bài viết hoặc tài liệu là một tệp riêng.
Bạn có thể lưu trữ các tệp trên ổ cứng máy tính của mình hoặc nếu sử dụng hệ thống quản
lý nội dung (CMS), các tệp sẽ được lưu trữ trên máy chủ của nền tảng CMS.
Khi tạo một trang web trên máy tính của riêng bạn, hãy sao lưu các tệp của bạn thường xuyên và
lưu trữ các bản sao lưu ở một vị trí tách biệt với ổ cứng cục bộ của bạn. CMS thường lưu trữ các
tệp hình ảnh của bạn trong thư viện, là một thư mục hoặc một loạt thư mục, đặc biệt dành cho
phương tiện của trang web.
Lập kế hoạch một hệ thống tệp có tổ chức cho các tệp trang web của bạn. Bạn sẽ làm việc THIẾT KẾ
hiệu quả hơn, giảm thiểu rủi ro mất hoặc đặt sai vị trí các yếu tố nội dung và tạo điều kiện MẸO
thuận lợi cho việc xuất bản trang web của bạn nếu bạn có tổ chức.
Bước 3: Chọn cấu trúc của trang web

Sau khi bạn xác định mục đích của trang web và xác định đối tượng mục tiêu của nó, bạn đã sẵn
sàng lên kế hoạch cho cấu trúc của trang web—sự sắp xếp liên kết các trang của trang web từ
trang chủ. Cấu trúc của trang web phải hỗ trợ mục đích của trang web và giúp khách truy cập dễ
dàng tìm thấy những gì họ muốn trên trang web với ít cú nhấp chuột nhất có thể. Trang web nên
sử dụng điều hướng, liên kết, đường dẫn đường dẫn (được thảo luận trong Chương 4) và các tính năng khác.
các phương pháp hiển thị cho khách truy cập trang web vị trí của họ trong trang web và cũng phải hiển thị
cách quay lại trang chủ hoặc các trang web đã truy cập trước đó.
Lập kế hoạch cấu trúc của trang web trước khi bạn bắt đầu tạo các trang của nó có một số lợi ích,
chẳng hạn như khả năng thực hiện những điều sau: •Trực
quan hóa cách tổ chức các trang của trang web và các mối quan hệ liên kết. •Tổ chức các trang
theo mức độ chi tiết. •Đi theo các liên kết giữa
các trang để đảm bảo một số khách truy cập nhất định có thể nhấp qua trang web một cách nhanh chóng để
tìm thông tin hữu ích—ít nhấp chuột hơn có nghĩa là khách truy cập trang web hài lòng hơn. •Phát
hiện các trang cuối, là những trang hiện không phù hợp với liên kết
sắp xếp.
•Sắp xếp lại các trang và sửa lại các mối quan hệ liên kết, xác định các thành phần hoặc trang web còn
thiếu, sau đó trực quan hóa các thay đổi trước khi bạn tạo trang web.
Bản phác thảo về cấu trúc của trang web có thể đóng vai trò là bản thiết kế chi tiết và minh họa cách khách truy cập có
thể theo dõi các liên kết từ trang này sang trang khác. Một số nhà thiết kế sử dụng bản phác thảo văn bản để lập sơ đồ cấu
trúc của trang web, trong khi những nhà thiết kế khác sử dụng sơ đồ trang web, một cách trình bày trực quan về cấu trúc của trang web.
Hình 3-15 là một ví dụ về sơ đồ trang web được sử dụng để lập sơ đồ cấu trúc của trang web.
Trang chủ
Trang
trang chủ liên kết trang

trang
phụ lớn Trang Trang Trang Trang
liên kết trang
chi tiết
trang
Chi tiết Chi tiết Chi tiết Ngõ cụt

ngõ cụt
trang
Hình 3-15 Sơ đồ trang web là một công cụ hữu ích để lập kế hoạch cấu trúc trang web và xác định các liên kết
giữa các trang.
Bước 3: Chọn Cấu trúc Website 91
Để tạo sơ đồ trang web, hãy sắp xếp các hình và đường trong đó mỗi hình biểu thị một
trang và mỗi đường biểu thị một liên kết từ trang này sang trang khác. Bạn có thể vẽ sơ đồ
trang web theo cách thủ công, sử dụng các công cụ ứng dụng như đồ họa Microsoft® Office®
SmartArt hoặc sử dụng phần mềm vẽ như Microsoft® Visio Pro dành cho Office 365.
Là một nhà thiết kế web, bạn nên chọn phương pháp mà bạn thấy linh hoạt nhất để phác
thảo cấu trúc trang web của mình. Bất kể bạn sử dụng công cụ nào, cấu trúc trang web của bạn
có thể sẽ tuân theo một trong ba chủ đề cấu trúc: tuyến tính/hướng dẫn, mạng hoặc phân cấp.
Khám phá các công cụ lập kế hoạch cấu trúc trang web CỦA BẠN
XOAY
1. Tìm kiếm trên web để xác định ít nhất ba tên nhà cung cấp, tên ứng dụng, mô tả ngắn gọn về tính
các ứng dụng bạn có thể sử dụng để tạo bản phác thảo năng và chi phí.
hoặc kế hoạch chính thức cho cấu trúc của trang 3. Bao gồm một cuộc thảo luận về công cụ nào bạn
web. Xác định vị trí hệ thống quản lý nội dung cũng cung muốn sử dụng để tạo sơ đồ chính thức cho cấu trúc
cấp các công cụ lập kế hoạch và phác thảo. trang web của bạn và lý do. Hãy chuẩn bị để thảo
2. Sử dụng bảng để tóm tắt nghiên cứu của bạn. luận về nghiên cứu của bạn trong lớp.
Bao gồm các cột sau trong bảng của bạn:
Cấu trúc tuyến tính/Hướng dẫn
Cấu trúc trang web tuyến tính/hướng dẫn tổ chức và trình bày các trang web theo một thứ
tự cụ thể, như trong Hình 3-16. Một trang web đào tạo có thể sử dụng cấu trúc này để đảm bảo
rằng người dùng không bỏ lỡ các bước hoặc thực hiện các bước không theo trình tự. Ví dụ:
một trang web minh họa cách giao bóng tennis đúng cách sẽ sử dụng cấu trúc này để thể hiện phạm
vi chuyển động cần thiết theo đúng thứ tự. Cấu trúc tuyến tính/hướng dẫn kiểm soát việc điều
hướng của người dùng bằng cách chuyển họ từ trang web này sang trang web tiếp theo. Cấu trúc
này cũng phù hợp với thông tin được trình bày theo thứ tự lịch sử hoặc thời gian; ví dụ: một
Làm tất cả các trang web
trang web trình bày chi tiết về sự phát triển bùng nổ của thương mại điện tử có thể được hưởng iá
p ỏđ
H
có nhiều trang?
lợi từ cấu trúc này.
Không. Một số nhà
thiết kế web tạo các trang
web một trang, trong đó tất

cả thông tin đều có trên
Trang chủ Bước 1 Bước 2 Bước 3 Bước 4
một trang có thể cuộn hoặc
tất cả thông tin
Hình 3-16 Cấu trúc trang web tuyến tính/hướng dẫn sắp xếp các trang web theo một thứ tự cụ thể. có thể xem được trong chế
độ xem màn hình tiêu chuẩn.
Điều này không phù hợp với

Cấu trúc màng bất kỳ trang web nào có nhiều
nội dung và có thể gây
Cấu trúc trang web dạng web, còn được gọi là cấu trúc trang web ngẫu nhiên, không sắp xếp khó khăn cho việc truy cập.
áp dụng tối ưu hóa công

các trang theo một thứ tự cụ thể. Từ trang chủ của một trang web được tổ chức xung quanh cấu trúc
cụ tìm kiếm (SEO) và
mạng, khách truy cập có thể chọn bất kỳ trang web nào khác theo sở thích hoặc khuynh hướng của
thực hành thiết kế web
họ. Hình 3-17 minh họa cấu trúc trang web có mạng và cho thấy cách khách truy cập vào loại đáp ứng. Để biết thêm
trang web này có thể điều hướng đến các trang web khác nhau khi họ thấy phù hợp. thông tin, hãy sử dụng
công cụ tìm kiếm để tìm

Các trang web sử dụng cấu trúc mạng cần cung cấp tính năng tìm kiếm để khách truy cập trang
kiếm SEO trang web
web có thể dễ dàng tìm thấy thông tin họ cần. Cấu trúc mạng hoạt động tốt đối với một số
một trang và thiết kế
trang web thông tin, danh mục và các trang web khác sử dụng tính năng tìm kiếm hoặc nội dung web đáp ứng trang web một
động. trang.
Trang A Trang D
Trang B Trang chủ Trang E
Trang C Trang F
Cấu trúc trang web
nào nên
iá
p ỏđ
H
Hình 3-17 Cấu trúc trang web dạng web không sắp xếp các trang theo một thứ tự cụ thể.
Tôi cho n?
Loại cấu trúc bạn sử dụng
là một lựa chọn Cấu trúc phân cấp

quan trọng.
Đưa ra quyết định của bạn Cấu trúc trang web phân cấp tổ chức các trang web thành các danh mục và danh mục phụ
dựa trên nội dung trang
theo mức độ chi tiết ngày càng tăng, như trong Hình 3-18. tổ chức
web và cách khách
truy cập trang web sẽ và các trang web chuyên đề thường rất phù hợp với cấu trúc phân cấp. Ví dụ: một trang web của
tìm kiếm thông tin trên trường đại học có thể cấu trúc các trang web của mình thành ba danh mục với nhiều danh mục phụ:
trang web của bạn. Để
biết thêm thông tin về
việc lập kế hoạch •Danh mục học thuật với các danh mục phụ khoa và chuyên ngành
cấu trúc trang web, hãy sử
•Thể loại điền kinh với các danh mục phụ về đội và lịch thi đấu
dụng công cụ tìm kiếm để
tìm kiếm cấu trúc trang web. •Danh mục sinh viên với các danh mục phụ là sinh viên và cựu sinh viên hiện tại và tương lai
Trang chủ
Loại Loại Loại
Tiểu thể loại Tiểu thể loại Tiểu thể loại
Tiểu thể loại Tiểu thể loại Tiểu thể loại
Hình 3-18 Cấu trúc phân cấp tổ chức các trang web thành các danh mục và danh mục con bằng cách tăng mức độ chi tiết.
Các trang web có nhiều trang và nhiều mục tiêu, chẳng hạn như trang web thương mại điện
tử, có thể sử dụng kết hợp ba cấu trúc trang web chính thay vì tuân theo một cấu trúc trang web
duy nhất để tổ chức các trang của nó. Quay lại ví dụ về trang web Fit4U, bạn và nhóm của mình
thống nhất về cấu trúc trang web kết hợp cấu trúc phân cấp và cấu trúc tuyến tính. Hình 3-19
minh họa việc cập nhật kế hoạch thiết kế để bao gồm sơ đồ vị trí công trình.
Ôn lại chương 93
Trang web Fit4U
Cấu trúc trang web
Trang chủ
Khách hàng
Các sản phẩm Về chúng tôi Bài viết Liên hệ chúng tôi
T
Lời chứng thực
Hàng năm Sự quản lý Người lao động

Video Đào tạo Quần áo Lịch sử Bài viết Cột
Báo cáo Đội Blog
Hình 3-19 Cấu trúc của trang web Fit4U kết hợp cấu trúc phân cấp và cấu trúc tuyến tính.
Lập kế hoạch cấu trúc trang web của bạn để hỗ trợ mục đích của trang web và giúp khách truy cập dễ THIẾT KẾ
dàng đáp ứng nhu cầu và mong đợi của họ tại trang web. Chính thức hóa sơ đồ cấu trúc bằng cách sử dụng MẸO
bản phác thảo văn bản hoặc sơ đồ trang web.
Đánh giá chương

Tạo một trang web đòi hỏi sự đầu tư đáng kể về thời gian và các nguồn lực quan trọng khác. Để
đảm bảo sự thành công của một trang web, một kế hoạch trang web chi tiết là điều cần thiết.
Lập kế hoạch trang web bao gồm sáu bước chung, ba bước đầu tiên bạn đã tìm hiểu trong chương
này. Bước 1 xác định mục đích của trang web, bao gồm việc xác định các mục tiêu và mục tiêu. Bước
1 cũng xác định đối tượng mục tiêu của trang web, bao gồm phát triển hồ sơ đối tượng mục tiêu và
đánh giá nhu cầu. Bước 2 xác định nội dung chung của trang web, bao gồm lựa chọn trang web và loại
nội dung giá trị gia tăng sẽ được sử dụng.
Các loại nội dung bao gồm văn bản, hình ảnh, âm thanh, video, hoạt hình, đa phương tiện và nội dung
được tạo động. Khi bạn phát triển một trang web, việc có một hệ thống lưu trữ điện tử có tổ chức cho
các tệp và thư mục sẽ giúp bạn làm việc hiệu quả hơn, giảm thiểu nguy cơ mất hoặc đặt sai vị trí
các thành phần và giúp quá trình xuất bản trang web của bạn diễn ra suôn sẻ. Cuối cùng, Bước 3 liên
quan đến việc lập kế hoạch cấu trúc của trang web: tuyến tính/hướng dẫn, mạng hoặc phân cấp.
ĐIỀU KHOẢN Sau khi đọc chương này, bạn nên biết từng Điều khoản chính này.
cần biết
yếu tố hoạt hình (86) đánh giá nhu cầu (76)
âm thanh (85) mục tiêu (73)

kêu gọi hành động (CTA) (74) đặc điểm tâm lý (75)
bố cục thẻ (79) tuyên bố mục đích (73)
cơ sở dữ liệu (88) cấu trúc trang web ngẫu nhiên (91)
trang web dựa trên cơ sở dữ liệu (88) tái sử dụng (82)
trang ngõ cụt (90) lợi tức đầu tư (ROI) (74)
đặc điểm nhân khẩu học (75) tính năng tìm kiếm (79)
kế hoạch thiết kế (72) sơ đồ trang web (90)
phương tiện có thể tải xuống (86) hình ảnh có sẵn (85)
nội dung được tạo động (88) trang phụ (78)
mục tiêu (73) đối tượng mục tiêu (73)

Cấu trúc trang web phân cấp (92) hồ sơ đối tượng mục tiêu (74)
đồ họa thông tin (82) nội dung giá trị gia tăng (82)
tính tương tác (86) video (86)
cấu trúc trang web tuyến tính/hướng dẫn (91) Cấu trúc trang web có màng (91)
đa phương tiện (86) kế hoạch trang web (72)
KIỂM TRA của bạn

Hoàn thành bài tập Kiểm tra kiến thức của bạn để củng cố những gì bạn đã học trong
Kiến thức
chương.
Điều khoản phù hợp
Nối mỗi thuật ngữ với mô tả phù hợp nhất.
1. kêu gọi hành động Một. Nội dung được cập nhật định kỳ có thể xuất hiện trên
các trang của trang web khi được kích hoạt bởi một sự kiện cụ thể, chẳng hạn
2. bố trí thẻ
như thời gian trong ngày hoặc theo yêu cầu của khách
3. cơ sở dữ liệu
truy cập. b. Các trang web được sắp xếp không theo thứ tự cụ thể.
4. trang ngõ cụt
c. Các trang web được tổ chức theo danh mục và danh mục con.
5. nội dung được
d. Các liên kết nhóm xã hội, lựa chọn lối sống, sở thích mua hàng,
tạo động
liên kết chính trị và các đặc điểm khác giải thích lý
6. Cấu trúc
do khách truy cập có thể muốn truy cập trang web của bạn.
website phân cấp
7. tuyến tính/hướng dẫn

đ. Một trang web hiện không phù hợp với cách sắp xếp liên kết.
cấu trúc trang web
8. đặc điểm tâm lý

f. Thông tin phù hợp, đầy đủ thông tin và kịp thời; chính xác và chất
lượng cao; và có thể sử dụng được.
9. tuyên bố mục đích

g. Tệp lưu trữ dữ liệu, chẳng hạn như kho hàng của cửa hàng hoặc
danh mục thẻ của thư viện, để nội dung có thể tìm kiếm được
và dễ dàng cập nhật.
h. Clip nghệ thuật và hình ảnh có sẵn miễn phí hoặc mua.
10. hình ảnh chứng khoán Tôi. Một cái gì đó yêu cầu khách truy cập trang web phải tương tác
với trang web.
11. giá trị gia tăng
nội dung j. Hiển thị nhiều chủ đề hoặc bài viết bằng cách trình bày từng chủ đề
12. trang web trong một khu vực hình vuông hoặc hình chữ nhật.
có mạng k. Một bản tóm tắt chính thức bằng văn bản về các mục đích và mục tiêu
kết cấu của trang web của bạn để đảm bảo rằng chúng đáp ứng được mong
đợi và nhu cầu của khán giả.
tôi. Các trang web phải được xem theo một thứ tự cụ thể.
Câu hỏi trả lời ngắn
Viết câu trả lời ngắn gọn cho mỗi câu hỏi.
1. Phân biệt mục đích và mục đích khi quy hoạch website. cái gì là
mục tiêu của một tuyên bố mục đích?
2. Xác định ba bước đầu tiên trong việc phát triển kế hoạch trang web cho một trang web.
3. Thảo luận cách phát triển hồ sơ đối tượng mục tiêu và đánh giá nhu cầu đối tượng mục tiêu. Hồ
sơ đối tượng ảnh hưởng đến UX như thế nào?
4. Xác định bốn câu hỏi chính mà khách truy cập muốn được trả lời bằng nội dung trang chủ và xác định
loại nội dung trên trang chủ của trang web thương mại có thể trả lời câu hỏi của khách truy cập.
5. Xác định đặc điểm tâm lý. Vai trò của họ trong việc tạo ra đối tượng mục tiêu là gì
hồ sơ?
6. Thảo luận về chức năng của trang chủ, trang đích và các trang phụ.
7. Thảo luận về cách các loại nội dung sau có thể tăng thêm giá trị cho trang web: văn bản, hình ảnh, âm
thanh và video, các yếu tố hoạt hình và tương tác cũng như được tạo động
nội dung.
8. Giải thích trang web dựa trên cơ sở dữ liệu là gì và đưa ra hai ví dụ về các trang web đó.
9. Định nghĩa thuật ngữ sơ đồ trang web và giải thích vai trò của nó trong quá trình phát triển trang web.
10. Mô tả ba cấu trúc cơ bản của trang web. Khi nào thì thích hợp?
XU HƯỚNG
Điều tra sự phát triển thiết kế web hiện tại bằng các bài tập Xu hướng.
Viết một bài luận ngắn gọn về từng xu hướng sau, sử dụng web làm công cụ nghiên cứu của bạn. Đối với mỗi xu
hướng, hãy xác định ít nhất một URL trang web được sử dụng làm nguồn nghiên cứu.
Hãy chuẩn bị để thảo luận về những phát hiện của bạn trong lớp.
Bố cục 1 thẻ
Sử dụng công cụ tìm kiếm để tìm ví dụ về các trang web sử dụng bố cục thẻ. Tìm kiếm các bài viết
khuyến nghị hoặc phản đối việc sử dụng bố cục thẻ. Những xu hướng trang web nào khác mà các bài viết đề
xuất có thể phù hợp với mục đích tương tự? Mục tiêu và mục đích của việc bố trí thẻ là gì? Bạn có thấy
chúng có hiệu quả không? Tại sao hoặc tại sao không?
Là một nhà thiết kế web, khi nào bạn sẽ sử dụng bố cục thẻ?
2 trang web một trang

Các trang web mà bạn quen thuộc thường bao gồm một số trang được liên kết với cách tổ chức rõ ràng và hệ
thống điều hướng dễ sử dụng. Tuy nhiên, một số trang web chỉ bao gồm một trang. Nghiên cứu xu hướng tạo
trang web một trang. Tìm một bài viết đánh giá hoặc tư vấn cách sử dụng trang web một trang. Xem một vài
trang web một trang. Chúng có hiệu quả hay quá lâu? Bạn phải cuộn bao nhiêu lần để xem toàn bộ trang?
Với tư cách là một nhà thiết kế web, bạn sẽ khuyên loại khách hàng nào nên có trang web một trang?
Thiết kế web đáp ứng ảnh hưởng như thế nào đến quyết định tạo trang web một trang?
@VẤN ĐỀ
Thử thách quan điểm của bạn về web và công nghệ thiết kế web với các bài tập
@Issue.
Viết một bài luận ngắn gọn để trả lời các vấn đề sau, sử dụng web làm công cụ nghiên cứu của bạn. Đối với
mỗi vấn đề, hãy xác định ít nhất một URL trang web được sử dụng làm nguồn nghiên cứu. Hãy chuẩn bị để
thảo luận về những phát hiện của bạn trong lớp.
1 Tuyên bố về Mục đích của Trang web so với Sứ mệnh của Trang web
Các câu lệnh
Một tổ chức thương mại hoặc phi thương mại thường phát triển một tuyên bố sứ mệnh của tổ chức để
giải thích ngắn gọn cho các đối tượng của mình (thành viên, khách hàng, nhân viên, cổ đông, đối tác
kinh doanh, cơ quan chính phủ, v.v.) tại sao tổ chức đó tồn tại. Việc sử dụng các tuyên bố sứ mệnh của
trang web được diễn đạt ngắn gọn là kết quả tự nhiên của việc sử dụng các tuyên bố sứ mệnh của tổ
chức này. Tuy nhiên, một số nhà phê bình kinh doanh và web coi các tuyên bố chính thức về sứ mệnh của
tổ chức hoặc trang web là vô ích. Sau khi nghiên cứu các lập luận ủng hộ và phản đối các tuyên bố sứ mệnh
của trang web, hãy tạo một báo cáo hoàn thành những mục sau:
Một. So sánh các tuyên bố mục đích của trang web như được mô tả trong chương này với các ví dụ về tuyên
bố sứ mệnh của trang web . Họ giống nhau thế nào? Họ khác nhau như thế nào?
b. Mô tả cách, với tư cách là một nhà thiết kế web, bạn sẽ tư vấn cho khách hàng về việc đưa mục đích
trang web và/hoặc tuyên bố sứ mệnh của trang web vào trang web B2B.
2 Khả năng truy cập web

Nghiên cứu các vấn đề về khả năng truy cập web khi sử dụng đa phương tiện trong các trang web. Loại
đa phương tiện nào có thể khiến khách truy cập trang web gặp khó khăn khi xem hoặc tương tác với trang
web của bạn? Những loại thiết bị và phần mềm thích ứng nào có sẵn cho người dùng gặp vấn đề về khả năng
tiếp cận để sử dụng với thiết bị di động hoặc máy tính để bàn và máy tính xách tay? Với tư cách là một nhà
thiết kế web, bạn có thể làm gì để tạo một trang web mà tất cả hoặc hầu hết người dùng đều có thể truy cập được?
Sử dụng World Wide Web để có thêm thông tin về các khái niệm có trong tay
chương với các bài tập Thực hành.
1 Khám phá và đánh giá: Trang web dựa trên cơ sở dữ liệu

Duyệt web để tìm ba ví dụ về trang web thương mại điện tử hoặc trang web học thuật sử dụng cơ sở dữ
liệu để cung cấp nội dung động. Trang web cho phép người dùng tương tác với cơ sở dữ liệu như thế
nào? Những tương tác nào của người dùng có thể khiến thông tin trong cơ sở dữ liệu cập nhật hoặc
thay đổi? Người dùng tương tác với cơ sở dữ liệu để truy xuất và nhập dữ liệu bằng loại định dạng nào?
2 Tìm kiếm và khám phá: Nhúng video

Sử dụng công cụ tìm kiếm để xác định ít nhất ba nguồn video có thể được nhúng để sử dụng trên các trang
web. Viết mô tả ngắn gọn xác định từng nguồn, loại video được cung cấp và nếu không miễn phí thì chi
phí thông thường. Liệt kê mọi hạn chế áp đặt đối với việc sử dụng video. Chọn một video từ mỗi trang web
và mô tả tình huống mà bạn, với tư cách là nhà thiết kế web, có thể đưa video đó vào một trang web.
đội
Hợp tác làm việc để củng cố các khái niệm trong chương bằng các bài tập Tiếp
tiếp cận
cận nhóm.
1 Nội dung Giá trị Gia tăng
Thiết kế web tốt liên quan đến việc sử dụng nội dung có giá trị gia tăng để thu hút, cung cấp thông tin
và lôi kéo khách truy cập trang web. Hợp tác với hai sinh viên khác để kiểm tra nội dung trên các
trang web sau. Liệt kê các loại nội dung khác nhau xuất hiện trên trang chủ và hai trang phụ cho mỗi
trang web. Hãy suy nghĩ về đối tượng mục tiêu của mỗi trang web cũng như các lựa chọn về thiết kế
và nội dung mà chủ sở hữu trang web đã thực hiện để đáp ứng mong đợi của khán giả.
Một. Nước ép Plus
b. Con ChóVacay
c. ù ù
Giải thích cách mỗi trang web sử dụng nội dung giá trị gia tăng. Trích dẫn các ví dụ hỗ trợ quyết
định của nhóm về mức độ hiệu quả của mỗi trang web sử dụng nội dung giá trị gia tăng.
2 Mục tiêu, Mục tiêu và Tuyên bố Mục đích của Trang web
Tham gia cùng với hai bạn cùng lớp khác để thành lập một nhóm cho hoạt động này. Chọn hai trong số các
thành viên trong nhóm để thành lập nhóm thiết kế web. Thành viên nhóm thứ ba sẽ đảm nhận vai trò là khách
hàng thuê nhóm thiết kế web để phát triển trang web của mình.
Một. Khách hàng phát triển ý tưởng cho một trang web B2C mà họ lựa chọn, chẳng hạn như một cửa hàng
xe đạp hoặc một doanh nghiệp chăm sóc thú cưng.
b. Nhóm thiết kế làm việc với khách hàng để phát triển danh sách các mục đích và mục đích của trang
web, viết tuyên bố mục đích chính thức và phát triển hồ sơ đối tượng mục tiêu cũng như đánh giá
nhu cầu cho trang web.
c. Với tư cách là một nhóm, hãy tìm kiếm hai trang web tương tự với trang web bạn đã lên kế hoạch.
Tạo một bản trình bày cho người hướng dẫn và các bạn cùng lớp khác để so sánh kế hoạch trang web
của nhóm với các trang web mẫu. Đưa vào bản trình bày phần đánh giá về cách các trang web mẫu đáp
ứng mục tiêu của họ và những thay đổi bạn sẽ thực hiện đối với trang web của họ hoặc kế hoạch trang
web của bạn sau khi thực hiện so sánh.
nghiên cứu điển hình Áp dụng các khái niệm của chương vào quá trình phát triển đang diễn ra trong thiết kế web
với Nghiên cứu điển hình.
Nghiên cứu điển hình là một quá trình phát triển liên tục sử dụng các khái niệm, kỹ thuật và Mẹo thiết kế được trình
bày trong mỗi chương.
Thông tin lai lịch

Ba bước được mô tả trong chương này đề cập đến rất nhiều nội dung—từ việc xác định mục đích, mục đích và đối tượng
của trang web cho đến lập kế hoạch về nội dung và cấu trúc của trang web.
Nếu bạn đã tìm hiểu kỹ thông tin trong từng bước và tìm hiểu các tài liệu cuối chương cho chương này thì bạn
đã sẵn sàng giải quyết nhiệm vụ của chương này.
Chương 3 Bài tập

Trong nhiệm vụ này, bạn sẽ bắt đầu tạo kế hoạch trang web chính thức của riêng mình bằng cách xác định mục tiêu và
mục tiêu của trang web, viết tuyên bố mục đích chính thức và tạo hồ sơ đối tượng mục tiêu cũng như đánh giá nhu
cầu. Bạn cũng sẽ lên kế hoạch về nội dung và cấu trúc chung của nó.
1. Sử dụng báo cáo bạn đã tạo trong Nghiên cứu điển hình Chương 2 làm điểm xuất phát,
tạo ra một kế hoạch trang web chính thức.
Một. Xác định mục đích và mục tiêu của trang web của bạn và phác thảo mục đích của trang web
tuyên bố.
b. Xác định (các) đối tượng mục tiêu của trang web của bạn và xác định mong muốn, nhu cầu cũng như những kỳ
vọng có thể có mà thiết kế và nội dung trang web của bạn sẽ đáp ứng cho đối tượng đó.
c. Xác định các trang ban đầu bạn định đưa vào trang web của mình.
d. Thêm vào kế hoạch trang web của bạn một danh sách nội dung có giá trị gia tăng sẽ giúp đạt được mục đích
của trang web và đáp ứng nhu cầu của đối tượng mục tiêu. Xác định các nguồn có thể có cho nội dung,
lưu ý các vấn đề bản quyền được thảo luận trong Chương 2.
đ. Xác định cấu trúc nào trong ba cấu trúc trang web—tuyến tính/hướng dẫn, web hoặc
phân cấp (hoặc kết hợp các cấu trúc)—sẽ đáp ứng tốt nhất mục đích trang web của bạn.
Sử dụng phác thảo văn bản, vẽ cấu trúc theo cách thủ công hoặc sử dụng phần mềm để minh họa cấu trúc
trang web của bạn như một phần trong kế hoạch thiết kế của bạn.
2. Gửi kế hoạch thiết kế một phần của bạn cho người hướng dẫn. Hãy chuẩn bị để thảo luận về
các yếu tố của kế hoạch thiết kế một phần của bạn trong lớp.
4 Lập kế hoạch thành công

Trang web: Phần 2
iSG
p
0B
1l 2
©
ảIh
6u
iAá
slatnem
Giới thiệu
Trong Chương 3, bạn đã hoàn thành ba trong số sáu bước đầu tiên cần thiết để phát
triển một kế hoạch thiết kế trang web vững chắc: bạn đã xác định mục tiêu, mục đích và đối
1ạ
6i 0Đ
2
©
tượng mục tiêu của trang web; lên kế hoạch nội dung chung của website; và chỉ định cấu
trúc của trang web. Trong chương này, bạn tiếp tục phát triển kế hoạch trang web
của mình bằng cách khám phá cách sử dụng hai biến một cách thích hợp—
độ dài trang và vị trí nội dung—có thể nâng cao khả năng sử dụng trang web. Sau đó, bạn
hoàn thành các Bước từ 4 đến 6, trong đó bạn lập kế hoạch điều hướng, chọn các tùy chọn
thiết kế cho trang web của mình và lập kế hoạch về cách bạn sẽ kiểm tra, xuất bản và duy
ma
nak 6d
g
t 1o
n
s 0K
ô
y
a 2
©
C
t
E
trì trang web. Cuối cùng, bạn sử dụng danh sách kiểm tra để xem lại kế hoạch trang web đã
hoàn thành của mình.
Mục tiêu
Sau khi hoàn thành chương này, bạn sẽ có thể:
1. Thảo luận về mối quan hệ giữa độ 4. Hoàn thành Bước 6: Xây dựng kế
dài trang, vị trí nội dung và khả hoạch kiểm tra, xuất bản và bảo trì
năng sử dụng trang web
2. Hoàn tất Bước 4: Chỉ định hệ 5. Sử dụng danh sách kiểm tra để xem lại kế hoạch
thống điều hướng của trang web thiết kế web của bạn
3. Hoàn tất Bước 5: Thiết kế giao diện

website
Độ dài trang, vị trí nội dung và khả năng sử dụng

Khi khách truy cập trang web xem trang web của bạn lần đầu tiên, những gì họ nhìn thấy trong nháy mắt
sẽ mang lại cảm nhận về nội dung của trang web cũng như khả năng đáp ứng nhu cầu và mong đợi của khách
truy cập. Vì bạn không thể kiểm soát độ phân giải và kích thước màn hình của khách truy cập nên bạn nên
chú ý đặt nội dung nhận dạng hình ảnh, chẳng hạn như biểu tượng và tên, lời kêu gọi hành động và các
liên kết quan trọng, phía trên và bên trái của các dòng cuộn tiềm năng hoặc cuộn vùng, là khu vực nằm ngoài
màn hình hiển thị ban đầu. Việc đặt nội dung trang và các công cụ điều hướng ở phía trên và bên trái
vùng cuộn không chỉ quan trọng đối với trang chủ website của bạn mà còn đối với tất cả các trang phụ để
đảm bảo tính nhất quán. Như bạn đã học ở Chương 3, trang chủ giới thiệu trang web của bạn bằng cách thông
báo cho khách truy cập những ai
bạn là ai, những gì bạn cung cấp trên trang web và nơi họ có thể tìm thấy thông tin cụ thể hoặc các
tính năng của trang web.
Như bạn đã học ở Chương 2, độ phân giải và kích thước màn hình xác định lượng trang hiển thị. Ở độ
phân giải thấp hơn và kích thước màn hình nhỏ hơn, khách truy cập có thể sẽ cần cuộn theo chiều dọc và
có thể theo chiều ngang để xem toàn bộ trang web. Một cách để tối đa hóa nội dung trực quan ban đầu là sử
dụng các bố cục nội dung như thẻ, băng chuyền hoặc trình chiếu. Trong chương này, bạn cũng sẽ tìm hiểu
về các menu có thể thu gọn và ẩn cũng như các công cụ điều hướng giúp tối đa hóa không gian trực quan.
Phụ lục C: RWD
Băng chuyền, bố
cục thẻ và trình Bạn cũng đã biết ở Chương 2 rằng khách truy cập trên máy tính để bàn thường không thích thao
ỘC
GNỤ
Ô B
chiếu giúp ngăn việc tác cuộn không cần thiết và thường tránh làm như vậy. Người dùng di động đã quen với việc phải cuộn do
cuộn trang web nhưng
kích thước màn hình nhỏ. Độ dài trang hiện nay ít được quan tâm hơn so với trước đây do ảnh hưởng của
có thể ảnh hưởng đến
thiết bị di động. Bạn vẫn nên cân nhắc độ dài trang vì lý do sau: nội dung ngắn hơn có xu hướng tập trung
kết quả SEO và khả năng
truy cập trang web của tốt hơn. Bằng cách trả lời các câu hỏi chính (tại sao, ở đâu, ai, v.v.) và cung cấp liên kết đến thông tin
bạn. Xem Phụ lục C để phụ hoặc thông tin cơ bản, bạn sẽ tối đa hóa tác động của nội dung trong khi giảm thiểu không gian của
biết thêm thông tin
nó.
về cách sử dụng các kỹ
Các nhà thiết kế web của trang chủ Dell (Hình 4-1) đã định vị nội dung là quan trọng
thuật thiết kế web đáp
ứng để tạo ra các để nhận dạng trực quan và liên kết đến các khu vực chính của trang web ở trên và bên trái của các
yếu tố tiết kiệm không gian này.dòng cuộn tiềm năng, đồng thời sử dụng băng chuyền để hiển thị nội dung.
điều hướng băng chuyền

6l
l 0D
1e 2
©
Hình 4-1 Đặt nội dung quan trọng về nhận dạng hình ảnh và điều hướng ở trên cùng bên trái.
Độ dài trang, vị trí nội dung và khả năng sử dụng 101
Bạn không có quyền kiểm soát độ phân giải màn hình, kích thước màn hình hoặc thói quen cuộn của THIẾT KẾ
khách truy cập. Để tăng khả năng sử dụng, hãy chú ý đặt nội dung quan trọng, chẳng hạn như biểu tượng, MẸO
tên, lời kêu gọi hành động và các liên kết chính, phía trên và bên trái của các dòng cuộn tiềm năng,
đồng thời sử dụng kỹ thuật RWD, ưu tiên thiết bị di động. Việc sử dụng các phương pháp này sẽ tối
đa hóa nội dung mà khách truy cập nhìn thấy, có khả năng lôi kéo họ đọc thêm hoặc truy cập các
trang web khác trên trang web của bạn.
Để tăng khả năng sử dụng và thúc đẩy sự thống nhất, bạn hãy làm theo các nguyên tắc tương tự
trên các trang phụ bằng cách đặt các yếu tố nhận dạng và điều hướng phía trên và bên trái của các
dòng cuộn tiềm năng. Các trang phụ cung cấp nhiều chi tiết hơn để hỗ trợ một chủ đề cụ thể
hoặc tính năng trang web và có thể không phù hợp với một trang văn bản, đồ họa và nội dung khác. Khi
cần mở rộng nội dung trang web ra ngoài một màn hình hiển thị duy nhất, hãy cân nhắc giới hạn độ
dài trang ở hai màn hình nội dung đối với chế độ xem thông thường trên máy tính để bàn, vì người
dùng thiết bị di động có nhiều khả năng cuộn để xem nội dung hơn.
Đảm bảo rằng khách truy cập của bạn sẽ không cần phải cuộn quá mức để xem toàn bộ trang và có thể THIẾT KẾ
dễ dàng quay lại đầu trang và khu vực điều hướng. MẸO
Một vấn đề UX quan trọng khác cần xem xét khi định vị nội dung là nơi mà khách truy cập thường
nhìn thấy đầu tiên khi xem một trang web. Các nghiên cứu theo dõi bằng mắt sử dụng nhiều công nghệ
khác nhau để phân tích chuyển động của mắt khách truy cập khi họ xem trang web và tạo ra bản
đồ nhiệt, một công cụ phân tích sử dụng màu sắc để thể hiện dữ liệu. Bản đồ nhiệt thu được, như
trong Hình 4-2, gợi ý rằng khách truy cập trang web thường tuân theo mô hình F: trước tiên họ
nhìn vào khu vực trên cùng và bên trái của trang, sau đó nhìn xuống và bên phải.
Theo dõi bằng mắt là một ví dụ nữa về tầm quan trọng của việc hiểu hành vi của khán giả khi đưa
ra lựa chọn thiết kế. Các nghiên cứu theo dõi bằng mắt bổ sung hỗ trợ cho khái niệm đặt lời kêu
gọi hành động, nội dung nhận dạng hình ảnh và các liên kết chính ở hoặc gần đầu và
1ạ
6i 0Đ
2
©
Hình 4-2 Bản đồ nhiệt dạng F cho thấy khách truy cập nhìn vào khu vực trên cùng và bên trái của trang, sau đó nhìn
xuống và bên phải.
bên trái của trang để cải thiện khả năng sử dụng. Lời kêu gọi hành động phải được đặt nổi bật để đảm bảo
khách truy cập tập trung vào chúng. Hãy cân nhắc việc cung cấp các manh mối trực quan, chẳng hạn như mũi tên,
bóng đổ hoặc hình người chỉ hoặc xem nội dung để thu hút sự chú ý của khách truy cập. Tiếp thị trên web dựa
vào dữ liệu từ các nghiên cứu theo dõi bằng mắt. Bạn tìm hiểu thêm về tiếp thị trang web trong Chương 7.
Khi thiết kế trang web, bạn cần quyết định cách quản lý chiều rộng trang. Một chất lỏng
hoặc bố cục trang linh hoạt đặt chiều rộng của trang theo tỷ lệ phần trăm của cửa sổ trình duyệt.
Lợi ích của bố cục linh hoạt là trang sẽ mở rộng để lấp đầy toàn bộ cửa sổ, tối đa hóa nội dung có thể
xem được. Tuy nhiên, bố cục linh hoạt cho phép kiểm soát ít hơn về kích thước hoặc vị trí của hình ảnh và
văn bản, điều này có thể dẫn đến vị trí hoặc nội dung bất tiện hoặc không thể đọc được. Bố cục trang có
chiều rộng cố định đặt chiều rộng pixel cụ thể cho trang. Lợi ích của các trang có chiều rộng cố định là
bố cục nhất quán bất kể độ phân giải. Tuy nhiên, bố cục trang có chiều rộng cố định có thể gây ra sự cố.
Trên màn hình có độ phân giải thấp hơn hoặc kích thước nhỏ hơn, khách truy cập có thể cần cuộn trang có
chiều rộng cố định theo chiều ngang. Bố cục trang kết hợp
sử dụng kết hợp bố cục trang có chiều rộng cố định và linh hoạt, đồng thời xem xét các kỹ thuật thiết kế
web đáp ứng (RWD). Một khía cạnh của bố cục trang kết hợp có thể là đặt chiều rộng màn hình tối đa mà trang
web hiển thị.
THIẾT KẾ Hãy xem xét nhu cầu của khách truy cập trang web của bạn và các thông lệ RWD hiện tại khi quyết định
MẸO định dạng bố cục trang. Đảm bảo kiểm tra các trang của bạn ở các độ phân giải và kích thước màn
hình khác nhau. Hãy cân nhắc việc sử dụng bố cục trang kết hợp để đảm bảo tính linh hoạt về
chiều rộng của trang.
CỦA BẠN Khám phá các tùy chọn chiều rộng trang web
XOAY
1. Sử dụng công cụ tìm kiếm bạn chọn để Những kỹ thuật nào mà các nhà thiết kế web có thể đã
nghiên cứu các tùy chọn chiều rộng bằng cách sử dụng các sử dụng để làm cho trang có thể đọc được trên các chiều
từ khóa như bố cục linh hoạt, bố cục có chiều rộng cố định hoặc rộng trang khác nhau?
thiết kế web đáp ứng. Tìm ba bài viết thảo luận về lợi 3. Tóm tắt nghiên cứu của bạn. Bạn có thể áp dụng những gì
ích và nhược điểm của đã học về chiều rộng trang web vào thiết kế của
các kỹ thuật khác nhau. trang web như thế nào? Lấy
2. Xem các loại trang web khác nhau (ví dụ: chính xem xét nhu cầu của khán giả và
phủ, doanh nghiệp và giải trí) bằng nhiều trang sẽ trông khác như thế nào
thiết bị hoặc kích thước màn hình. Đối với mỗi trang nghị quyết.
web, độ rộng trang có thích ứng khi kích thước màn hình 4. Gửi những phát hiện của bạn theo định dạng
thay đổi không? mà người hướng dẫn của bạn yêu cầu.
Bước 4: Chỉ định hệ thống điều hướng của trang web

Khi bạn đã xác định được cấu trúc trang web của mình, bước tiếp theo trong việc phát triển kế hoạch trang web
là chỉ định hệ thống điều hướng bạn sẽ sử dụng. Hệ thống điều hướng dễ hiểu và dễ theo dõi cho khách truy
cập sẽ thu hút họ vào sâu hơn trong trang web của bạn để xem các trang chi tiết có nội dung có thể đáp ứng
nhu cầu và mong đợi của họ. Hệ thống điều hướng trang web bao gồm nhiều loại liên kết khác nhau: liên kết
văn bản; liên kết ẩn; liên kết hình ảnh; các nhóm liên kết liên quan được trình bày dưới dạng menu, thanh
hoặc tab; và những con đường dẫn bánh mì. Các trang web thường sử dụng kết hợp các loại liên kết này. Một
trang web lớn với nhiều trang cũng nên bao gồm
Bước 4: Chỉ định hệ thống điều hướng của trang web 103
Hướng dẫn của

khả năng tìm kiếm, cho phép khách truy cập tìm kiếm nội dung trong trang web. Bạn cũng nên lưu ý đến
ỏđ
H
WAI là gì?
iá
p
nhu cầu của người dùng màn hình cảm ứng khi quyết định các tùy chọn điều hướng. Ngoài ra, hãy đảm bảo
WAI là Sáng kiến
rằng việc sử dụng các liên kết của bạn đáp ứng các nguyên tắc hiện tại của WAI về khả năng truy cập.
Truy cập Web, một tiêu
chuẩn mở được phát
triển bởi World
Wide Web Consortium
Điều hướng dựa trên người dùng và do người dùng kiểm soát (W3C).
WAI xây dựng các
nguyên tắc để đảm bảo

Trong Chương 3, bạn đã tìm hiểu về ba cấu trúc phổ biến được sử dụng để tổ chức
tất cả khách truy cập trang web
các trang tại một trang web: tuyến tính/hướng dẫn, mạng và phân cấp. Trong ví dụ đang diễn ra của
có thể truy cập nội dung
chúng tôi, nhóm trang web Fit4U đã chọn kết hợp cấu trúc trang web tuyến tính và phân cấp. Trong
trên các trang web.
Chương 3, bạn cũng đã tạo một sơ đồ trang web (xem Hình 3-19) minh họa cách tổ chức các trang của trang Để biết thêm thông
web và các liên kết chính giữa các trang. Với cấu trúc này, bạn đã sẵn sàng chọn loại liên kết cho các tin về nguyên tắc WAI cho
các liên kết và các
trang của mình. Cho dù bạn sử dụng kết hợp loại liên kết nào cho hệ thống điều hướng trang web của mình
thành phần trang web
thì các liên kết đó phải dựa trên cả người dùng và do người dùng kiểm soát. khác, hãy sử dụng công cụ
tìm kiếm để tìm kiếm
Hệ thống điều hướng dựa trên người dùng cung cấp mối quan hệ liên kết giữa các trang dựa trên nguyên tắc web WAI.
nhu cầu của khách truy cập trang web thay vì nhu cầu của nhà xuất bản trang web . Để phát triển hệ thống
điều hướng dựa trên người dùng, bạn hãy xem xét thông tin hồ sơ đối tượng mục tiêu mà bạn đã phát triển WAI là gì
ỏđ
H
hướng dẫn về liên kết
iá
p
trong Bước 1 của kế hoạch trang web và cấu trúc trang web cơ bản được phát triển ở Bước 3, cùng với sự hiểu
và điều hướng?
biết về thực tiễn UX. Một cách để hiểu rõ hơn về cách khách truy cập sẽ sử dụng trang web của bạn—và để
Hướng dẫn của WAI cho các
đảm bảo rằng hệ thống điều hướng của bạn dựa trên người dùng—là thực hiện các bài kiểm tra khả năng sử dụng
liên kết chỉ định việc xác định
khi bạn phát triển hệ thống. Bạn sẽ tìm hiểu thêm về kiểm tra khả năng sử dụng ở phần sau của chương này. mục tiêu cho một liên kết
một cách rõ ràng và không
chỉ sử dụng màu sắc để

Hệ thống điều hướng do người dùng kiểm soát cung cấp nhiều cách khác nhau để khách truy cập có thể
xác định các liên kết. Nhóm
di chuyển xung quanh trang web ngoài các liên kết chính từ trang chủ. Điều hướng do người dùng kiểm soát
các liên kết liên quan lại với
cho phép khách truy cập di chuyển quanh trang web theo cách họ chọn—và không bị giới hạn theo ý kiến của nhau trong thanh điều
nhà xuất bản trang web về cách khách truy cập nên di chuyển từ trang này sang trang khác. Ví dụ: một hướng một cách nhất quán trên
tất cả các trang của một trang web.

số khách truy cập vào trang web B2C có thể truy cập thẳng vào danh mục sản phẩm. Một số khách truy cập
có thể thích tìm kiếm một sản phẩm cụ thể. Những người khác có thể muốn tìm hiểu thêm về công ty trước.
Bao gồm điều hướng trở lại trang chủ trên tất cả các trang phụ. Bao gồm điều hướng từng THIẾT KẾ
trang cũng như tính năng tìm kiếm trong danh mục sản phẩm. Việc cung cấp nhiều loại liên MẸO
kết khác nhau trong hệ thống điều hướng của bạn cho phép khách truy cập trang web tự do lựa
chọn cách họ muốn di chuyển từ trang này sang trang khác trên trang web của bạn.
Tạo hệ thống điều hướng dựa trên người dùng để phù hợp với cách khách truy cập di chuyển THIẾT KẾ
từ trang này sang trang khác trên trang web của bạn. Xem xét tất cả các loại người dùng MẸO
và nhu cầu khác nhau của họ, bao gồm cách họ tìm kiếm nội dung và loại thiết bị họ
sử dụng.
Các loại liên kết
Để tạo một hệ thống điều hướng được thiết kế tốt, do người dùng kiểm soát cho trang web của bạn,
xem xét việc kết hợp các loại liên kết khác nhau: liên kết văn bản; liên kết ẩn; liên kết hình ảnh;
các nhóm liên kết liên quan được trình bày dưới dạng menu, thanh hoặc tab; và một đường dẫn bánh mì.
Bạn cũng nên xem xét việc thêm khả năng tìm kiếm vào trang web của mình.
Chú giải công cụ là gì? LIÊN KẾT VĂN BẢN Liên kết văn bản là các siêu liên kết dựa trên một từ hoặc nhiều từ. Liên kết văn bản là cách
Chú giải công cụ là một
phổ biến để điều hướng giữa các phần trên cùng một trang, giữa các trang web trên cùng một trang web hoặc từ trang
hộp văn bản nhỏ có thể
web tại một trang web này đến trang web tại một trang web khác. Liên kết văn bản phải xác định rõ ràng mục tiêu của
xuất hiện khi bạn trỏ
tới một liên kết. nó, đó là trang web hoặc nội dung mà liên kết trỏ đến. Khi bao gồm các liên kết văn bản đến nội dung liên quan, chẳng
Các nhà thiết kế web sử hạn như một bài viết cung cấp thông tin cơ bản, hãy tạo liên kết văn bản bằng cách sử dụng văn bản hiện có trong
dụng chú giải công cụ để
nội dung trang. Kỹ thuật này thường được sử dụng trong các bài báo, chẳng hạn như bài trên CNet
cung cấp mô tả về mục tiêu
liên kết nhằm tránh nhầm

lẫn. bài viết được hiển thị trong Hình 4-3.
thay đổi màu sắc để biểu thị liên kết

được theo dõi liên kết đã hủy theo dõi
Làm cách nào để làm cho
trang web của tôi thân
thiện với màn hình cảm ứng?

Một số menu có thể
gây khó khăn cho
người dùng màn hình cảm ứng
để điều hướng. Màn hình
6c
evitcar.
e 1n
S
t 0I
B 2
©
C
cảm ứng không có
một thiết bị trỏ thay
đổi thành con trỏ tay
khi được đặt trên một Hình 4-3 Trong bài viết, sử dụng văn bản hiện có để tạo liên kết.
liên kết, vì vậy các
liên kết và điều hướng
phải rõ ràng đối với tất

Sử dụng định dạng để biểu thị liên kết văn bản thay vì thêm văn bản hướng dẫn, chẳng hạn như nhấp vào đây.
cả khách truy cập.
Ví dụ: định dạng cho một liên kết văn bản có thể được tô màu và in đậm, như trong Hình 4-3. Bao gồm cả định dạng và
Để biết thêm thông tin
về việc làm cho trang web

màu sắc để biểu thị liên kết văn bản giúp đáp ứng các tiêu chuẩn về khả năng truy cập trang web. Sau khi khách truy
của bạn có thể truy cập được cập nhấp vào liên kết văn bản, văn bản vẫn được định dạng nhưng màu sắc sẽ thay đổi theo truyền thống (chẳng hạn như từ
người dùng màn hình cảm
xanh lam sang tím) để biểu thị liên kết được theo dõi. Hãy cân nhắc việc sử dụng màu sắc cho các liên kết phù hợp
ứng, hãy sử dụng công cụ
với thiết kế trang web của bạn. Hãy nhất quán với cách xử lý các liên kết văn bản trên toàn bộ trang web của bạn. Tránh
tìm kiếm để tìm kiếm điều
sử dụng cùng định dạng mà bạn sử dụng cho các liên kết để nhấn mạnh văn bản.
hướng trang web thân thiện với
màn hình cảm ứng.
THIẾT KẾ Sử dụng ngôn ngữ mô tả trong liên kết văn bản để biểu thị nội dung trang đích. Sử dụng
MẸO định dạng nhất quán cho các liên kết văn bản trên toàn bộ trang web của bạn. Thêm định
dạng và màu sắc để đáp ứng các tiêu chuẩn trợ năng cho liên kết văn bản.
LIÊN KẾT ẨN Một số tùy chọn điều hướng được thu gọn hoặc ẩn theo mặc định. Được gọi là menu ngoài canvas hoặc menu
hamburger, khi khách truy cập trang web trỏ đến hoặc nhấp vào menu, nó sẽ mở rộng và hiển thị menu gồm các liên kết.
Hình 4-4 hiển thị một menu ngoài canvas tại Slate
menu ẩn hiển thị
nút menu ngoài canvas
6C
et
n 1L
p
à
a 0L
ậ
o
l 2
©
T
đ
S
Hình 4-4 Các menu ẩn tiết kiệm không gian màn hình bằng cách chỉ mở rộng khi được trỏ tới hoặc nhấp vào.
trang mạng. Những người ủng hộ menu off-canvas cho rằng chúng tiết kiệm không gian màn hình. Các nhà Phụ lục B: CSS
Nếu bạn quyết định

thiết kế web khác tránh chúng vì khách truy cập trang web có thể không chú ý hoặc nhấp vào chúng, có khả
ỘC
GNỤ
Ô B
rằng điều hướng ẩn
năng bỏ lỡ quyền truy cập nội dung có sẵn từ menu. Bạn cũng có thể tìm thấy các liên kết văn bản trông giống
phục vụ mục đích cho
như văn bản nội dung cho đến khi bạn trỏ vào nó, lúc đó liên kết đó sẽ đổi màu và/hoặc được gạch chân trang web của mình trong khi
để biểu thị một liên kết. Loại liên kết ẩn này là liên kết di chuột qua. vẫn đáp ứng nhu cầu điều hướng
của khách truy cập, bạn có

Hãy thận trọng khi tạo liên kết di chuột qua hoặc sử dụng các màu phối hợp khác nhau cho liên kết văn bản của
thể tạo hiệu ứng bằng tập
bạn. Điều hướng dựa trên người dùng yêu cầu trước tiên bạn phải xem xét tác động của các liên kết văn bản
lệnh hoặc CSS. Xem Phụ lục
mới và được theo dõi bị ẩn hoặc được định dạng khác đối với khả năng sử dụng và khả năng truy cập của các B để biết thêm thông tin.
trang trên trang web của bạn.
Trong giai đoạn thử nghiệm, hãy đảm bảo rằng mọi liên kết điều hướng ẩn đều đáp ứng THIẾT KẾ
mong đợi của đối tượng mục tiêu và không có ảnh hưởng xấu đến khả năng sử dụng và khả năng MẸO
truy cập các trang trên trang web của bạn.
Liên kết hình ảnh Liên kết hình ảnh chỉ định một liên kết đến một yếu tố trực quan, chẳng hạn như hình minh họa Khi nào tôi có thể sử dụng bản
iá
p ỏđ
H
đồ hình ảnh?
hoặc ảnh. Công dụng phổ biến của liên kết hình ảnh là bản đồ hình ảnh. Bản đồ hình ảnh, đôi khi được gọi là bản
Việc sử dụng phổ biến bản
đồ có thể nhấp, là một hình ảnh chứa các điểm nóng, là các khu vực trên hình ảnh được gán liên kết.
đồ hình ảnh là bản đồ địa lý
có thể nhấp chuột. Để biết

thêm thông tin
về bản đồ hình ảnh, hãy
sử dụng công cụ tìm kiếm để

tìm kiếm khi nào nên sử dụng
bản đồ hình ảnh.
Khu vực điều hướng Bạn nên nhóm các liên kết liên quan vào một khu vực điều hướng để tạo thành phần thiết
kế bắt mắt và giúp khách truy cập xác định các liên kết đến các trang phụ chính của trang web một cách
nhanh chóng. Các khu vực điều hướng có thể nhóm các liên kết trong menu, thanh, tab hoặc kết hợp các kỹ
thuật. Các ví dụ trong Hình 4-5, 4-6 và 4-7 có thể trông giống nhau, nhưng tất cả đều là những ví dụ tuyệt
vời về các cách tiếp cận khác nhau đối với các khu vực điều hướng.
6r
lw
uaBt0A
1i
e2
©
J
menu bật ra xuất hiện
ey
s
khi bạn trỏ tới
Tab “Lên kế hoạch chuyến đi”
Hình 4-5 Một số menu điều hướng chứa nhiều cấp độ liên kết được hiển thị dưới dạng menu bật ra.
nút điều hướng có áp dụng

màu di chuột
trình đơn thả xuống
–n
moc.sh
o 9a
6
p
c 0ó
1
p
ặ
c
i
á 0n
a
o
á
h
ủ ©
2
Z
h
c
Hình 4-6 Thanh điều hướng sử dụng các nút đồ họa để hiển thị các liên kết; một số nút trên thanh điều hướng hiển thị
menu thả xuống của các liên kết bổ sung.
menu thả xuống xuất hiện khi bạn

trỏ đến “Học thuật”
0Đ
1ạ
6i 2
©
Hình 4-7 Tab có menu thả xuống xuất hiện khi di chuột.
• Menu điều hướng là danh sách các liên kết liên quan. Một menu điều hướng có thể chứa
nhiều cấp độ liên kết được hiển thị dưới dạng menu bật ra. Hình 4-5 hiển thị một menu bật ra
từ trang web JetBlue.
• Thanh điều hướng thường sử dụng các nút đồ họa để hiển thị các liên kết. Trỏ vào một số nút trên
thanh điều hướng sẽ hiển thị các menu thả xuống. Một số trang web thêm thanh điều hướng bằng
liên kết văn bản thay vì liên kết nút ở cuối mỗi trang. Hình 4-6 hiển thị thanh điều hướng
với menu thả xuống từ trang web Zappos.
• Các tab điều hướng hiển thị các liên kết dưới dạng các tab nhỏ. Các tab điều hướng hoạt
động tốt nhất khi liên kết với các chế độ xem nội dung thay thế. Hình 4-7 hiển thị
trang web của Đại học Clemson, sử dụng các tab điều hướng.
Cho dù bạn đưa yếu tố điều hướng nào vào trang web của mình thì các quy tắc thiết kế cơ bản THIẾT KẾ
vẫn được áp dụng. Sử dụng các yếu tố điều hướng một cách nhất quán trên tất cả các trang MẸO
trên trang web của bạn. Màu sắc của phần tử điều hướng phải tuân theo bảng màu tổng thể của
trang web để duy trì nhận dạng hình ảnh. Hãy chắc chắn để chỉ ra trang mục tiêu rõ ràng.
Đường dẫn Breadcrumb Đường dẫn Breadcrumb là một đường viền phân cấp hoặc danh sách ngang hiển
thị cho khách truy cập đường dẫn từ trang chủ đến trang hiện đang xem.
Đường dẫn breadcrumb (như được hiển thị trên trang web của Trung tâm Kiểm soát và Phòng ngừa Dịch bệnh
trong Hình 4-8) cung cấp cho khách truy cập cái nhìn trực quan về mối quan hệ liên kết giữa các
trang. Khách truy cập có thể nhấp vào bất kỳ liên kết nào trong đường dẫn đường dẫn để quay lại trang
mục tiêu của liên kết đó.
đường dẫn breadcrumb từ trang

chủ đến trang hiện tại
mn
gh
t
n
a uệ
m
ể
á
ò
ừ
c rb
â
i
o
à
h
g
ị T
t
K
s
v
P
n
d
Hình 4-8 Đường dẫn breadcrumb hiển thị đường dẫn giữa trang chủ và trang hiện tại.
Đường dẫn Breadcrumb phù hợp nhất với các trang web lớn có cấu trúc phân cấp. THIẾT KẾ
Sử dụng đường dẫn đường dẫn kết hợp với các thành phần điều hướng khác, chẳng hạn như menu MẸO
hoặc thanh điều hướng.
CỦA BẠN Khám phá điều hướng

XOAY
1. Xác định sáu trang web: hai trang web thương mại điện tử liên kết mới và theo sau có khác nhau không?
trang web, hai blog về thiết kế web và hai trang web tổ chức. Các liên kết văn bản ẩn hoặc di chuột qua có được sử dụng không?
Làm quen với cách điều hướng trên mỗi trang web. 3. Kiểm tra cách mỗi trang web trình bày menu.
Một. Trang web sử dụng loại menu nào? b. Có tồn tại ví dụ nào về
2. Kiểm tra cách mỗi trang web trình bày các liên kết văn bản. menu ẩn không?
Một. Văn bản liên kết có xác định rõ ràng trang web hoặc Chúng có dễ tìm và sử dụng không?
nội dung mục tiêu của liên kết không? Chú giải công 4. Liệu kết quả nghiên cứu của bạn có quyết định
cụ có xuất hiện khi bạn trỏ đến văn bản không bạn sẽ sử dụng (những) loại điều hướng nào với tư cách là nhà
liên kết?
thiết kế web? Nếu có thì làm thế nào? Nếu không thì tại sao không?
b. Trang web có sử dụng cả màu sắc và 5. Tóm tắt những phát hiện của bạn và gửi theo định dạng mà người
định dạng để xác định liên kết văn bản? thế nào hướng dẫn của bạn yêu cầu.
Trang web là gì
Khả năng tìm kiếm Việc thêm khả năng tìm kiếm từ khóa và hộp tìm kiếm vào tất cả các trang chính trên
iáỏđ
H
mục lục?
p
trang web của bạn cho phép khách truy cập định vị các trang trên trang web của bạn có chứa các từ
Chỉ mục trang web là một
khóa cụ thể mà không cần duyệt từng trang trên trang web của bạn và duy trì tính nhất quán về mặt hình ảnh
trang tổng hợp các liên kết
đến các trang chính tại trên các trang. Tính năng tìm kiếm trang web là một công cụ điều hướng phổ biến khác dành cho các trang web
website. Với việc sử dụng
có nhiều trang. Một doanh nghiệp hoặc tổ chức lớn quản lý máy chủ web của riêng mình có thể sử dụng tập lệnh
các tính năng tìm
để tạo và duy trì chỉ mục trang web có thể tìm kiếm được trên máy chủ của mình. Nếu bạn không quản lý máy chủ
kiếm, chỉ mục trang
web của riêng mình, bạn có thể ký hợp đồng với nhà cung cấp dịch vụ tìm kiếm trang web được lưu trữ để cung
web có vẻ như là một
tính năng không cần thiết. cấp dịch vụ tìm kiếm. Nhà cung cấp dịch vụ tìm kiếm trang web được lưu trữ là một công ty bên thứ ba sử
Tuy nhiên, nó có thể dụng trình thu thập thông tin hoặc các công cụ khác để tạo chỉ mục có thể tìm kiếm cho các trang trên
hữu ích cho khách
trang web của bạn và sau đó lưu trữ chỉ mục trên máy chủ của họ. Bạn sử dụng các mẫu và công cụ do nhà
truy cập và là một trang
cung cấp dịch vụ tìm kiếm cung cấp để thêm hộp tìm kiếm vào các trang của mình. Hệ thống quản lý nội dung
dễ tạo và thêm vào trang web
của bạn. Một trang web thường bao gồm tùy chọn tính năng tìm kiếm. Hình 4-9 cho thấy việc tìm kiếm đang được tiến hành tại trang web Reuseit.
chỉ mục đôi khi còn được
gọi là sơ đồ trang web,

nhưng không nên nhầm lẫn
nó với một trang web
bản đồ được sử dụng trong quá
trình lập kế hoạch thiết kế.
Tự động
iá
p ỏđ
H
hoàn thành là gì?
Tự động hoàn thành
là công nghệ dự đoán
cụm từ tìm kiếm khi khách

truy cập trang web
nhập từ khóa vào hộp tìm

kiếm. Học
hơn thế nữa, hãy sử dụng
công cụ tìm kiếm để tìm
kiếm tính năng tìm kiếm tự

động hoàn thành.
6n
®g 1ụ
i 0d
á
ử 2
©
T
s
Hình 4-9 Việc thêm khả năng tìm kiếm vào trang web của bạn cho phép khách truy cập tìm thấy thông tin cụ thể một cách nhanh chóng.
THIẾT KẾ Cung cấp chỉ mục trang web dựa trên liên kết văn bản cho các trang web lớn có nhiều trang. Sắp xếp các liên kết văn
MẸO bản của chỉ mục trang web theo cách hợp lý, chẳng hạn như theo thứ tự bảng chữ cái hoặc theo chủ đề.
Khám phá các nhà cung cấp dịch vụ tìm kiếm trang web tùy chỉnh CỦA BẠN
XOAY
1. Sử dụng công cụ tìm kiếm bạn chọn để tìm kiếm các từ 3. Chọn dịch vụ tìm kiếm trang web được lưu trữ trên máy
khóa thêm tìm kiếm tùy chỉnh vào một chủ mà bạn có thể giới thiệu cho khách hàng
trang web hoặc các từ khóa tương tự. Xác định năm công ty bạn đang phát triển một trang web thương mại điện
B2B cung cấp dịch vụ tìm kiếm trang web được lưu trữ tử B2C. Đưa ra lý do cho đề nghị của bạn.
trên máy chủ.
2. So sánh các dịch vụ được cung cấp bởi mỗi 4. Gửi những phát hiện của bạn theo định dạng mà người hướng
công ty. Tóm tắt những tính năng đặc biệt và chi phí cho dẫn của bạn yêu cầu.
dịch vụ của từng công ty.
Tạo hệ thống điều hướng do người dùng kiểm soát bằng cách kết hợp các liên kết văn bản trong hệ thống THIẾT KẾ
điều hướng của bạn; liên kết ẩn; liên kết hình ảnh; menu, thanh và tab điều hướng; một đường dẫn bánh mì; MẸO
và khả năng tìm kiếm phù hợp với đối tượng mục tiêu của bạn.
Các cấp độ điều hướng trang web
Có một số danh mục trang web và điều hướng trang web, tất cả đều có mục đích và chức năng khác
nhau. Điều hướng chính cung cấp cái nhìn tổng quan về trang web và nhìn chung vẫn nhất quán từ
trang này sang trang khác, chẳng hạn như thanh menu. Điều hướng cục bộ hoặc công ty con cung cấp điều
hướng trong một khu vực của trang web, chẳng hạn như menu bật ra hoặc đường dẫn đường dẫn. Điều
hướng theo ngữ cảnh dành riêng cho trang web nội dung đang được xem. Ví dụ về điều hướng theo ngữ
cảnh bao gồm các liên kết văn bản trong một bài viết hoặc danh sách các liên kết có liên quan. Điều
hướng thích ứng đề cập đến các liên kết sử dụng lịch sử tìm kiếm hoặc duyệt web của khách truy cập
trang web để cung cấp các đề xuất nội dung có thể được quan tâm.
Nhóm thiết kế trang web Fit4U của bạn đồng ý rằng để đáp ứng nhu cầu của khách truy cập, trang web
hệ thống định vị phải dựa trên người dùng và do người dùng kiểm soát và phải tuân theo các nguyên
tắc của WAI. Hệ thống điều hướng sẽ bao gồm một thanh điều hướng ở đầu mỗi trang, menu điều hướng ở bên
trái mỗi trang, các liên kết văn bản được định dạng, các liên kết xác định các trang mục tiêu và liên
kết đến trang chủ trên các trang phụ. Bạn cũng sẽ ký hợp đồng với nhà cung cấp dịch vụ tìm kiếm trang
web được lưu trữ để thêm tính năng tìm kiếm vào các trang của trang web. Hình 4-10 minh họa việc cập
nhật kế hoạch trang web.
Trang web Fit4U
Hệ thống định vị
• Thanh điều hướng trên cùng
• Menu điều hướng bên trái
• Liên kết văn bản được định dạng
• Khả năng tìm kiếm được hỗ trợ bởi nhà cung cấp dịch vụ tìm kiếm trang web được lưu trữ trên máy chủ
Hình 4-10 Hệ thống điều hướng dựa trên người dùng và do người dùng kiểm soát sẽ nâng cao khả năng sử dụng trang web của bạn.
Giao diện của một trang

iá
p ỏđ
H
web là gì ? Bước 5: Thiết kế giao diện của trang web

Như đã mô tả trong
chương này, giao diện

Tại thời điểm này, bạn đã xác định mục đích và đối tượng của trang web, phát triển kế hoạch cho nội dung,
của một trang web là
cấu trúc và điều hướng chung của trang web, đồng thời hiểu được vai trò của độ dài trang và vị trí nội
sự kết hợp của các khía
cạnh thiết kế. Cảm giác dung đối với khả năng sử dụng. Bây giờ bạn đã sẵn sàng thực hiện bước tiếp theo, đó là lập kế hoạch thiết kế
về một trang web là hành
trang web của bạn. Chương 2 đã giới thiệu cho bạn các khái niệm về sự thống nhất và nhận dạng hình ảnh
vi của các thành phần
cũng như tầm quan trọng của việc tuân theo các thông số kỹ thuật về thương hiệu của một thực thể khi
trên đó, chẳng hạn như
điều hướng hoặc hoạt lập kế hoạch thiết kế một trang web. Để thúc đẩy sự thống nhất và duy trì nhận diện thương hiệu trên các
ảnh. Giao diện kết hợp trang trên trang web của bạn, hãy sử dụng tính nhất quán về hình ảnh khi chọn màu sắc và kiểu chữ cũng
để hiển thị cảm xúc hoặc như khi định vị nội dung trên tất cả các trang tại trang web của bạn.
phản ứng mà trang web
gợi lên cho khách truy cập.
Tính nhất quán về mặt hình ảnh
Khách truy cập trang web có thể cảm thấy bối rối nếu các trang phụ của trang web không bao gồm com-
mon nội dung và các tính năng thiết kế được tìm thấy trên trang chủ. Họ thậm chí có thể kết luận rằng
một trang phụ thuộc về một trang web hoàn toàn khác. Để tránh gây nhầm lẫn cho khách truy cập, tất cả các
trang trong một trang web phải có sự nhất quán về mặt hình ảnh để củng cố nhận diện thương hiệu của công
ty khi khách truy cập chuyển từ trang này sang trang khác.
Bạn có thể tạo sự nhất quán về mặt hình ảnh bằng cách lặp lại các đặc điểm thiết kế trên tất cả các trang
của một trang web, bao gồm:
• Phông chữ và kiểu chữ
• Vị trí nội dung
• Bảng màu
• Vị trí của công ty hoặc tên trang web, logo và các yếu tố điều hướng
Việc lặp lại các tính năng và nội dung thiết kế, như được hiển thị tại trang web Orange Leaf trong
Hình 4-11, thống nhất các trang của trang web, củng cố nhận dạng hình ảnh và thương hiệu của trang web cũng
như duy trì tính nhất quán về hình ảnh.
Logo
định vị cửa hàng định vị cửa hàng

Logo
ei
sgn 5l
gd
n
f 1o
a 0H
r
e 2
©
O
L
Hình 4-11 Sự lặp lại của các yếu tố thiết kế và nội dung sẽ thúc đẩy sự thống nhất, duy trì bản sắc hình ảnh và tạo sự nhất quán về hình ảnh.
THIẾT KẾ Việc lặp lại các đặc điểm thiết kế trên tất cả các trang của một trang web là một kỹ thuật bạn có
MẸO thể sử dụng để tạo sự nhất quán về mặt hình ảnh. Sử dụng các yếu tố lặp lại như màu sắc, logo và
các liên kết chính.
Bước 5: Thiết kế giao diện trang web 111
Màu sắc và độ tương phản hình ảnh
Trong Chương 2, bạn đã tìm hiểu về nguyên tắc màu sắc như một công cụ thiết kế và cách phối
màu được lựa chọn hợp lý sẽ tạo ra sự thống nhất giữa các trang trên một trang web. Khi bạn xem xét các tùy
chọn màu sắc cho các trang của trang web, hãy nhớ sức mạnh của màu sắc ảnh hưởng đến tâm trạng, ý nghĩa
văn hóa của màu sắc và kỳ vọng của đối tượng mục tiêu về việc sử dụng màu sắc trên trang web của bạn.
Áp dụng cùng một bảng màu cho nền, điều hướng và các thành phần hình ảnh khác cũng như văn bản cho tất
cả các trang web để tạo tính nhất quán về hình ảnh trên toàn bộ trang web của bạn. Độ dài trang, vị trí nội
dung và cách sử dụng màu sắc kết hợp với nhau để tạo ra các trang hấp dẫn và hữu dụng.
Chọn màu nền và màu văn bản có độ tương phản vừa đủ để nâng cao khả năng đọc và cho phép dễ đọc khi
in. Các nghiên cứu đã chỉ ra rằng, nhìn chung, độ tương phản cao hơn sẽ dẫn đến khả năng đọc tốt hơn. Các
nhà thiết kế web thường sử dụng màu sáng (trắng, xám hoặc kem) làm màu nền, tương phản với màu văn bản màu
đen hoặc tối. Ngoài ra, một số trang web sử dụng màu nền tối hơn, chẳng hạn như đen, xanh đậm hoặc đỏ
đậm và tạo độ tương phản với văn bản màu sáng, như trên trang web Kodak (Hình 4-12).
ma
nak 6d
g
t 1o
n
s 0K
ô
y
a 2
©
C
t
E
Hình 4-12 Độ tương phản giữa nền và văn bản đảm bảo khả năng đọc được.
Khám phá việc sử dụng màu sắc: Sự nhất quán về thị giác và độ tương phản thị giác CỦA BẠN
XOAY
1. Sử dụng công cụ tìm kiếm để tìm kiếm độ tương phản đủ giữa nền, tiền cảnh và văn bản? Trang
các trang web sau đây. Mở từng trang chủ trong tab web có sử dụng bảng màu để tạo sự nhất quán về mặt
trình duyệt mới. hình ảnh giữa các trang không? Thảo luận về cách bạn
Một. Napster sẽ sửa đổi màu sắc, nếu cần, để cải thiện khả năng đọc
b. Adobe và tính nhất quán về mặt hình ảnh.
c. nhân chủng học
d. Huffington Post 4. Xác định bất kỳ thông báo hoặc lý do nào khiến
2. Xem lại trang chủ và ít nhất nhà thiết kế trang web có thể đã chọn bảng màu. Ví
ba trang phụ ở mỗi trang web để xác định cách mỗi dụ: nếu màu sắc củng cố thương hiệu hoặc bản sắc của
trang web sử dụng màu sắc. công ty hoặc nếu màu sắc gây ra phản ứng cảm
3. Mô tả cách mỗi trang web sử dụng màu sắc— xúc như cảm giác bình tĩnh.
bao gồm bảng màu tổng thể và màu nền riêng lẻ, phần
tử đồ họa, văn bản và màu hình ảnh. Bảng màu có 5. Gửi những phát hiện của bạn theo định dạng
cung cấp không mà người hướng dẫn của bạn yêu cầu.
Nguyên tắc WAI về việc

Như bạn đã học ở Chương 2, các trang web có thể sử dụng màu sắc để gợi lên tâm trạng, kích thích sự
iá
p ỏđ
H
sử dụng màu sắc là gì?

quan tâm, hỗ trợ mục đích của trang web và đáp ứng mong đợi của khán giả về loại nội dung được tìm thấy
trên trang web. Một cách để chọn bảng màu thích hợp và áp dụng nó trên tất cả các trang web là sử dụng mẫu.
WAI chỉ định rằng độ
tương phản giữa màu nền Trong Chương 1, bạn đã biết rằng một số công cụ thiết kế web, chẳng hạn như Adobe Dreamweaver CC, hệ thống quản
và màu nền trước lý nội dung, chẳng hạn như WordPress và các trang web như SquareSpace, được hiển thị trong Hình 4-13, cung cấp
phải đủ cho những
các mẫu web với cách phối màu được xác định trước. Các công cụ phân tích và kết hợp màu sắc cũng có sẵn.
khách truy cập có vấn
đề về thị lực hoặc những
người sử dụng màn Việc sử dụng mẫu hoặc công cụ so khớp màu có thể giúp đảm bảo tính nhất quán về mặt hình ảnh giữa tất cả các
hình đơn sắc. Không nên trang trên trang web của bạn.
chỉ sử dụng màu sắc để
biểu thị thông tin như
sự hiện diện của liên
kết văn bản. Một thực tế

phổ biến là kết hợp màu
sắc và định dạng cho một

liên kết.
6u
ecapSera 0S
1q 2
©
Hình 4-13 Các mẫu web có thể giúp đảm bảo tính nhất quán về bố cục và cách phối màu trên tất cả các trang của một trang
web.
THIẾT KẾ Giới hạn bảng màu trang web của bạn ở ba màu tương phản nhưng tương thích.
MẸO Chọn màu văn bản cho tiêu đề, tiêu đề, v.v. để thu hút lượng chú ý thích hợp.
Kiểm tra màu nền và màu văn bản trong bảng màu của bạn để đảm bảo cả khả năng đọc
trên màn hình và tính dễ đọc khi in.
Một cách khác để chọn cách phối màu hiệu quả với độ tương phản thích hợp giữa màu nền và màu văn bản là
sử dụng phần mềm kết hợp màu rẻ tiền hoặc miễn phí, chẳng hạn như AdobeColor CC hoặc Color Hunter (Hình 4-14).
Phần mềm so khớp màu và trang web so khớp màu chứa các công cụ mà bạn có thể sử dụng để tạo các phối màu
trang web mẫu dựa trên lý thuyết màu sắc, xem trước các phối màu trong trình duyệt, sau đó áp dụng các màu trong
lược đồ đã chọn cho các trang web của bạn.
–o
moc.retnuhr 7l
6 0o
1 0c
©
2
Hình 4-14 Các ứng dụng và trang web kết hợp màu sắc sử dụng lý thuyết màu sắc để chọn các màu
bổ sung và tương phản.
Hình ảnh bạn đưa vào trang web, chẳng hạn như hình minh họa và ảnh, sẽ thêm nhiều THIẾT KẾ
màu sắc hơn cho trang của bạn. Chọn hình ảnh có màu sắc phù hợp hoặc bổ sung cho MẸO
bảng màu của trang web của bạn cũng như cung cấp độ tương phản.
Tiếp tục với ví dụ về Fit4U, nhóm của bạn gặp nhau để thảo luận về màu sắc tiềm năng
các kế hoạch nhằm thúc đẩy tính chuyên nghiệp và tinh thần giáo dục của nội dung trang web.
Để hỗ trợ cuộc thảo luận, nhóm của bạn xem xét các phương tiện truyền thông in ấn của công ty—
ví dụ: tiêu đề thư, danh thiếp và tài liệu quảng cáo—minh họa các đặc điểm thương hiệu của công ty
về việc sử dụng màu sắc. Dựa trên tài liệu này và các cuộc thảo luận của bạn với nhóm của
mình, bạn sử dụng phần mềm so khớp màu để thử nghiệm các cách phối màu của trang web.
CSS và định dạng

Như bạn đã học ở Chương 1, các nhà thiết kế web sử dụng các đặc tả CSS để tạo tài liệu văn Phụ lục B: CSS
ỘC
GNỤ
Ô B
Để biết thêm thông tin

bản, được gọi là biểu định kiểu, nhằm kiểm soát sự xuất hiện của một hoặc nhiều trang tại một
về tiêu chuẩn
trang web.
W3C cho CSS, xem Phụ
Kiểu là một nhóm các thuộc tính định dạng, chẳng hạn như in đậm, in nghiêng, loại phông chữ, lục B.
cỡ phông hoặc màu phông chữ, được áp dụng dưới dạng nhóm cho văn bản đã chọn . Khi bạn sử dụng CSS,
bạn tạo một biểu định kiểu chứa các quy tắc kiểu. Quy tắc kiểu là các thông số kỹ thuật xác định
một hoặc nhiều thuộc tính định dạng và giá trị (khai báo) của chúng cho các thẻ HTML (bộ chọn) cụ
thể. Ví dụ: giả sử bạn muốn tất cả văn bản tiêu đề cấp cao nhất được bao quanh bởi cặp thẻ kiểu
tiêu đề HTML <h1>∙∙∙</h1> có màu xanh lam. Bạn có thể tạo quy tắc kiểu cho thẻ tiêu đề <h1> bao gồm
chính thẻ tiêu đề đó, được gọi là bộ chọn và thuộc tính CSS: value
iáỏđ
H
hiện tại là gì
p
sự kết hợp {color: blue}, được gọi là khai báo. Bạn có thể thêm quy tắc kiểu này vào các trang của mình
Tiêu chuẩn W3C dành cho
theo một trong ba cách:
CSS?
Các tiêu chuẩn biểu • Là kiểu nội tuyến được chèn bằng thuộc tính style trong thẻ HTML <h1> trên một trang. Kiểu nội
định kiểu W3C hiện tại
tuyến chỉ ảnh hưởng đến nội dung trong các thẻ <h1>∙∙∙</h1> mà nó xuất hiện.
bao gồm các mô-đun cho
cả CSS Cấp 3 và 4. Để
tìm hiểu thêm, hãy sử • Là một phần của biểu định kiểu nội bộ được chèn bằng phần tử <style> trong
dụng công cụ tìm kiếm
thẻ tiêu đề HTML của trang. Các quy tắc CSS trong biểu định kiểu nội bộ chỉ áp dụng cho trang đó.
để tìm kiếm các tiêu
chuẩn biểu định kiểu W3C.
• Là một phần của biểu định kiểu bên ngoài được lưu trong thư mục chứa các trang của trang web.
Các trang web được liên kết với biểu định kiểu bằng thẻ HTML. Một biểu định kiểu bên ngoài có
thể được áp dụng cho nhiều tài liệu HTML trên một trang web.
THIẾT KẾ Vì không có trình duyệt hiện tại nào hỗ trợ tất cả các thông số CSS nên hãy đảm bảo kiểm tra xem các trang
MẸO web bạn định dạng bằng CSS xuất hiện như thế nào trong các trình duyệt khác nhau.
iáỏđ
H
làm gì
p
Biểu định kiểu chuẩn hóa định dạng của trang web, giúp tiết kiệm thời gian và đơn giản hóa quá
xếp tầng có nghĩa là cho
trình tạo và sửa đổi trang web. Việc sử dụng biểu định kiểu giúp bạn không phải chèn các thuộc tính và
các tờ định kiểu?
giá trị định dạng thẻ HTML cho từng thành phần riêng lẻ. Nếu bạn thực hiện thay đổi kiểu cho biểu định
CSS ưu tiên các quy
tắc kiểu để xác định kiểu, chẳng hạn như thay đổi màu phông chữ cho tất cả các tiêu đề, các trang web liên quan sẽ tự
ưu tiên trong trường động cập nhật. Sử dụng biểu định kiểu cũng giúp bạn duy trì tính nhất quán về mặt hình ảnh trên tất cả
hợp có các quy tắc xung các trang tại trang web của bạn. Các chương trình thiết kế web cung cấp các công cụ CSS mà bạn có thể sử
đột. Ưu tiên hàng đầu
dụng để tạo và chỉnh sửa các biểu định kiểu cũng như liên kết các biểu định kiểu với các trang của
là dành cho các thông
số kỹ thuật mà tác mình. Các mẫu web có các biểu định kiểu đã được liên kết. Bạn cũng có thể tạo các biểu định kiểu bằng phần
giả đặt ở dạng kiểu nội tuyến. mềm soạn thảo CSS, chẳng hạn như Stylizer hoặc Rapid CSS Editor (Hình 4-15).
Ưu tiên thứ hai bao
gồm nội bộ và
tờ phong cách bên ngoài.

Mức ưu tiên thấp nhất
là kiểu mặc định do trình
duyệt chỉ định. Quy tắc
kiểu được áp dụng theo
thứ tự xếp tầng dựa trên
mức độ ưu tiên.
Phụ lục B: CSS

Để tìm hiểu thêm về
ỘC
GNỤ
ÔB
cách CSS ưu tiên các

quy tắc kiểu xung đột,
ln
ss ti
ao eu
nt 6A
m 1I
u
l 0S
l
o 2
©
B
hãy xem Phụ lục B.
Hình 4-15 Các nhà thiết kế web sử dụng trình soạn thảo CSS để tạo các biểu định kiểu mà họ có thể áp dụng cho các trang web.
Bố trí trang
Ở phần trước của chương này, bạn đã biết độ dài trang và vị trí nội dung cũng như UX ảnh hưởng như
thế nào đến khả năng sử dụng. Lưu ý đến độ dài trang, vị trí nội dung và khả năng sử dụng, bạn nên tạo
bố cục trang hợp lý, chuẩn hóa hoặc sắp xếp các thành phần nội dung để đảm bảo tính nhất quán về mặt
hình ảnh trên các trang trên trang web của bạn. Bố cục trang được tiêu chuẩn hóa thúc đẩy cảm giác
cân bằng và trật tự khiến khách truy cập trang web thấy hấp dẫn và yên tâm.
Hình 4-16 thể hiện bố cục của trang web Target. Quan sát rằng trong cả máy tính để bàn và
logo ở trên cùng bên trái

điều hướng ẩn ở đầu
trong phiên bản máy tính để bàn
phiên bản di động
điều hướng ở đầu phiên
bản máy tính để bàn
logo ở trên cùng bên

trái của phiên bản di động
n.
g, 6c
ơ
u 1n
ê
ư
ệ 0i
ụ
h
i 2
©
m
t
h
Hình 4-16 Bố cục trang tiêu chuẩn, hợp lý mang lại sự nhất quán về mặt hình ảnh trên tất cả các trang trong một trang web.
phiên bản dành cho thiết bị di động, nhãn hiệu xuất hiện ở phía trên bên trái và các liên kết điều
hướng chính nằm ở đầu trang. Lưới bố cục và Bảng định kiểu xếp tầng được sử dụng để tạo bố cục trang
hấp dẫn, nhất quán về mặt hình ảnh và phản hồi nhanh.
Khi bạn xác định các tùy chọn điều hướng và các thành phần trang lặp lại, bạn có thể
bắt đầu lập kế hoạch về cách các trang web sẽ hoạt động. Wireframing là một phương pháp
tạo tài liệu có kế hoạch sắp xếp các thành phần trang. Hiện có một số công cụ wireframing, bao
gồm Adobe InDesign® CC và UXPin. Wireframing tách biệt bố cục trang và chức năng khỏi thiết kế. Các
nguyên tắc UX khuyến nghị quy trình wireframing để đảm bảo rằng vị trí điều hướng và các thành
phần trang khác mang lại lợi ích cho người dùng. Hình 4-17 hiển thị ví dụ về wireframe hiển thị
vị trí của logo, tính năng tìm kiếm, điều hướng và nội dung. Vị trí đặt logo rất quan trọng
trong việc xây dựng thương hiệu cũng như đảm bảo với khách truy cập rằng họ chưa rời khỏi trang web.
Điều hướng và tìm kiếm ảnh hưởng đến khả năng sử dụng của từng trang trong trang web. Vị trí
nội dung nhất quán giúp trang web của bạn dễ đọc hơn. Hãy nghĩ về wireframe như một bản phác thảo
hoặc bản thiết kế chi tiết của một bố cục. Sau khi bản thiết kế hoàn tất, bạn có thể bắt đầu quá
trình bố trí và chọn màu sắc, phông chữ và các thành phần thiết kế khác để thêm vào bố cục.
Logo Chức năng tìm kiếm
dẫn đường
Thực đơn
Khu vực nội dung
Hình 4-17 Wireframe là bản phác thảo các thành phần của trang web để kiểm tra khả năng sử dụng.
Lưới bố cục Nhiều nhà thiết kế sử dụng bố cục lưới linh hoạt hoặc đáp ứng để định vị nội dung trên
một trang bằng cách sử dụng cấu trúc hàng và cột cơ bản. Bố trí lưới chất lỏng
xác định kích thước của các thành phần trang dựa trên tỷ lệ phần trăm của màn hình. Các thành phần
trang thay đổi kích thước theo tỷ lệ để phù hợp với bất kỳ kích thước màn hình nào mà trang hiển thị.
Bố cục lưới đáp ứng sử dụng kết hợp tỷ lệ phần trăm và giới hạn cố định để điều chỉnh các thành phần trang
theo kích thước và vị trí. Không giống như bố cục lưới linh hoạt, bố cục lưới đáp ứng có thể loại bỏ
hoặc thay thế một số thành phần màn hình nhất định sau khi trang đạt đến kích thước nhất định. Bạn có
thể định vị và căn chỉnh nội dung một cách chính xác, đặt độ rộng lề và thực hiện nhiều điều chỉnh hơn bằng
cách sử dụng lưới bố cục. Lưới bố cục không hiển thị khi trang web xuất hiện trong trình duyệt, nhưng nó
xác định cả cách trang web sẽ xuất hiện trong trình duyệt và cách trang web phản hồi với nhiều kích thước
màn hình khác nhau.
Với một công cụ thiết kế web, chẳng hạn như Adobe Dreamweaver CC (Hình 4-18), bạn có thể sử dụng
bố cục lưới đáp ứng để thêm và định vị lại nội dung. Bạn có thể thay đổi màu đường lưới, khoảng cách
(pixel, inch hoặc cm) và kiểu (chấm, liền, nét đứt). Ngoài ra, bạn có thể đặt lệnh để nội dung tự động
“bắt vào” hoặc căn chỉnh chính xác với đường lưới gần nhất.
sp
detaro eo
mr 5c
b
t 1n
o
s 0I
d
y 2
©
A
S
Hình 4-18 Bố cục lưới đáp ứng giúp dễ dàng định vị nội dung.
THIẾT KẾ Sử dụng lưới bố cục để định vị nội dung trang xuất hiện nhất quán trên tất cả các trang,
MẸO ví dụ: biểu trưng, tên nhà xuất bản trang web, hình ảnh và các liên kết chính. Sau đó
cẩn thận thêm nội dung trang khác tạo ra sự quan tâm và đa dạng trong khi vẫn duy
trì tính nhất quán về mặt hình ảnh.
CSS và Bố cục Trang Ở phần trước của chương, bạn đã tìm hiểu cách các nhà thiết kế web sử dụng biểu định
kiểu để kiểm soát định dạng trên các trang, tạo ra sự nhất quán về mặt hình ảnh. Biểu định kiểu cũng
được sử dụng để kiểm soát định dạng của các thành phần khác nhau trong bố cục trang, chẳng hạn như phần
điều hướng. Ví dụ: trong lưới bố cục được hiển thị trong Hình 4-19, nội dung bài viết được hiển thị trong
phần page_content . Biểu định kiểu bên ngoài tương ứng được hiển thị trong Hình 4-20 gán các quy tắc định
dạng kiểu cho phần page_content .
quy tắc kiểu page_content
phần nội dung trang
0M2
©
0M
2
©
1i
1i
6c
6c
tfosor
tfosor
Hình 4-19 Các phần của trang web được chỉ định trong lưới bố cục. Hình 4-20 Biểu định kiểu đặt quy tắc cho các phần của trang web.
Khám phá phần mềm soạn thảo CSS CỦA BẠN

XOAY
1. Sử dụng công cụ tìm kiếm bạn chọn và 3. Thảo luận xem bạn có muốn sử dụng
các từ khóa phần mềm soạn thảo CSS hoặc các từ khóa loại chương trình phần mềm này trái ngược với các phương
tương tự, nghiên cứu các tùy chọn khác nhau cho các pháp tạo biểu định kiểu khác, chẳng hạn như trình soạn
chương trình soạn thảo CSS được sử dụng để tạo các biểu định kiểu CSS.
thảo văn bản và thiết kế web
2. So sánh tính năng và giá thành của ba các chương trình.
các chương trình khác nhau. Tìm và đọc các nhận xét về 4. Mỗi chương trình tuân thủ các tiêu chuẩn thiết kế
từng chương trình nếu có thể. Mô tả những gì bạn, với tư web đáp ứng như thế nào?
cách là một nhà thiết kế web, có thể sử dụng để tạo các 5. Gửi những phát hiện của bạn theo định dạng mà
biểu định kiểu cho trang web của mình và tại sao. người hướng dẫn của bạn yêu cầu.
Tiếp tục với ví dụ về Fit4U, nhóm của bạn thống nhất về bố cục trang cho hình ảnh trực quan
nội dung nhận dạng và các liên kết chính trên mỗi trang. Bạn cũng đồng ý theo đuổi bố cục
lưới đáp ứng cho các trang và CSS cho cả định dạng và bố cục. Hình 4-21 và 4-22 minh họa
việc cập nhật kế hoạch trang web chính thức của bạn cho Bước 5.
Trang web Fit4U
Bước 5: Thiết kế giao diện của trang web
Bảng màu
• Sẽ tuân theo các thông số kỹ thuật thương hiệu của công ty về màu sắc
• Sẽ nhất quán trên tất cả các trang trên website
Bố trí trang
• Các trang sẽ sử dụng bố cục linh hoạt do CSS kiểm soát
• Tiêu đề ở đầu mỗi trang chứa logo, dòng tag, tên công ty,
công cụ tìm kiếm và liên kết Liên hệ với chúng tôi
• Các liên kết điều hướng chính ở phía bên trái của trang
• Vùng nội dung ở giữa trang
• Liên kết trang Liên hệ với chúng tôi, biểu tượng mạng xã hội, chính sách quyền riêng tư và bảo mật
liên kết trang tuyên bố và ký hiệu bản quyền ở cuối mỗi trang
Hình 4-21 Áp dụng bảng màu và bố cục để thiết lập giao diện của trang web.
logo ở trên cùng bên trái điều hướng sang trái dòng thẻ ở trung tâm trên cùng chức năng tìm kiếm ở trên cùng bên phải bố cục trên thiết bị
di động nhất quán với
bố cục dành cho kích

thước màn hình lớn hơn
Tìm kiếm
Logo Dòng thẻ
Chức năng Logo
dẫn đường
Dòng thẻ
nội dung ở trung tâm
Nội dung
Nội dung
Công cụ kết nối, Thông báo bản quyền, Chính sách quyền riêng tư và bảo mật, Liên hệ với chúng tôi
Công cụ kết nối, Thông báo bản quyền,

thông báo và công cụ ở
phía dưới
Chính sách quyền riêng tư và bảo mật, Liên hệ với chúng tôi
Hình 4-22 Sử dụng bố cục trang nhất quán và hợp lý trên tất cả các trang của một trang web.
Bước 6: Xây dựng kế hoạch thử nghiệm, xuất bản và

Bảo trì trang web
Một kế hoạch thiết kế web hoàn chỉnh bao gồm các chi tiết nêu rõ cách thức và thời điểm bạn sẽ kiểm tra
trang web, cách bạn sẽ xuất bản trang web, nơi bạn sẽ lưu trữ trang web cũng như các biện pháp cần
thiết để duy trì và cập nhật trang web. Những yếu tố này ảnh hưởng đến ngân sách và thời gian của trang web
cũng như thành công cuối cùng của nó. Nếu không kiểm tra, bạn không thể xác định liệu trang web của mình
có hoạt động bình thường hay không hoặc liệu nó có chứa lỗi hoặc liên kết bị hỏng hay không. Nếu bạn
thiết kế một trang web vượt quá giới hạn kích thước được phân bổ của máy chủ web lưu trữ, bạn không thể
xuất bản trang web. Nếu không có kế hoạch cập nhật nội dung, trang web của bạn sẽ ở trạng thái tĩnh và khách truy cập có
không có lý do để trở lại.
Kiểm tra
Kiểm tra khả năng sử dụng trang web chính thức là quá trình đánh giá thường diễn ra trong môi
trường có cấu trúc, chẳng hạn như phòng thí nghiệm kiểm tra. Trong quá trình thử nghiệm, các chuyên
Việc kiểm tra có kết thúc gia thiết kế và khả năng sử dụng sẽ quan sát chính xác cách khách truy cập sử dụng trang web, sau đó sử
khi trang web được
ỏđ
iá
p H
dụng nghiên cứu này để tạo báo cáo chứa các đề xuất thiết kế. Các bài kiểm tra khả năng sử dụng trang web
được phát hành?
chính thức có thể rất tốn kém, có thể tốn vài nghìn đô la và có thể vượt quá ngân sách của bạn. Tuy
Không. Điều quan trọng là
phải đảm bảo rằng các liên nhiên, thử nghiệm khả năng sử dụng không chính thức bao gồm việc sử dụng một nhóm bạn bè, thành viên gia
kết trên các trang đình, đồng nghiệp hoặc các bên quan tâm khác để kiểm tra hệ thống điều hướng của trang web hoặc các tính
trên trang web của bạn
năng khác của trang web và sau đó báo cáo trải nghiệm của họ. Người kiểm tra nên sử dụng nhiều loại thiết
tiếp tục hoạt động như dự định. Bạn
bị, kích thước màn hình, độ phân giải và trình duyệt để kết quả hoàn thiện hơn.
nên có kế hoạch tiến hành kiểm
tra định kỳ hệ thống điều Việc kiểm tra khả năng sử dụng không chính thức thường rất tốn kém, thậm chí có thể miễn phí, nhưng
hướng của trang web, đảm phản hồi bạn nhận được có thể là vô giá.
bảo trang web của bạn hoạt
Bạn bắt đầu bằng việc nhờ một nhóm thử nghiệm đánh giá hệ thống điều hướng bằng trang web
động với các thiết bị,
nguyên mẫu như một phần của quá trình lập kế hoạch để đảm bảo rằng nó đáp ứng nhu cầu của bạn trước
nền tảng và phiên bản
trình duyệt mới. khi xuất bản. Trong Chương 7, bạn tìm hiểu thêm về cách kiểm tra trang web của mình trước và sau khi
xuất bản.
Bước 6: Xây dựng kế hoạch kiểm tra, xuất bản và bảo trì trang web 119
Xuất bản và duy trì
Bạn sẽ tìm hiểu thêm về các bước liên quan đến việc xuất bản và duy trì trang web của mình
trong Chương 7. Điều quan trọng là phải đưa các bước này vào kế hoạch thiết kế web của bạn để tạo một
trang web đáp ứng nhu cầu của dịch vụ lưu trữ và đảm bảo rằng bạn có thể cập nhật và theo dõi nội dung
để giữ cho trang web của bạn có liên quan và lôi kéo khách truy cập quay lại thường xuyên.
Một số câu hỏi bạn nên trả lời bao gồm:
•Bạn sẽ lưu trữ trang web trên máy chủ web nội bộ hay bạn sẽ ký hợp đồng với một
nhà cung cấp bên ngoài?
•Có giới hạn kích thước nào cho trang web?
•Bạn có thường xuyên cập nhật nội dung không?
•Ai cập nhật nội dung?
•Có những hạn chế về ngân sách nào dành cho việc xuất bản và duy trì trang web?
•Bạn sẽ giám sát trang web của mình như thế nào để xác định những thay đổi nào, nếu có, cần phải được thực hiện
làm ra?
Tiếp tục với ví dụ về Fit4U, nhóm của bạn lập kế hoạch chiến lược và ngân sách để thử nghiệm,
xuất bản và duy trì trang web. Để đảm bảo tập trung vào điều hướng dựa trên người dùng và do người
dùng kiểm soát, nhóm của bạn tiến hành thử nghiệm khả năng sử dụng với một nhóm người tham gia bao
gồm hai nhân viên, hai huấn luyện viên Fit4U và hai khách hàng lâu năm. Họ sẽ kiểm tra khả năng sử
dụng của hệ thống định vị một cách thường xuyên trong quá trình phát triển trang web và thử nghiệm
trước khi xuất bản. Bạn sẽ ký hợp đồng với một công ty cung cấp dịch vụ lưu trữ máy chủ web bên
ngoài. Nội dung sẽ được cập nhật bằng cách thêm các bài đăng trên blog, doanh số hàng tuần và phiếu
giảm giá, đồng thời duy trì danh mục sản phẩm bằng cách sử dụng cơ sở dữ liệu. Các cập nhật cho kế
hoạch trang web được hiển thị trong Hình 4-23.
Trang web Fit4U
Bước 6: Xây dựng kế hoạch kiểm tra, xuất bản và bảo trì trang web
Kiểm tra khả năng sử dụng
• Hai nhân viên
• Hai huấn luyện viên từ Fit4U
• Hai khách hàng lâu năm
Xuất bản và duy trì
• Trang web sẽ được quản lý bởi một công ty cung cấp dịch vụ lưu trữ web bên ngoài
• Cập nhật nội dung trang web bao gồm:
• Bài đăng trên blog
• Khuyến mãi và phiếu giảm giá hàng tuần
• Duy trì danh mục sản phẩm bằng cách sử dụng cơ sở dữ liệu
Hình 4-23 Lập kế hoạch kiểm tra, xuất bản và bảo trì trang web để đảm bảo trang web của bạn đáp ứng
nhu cầu của người dùng và phù hợp với nguồn lực của bạn.
Danh sách kiểm tra kế hoạch trang web
Lập kế hoạch chi tiết là một bước quan trọng trong phát triển trang web và cần được thực hiện trước khi bạn đầu
tư thời gian và tiền bạc. Việc lập kế hoạch giúp đảm bảo rằng trang web sẽ đáp ứng được mục tiêu của bạn
cũng như sự mong đợi của khách truy cập trang web. Để đảm bảo một trang web thành công, hãy sử dụng danh
sách kiểm tra sau khi hoàn thành kế hoạch thiết kế web của bạn.
Bước 1: Xác định mục đích và đối tượng mục tiêu của trang web
• Xác định mục tiêu chính và phụ cho trang web của bạn.
• Xác định các mục tiêu cần thiết để đáp ứng mục tiêu của trang web, bao gồm cả
kêu gọi hành động.
• Phát triển hồ sơ đối tượng mục tiêu để xác định các đặc điểm nhân khẩu học và tâm lý
đặc điểm đồ họa của khán giả.
• Thực hiện đánh giá nhu cầu để xác định mong muốn, nhu cầu và kỳ vọng của đối tượng mục tiêu mà trang web
của bạn có thể đáp ứng nhằm đảm bảo trang web của bạn sử dụng UX. • Viết tuyên bố mục đích
chính thức cho
trang web.
Bước 2: Xác định nội dung chung của trang web
• Xác định trang chủ và trang phụ của trang web của bạn cũng như bất kỳ trang đích cần thiết nào
trang.
• Đảm bảo rằng nội dung trên trang chủ trang web của bạn trả lời các câu hỏi của khách truy cập là ai,
cái gì , tại sao và ở đâu .
• Xác định nội dung nhận dạng hình ảnh sẽ tạo thương hiệu cho tất cả các trang web trong
trang mạng.
• Xác định nội dung giá trị gia tăng cho các trang của bạn: văn bản, hình ảnh, âm thanh, video, hoạt
ảnh, các yếu tố tương tác và nội dung được tạo động.
• Lập kế hoạch tổ chức, lưu trữ và sao lưu các tệp nội dung và HTML của bạn.
Bước 3: Chọn cấu trúc của trang web
• Xem xét cách tốt nhất để cấu trúc trang web của bạn nhằm đạt được mục đích: tuyến tính/hướng dẫn,
mạng, phân cấp hoặc kết hợp các cấu trúc nào đó.
• Tạo phác thảo cấu trúc trang web của bạn bằng cách sử dụng phác thảo văn bản hoặc sơ đồ trang web.
• Tạo một hệ thống điều hướng vừa dựa trên người dùng vừa do người dùng kiểm soát, cung cấp sự kết hợp
của các liên kết văn bản; liên kết ẩn; liên kết hình ảnh; menu, thanh và tab điều hướng; một đường
dẫn bánh mì; và một tính năng tìm kiếm.
• Thực hiện theo hướng dẫn của WAI về các liên kết và thành phần điều hướng.
Ôn tập chương 121
Bước 5: Thiết kế giao diện của trang web
• Đặt nhận dạng trực quan và nội dung trang quan trọng phía trên và bên trái tiềm năng
các đường cuộn.
• Duy trì tính nhất quán về hình ảnh giữa các trang bằng cách phối màu, bố cục trang và vị trí của các
thành phần điều hướng.
• Tuân theo hướng dẫn của WAI về việc sử dụng màu sắc.
•Xem xét RWD khi thiết kế bố cục trang.
Bước 6: Xây dựng kế hoạch kiểm tra, xuất bản và bảo trì
trang web
• Thực hiện kiểm tra khả năng sử dụng của hệ thống định vị trong giai đoạn lập kế hoạch và phát triển.
•Xác định cách thức và nơi bạn sẽ xuất bản trang web cũng như xác định mọi vấn đề kỹ thuật
hoặc hạn chế về ngân sách.
•Xây dựng kế hoạch bảo trì nội dung bao gồm lịch trình và ngân sách.
Đánh giá chương

Đặt các yếu tố điều hướng và nhận dạng trực quan quan trọng phía trên và bên trái vùng cuộn để giảm nhu cầu cuộn
của khách truy cập. Khách truy cập trang web thông thường trước tiên sẽ nhìn ở đầu trang web, sau đó nhìn sang bên
trái, rồi xuống dưới và bên phải. Đặt nội dung bạn muốn khách truy cập nhìn thấy đầu tiên ở hoặc gần đầu và ở phía
bên trái của trang web. Hãy xem xét vùng màn hình hiển thị và cách thay đổi đó tùy thuộc vào máy tính hoặc thiết bị
của khách truy cập khi thiết kế các trang web phụ. Đảm bảo rằng khách truy cập không bao giờ phải cuộn theo chiều
ngang để xem các trang web và thông tin trên các trang web cơ bản diễn ra suôn sẻ và hợp lý.
Hệ thống điều hướng dựa trên người dùng tạo liên kết giữa các trang dựa trên cách khách truy cập di chuyển
từ trang này sang trang khác trên trang web. Hệ thống điều hướng do người dùng kiểm soát cho phép khách truy cập di
chuyển giữa các trang theo cách họ chọn và cung cấp cả các liên kết điều hướng chính cũng như các tùy chọn khác, chẳng
hạn như đường dẫn đường dẫn, chỉ mục trang web và khả năng tìm kiếm. Các loại liên kết điều hướng phổ biến
bao gồm liên kết văn bản; liên kết hình ảnh; nhóm liên kết liên quan được trình bày dưới dạng menu, thanh hoặc tab.
Sử dụng màu sắc và bố cục trang để duy trì tính nhất quán về mặt hình ảnh trên tất cả các trang tại
trang web sẽ thúc đẩy sự thống nhất, củng cố nhận dạng trực quan và trấn an khách truy cập. Áp dụng bảng màu thống nhất
và bố cục trang nhất quán được tạo bằng các công cụ như lưới đáp ứng và CSS để tạo tính nhất quán về mặt hình ảnh.
Sau khi hoàn thành các Bước lập kế hoạch từ 1 đến 6, hãy sử dụng danh sách kiểm tra để xem lại kế hoạch thiết
kế web của bạn.
ĐIỀU KHOẢN Sau khi đọc chương này, bạn nên biết từng Điều khoản chính này.
cần biết
điều hướng thích ứng (109) tự giao diện (110) thanh
động hoàn thành (108) điều hướng (107) menu điều
đường dẫn đường dẫn (107) hướng (107) tab điều hướng
phần mềm khớp màu (112) điều hướng (107) menu ngoài canvas
theo ngữ cảnh (109) (104) bố cục trang (114)
Phần mềm soạn thảo CSS (114) menu bật ra (107) điều
menu thả xuống (107) biểu hướng chính (109) bố cục
định kiểu bên ngoài (114) nghiên lưới phản hồi (116) ) liên kết
cứu theo dõi mắt (101) bố cục cuộn qua (105) vùng cuộn (100) kiểu
trang có chiều rộng cố định (102) bố (113) quy tắc kiểu
cục trang linh hoạt (102) (113) điều hướng phụ
Mẫu F (101) bố cục (109) mục
lưới chất lỏng (116) menu tiêu (104) liên
hamburger (104) bản đồ nhiệt kết văn bản (104) chú giải công cụ
(101) nhà cung cấp (104) kiểm tra
dịch vụ tìm kiếm trang web được lưu trữ (108) khả năng sử dụng
điểm nóng (105) (118) hệ thống
bố cục trang kết hợp (102) liên điều hướng dựa trên
kết hình ảnh (105) người dùng (103) ) hệ thống điều hướng do
bản đồ hình ảnh (105) người dùng kiểm soát (103) tính nhất quán trực
kiểu nội tuyến (114) quan (110) chỉ mục trang web
biểu định kiểu bên trong (114) (108) tính năng tìm kiếm
bố cục trang lỏng (102) điều trang web (108) wireframe (115)
hướng cục bộ (109)
KIỂM TRA của bạn

Hoàn thành bài tập Kiểm tra kiến thức của bạn để củng cố những gì bạn đã học trong
Kiến thức
chương.
Điều khoản phù hợp
Nối mỗi thuật ngữ với mô tả phù hợp nhất.
1. điều hướng thích ứng Một. Một hệ thống điều hướng dựa trên các mối quan hệ
2. đường dẫn bánh mì liên kết theo nhu cầu của khách truy cập trang web hơn là nhu
cầu của nhà xuất bản trang web.

3. theo ngữ cảnh
b. Một cách để đánh giá chính xác cách khách truy cập trang web sẽ
dẫn đường
truy cập thông tin trang web và chuyển từ trang này sang trang
4. bố cục có chiều rộng cố định
khác tại một trang web.
5. Mẫu chữ F
c. Tệp văn bản chứa hướng dẫn định dạng được lưu trong thẻ tiêu đề
6. kiểu nội tuyến HTML của trang web.
7. biểu định kiểu nội bộ d. Cấu trúc cơ bản của các hàng và cột được sử dụng để xác định kích
thước của các thành phần trang web dựa trên tỷ lệ phần trăm của
8. lưới bố trí chất lỏng
màn hình.
9. bố cục chất lỏng
đ. Trang web mà liên kết trỏ đến.
10. tab điều hướng 11.
f. Một hộp văn bản nhỏ có thể xuất hiện khi bạn trỏ tới
chú giải công cụ đường dẫn.
12. ngoài canvas g. Chỉ định chiều rộng của trang web được chỉ định dưới dạng phần trăm của
thực đơn cửa sổ trình duyệt.
13. mục tiêu h. Một nhóm các liên kết liên quan được sử dụng để hiển thị các chế độ
xem nội dung thay thế.
14. kiểm tra khả năng sử dụng
15. dựa trên người dùng

Tôi. Các nghiên cứu theo dõi bằng mắt cho thấy khách truy cập trang
web thường xem trang web như thế nào.

dẫn đường
j. Sơ đồ phân cấp hiển thị cho khách truy cập đường dẫn giữa trang chủ và
trang hiện tại.
k. Chỉ định chiều rộng của trang web bằng pixel.
tôi. Phần tử điều hướng ẩn mở rộng khi được trỏ tới hoặc nhấp vào.
m. Các liên kết cụ thể tới một trang web đang được xem, chẳng hạn như các liên kết
văn bản trong một bài viết hoặc danh sách các liên kết có liên quan.
N. Các liên kết sử dụng thao tác duyệt hoặc tìm kiếm của khách truy cập trang web
history để cung cấp các đề xuất nội dung có thể được quan tâm.
ồ. Quy tắc được chèn trong thẻ HTML <h1> trên một trang.
Câu hỏi trả lời ngắn
Viết câu trả lời ngắn gọn cho mỗi câu hỏi.
1. Mô tả tầm quan trọng của tính nhất quán của các yếu tố hình ảnh để củng cố thương hiệu.
2. Mô tả các nghiên cứu về theo dõi mắt và bản đồ nhiệt cũng như cách các nhà thiết kế web sử dụng chúng để
lên kế hoạch thiết kế trang web. Mẫu F là gì?
3. Thảo luận về hướng dẫn của WAI về việc sử dụng màu sắc và liên kết.
4. Phân biệt giữa kiểu nội tuyến, kiểu trang bên trong và kiểu trang bên ngoài.
Bạn có thể sử dụng công cụ nào để áp dụng CSS?
5. Mô tả điều hướng dựa trên người dùng và do người dùng kiểm soát.
6. Xác định một số loại liên kết phổ biến được sử dụng trong hệ thống định vị.
7. Phân biệt giữa điều hướng chính, phụ, theo ngữ cảnh và thích ứng.
8. Giải thích lý do bạn đưa tính năng tìm kiếm vào và cách bạn có thể thêm tính năng đó vào
trang web của bạn.
9. Liệt kê những cân nhắc khi lập kế hoạch thử nghiệm, xuất bản và bảo trì trang web của bạn và lý do bạn nên đưa
các bước này vào quy trình lập kế hoạch.
Xu hướng
Điều tra sự phát triển thiết kế web hiện tại bằng các bài tập Xu hướng.
Viết một bài luận ngắn gọn về từng xu hướng sau, sử dụng web làm công cụ nghiên cứu của bạn. Đối với mỗi xu hướng, hãy
xác định ít nhất một URL trang web được sử dụng làm nguồn nghiên cứu.
Hãy chuẩn bị để thảo luận về những phát hiện của bạn trong lớp.
1 Điều hướng màn hình cảm ứng

Sử dụng công cụ tìm kiếm để tìm kiếm điều hướng trang web trên màn hình cảm ứng hoặc các từ khóa tương tự để tìm các
bài viết hoặc bài đăng trên blog đưa ra đề xuất giúp điều hướng trang web dễ sử dụng với màn hình cảm ứng. Liệt kê hai điều
bạn nên cân nhắc để giúp trang web của bạn dễ tiếp cận hơn với người dùng màn hình cảm ứng. Nếu bạn có quyền truy cập
vào một thiết bị có màn hình cảm ứng, hãy thử nghiệm sử dụng các công cụ điều hướng trang web tại một số trang web và
ghi chú về bất kỳ khó khăn nào bạn gặp phải.
2 Điều hướng ẩn
Sử dụng công cụ tìm kiếm và từ khóa điều hướng trang web ẩn hoặc các từ khóa tương tự, tìm một bài viết hoặc bài đăng blog
thể hiện quan điểm tích cực và một bài viết hoặc bài viết khác tiêu cực về việc sử dụng điều hướng ẩn. Tóm tắt những
phát hiện của bạn và thảo luận xem bạn có đồng ý với các ý kiến được nêu trong bài viết hay không. Bao gồm bất kỳ
phản hồi cá nhân nào bạn có dựa trên kinh nghiệm của riêng bạn. Bạn có sử dụng điều hướng ẩn khi là nhà thiết
kế web không? Tại sao hoặc tại sao không?
@VẤN ĐỀ Thử thách quan điểm của bạn về web và công nghệ thiết kế web với các bài tập
@Issue.
Viết một bài luận ngắn gọn để trả lời các vấn đề sau, sử dụng web làm công cụ nghiên cứu của bạn. Đối với mỗi vấn đề, hãy
xác định ít nhất một URL trang web được sử dụng làm nguồn nghiên cứu. Hãy chuẩn bị để thảo luận về những phát hiện của
bạn trong lớp.
1 Bảng định kiểu xếp tầng (CSS)

Cascading Style Sheets (CSS), một đặc tả đa tính năng cho HTML, cung cấp cho các nhà thiết kế một phương pháp mạnh mẽ,
hữu ích để kiểm soát định dạng và bố cục của trang web.
Nghiên cứu mức độ hỗ trợ hiện tại cho biểu định kiểu của các trình duyệt hàng đầu và các đề xuất hiện tại của W3C
về việc sử dụng biểu định kiểu. Tìm một bài viết hỗ trợ việc sử dụng CSS để tạo các trang web sử dụng thiết kế
web đáp ứng. Tạo một báo cáo tóm tắt nghiên cứu của bạn. Giải thích lợi ích của việc sử dụng CSS để thiết kế trang
web của bạn.
2 công cụ phối màu

Sử dụng công cụ tìm kiếm và các từ khóa, công cụ so khớp màu tốt nhất hoặc thứ gì đó tương tự, tìm hai bài viết
hiện tại liệt kê và xếp hạng các công cụ so khớp màu. Tạo một báo cáo tóm tắt các bài viết, bao gồm mọi điểm khác biệt
hoặc tương đồng giữa danh sách của các tác giả. Kết thúc bằng cách nêu rõ những gì bạn có thể chọn sử dụng với tư cách là
một nhà thiết kế web và tại sao.
Sử dụng World Wide Web để có thêm thông tin về các khái niệm có trong tay
chương với các bài tập Thực hành.
1 Khám phá và đánh giá: Các cấp độ điều hướng

Sử dụng công cụ tìm kiếm và các cấp độ từ khóa của điều hướng trang web hoặc các từ khóa tương
tự, tìm ít nhất hai bài viết cung cấp cái nhìn tổng quan về các cấp độ được thảo luận trong chương này.
Lưu ý rằng các cấp độ có thể được đặt tên hơi khác nhau, tùy thuộc vào tác giả hoặc nguồn. Tìm ví dụ trên một
trang web lớn mà bạn chọn ở từng cấp độ. Đánh giá việc sử dụng các cấp độ điều hướng khác nhau trên
trang web dựa trên kinh nghiệm của riêng bạn.
2 Tìm kiếm và khám phá: Trang web và nhận dạng hình ảnh
Sử dụng công cụ tìm kiếm và từ khóa nhận dạng hình ảnh của trang web hoặc các từ khóa tương tự, tìm ba
trang chủ đề nhận dạng hình ảnh hoặc bài đăng trên blog khác nhau. Viết dàn ý để trình bày trước lớp
về kết quả nghiên cứu của bạn. Đưa vào đề cương của bạn một cuộc thảo luận về cách bạn sẽ sử dụng các
yếu tố nhận dạng hình ảnh trên trang web của mình và liệu bạn có nghĩ rằng cần phải giải quyết nhận dạng
hình ảnh trên một trang tại trang web của mình hay không.
Đội
Hợp tác làm việc để củng cố các khái niệm trong chương bằng các bài tập Tiếp
tiếp cận
cận nhóm.
1 Tính năng tìm kiếm trang web

Tham gia cùng hai sinh viên khác để nghiên cứu cách thêm tính năng tìm kiếm trang web vào một trang
web. Tìm ví dụ về các giải pháp miễn phí và được lưu trữ cũng như các bài đánh giá về từng giải pháp.
Ghi chú xem có bất kỳ trang web nào cung cấp tính năng tự động hoàn thành như một phần của tính năng tìm
kiếm hay không và mọi yêu cầu hoặc chi phí bổ sung liên quan đến việc sử dụng tính năng tự động hoàn thành.
Có trang web nào đề cập đến UX không? Nếu vậy thì làm thế nào? Biên soạn các phát hiện của nhóm và gửi
theo định dạng mà người hướng dẫn của bạn yêu cầu. Hãy chuẩn bị để trình bày kết quả của bạn trước lớp.
2 bài kiểm tra khả năng sử dụng
Tham gia cùng với một sinh viên khác để thành lập một nhóm nghiên cứu gồm hai người. Một thành viên
trong nhóm nên nghiên cứu các công ty cung cấp các bài kiểm tra khả năng sử dụng có tính phí. Thành viên
còn lại trong nhóm nên nghiên cứu các mẹo để tự mình thực hiện các bài kiểm tra khả năng sử dụng hoặc với
ngân sách hạn chế. Tạo một bài thuyết trình cho cả lớp trong đó bạn mô tả chi phí, lợi ích và điểm yếu của
từng bài. Đưa ra đề xuất về phương pháp nào có thể hoạt động tốt nhất cho các trang web nhỏ và trang web
công ty lớn.
nghiên cứu điển hình

Áp dụng các khái niệm của chương vào quá trình phát triển đang diễn ra trong thiết kế web
với Nghiên cứu điển hình.
Nghiên cứu điển hình là một quá trình phát triển liên tục sử dụng các khái niệm, kỹ thuật và Mẹo thiết kế được trình
bày trong mỗi chương.
Thông tin lai lịch

Tiếp tục phát triển kế hoạch trang web mà bạn đã bắt đầu ở Chương 3, hãy hoàn thành Bước 4: chỉ định hệ thống điều
hướng của trang web; Bước 5: thiết kế giao diện website; và Bước 6: xây dựng kế hoạch thử nghiệm, xuất bản và bảo trì
trang web. Sau đó sử dụng danh sách kiểm tra kế hoạch thiết kế của bạn để đánh giá kế hoạch hoàn chỉnh của bạn.
Chương 4 Nhiệm vụ
Trong nhiệm vụ này, bạn sẽ hoàn thiện kế hoạch trang web của mình bằng cách hoàn thành ba bước còn
lại được thảo luận trong chương này: lập kế hoạch điều hướng trang web, lập kế hoạch giao diện trang web và lập kế
hoạch cách bạn sẽ kiểm tra, xuất bản và bảo trì trang web.
1. Xem lại tài liệu chương liên quan về độ dài trang, vị trí nội dung và
khả năng sử dụng.
2. Xem xét các nguyên tắc dành cho hệ thống định vị dựa trên người dùng và do người dùng kiểm soát, và
sau đó chỉ định các thành phần riêng lẻ của hệ thống điều hướng dựa trên người dùng và do người dùng kiểm soát
cho trang web của bạn.
3. Sử dụng những gì bạn đã học về wireframing, hãy tạo một bản phác thảo hoặc bản thiết kế chi tiết về bố cục của các
thành phần trang. Nếu có thể, hãy sử dụng phần mềm wireframe.
4. Xác định bảng màu của trang web của bạn bằng cách sử dụng mẫu thiết kế web hoặc màu-
phần mềm phù hợp.
5. Lập kế hoạch bố cục trang cho trang chủ và các trang phụ của bạn. Giải thích bạn sẽ làm thế nào
kiểm soát bố cục trang bằng CSS.
6. Tạo kế hoạch thử nghiệm, xuất bản và bảo trì trang web của bạn. Bao gồm chi phí
và các lịch trình trong kế hoạch.
7. Sau khi hoàn thành ba bước cuối cùng của kế hoạch thiết kế, hãy xem lại kế hoạch thiết kế của bạn bằng cách sử
dụng danh sách kiểm tra kế hoạch thiết kế. Sau khi xem xét, hãy thực hiện bất kỳ bổ sung hoặc chỉnh sửa cần
thiết nào cho kế hoạch thiết kế của bạn.
8. Nếu thời gian cho phép, gặp ba bạn cùng lớp để so sánh, đánh giá phương án thiết kế của nhau và đưa ra những
gợi ý mang tính xây dựng nếu có.

Tài liệu PTTK Web Tiến trình 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tài liệu PTTK Web Tiến trình 1

Uploaded by

Copyright:

Available Formats

Machine Translated by Google

3 Lập kế hoạch thành công

Trang Giới thiệu

Chi tiết Chi tiết Chi tiết Chi tiết

sau và các quyết định được đưa ra trước đó trong dự án.

Quy trình lập kế hoạch phát triển trang web

BƯỚC 2: Xác định nội dung chung của website

BƯỚC 3: Chọn cấu trúc của trang web

BƯỚC 4: Chỉ định hệ thống điều hướng của trang web

BƯỚC 5: Thiết kế giao diện website

Mục tiêu trang web

trong ngành của bạn.

•Mục tiêu chính:

•Mục tiêu phụ:

Mục tiêu trang web

dịch vụ ở 30 ngày tiếp theo.

và phụ của trang web mới:

Tại sao CTA quan

mức độ thể lực.

chi phí đầu tư (ROI),

CỦA BẠN Khám phá lời kêu gọi hành động

tiếp theo trên trang web.

Hồ sơ đối tượng mục tiêu

Một trang web có thể có

nhiều đối tượng mục tiêu.

Depot quảng bá các cửa

trang mạng? bán thiết bị văn phòng

và vật tư trực tuyến cho

•Khán giả sống ở đâu? nhân và cung cấp các

dịch vụ chuyên biệt hướng

và sở thích mua hàng?

•Lý do chính và phụ của khán giả là gì?

Thống kê, Hoa Kỳ

Cục điều tra dân số và

Hồ sơ đối tượng mục tiêu nghiệp nhỏ

cung cấp tài nguyên

để xác định nhân

• Từ 20 đến 45 tuổi nói chung.

đối tượng mục tiêu, hãy sử

dụng công cụ tìm kiếm

trên trang web.

mong muốn, nhu cầu và mong đợi của khán giả.

Hồ sơ đối tượng mục tiêu

ảnh hưởng đến UX như

việc sử dụng và phân phối đa họ đi nơi khác.

sử dụng công cụ tìm kiếm

phù hợp với thiết kế và tổ chức của trang web?

Trang web Fit4U

Khách truy cập trang web điển hình:

• Truy cập web bằng nhiều loại thiết bị

• Chọn các trang web có điều hướng trang web dễ sử dụng

khả năng tiếp cận

phong phú, hấp dẫn và hữu dụng.

bạn nên liên tục thu thập

phản hồi từ đối tượng mục

Tuyên bố mục đích trang web tiêu để cập nhật hồ sơ đối

tượng mục tiêu và tinh

chỉnh hoạt động của trang

Trang web Fit4U

khách hàng và nhà đầu tư

kết hợp xu hướng tập thể dục

Bước 2: Xác định nội dung chung của trang web

các trang này.