Các lỗi thiết kế website thường gặp phải và cách khắc phục 63
Webmaster

Các lỗi thiết kế website thường gặp phải và cách khắc phục

Trong thời đại số ngày nay, số lượng trang web ngày càng gia tăng, vì vậy việc sai sót trong quá trình thiết kế sẽ khó tránh khỏi. Bài viết này dựa trên nghiên cứu gần đây của các nhà phát triển trang web Tilda. Họ đã phân tích những lỗi phổ biến mà mọi người mắc phải khi thiết kế trang web. Hãy cùng iDesign tìm hiểu những lỗi thường gặp và cách khắc phục để giúp cho công việc thiết kế web trở nên tốt hơn!


A. Những lỗi thiết kế trang landing page phổ biến cần tránh


1. Nội dung không được chia thành các khối hợp lý

Người dùng sẽ dễ dàng tiếp nhận thông tin hơn nếu bố cục nội dung được nhóm thành các khối hợp lý. Thiết lập padding từ 120 px -180 px và tách các khối văn bản bằng cách sử dụng nền màu.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 64

Phần padding giữa các khối thông tin có khoảng cách không hợp lý, thông tin này khó tiếp nhận và không rõ văn bản nào thuộc nhóm nội dung nào. Do đó, thiết kế này cần các khối màu để phân chia nội dung
Các lỗi thiết kế website thường gặp phải và cách khắc phục 65
Padding hợp lý và các khối được phân tách bằng màu sắc, điều này làm nội dung rõ ràng hơn – mỗi khối chứa các loại nội dung khác nhau

2. Khoảng cách không đồng đều giữa các item trên trang web

Các khối nên có khoảng cách đồng đều. Nếu không, trang của bạn sẽ trông lộn xộn khiến người dùng khó tiếp cận nội dung.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 66
Khoảng cách có độ rộng không đồng đều khiến nội dung thông tin rời rạc với tiêu đề.
Các lỗi thiết kế website thường gặp phải và cách khắc phục 67
Không gian được sắp xếp hợp lý, nội dung thông tin liên kết với tiêu đề mang đến sự logic.

3. Padding quá nhỏ khiến người dùng không thể chia nội dung thành các khối

Để tránh các phần trộn lẫn vào nhau, hãy phân tách và thêm một khoảng trống (ít nhất là 120 px) giữa chúng.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 68
Padding quá hẹp và các khối quá gần nhau. Điều này khiến trang quá tải nội dung và khó hiểu cho người dùng. Người truy cập trang web có thể bị nhầm lẫn các thông tin.
Các lỗi thiết kế website thường gặp phải và cách khắc phục 69
Padding đủ rộng để người dùng có thể nhận thấy sự khác biệt giữa hai khối

4. Tránh độ tương phản thấp cho văn bản trên ảnh nền

Trang web cần có đủ độ tương phản giữa văn bản và nền. Để làm cho văn bản nổi bật, hãy thêm một bộ lọc tương phản trên hình ảnh. Màu đen là màu phổ biến nhưng bạn cũng có thể sử dụng màu sáng và kết hợp chúng một cách hài hoà.

Một cách khác là sử dụng hình ảnh tương phản từ đầu và đặt văn bản lên trên phần tối của bức ảnh.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 70
Hình ảnh quá sáng, khiến việc đọc văn bản khó khăn
Các lỗi thiết kế website thường gặp phải và cách khắc phục 71
Một bộ lọc được áp dụng giúp văn bản dễ đọc

5. Quá nhiều kiểu chữ trên một trang

Quá nhiều kiểu chữ và thiết kế khiến trang web trông không chuyên nghiệp và khó đọc. Để tránh điều này, hãy giới hạn một font chữ duy nhất và hai tùy chọn kiểu chữ như Regular (kiểu thường), Bold (kiểu in đậm).

Các lỗi thiết kế website thường gặp phải và cách khắc phục 72
Do sử dụng quá nhiều kiểu chữ khiến người dùng khó phân cấp nội dung quan trọng.
Các lỗi thiết kế website thường gặp phải và cách khắc phục 73
Một font chữ, một màu và hai kiểu chữ. Tối ưu hoá kiểu chữ giúp trang web gọn gàng và rõ ràng

6. Màu nền phân tách không hợp lý

Tránh dùng màu sắc để nhấn mạnh các yếu tố trên trang, nó làm giảm tính thẩm mỹ của trang web. Ví dụ, các tiêu đề được phân cấp tốt bằng kích thước, kiểu chữ và padding. Nếu bạn muốn làm nổi bật một nội dung cụ thể, hãy sử dụng màu nền cho toàn bộ khối, bao gồm tiêu đề và phần văn bản có nội dung liên quan.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 74
Các tiêu đề được đặt trên nền màu sẽ phá vỡ tính liên tục của trang và trông giống như các yếu tố độc lập, riêng biệt
Các lỗi thiết kế website thường gặp phải và cách khắc phục 75
Cả tiêu đề và văn bản liên quan đều có chung một màu nền. 

7. Quá nhiều chữ trong một cột

Nhiều chữ trong một cột sẽ gây ra cảm giác khó đọc, vì người dùng truy cập trang web phải đọc từ dòng này sang dòng tiếp theo. Thêm vào đó, nó cũng làm giảm tính thẩm mỹ của trang. Tốt nhất là giảm bớt số lượng cột và rút ngắn văn bản.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 76
Nhiều chữ trong một cột gây khó đọc cho người dùng
Các lỗi thiết kế website thường gặp phải và cách khắc phục 77
Sẽ dễ đọc hơn nếu hạn chế số lượng chữ trong từng cột

8. Quá nhiều chữ ở phần trung tâm

Phần trung tâm trang web không nên có nhiều chữ, nếu không người dùng khó có thể điều hướng hiệu quả. Đồng thời, nên tăng kích thước font chữ từ 24 pixel trở lên.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 78
Các văn bản dài, khó tập trung để đọc
Các lỗi thiết kế website thường gặp phải và cách khắc phục 79
Một văn bản ngắn dưới một tiêu đề (phần trung tâm) trông trang web tốt hơn

9. Văn bản chồng lên trên một phần thiết yếu của hình ảnh

Tránh để văn bản che các phần có ý nghĩa hoặc các chi tiết quan trọng của hình ảnh. Điều đó vừa khiến hình ảnh của bạn bị che khuất, vừa làm văn bản của bạn trở nên khó đọc hơn. Hãy thử các vị trí khác nhau như căn giữa hoặc căn chỉnh văn bản sang trái hoặc đặt chúng theo chiều dọc.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 80
Tiêu đề che khuất khuôn mặt của người phụ nữ, đồng thời gây khó đọc cho văn bản. 
Các lỗi thiết kế website thường gặp phải và cách khắc phục 81
Hình ảnh và văn bản dễ đọc, mang đến bố cục tốt cho trang web

10. Sử dụng hệ thống phân cấp thị giác phù hợp

Phân cấp thông tin rõ ràng trên trang, ví dụ, tiêu đề trên trang bìa phải lớn hơn các tiêu đề còn lại hoặc ít nhất là cùng kích thước.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 82
Tiêu đề chính nhỏ hơn tiêu đề phụ khiến người dùng khó phân cấp thông tin, gây nhầm lẫn. 
Các lỗi thiết kế website thường gặp phải và cách khắc phục 83
Tiêu đề chính lớn hơn tiêu đề phụ giúp toàn bộ trang trông nhất quán.

Nguyên tắc này áp dụng cho cả hệ thống phân cấp thị giác trong một khối nội dung. Tiêu đề chính phải là yếu tố thiết kế lớn nhất, tiêu đề phụ sẽ nhỏ và ít nổi bật hơn. Tiếp theo, các tiêu đề tính năng phải nhỏ đáng kể so với tiêu đề trước và có cùng độ đậm. Các font chữ nhỏ nhất nên được sử dụng cho phần mô tả.

Điều này sẽ giúp người dùng phân biệt thông tin theo thứ tự quan trọng.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 84
Trong trường hợp này, phần tiêu đề tính năng phía dưới ít quan trọng hơn nhưng lại lớn hơn tiêu đề chính
Các lỗi thiết kế website thường gặp phải và cách khắc phục 85
Tiêu đề là yếu tố nổi bật nhất trên trang và mặc dù các tiêu đề tính năng được viết bằng cỡ nhỏ hơn, chúng vẫn hiển thị rõ ràng .

11. Nhóm các hình ảnh và văn bản liên quan thành khối

Hình ảnh hoặc bộ ảnh và văn bản liên quan cần được nhóm thành một khối độc lập, riêng biệt. Nếu bạn thêm phần padding xung quanh, văn bản và hình ảnh sẽ mang đến một tổng thể hợp lý.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 86
Hình ảnh tách biệt khỏi tiêu đề khiến nội dung rời rạc
Các lỗi thiết kế website thường gặp phải và cách khắc phục 87
Hình ảnh sẽ liền mạch với văn bản và tiêu đề giúp cho bố cục hợp lý.

12. Tiêu đề quá lớn và dài

Một font chữ rất lớn chỉ hoàn hảo cho một câu ngắn. Nếu tiêu đề dài, nên sử dụng font chữ kích thước nhỏ hơn. Nó sẽ dễ đọc và để lại nhiều không gian cho các yếu tố thiết kế khác trên trang.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 88
Một tiêu đề quá lớn chiếm toàn bộ bìa, trong khi các yếu tố thiết kế khác thiếu không gian khiến tiêu đề khó đọc
Các lỗi thiết kế website thường gặp phải và cách khắc phục 89
Thiết kế tốt giúp tất cả các yếu tố cân bằng với nhau và văn bản dễ đọc

13. Sử dụng sai kiểu border

Border chỉ cần thiết cho một button trong suốt. Thêm một đường viền cho button khiến các màu sắc tranh chấp với nhau và gây khó khăn cho việc đọc.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 90

14. Sử dụng quá nhiều màu sắc

Sử dụng quá nhiều màu sắc trên một trang gây khó hiểu và không rõ phần nào quan trọng hơn. Một hoặc hai màu là đủ để làm nổi bật cho những gì thực sự quan trọng.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 91
Có quá nhiều màu sắc tươi sáng trên trang
Các lỗi thiết kế website thường gặp phải và cách khắc phục 92
Một màu vẫn tạo ra sự thu hút và không làm sao lãng nội dung của trang

15. Menu quá tải thông tin

Mọi người truy cập các trang web để tìm giải pháp cho vấn đề của họ. Hãy thiết kế menu tối ưu để giúp mọi người điều hướng trang web và tìm thấy những gì họ cần một cách nhanh chóng và dễ dàng. Đặt 5 – 7 mục trong một menu sẽ giúp tranh web tránh quá tải thông tin.

Các lỗi thiết kế website thường gặp phải và cách khắc phục 93
Menu này mang quá nhiều thông tin, khiến việc điều hướng trang web trở nên khó khăn hơn
Các lỗi thiết kế website thường gặp phải và cách khắc phục 94
Một menu đơn giản giúp tìm kiếm những gì bạn cần dễ dàng

Biên tập: Thao Lee
Nguồn: tilda

Avatar of Bình Minh

Tui là Nguyễn Xuân Bình Minh

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.