Nhận biết 10 lỗi sai trong thiết kế web

1. Sử dụng font chữ (Typography)

Đối với một bản thiết kế web đẹp thì điều quan trọng nhất và không thể thiếu là cách sử dụng font chữ . Sự hiện diện của font chữ chiếm rất nhiều diện tích trên trang web nên cần phải sử dụng font một cách tinh tế và phù hợp với nội dung để có thể khiến cho giao diện trở nên hấp dẫn và thu hút. Các nhà thiết kế rất hay mắc phải những lỗi sai khiến cho sự hấp dẫn của font chữ trên trang web bị mờ nhạt, hay thậm chí còn mất đi vẻ hấp dẫn.

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

Phông chữ có chân, là phông chữ có gạch dưới chân mỗi chữ. Loại phông chữ này có thể tạo ra một cảm  chắc chắn, an toàn và cổ điển khi được dùng trong một trang web, ngược lại với phông chữ này là phông chữ không chân. Phông chữ không chân đem lại một cảm giác hiện đại hơn. Nhưng, hai hiệu ứng này không thể kết hợp với nhau thành một dạng font chữ quy chuẩn để được sử dụng cùng một lúc.

Phoong Serif Font
Phoong Serif Font

Và thực chất, nếu ta có kết hợp hai loại font thì ta vẫn có thể tạo ra một kết quả được cho là “lai ghép” giữa hai font, cuối cùng thì có làm ra, font chữ ấy cũng không thể hấp dẫn.

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ể. Thực ra thì, 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. 

3. Số lượng phông chữ

Các nhà thiết kế rất hay mắc phải một lỗi giống nhau đó là sử dụng quá nhiều bộ font khác nhau thay vì chọn theo bộ. Nếu sử dụng nhiều loại font chữ khác nhau sẽ khiến cho bản thiết kế trở nê rời rạc, không có liên kết, điều này sẽ phá hỏng khả năng đọc nội dung. 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.

4. Thiếu tương phản

Sự thiếu tương phản giữa font và background – nền là một lỗi cơ bản mà các nhà thiết kế thường hay gặp phải. Sự thiếu tương phản này sẽ làm cho việc đọc trở nên khó khăn vì người dùng rất khó để có thể phân biệt được hai mảng màu ấy. Chúng ta có thể nhìn ví dụ phía bên dưới. Và dễ dàng nhận thấy được bên trái là phần dễ đọc hơn.

Thực tế thì không hề có lý thuyết bài bản nào về việc sử dụng sự tương phản hay độ tương phản trong thiết kế ra sao. 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. Và đương nhiên, nếu bạn thay bằng một vệt hồng hoặc một vệt tím, thì nó sẽ không đem lại hiệu quả.

Thực tế thì không hề có lý thuyết bài bản nào về việc sử dụng sự tương phản hay độ tương phản trong thiết kế ra sao
Thực tế thì không hề có lý thuyết bài bản nào về việc sử dụng sự tương phản hay độ tương phản trong thiết kế ra sao

5. Khoảng trắng, lề và khoảng cách

Ngày nay, với những chiếc vi tính để bàn của chúng ta thì, màn hình của nó rất to và chuẩn hệ màu. Đó là đối với những màn hình trung bình, chưa kể đến những màn hình có giá cao hơn, những loại màn hình mà chúng ta đang chung sống là các màn hình trên 21 inch và duyệt web với độ phân giải cao hơn HD. Với những loại màn hình này thì các nhà thiết kế tha hồ mà sáng tạo và thể hiện bản lĩnh của mình. Nhưng, không phải vì thế mà bạn lại lạm dụng khoảng trắng và lề trong việc nâng cao tính thẩm mỹ trong đối với thiết kế của bạn.

Chúng ta hãy 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. Nhưng không phải vì thế mà bạn bắt trước và dùng thật nhiều khoảng trắng, mà bạn phải biết tận dụng những khoảng trắng đó để sao cho thiết kế của mình có tầm nhìn thoáng hơn, giúp cho các nội dung khác nhau có thể được phân biệt dễ hơn.

Sự cân đối và thống nhất trong việc giữ khoảng cách đối với 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.

Khoảng trắng, lề và khoảng cách

Top 5 thiết kế logo trang phục thể thao đẹp mắt.

6. Hệ thống lưới

Hệ thống lưới là đứa con tạo nên sự thống nhất và thành công của một trang web. Việc sử dụng một hệ thống lưới đẹp và chuẩn, sẽ giúp cho trang web của bạn được ngay ngắn, mọi thứ có trật tự và quy chuẩn với sư căn chỉnh rất chính xác. 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ó.

Hệ thống lưới

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

Hiện nay, tốc độ phát triển của nền tảng thiết kế web là rất cao với nhiều những đột phá mới xuất hiện một cách nhất quán. Và điều tồi tệ nhất sẽ phá hủy thiết kế của bạn chính là học theo và phát triển thiết kế theo các “mốt” của những 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ó.

Thiết kế Bao bì

8. Tỷ lệ và kích cỡ

Tỷ lệ và kích cỡ là những yếu tố vô cùng thiết yếu trong tất cả các thiết kế của bạn. Theo một cách dễ hiểu hơn thì những phần quan trọng và là đầu mối thì bạn nên thể hiện nó to nhất rồi để kích cỡ giảm dần đối với các nội dung ít quan trọng hơn. Nhưng không phải là những nội dung ít quan trọng hơn, bạn lại để nó ở cỡ 4px, mà là bạn phải suy nghĩ và tạo ra được cho mình 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.

Mọi thứ đều 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ỏ.

“Tỉ lệ vàng” hay còn gọi là tỉ lệ thần thánh mà ai cũng ít nhất một lần được nghe thấy. Nhưng không tất cả những bản thiết kế nào cũng đề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à kích cỡ

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.

9. Quên đi mục đích của việc bạn đang làm

Bạn hãy luôn luôn nhớ đến mục tiêu thiết kế của mình mỗi khi làm thiết kế. Bởi vì, khi bạn đang thiết kế cho một website thương mại điện tử nhưng bạn có ý tưởng sáng tạo rất mãnh liệt cho một thanh trượt mà không liên quan đến bản thân dự án, thì đừng cố gắng đưa nó vào chỉ vì mình thấy nó đẹp và hấp dẫn. Hoặc, trong thiết kế bạn có một 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ó.

Bạn hãy cố gắng tập trung hết mức có thể, chỉ sử dụng những gì thật sự cần thiết cho thiết kế cũng như dự án của bạn. Trở lại với hiện thực, bạn hãy cân nhắc kỹ xem thiết kế hiện tại của mình có phù hợp với mục tiêu không, nếu không, hãy chỉnh sửa lại chúng.

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

Chắc hẳn rằng, bạn đang đọc bài viết này rất có khả năng bạn đang là một tác giả trên ThemeForest. Chính vì thế, tôi có một vài mẹo chia sẻ với bạn như sau, dựa theo 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ì!

Contact Me on Zalo