6 lời khuyên thiết kế website từ chuyên gia

6 lời khuyên thiết kế website ấn tượng

Bạn đang tìm kiếm ý tưởng để thiết kế website mới của mình. Tuy nhiên, bạn không biết bắt đầu từ đâu để làm cho website trở nên chuyên nghiệp. Sau đây, là 6 lời khuyên từ chuyên gia giúp bạn nhanh chóng định hình ý tưởng thiết kế website.

Dưới đây là những xu hướng thiết kế web lớn nhất 2020

  1. Dark mode
  2. Imperfections that add personality
  3. Immersive 3D elements
  4. Soft shadows, layers and floating elements
  5. Mixing photography with graphics
  6. Solid frames of white space
  7. Glowing, luminous color schemes
  8. Ultra minimalist navigation

Mặc dù giao diện cuối cùng của bạn sẽ thể hiện phong cách cá nhân, dòng công việc và nhận diện thương hiệu của bạn. Song, có một vài quy tắc cơ bản luôn được áp dụng.

1. Thiết kế trang chủ tối giản và tinh gọn

Trang chủ của bạn nên truyền đạt thông điệp cốt lõi ngay lập tức khi người dùng truy cập. Đa số người dùng hiếm khi đọc hết từng chữ trên website. Thay vào đó, họ sẽ cuộn trang web và chỉ đọc các từ khóa, đoạn văn, hình ảnh gây ấn tượng mạnh.

Càng ít các chi tiết gây xao nhãng, người dùng càng chú ý vào các chi tiết quan trọng hơn.

  • Nội dung quan trọng ở trên: Khách truy cập nên hiểu trang web của bạn là gì càng sớm càng tốt, mà không cần phải cuộn hoặc nhấp vào bất cứ đâu.
  • Sử dụng khoảng trắng ở giữa các phần. Có thể bạn chưa nhận ra khoảng trắng có sức mạnh rất lớn trong thiết kế web. Bằng cách để trống một số khu vực, bạn sẽ mang lại cho thiết kế một cảm giác rộng rãi, cân đối hơn nhiều. Đối với văn bản của bạn, viết bằng các đoạn văn dễ đọc, súc tích nhất có thể.
  • Thêm hình ảnh. Một bức tranh nói lên hàng ngàn từ ngữ. Hình ảnh có thể truyền tải giá trị thực của nội dung, thu hút sự chú ý của người dùng và giải thích các khái niệm phức tạp.
    Lưu ý: Không sử dụng bất kỳ hình ảnh đẹp nhưng không liên quan cho thiết kế web. Người dùng sẽ đơn giản bỏ qua chúng. Thay vào đó, hãy chọn những bức ảnh thể hiện việc sử dụng sản phẩm và thu hút sự chú ý của người dùng bằng một thiết kế hình ảnh nổi bật.
  • Nút kêu gọi hành cộng: Các nút kêu gọi người dùng thực hiện thao thác nào đó gọi là call-to-action (CTA). Các ví dụ như; nút đăng ký, nút tìm hiểu thêm, nút mua hàng…

Mẹo: Bạn có thể sử dụng CTA để cho người dùng tải về tài liệu nào đó. Khi người dùng nhận thấy tài liệu bạn cung cấp giải quyết vấn đề của họ, họ sẽ dành thời gian để tìm hiểu dịch vụ của bạn nhiều hơn.

Divi.vn - vi du nut CTA 1

Mẹo: chọn mẫu có sẵn theo nhu cầu dự án của bạn từ kho giao diện có sẵn.

2. Thiết kế với hệ thống phân cấp thị giác

Phân cấp thị giác là một nguyên tắc quan trọng của thiết kế giúp hiển thị nội dung của bạn một cách rõ ràng và hiệu quả. Thông qua việc sử dụng chính xác hệ thống phân cấp, bạn sẽ có thể dẫn khách truy cập chú ý đến các yếu tố quan trọng nhất.

Sử dụng hệ thống Header từ H1-H6 để phân cấp nội dung của website.

Các thành phần chính của hệ thống phân cấp thị giác là:

  • Kích thước và độ đậm: Làm nổi bật các nội dung quan trọng của bạn, chẳng hạn như tên và logo doanh nghiệp của bạn, bằng cách làm cho chúng lớn hơn và nổi bật hơn. Người đọc có xu hướng hấp dẫn một cách tự nhiên trước các tiêu đề lớn và táo bạo. Theo sau các tiêu đề lớn là các văn bản nhỏ hơn.
  • Vị trí phần tử: Sử dụng bố cục trang web phù hợp để điều khiển khách truy cập của bạn nhìn đúng hướng. Chẳng hạn, bạn có thể đặt một nút kêu gọi hành động (CTA) quan trọng ở chính giữa màn hình hoặc đặt logo của bạn vào tiêu đề.

Khi bạn thiết lập một hệ thống phân cấp rõ ràng cho thông tin của mình, người đọc có thể dễ dàng theo dõi luồng thông tin của bạn.

Sau đó, áp dụng màu sắc, độ tương phản và khoảng cách để làm nổi bật hơn nữa. Hãy luôn làm nổi bật những thành phần mà bạn muốn người dùng chú ý.

Mẹo: Trên Divi, bạn có thể áp dụng hệ thống Header đa cấp từ H1-H6 cho toàn bộ trang web. Tại admin, chọn Giao diện -> Tùy biến -> Toàn cục -> Kiểu chữ -> Tiêu đề.

Divi.vn - T%C3%B9y bi%E1%BA%BFn Divi vn 2

3. Tạo nội dung trang web dễ đọc

Khoảng chú ý trung bình của con người bây giờ ngắn hơn một con cá vàng – thật sự. Một nghiên cứu gần đây cho thấy khoảng chú ý trung bình của con người đã giảm từ 12 giây vào năm 2000 (hoặc khoảng thời gian điện thoại thông minh xuất hiện) xuống còn 8.25 giây vào năm 2015. Các nhà khoa học tin rằng cá vàng có khoảng chú ý là chín giây.

Divi.vn - Kho%E1%BA%A3ng t%E1%BA%ADp trung 3

Khả năng đọc được đánh giá mức độ dễ dàng nhận ra từ ngữ, câu và cụm từ. Khi khả năng đọc của trang web của bạn cao, người dùng sẽ có thể dễ dàng quét hoặc đọc lướt qua nó. Bằng cách này, tiếp nhận thông tin trở nên dễ dàng.

Mẹo: bạn có thể sử dụng http://www.hemingwayapp.com/ để đo đạc khả năng đọc website.

Để tăng khả năng đọc trang web; hãy thử các quy tắc chính sau:

Độ tương phản

Độ tương phản giữa màu văn bản và màu nền của bạn rất quan trọng đối với khả năng đọc, cũng như khả năng truy cập trang web. Mặc dù bảng màu trang web có thể là đại diện cho màu sắc thương hiệu của bạn, hãy đảm bảo rằng có đủ độ tương phản giữa các yếu tố. Bạn có thể sử dụng công cụ Contrast Checker để kiểm tra độ tương phản website.

Kích thước chữ lớn

Hầu hết mọi người sẽ gặp khó khăn để xem các phông chữ nhỏ. Một nguyên tắc thông thường cho thiết kế web là giữ cho văn bản nội dung ít nhất 16pt. Nhưng hãy nhớ rằng con số này hoàn toàn phụ thuộc vào phông chữ bạn chọn cho trang web.

Phông chữ Sans serif thường là lựa chọn tốt nhất cho các văn bản trực tuyến dài – giống như phông chữ bạn đang đọc. Bạn cũng có thể tạo các cặp phông chữ thú vị bằng cách trộn các loại khác nhau lại với nhau.

Ngoài ra còn có nhiều phông chữ dùng để trang trí, chẳng hạn như phông chữ viết tay. Nếu bạn đang dùng một trong những thứ đó, hãy đảm bảo không sử dụng nó quá mức, để tránh ảnh hưởng đến sự tập trung vào nội dung website.

Giới hạn số lượng phông chữ

Không sử dụng nhiều hơn ba kiểu chữ khác nhau trong một trang web. Một số dự án có thể yêu cầu kết hợp phông chữ phức tạp hơn, nhưng quá nhiều kiểu chữ khác nhau thường xuất hiện lộn xộn, làm mất tập trung.

4. Đảm bảo trang web của bạn dễ dàng điều hướng

Một phần quan trọng bạn không thể bỏ qua là menu điều hướng (navigation). Đây là cách duy nhất để khách truy cập duyệt trang web và tìm hiểu về các sản phẩm của bạn. Do đó, menu điều hướng phải đơn giản và trực quan.

Một số gợi ý về điều hướng trang web

Giới hạn dưới 7 mục trong menu

Có quá nhiều mục menu chỉ khiến khách truy cập bối rối – họ cần dành nhiều thời gian hơn để đọc tất cả các tùy chọn.

3 lần nhấp chuột

Nguyên tắc từ trang chủ, người truy cập chỉ cần nhấp tối đa 3 lần để đến trang cần tìm.

Liên kết trong Logo

Logo không chỉ là biểu tượng của website, nó còn là nơi người dùng nhấp vào khi muốn về trang chủ.

Hạn chế Drop-down Menu

Drop-down menu là dạng Menu con nằm trong menu cha. Hiện tại, các nhà thiết kế website ít sử dụng drop-down menu, vì các lí do sau:

  • Rất khó để các công cụ tìm kiếm thu thập dữ liệu trình đơn thả xuống.
  • Người dùng di chuyển mắt nhanh hơn họ di chuyển chuột. Khi người dùng di chuyển chuột đến thanh menu để nhấp và quá nhiều tùy chọn xuất hiện, họ sẽ bị nhầm lẫn.
Divi.vn - dropdown menu 4

Cung cấp một số điều hướng dọc

Nếu trang web của bạn thuộc loại cuộn dài, chẳng hạn như trang web một trang (landing page), hãy sử dụng menu Anchor.

Chỉ với một cú nhấp chuột, người xem sẽ có thể nhanh chóng chuyển đến bất kỳ phần nào của trang web. Một tùy chọn khác là nút ‘Quay lại đầu trang“, dẫn khách truy cập đến đầu trang ngay lập tức.

Tối ưu Footer

Chân trang có lẽ là phần cuối cùng được nhìn thấy trên trang web của bạn. Đó là một ý tưởng tốt để đặt tất cả các liên kết quan trọng của website. Điều này có thể bao gồm thông tin liên lạc, biểu tượng mạng xã hội và phiên bản rút gọn của menu hoặc bất kỳ nội dung liên quan mà khách truy cập có thể cần.

Divi.vn - Ph%C3%A1t tri%E1%BB%83n website v%C3%A0 ti%E1%BA%BFp th%E1%BB%8B s%E1%BB%91 Divi vn 5

5. Tương thích thiết bị di động

Bạn đang thiết kế website nhìn rất đẹp trên máy tính nhưng lại quên mất tối ưu cho điện thoại. Hãy tối ưu nó ngay! Thiết kế website không tối ưu di động ảnh hưởng rất lớn đến SEO website.

Chúng ta đang sống trong một xã hội các thiết bị di động. Khi người dùng duyệt trang web của bạn trên điện thoại di động, họ hy vọng sẽ thấy nội dung chính xác như trên máy tính để bàn hoặc máy tính xách tay. Điều này đòi hỏi thiết kế trải nghiệm người dùng tốt hơn. Vì vậy, thiết kế đáp ứng là một yếu tố cần thiết cho mọi trang web.

Mẹo: Đọc thêm bài viết làm thế nào thiết kế website tương thích di động.

thiet ke website

6. Nút chia sẻ mạng xã hội

Nếu trang web của bạn thiếu các nút chia sẻ mạng xã hội, bạn có thể bỏ lỡ rất nhiều lưu lượng truy cập từ mạng xã hội khi website được chia sẻ!

Các nút chia sẻ xã hội là các nút nhỏ nằm trên cùng hoặc dưới cùng của bài đăng. Chúng chứa các biểu tượng của các mạng xã hội nhác nhau mà bạn chọn như Facebook, Twitter, Linkedin.

Mẹo: Thêm nút chia sẻ mạng xã hội trên Divi có 2 cách.

Thêm từ Footer Widget

Divi.vn - Widget %E2%80%B9 Divi vn %E2%80%94 WordPress 6

Thêm trong nội dung bằng trình dựng web

Tại phần trình dựng web, chọn module -> tìm social share -> kéo và thả vào nội dung.

Divi.vn - Blog single Divi vn 7

Mẹo cuối cùng mà chúng tôi muốn để lại là hãy thiết kế website đơn giản nhất. Bạn có thể tìm thấy các xu hướng thiết kế website mới trên internet. Hoặc bạn có thể tham khảo hàng trăm mẫu website được thiết kế sẵn của chúng tôi. Hãy chọn một mẫu ưng ý và tiếp tục chỉnh sửa theo ý bạn.

Bạn thích bài viết này, hãy chia sẻ với bạn bè của bạn hay để lại ý kiến của bạn ngay phần bình luận bên dưới!

Nguyễn Quyền

Thạc sĩ quản trị kinh doanh, người sáng lập Divi.vn. Yêu thích kinh doanh, tư vấn khởi nghiệp. Hơn 10 năm làm việc với Wordpress, thương mại điện tử, tiếp thị số. Mục tiêu thúc đẩy các dự án chuyển đổi số doanh nghiệp.

Để lại lời bình

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 *

Bắt đầu khởi tạo website ngay hôm nay?

Nếu bạn đang muốn tạo website, chúng tôi có thể giúp bạn tăng doanh thu với một website chuyên nghiệp. Dùng thử 15 ngày hoàn toàn miễn phí.

Scroll to Top