0981-80-80-60 support@vhweb.vn
Thiết kế không chỉ là một sản phẩm được thiết kế đơn thuần, mà thiết kế còn là tiếp thị. Thiết kế là một sản phẩm được bạn tạo ra và vận hành. Tôi càng hiểu thêm về thiết kế, thì tôi càng mở rộng vốn hiểu biết của mình.

Bạn đang cần thiết kế website để hỗ trợ kinh doanh, cũng như xây dựng thương hiệu?. Đừng chỉ phó mặc cho đơn vị hỗ trợ, hãy tự mình nắm rõ 8 nguyên tắc dưới đây.

Nguyên tắc thứ nhất phân cấp thị giác trong thiết kế website

Đây là một trong những yếu tố khá quan trọng đối với một trang web. Bởi người dùng có thể nhìn thấy được và đưa ra đánh giá ngay lập tức. Do đó, một công ty thiết kế web chuyên nghiệp sẽ giúp bạn có được điều này.

nguyên tắc phân cấp hình ảnh trong quá trình thiết kế website

Sẽ có những chi tiết trong bố cục website của bạn giữ vai trò quan trọng hơn các phần còn lại (biểu mẫu, lời kêu gọi hành động, đề xuất giá trị). Và bạn muốn mọi người dành nhiều sự chú ý vào các phần ít quan trọng còn lại. Nhưng nếu trang web của bạn gồm 10 mục chính. Thì thật khó để khách hàng lựa chọn? Bạn muốn người dùng kích chọn vào đâu? Thiết kế thêm các đường link liên kết sẽ thay bạn giải quyết vấn đề này.

Ví dụ: Hãy sắp xếp thứ tự các mục của 1 trang web theo mức độ quan trọng

Bạn không hề biết gì về các mục này nhưng vẫn có thể dễ dàng sắp xếp chúng. Đây chính là phân cấp thị giác. Tự người dùng sẽ có những lựa chọn khi nhìn thấy. Việc của thiết kế là điều hướng người dùng vào các mục quan trọng.

Việc cài đặt thêm công cụ kêu gọi khách hàng hành động “Add to cart”. Thông qua việc tích hợp các màu sắc lại với nhau, cũng có thể tạo nét phá cách trong phân cấp thị giác.

Khởi động chiến dịch với mục tiêu kinh doanh cụ thể.

Bạn nên xếp hạng các yếu tố sẽ xuất hiện trên website trên nền tảng mục tiêu kinh doanh. Nếu vẫn chưa xác định được mục tiêu cụ thể, thì bạn sẽ không biết nên ưu tiên điều gì?.

Ví dụ trang web của Williams Sonoma chuyên bán các dụng cụ nấu ăn ngoài trời.

Chi tiết bắt mắt nhất là miếng thịt lớn ngon lành (khiến tôi muốn ăn ngay lập tức). Sau đó là tiêu đề và nút kêu gọi hành động (hãy mua nó ngay đi).

Một đoạn văn ngắn nằm ngay dưới tiêu đề, cùng một banner chuyển động kết hợp với đường dẫn ở đầu trang .Đây là phương pháp phân cấp thị giác đạt hiệu quả khá tốt.

Nguyên tắc thứ 2 tỷ lệ thiết kế website chuẩn 

Một website với tỷ lệ hiển thị cân bằng sẽ là điểm cộng cho bạn. Tỷ lệ vàng : 1.618 (varphi) tạo nét thẩm mỹ (là con số này rất được các designer tin dùng).

Sau đó, có các dãy Fibonacci trên mỗi thuật ngữ được định nghĩa là tổng của hai từ trước đó: 0, 1, 1, 2, 3, 5, 8, 13, 21 và cứ tiếp tục kéo dài như thế. Một điều thú vị ở đây là chúng tôi có hai chủ đề không liên quan đến nhau trên cùng một con số cụ thể.

Cách tỷ lệ vàng được ứng dụng trong thiết kế website.

Nếu chiều rộng của bố cục là 960px, hãy chia số này cho 1.1618 ( =593px). Giờ thì bạn đã biết khu vực dành cho phần nội dung nên là 593px và phần sidebar là 367px. Tương tự khi chiều dài của trang web là 760px và 290px (760 / 1.1618 = ~ 470).

Tỷ lệ vàng khi thiết kế website hiện nay bạn nên biết

Nguyên tắc thiết kế web thứ 3 Hick’s Law

Hick’s Law cho rằng: “Mọi sự lựa chọn bổ sung đều làm kéo dài thời gian cần thiết để đưa ra một quyết định chính xác”.

Điều này hoàn toàn đúng khi áp dụng vào thiết kế website hiện nay. Việc đưa quá nhiều tiện ích – hỗ trợ  sẽ khiến họ không thể đưa ra quyết định ngay lập tức. Nhưng nếu khéo léo để họ chỉ cần lựa chọn 1 trong  2. Thì ngay lập tức bạn sẽ nhận được kết quả.

Nhiều đơn vị thiết kế cố gắng nhồi nhét thật nhiều vào trang web mà không có chọn lọc. Khiến người truy cập rất khó để thao tác và sử dụng website hiệu quả. Đôi khi, cón có những công cụ hầu như không được sử dụng đến.

Vì vậy,  để làm tăng trải nghiệm thú vị trên trang web của khác hàng. Chúng ta cần phải loại bỏ nhiều công cụ lựa chọn không cần thiết. Quá trình loại bỏ các thanh tùy chọn gây xao nhãng cần có tính liên tục. Cũng như không bị gián đoạn trong công cuộc thiết kế web của designer.

Trong thời đại của vô vàn sự lựa chọn. Tất cả mọi người đều cần một bộ lọc hỗ trợ hoạt động tốt. Nếu bạn cần một website bán hàng. Thì hãy thiết lập thêm một bộ lọc để khách hàng dễ dàng truy cập và đưa ra quyết định của mình.

Nguyên tắc thiết kế web thứ 4 Fitt’s Law

Fitt’s Law quy định thời gian cần thiết để khách hàng di chuyển đến trang đích. Ví dụ: kích chuột vào một nút có sẵn nhằm rút ngắn khoảng cách trang mà họ muốn xem. Nói cách khác, khi thiết kế nên bố trí thêm các nút lựa chọn, điều hướng. Sau đó đặt link liên quan vào bên trong, để khách hàng có thể di chuyển giữa các trang dễ dàng.

Ví trí để đặt trong một trang web (trên màn hình desktop) thường là góc dưới bên phải. Tuy nhiên, điều này không áp dụng trong tất cả trường hợp thiết kế.  Chúng còn phụ thuộc vào cách cuộn trang và tùy thuộc vào hệ điều hành.

Lưu ý: Không phải cứ lớn là tốt. Một nút chiếm quá nửa màn hình cũng không phải là điều tốt. Một nút nhỏ sẽ làm tăng tỉ lệ kích chuột lên 20%. Trong khi một nút quá lớn được thiết kế lớn hơn 20% lại không đạt được tác dụng như mong muốn.

Điều đặc biệt là Fitt’s Law được tính theo công thức logarit nhị phân. Đồng nghĩa với việc kết quả dự đoán tỉ lệ kích chuột của đối tượng khách hàng, thường sẽ chạy dọc theo đường cong chứ không phải đường thẳng từ trên xuống dưới.

Tương tự với “quy tắc trong kích thước của mục tiêu”.

Kích thước của một nút phải tỉ lệ thuận với tần suất sử dụng như dự kiến. Bạn có thể kiểm tra lại số liệu thống kê các nút được người dùng sử dụng nhiều nhất. Và các nút phổ biến được thiết kế lớn hơn (dễ kích vào hơn).

Thử tưởng tượng xem nếu có một mẫu đơn mà bạn muốn người truy cập điền vào. Ở cuối biểu mẫu, có hai nút : “ Submit” và “Reset” (khu vực trống). Chắc chắn là 99,9999% người dùng sẽ nhấn vào nút “Submit”. Do nút phải có kích thước lớn hơn nhiều so với “Reset”

Nguyên tắc thiết kế web thứ 5 quy tắc một phần ba

Bạn nên chèn thêm hình ảnh cho trang web của mình. Một hình ảnh rõ ràng sẽ truyền đạt ý tưởng của bạn tốt hơn bất kì văn bản miêu tả nào.

quy tắc một phần ba trong thiết kế web hiện đại

Một hình ảnh khi đưa vào sẽ phải tuân theo quy tắc “một phần ba”. Nghĩa là bức ảnh được chia thành chín phần bằng nhau. Bởi hai đường ngang ngang nhau và hai đường thẳng đứng cách đều nhau. Các phần quan trọng nên được đặt dọc theo các đường này hoặc các giao điểm của chúng.

Hình ảnh bên phải trông thu hút hơn đúng không? Đây chính là quy tắc một phần ba.

Việc áp dụng các hình ảnh đẹp và kích thước lớn là một phần của thiết kế web (không áp dụng cho Pinterest). Áp dụng quy tắc này sẽ khiến website trở nên thú vị trong mắt người dùng hơn và có nét hấp dẫn riêng biệt.

Nguyên tắc thiết kế web thứ 6 Gestalt’s Design Laws

Tâm lý học Gestalt là một lý thuyết về tâm trí và não bộ. Nguyên tắc của nó nói rằng, khi con người nhìn thấy một nhóm vật thể. Chúng ta luôn thấy tổng thể nhiều hơn là thấy từng bộ phận được chia ra riêng rẽ của chúng.

Dưới đây là điều mà tôi muốn nói: Người dùng luôn nhìn vào toàn bộ trang web trước tiên. Sau đó họ mới bắt đầu chú ý đến tiêu đề, menu, cuối trang,v.v. Là một trong những nhà nghiên cứu hành động và cử chỉ của con người, Kurt Koffka cho rằng: Tổng thể không phải là sự tổng hợp của từng bộ phận.

Có 8 cách gọi trong Gestalt Design Laws cho phép chúng ta tính toán cảm nhận của người dùng, bao gồm:

+ Sự gần nhau

Người ta nhóm các yếu tố khác nhau được đặt gần nhau lại thành một nhóm. Chúng được coi như cùng một nhóm:

Để thiết kế web phát huy tác dụng, bạn cần đảm bảo những yếu tố KHÔNG có liên quan không bị xem là cùng một nhóm. Tương tự, bạn muốn nhóm các thành phần có thiết kế nhất định lại với nhau như: menu điều hướng, cuối trang,…. Để thể hiện cho người dùng biết chúng tạo thành một tổng thể thống nhất. Craigslist sử dụng quy tắc này để hướng dẫn khách hàng biết danh mục nào là “bán”:

+ Nguyên tắc tương tự

Chúng tôi nhóm những yếu tố tương tự lại với nhau. Sự giống nhau này thường là hình dạng, màu sắc, bóng, hoặc do nhiều nguyên nhân khác.

Trong ví dụ dưới đây, chúng tôi nhóm các chấm đen lại thành một nhóm và chấm trắng thành nhóm còn lại, bởi vì – đơn giản thôi, các chấm đen hoàn toàn tương tự nhau.

Codeschool gom các hộp trích dẫn tương tự nhau lại, vì vậy chúng tôi thấy các trích dẫn này thuộc cùng một nhóm.

Luật tương tự - một trong những điều khá quan trọng để website hiệu quả

+ Nguyên tắc đóng cửa

So với hình dạng đầy đủ, thì nguyên tắc đóng cửa nói rằng: “Khi một số bộ phận của toàn bộ hình ảnh bị thiếu khuyết. Nhận thức của con người sẽ lấp đầy các chỗ trống này lại”. Chúng ta “nhìn thấy” hai ô vuông được phủ trên bốn vòng tròn mặc dù không có bất kỳ hình dạng nào trong số đó thực sự tồn tại trong đồ họa web.

Nếu không có “Nguyên tắc đóng cửa”, chúng ta sẽ chỉ thấy các dòng kẻ khác nhau có độ dài khác nhau. Nhưng với nguyên tắc đóng cửa, chúng ta nối các đường thẳng lại thành một hình dạng hoàn chỉnh.

Sử dụng Nguyên tắc đóng cửa có thể tạo nét độc đáo khi thiết kế logo hoặc những yếu tố thiết kế thú vị. 

+ Nguyên tắc đối xứng:

Tâm trí của con người luôn nhận dạng các đối tượng như một hình thể đối xứng với nhau. Với một điểm ở trung tâm ở giữa. Tạo cảm giác dễ chịu khi phân chia đối tượng thành các bộ phận tương xứng với nhau.

Khi chúng ta thấy hai phần tử đối xứng không liên kết với nhau. Từ trong tâm trí chúng ta sẽ tự động nối chúng lại để tạo thành một hình ảnh hoàn chỉnh.

Người ta thích phong cách đối xứng hơn là không đối xứng. Việc cân bằng ba cột và các đường cong tạo thêm sự thích thú trong thiết kế của BootB

+ Nguyên tắc đa ổn định

Chúng ta có xu hướng cảm nhận vật thể theo đường thẳng di chuyển dọc theo một đường. Chúng ta cũng nhóm các đối tượng có cùng xu hướng chuyển động lại với nhau.

Ví dụ 1: Mọi người thể hiện tinh thần hợp tác nhờ việc giơ tay chỉ vào một nơi nào đó. Bởi vì họ đều giơ tay chỉ vào cùng một hướng. Bạn có thể áp dụng nguyên tắc này để dẫn sự chú ý của người dùng trên website. Như biểu mẫu đăng kí, đề xuất giá trị,…

Ví dụ 2: Nếu có một loạt các dấu chấm di chuyển. Một nửa các dấu chấm di chuyển lên trên, trong khi nửa kia đang di chuyển xuống dưới. Chúng ta sẽ nhận diện các dấu chấm di chuyển lên trên, xuống dưới là hai phần hoàn toàn tách biệt.

+ Nguyên tắc liên tục

Con người thường cảm nhận một dòng kẻ như một cách tiếp tục phương hướng của nó. Trong trường hợp có giao điểm giữa các đối tượng này (ví dụ như những đường kẻ). Chúng ta thường cảm thấy là hai thực thể không hề bị gián đoạn mà thống nhất với nhau. Cảm nhận này vẫn tồn tại rõ rệt khi áp dụng vào các đường chồng chéo.

Fixel sử dụng công cụ này để kết nối khuôn mặt với Bios:

Một số Nguyên tắc khác như Figure và Ground hoặc Law of Good Gestalt. Các đối tượng có xu hướng được nhóm lại với nhau. Nếu chúng tạo thành một mẫu có hình dạng tương tự, đơn giản và có trật tự – như vòng Olympic. Nhưng tôi nghĩ đây là những Nguyên tắc thông dụng nhất.

Nguyên tắc thứ 7 không gian trống và thiết kế web đơn giản

Không gian trống là phần của trang web bị “trống”. Đó là không gian giữa đồ họa, lề, gáy, khoảng cách giữa các cột, khoảng cách giữa các dòng hoặc hình ảnh.

Nó không chỉ được xem như một “không gian trống” – đây là một nhân tố thiết yếu của thiết kế. Nó cho phép các đối tượng bên trong tồn tại hoạt động. Không gian trống bao gồm tất cả các hệ thống phân cấp. Hệ thống này phân cấp các thông tin, kiểu dáng, màu sắc hoặc hình ảnh.

Một trang không có khoảng trắng chứa đựng các văn bản và đồ họa hình ảnh. Có thể bị xáo trộn khiến người đọc bị rối (nhiều người thậm chí còn không quan tâm đến điều này). Đây là lý do tại sao các trang web được thiết kế tối giản thường tạo hiệu ứng tốt.

Tạo khoảng trắng ở mức độ vừa phải sẽ khiến trang web trông “sạch sẽ” hơn. Mặc dù thiết kế đơn giản sẽ truyền đạt một thông điệp rõ ràng. Nhưng không có nghĩa là nó chứa ít nội dung hơn. Thiết kế đơn giản là phong cách thiết kế tận dụng tối đa các không gian trống. Để tạo trang web có phong cách “sạch sẽ”, bạn phải nắm vững mối liên kết của nó. Cũng như tận dụng các không gian trống này thật khôn ngoan.

Trang web Made.com đang tận dụng không gian trống hiệu quả:

Việc ứng dụng tốt không gian trắng giúp bạn dễ dàng tập trung sự chú ý vào các thông điệp được truyền tải, hình ảnh trọng tâm và nội dung dễ đọc.

Các khoảng trắng tạo hiệu ứng sang trọng và tinh tế, cải thiện mức độ dễ đọc và tập trung vào nội dung chính.

Nguyên tắc thiết kế web thứ 8 Occam’s Razor

Occam’s Razor là nguyên tắc thúc giục con người đưa ra lựa chọn. Nếu bạn có hai phương án giải quyết vấn đề, hãy chọn sự giải thích đơn giản nhất. Và cần đến ít giả thiết nhất, cái có khả năng chính xác nhất. Để áp dụng vào bối cảnh thiết kế web, Occam’s Razor tuyên bố rằng: “giải pháp đơn giản nhất thường là giải pháp tối ưu nhất”.

Nó không chỉ về hình thức mà còn là “cách thức hoạt động”. Một số công ty như 37Signals đã biến “đơn giản” thành một mô hình kinh doanh. Dưới đây là là một trích dẫn từ cuốn sách Rework (được sáng tác bởi người sáng lập 37Signals):

“ Rất nhiều người ghét chúng tôi vì sản phẩm của chúng tôi ít hơn so với các đối thủ cạnh tranh khác. Họ bị sỉ nhục khi chúng tôi từ chối áp dụng tính năng của họ vào trang web. Nhưng chúng tôi lại cảm thấy tự hào về những gì mà sản phẩm của chúng tôi không tuân theo những quy tắc mà họ đề ra. Chúng tôi đi theo phong cách tối giản là vì chúng tôi tin rằng hầu hết các phần mềm đều quá phức tạp, khó dùng. Với quá nhiều tính năng, quá nhiều nút, càng quá nhiều sự nhầm lẫn.”

Phong cách đơn giản, tối giản không có nghĩa là chúng hoạt động tốt và có hiệu quả. Nhưng trong kinh nghiệm của tôi thì đơn giản vẫn tốt hơn phức tạp, lộn xộn. Do đó chúng ta nên hướng đến phong cách đơn giản hóa nhiều hơn.

Kết luận: Hiệu quả trong thiết kế web và nghệ thuật không giống nhau.

Bạn nên xác định mục tiêu kinh doanh cụ thể trước khi thiết kế một trang web. Bạn cũng sẽ nhận được kết quả về khía cạnh thẩm mỹ, tài chính xứng đáng . Nếu áp dụng các nguyên tắc thiết kế kể trên.

Facebook
Google+
Twitter
LinkedIn

Leave a Reply

avatar
  Subscribe  
Notify of

Bài viết

Digital Marketing
vinhhien2412

30 mẹo hữu ích trong Digital marketing

Một người đàn ông đi vào một quán bar/ nhà hàng / khách sạn / tiệm sửa chữa xe hơi. Rất có thể, anh ta đã nhìn thấy thông tin của nơi đó trên mạng. Vì 80% người tiêu dùng ngày nay sử dụng Google và dựa dẫm vào các trang Web để tìm kiếm và chọn lựa doanh nghiệp tại địa phương. 

Thiết kế web
vinhhien2412

20 thủ thuật photoshop trong thiết kế web

Đối với nhiều web designer, công cụ Creative Cloud của Adobe nói chung – và Photoshop nói riêng – đóng một vai trò không thể thiếu trong quá trình thiết kế trang web. Cho dù bạn đang tạo lập mockups cho web hay thiết kế một phần nhỏ trong web thì Photoshop vẫn là một công cụ tuyệt vời được ứng dụng rộng rãi.

Digital Marketing
vinhhien2412

Tiếp thị kỹ thuật số là gì

Marketing kỹ thuật số bao gồm những nỗ lực tiếp cận thị trường thông qua việc sử dụng các thiết bị điện tử hoặc internet. Các doanh nghiệp cũng sử dụng các kênh kĩ thuật số như công cụ tìm kiếm, phương tiện truyền thông, email và trang web của họ để kết nối với khách hàng hiện tại và cả những khách hàng tiềm năng.