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

Ai cũng có thể phạm sai lầm. Đó là việc bình thường đối với con người. Tuy nhiên, trong lĩnh vực thiết kế web, nhiều sai sót chỉ cần điều chỉnh nhỏ vài yếu tố cần thiết là có thể khiến chúng trở nên long lanh. 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 thiết kế 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 phổ biến, bạn có thể cứu vãn được một thiết kế đang sa lầy. Hôm nay, chúng ta sẽ xem xét các lỗi thiết kế web phổ biến mà bất kỳ một web designer nào cũng cần phải trông chừng.

 

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.

Chữ có chân và không có chân

Trong phạm vi của bài viết này, tôi mặc định là người đọc biết thế nào là phông chữ 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.

Số lượng phông chữ

Một lỗi 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.

Thiếu tương phản

Một lỗi 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?

 

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.

 

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ó.

Cố bấu víu vào các giá trị cổ lỗ

Nền công nghiệp thiết kế web 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. 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ế web 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ó.

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.

Bạn có thể tìm đọc thêm về Tỉ lệ vàng và toán học ảnh hưởng tới thiết kế web ở đây.

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 sai lầm 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.

Đối với các khuynh hướng trên ThemeForest

Tất nhiên, khả năng rất cao bạn có thể sẽ trở thành một tác giả trên ThemeForest nếu bạn đang đọc bài viết này. Vì vậy, tôi có một vài mẹo chia sẻ với các bạn, dựa trên 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ế.

–          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.

–          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.

–          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à 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ì!

Theo  Tutsplus