Tài liệu Những điều cơ bản khi thiết kế Web ppt

Những điều luật cơ bản khi thiết kế Web
12345
Những điều tưởng chừng giản đơn, ai ai cũng biết, nhưng Granny's Mettle sẽ cho chúng ta thấy
rằng không phải ai cũng ý thức được những điều đã biết ấy thật là quan trọng. Cơ bản và cần
thiết đó là những gì bài viết này muốn gửi tới những người thiết kế Web.


I. Điều luật cơ bản:

1. Người đọc không muốn phải kéo thanh cuộn ngang
Theo kinh nghiệm của bản thân, tôi cảm thấy rất khó chịu khi phải kéo thanh cuộn ngang để
đọc nội dung của trang đó. Cho nên bạn phải không được thiết kế trang web khiến người đọc
phải kéo thanh cuộn ngang, nếu không hậu quả sẽ rất lớn.
T heo kinh nghiệm của nhiều người thì bạn nên thiết kế web ở chế độ 800 x 600 Px vì hiện tại
chỉ có 5% số người dùng màn hình 640 x 480 Px thôi. Với số lượng đó thì nghiêng về đa số vẫn
hơn.
2. Thông tin quá dài ở một trang
Kéo chuột sang ngang để đọc đã là rất khó chịu rồi, nhưng kéo mãi kéo mãi xuống dưới để đọc
thì cũng chẳng dễ chịu chút nào với người lướt web. Hơn thế nữa trong một nghiên cứu chỉ ra
rằng đến 75% người lướt web chỉ "đọc lướt" thay vì "đọc từng chữ". Do đó một bài quá dài dễ
làm người ta nản. Tuy nhiên nếu bài đó có nhiều thông tin, thì bạn nên chia ra làm 2, 3 trang
cho nó cũng là một cách khắc phục.
Luật chung: Một trang web không nên để người đọc phải kéo 3 lần màn hình để đọc hết nội
dung. Nếu bạn đang có vấn đề này thì hãy sửa chữa ngay đi. Tuy nhiên trừ trường hợp đặc biệt
nếu đó là một chương sách thì không nói tới vì nếu người đọc đã biết nó là một chương sách và
nội dung phù hợp với cái họ cần thì họ sẽ không ngại kéo đến cả chục trang đâu. Nhưng thường
thì là nên như thế.
3. Dung lượng của một trang bất kỳ không nên nặng quá 50K
Nếu tất cả chúng ta đều tuân theo quy luật như 1+1 = 2 thì tốt quá! nhưng bạn cũng nên biết
rằng chẳng có cái gì là tuyệt đối, bao giờ cũng có những chỗ "sunsilk". Tuy nhiên một trang
web load dưới 5 giây sẽ để lại ấn tượng rất tốt cho người đọc.

Trong thực tế, có đôi lần bạn thực sự phải để nhiều hình đồ họa trên một trang ví dụ như trang
về hình ảnh. Nếu bạn có một thư viện hình ảnh thì việc upload những hình bự chà bá lên mạng
là không thể tránh khỏi, vì bạn muốn hình đó đủ to, đẹp để mà thu hút người xem chứ. Nhưng
trong trường hợp này thì người xem đã xác định trước nên không thành vấn đề. Chung quy lại
một trang load nhanh bao giờ cũng được đánh giá cao hơn một trang phải mất cả thế kỷ mới
load xong.
p/s: Tuy nhiên phụ thuộc vào từng thời kỳ mạng, nếu đa số người dùng sử dụng ADSL thì dung
lượng trang web của bạn có thể được nâng lên.

4. Đừng bắt buộc người đọc phải download plug-ins
Một điều khó chịu không kém là khi vào một trang nào đó bạn bị bắt buộc phải download một
cái plug-in dở hơi nào đó để phải xem một cái gì đó mà bạn thậm chí còn chưa biết nó tốt hay
dở nữa.
Thực tế plug-in có thể tạo một ấn tượng mạnh cho phần giao diện của trang web. Nhưng bạn
nên nhớ rằng không phải ai cũng có plug-in đó mặc dù chúng ta đang sống trong kỷ nguyên
CNTT. Để làm cho tất cả mọi người đến trang của bạn đều có thể xem được, bạn nên nghĩ đến
một cách hoàn thiện hơn như là dùng HTML để thay thế.

II. Những quy định chung:



- Mẫu thiết kế sử dụng kích thước thật của màn hình với khung hình chuẩn của web theo chiều
ngang là 778px. Phần lớn người xem vẫn xem ở mode màn hình 800x600, ngoại trừ một số
trường hợp đặc biệt có thiết kế riêng.
- Sử dụng Mode màu RGB vì web chỉ hiển thị trên màn hình.
- Nếu dùng Photoshop để dựng layout, yêu cầu bắt buộc phải dùng Folder Set để quản lý layer,
vì mỗi website khi thiết kế hoàn chỉnh, có hàng trăm layer.
- Việc dùng Flash cũng cần phải cân nhắc với những website thông tin vì nó chỉ thu hút người
xem vào những lần truy cập đầu, sau đó sẽ chỉ làm cho website nặng lên không cần thiết. Khi

làm file flash lớn, cần phải có phần loading.
- Khi thiết kế, cần đưa tương đối đầy đủ nội dung với màu sắc, font chữ đúng với website sau
này. Khi đặt nội dung, nên để font chữ ở chế độ Smooth là none, ko nên để là Crisp vì khi ra
kết quả cuối cùng (web page) sẽ khác với thiết kế.
- Không sử dụng các font chữ không chuẩn cho nội dung website, vì nếu máy người xem không
có font đó thì sẽ hư toàn bộ layout. Nếu website sử dụng tiếng Việt, nên sử dụng các font
Unicode chuẩn như Arial, Verdana, Tahoma, Times News Roman.
- Các website thương mại nên hạn chế sử dụng các đường cong, hình ảnh lớn, background lớn
chiếm diện tích thông tin của website trừ khi có thể quản lý chúng. Việc sử dụng đường cong
hay background sẽ gây rất nhiều trở ngại khi chuyển qua HTML.
- Cần nghĩ qua về việc làm sao chuyển chúng thành HTML trước khi thiết kế một thành phần
nào.
- Thiết kế web cần tính toán làm sao để tương thích với cấu trúc HTML của website, nếu
không, khi phân tích ra thành các trang web HTML sẽ trở nên rất khó khăn cho việc xây dựng
nội dung cũng như lập trình.
- Trước khi thiết kế, cần có sitemap cụ thể, để việc trình bày thông tin trở nên rõ ràng, dễ thuyết
phục người duyệt mẫu. - Nên xem mẫu thiết kế trên các loại màn hình khác nhau, tốt nhất trên
màn hình CRT bình thường, vì đây là màn hình của người sử dụng. Tránh việc duyệt mẫu, xem
mẫu bằng giấy in láng (hoặc rửa hình), hoặc màn hình laptop, LCD. - Màu sắc website cần nhẹ
nhàng, phù hợp với mục đích của website, thông tin rõ ràng.
- Cần có một mẫu GUI Logic trước khi bắt tay vào thiết kế, GUI Logic này cần được duyệt qua
bởi Người đối tác. GUI Logic là bản thiết kế thô, bao gồm các vị trí của các thành phần trên
website, người thiết kế sẽ dựa trên đó để làm graphic. Bản GUI Logic này được tính toán trước
về mặt thẩm mỹ và quan trọng là usabilities.
Chuyển trang web thành HTML
- Sau quá trình thiết kế web là quá trình phân tích, chuyển đổi mẫu thiết kế thành trang web
HTML, cần theo các yêu cầu cụ thể sau:
- Chương trình dựng trang web, chương trình thích hợp nhất là Macromedia Dreamweaver, vì
đây là chương trình do rất nhiều lập trình viên đang sử dụng để code trực tiếp, tuyệt đối không
dùng Frontpage. Frontpage có thể giúp đơn giản cho người sử dụng nhưng việc sinh mã HTML

rất phức tạp, đặc biệt là sinh ra những mã HTML ko cần thiết và gây rối cho người lập trình.
- Cắt web html cần có độ tỉ mỉ cao, nếu thiết kế mẫu layout, mất từ 4->8h (không tính thời gian
sáng tạo), thì việc cắt web mất từ 2->4h một trang
- Khâu thiết kế và khâu cắt web có vai trò rất quan trọng, vì sẽ tiết kiệm được thời gian cho các
lập trình viên, tester sau này. Một trang web được cắt tốt không chứa các thành phần không cần
thiết như mã HTML dư, hay các lỗi về cấu trúc HTML. Vì khi người lập trình làm việc, họ gần
như chỉ làm việc trên code chứ không làm việc trên phần design.
- Cần tính toán rõ ràng, cụ thể việc áp dụng Template trong website. Template giúp cho 1
website với những trang có thành phần giống nhau được quản lý một cách thống nhất, nếu cần
thay đổi những phần này, chỉ việc chỉnh sửa file Template này.
- Phối hợp chặt chẽ với bộ phận phụ trách nội dung website để bố cục, cấu trúc website rõ ràng
hơn.
- Khi cắt web, cần đưa các style css ở file riêng, không đưa định dạng font trực tiếp trong
website, việc đặt tên các CSS cần sự nghiêm túc, có sự thống nhất. Hạn chế việc định dạng font
chữ bằng tag < font >. Nếu có các link, việc đặt các css: link, active, visited, hover là cần thiết.
Nên định font chuẩn cho toàn website bằng cách định nghĩa lại tag < td >.
- Sử dụng file spacer.gif để trang web có thêm các tùy biến thay vì định kích thước ngang dọc
cho các < table > hay < td >
. File spacer.gif là 1 file gif trong suốt có kích thước 1x1. Khi cần định chiều cao cho 1 td thì
nên chèn file này vào td đó và định chiều cao cho file spacer.gif.
- Tránh việc Merge các Table lại với nhau quá nhiều, tối đa 1 cái. Việc này rất quan trọng, vì nó
sẽ gây khó khăn và mất thời gian cho các lập trình viên khi làm việc.
- Cần xem kỹ lại cấu trúc, yêu cầu của bên thiết kế web, để có thể cho phép website co giãn
theo kích thước màn hình hoặc cố định (nhỏ tối đa 800px). Nếu là các co giãn theo kích thước
màn hình, cần tính toán thiết kế sao cho khi giãn ra không có những khoảng trống hình ảnh.
- NẾU LÀ 1 WEBSITE ĐỘNG HAY CẬP NHẬT THƯỜNG XUYÊN, TUYỆT ĐỐI KHÔNG
DÙNG CHỨC NĂNG SLICE CỦA PHOTOSHOP HAY IMAGEREADY. Chức năng này chỉ
thích hợp cho các website tĩnh vì HTML sinh ra rất phức tạp và có rối dẫn tới việc các lập trình
viên không thể đọc hiểu hay chỉnh sửa được.

III. Những quy tắc khi sử dụng font chữ

1. Font phải dễ đọc
Nhiều người đồng ý rắng font chữ từ 12- 14 là font tiêu chuẩn được dùng trên web. Nếu to
hơn hoặc nhỏ hơn cỡ đó là bạn đã đặt mình vào "vùng nguy hiểm" rồi. Màu của font chữ cũng
nên phù hợp với nền, đừng chọn nền và chữ một màu gần giống nhau hay quá tương phản dạng
nền màu trắng chữ màu ghi. Font chữ màu nhạt trên nền tối rất khó đọc
2. Dùng font phù hợp.
Font chữ không nên quá rắc rối mà có thể làm người đọc mất tập trung, mà font chữ nên phù
hợp với nội dung của website. Ví dụ website cho trẻ em thì nên dùng font nghộ nghĩnh và nhiều
mằu sắc, nhưng website cho người lớn thì nên dùng font ngay ngắn và rõ ràng.
3. Nên dùng một loại font
Bạn nên sử dụng cùng một loại font cho toàn bộ trang web của mình, kể cả kích thước của font
nữa. Hãy hình dùng một trang web mỗi trang là một loại font thì nó sẽ nhìn ra như thế nào?
4. Chỉ nên dùng những font tiêu chuẩn
Bạn có biết rằng hiện nay có bao nhiêu font chữ tồn tại không? và hầu như ngày nào người ta
cũng tạo ra một loại font mới. Nếu bạn may mắn kiếm được một font đẹp, thì hãy giữ cho riêng
mình, đừng nên dùng trên trang web của bạn. Bởi vì chưa chắc gì người đọc của bạn lại may
mắn giống bạn để có font đó. Cho nên lời khuyên của tôi là nên dùng font tiêu chuẩn như:
Arial, Times New Roman, Tahoma, Corier New ... những font có sẵn trong Window vì bạn có
thể chắc rằng ai cũng đọc được.
Nếu máy của người đọc không có font bạn chọn, nó sẽ tự động chọn một font mặc định để
thay thế.
1. Font phải dễ đọc
Nhiều người đồng ý rắng font chữ từ 12- 14 là font tiêu chuẩn được dùng trên web. Nếu to
hơn hoặc nhỏ hơn cỡ đó là bạn đã đặt mình vào "vùng nguy hiểm" rồi. Màu của font chữ cũng
nên phù hợp với nền, đừng chọn nền và chữ một màu gần giống nhau hay quá tương phản dạng
nền màu trắng chữ màu ghi. Font chữ màu nhạt trên nền tối rất khó đọc Và

Ví dụ về lỗi màu sắc khi sử dụng font chữ:

1. Font phải dễ đọc
Nhiều người đồng ý rắng font chữ từ 12- 14 là font tiêu chuẩn được dùng trên web. Nếu to hơn
hoặc nhỏ hơn cỡ đó là bạn đã đặt mình vào "vùng nguy hiểm" rồi. Màu của font chữ cũng nên
phù hợp với nền, đừng chọn nền và chữ một màu gần giống nhau hay quá tương phản dạng nền
màu trắng chữ màu ghi. Font chữ màu nhạt trên nền tối rất khó đọc

5. Trang web có rất nhiều font miễn phí

Bạn có thể vào trang web sau có rất nhiều font miễn phí và rất đẹp:www.dafont.com.



IV. 7 điều cần tránh khi thiết kế web:

1. Nội dung sơ sài và kém hấp dẫn
Bạn nên nhớ rằng khi người lướt web họ tìm các trang web trong công cụ tìm kiếm là họ muốn
tìm thông tin để dùng cho mục đích của riêng mình. Ví dụ trang web của bạn được họ tìm thấy,
nhưng sau một lúc ngó dọc ngó xuôi, họ chẳng thấy có chút gì hấp dẫn họ về mặt nội dung cả.
Và tất nhiên họ sẽ bỏ đi sang trang khác và sẽ không quay lại nữa.
Vậy nên bạn hãy tạo ra trang web với nội dung thật hấp dẫn, sao cho người ta phải Add
favourite ngay lần đầu đến thăm.
2. Tốc độ load chậm
Một điều hết sức khó chịu là trang web của bạn có tốc độ load chậm. Người ta không kiên nhẫn
quá 5 giây để ngồi chờ trang của bạn load đâu.
3. Giao diện nghèo nàn:
Bạn luôn phải nghĩ rằng những người lướt web đến thăm trang của bạn, họ không phải là
những nhà thiết kế web chuyên nghiệp. Thậm chí họ chỉ mới biết đến Internet. Do vậy bạn phải
làm sao cho trang của mình thật dễ sử dụng, người ta chỉ cần nhấn chuột 3 lần là đã tìm ra cái

họ cần.
Thanh di chuyển nên chọn loại tiêu chuẩn là nằm ngang dưới banner hoặc bên tay trái. Đừng
nên dùng những thanh di chuyển quá phức tạp.
Đừng nên dùng hiệu ứng Javascript cho con trỏ chuột
Màu chữ và cỡ chữ không nên quá to, hoặc quá chói. Tốt nhất là bạn nên chọn font chữ từ 12-
14 Px và màu là màu đen. Người ta chứng minh được rằng, mắt người thấy dễ chịu nhất ở
những trang có nền trắng chữ màu đen.
4. Kết hợp màu sắc quá tồi
Có đôi khi tôi vào một vài trang web về Photoshop Tutorial. Thật sự thì tôi cũng thích nội dung
trang web đó, nhưng màu sắc thì … ôi thôi … không thể tha thứ được. Nền màu đỏ, chữ màu
xanh lá cây, viền vàng, chữ xám … nhìn như một bát màu chứ không phải một trang web nữa.
Ở những lúc như thế, tôi chỉ muốn thoát ngay ra mà không muốn chịu đựg thêm một giây nào
nữa.

5. Có quá nhiều hình ảnh động và flash
Banner hoặc logo mà là dạng hình động chạy ra chạy dzô, ẩn hiện lập loè, xoay mòng mòng
như chong chóng là những thứ mà các web designer nên tránh như tránh tà.
Một banner bằng flash giống như một bé mới tập làm web và khoe hết người này người nọ về
tác phẩm mà cậu ta mới làm xong.
Một trang web chuyên nghiệp thì logo và banner nên là dạng hình tĩnh hoặc đơn giản chỉ bằng
chữ. Có nhiều nghiên cứu chỉ ra rằng banner và logo động dạng flash không mạng lại tính
chuyên nghiệp cho trang web của bạn, mà sự thực nó làm điều ngược lại.
6. Bộ đếm số người truy cập – Hit Counter
Đoạn mã này chỉ được dùng bởi những tay mơ, mới bắt tay vào làm web. Bạn đừng bao giờ
dùng đến nó. Bởi vì một host có cấu hình tốt sẽ giúp bạn kiểm tra được thông tin về số người
truy cập là bao nhiêu, họ từ đâu tới, dùng trình duyệt gì, làm sao họ biết đến bạn nhờ công cụ
tìm kiếm nào ...vân …vân … mà một bộ đếm truy cập thông thường chẳng bao giờ làm được
như thế. Đó là chưa kể nó lại còn không chính xác nữa bởi vì mỗi lần có người refresh là nó lại
nhẩy lên môt đơn vị.
Ý tưởng dùng công cụ Hit Counter này xuất hiện đã 8 năm về trước rồi. Thế giới đã đổi thay,

bạn cũng nên vậy.
7. Viết theo văn phong dễ hiểu
Bạn luôn phải nghĩ trong đầu rằng không phải ai lướt web cũng giỏi văn như Nguyễn Tuân, Tố
Hữu … mà trình độ của họ chỉ là trung học hoặc hơn chút. Do vậy bạn nên viết sao cho dễ hiểu,
vào thẳng vấn đề và đừng nên vòng vo tam quốc, trau truốt câu văn bóng bẩy làm gì.
Văn phong bạn viết trên Internet nên ngắn gọn, súc tích và dễ hiểu vì người đọc rất lười đọc
trên mạng. Họ chỉ đọc lướt qua thôi chứ không đọc từng câu từng chữ đâu.

V.Những điều không nên khi thiết kế web:

1. Nên giữ cấu trúc trang web của bạn thật mạch lạc:
Có một vài webmaster muốn thay đổi cách nhìn của trang web vì họ muốn tránh sự nhàm
chán bằng cách thay đổi cấu trúc của trang web ở những trang khác nhau. Ví dụ ở trang chủ thì
thanh menu nằm dọc, sang đến những trang sau thì lại nằm ngang, hoặc vài trang khác lại là
dạng menu trượt …
Người lướt web thích sự mạch lạc, do vậy trang web của bạn cũng nên như vậy. Hãy thử xem
các bản Window đều hao hao giống nhau về cấu trúc mặc dù tính năng thì khác nhau một trời
một vực.
2. Đừng nên dùng Pop up
Pop up có lẽ là một dạng mã làm cho người lướt web cảm thấy khó chịu nhất. Bởi vì người ta
bị ép buộc phải đọc cái mà người ta không muốn đọc. Giống như bạn đang đi đường bị ai đó
ném một tờ giấy vào mặt bắt bạn phải đọc.