Các lỗi sai phổ biến trong thiết kế website docx

Các lỗi sai phổ biến
trong thiết kế website
Một khi bạn có thể nhận biết được đâu là những lỗi thiết kế website phổ
biến, bạn có thể cứu vãn được một thiết kế đang sa lầy. Bài viết này sẽ cùng
bạn xem xét các lỗi thiết kế website phổ biến mà bất kỳ một web designer
nào cũng cần phải trông chừng
Các lỗi thiết kế website mà bạn thường
hay mắc phải thì dù là nhỏ nhưng cũng để
lại hậu quả khá lớn đến danh tiếng người
thiết kế trong mắt người duyệt web.
Những yếu tố này có thể là việc sử dụng
font chữ (typography) cho tới việc cách
dòng hay là chỉ sai lệch vài pixel thôi cũng có thể giết chết “đứa con tinh
thần” của bạn. May mắn là một khi bạn có thể nhận biết được đâu là những
lỗi thiết kế website phổ biến, bạn có thể cứu vãn được một thiết kế đang sa
lầy. Bài viết này sẽ cùng bạn xem xét các lỗi thiết kế website phổ biến mà
bất kỳ một web designer nào cũng cần phải trông chừng.
Lỗi thiết kế website thứ 1: Sử dụng font chữ (Typography)
 Sử dụng font chữ là một trong những đặc điểm quan trọng nhất của
một bản thiết kế.
 Trong hầu hết các thiết kế, font chữ chiếm diện tích lớn trên trang nên
cần phải sử dụng font gọn gàng với nội dung phù hợp có thể trở thành chìa
khóa để tạo nên một giao diện tiềm năng.
 Có nhiều lỗi sai mới phát sinh hoặc có thể lý giải được mà các nhà
thiết kế mắc phải khiến sự hấp dẫn của font chữ trên trang bị giảm đi.
Lỗi thiết kế website thứ 2: Chữ có chân và không có chân
 Phông chữ có chân tạo ra một cảm giác sang trọng, chắc chắn khi
được dùng trong một trang web, ngược lại sẽ là một cảm giác hiện đại khi
nhà thiết kế sử dụng nhiều loại phông
chữ không chân.
 Tuy nhiên, hai hiệu ứng này

không thể kết hợp với nhau thành một
dạng font mẫu mực khi được sử dụng
đồng thời. Trên thực tế, kết hợp hai
loại font này trong trường hợp bình thường có thể tạo ra một kết quả “lai
ghép” mà thật lòng thì, nhìn không hề đẹp.
 Nói như vậy không có nghĩa là kết hợp chữ có chân và chữ không
chân là không thể. Trên thực tế, nó có hiệu quả khá tốt, đặc biệt là khi các
loại font chữ này được sử dụng ở các lớp hoặc các tầng khác nhau. A list
Apart rất hay dùng phông chữ có chân cho tiêu đề và dùng phông chữ
không chân cho nội dung chính.
Lỗi thiết kế website thứ 3: Số lượng phông chữ
 Một lỗi thiết kế website nghiêm trọng khác mà các nhà thiết kế gặp
phải là sử dụng quá nhiều bộ font khác nhau thay vì chọn theo bộ.
 Dùng nhiều font có thể khiến thiết kế không liền mạch, mà điều này
sẽ phá hỏng khả năng đọc nội dung (readability). Thay vì một nội dung dùng
nhiều font chữ, cố gắng sử dụng một font đơn giản cho mỗi tầng trong hệ
thống cấp bậc thị giác của thiết kế. Hoặc cũng có thể tạo ra một hệ thống
font đẹp hơn và nhìn có hệ thống hơn thay cho một loạt các phong cách ngẫu
nhiên, mỗi chỗ mỗi kiểu.
 Tương tự như vậy, có quá nhiều thay đổi trong cỡ chữ và cách dòng
có thể khiến việc đọc bị gián đoạn và cảm nhận cuối cùng không tốt đối với
người dùng. Hãy giữ cho mọi thứ mạch
lạc và đơn giản.
Lỗi thiết kế website thứ 4: Thiếu
tương phản
 Một lỗi thiết kế website lớn
khác là sự thiếu tương phản giữa font
và background – nền. Điều này có thể
làm cho việc đọc trở nên khó khăn vì người dùng sẽ thấy khó phân biệt giữa
hai mảng màu. Xem ví dụ bên dưới chẳng hạn. Phần nào dễ đọc hơn, bên

trái hay bên phải? Hẳn là bên trái rồi.
 Không có bất kỳ lý thuyết phức tạp nào về việc sử dụng độ tương
phản trong thiết kế. Bạn không nên chọn chữ màu đen trên một nền màu đen
vì bạn không thể nhìn được đâu là phần chữ và đâu là nền. Gợi ý duy nhất ở
đây là bạn nên chọn màu chữ gần với tông màu tương phản nhất so với màu
nền mà không ảnh hưởng đến các yếu tố thẩm mĩ khác để tránh gây thất
vọng cho người dùng cuối. Các theme sẵn có của Ellipsis có những tương
phản rất tốt ở khoảng nội dung phía trên đầu trang. Theo bạn nếu thay bằng
một vệt hồng hoặc một vệt tím ở đó thì liệu có hiệu quả không?

Lỗi thiết kế website thứ 5: Khoảng trắng, lề và khoảng cách
 Chúng ta không còn phải vật lộn với những màn hình máy vi tính nhỏ
nữa (ở đây chúng ta đang nói đến các màn hình máy tính để bàn chứ không
phải màn hình smart phone). Thay vào đó, chúng ta đang chung sống với các
màn hình trên 21 inch và duyệt web với độ phân giải cao hơn HD. Điều này
mang đến cho các nhà thiết kế nhiều đất để thể hiện hơn.
 Tuy nhiên, bạn hoàn toàn
không nên quá lạm dụng khoảng
trắng và lề trong việc nâng cao
tính thẩm mỹ trong thiết kế của
bạn.
Lấy thiết kế của Apple làm ví dụ; họ sử dụng nhiều khoảng trắng để hướng
sự tập trung vào các màu sắc và hành động của những nội dung quan trọng.
Nói như vậy không có nghĩa là bạn nên dùng thật nhiều khoảng trắng,
nhưng các thiết kế của bạn sẽ có lợi hơn khi được dịch chuyển để có tầm
nhìn thoáng hơn cốt để các nội dung khác nhau được phân biệt với nhau dễ
hơn.
 Việc giữ khoảng cách càng nhất quán và cân đối càng tốt trong toàn
bộ thiết kế của bạn ở cả các khoảng trắng bên trong và lề phía ngoài là rất
quan trọng.

Ví dụ, hãy xem xét mô hình dưới đây. Nửa phía dưới nhìn tốt hơn hẳn bởi vì
tất cả các mép lề đều là một khoảng 18px. Mọi thứ đều được liên kết với
một mô hình dạng lưới. Nó có vẻ rõ ràng và mỗi khu vực đều có thể phân
biệt được với nhau, mà
không cần phải bỏ phí bất
kỳ khoảng cách nào.
Lỗi thiết kế website thứ 6:
Hệ thống lưới
 Tương tự như vậy,
lưới là một đặc trưng quan
trọng của hầu hết các nhà
thiết kế web thành công.
 Sử dụng một hệ thống lưới giữ cho mọi thứ có trật tự và giữ cho các
thiết kế nom sạch sẽ với các dòng nhất quán để sử dụng. Thiết kế dựa trên
mô hình lưới làm cho mọi thứ trở nên có tổ chức hơn rất nhiều.
 Phần này không có trong phạm vi bài viết bởi vì lỗi sai chính là khi
bạn không dùng cấu trúc này, bằng cách xem xét nó như một giải pháp nếu
bạn cảm thấy các thiết kế của bạn đang thất bại ở khu vực có sự góp mặt của
nó.
Lỗi thiết kế website thứ 7: Cố bấu víu vào các giá trị cổ lỗ
 Nền công nghiệp thiết kế website có tốc độ phát triển nhanh chóng với
nhiều những đột phá mới xuất hiện một cách nhất quán.
 Một trong những điều tệ nhất có thể phá hủy thiết kế của bạn là tiếp
tục phát triển và thiết kế theo các “mốt” của vài năm về trước. Đây cũng là
một lỗi thiết kế website mà nhiều web designer mắc phải.
Năm 2003, Microsoft Fontpage có một công cụ để “bố trí các bảng” nhưng
không có một lập trình viên tốt nào giờ này còn gan dạ chèn thêm một thẻ
table trong tên của các thiết kế. Giống như vậy, các ảnh GIFs có chuyển
động tuyệt vời kèm với nhạc nền của thập kỷ trước là tuyệt nhiên không thể
chấp nhận được.

 Và cũng đừng nghĩ đến việc sử dụng các khung như một phần trong
thiết kế website của bạn. Tất cả những điều này đều góp phần làm nên hiệu
quả sử dụng (usablility) và các vấn đề khác nữa, và quan trọng là bây giờ
chúng ta không còn sử dụng chúng trong thiết kế web nữa.
 Speider Schneider có một bài viết rất tốt về “Thời kỳ đồ đá của thiết
kế web” cũng đăng trên Tutsplus. Nhớ tham khảo bài viết này như một chỉ
dẫn về các giao diện mà website của bạn không nên có.
Lỗi thiết kế website thứ 8:
Tỷ lệ và kích cỡ
 Các thiết kế của bạn
luôn phải quan tâm đến các
yếu tố góp phần tạo nên hệ
thống như các yếu tố về kích
cỡ và tỷ lệ. Nói một cách đơn
giản, những phần quan trọng nhất nên được thể hiện to nhất và để kích cỡ
giảm dần đối với các nội dung ít quan trọng hơn. Điều này không có nghĩa là
nội dung ít quan trọng nhất chỉ cần ở cỡ 4px mà bạn cần phải tạo ra một lộ
trình hướng tới quy mô của các yếu tố trên trang. Tuy nhiên chúng vẫn phải
đảm bảo có thể thể hiện tốt trên bất kỳ thiết bị nào mà thiết kế của bạn sẽ
được ứng dụng và cũng phải đảm bảo yếu tố dễ nhìn. Nếu tất cả đều phải
xuất hiện ở đó thì chắc chắn là chúng ở đó là có lí do.
 Tất cả điều này bắt nguồn dưới góc nhìn về tính hữu dụng của thiết
kế, trong đó chỉ ra rằng từng chi tiết nhỏ của thiết kế phải được truy cập dễ
dàng mà không cần chú thích, đó là: đừng bắt người dùng phải làm bất kỳ
một thao tác thừa nào ngoài việc nhìn vào một điểm nào đó. Không cần phải
nheo mắt để nhìn, không cần phải phóng to, không phải cố gắng quá mức để
nhấp chuột vào một điểm nhỏ hơn một ngọn cỏ.
 Chắc hẳn bạn đã nghe nói đến tỉ lệ thần thánh hay “tỉ lệ vàng”. Tuy
nhiên không phải mọi thiết kế đều cần tuân thủ quy tắc này, nhưng các thiết
kế được coi là chuẩn thì có lẽ cần cố gắng bằng mọi giá. Tỉ lệ từ 1 đến 1.62

(ở dạng làm tròn) thường được coi là tỉ lệ vàng và không chỉ được sử dụng
trong thiết kế web mặc dù chúng ta có ưu thế hơn khi dùng nó.
 Tỉ lệ vàng thể hiện sự cân bằng trong một thiết kế web vì con người
chúng ta quen với nó, tỉ lệ từ khuỷu tay đến bàn tay là 1 đến 1.62 cũng giống
như nụ cười của con người. Tìm một người hấp dẫn cũng có thể xuất phát từ
tỉ lệ vàng, đó là lý do chúng ta cảm thấy tỉ lệ này có vẻ “tự nhiên”. Giữ các
yếu tố chỉ cân bằng ở mức đó sẽ khiến một thiết kế web có hiệu quả sử dụng
cao hơn vì nó tạo ra cảm giác tự nhiên cho người dùng.
Lỗi thiết kế website thứ 9: Quên đi mục đích của việc bạn đang làm
 Khi thiết kế mà quên mất mục tiêu của thiết kế luôn là một lỗi thiết kế
website tồi tệ. Nếu bạn đang thiết kế cho một website thương mại điện tử và
bạn có ý tưởng kiệt xuất cho một thanh trượt mà không liên quan đến bản
thân dự án, thì đừng cố đưa nó vào chỉ vì bản thân nó thú vị.
 Tương tự như vậy, nếu bạn có thói quen sử dụng menu dạng thả
xuống và phải dành rất nhiều thời gian để làm nhưng việc này thực ra chỉ
làm giảm tính tiện dụng của trang web, đừng dùng nó. Đừng để bị phân tâm
bởi những thứ khác, chỉ sử dụng những gì tối cần thiết cho thiết kế của bạn.
Quay lại với thông lệ, xem xét kỹ xem thiết kế hiện tại có phù hợp với mục
tiêu không, nếu không, hãy ngồi cân nhắc lại.
Lỗi thiết kế website thứ 10: Đối với các khuynh hướng trên
ThemeForest
 Một vài mẹo chia sẻ về các yếu tố phổ biến mà đội kiểm duyệt thường
sử dụng để lựa chọn thiết kế bao gồm
o Chiều cao của dòng (cách dòng) – từ điển wiki gợi ý rằng quá
nhiều các mẫu thiết kế đã được đưa ra không có tỉ lệ cách dòng hay khoảng
cách tốt. Khoảng cách dòng rộng rãi từ 1.3 đến 1.6 em sẽ không chỉ mang lại
cho thiết kế của bạn tính sử dụng cao hơn mà còn khiến nó nhìn gọn gàng
hơn. Dùng đơn vị “em” để đo cách dòng cũng giúp giữ cho nó ở trong tỉ lệ
cân đối với văn bản của bạn.
o Hệ thống phân cấp thị giác – như đã đề cập ở trên, có một hệ

thống phân cấp thị giác đủ mạnh và có thể phân biệt được sẽ là một lợi thế vì
hệ thống phân cấp chỉ ra rằng nó giúp người dùng xác định được họ nên đọc
cái gì trước và sau đó có thể chủ động kéo chuột xuống phía dưới. Điều này
có thể đặc biệt hữu dụng trên các trang muốn bán hàng vì nó giúp thu hút sự
chú ý của người đọc tới một yếu tố xác định trên trang.
Ví dụ như những điều thú vị mà một sản phẩm nào đó có thể mang lại hay là
những bức ảnh được ghi lại cẩn thận trong khi những thông tin ít hấp dẫn
hơn – như là giá cả – bị giấu đi một chút.
o Tương thích với các trình duyệt – Một trong những điều tệ nhất
bạn có thể mắc phải là bỏ lỡ một phần công chúng mục tiêu của trang web
với việc một website không hoạt động được trên trình duyệt mà họ lựa chọn.
Sẽ xảy ra trường hợp người dùng sẽ rời khỏi trang thay vì dành thời gian vô
ích khi họ cố gắng vào sâu hơn qua thiết kế. Phải chắc chắn là, tối thiểu, tất
cả các trình duyệt hay sử dụng nhất luôn được khuyến khích và các thử
nghiệm thích hợp nên được đảm bảo kỹ. Nếu bạn không dùng một chiếc
Macbook, tìm đến một cửa hàng Apple và thử trang của bạn trên đó nếu điều
đó góp phần làm cho thiết kế cuối cùng của bạn nhìn đẹp hơn.
 Hy vọng là sau khi đọc 10 lỗi thiết kế website mà 1 web designer
thường hay mắc phải trên là bạn đã có thêm một số bài học về những gì bạn
không nên làm. Hãy trở về trang chủ bạn đang làm và khám phá xem bạn
nên thực sự làm những gì!