10 ĐIỀU CẦN CHÚ Ý TRONG MỌI DỰ ÁN THIẾT KẾ WEB
Bài viết thực hiện bởi ad dpiCENTER
Ngày đăng 06/09/2023
Share

Đối với thiết kế web, bạn có một cuốn sổ tay những điều cần chú ý hay không? Có một vài quy tắc áp dụng khá nhiều trong hầu hết các dự án thiết kế web – chúng ta hãy tạm gọi chúng là “những điều răn khi thiết kế web”.

Không cần biết trang web bạn thiết kế lớn hay nhỏ như thế nào, những quy tắc này là nền tảng cho một thiết kế tốt. Nếu bạn tuân thủ chúng với những sự chỉ dẫn cơ bản, và biến chúng thành một phần không thể thiếu trong mỗi dự án của mình từ khi bắt đầu, bạn sẽ tránh được nhiều sai lần mà nhiều nhà thiết kế mắc phải!

  1. Luôn luôn nhất quán

1

Hãy khiến thiết kế của bạn càng dễ tương tác với người dùng càng tốt

Thiết kế nhất quá là thiết kế dễ hiểu và dễ sử dụng. Những điểm thu hút và hành động của người dùng, cũng như những phương tiện hình ảnh, nên có một vẻ ngoài như nhau xuyên suốt cùng một thiết kế duy nhất.

Điều này có nghĩa rằng những nút chức năng trong trang web có cùng một màu và sử dụng cùng một kiểu hướng dẫn sử dụng để giúp người dùng biết cách tương tác như thế nào, những tiêu đề ở cùng một kích cỡ và sử dụng một kiểu chữ trong cả thiết kế, và những thành phần như màu sắc cần tuân thủ theo một bảng màu có thể nhận biết được và gắn liền với thương hiệu.

Những thành phần hình ảnh khác cũng nên tuân theo cùng một phong cách nhất quán và kế hoạch sử dụng cũng những thành phần đó như icon, ảnh chụp, đoạn video hoặc hình minh họa. Thiết kế nên có một tiếng nói riêng được sử dụng cho những khối nội dung phù hợp với thẩm mỹ chung của trang web.

Tất cả những yếu tố nhất quán đó sẽ đóng góp vào tính hữu dụng tổng thể, khiến thiết kế của bạn dễ tương tác hết sức có thể với người dùng.

  1. Sử dụng hợp lý không gian trống

2

Những khoảng trắng xung quanh những thành phần thiết kế có thể giúp tạo ra sự tách biệt và khiến chúng dễ đọc hơn.

Không cần thiết phải nhồi nhét từng mẩu nội dung vào mọi khoảng không gian của trang web. Hãy sử dụng những không gian trống để thiết lập âm điệu và sự trôi chảy, tạo ra thứ bậc về mặt hình ảnh và giúp người xem di chuyển dễ dàng xuyên suốt thiết kế.

Nếu họ thích nội dung của bạn, họ sẽ tiếp tục duyệt sang phần tiếp theo.

Và những khoảng trống có thể thực sự giúp khuyến khích hành vi tương tác của người xem bằng việc để tầm mắt của họ hướng xuống phần dưới trang web.

Không gian trống thậm chí còn quan trọng hơn nữa khi áp dụng trên những màn hình ngày càng nhỏ hơn. Những khoảng trắng bao quanh những mẩu nội dung giúp tạo ra sự tách biệt và khiến chúng dễ đọc hơn. (Hãy nghĩ về lợi ích mà những không gian trống này có thể mang lại khi cuối cùng chúng giúp cho việc nhấn những nút chức năng của trang web dễ dàng hơn.)

Bạn không chắc rằng nên thêm những khoảng không gian trống vào đâu trong thiết kế của mình? Hãy bắt đầu với những gợi ý sau:

  • Xung quanh những nút chức năng hay những thành phần tương tác được
  • Khoảng trắng giữa các dòng text để khiến chúng dễ đọc hơn
  • Giữa những nội dung mà nội dung dễ dàng tách biệt với nhau, ví dụ như hình ảnh được nhúng trong những khối text
  • Trong những trường của biểu mẫu để có thể dễ dàng chọn chúng trên màn hình các thiết bị di động
  • Xung quanh bất cứ thành phần nào bạn muốn người xem tập trung vào
  1. Sử dụng một khung lưới

3

Khung lưới là nền tảng tạo nên trải nghiệm của người dùng. Khi bạn thiết kế với một khung lưới, website cuối cùng sẽ chính xác hơn, nhất quán hơn và những thành phần thiết kế được sắp xếp theo một thứ tự hợp lý hơn.

Khung lưới được tạo ra theo cả chiều ngang và dọc, mặc dù khung lưới nổi tiếng nhất dành cho thiết kế website có thể là 12 cột dọc sử dụng khi căn chỉnh các thành phần của thiết kế.

Khung lưới là thứ gì đó chỉ bạn có thể nhìn thấy trong suốt quá trình thiết kế và nếu bạn gặp phải rắc rối khi tìm kiếm giải pháp thay thế cho một thành phần thiết kế nào đó hoặc tạo ra một phác thảo có tổ chức, khung lưới sẽ là kẻ cứu mạng bạn.

  1. Đừng quên mô hình trải nghiệm của người dùng

4

Người dùng web trải nghiệm website theo những cách nhất định và kì vọng một số thứ cụ thể trong thiết kế của bạn. Để có được tỷ lệ thành công cao nhất có thế, thiết kế của bạn nên sử dụng mô hình trải nghiệm người dùng được chấp nhận một cách phổ biến (áp dụng giải pháp cụ thể cho những vấn đề của thiết kế) để mà người ta biết một cách chính xác thiết kế sẽ thực hiện chức năng như thế nào.

Mô hình trải nghiệm người dùng bao gồm:

  • Thứ tự của thông tin trong các biểu mẫu, bắt đầu với một cái tên hay địa chỉ email và kết thúc với nút “submit”
  • Vị trí của menu điều hướng
  • Vị trí và tính chất có thể click vào của biểu tượng giỏ hàng dành cho những trang thương mại trực tuyến
  • Cách mà thông báo hoạt động
  • Các biểu tượng dành cho tìm kiếm và chat, và những thứ khác

Mô hình thiết kế trải nghiệm người dùng có một danh sách dài mô hình người dùng cho tất cả những tình huống thiết kế khác nhau

  1. Sự tương đồng trong những hành vi trải nghiệm người dùng

5

Mỗi thành phần trong thiết kế trang web nên trông giống mọi thành phần cùng loại còn lại trong website. Những thành phần này nên có một nhận dạng về mặt hình ảnh để người dùng biết được chúng là gì và chúng có chức năng gì mà chỉ cần nhìn qua.

Có rất nhiều hành vi trải nghiệm người dùng có thể xây dựng thành thiết kế vì thế tuân thủ theo quy tắc Gestalt về sự tương đồng là điều bắt buộc phải làm. Việc nhóm những thành phần hình ảnh và hành vi để chúng dễ nhận dạng sẽ giúp tạo ra một trải nghiệm nói chung tốt hơn cho người dùng.

  1. Cần lựa chọn kiểu chữ tốt

6

Hãy thử đứng xa thiết kế của mình và nhìn nhận liệu text trong thiết kế có dễ đọc ở một khoảng cách nhất định hay không.

Bạn không cần phải là một nhà nhiếp ảnh đẳng cấp, nhưng việc đó chắc chắn có ích.

Một phần không nhỏ đóng góp vào một thiết kế tốt nằm ở khả năng đọc và tính dễ đọc của nó. Và những điều này phụ thuộc vào cách mà bạn lựa chọn và sử dụng font chữ cho thiết kế của mình.

Khi bạn bối rối không biết phải lựa chọn như thế nào, hãy thử một cặp font chữ đơn giản như kết hợp một font dạng sans và một font dạng sans serif. Hãy tạm đứng cách xa thiết kế của mình và nhìn xem những kí tự có dễ đọc từ khoảng cách xa hay không. Sau đó hãy nhìn vào phần text trên một diện tích hiển thị nhỏ hơn, ví dụ như trên màn hình điện thoại để đảm bảo nó cũng dễ đọc dù chỉ nhìn thoáng qua.

Hãy thử sử dụng ngôn từ trong một môi trường có độ tương phản cao, ví dụ như kí tự sáng màu trên nền tối màu hoặc kí tự tối màu trên nền sáng màu, sao cho mọi từ đều dễ đọc.

  1. Chú ý những màn hình retina

7

Thậm chí những màn hình có kích thước nhỏ nhất có thể dựng những thành phần thiết kế và hình ảnh hoàn hảo tới từng điểm ảnh.

Bạn cần phải xem xét cách bạn xử lý những hình ảnh, biểu tượng và những thành phần thiết kế khác sao cho mọi thứ được dựng hình một cách đẹp mắt bất chấp kích thước màn hình. Khi có thể, việc sử dụng một định dạng vector có thể là một giải pháp lý tưởng, đó là một lý do mà định dạng SVG ngày càng trở nên phổ biến hơn theo thời gian.

Nếu bạn không có một hình ảnh với độ phân giải vừa vặn với những kích thước màn hình phổ biến, đừng dùng nó. Sử dụng hình ảnh tồi tệ, thậm chí là hình ảnh rỗ hoặc vỡ nét là điều nên tránh.

  1. Trung thực

8

Thiết kế của bạn nên đúng với doanh nghiệp nhỏ của bạn, thông tin của nó, thương hiệu của doanh nghiệp và minh bạch với những việc bạn làm. Đừng ăn trộm một thiết kế hoặc hình ảnh, đừng sử dụng những từ khóa không đúng với nội dung thực tế chỉ để thu hút lượng truy cập và hãy trung thực với nội dung thực tế của trang web.

Với cả đống website ngoài kia, người xem muốn tương tác với những thiết kế nguyên gốc. Việc lừa gạt người dùng làm gì đó hoặc đăng kí một sản phẩm hay dịch vụ hoặc gây hiểu nhầm về một chủ đề hay thông tin sẽ đi ngược lại đạo đức nghề nghiệp của chính bạn. Đừng nhận làm những dự án kì vọng điều này từ thiết kế.

  1. Chú ý tới khả năng truy cập

9

Trang web nên có thể dùng được bởi càng nhiều người càng tốt. Và trong khi nó có thể là việc khó khăn để đảm bảo thiết kế là tiếp cận được, nó không quá phức tạp như là bạn vẫn nghĩ.

Google có một sự chỉ dẫn tuyệt vời đối với khả năng truy cập/tiếp cận của một website, điều được định nghĩa là:

Nói chung, khi chúng ta nói một trang web có thể truy cập được, chúng ta có ý rằng nội dung của trang có sẵn và tính năng của nó có thể được vận hành, đúng nghĩa bởi bất cứ ai. Như là những nhà phát triển, khá dễ khi giả sử rằng tất cả người dùng đều có khả năng nhìn và sử dụng bàn phím, chuột, hoặc màn hình cảm ứng, và tương tác với nội dung trang web của bạn cũng giống như cách mà bạn làm. Điều này có thể dẫn tới một trải nghiệm hoạt động tốt với một số người nhưng lại tạo ra rắc rối cho một số người dùng khác.

Khả năng truy cập, vì thế, liên quan tới trải nghiệm của người dùng – nhóm những người có thể nằm ngoài nhóm “người dùng thông thường” – hoặc có thể nói đó là nhóm người truy cập và tương tác với những thứ thuộc về website theo cách khác với cách mà bạn kỳ vọng. Cụ thể, nó quan tâm tới những người dùng – những người đang phải trải qua một vài dạng khiếm khuyết hoặc khuyết tật – và hãy nhớ rằng trải nghiệm đó có thể là trải nghiệm tinh thần hoặc chỉ là tạm thời.

Nhiều nguyên lý về thiết kế tốt, như kích cỡ, độ tương phản, và khoảng trắng, đóng góp vào khả năng truy cập nói chung.

WebAIM có một danh sách, cũng như những công cụ khác, để giúp bạn xác định liệu thiết kế của bạn có dễ dàng truy cập hay không. Danh sách này gồm 4 khía cạnh chính liên quan tới khả năng truy cập: liệu thiết kế có nhận biết được, vận hành được, hiểu được và mạnh mẽ không?

  1. Website nên phản hồi nhanh thao tác người dùng

10

Có nhiều điều cần chú ý khi thiết kế một trang web nhưng một điểm quan trọng là trang web của bạn cần có khả năng đáp ứng (phản hồi) nhanh. Điều này bao gồm mọi thành phần, từ text cho đến hình ảnh, cho tới những nút chức năng và nói chung là cả một thiết kế tổng thể.

Mỗi thiết kế cần hoạt động trơn tru trên mọi thiết bị và mọi thời điểm.

Lời kết

Một bộ quy tắc chặt chẽ có thể giúp bạn làm chủ một dự án thiết kế nhanh hơn và làm việc một cách nhất quán hơn. Hãy chú ý rằng không quy tắc nào trong số 10 quy tắc nói trên cho bạn biết rằng một dự án sẽ trông như thế nào, chúng ăn sâu vào lý thuyết về cách mà bạn lên đề cương và tạo lập từng website cụ thể.

Bạn có quy tắc nào cảm thấy có thể bổ sung vào danh sách của chúng tôi không? Hãy cho chúng tôi biết ở phần bình luận nhé!

Nguồn: designshack.net

Tham khảo khoá học sắp khai giảng và ưu đãi mới nhất! Lịch học Đăng ký ngay