13 Mẹo Nhỏ GIúp Bạn Thiết Kế Trang Web Đẹp

01/ Sử dụng lớp phủ màu trên hình ảnh có văn bản

Đôi khi bạn sẽ phải làm việc với một số hình ảnh xấu ghê. Hãy thử sử dụng chúng làm nền thay vì làm tiêu điểm chính bằng cách overlay màu của brand lên hình ảnh với setting semi-opaque. Điều này sẽ cho bạn độ tương phản cần thiết để làm nổi cho phần văn bản dễ đọc được. Trong ví dụ dưới đây, tôi cũng áp dụng bóng đổ màu xanh lam đậm cho văn bản để tăng thêm độ tương phản.

02/ Tránh để quá nhiều khoảng trống để thiết kế trang web đẹp

khi có quá nhiều khoảng trống giữa các phần tử thuộc về nhau, mắt người sẽ mất tập trung và rơi vào khoảng trống thay vì dễ dàng di chuyển qua các phần tử được kết nối.

03/ Sử dụng số ký tự vừa phải

Theo data về website analytics thì chúng ta có rất ít thời gian để thu hút sự chú ý của người dùng. Vào thẳng vấn đề nhé.

04/ Ngay cả những thiết kế chỉ dùng văn bản cũng nên được trâu chuốt cho thật hấp dẫn

Các phần chỉ gồm văn bản của landing thường sẽ khó thiết kế hơn, đặc biệt nếu bạn không có cơ hội hoặc nguồn lực để sử dụng hình ảnh minh họa. Nếu vậy, hãy tập trung vào màu sắc thương hiệu và chi tiết kiểu chữ để nâng tầm thiết kế của bạn thật nhanh chóng.

05/ Icon làm nhỏ thôi

Các bạn cũng nên chú ý khi làm việc với icon. Icon về bản chất hiển nhiên rất đơn giản và thường đóng vai trọ phụ họa. Nếu các bạn để icon quá to thì tổng thể trông sẽ rất kỳ cục. Đồng thời, khi sử dụng icon chung với tiêu đề, bạn tất nhiên sẽ muốn tiêu đề của mình nổi bật hơn rồi.

06/ Tránh lạm dụng letter spacing

Chúng ta có thể sử dụng khoảng cách giữa các chữ cái để cải thiện văn bản một cách tinh tế, với những bạn không có nhiều kinh nghiệm về typography, hãy chỉ thêm một chút khoảng cách giữa các chữ cái vào tất cả các tiêu đề viết hoa của mình. Việc thêm khoảng cách giữa các chữ cái vào văn bản không viết hoa có thể tạo ra nhiều vấn đề về khả năng đọc, cũng như phá vỡ nhịp điệu tự nhiên của thiết kế kiểu chữ.

07/ Hãy để ý độ dài của các dòng văn bản trong FAQs

Phần FAQ thường sẽ là phần có nhũng dòng chữ với độ dài thường thượt. Độ dài dòng tối ưu nên từ 45 đến 75 ký tự, bao gồm cả dấu cách và dấu chấm câu.

08/ Hãy cho tôi thấy giá trị tôi sẽ nhận được

Trong ví dụ này, phần giới thiệu giá trị của sản phẩm bị ẩn trong phần phụ đề khá khó đọc. Ngoài ra, khi ta thêm vào một vài khuôn mặt ví dụ người dùng thực tế, độ uy tín và xác thực cũng sẽ được đề cao.

09/ Không ai thích text nhỏ xíu cả

Trong ví dụ này, kiểu chữ web tùy biến đã được sử dụng trong CSS, tạo ra các kịch bản trong đó phần nội dung body là 11px và link điều hướng là 9px. Mặc định kích thước phông chữ 16px của trình duyệt đã qua 20 năm rồi - hãy sử dụng các phông chữ hiện đại được thiết kế cho màn hình và bắt đầu phần body ở 18–20px.

10/ Luôn luôn là số lẻ

Bố cục thường sẽ có hiệu quả mạnh mẻ hơn khi có số thành phần là số lẻ. Nếu bạn có 4 ý cần nói, hãy cố gắn gói gọn thành 3 thành tố thôi. Hãy thận trọng khi đi đến 5 ý trong một bố cục như ví dụ bên dưới, vì nó người dùng sẽ cảm thấy bị quá tải.

11/ Quản lý page có nhiều nội dung

Kết hợp và giảm thành phần trên page nếu có thể. Tạo sự tương phản về kích thước giữa tiêu đề và phần thân văn bản để tạo sự phân cấp nội dung, và sử dụng negative space để tạo ra trải nghiệm êm dịu hơn khi bạn có nhiều nội dung.

12/ Dùng màu sáng để nhấn mạnh

Sử dụng màu sáng trong các khu vực rộng lớn sẽ khiến bạn gặp phải các vấn đề về độ tương phản, có khả năng không đạt yêu cầu trợ năng cơ bản cho văn bản của bạn. Trên các phần tử nhỏ hơn như nút, có thể bạn sẽ cần tránh văn bản màu trắng.

13/ Hãy để ý độ tương phản của văn bản màu xám

‍Sử dụng văn bản màu xám là một kỹ thuật phổ biến để tạo thứ bậc giữa các phần tử văn bản. Nhưng điều này thường dẫn đến các vấn đề nghiêm trọng về khả năng tiếp cận với văn bản thiếu độ tương phản. Hãy tăng độ tương phản bằng kích cỡ phông chữ nếu bạn cần thiết lập một hệ thống phân cấp trực quan rõ ràng hơn.

Theo UXplanet