3 quy tắc đơn giản để thiết kế trang web đẹp và chuyên nghiệp

Ba nguyên tắc đơn giản nhưng có thể nâng tầm thiết kế trang web của bạn lên một cấp độ khác và tiết kiệm cho bạn hàng nghìn giờ “đập đi làm lại” website.

Tôi không phải là dân thiết kế và tôi có thể khẳng định với bạn điều đó. Bắt đầu từ  không biết gì, tôi đã tự thiết kế trang web của mình thông qua tìm hiểu quy tắc thiết kế cơ bản. Như một người cầu toàn, tôi thật khó thoả mãn với chính thiết kế của mình cho đến tận bây giờ.

Tuy không được 10 điểm hoàn hảo, tôi cũng thể giúp bạn tự thiết kế trang web chỉ bằng 3 quy tắc đơn giản mà dân thiết kế chuyên nghiệp sử dụng.

Bạn có chấp nhận với 8 điểm thiết kế của tôi? Nếu bạn đồng ý hãy cùng tìm hiểu 3 quy tắc cơ bản nhưng tốn của tôi hàng trăm giờ trải nghiệm.

Quy tắc 1: Đơn Giản Hoá – Tinh tế đến từ sự đơn giản

Design can be art. Design can be simple. That’s why it’s so complicated.

Paul Rand

Bạn có thể giải thích một vấn đề nào đó với mười câu, nhưng chắc chắn bạn bạn sẽ gặp khó khăn khi giải thích nó chỉ với một câu.

Thiết kế cũng vậy, bạn sẽ ngay lập tức gặp khó khăn với thiết kế đơn giản nhưng lại phải truyền tải đầy đủ các thông tin mà người đọc cần. Điều này là không dễ dàng, bởi vì bạn có quá nhiều thứ cần trưng bày cho người đọc xem.

Thật ra ĐƠN GIẢN HOÁ chỉ bao gồm 2 việc mà bạn phải làm:

• Bỏ bớt những cái không cần thiết
• Nhóm những cái tương tự nhau thành một khu vực

BỎ BỚT sẽ khiến bạn có cảm giác khó chịu, tất cả công sức của mình nên được trưng bày trước đọc giả. Tuy nhiên bạn đã lầm, người đọc chỉ muốn đọc cái họ muốn và việc bạn để những thông tin trước mắt họ là một sự phiền toái lớn.

NHÓM những phần tử gần giống nhau hay giống nhau thành một khu vực và trong một layout rõ ràng. Cách làm này sẽ giúp bạn sắp xếp trang web của bạn gọn gàng hơn ngăn nắp hơn hẳn.

Hãy tham khảo website của Apple một đại diện của thiết kế trang web đơn giản hoá.

Một số gợi ý để bạn có thể hướng tới sự đơn giản hoá như:

1. Logo. Logo được tinh giản như một Favicon.
2. Font. Chỉ dùng tối đa 2 font family.
3. Menu. Bạn có thể dùng dạng Mega Menu hay Dropdown Menu để đơn giản hoá.
4. Màu sắc. Bạn chỉ cần dùng tối đa từ 2 đến 5 màu cho toàn bộ website.
5. Call to action. Chỉ nên có tối đa 2 headline call to action trong một trang web

Quy tắc 2: Đồng nhất – Hãy thiết kế trang web một cách chuyên nghiệp

Nếu bạn để ý sẽ thấy rằng bất cứ website có thiết kế tốt đều có một sự đồng nhất từ trên xuống dưới. Từ tạo trang cho đến blog hay social media đều tạo cho bạn cảm giác không lẫn vào đâu được.

Cảm giác đồng nhất rất quan trọng vì nó cho thấy một thiết kế chuyên nghiệp và đáng tin cậy.

Vậy bạn có tự hỏi đâu là điều đem đến cho bạn cảm giác đó?

Câu trả lời là nhờ vào sự lập đi lập lại kiên định của nhiều yếu tố trên website đó. Các yếu tố bao gồm:

1. Bảng màu. Thiết kế được tuân theo một bảng màu (color scheme) duy nhất. Bảng màu được tạo trước khi bạn thiết kế trang web (thường được làm theo màu logo) và nó bao gồm luôn cả thiết kế đồ hoạ. Bạn phải tự cố định màu sắc nằm trong bảng màu từ theme, ảnh minh hoạ cho đến nút bấm. Mọi thứ đều dùng chung một bảng màu.
2. Hình dạng. Nếu bạn chọn sử dụng góc bo tròn, hình tròn, hình vuông hay tam giác thì tất cả phải tuân theo hình dạng đó. Ví dụ, nếu bạn bo tròn nút bấm thì ảnh trong trang web cũng cần bo nhẹ để phù hợp với hình dạng thiết kế chung của toàn bộ website.
3. Font. Bạn đã biết chỉ nên có 2 font tối đa được sử dụng trong toàn bộ website. Ngoài Font family và font style, bạn cần phải chú ý đến Font Size – điều mà nhiều người hay lãng quên khi thiết kế.
4. Ảnh. Phong cách ảnh đồ hoạ đồng nhất. Nếu bạn là hoạ sỹ đồ hoạ thì việc này thật dễ dàng. Bạn có thể tạo cho mình ảnh đại diện như trâu vàng Worl Cup, ông già Noel,… Nếu không phải hoạ sỹ, bạn nên lựa chọn một phong cách ảnh duy nhất như ảnh vector hay ảnh chụp mà thôi.

Tập hợp tất cả những thứ trên sẽ tạo ra cảm giác thiết kế trang web đồng nhất. Chắc chắn bạn sẽ cảm nhận được ngay, và người đọc cũng vậy.

Quy tắc 3: Khoảng lặng – Vô chiêu thắng hữu chiêu

Khoảng lặng hay còn gọi là khoảng trắng rất quan trọng trong thiết kế trang web. Nhiệm vụ chính của khoảng lặng đó là tách biệt khu vực và tăng sự tập trung. Bạn hãy xem một ví dụ của khoảng lặng.

Trong thuật ngữ CSS gọi là lề (margin) và vùng đệm (padding).

Tại sao tôi lại gọi là khoảng lặng? Bởi vì nó giúp bạn nghỉ mắt khi di chuyển từ cụm nội dung này sang cụm nội dung khác hay đơn giản là dừng lại để suy ngẫm về nội dung đó.

Khoảng lặng không hoàn toàn vô nghĩa mà ngược lại cực kỳ quan trọng để giúp thiết kế của bạn trông thật thoải mái dễ chịu. Thực tế là bạn chẳng thêm gì ngoài tạo khoảng không trắng nhưng hiệu quả đem lại rất bất ngờ.

Đặc biệt là sự tập trung vì nó tăng sự chuyển đổi cho website của bạn và đó là vàng.

Điều duy nhất tôi muốn bạn rút kinh nghiệm khi thiết kế ở đây là đứng cố tham lam nhồi nhét quá nhiều thông tin trên màn hình mà quên đi màn hình cũng cần không gian để “thở”.

Tóm lại…

Thiết kế trang web thường khiến các bạn mất rất nhiều thời gian vì chắc chắn bạn sẽ không dễ dàng hài lòng với thiết kế của mình. Đơn giản vì bạn không phải là dân thiết kế, bạn là dân kinh doanh.

Hãy áp dụng ba quy tắc đơn giản này vào tất cả công việc thiết kế bao gồm thiết kế đồ hoạ, thiết kế website, thiết kế landing page và… thiết kế đời sống của bạn.

Đây cũng là ba quy tắc sống của tôi mà tôi đã áp dụng đời sống và công việc của mình, kết quả theo sau đó là ngoài mong đợi. Hãy nghiền ngẫm thêm một chút, bạn sẽ thấy được nhiều điều tuyệt vời hơn bên trong ba quy tắc này.

Quy tắc thì chỉ có 3, nhưng danh sách công việc cần làm thì có thể hơn 30+. Bạn nên phối hợp áp dụng những quy tắc này cùng một lúc thì hiệu quả đạt được sẽ rất ấn tượng. Hãy thử và cảm nhận kết quả ngay trên website của bạn.

Nếu bạn gặp khó khăn gì trong việc áp dụng quy tắc đừng ngại để lại chia sẻ bên dưới, tôi sẽ cùng bạn phân tích vấn đề.