Tổng quan về thiết kế web

Tổng quan, thiết kế web

Trang 1

Tổng quan về thiết kế Web

1

Tổng quan về thiết kết WEB

Chương 2

2 Lâm Quang Vũ

Phần 1 – Xác định mục đích, yêu cầu

của Website cần thiết kế

lMục tiêu, yêu cầu cơ bản của WebSite

lĐối tượng phục vụ

lChủ để của WebSite

1.1 Mục tiêu, yêu cầu cơ bản

lĐề ra mục tiêu khái quát, ngắn gọn, rõ ràng

của Website cần thiết kế

lLà công cụ để đánh giá sự thành bại của một

Website

lMục tiêu phải dài hạn, bao trùm toàn bộ kế

hoạch phát triển

Trang 2

4 Lâm Quang Vũ

1.2 Đối tượng phục vụ

l Xác định loại đọc giả chính của Website

l Tìm hiểu về:

– Sự hiểu biết

– Trình độ

– Sở thích

– Kinh nghiệm duyệt Web …

l Thiết kế tốt = thích hợp cho một dải rộng các loại

đọc giả có trình độ và nhu cầu khách nhau

5 Lâm Quang Vũ

1.3 Chủ đề

lGiúp định hướng cho nhà thiết kế

– Giáo dục

– Huấn luyện (online trainning)

– Tin tức

– Giải trí

– Diễn đàn trao đổi thảo luận

– Mua bán, quản lý….

lXem ví dụ

Ví dụ - Diễn đàn

Trang 3

7 Lâm Quang Vũ

Ví dụ - Online training

8 Lâm Quang Vũ

Ví dụ - tin tức

Ví dụ

Trang 4

10 Lâm Quang Vũ

Ví dụ - Online Shopping

11 Lâm Quang Vũ

Phần 2 - Thiết kế giao diện

lĐiểm khác biệt giữa tài liệu thông thường và

trang WEB

lMột số vấn đề liên quan đến việc thiết kế

giao diện cơ bản

lThiết kế giao diện WebSite

2.3 Thiết kế giao diện Website

Menu

Header

Content

Logo

Trang 5

13 Lâm Quang Vũ

2 x 2 Layout

14 Lâm Quang Vũ

Table within a table

The outer table

Trang 6

16 Lâm Quang Vũ

The inner table

17 Lâm Quang Vũ

Centered with three columns

Really complicated design!

Trang 7

19 Lâm Quang Vũ

2.1 Điểm khác biệt giữa tài liệu thông

thường và trang WEB

lGiống nhau: phải được trải qua sự phát triển

và chuẩn hóa

lKhác nhau: các mối liên kết siêu văn bản,

multimedia…

à cho phép người đọc truy nhập đến một

trang đơn lẻ mà không cần đến lời tựa đề

Tìm kiếm nhanh và đơn giản hơn

Có thể quay lại một loạt các liên kết

20 Lâm Quang Vũ

2.2 Một số vấn đề liên quan đến việc

thiết kế giao diện cơ bản.

l Thiết kế hướng tới người sử dụng

l Các giúp đỡ định hướng rõ ràng

l Không có trang cuối cùng (dead-end)

l Băng thông và ảnh hưởng

l Đơn giản và tính nhất quán

l Tính ổn định của các trang Web

l Phản hồi và đối thoại

l Tính tương thích trên các trình duyệt khác nhau

(thay thế)

2.2.1 Thiết kế hướng tới người sử

dụng

lNgười sử dụng là đối tượng chính quyết định

sự thành bại của Website

lYêu cầu mức độ hoàn hảo của thiết kế giao

diện đồ họa

lXây dựng các kịch bản mẫu cho các loại đối

tượng sử dụng khác nhau

lCách tốt nhất: thử nghiệm à nhận các phản

hồi từ đọc giả

Trang 8

22 Lâm Quang Vũ

2.2.2 Các giúp đỡ định hướng rõ ràng

lĐọc giả có thể trả lời các câu hỏi:

– Đang ở đâu ?

– Có thể làm gì ?

– Có thể đi tiếp tới đâu ?

lBiểu tượng nhất quán, dễ hiểu, theo chuẩn

qui định

lLuôn có khả năng quay lại trang chủ, các

trang chủ chốt trên Website

23 Lâm Quang Vũ

2.2.3 Không có trang cuối cùng

(dead-end)

lMỗi trang có ít nhất một liên kết

lTrang “dead-end” à thất vọng, mất khả

năng đến với các trang khác

lNên để liên kết về trang chủ trong mọi trang

2.2.4 Băng thông và ảnh hưởng

lSự kiên nhẫn của đọc giả có giới hạn

lTốc độ đôi khi là yếu tố quyết định đến việc

lựa chọn Website

lPhân biệt giữa thiết kế cho Internet và

Intranet

Trang 9

25 Lâm Quang Vũ

2.2.5 Đơn giản và tính nhất quán

lTùy vào loại ứng dụng

lĐọc giả sẽ không ấn tượng và sự phức tạp

không lý do Đặc biệt là đọc giả phục thuộc

vào thời gian và thông tin chính xác

lCác biểu tượng đơn giản, quen thuộc, nhất

quán trong tất cả các trang

26 Lâm Quang Vũ

2.2.6 Tính ổn định của các trang Web

lỔn định về cấu trúc và nội dung

lCấu trúc: các thành phần được đặt đúng chỗ

và hoạt động nhịp nhàng

lNội dung: các mối liên kết luôn đảm bảo có

đích đến, nội dung luôn đảm bảo thích hợp

và phải cập nhật cho phù hợp với ngữ cảnh

tại thời điểm đọc giả duyệt Web

2.2.7 Phản hồi và đối thoại

lChuẩn bị trước cho việc trả lời, đáp ứng các

đòi hỏi, góp ý của đọc giả một cách nhanh

nhất có thể

lLuôn có cung cấp địa chỉ để liên kết với

“Webmaster”

lLên kế hoạch nhân sự phụ trách lâu dài

Trang 10

28 Lâm Quang Vũ

2.2.8 Tính tương thích trên các trình

duyệt khác nhau (thay thế)

lKhông phải mọi trình duyệt đều hiển thị trang

web của chúng ta giống nhau

lLưu ý khi có đọc giả sử dụng web browser

không có khả năng hỗ trợ đồ họa

lSử dụng nhãn (tag) ALT trong HTML để thay

thế

29 Lâm Quang Vũ

lXác định kiểu chữ, màu sắc

lXác định kích thước khung nhìn

lXác định các kỹ thuật, công cụ thiết kế

lCắt đoạn, tóm lược thông tin

lHệ thống Menu điều khiển, các liên kết giữa

các trang

lXác định cấu trúc WebSite

2.3.1 Xác định kiểu chữ, màu sắc

l Phông chữ à phụ thuộc vào

– Đặc điểm thông tin

– Độc giả

– Trình duyệt, độ phân giải

– Ngôn ngữ sử dụng

– Font có chân, không chân…

l Gam màu à thống nhất trong toàn bộ Website

Trang 11

31 Lâm Quang Vũ

2.3.2 Xác định kích thước khung nhìn

lPhải làm cho đọc giả cảm nhận được kích

thước của trang thông tin, biết họ đang ở

đâu, có thể làm gì ?

lLưu ý, hầu hết các trang web đều không vừa

khớp với màn hình 14-15 inch

32 Lâm Quang Vũ

Ví dụ:

2.3.3 Xác định các kỹ thuật, công cụ

thiết kế

lPhụ thuộc nhiều yếu tố:

– Môi trường hosting

– Đội ngũ thiết kế

– Chi phí thiết kế

– Băng thông đường truyền

– ….

è Chi phí

Trang 12

34 Lâm Quang Vũ

2.3.4 Cắt đoạn, tóm lược thông tin

l Luôn có một số lợi điểm:

– Đọc giả có ít thời gian để đọc các tài liệu trên màn hình.

– Luôn có nhu cầu muốn tìm phần thông tin chủ định, không

nên chia cắt quá nhỏ, tóm lược quá ngắn à gây thất vọng

– Hình thức và cách tổ chức đồng nhất à kinh nghiệm tìm

kiếm, khám phá.

– Thông tin ngắn gọn, súc tích thích hợp với màn hình máy

tính (bị giới hạn tầm nhìn).

l Việc áp dụng phải linh động, nhất quán.

35 Lâm Quang Vũ

2.3.5 Hệ thống Menu điều khiển, các

liên kết giữa các trang

lHệ thống đk đồ họa phong phú, nhất quán,

mang tính gợi nhớ

lHệ thống phím ấn đồng nhất, logic

lCó thể liên kết đến một site khác cũng như

quay lại site trước

lCác liên kết đến các site có giá trị sẽ tăng giá

trị chính website của chúng ta

Ví dụ

Trang 13

37 Lâm Quang Vũ

2.3.6 Xác định cấu trúc WebSite

lHệ thống phân cấp

lHệ thống các trang nối tiếp

lÔ Lưới

lMạng nhện

38 Lâm Quang Vũ

2.3.6.1 Phân cấp

Hệ thống Phân cấp

lDùng để tổ chức các khối thông tin phức

hợp

lLà hệ thống được dùng thông dụng nhất

lGần với mô hình tổ chức thế giới thực

lDễ hình dung tổ chức website

è Cái nhìn tổng quan từ trang chủ

Trang 14

40 Lâm Quang Vũ

2.3.6.2 Nối tiếp

41 Lâm Quang Vũ

Hệ thống các trang nối tiếp

lBiểu diễn thông tin tuần tự, các bảng tường

thuật nối tiếp theo thời gian

lCác thông tin tra cứu tham khảo: tự điển

báck khoa, tự điển thuật ngữ

lThích hợp cho hệ thống website nhỏ

2.3.6.2 Ô lưới

Trang 15

43 Lâm Quang Vũ

Hệ thống Ô lưới

lDanh sách khóa học, các biến cố, sự kiện

lTừng đơn vị trong cấu trúc phải có cùng cấu

trúc cho các chủ đề lớn và nhỏ

lKhó hiểu đối với khi xác định mối liên quan

giữa các loại thông tin

lRất tốt đối với những đọc giả có kinh

nghiệm, có sẵn kiến thức về hệ thống, chủ

đề trong hệ thống

44 Lâm Quang Vũ

2.3.6.4 Mạng nhện

Hệ thống mạng nhện

l Tố chức ít hạn chế cho việc sử dụng mẫu thông tin

l Mô hình tự khám phá, khai thác triệt để ưu điểm của

hyperlink

l Cấu trúc phi thực tế nhất, khó hiểu, khó dự đoán cho

đọc giả

l Thích hợp với những site nhỏ, đọc giả chuyên

nghiệp hoặc trình độ cao, tìm kiếm các kiến thức

chuyên sâu

Trang 16

46 Lâm Quang Vũ

Phần 3 – Các thành phần cơ bản của

Website

lTrang chủ (HomePage)

lHệ thống Menu, Logo, định danh

lCác trang thành viên

47 Lâm Quang Vũ

3.1 Trang chủ

lMọi website đều được thiết lập quanh

Homepage

lĐiều kiện cơ bản để website thành công

lLưu ý khi sử dụng hệ thống đồ họa

3.2 Hệ thống menu,logo, định danh

lHệ thống menu phải rõ ràng, đầy đủ sẽ giúp

đọc giả hình dung được cấu trúc, tổ chức

website

lCần quan tâm đến vị trí, các thể hiện (có hay

không có hiệu ứng)

lVị trí logo, định danh công ty phải cố định

Trang 17

49 Lâm Quang Vũ

3.3 Các trang thành viên

lXây dựng theo cấu trúc cơ bản của website

lNhất quán, phù hợp với các thuộc tính đã

định dạng trước

50 Lâm Quang Vũ

Phần 4 – Một số vấn đề cần quan tâm

lThời gian quản lý

lLiên kết các trang Web, quảng cáo

lPhụ lục, nguồn thông tin, các trang giúp đỡ,

FAQ

lThiết kế trang Web cho mạng Interanet

4.1 Thời gian quản lý

lWebsite cần được cập nhật thông tin để đọc

giả luôn cảm nhận được cái mới

lNếu phần nào đó được cập nhật à thêm ký

hiệu “New”

lGhi thời gian cập nhật, số người truy cập…

lNếu website phức tạp à thêm một trang

“What new ?”

Trang 18

52 Lâm Quang Vũ

4.2 Liên kết trang web, quảng cáo

lTạo liên kết đến các trang thông tin (đối tác,

khách hàng…) à tăng uy tín

lKhi đã ổn định à chuyển đổi hình thức kinh

doanh, thu phí:

– Thuê đặt logo, quảng cáo

– Thu phí thành viên

– ….

53 Lâm Quang Vũ

4.3 Phụ lục, nguồn thông tin, các trang

giúp đỡ, FAQ

lThông tin báo cáo thường cô đọng à trên

web có thêm các phụ lục

lFAQ (Frequently Asked Questions) lý tưởng

cho việc thiết kế website hỗ trợ

lFAQ à giảm thiểu nhân sự và chi phí cho

việc hỗ trợ, tư vấn khách hàng

4.4 Thiết kế trang web cho mạng

Intranet

lMột số site thiết kế riêng cho các tổ chức, sử

dụng mạng LAN

lMục tiêu : nâng cao thời gian truy cập, dẫn

dắt vào sâu trong cấu trúc website à đòi hỏi

thông tin phải hấp dẫn, có giá trị

lĐừng để ý tới băng thông và tốc độ à chú

trọng đến nội dung có giá trị và sự hấp dẫn

Trang 19

55 Lâm Quang Vũ

LAB2 – Khảo sát các Website

lKhảo sát các trang Web và rút ra các nhận

xét về cách thiết kế trang Web

lLàm quen với cách sử dụng một số công cụ

tiện ích hỗ trợ trong quá trình thiết kế Web

– Swish

– Frontpage

– Dreamweaver

lSử dụng FTP Server

Tiêu đề	Tổng quan về thiết kế web
Tác giả	Lâm Quang Vũ Vũ
Trường học	Trường Đại Học
Chuyên ngành	Thiết kế web
Thể loại	Bài luận

Định dạng
Số trang	19
Dung lượng	182,42 KB