Đề cương thiết kế web

ỨNG DỤNG THIẾT KẾ WEB
1. Trình bày khái niệm website? Các thành phần cơ bản của website ................................ 1
2. Trình bày các cách phân loại website? Ví dụ.................................................................2
- Phân biệt website tĩnh, động. Cho ví dụ .......................................................................... 2
- Phân biệt web 1.0, web 2.0, web 3.0. Cho ví dụ..............................................................2
3. Quy trình thiết kế website ............................................................................................. 4
4. Trình bày các nguyên tắc thiết kế UX trong website. Cho ví dụ. ................................... 5
5. Vai trò của điều hướng trong thiết kế website? Trình bày các cách phân loại điều hướng? 6
6. Các cách xác định vị trí hiện tại của người dùng ...........................................................8
7. Thiết kế dàn trang trên website cần quan tâm những yếu tố nào? .................................. 9
8. Trong website có những loại bố cục nào? Hãy trình bày và phân tích.......................... 10
9. Phác thảo giao diện khung mẫu cho: website tmđt, website giải trí, website cộng đồng,
website tin tfíc ................................................................................................................ 14

1. Trình bày khái niệm website? Các thành phần cơ bảncủa website.
- Khái niệm website: Website là một tập hợp các trang web bao gồm hình ảnh, file, âm
thanh ................... thường chỉ nằm trong một tên miền (domain name) hoặc tên
miền phụ (subdomain). Một website phải được đặt trên ít nhất 1 máy chủ.

- Các thành phần cơ bản của website
+ Tên miền
Tên miền là một đường dẫn tới trang web hay còn được gọi là địa chỉ website. Tên miền
thay thế cho các địa chỉ IP của máy chủ (là những con số khó nhớ của mỗi máy chủ trên
Internet) giúp cho con người dễ dàng ghi nhớ, truy cập và tim kiếm.
+ Web hosting: Là dịch vụ lưu trữ và chia sẻ dữ liệu trực tuyến. Để người dùng có thể truy
cập trang web thì cần phải th web hosting và đặt dữ liệu trang web ấy vào đó để người
dùng có thể truy cập vào trang.
+ Sourse code: là mã nguồn của web, hiện thị nội dung và chức năng của web cho phép
người xem có thể đọc và truy cập. Source code do các lập trình viên tạo ra dựa trên các câu
lệnh, các câu lệnh yêu cầu web server thực hiện và hiểnthị nội dung trên website.

2. Trình bày các cách phân loại website? Ví dụ
- Phân biệt website tĩnh, động. Cho ví dụ
- Phân biệt web 1.0, web 2.0, web 3.0. Cho ví dụ
- Phân loại biệt website tinh, động (Phân loại theo dữ liệu)
+ Website tinh: được hiểu theo nghĩa là dữ liệu không thay đổi thường xuyên. Với dạng
web này để thay đổi nội dung trên trang web người sở hữu phải truy cập trực tiếp vào các
mã lệnh để thay đổi thông tin, người dùng hầu như khôngthể tương tác với trang web

• Ưu điểm: Chạy nhanh, tốn ít tài ngun máy chủ, gần như khơng thể hack, chi
phí thấp
• Nhược điểm: Website tinh tương tự 1 tờ báo giấy, khơng có sự tương tác giữa
người truy cập và website, quý khách không thể tự thay đổi nộidung website
+ Website động: là những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm phát
triển web. Với web động, thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi người
dùng truy vấn tới một trang web. Website động có sự tương tác 2 chiều giữa người truy
cập, người quản lý và website.

• Ví dụ: Người truy cập đặt hàng, gửi liên hệ, gửi bài viết, người quản trịwebsite
có thể sửa bài viết, xóa bài viết
• Ưu điểm, khả năng tương tác với người dùng, ngôn ngữ lập trình cấp cao cho phép
tạo ra các website với nhiều mục đích sử dụng, thỏa mãn nhu cầu truy cập của
khác hàng
-> Ví dụ: vnexpress.net, shopee.vn, vingroup.net…

- Phân biệt web 1.0, web 2.0, web 3.0 (Phân loại theo công nghệ)
+ Web 1.0: thông tin 1 chiều từ website đến người xem, chỉ đọc
-> Ví dụ: Britannica online…
+ Web 2.0: có tinh tương tác cao, bất kì ai cũng có thể tham gia xây dựng nộidung website
-> Ví dụ: Facebook, Youtube, Reddit, Wikipedia, Twitter…

+ Web 3.0: kết nối các website với nhau, hiểu được hành vi của người dùng, biết họ muốn
gì và cần tim gì


-> Ví dụ: Apple Siri. Bằng việc sử dụng cơng nghệ nhận diện giọng nói và trí tuệ nhân tạo
để ghi nhớ những yêu cầu, hành vi, thói quen của người sở hữu, từ đó giúp Siri đưa ra
những đề xuất đúng đắn và phù hợp cho người sử dụng.

- Phân loại theo nội dung
+ Website thông tin: cung cấp thông tin về một vấn đề cụ thể hoặc tổ chức
Ví dụ: qldt.ptit.edu.vn
+ Website giao dịch: có thể được sử dụng để thực hiện một số giao dịch hoặc nhiệm vụ
(thương mại điện tử…)
Ví dụ: shopee.vn
+ Website cộng đồng: cung cấp thông tin hoặc các cơ sở giao dịch liên quan nhưng tập
trung vào sự tương tác giữa các khách truy cập của trang web (forum…)
Ví dụ: tinhte.vn
+ Website giải trí: chơi trị chơi hoặc một số hình thức tương tác thú vị, có thể bao gồm
giao dịch, cộng đồng và các yếu tố thơng tin
Ví dụ: zingmp3.vn
+Website khác bao gồm các trang web nghệ thuật, thử nghiệm, web cá nhân…

- Phân loại theo tổ chức
+ Website thương mại: được xây dựng và điều hành bởi một tổ chức hoặc cá nhân cho lợi
ích thương mại
Ví dụ: shopee.vn
+ Website Chính phủ: là của một tổ chức chính phủ, và mục đích của trang web là để đáp
ứng một số nhu cầu xã hội và pháp lý.
Ví dụ: chinhphu.vn
+ Website Giáo dục: Đây là trang web của một số cơ sở giáo dục, và nó đượcsử dụng để

hỗ trợ mục tiêu học tập hay nghiên cứu.
Ví dụ: ted.com
+ Website phi lợi nhuận: là Một trang web từ thiện tồn tại để thúc đẩy các mục tiêu của
một tổ chức phi lợi nhuận, các hoạt động từ thiện của một cá nhân hoặc tổ chức.


Ví dụ: one.org
+ Các website cá nhân tồn tại tùy theo quyết định của một số người hoặc một nhóm nào
đó.
Ví dụ: giangoi.com

- Phân loại theo hình ảnh
+ Hướng văn bản: trang web được thiết kế tập trung vào nội dung văn bản(wikipedia)
Ví dụ: Wikipedia.org
+ Phong cách GUI: giao diện hướng đồ họa người dùng, cách sử dụng văn bản hướng tới
tồn diện về thiết kế giao diện người dùng
Ví dụ: alexbuga.com
+ Các trang web ẩn dụ: mượn ý tưởng tưởng từ “cuộc sống thực”
+ Các trang web thực nghiệm: làm khác đi so với tiêu chuẩn, phi thực tế

3. Quy trình thiết kế website
- Quy trình phát triển website: Planning (lập kế hoạch) -> Design ->
Development -> Launch (ra mắt)
+ Bước 1: Lập kế hoạch

• Phân tich yêu cầu: xác định mục tiêu người dùng, khách hàng -> xđ các tinh
•
•
•
•

năng cần thiết -> đề xuất và phân tich
Các điều lệ dự án: các thông tin đã thống nhất, nó là tài liệu được sử dụng
tham khảo trong suốt dự án
Kiến trúc thông tin: sắp xếp, xây dựng, tổ chức thông tin website
Lập hợp đồng: điều khoản, sở hữu bản quyền…
Lập kế hoạch thực hiện: tổ chức nhân sự thực hiện

+ Bước 2: Thiết kế

•
•
•
•

Wireframe
Visual design
Xét duyệt
Mã hóa bằng HLML/ CSS

+ Bước 3: Phát triển


• Phát triển
• Thử nghiệm
• Đẩy nội dung lên website
+ Bước 4: Ra mắt

•
•

•
•
•

Rà sốt lại tồn bộ sản phẩm
Chuyển sang máy chủ
Chạy thử nghiệm
Kiểm tra trên các trình duyệt
Bàn giao khách hàng

4. Trình bày các nguyên tắc thiết kế UX trong website.Cho ví dụ.
- Khả năng ghi nhớ
+ Nguyên lý 7 ± 2 (George A. Miller): Số lượng “khối” nhận thức của một người bình
thường có thể giữ trong bộ nhớ làm việc (một bộ phận của bộ nhớ ngắn hạn) là 7 ± 2 (từ
5-9)
=> Áp dụng nguyên tắc 7±2 vào thiết kế độ sâu và rộng cho menu website: các yếu tố
thông tin trong khoảng từ 5-9 khối. Càng nhiều thông tin thêm vào “giao diện”, người dùng
càng trở nên khó khăn khi thao tác.
+ Nguyên tắc 3 CLICK: Khi cần tim bất kì thơng tin gì trên website thì thơng tin đó phải
được tim thấy trong vịng 3 click chuột. Nếu khơng khách hàng sẽ mất kiên nhẫn và bỏ đi

- Thời gian đáp ứng
+ Một hệ thống có thời gian đáp ứng là 0,1s được cảm nhận là phản ứng trựctiếp
+ Thời gian chờ đợi đến 3s được coi là không ảnh hưởng đến suy nghĩ của conngười
+ Sau 8 – 10s, người dùng thường bắt đầu quan tâm đến các hoạt động xungquanh
+ Nên có giới hạn 8 – 10s cho người sử dụng để xác định ý chính cơ bản của nội dung
hoặc mục đích sau khi tải của một trang

- Khả năng di chuyển

+ Tạo mục tiêu lớn: mục tiêu có độ rộng lớn hơn thì có thể nhanh chóng đượctruy cập
+ Giảm thiểu di chuyển chuột: Mục tiêu gần hơn sẽ truy cập nhanh hơn

- Thị giác:
+ Sử dụng màu xanh cho các liên kết
+ Màu sắc được lựa chọn đúng cách giúp kích thích người dùng thực hiện hànhđộng

- Tìm kiếm: Mở rộng hộp tim kiếm lên 27 ký tự thì sẽ chứa 90% nội dung timkiếm.
- Một số thói quen người dùng
+ Người dùng không quan tâm đến quảng cáo: Một số điều hướng giống banner, quảng
cáo sẽ bị bỏ qua
+ Hầu hết người dùng không sử dụng thanh cuộn: Những nội dung quan trọng nên đặt phía
trên, nơi mà người dùng khơng phải sử dụng đến thanh cuộn

• Tên trang web
• Giá trị của trang web
• Danh mục cho các mục chính có liên quan của trang web.
5. Vai trị của điều hướng trong thiết kế website? Trìnhbày các cách
phân loại điều hướng?
- Vai trò của điều hướng: Điều hướng đóng vai trị quan trọng trong việc định hình thói
quen sử dụng trên website
+ Giúp người dùng di chuyển từ trang này sang trang khác trên website
+ Tìm kiếm định hướng mục tiêu và định vị thông tin siêu liên kết
+ Tất cả các liên kết, nhãn và các yếu tố khác cung cấp truy cập tới các trang web, giúp
người dùng định hướng khi tương tác với một website nhất định

- Các cách phân loại điều hướng
1. Điều hướng cấu trúc
➢ Điều hướng cấu trúc đi theo cấu trúc website. Nó cho phép mọi người di chuyển

lên và xuống các điểm khác nhau của hệ thống phân cấp website


➢ Có 2 loại điều hướng cấu trúc: Điều hướng chính và điều hướng vị trí
• Điều hướng chính
o Điều hướng chính đại diện cho các trang cấp cao nhất của cấu trúc website
hoặc các trang chỉ dưới trang chủ.
o Vị trí đặt điều hướng chính: xuất hiện trong vị trí phù hợp khơng thay đổi trên
tất cả các trang của website
o Vai trị của điều hướng chính
▪ Cung cấp một cái nhìn tổng quan về website
▪ Nhắc nhở nơi người dùng đang ở trong một website
▪ Cho phép người dùng chuyển chủ đề hoặc có thể thiết lập lại đường
dẫn điều hướng.
▪ Nó giúp người dùng khi bị gián đoạn trong khi điều hướng và nhắc nhở nơi
họ đang ở trong một website.
• Điều hướng vị trí: Điều hướng vị trí được sử dụng để truy cập các cấpthấp hơn
trong một cấu trúc, bên dưới trang điều hướng chính
o Điều hướng vị trí dạng L-ngược
o Điều hướng vị trí ngang
o Điều hướng vị trí dạng nhúng thẳng đứng

2. Điều hướng liên kết: tạo các kết nối quan trọng giữa các cấp của một hệ thống
phân cấp hoặc cấu trúc website.

➢ Có 3 loại điều hướng liên kết
• Điều hướng theo ngữ cảnh
o Phụ thuộc vào ngữ cảnh cảnh cần sử dụng điều hướng để bổ sung thơng tin;
có thể là chuyển sang một nội dung khác hoặc tới một website mới

o Vị trí của điều hướng ngữ cảnh: điều hướng nhúng và liên kết liênquan

• Liên kết nhanh
o Cung cấp quyền truy cập vào nội dung hoặc các khu vực quan trọng của
trang web.
o Nó có thể liên kết đến một trang web phụ hoặc thậm chí đến một website
hoàn toàn mới.
o Liên kết nhanh thường xuất hiện ở đầu hoặc ở hai bên của trang. Trêntrang chủ,
nó có thể ở vị trí nổi bật trong khu vực riêng của mình, nhưng trên các trang
con nó có thể nằm ở drop – down hoặc trong menu động.


• Điều hướng footer
o Nằm ở dưới cùng của trang
o Thường được đại diện bởi các liên kết văn bản.
o Nó thường truy cập vào một trang duy nhất khơng có cấu trúc phâncấp thêm.
o Chứa thơng tin bổ sung khơng liên quan với chủ đề chính của website, chẳng
hạn như thông tin bản quyền, điều khoản, điều kiện, và các khoản tin dụng
website
o Lợi thế của điều hướng footer là nó khơng xâm nhập vào nội dung hoặc
chức năng website.

3. Điều hướng tiện ích
➢ Dùng để kết nối các công cụ, tinh năng hỗ trợ người dùng trong việc sử dụng
➢
➢
•
•
•
•

website và thường khơng nằm trong hệ thống phân cấp chủ đề củawebsite
Điều hướng tiện ích và điều hướng chính thường thường xuất hiện cùngnhau trong
một khu vực định vị
Các dạng khác của điều hướng tiện ích:
Điều hướng ngồi website: liên kết đến các website khác của công ty, thường
đặt ở phía bên phải của trang
Logo liên kết: Liên kết logo điều hướng đến trang chủ.
Lựa chọn ngôn ngữ, quốc gia: đối với các website đa ngôn ngữ, đa quốc gia thì
liên kết tiện ích cho phép khách hang chọn ngôn ngữ và quốc giacủa họ.
Điều hướng nội bộ trang: một số trang web có thể rất dài, điều hướng nội bộ
cung cấp một cái nhìn tổng thể về trang và cho phép người dùng di chuyển đến
một phần khác của trang => cung cấp một cái nhìn tổng quan về nội dung của
trang.

6. Các cách xác định vị trí hiện tại của người dùng
- Nhãn và trang


- Màu sắc
- Hình ảnh
- Phong cách
- Vị trí người dùng đã từng đi qua
+ Sử dụng màu sắc để nhận biết các khu vực đã đi qua
+ Lợi dụng nút back

- Vị trí người dùng có thể tới
+ Người dùng sẽ lựa chọn điểm đến thơng qua những gì được trình bày trước mặt họ
+ Vị trí đặt điều hướng là rất quan trọng. Có các vị trí đặt điều hướng sau:

•
•
•
•
•

Trên cùng
Bên trái
Bên phải
Dưới cùng
Trung tâm

7. Thiết kế dàn trang trên website cần quan tâm nhữngyếu tố nào?
- Bố cục


+ Tỷ lệ vàng
+ Nguyên tắc 1/3
+ Looking room
+ Bố cục cân bằng
+ Bố cục chữ F, Z
- Hệ thống lưới
+ Hệ thống lưới chính là hệ thống quản lý phải xác định trước khi quyết địnhthiết kế
+ Tỷ lệ là giá trị cốt lõi của hệ thống lưới
+ Lưới giúp trang web trở nên gọn gàng và ngay ngắn ngay cả khi thông tin dàyđặc
+ Các hệ thống lưới dùng phổ biến là hệ thống lưới 12 cột, 16 cột, 24 cột

- Khoảng trắng: Khoảng trắng được chia thành 2 loại
+ Khoảng trắng chủ động là không gian cố tinh bỏ trống của một bố cục để thểhiện một ý
đồ nào đó của thiết kế. Nhấn mạnh làm nổi bật một yếu tố hay nộidung nào đó của thiết

kế, hoặc đơn giản là khoảng nghỉ mắt của người đọc, từđó dẫn người đọc đến một yếu tố,
nội dung khác của thiết kế.
+ Khoảng trắng bị động là không gian trống xung quanh bên ngoài của trang, hoặc vùng
trống của nội dung thiết kế xuất hiện trong quá trình dàn trang, nó khơng tham gia vào việc
thể hiện ý đồ thiết kế.

8. Trong website có những loại bố cục nào? Hãy trìnhbày và phân
tích
- Tỷ lệ vàng


+ Mắt của chúng ta thường có xu hướng hướng mắt nhìn vào trung tâm của đường
xoắn ốc, nơi mà các điểm cụ thể nhất, chi tiết nhất được thể hiện => thiết kế bố cục nội
dung của thiết kế sao cho hướng về trung tâm của đườngxoắn ốc.

+ Kiểu bố cục hai khung ảnh này rất thích hợp trong thiết kế Web. Nó tạo ra một Website
gọn gàng, dễ đọc và có bố cục được tổ chức tốt. Nó đem đến cho người đọc cảm giác ngăn
nắp, cân bằng và trật tự trong Website.

- Nguyên tắc 1/3

+ Khi đặt chủ thể (sản phẩm…) nơi các đường kẻ giao nhau thì tạo điểm nhấn mạnh cho
chủ thễ hơn là đặt tại trung tâm của ảnh

- Looking room: Là khoảng không gian mà chủ thể đang hướng tới trong khung
=> Hướng mắt người dùng vào nội dung
+ Sử dụng hình ảnh chủ đạo (thường là người, con vật…) đang hướng mắt (quay về)
phía nội dung

+ Nếu hình ảnh chủ đạo mắt hướng ra khỏi trang, khơng quay về phía nội dung
=> mắt người dùng rời khỏi nội dung

- Bố cục cân bằng
+ Cân bằng đối xứng: là tất cả yếu tố như chiều cao, chiều rộng được sắp xếp một cách
đối xứng trong bản thiết kế. Bố cục cân bằng đối xứng tạo ra cảm giác ổn định, an toàn
cho người xem, đồng thời bố cục này tạo ra các điểm nhấn nằm ở trung tâm bản thiết
kế.
+ Cân bằng không đối xứng: là bố cục mà 2 bên phần tử không bằng nhau, tất cả các yếu
tố sắp đặt khơng có sự đối xứng với nhau. Cân bằng bất đối xứng được tạo ra từ việc sử
dụng các yếu tố màu sắc, kích thước, số lượng…

- Bố cục chữ F


+ Các điểm nhìn của người dùng sẽ di chuyển lần lượt theo thứ tự 1 > 2 > 3 > 4 theo
đúng thói quen đọc của người dùng: Từ trái qua phải, từ trên xuống dưới.
+ Khi độc giả nhìn thấy thứ mình quan tâm, họ bắt đầu đọc chúng từ từ và hìnhthành điểm
nhìn theo cột dọc. Kết quả cuối cùng "sơ đồ" đưa mắt của họ sẽ cóhình chữ F.
=> Các yếu tố quan trọng như logo, menu điều hướng, nội dung chính ... đượcđặt lên đầu
trang web

- Bố cục chữ Z

+ Nguyên tắc thiết kế Z-layout: đặt một chữ Z với 4 điểm dừng lên phần đầu tiên của
trang web, định hướng mắt nhìn của người dùng đi theo thứ tự của chữ Z mà ở điểm
kết thúc (4) sẽ là nơi đặt nút Call-to-aciton

• Điểm 1: Vị trí vàng cho logo thương hiệu
• Điểm 2: Thường là menu

• Vị trí giữa trang: Image Placeholder- phần đặt hình ảnh chủ đạo của trang web,
thường là một slider chạy những hình ảnh tiêu biểu, giới thiệu ngắn gọn về trang
web để thu hút sự chú ý của người dùng

• Điểm 3: Nội dung chính
• Điểm 4: Điểm kết của Z-Pattern, vị trí vàng cho CTA.
+ Z-layout phù hợp nhất với những website thiết kế đơn giản, tinh gọn với mục đích nhằm
định hướng người dùng click vào Call-to-Aciton

9. Phác thảo giao diện khung mẫu cho: website tmđt, website giải
trí, website cộng đồng, website tin tức…
- Website tmđt (Moji)



Trang con


Trang nhiệm
vụ



Trang con


- Web cộng đồng (webtretho.com)

Trang nhiệm
vụ