Là một trong những công cụ hỗ trợ hiệu quả cho hoạt động quảng bá thông tin, website được xem là cánh tay đắc lực cho chiếc lược Marketing của mỗi doanh nghiệp. Tuy nhiên, việc tạo ra một website thể hiện thương hiệu là điều có thể gây khó khăn cho nhiều cá nhân, tổ chức doanh nghiệp do có thể bạn là người mới hoặc không phải là một nhà thiết kế giỏi. Vì thế trong bài viết này, HomeNext Academy sẽ hướng dẫn bạn 3 tiêu chí chính để lựa chọn thiết kế website phù hợp và lôi cuốn góp phần tăng cơ hội thu hút khách hàng hiệu quả.
1. Thiết kế chiều rộng nội dung
Một trong những tiêu chí lựa chọn website hấp dẫn đó là về chiều rộng nội dung của trang. Có 2 dạng chính chúng ta cần quan tâm khi thiết kế chiều rộng của website bao gồm:
Fixed-width (chiều rộng cố định):
Fixed-width còn được gọi là bố cục đóng hộp, có khung lề xung quanh trang. Nội dung của bạn sẽ được đặt trong vùng chứa cố định, không thể thay đổi kích thước theo chiều rộng màn hình. Ưu điểm của chiều rộng cố định là sẽ giúp chúng ta dễ kiểm soát kích thước website và hiển thị tốt trên các máy có độ phân giải cao.
Tuy nhiên, hạn chế là nếu với màn hình lớn thì website sẽ hiển thị nhiều phần khung gây thiếu cân đối. Còn với màn hình nhỏ, do kích thước không tự động co lại nên sẽ dễ hiển thị thanh kéo ngang, gây phiền toái khi không hiển thị đủ độ rộng nội dung.
Fluid-width (chiều rộng tùy chỉnh):
Chiều rộng tùy chỉnh là cấu trúc trang web không bị bó buộc về kích thước. Bố cục này dựa trên tỷ lệ phần trăm so với kích thước trình duyệt hiện tại nên bố cục sẽ điều chỉnh tương ứng với độ phân giải tùy theo thiết bị.
Thiết kế dạng tùy chỉnh thường dùng để đáp ứng di động và cả các website có đồ họa nặng vì có thể tùy thuộc thay đổi kích thước màn hình.
Trái lại, nhược điểm là người thiết kế khó kiểm soát được vì trên mỗi thiết bị người dùng, kích thước hiển thị có thể sẽ không giống so với thiết kế, đặc biệt là kích thước ảnh và video.
Ví dụ: Xem xét website của hai trang thương mại điện tử lớn là Sendo và Shopee.
Sendo dùng thiết kế dạng cố định. Trên màn hình máy tính, website vẫn đảm bảo hiển thị tốt. Nhưng với phân giải nhỏ hơn, độ rộng không tùy biến dẫn đến trang hiển thị thanh cuộn ngang thiếu thẩm mỹ.
Ngược lại, Shopee áp dụng kiểu thiết kế chiều rộng lưu động với độ rộng thay đổi tùy theo thiết bị người dùng tương ứng. Vì thế, nội dung vẫn đảm bảo hiển thị tốt trên màn hình nhỏ.
Hiển thị 2 trang web trên Galaxy S8: Sendo có chiều rộng cố định nên xuất hiện thanh cuộn ngang; Shopee vì chiều rộng lưu động nên kích thước đã tự căn chỉnh (Nguồn: Sưu tầm).
Vậy nên chọn dạng thiết kế nào cho hiệu quả?
Trên thực tế, việc lựa chọn dạng thiết kế phải dựa trên những đánh giá của doanh nghiệp khi xuất bản website và mức độ tương tác của người dùng. Chẳng hạn bạn có một trang blog hoặc web tin tức chủ yếu có các bài viết nghiêng về nội dung kiến thức chuyên môn. Lúc này bạn có hai lựa chọn:
Nếu mục tiêu là trải nghiệm người dùng, thì chiều rộng lưu động sẽ là lựa chọn có lợi. Điều này cho phép người đọc thoải mái đọc văn bản mà không cảm thấy không gian chật chội dù có trên màn ảnh nhỏ đi nữa.
Còn ngược lại, mục tiêu là muốn khán giả tập trung sâu, thiết kế chiều rộng cố định cho phép văn bản nằm trong một vùng giữa và người dùng sẽ có hướng đọc chình diện mà không phải di chuyển mắt qua lại nhiều đối với thiết bị có độ phân giải lớn.Vì thế, hãy thử nghiệm website của bạn để biết được đâu mới là lựa chọn tối ưu cho thương hiệu.
Hoặc bạn có thể xem ngay “Báo Giá Thiết kế Website” của HomeNext Academy để tham khảo các gói thiết kế mà chúng tôi cung cấp, hỗ trợ bạn xây dựng một website chuyên nghiệp.
2. Thiết kế bố cục tiêu đề trang chủ
Tiêu đề trang chủ là điều cần biết khi thiết kế trang web vì nó rất quan trọng trong việc tạo ấn tượng đầu tiên mạnh mẽ với khách hàng truy cập vào trang web của bạn.
Một số mẫu tiêu đề trang chủ được các trang web áp dụng: Hình ảnh tĩnh, hình ảnh trình chiếu và video. Tuy nhiên tùy thuộc vào lĩnh vực kinh doanh mà cần chọn dạng tương ứng cho phù hợp.
Hình ảnh tĩnh
+ Tiêu đề ảnh tĩnh không có nội dung
Đây là dạng tiêu đề chỉ có một hình ảnh tĩnh nhất định và không bao gồm văn bản nào khác. Hình ảnh này có thể giúp liên tưởng đến lĩnh vực hoặc sản phẩm hoặc dịch vụ chính của doanh nghiệp.
Dạng tiêu đề ảnh tĩnh chỉ nên được sử dụng trong các website chủ yếu chú trọng vào hình ảnh đẹp để thu hút khách hàng, chẳng hạn danh mục đầu tư, khách sạn, nhà hàng, sản phẩm hữu hình hoặc trang web chuyên về đồ họa.
Trong các trường hợp trên thì sử dụng tiêu đề ảnh tĩnh kết hợp chiều rộng đầy đủ cho phép đưa cái nhìn trực quan và đã đủ dễ hiểu đến với khách hàng.
Ví dụ: Website của Tokyoshop chuyên cung cấp các sản phẩm liên quan về trà. Nếu như chỉ đơn giản nhìn vào hình ảnh tiêu đề dưới đây, khách hàng vẫn có thể đoán được mặt hàng mà doanh nghiệp đang kinh doanh.
Website Tokyoshop (Nguồn: Sưu tầm).
Trái lại nếu doanh nghiệp bạn cần nội dung giải thích sâu hơn về những điều mình làm để khách hiểu rõ thì chỉ tiêu đề ảnh tĩnh là lựa chọn không lý tưởng. Có thể kể đến là các doanh nghiệp liên quan về đào tạo, kỹ thuật hay chia sẻ kinh nghiệm, lối sống…
+ Tiêu đề ảnh tĩnh có nội dung
Khác với ảnh tĩnh không có nội dung, dạng này sẽ đi kèm một phần nội dung ngắn khác bao gồm 3 ý sau:
– Tiêu đề chính: Tên sản phẩm hoặc dịch vụ.
– Tiêu đề phụ: Mô tả ngắn về sản phẩm hoặc dịch vụ.
– Nút kêu gọi hành động: Kêu gọi click vào để tìm hiểu thêm.
Website Adidas Việt Nam (Nguồn: Sưu tầm).
Tiêu đề ảnh tĩnh có nội dung là lựa chọn an toàn cho bất kỳ trang web nào thuộc các lĩnh vực nếu bạn không biết phải bắt đầu ra sao. Trong đó, hình ảnh chỉ đóng vai trò hỗ trợ trong khi giá trị nằm ở dòng tiêu đề chính, tiêu đề phụ và nút CTA vì nó lột tả rõ thương hiệu muốn truyền tải điều gì.
Hình ảnh trình chiếu
Tiêu đề dạng trình chiếu sẽ bao gồm một loạt các bức ảnh được trình bày dưới dạng trình chiếu tự động. Dạng thiết kế tiêu đề này sẽ thích hợp cho các các doanh nghiệp phục vụ nhiều đối tượng khách hàng hoặc có nhiều sản phẩm/dịch vụ cốt lõi. Nếu công ty có nhiều giải pháp cho từng nhóm khách hàng khác nhau thì tiêu đề hình ảnh trình chiếu sẽ giúp doanh nghiệp giới thiệu sản phẩm/dịch vụ một cách rõ ràng có tổ chức.
Ví dụ: Website của HomeNext Academy có tiêu đề được thiết kế theo dạng trình chiếu, trong đó: Hình đầu tiên là tên gọi doanh nghiệp kèm dòng mô tả ngắn về công ty. Hai hình tiếp theo chúng tôi đưa ra hai dịch vụ nổi bật là đào tạo doanh nghiệp và đào tạo cá nhân vì khách hàng chính của công ty là đội ngũ nhân viên bán hàng, marketing của các doanh nghiệp nhỏ, sinh viên hay các CEO trẻ.
Website HomeNext Academy có bố cục hình ảnh trình chiếu (Nguồn: HomeNext Academy).
Video
Tiêu đề áp dụng video sẽ cho phép bạn giới thiệu một hoạt động nào đó trong quy trình kinh doanh, giải pháp nhờ sản phẩm của doanh nghiệp… và nó sẽ hoạt động tốt do tính trực quan và sinh động.
Tiêu đề dùng video sẽ phù hợp cho bất kỳ doanh nghiệp nào chỉ cần video mang tính độc đáo. Các video chuyển động rất hiệu quả trong việc thu hút ánh nhìn chú ý của người xem, do đó, nhiều trang web thành công khi sử dụng nền tiêu đề bằng video để cải thiện mức độ tương tác và nhận thức về thương hiệu.
Ví dụ: Website của Vinamilk đặt tiêu đề bằng video mới nhất tái hiện lại hành trình phát triển của thương hiệu và các hoạt động sinh hoạt của con người có dùng sản phẩm Vinamilk bằng các hình ảnh hoạt họa sống động, trẻ trung và đầy sáng tạo. Ngoài ra, Vinamilk còn kết hợp thêm các slogan và chiến dịch để khẳng định giá trị thương hiệu theo thời gian – tất cả là vì khách hàng.
Website của Vinamilk có thiết kế tiêu đề bằng video (Nguồn: Sưu tầm).
Một số lưu ý khi dùng video cho tiêu đề website:
– Sử dụng video độc đáo thay vì các video có sẵn: nhằm tạo sự riêng biệt và cá tính hơn cho website của doanh nghiệp.
– Video có chất lượng sản xuất cao: phản ánh tốt về giá trị doanh nghiệp thay vì là video có chất lượng hình ảnh kém.
– Video ngắn và kích thước dưới 6MB: nếu tệp video có kích thước lớn sẽ ảnh hưởng đến tốc độ tải trang và khán giả sẽ nhanh chóng chuyển sự chú ý nếu video quá dài.
Ngoài ra, nếu muốn tạo ấn tượng thì bạn có thể kết hợp các dạng trên lại để tạo một tiêu đề website hấp dẫn hơn. Đơn cử như website của hãng công nghệ HP kết hợp dạng trình chiếu cả hình ảnh tĩnh và video trong tiêu đề.
Website HP – heading phối hợp cả ảnh tĩnh và video thành một bản trình chiếu (Nguồn: Sưu tầm).
>>Xem thêm: Cách ứng dụng font chữ trong thiết kế trang web tại HomeNext Academy để tạo nội dung tiêu đề lôi cuốn nhé!
3. Thiết kế thanh menu
Vị trí thanh menu
Một điều cần chú ý khi làm website khác đó là thanh menu. Vị trí thanh menu có tác động đến trải nghiệm khách hàng (UX). Vì thế mà bạn cần chú ý thiết kế thanh menu sao cho khách hàng có thể điều hướng một cách thuận lợi nhất.
+ Thanh menu ngang trên cùng
Hơn 80% trang web sử dụng kiểu thiết kế menu này, nó mang tính truyền thống nhưng không lỗi thời. Dạng thiết kế nằm ngang cũng đảm bảo thói quen chuyển động thông thường của mắt nên sẽ giúp khách hàng dễ thao tác nhất. Nếu bạn không muốn mắc sai lầm thì lựa chọn này có thể an toàn và hiệu quả.
+ Thanh menu dọc
Thanh menu được thiết kế gồm các tab điều hướng tập hợp thành một đường dọc từ trên xuống. Vẫn theo thói quen quan sát của người dùng, thanh menu dọc được đặt phía trên bên trái nhằm tạo sự độc đáo và định hướng cá nhân riêng biệt.
Thanh menu dọc hiệu quả khi website có nhiều tab menu để hiện thị, thường phù hợp với website sử dụng nhiều đồ họa như: danh mục đầu tư, thẩm mỹ viện, nhà hàng,…
Website The Gourmet thiết kế thanh menu dọc (Nguồn: Sưu tầm).
+ Thanh menu không di chuyển khi cuộn trang
Phù hợp cho các website mà nội dung từng trang không quá dài. Chính vì thế, khách hàng khi ở cuối trang sẽ không quá khó khăn khi phải cuộn lên đầu nhằm điều hướng sang mục khác.
Ví dụ: Website của Suntory Pepsico Việt Nam với thanh menu chính không di chuyển khi scroll chuột do phần nội dung của trang khá cô đọng.
Tuy nhiên theo đánh giá khách quan thì cách thiết kế này không được khuyến khích vì nội dung dài ngắn sẽ tùy thuộc mỗi trang và dù thế nào đi nữa, khách hàng cũng cảm thấy bất tiện vì mỗi lần xem đến cuối mà muốn di chuyển mục khác lại phải cuộn lại đầu trang.
Mặc dù vậy, chúng ta vẫn có cách khắc phục tình trạng trên. Các bạn có thể thử tạo cố định một liên kết “trở về đầu trang” mỗi khi kéo xuống, khách hàng vẫn có thể nhanh chóng tìm về thanh menu. Giống như website của Unilever dưới đây đã vận dụng.
Website Unilever có liên kết trở lại đầu trang mỗi khi kéo chuột (Nguồn: Sưu tầm).
+ Thanh menu di chuyển khi cuộn trang
Hiện nay, phần lớn các website đều dùng thanh menu di chuyển theo khi cuộn trang. Điều này mang lại trải nghiệm tốt nhất cho khách truy cập khi họ có thể điều hướng dễ dàng dù ở bất cứ vị trí nào trên trang web.
Ví dụ: HomeNext Academy thiết kế trang web có thanh menu nằm ngang bên trên và menu sẽ di chuyển khi cuộn trang xuống. Chính điều này tạo sự thuận lợi cho khách hàng truy cập vào website dễ dàng điều hướng bất cứ khi nào mong muốn.
Một số lưu ý về thanh menu
– Chọn thiết kế đơn giản, tinh gọn để các mục điều hướng trên menu dễ đọc. Tránh để lộn xộn quá nhiều mục và chỉ nên hiển thị các tab cần thiết.
– Sử dụng màu dễ nhìn cho nền thanh menu và chọn màu tương phản cho văn bản các mục trên menu để tăng sự nổi bật. Thông thường các website dùng nền trắng và màu văn bản menu là màu chủ đề của thương hiệu.
– Sắp xếp phân cấp cho các chỉ mục theo mức độ quan trọng giảm dần từ trái sang phải.
– Chọn kích thước chữ vừa phải, không quá to hay quá nhỏ và dùng phông chữ nhất quán với tiêu đề để khách hàng không bị lạ mắt, khó đọc.
Nếu bạn đang có nhu cầu tìm kiếm một đơn vị đào tạo và chia sẻ kinh nghiệm làm webite uy tín tại Bình Dương. Hãy nhanh tay đăng ký khóa học tại HomeNext Academy NGAY HÔM NAY
Kết luận
Tóm lại, việc thiết kế website phù hợp với thương hiệu yêu cầu việc xem xét cẩn thận nhiều yếu tố khác nhau. Đến đây, có thể bạn đã biết phải kết hợp những yếu tố hiệu quả nào để tạo ra website cho riêng mình rồi. Bằng cách tập trung vào 3 điểm chính trong bài viết này, HomeNext Academy hy vọng các bạn có được chọn lựa thiết kế website phù hợp, hấp dẫn với đối tượng mục tiêu của mình và thúc đẩy kinh doanh thành công.
Để tạo ra một website chất lượng, thực sự thu hút khách hàng cần phải có những bước đầu tư kĩ càng về nhiều mặt. Hãy nhanh tay đăng kí “Dịch vụ THIẾT KẾ WEBSITE” tại HomeNext Academy để nhận tư vấn hiệu quả và tốt nhất nhé!
Liên hệ HOTLINE để được tư vấn chi tiết.
