Trong thiết kế web, trình bày là tất cả. Tất nhiên, chất lượng nội dung của bạn cũng quan trọng, nhưng khách hàng sẽ không bao giờ đánh giá đầy đủ các bài báo, sản phẩm hoặc trang dịch vụ được viết hoàn hảo của bạn nếu điều đầu tiên họ nhìn thấy trên trang web của bạn là một mớ hỗn độn. Cách bạn cấu trúc các trang web của mình tạo ra sự khác biệt lớn và một số kiểu bố cục trang web hoạt động tốt hơn những kiểu khác.
Nhưng các nguyên tắc bố cục thiết kế web tốt nhất thay đổi tùy thuộc vào ngành, thương hiệu và năng lực kỹ thuật của bạn; có thể khó tìm được bố cục phù hợp với bạn. Vì vậy, dưới đây, chúng tôi tổng hợp 5 bố cục trang web phổ biến nhất và hiệu quả nhất, với các ví dụ và mẹo của chuyên gia để giúp bạn trình bày đúng cách.
Đề nghị cho:
Nguyên tắc bố cục thiết kế web đầu tiên của chúng tôi dành cho các trang đơn giản có một phần riêng biệt đòi hỏi tất cả sự chú ý. Tất cả các yếu tố khác trên trang được định vị để tập trung vào một yếu tố chính, cho dù đó là lời kêu gọi hành động (CTA) như đăng ký email hay hình ảnh như logo hoặc ảnh sản phẩm.
Loại bố cục trang web này là điển hình cho các trang chủ và trang đích — điều đầu tiên mà khách truy cập nhìn thấy là hành động được đề xuất hoặc hình ảnh được đánh dấu, với mọi thứ khác (bao gồm cả menu điều hướng) là thứ yếu. Trong thiết kế ở trên của Visasty Ltd dành cho Angela Gorrell, “các bài giảng mới nhất” là trọng tâm trung tâm, dựa trên vị trí trung tâm của nó và không gian trống rộng rãi xung quanh nút.
Phong cách này sử dụng các nguyên tắc thiết kế đồ họa như đường dẫn đầu, bố cục, tận dụng không gian trống và độ tương phản màu sắc để thu hút sự chú ý đến một phần tử đơn lẻ, làm cho nó trở nên hoàn hảo cho các trang có mục tiêu duy nhất là tăng chuyển đổi. Tất cả các yếu tố phụ như văn bản bổ sung được định vị theo cách để chuyển trọng tâm thay vào đó vào yếu tố chính.
Ví dụ, thiết kế trên của trang web của Limuntus có ý nghĩa về phòng ngủ, khuyến khích mọi người nhập điểm đến và ngày tháng lý tưởng của họ ngay lập tức, với một hình ảnh thư giãn để lôi kéo thêm khách truy cập vào trang web của họ. Tương tự như vậy, thiết kế của Ananya Roy cho Copper Compass thuyết phục khách đăng ký ngay lập tức với biểu mẫu điền thông tin được hiển thị nổi bật.
Cả hai ví dụ về bố cục trang web này đều sử dụng một chiến lược tương tự: bù trừ tiêu điểm trung tâm bằng nền được đóng hộp có màu tương phản. Nút CTA chính cũng được bù đắp bằng màu sắc mạnh mẽ, thu hút sự chú ý, chẳng hạn như màu xanh lam đậm để nổi bật so với màu cam nhẹ nhàng hơn.
Phong cách bố trí này cũng rất phù hợp với các mẫu xuyên tâm, hình tròn hoặc xoắn ốc. Trong trường hợp này, bạn có thể sắp xếp các phần tử trang phụ của mình xung quanh một phần tử chính, chẳng hạn như biểu trưng hoặc hình ảnh độc lập khác. Hãy xem cách trang chủ Wikipedia sắp xếp menu ngôn ngữ xung quanh biểu trưng chi tiết của nó, trong khi vẫn thu hút sự chú ý vào thanh tìm kiếm, CTA chính của nó.
Phong cách bố trí này cũng rất phù hợp với các mẫu xuyên tâm, hình tròn hoặc xoắn ốc. Trong trường hợp này, bạn có thể sắp xếp các phần tử trang phụ của mình xung quanh một phần tử chính, chẳng hạn như biểu trưng hoặc hình ảnh độc lập khác. Hãy xem cách trang chủ Wikipedia sắp xếp menu ngôn ngữ xung quanh biểu trưng chi tiết của nó, trong khi vẫn thu hút sự chú ý vào thanh tìm kiếm, CTA chính của nó.
Đề nghị cho:
Bố cục đèn sân khấu hoạt động tốt nếu bạn chỉ quảng cáo một thứ, nhưng nếu bạn muốn quảng cáo nhiều thứ cùng một lúc thì sao? Vì vậy, sử dụng lưới có tổ chức hoạt động tốt nhất: bạn có thể hiển thị nhiều thứ cùng một lúc và cho phép khách truy cập duyệt tìm thứ mà họ đang tìm kiếm.
Lưới thường sử dụng một yếu tố thiết kế được gọi là “thẻ”, giống như các hộp độc lập bao gồm tất cả các thông tin cần thiết. Thông thường, các thẻ chứa một hình ảnh thú vị, một tiêu đề và đôi khi là một đoạn văn bản mô tả ngắn gọn.
Hơn nữa, thẻ và bố cục lưới có tổ chức rất hoàn hảo cho thiết kế đáp ứng, mang lại lợi thế to lớn cho các thiết bị di động. Các thẻ có tính linh hoạt tuyệt vời, vì vậy chúng dễ dàng sắp xếp lại để phù hợp với mọi kích thước màn hình bất kể thiết bị nào, trái ngược với bố cục có kích thước cố định cần được thay đổi kích thước cho mỗi cài đặt màn hình mới.
Đối với thương mại điện tử, như thiết kế Đại lộ số 9 của ThyDesigns, các thẻ cũng thường chứa giá bán. Cửa hàng làm đẹp trực tuyến Bliss thậm chí còn bao gồm xếp hạng của sản phẩm để giúp người mua hàng quyết định mua gì.
Nhược điểm của lưới là giao diện của chúng có thể hơi nhàm chán, đặc biệt là nếu có rất nhiều thẻ để cuộn qua. Bạn có thể làm sống động các bố cục lưới của mình với một chút sáng tạo.
Ví dụ: bánh kẹo Bon Bon Bon nói trước các dòng để mỗi thẻ của chúng hòa trộn với nền và tạo cảm giác lỏng lẻo hơn, tự do hơn. Một số thương hiệu thậm chí có thể đan chéo các lưới với bố cục không đối xứng (giải thích bên dưới) để có một cái nhìn sắc sảo và năng động hơn.
Bạn không cần phải là một trang web thương mại điện tử để sử dụng bố cục lưới. Chỉ cần xem trang web dưới đây cho Viện Sức khỏe Trí não, được thiết kế bởi Smashing Boys. Trang web sắp xếp các trang kinh doanh tiêu chuẩn của họ như ‘Sứ mệnh’ và ‘Dịch vụ’, thành một lưới dễ đọc, bao gồm hình ảnh mạnh mẽ cho từng trang. Việc sử dụng bố cục này không chỉ giúp họ nổi bật so với các trang web thương mại khác, nó còn làm nổi bật chủ đề kinh doanh của họ về sự ổn định và tổ chức cho sức khỏe tinh thần.
Đề nghị cho:
Hình chữ Z lấy tên từ các nghiên cứu theo dõi mắt trong những năm thiết kế web. Bằng cách theo dõi vị trí mọi người xem trên trang web, họ nhận thấy rằng hầu hết mọi người nhìn từ trái sang phải liên tiếp, sau đó di chuyển xuống và bắt đầu một hàng mới từ trái sang phải.
Khi hình dung, đôi mắt của họ dường như theo dõi một chữ Z, lặp đi lặp lại từ hàng trên xuống hàng dưới cùng. Nó bắt chước việc đọc chuyển động mắt của chúng ta, nơi chúng ta đọc từ trái sang phải và khi chúng ta kết thúc một dòng, chúng ta chuyển xuống dòng tiếp theo, bắt đầu lại từ bên trái.
Các nhà thiết kế web nhận thấy rằng họ có thể tận dụng kiểu mắt tự nhiên này bằng cách thiết kế bố cục trang web cho phù hợp. Thông tin được hiển thị theo hàng từ trái sang phải và sau đó có một khoảng “tạm dừng” nhỏ giữa các hàng khi người dùng nhìn xuống dưới để bắt đầu một hàng mới. Nó hoạt động tốt như một phương pháp hữu cơ để chia nhỏ thông tin thành các bit nhỏ, có thể tiêu hóa được.
Có các chiến lược khác nhau để tách các hàng, tùy thuộc vào phong cách cá nhân của riêng bạn. Thiết kế của Denisa M. dành cho Silex kết hợp hình ảnh với văn bản trong mỗi hàng, nhưng xen kẽ bên nào văn bản ở đó làm cho trang năng động hơn. Thiết kế ứng dụng web của KR Designs có cách tiếp cận tương tự, mặc dù họ thay đổi loại thông tin đi trong mỗi hàng để giữ cho hình ảnh thú vị.
Ngoài ra, bạn có thể phân biệt những gì đi vào từng hàng và vẫn duy trì mẫu Z, miễn là khách truy cập tiếp tục đọc từ trái sang phải trước khi di chuyển xuống. Thiết kế của DSKY cho Figgy & Plum chia nhỏ các hàng bằng cách thay đổi màu nền bên trên thay đổi cách hiển thị nội dung. Thiết kế của Mica Porto cho DirectNine thiết lập mỗi hàng khác nhau để có thể phân biệt rõ ràng các điểm ngắt.
Đề nghị cho:
Một kiểu bố cục trang web phổ biến khác là trang web một cột, phổ biến trên hầu hết các trang web truyền thông xã hội như Twitter, Instagram và Facebook để tạo điều kiện duyệt web trong thời gian dài. Nếu bạn không thích một phần nội dung, chỉ cần tiếp tục cuộn sang phần tiếp theo! Đó là một cơ chế đơn giản như vậy, nhưng hoạt động kỳ diệu bằng cách giải trí cho mọi người trong nhiều giờ.
Quy trình tiêu chuẩn là liệt kê nội dung theo chiều dọc qua thẻ, mỗi lần chỉ có một thẻ hiển thị hoàn toàn trên màn hình. Điều này khuyến khích người dùng tập trung vào một phần nội dung tại một thời điểm mà không làm họ choáng ngợp. Nó cũng giúp thiết kế đáp ứng dễ dàng hơn vì tất cả các thẻ đều sử dụng cùng một chiều rộng, vì vậy bạn không phải lo lắng quá nhiều về thiết bị mà khách truy cập đang sử dụng.
Bố cục hoạt động rất tốt đối với phương tiện truyền thông xã hội đến nỗi nó đã được các doanh nghiệp và các trang thương mại đồng chọn. Mặc dù các trang web này không hiển thị các thẻ bài đăng, nhưng chúng vẫn chia nội dung của mình thành các màn hình riêng lẻ chỉ hiển thị từng bài một. Điều này cho phép các doanh nghiệp truyền đạt những gì họ muốn (họ là ai, họ làm gì, tại sao bạn cần họ) mà không làm cho khách truy cập bị choáng ngợp.
Trang TheraVape do arosto thiết kế và trang Tu Biomics do Yagnik K. thiết kế đều là những ví dụ tuyệt vời về cách sử dụng bố cục này cho các trang web kinh doanh. Cả hai trang web chia nhỏ văn bản của họ thành các đoạn nhỏ, dễ đọc, sau đó tách các đoạn văn này bằng các thay đổi nền và hình ảnh khác nhau. Điều này cho phép khách truy cập nhận từng điểm một, nâng cao khả năng ghi nhớ và công nhận sau này.
Các trang web kinh doanh có thể tiến xa hơn cách bố trí này bằng cách thống nhất từng phần nội dung với hình ảnh liên kết. Trang danh mục đầu tư của Matt Brown, được thiết kế bởi 2ché, sử dụng chủ đề khoa học, vì vậy hình ảnh liên kết là một đường ống phòng thí nghiệm chạy qua từng thiết bị phòng thí nghiệm khác nhau tại mỗi điểm dừng. Nhà thiết kế Tushar K∎ sử dụng một kỹ thuật tương tự cho trang web 2bak, kết nối mỗi hình ảnh với một con đường cách điệu, hoàn chỉnh với các phương tiện giao thông thu nhỏ.
Đề nghị cho:
Cuối cùng, chúng tôi kết thúc với một kiểu bố cục trang web tránh tổ chức và bao trùm sự hỗn loạn. Theo định nghĩa, sự bất đối xứng tạo ra một bầu không khí mất cân bằng hoặc lộn xộn có chủ ý. Đó là một lựa chọn tồi cho các thương hiệu truyền thống và mang tính trang trọng cao, nhưng đối với các thương hiệu muốn trở nên sắc sảo, phản văn hóa hoặc đi trước thời đại thì đó là lựa chọn hoàn hảo.
Ví dụ: hãy xem cách người New York sắp xếp các tin bài trên trang chủ của họ. New Yorker có thương hiệu nổi tiếng là phương tiện truyền thông chính thống “thay thế” (mặc dù nó phổ biến), và do đó, bố cục bất đối xứng giúp xây dựng bầu không khí mà nó đang diễn ra.
Các doanh nghiệp nhỏ hơn muốn nổi bật cũng có thể tận dụng phong cách bài trí này. Cả thiết kế của arosto cho Agency X và thiết kế của Infinity デ ザ イ ナ ー cho Si Vales Valeo đều sử dụng cùng một phương pháp — một hình ảnh anh hùng có ý nghĩa ở nền, với các mẫu kim cương bất đối xứng phủ lên trên. Điều này làm cho thương hiệu của họ trở nên tiên tiến và hiện đại, ngay cả khi nó không thu hút những khách truy cập có tư tưởng bảo thủ hơn.
Bố cục Geo Waves, được thiết kế bởi Adam Muflihun, có một sự thay đổi độc đáo về bố cục bất đối xứng bằng cách thêm các hiệu ứng động. Bản thân bố cục tĩnh là không đối xứng, với một khối lớn ở bên trái và hai khối nhỏ hơn ở bên phải. Bằng cách thêm hoạt ảnh và các hiệu ứng chuyển động ở những nơi khác nhau và vào những thời điểm khác nhau, nó làm cho toàn bộ trang có vẻ rực rỡ và sống động hơn. Thật thú vị khi xem và đó là điểm hấp dẫn chính trong bất kỳ thiết kế trang web nào.
Không có loại bố cục trang web nào “tốt nhất”; cái phù hợp với bạn tùy thuộc vào mục tiêu và thương hiệu của bạn. Cân nhắc xem bạn phải hiển thị bao nhiêu nội dung; các trang web nhỏ hơn có thể bị tiêu điểm hoặc mẫu Z, nhưng nếu bạn có nhiều điều để nói, bạn có thể muốn sử dụng lưới hoặc cột đơn. Tính cách xây dựng thương hiệu của bạn cũng vậy, không chỉ nên xác định bố cục mà còn phải xác định phong cách bạn sử dụng với bố cục của mình.
Nếu bạn gặp khó khăn khi quyết định, hãy thử duyệt trực tuyến và ghi chú lại bố cục nào được các trang web bạn thích sử dụng. Bạn có thể thấy mình đặc biệt bị thu hút bởi một loại hơn những loại khác và có thể khách hàng mục tiêu của bạn cũng sẽ như vậy.
Bạn muốn có được trang web hoàn hảo cho doanh nghiệp của mình?
Làm việc với các nhà thiết kế tài năng của chúng tôi để biến điều đó thành hiện thực.
Nguồn: 99designs
Bao bì thực phẩm đóng một vai trò không thể thiếu trong ngành công nghiệp thực phẩm. Trong bài viết này, chúng tôi sẽ trình bày 9 ví dụ về bao bì thực phẩm mà chúng tôi yêu thích. Những ví dụ này không chỉ đáp ứng các yêu cầu kỹ thuật mà còn mang tính thẩm mỹ cao và đảm bảo sự an toàn và bảo quản cho thực phẩm.
Việc in chương trình sự kiện đòi hỏi sự cẩn thận và chính xác để đảm bảo thông tin được truyền đạt một cách rõ ràng. Hướng dẫn in cho chương trình sự kiện “The BeBrilliant” gồm các bước kỹ thuật chi tiết và đảm bảo tiêu chuẩn chuyên nghiệp. Trong hướng dẫn này, chúng tôi cung cấp các gợi ý về định dạng, kiểu chữ, lựa chọn giấy và quy trình in ấn để mang đến cho bạn một kết quả hoàn hảo.
Khi yêu cầu in ấn tùy chỉnh, có những câu hỏi quan trọng cần được đặt ra để đảm bảo thành công của dự án. Như tùy chọn màu sắc, kích thước, chất liệu, số lượng và các yêu cầu khác. Các câu hỏi này giúp xác định đúng nhu cầu của khách hàng và đảm bảo rằng in ấn đáp ứng đầy đủ yêu cầu kỹ thuật và thẩm mỹ.
Lợi ích và hạn chế của tờ rơi cho trường học và cao đẳng
Tờ rơi là một công cụ truyền thông truyền thống phổ biến cho trường học và cao đẳng. Nó giúp tăng cường nhận thức về sự kiện và thông tin chính sách mới của trường. Tuy nhiên, tờ rơi có hạn chế về sự khuyến khích tham gia và tương tác đối tác. Để tận dụng tối đa tiềm năng của tờ rơi, trường học và cao đẳng cần xem xét cách kết hợp với các kênh truyền thông kỹ thuật số khác và cải thiện nội dung để thu hút sự chú ý của người đọc.
Các tuyên bố sai lệch về xanh làm vỏ là một thách thức đối với nhà sản xuất và người tiêu dùng. Bài viết này sẽ cung cấp những chỉ dẫn kỹ thuật và chuyên nghiệp để bạn tránh những tuyên bố này, đảm bảo sự tin cậy và chất lượng sản phẩm của bạn.
Chứng nhận Cyber Essentials: Khẳng định sự chuyên nghiệp với chứng chỉ
Chứng nhận Cyber Essentials là tiêu chuẩn tiên phong trong lĩnh vực bảo mật thông tin, giúp xác nhận khả năng đảm bảo an toàn mạng cho tổ chức. Chứng chỉ này không chỉ góp phần tăng cường sự tin cậy từ khách hàng mà còn tạo điểm khác biệt chuyên nghiệp cho doanh nghiệp. Với Cyber Essentials, cơ hội thâm nhập bảo mật sẽ giảm, giúp doanh nghiệp bảo vệ thông tin và tạo lòng tin từ khách hàng. Hãy cùng khẳng định sự chuyên nghiệp với chứng chỉ này!
