Nguyên tắc thiết kế áp dụng cho các trang web: nơi sáng tạo gặp chiến lược

21 lượt xem 05/09/2023 Bài viết nổi bật
Mẹo nhỏ: Để tìm kiếm chính xác các bài viết về thủ thuật wordpress hay, hãy search trên Google với cú pháp: "Từ khóa" + "websitedq". (Ví dụ: các chèn nút "Gọi ngay" trong sản phẩm Woocomerce). Tìm kiếm ngay

Học cách tạo một trang web là một nỗ lực thú vị, và đó là một quá trình mở ra hộp Pandora của các quyết định sáng tạo. Khi bạn bắt đầu thiết kế, bạn sẽ đặt ra các câu hỏi như: Tôi nên dùng hệ màu nào? Tôi nên bao gồm hiệu ứng hoạt hình không? Loại menu điều hướng nào là tốt nhất?

Bất kỳ nhà thiết kế nào cũng sẽ nói với bạn, những quyết định sáng tạo như thế này tốt nhất nên được đưa ra dựa trên các nguyên tắc hướng dẫn.

Đầu tiên, việc chú ý đến các nguyên tắc thiết kế sẽ giúp bạn đưa ra những lựa chọn tự tin, đảm bảo rằng trang web của bạn thành công về cả hình thức và chức năng.

Trong bài viết này, chúng tôi sẽ giới thiệu từng nguyên tắc này, tại sao chúng quan trọng và làm thế nào chúng được áp dụng vào thiết kế web. Với các quy tắc để tuân theo và mục tiêu trong tâm trí, bạn đã có lợi thế khi tạo trang web của mình.

Những nguyên tắc thiết kế là gì?

Nguyên tắc thiết kế là một bộ hướng dẫn được những nhà thiết kế hiện đại tuân theo – từ kiến trúc sư đến những nhà thiết kế đồ họa và mọi người ở giữa. Những nguyên tắc này bao gồm các khái niệm bắt nguồn từ thế giới nghệ thuật. Chúng được điều chỉnh để hình thành quy trình thiết kế để tạo ra kết quả vừa hấp dẫn về thẩm mỹ vừa tiện ích.

Có rất nhiều tranh cãi về số lượng nguyên tắc chính thức tồn tại, vì mỗi lĩnh vực thiết kế đều yêu cầu phải suy nghĩ về các yếu tố mới. Hôm nay, chúng tôi sẽ đề cập đến bảy ý tưởng cơ bản nhất liên quan đến thiết kế web – cộng thêm khái niệm tổng hợp về sự thống nhất để chỉ ra cách những ý tưởng này sẽ hoạt động cùng nhau:

Cân đối (Balance)

Khi nhắc đến từ cân đối, một trong những điều đầu tiên mà bạn nghĩ đến là trọng lượng. Bạn có thể hình dung ra một cái cân cổ điển đang đo trọng lượng của một vật so với vật khác.

Khi bạn thiết kế một trang web, hãy xem xét rằng trọng lượng vật lý của một chiếc cân tương đương với trọng lượng hình ảnh của các yếu tố bạn sử dụng. Trang web của bạn giống như bất kỳ bức tranh nào khác, bao gồm cả các yếu tố thẩm mỹ và chức năng. Để đạt được sự cân đối, bạn phải xác định trọng lượng của từng phần và đảm bảo chúng không áp đảo lẫn nhau trong cấu trúc của trang web.

Có hai loại cân đối chính mà bạn có thể hướng tới: cân đối đối xứng và cân đối không đối xứng. Chúng ta sẽ phân biệt hai loại này dưới đây, sử dụng các ví dụ về giao diện trang web để minh họa những gì chúng có thể thực hiện trong thiết kế của bạn:

Cân đối đối xứng (Symmetrical balance)

Nếu có một đường thẳng dọc chạy xuống trang web của bạn, cân đối đối xứng sẽ ngụ ý rằng trọng lượng hình ảnh bằng nhau ở cả hai bên của đường thẳng đó. Cân đối đối xứng mang lại một trải nghiệm hình ảnh gợi lên sự nhất quán và chuyên nghiệp.

Đưa ra một góc nhìn sâu hơn, lý thuyết Gestalt sẽ gợi ý thêm một lợi ích khi áp dụng cân đối đối xứng. Theo nguyên tắc thiết kế Gestalt, đối xứng là cách lý tưởng để đơn giản hóa việc xử lý dữ liệu hình ảnh cho người dùng.

Lựa chọn thiết kế này là một cách để mang lại cho người dùng một trải nghiệm điều hướng đơn giản trên trang web của bạn. Vì thế, đây có lẽ là phương pháp phù hợp nhất cho một cửa hàng trực tuyến. Hãy xem trang web sau đây của In Gold We Trust. Trong trường hợp này, việc sử dụng thiết kế đối xứng hoàn toàn phù hợp với những người mua sắm đang tìm kiếm các mặt hàng yêu thích của họ mà không bị phân tâm.

Cân đối không đối xứng (Asymmetrical balance)

Cân đối không đối xứng được đạt được khi trọng lượng hình ảnh của các yếu tố bằng nhau ở cả hai bên, nhưng sự sắp xếp và thứ tự của chúng thay đổi (nghĩa là, không giống như bố cục đối xứng, điều này sẽ không phản ánh hình ảnh).

Sử dụng không đối xứng là một cách tuyệt vời để thu hút người xem và có một thiết kế web động hơn, giống như trang web của Sharon Radisch dưới đây. Bố cục không đều của trang chủ tạo ra một hiệu ứng thu hút trong khi duy trì cảm giác cân đối. Quyết định thẩm mỹ cũng phục vụ mục đích phân loại các bộ sưu tập ảnh trên danh mục trực tuyến của cô theo từng hạng mục.

Tương Phản (Contrast)

Tương phản có nghĩa là đặt các yếu tố đối lập cạnh nhau để một trong số chúng nổi bật. Hiệu ứng này tạo ra sự hứng thú và đòi hỏi sự chú ý của người xem.

Khi áp dụng nguyên tắc này vào thiết kế web, hãy nghĩ về các mục cụ thể mà bạn muốn nhấn mạnh và cách bạn sẽ làm cho chúng đa dạng so với nội dung xung quanh chúng. Có lẽ cách rõ ràng nhất để áp dụng tương phản là khi làm việc với bảng màu trang web của bạn và chọn những màu sắc phù hợp với nhau.

Tương phản cũng có thể được thể hiện qua các font chữ, hình ảnh và thậm chí việc sử dụng không gian trắng trên trang web của bạn. Ví dụ, việc sử dụng hai font chữ khác nhau – ví dụ, một serif và một sans serif – sẽ tạo ra một sự tương phản sinh động có thể nhấn mạnh nội dung.

Trong ví dụ dưới đây, trang web nhà hàng Modern Bakery sử dụng một bố cục thiết kế đơn giản trong khi thực hiện nguyên tắc tương phản. Sự đối lập giữa nền màu vàng nhạt và các yếu tố màu đậm, như văn bản và hình ảnh, tạo ra một thiết kế hấp dẫn và động lực. Bạn có thể thấy rằng họ cũng đã sử dụng một loạt các font chữ, một font sans serif hiện đại được kết hợp với script để tạo ra hiệu ứng “nổi bật”.

Nhấn mạnh (Emphasis)

“Một ‘thiếu hữu ích trong nhóm các yếu tố có trọng lượng ngang nhau buộc chúng phải cạnh tranh với nhau. Người đọc sau đó phải tự tìm ra điểm mở đầu của họ, điều này là một công việc khó khăn,” Alex W. White đã viết trong cuốn hướng dẫn quan trọng của ông, The Elements of Graphic Design. Đi theo hướng này, bạn nên tìm ra ít nhất một yếu tố cụ thể để nổi bật trên trang web của bạn để khách truy cập không bị lạc đường – và điều này đòi hỏi nhấn mạnh.

Nhấn mạnh có thể đạt được bằng cách sử dụng nguyên tắc tương phản được thảo luận ở trên hoặc bằng cách tích hợp các công cụ trực quan khác có thể giúp một yếu tố cụ thể nổi bật. Những công cụ tiện ích này bao gồm (nhưng không giới hạn): hoạt hình, nút chiến lược, sử dụng không gian trắng, văn bản hấp dẫn và phông chữ đậm.

Dù đó là logo của bạn, một CTA, hoặc một hình ảnh; nếu có điều gì đó trên trang web của bạn mà bạn muốn khách truy cập ưu tiên, việc áp dụng nguyên tắc nhấn mạnh sẽ cải thiện thiết kế của bạn. Việc làm cho một số khía cạnh của bố cục của bạn trở nên nổi bật về mặt hình ảnh cũng là thực hành UX tốt, vì bạn sẽ giúp khách truy cập tìm thấy những gì họ cần và hoàn thành hành động của họ.

Hãy xem trang web của OK Drugs dưới đây; bạn có thể thấy được những yếu tố nào mà cửa hàng trực tuyến đã chọn để nhấn mạnh trên trang chủ của họ? Được bổ sung bởi nền màu cam và hình ảnh được thiết kế tốt, CTA quan trọng nhất của cửa hàng CBD (“Mua ngay”) là lớn, đậm, viết hoa – và chắc chắn sẽ thu hút sự chú ý của người dùng. Vì nó được nhấn mạnh trên trang chủ, nó sẽ có khả năng khởi đầu trải nghiệm mua sắm của khách truy cập.

Chuyển động (Movement)

Chuyển động thu hút sự chú ý, nắm bắt ánh mắt và hướng dẫn nó với một thiết kế động lực hơn. Để tạo ra cảm giác chuyển động, cần thay đổi các yếu tố và sắp xếp chúng theo cách khiến người xem điều hướng xung quanh một bố cục. Trong thiết kế số (như trang web), nguyên tắc này càng dễ áp dụng hơn, vì công nghệ cho phép chúng ta dễ dàng tích hợp hiệu ứng hoạt hình trực tiếp vào trang của bạn.

Một cách áp dụng nguyên tắc chuyển động là bao gồm hoạt hình trong thiết kế trang web của bạn. Ví dụ, sử dụng video làm nền hoặc hiệu ứng di chuyển và cuộn. Nhưng ngay cả không có hoạt hình, thiết kế web vẫn có thể có chuyển động – nghiêng nội dung theo hướng chéo, sử dụng các mẫu bố cục F và Z, hoặc rải rác hình ảnh trên một trang web đều là cách để tạo ra một trải nghiệm trang web sống động.

Hãy xem danh mục minh họa của Ivy Chen dưới đây. Việc sử dụng cuộn parallax – cắt một trang thành các dải khác nhau di chuyển ở các tốc độ khác nhau – tạo ra một trang chủ hấp dẫn bằng cách từ từ tiết lộ các lớp nội dung cho người xem. Chất lượng ba chiều tạo ra một trải nghiệm thú vị và cẩn thận không làm choáng váng người xem với quá nhiều tiếng ồn hình ảnh.

Lặp lại (Repetition)

Khi được thực hành đúng cách, nguyên tắc lặp lại sẽ tạo ra những mô hình rất hài lòng với mắt. Không chỉ vậy, việc lặp lại còn hỗ trợ sự nhất quán, một yếu tố quan trọng khi đề cập đến việc thực thi sự thống nhất của một bố cục.

Trên trang web của bạn, bạn có thể tạo ra một thiết kế hấp dẫn bằng cách lặp lại các yếu tố hình ảnh nhất định. Ví dụ, thay đổi giữa cùng một phông chữ và màu sắc trên các phần khác nhau của trang của bạn. Điều này giúp khách truy cập nhận biết độc quyền trang web của bạn và sẽ củng cố mối liên kết của họ với thương hiệu của bạn.

Dưới đây, tổ chức phi lợi nhuận Heroines áp dụng nguyên tắc lặp lại với sự giúp đỡ của một bảng màu nhất quán. Cùng một gam màu nữ tính phản ánh thương hiệu của họ được sử dụng xuyên suốt trang web. Do sự nhất quán này, trang web cũng có thể xử lý các lựa chọn thiết kế táo bạo như biểu ngữ cuộn và trang không đối xứng – làm cho nó thu hút sự chú ý, có thương hiệu và chuyên nghiệp.

Hệ thống phân cấp (Hierarchy)

Hệ thống phân cấp là một trong những nguyên tắc thiết kế quan trọng nhất. Như tên gọi, điều này có nghĩa là nổi bật những yếu tố hình ảnh quan trọng nhất đối với một bố cục. Nếu không thiết lập hệ thống phân cấp, rất có thể những người xem một thiết kế sẽ coi mỗi yếu tố đều quan trọng như nhau.

Khi áp dụng nguyên tắc này vào thiết kế trang web, bạn cần suy nghĩ về những phần bạn muốn nổi bật nhất, và những phần nào ít quan trọng hơn. Tiếp theo, bạn có thể thiết lập hệ thống phân cấp của những yếu tố này bằng cách thao tác bất kỳ ba yếu tố sau đây:

Kích thước (Size)

Mọi người sẽ chú ý đến những yếu tố lớn nhất của một bố cục trước tiên, vì nó cho thấy sự quan trọng. Hãy đảm bảo những chi tiết như tên doanh nghiệp của bạn hoặc CTA (kêu gọi hành động) được in bằng kích thước lớn hơn so với nội dung viết khác của bạn.

Màu sắc (Color)

Bất cứ khi nào bạn muốn một cái gì đó nổi bật, màu sắc sẽ rất hữu ích. Ví dụ, việc sử dụng màu sắc tương phản cao cho văn bản và biểu tượng quan trọng sẽ giúp chúng được chú ý.

Vị trí (Position)

Vị trí của một yếu tố trong một thiết kế nói rất nhiều về mức độ quan trọng của nó. Khi các mục được đặt ở phần trên cùng của một trang web (khu vực được hiển thị trên trang trước khi chúng ta cuộn), chúng sẽ được xem trước và có vẻ như được ưu tiên hơn so với các yếu tố dưới đây.

Trong ví dụ dưới đây, Donna Gavriel đã thiết lập một thứ tự phân cấp rõ ràng trên trang web fitness của mình với một số mục quan trọng ở phần trên cùng. Điều đầu tiên chúng ta chú ý trong tiêu đề trang web của cô là những yếu tố chiến lược như logo của cô và các CTA mạnh. Những yếu tố này nổi bật nhờ sự tương phản của màu sắc sáng của chúng so với nền trắng của tiêu đề. Dưới đây, mắt chúng ta được thu hút bởi một văn bản lớn, dẫn trực tiếp đến một nút CTA khác. Các yếu tố nổi bật được tô điểm bởi hình ảnh nền của cô và khuyến khích khách truy cập đăng ký một buổi tập luyện.

Không gian trắng (White space)

Không gian trắng chỉ đến những khu vực trong một sáng tạo không có các yếu tố hình ảnh. Điều này bao gồm lề của một trang web, khoảng trống giữa các khối văn bản và không gian tiêu cực tìm thấy giữa hoặc xung quanh hình ảnh. Mặc dù nó được gọi là “trắng”, không gian trắng có thể bao gồm ảnh nền, màu sắc rắn hoặc thậm chí các mẫu trong thiết kế web.

Đây là một nguyên tắc hướng dẫn trong thiết kế web và có rất nhiều lợi ích khi chú ý đến nó. Ví dụ, không gian trắng có thể được sử dụng để cải thiện trải nghiệm người dùng, làm cho trang web của bạn dễ đọc hơn. Hơn nữa, việc cho phép một số yếu tố có không gian để thở sẽ tránh lộn xộn và tạo ra một thiết kế cân đối hơn – điều mà mọi khách truy cập đều đánh giá cao.

Thêm vào đó, không gian trắng có thể tạo ra các sáng tạo động lực hơn. Hãy xem trang web của Bod Drinks dưới đây. Nguyên tắc của không gian trắng có một chức năng thực tế ở đây, tạo ra nhiều không gian giữa các yếu tố như mục điều hướng và văn bản. Nhưng không gian trắng cũng được sử dụng để tạo ra một chuyển động hấp dẫn trên trang chủ, sẽ thu hút và chỉ dẫn ánh nhìn của người xem.

Đồng Nhất (Unity)

Đồng nhất là yếu tố quan trọng để tạo nên một trang web tốt. Điều này chỉ đến kết quả cuối cùng về cách thức các yếu tố khác nhau hoạt động cùng nhau – điều này hoàn toàn xứng đáng với vị trí của nó như là nguyên tắc thiết kế cuối cùng và quan trọng nhất. Để đạt được sự đồng nhất, mỗi mục trên trang web đều nên có một vị trí và vai trò cụ thể trong bố cục của bạn. Không có gì nên vô ích hoặc ngẫu nhiên.

Trang web của Mikaela Ruben là ví dụ hoàn hảo về điều này. Thiết kế của cô ấy đầy đủ các yếu tố đa dạng như cuộn parallax, nền video, thanh tìm kiếm và nhiều hơn thế. Mảng thông tin chi tiết này có thể dễ dàng làm cho người xem cảm thấy choáng ngợp. Tuy nhiên, trang web của Mikaela đã triển khai thành công bảy nguyên tắc ở trên, dẫn đến một thiết kế hài hòa và thống nhất.

Trả lời

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 *


Gọi điện ngay