10 nguyên tắc thiết kế cơ bản trong Visual Design

Đối với bất kì ngành nghề nào, thì việc nắm bắt những lý thuyết cơ bản không chỉ giúp bạn trong thực tế sẽ dễ dàng hơn mà còn giúp bạn có thêm kiến thức vững chắc để có thể tùy biến trong mọi trường hợp, trong ngành Design cũng vậy, việc bạn nắm bắt các quy tắc, nguyên tắc, mẹo, thủ thuật… sẽ giúp bạn thiết kế nhanh hơn, sản phẩm sẽ hoàn thiện hơn, dễ tùy biến hơn và dễ “chiều” khách hàng hơn. Và vì thế hôm nay mình sẽ giới thiệu cho các bạn 10 nguyên tắc thiết kế cơ bản trong Visual Design, để bạn có thêm kiến thức vũng chắc trên con đường thiết kế của mình.

Visual Design (hay còn gọi là thiết kế trực quan) là việc định hình và cải thiện trải nghiệm người dùng thông qua việc xem xét các hiệu ứng của thiết kế thông qua các minh hoạ, kiểu chữ, không gian, bố cục và màu sắc đối với khả năng sử dụng sản phẩm và tính thẩm mỹ của chúng. Điều này nhằm giúp các nhà thiết kế Visual Design có thể biết được và xem xét nhiều nguyên tắc khác nhau, bao gồm tính thống nhất, tính chất của nguyên tắc Gestalt, không gian, sự phân cấp, cân bằng, tương phản, tỉ lệ và tính tương đồng.

Khi nói đến Visual Design thì chúng ta hay liên tường đến vấn đề thiết kế website, layout, giao diện người dùng, website hoặc UX/UI. Nhưng trong bài viết này chúng ta sẽ mổ xẻ khái niệm này trong nhiều lĩnh vực khác nhau, thiết kế web, UX/UI, và cả thiết kế trong in ấn…. và sự thành công của Visual Design là khi thiết kế đó đảm bảo rằng nội dung vẫn là trọng tâm của thiết kế, thu hút người nhìn và giúp xây dựng lòng tin, sự quan tâm của họ đối với sản phẩm, hoặc sự truyền tải thông điệp nào đó đến khách hàng một cách đầy đủ nhất.

#1 Điểm, Đường thẳng và Hình dạng (Point, Line & Shape)

Đây sẽ là những viên gạch đầu tiên để có thể xây dựng bất kỳ một thiết kế nào. Với những điều cơ bản này bạn có thể tạo ra bất cứ gì bạn muốn, từ những icon đơn giản cho đến những hình minh họa phức tạp. Nhưng sẽ không có ít design mới bước vào là thiết kế luôn, điều này sẽ làm cho bạn bối rối hoặc thậm chí bạn sẽ không hiểu mình nên làm gì tiếp theo.

Và theo một trình tự thì chúng ta sẽ có Điểm – > Đường thẳng -> Hình dạng

Điểm -> Đường thẳng -> Hình dạng

Nếu như bạn kết nối 2 điểm bất kì lại với nhau thì bạn sẽ có một đường thẳng. Và bạn có thêm điểm thứ ba sau đó kết nối chúng lại, bạn sẽ tạo ra một hình dạng cụ thể, trong trường hợp này là hình tam giác, và như mình đã đề cập ở trên thì bạn sẽ tạo ra bất cứ điều gì bạn muốn. Đến đây bạn sẽ cảm thấy hơi mơ hồ vì vẫn chưa có gì là rõ ràng cả. Vậy cho nên, kế tiếp bạn sẽ phải cần đến là…

#2 Màu sắc (Color)

Màu sắc có giá trị, ý nghĩa đặc biệt với con người và từ khi còn nhỏ chúng ta có thể biết được màu sắc, cũng như những yếu tố tâm lý của mỗi màu mang lại.

Một ví dụ cụ thể là đèn giao thông chẳng hạn. Chúng chỉ bao gồm toàn màu sắc thôi, nhưng chúng ta đều biết rằng màu đỏ là dừng lại, màu xanh lá cây là được phép đi, còn màu vàng có nghĩa là phóng cho thật lẹ trước khi đèn chuyển sang đỏ (nếu không có công an =))). Điều này chứng tỏ rằng màu sắc có thể ảnh hưởng lên hành vi của chúng ta, nhưng thậm chí chúng ta còn không nhận ra điều này và cho chúng là một điều gì đó tự nhiên.

Nhưng không, ý nghĩa màu sắc và tâm lý màu sắc là do những gì chúng ta có thể học được từ lúc bé cho đến khi lớn lên, chứ bản thân màu sắc không mang ý nghĩa nội tại như vậy. Vì đơn giản là những ý nghĩa màu sắc đó gắn liền với những nền văn hóa khác nhau, nên ý nghĩa cũng sẽ khác nhau (nhưng sẽ có những ý nghĩa chung mà đã được quy định từ trước ở tất cả nền văn hóa ví dụ như đèn giao thông)

Và tóm gọn một điều là bạn có thể truyền tải ý nghĩa, đông điệp bằng cách chọn đúng màu sắc, nhưng để có thể chọn đúng màu sắc thì bạn phải biết được đối tượng mà bạn muốn hướng đến là ai mà văn hóa của họ là thế nào.

Nãy giờ mình đang vòng vo về màu sắc chứ đâu có liên quan đến cái hình tam giác phía trên, nhưng bạn có thể để ý thấy nếu hình tam giác đó nếu không có màu thì nó cũng chỉ là một hình tam giác bình thường, còn thêm màu thì chúng sẽ có ý nghĩa khác đi, đó là ý nghĩa của màu sắc trong thiết kế Visual design, đôi khi 1 hình dạng nó sẽ không được nêu rõ được chức năng của nó nhưng đổ vào một màu sắc nào đó thì tâm lý của con người sẽ biết mặc định hình đó sẽ có ý nghĩa gì và chức năng như thế nào.

Bây giờ chắc là hình tam giác của bạn trông bắt mắt rồi phải không. Vậy cùng làm nó trông thú vị hơn với…

#3 Kiểu chữ (Typography)

Cũng như mình đã có nói đến vấn đề chọn font trong thiết kế banner quảng cáo online để tăng lượng truy cập thì, việc sắp xếp các con chữ (Typography) trong thiết kế sẽ là vấn đề then chốt để có thể truyền tải thông điệp mà bạn muốn.

Nếu như bạn có thể chọn đúng kiểu chữ, thì việc truyền tải nội dung sẽ rất dễ dàng vì người nhìn có thể dựa vào “thần thái” mà mỗi font chữ khoác vào. Mạnh mẽ, cá tính hay yểu điệu thục nữ thì Typography đều có thể quyết định được cả. Tuy nhiên bạn cũng có thể làm rối tung mọi thứ nếu bạn chọn một kiểu chữ không phù hợp với ý nghĩa bạn muốn truyền tải. Vì thế việc lựa chọn Typography phải thật cẩn thận và sử dụng chúng thật hiệu quả.

Hầu hết các kiểu chữ được thiết kế ra với một mục đích đã được xác định, việc của bạn là bỏ chút thời gian để có thể tìm hiểu kiểu chữ đó sử dụng trong trường hợp nào. Một vài kiểu chữ rất phù hợp cho các văn bản lớn như tiêu đề, những điểm cần nhấn mạnh. Nhưng một số kiểu chữ đi kèm với mục đích rõ ràng thì trái ngược sẽ có những kiểu chữ tạo ra để trang trí hoặc thận chí tô thêm cho thiết kế của bạn thêm phần sống động chứ ngoài ra chúng không mang đến mục đích truyền tải thông điệp nào cả.

Có 4 loại font cơ bản mỗi loại đều có ý nghĩa riêng cụ thể là

Font Serif: (font có chân) :Tạo cảm giác cổ điển, truyền thống, sang trọng

Font Sans Serif (font không chân) :Tạo cảm giác trẻ trung năng động, mạnh mẽ

Font vẽ tay và font trang trí:2 loại font này có đường nét khá thoáng mang cảm xúc mạnh mẽ và rõ ràng, nếu chúng được làm điểm nhấn của banner sẽ là một lựa chọn tốt nhưng phải thật khéo léo, nhưng hãy chú ý các đường nét uốn lượn nên rõ ràng để người xem không bi rối mắt.

Có hàng ngàn kiểu chữ khác nhau cho bạn lựa chọn, nhưng nếu bạn không có nhu cầu tạo ra một cái gì đó độc lạ, hoặc bạn là một newbie thì tốt nhất nên chọn những kiểu chữ đơn giản và cổ điển. Hoặc nếu bạn đã dành cả thanh xuân nhưng vẫn không tìm cho mình được một kiểu chữ phù hợp nào cả thì bạn có thể tạo ra kiểu chữ riêng cho mình (trường hợp nếu “tay nghề” bạn đã cao), đến đây chúng ta sẽ thấy hơi khó rồi đấy. Nếu như đã chọn được kiểu chữ phù hợp thì bước tiếp theo bạn cần làm đó là….

#4 Khoảng trống (Space)

Đây sẽ là một yếu tố quan trọng nữa nhưng không mấy người chú ý và dùng chúng một cách hiệu quả. Cách bạn cân bằng các khoảng trống trong Visual Design có thể hoàn thiện hoặc phá hỏng mọi thứ, đặc biệt là với Typography.

Trong phần này bạn cần phải chú ý nhất là tính liên quan giữa các thành phần / yếu tố / con chữ với nhau, sau đó cho chúng một khoảng cách phù hợp, khoảng trống này còn được gọi là không gian âm (Negative space, hay còn được gọi là khoảng trắng – white space, trái nghĩa với nó là positve space – không gian dương, đại diện cho chính chữ cái).

Tracking (giãn cách chữ cái trong cùng một từ) và Kerning (giãn cách giữa các chữ với nhau)

Bạn phải xem khoảng không như một phần của thiết kế và sử dụng chúng thật hợp lý. Chúng có thể dẫn dắt người xem có thể nhìn được tổng thể thiết kế và chi tiết từng phần đâu là quan trọng đâu là chi tiết phụ và thông điệp là gì. Đồng thời, những khoảng không sẽ giúp người xem có thể nghỉ mắt xuyên suốt nội dung. Còn nếu bạn sử dụng phần này không phù hợp thì sẽ rất rối mắt cho người xem và còn gây phản ứng ngược là nhìn vào một chùm chữ toàn chữ thì người xem sẽ có ác cảm ngay. Hoặc nếu khoảng cách quá lớn sẽ tạo cho người xem cảm giác trống vắng, chưa hoàn thiện (“phần thiết kế này có ẩn ý gì vậy ta? khó hiểu quá ta? – người xem said” mà thật sự mình không có ẩn ý gì cả =))), hoặc quá ít khoảng không sẽ làm cho thiết kế của bạn trở nên chật chội, gò bó.

Vậy cho nên, hãy sử dụng khoảng không cách một cách hiệu quả nhất để có thể tạo cảm giác thoải mái cho người xem và có thể đọc hết tất cả nội dung có trong thiết kế của bạn. Và trong quá trình tìm ra tỉ lệ hợp lý giữa không gian âm và không gian dương thì bạn sẻ tạo ra được….

#5 Sự cân bằng, nhịp điệu và sự tương phản (Balance, Rhythm & Contrast)

Đây là phần bạn sẽ phải áp dụng tính thẩm mỹ vào thiết kế, bạn sẽ sử dụng các yếu tố cơ bản để có thể tạo ra một thứ gỉ đó mới mẻ và thu hút hơn. Nói tóm gọn hơn là bạn sẽ phải cân bằng tất các yếu tố trên thiết kế dựa vào trọng lượng thị giác mà quyết định chúng sẽ to hay nhỏ, đặt ở vị trí nào và có cần làm nổi bật (tương phản) chúng không.

Điều chỉnh trọng lượng thị giác để tạo ra nhịp điệu và sự tương phản

Giả sử bạn đặt một tiêu đề thật to, bôi đậm nó (tăng độ tương phản) và cho nó màu đỏ phía góc phải thì thiết kế thì người nhìn sẽ tập trung chỉ vào góc đó. Vì thế bạn phải tận dụng những yếu tố cân bằng, nhịp điệu và sự tương phản để có thể hướng người xem đến đúng vị trí mình muốn họ xem và tận dụng bố cục của phần tử để chúng có sự hài hòa mà không bị rối mắt người xem.

Và một yếu tố để có thể kiểm soát nguyên tắc cân bằng, nhịp điệu và sự tương phản đó là….

#6 Tỉ lệ (Scale)

Tạo điểm nhấn bằng cách thay đổi tỉ lệ thiết kế

Nếu như sự tương phản, nhịp điệu và cân bằng tạo ra sự chú ý thì tì lệ sẽ giúp bạn phân cấp các phần tử trở nên một khối thống nhất, không bị lộn xộn. Phần nào quan trọng nhất, phần nào ít quan trọng và phần phụ trong thiết kế sẽ được phân chia rõ ràng. Và để được sự phân cấp tốt nhất thì chúng ta sẽ phải điều chỉnh kích cỡ của các phần tử. Nhưng bạn nên chú ý, việc điều chỉnh tỉ lệ phải có mục đích rõ ràng. Đừng tùy chỉnh chúng vô tội vạ nhé.

Ngoài việc tạo ra sự tương phản có nhịp điệu và sự cân bằng, tỉ lệ còn giúp bạn tạo ra sự phân cấp. Về cơ bản, sẽ có sự phân cấp giữa các yếu tố trong thiết kế, và cách tốt nhất để truyền tải điều đó chính là sử dụng kích cỡ.
Việc điều chỉnh tỉ lệ phải có mục đích rõ ràng. Đừng tuỳ chỉnh vô tội vạ theo kiểu ”Make my logo bigger cream”(đây là tên một quảng cáo châm biếm của giới thiết kế nhằm vào việc khách hàng lúc nào cũng yêu cầu logo to bự ra, nội dung quảng cáo bao gồm việc sử dụng một loại kem có tên là “make my logo bigger cream” bôi để phóng to logo ),nếu bạn làm vậy thì vô tình bạn đã quên mất phần khoảng trống mà chúng ta vừa mới bàn ở trên rồi đấy.

Lấy một ví dụ đơn giản như một tờ báo giấy truyền thống, khi bạn cầm trang bìa lên bạn sẽ thấy gì? Đó chính là tiêu đề bài báo rất to nhưng rất ngắn, mục đích là cho bạn thông tin tổng thể đọc nhanh và xem có gì hay ho, đáng đọc không. Tiếp theo, dưới mỗi tiêu đề sẽ là một đoạn mô tả với kích thước nhỏ hơn cung cấp cho người đọc thêm thông tin chi tiết, và cuối cùng là nội dung chi tiết của bài báo với font chữ nhỏ hơn tất cả các yếu tố trên nhưng vẫn đảm bảo được tính rõ ràng, dễ đọc nhất…

Vì thế bạn hãy tận dụng kích cỡ đúng cách để có thể phân cấp các phần tử nội dung một cách thống nhất và hiệu quả nhất. Và ví dụ về báo chúng ta sẽ đi luôn đến phần kế tiếp, đó chính là…

#7 Hệ thống lưới và căn chỉnh (Grid & Alignments)

Khi nói đến hệ thống lưới và căn chỉnh thì đã quá quen thuộc với các designer. Trong bất kỳ một thiết kế nào thì cũng để hiện diện bố cục lưới và căn chỉnh nhưng vì không thấy chúng nên bạn thường ít chú ý đến chúng, nếu không tin bạn có thể lấy một cuốn sách ra và đo các tiêu đề, số trang, thụt lùi chữ đều có trật tự và theo một khung lưới đã được canh từ trước.

Điều này sẽ giúp cho tổng thể quyển sách được tổ chức một cách có trật tự, vị trí nào sẽ dành chính xác cho phần tử đó, hơn nữa chúng sẽ giúp cho quyền sách có sự đồng bộ với nhau, tạo cảm giác dễ chịu cho người đọc. Dù bạn đang thiết kế gì đi chăng nữa, thì việc sử dụng hệ thống lưới sẽ mang lại bố cục cho thiết kế của bạn, giúp cho thiết kế của bạn có trật tự và sự thống nhất.

Hệ thống lưới và căn chỉnh (Grid & Alignments)

Việc căn chỉnh (Alignment) rất quan trọng với các khối văn bản, có rất nhiều cách để căn chỉnh, nhưng nguyên tắc chung là tiêu đề sẽ được căn giữa, nội dung sẽ được căn theo lề trái. Cũng như cách bạn căn chỉnh luôn phụ thuộc vào nội dung thiết kế, nhưng nhìn chung thì mọi người đều đọc từ trái sang phải, từ trên xuống dưới. Vì thế nếu bạn đi ngược lại kiểu căn lề giữa hay căn phải sẽ gây khó chịu cho người đọc.

#8 Đóng khung (Framing)

Đóng khung (Framing) là một khái niệm đặc biệt và then chốt trong nhiếp ảnh, nhưng chúng cũng có thể được sử dụng trong đồ họa. Dù bạn đang sử dụng hình ảnh, hình minh họa hay bất cứ thứ gì khác thì việc đóng khung sẽ giúp bạn hoàn thiện tác phẩm và nổi bật hơn rất nhiều.

Đóng khung một số phần tử nội dung giúp cho thiết kế thêm thú vị

Cũng giống như sự tương phản mình để cập phía trên thì bạn hãy hướng mắt vào bạn vào phần quan trọng sau đó, thử cắt/ đóng khung (crop/frame) phần đó lại, điều này sẽ giúp đối tượng đó nổi bật hơn, hoặc có thể giúp bạn truyền tải một thông điệp mà bạn muốn gửi đến. Việc của bạn là tận dụng chúng thật hiệu quả.

Sau tất cả, nếu bạn còn cảm giác vẫn chưa đủ, thì đây là lúc để màu mè hoa lá hẹ một chút với…

#9 Background (Texture và Pattern)

Sử dụng texture để tạo ra một thiết kế mới lạ

Khi nói đến thêm thắc hoa lá hẹ thì mình hay liên tưởng đến sử dụng texture và parttern (hay còn gọi là thêm background), chúng giống như phụ kiện vậy và cũng không nhất thiết phải sử dụng chúng trong mọi trường hợp mà chỉ tùy trường hợp cần thì nên sử dụng thôi. Nhưng dù sao thì thỉnh thoảng thêm vài ba phụ kiện để có thể giúp cuộc sống của bạn thú vị hơn rất nhiều. Và cảm giác bạn sẽ không bị gò bó vào một khuôn khổ nào cả.

Texture hiện tại không còn là xu hướng nổi bật trong thiết kế nữa, thay vào đó là sự tối giản như mình nói ở trên, nhưng bạn vẫn nên sử dụng chúng để tạo nên sự khác biệt cho thiết kế, tránh hông chị nhàm chán.

Nhưng bạn cũng nên chú ý hãy sử dụng chúng có mục đích rõ ràng và được sắp xếp có hệ thống. Nếu thiết kế của bạn được sử dụng cho in ấn, bạn có thể chọn loại giấy phù hợp kèm theo một vài chi tiết như bo góc, dập nổi hay phủ UV. Tất cả đều có thể giúp cho thiết kế của bạn trở nên tuyệt vời hơn. Tuy nhiên như mình đã nói chọn sử dụng chúng có mục đích, đừng nhồi nhét chúng thành một đống hỗn độn nhé.

Pattern là những họa tiết hoặc hình dáng được lặp đi lặp lại trên thiết kế và chúng sử dụng như một background , và tuỳ theo cách sử dụng mà bạn có thể gọi Pattern là Texture cũng được. Chúng chủ yếu được sử dụng để thêm nhịp điệu và sự năng động, vui vẻ vào một thiết kế phẳng, đồng thời cũng là một cách để bù đắp cho sự dư thừa của những khoảng trắng.

Và cuối cùng, nhưng không kém phần quan trọng trong Visual Design…

#10 Khái niệm thị giác (Visual Concept)

Đây sẽ là nguyên tắc thiết kế Visual Deisgn cuối cùng nhưng chúng lại liên quan đến nguyên tắc đầu tiên của bài viết. Bạn còn nhớ điểm, đường thẳng và hình dáng ở nguyên tắc 1? Mọi ý tưởng sẽ được thể hiện thông qua các hình dạng và tùy vào ý đồ của bạn hình ảnh đó có mang ý nghĩa riêng.

Đây sẽ là yếu đó quyết định thiết kế của bạn có là một thiết kế tuyệt vời, độc đáo và ý nghĩa sâu xa hay không, hay chỉ đơn giản cũng như những thiết kế tải về xài lại từ mấy kho thiết kế đầy rẫy trên mạng.

Nếu bạn có một khái niệm thiết kế đủ vững chắc, bạn có thể biến chúng thành hiện thực và bán ý tưởng lại cho các khách hàng, đối tác hoặc bất cứ ai mà bạn muốn.

Tổng kết bài viết 10 nguyên tắc thiết kế cơ bản trong Visual Design:

Hãy luôn nhớ rằng hãy thiết kế có chủ đích và luôn có một ý tưởng trong suốt quá trình thiết kế. Chọn font chữ cẩn thận và rõ ràng, hãy xem xét xem mỗi yếu tố dù nhỏ trong thiết kế đã dựa theo những khái niệm căn bản như lưới, căn gióng chưa. Sự gắn kết, mạch lạc trong thiết kế là rất quan trọng và sẽ quyết định thiết kế của bạn có hiệu quả hay không.

Ngoài ra một thiết kế được chuẩn bị rõ ràng và đầu tư kỹ càng sẽ mang giá trị về lâu dài. Xu hướng cũng giống như những món hàng thời gian, có thể thời điểm này chúng là “thời thượng” nhưng chúng cũng sẽ đến ngày hết date. Vì thế bạn luôn phải nên thay đổi, đừng đóng khung và theo lối mòn, đặt biệt là trong thiết kế. “Một thiết kế tốt không phải là một thiết kế chạy theo xu hướng mà phải là một thiết kế tạo ra xu hướng mới”

Chúng ta hay có quan niệm ”đừng đánh giá một quyển sách qua bìa của chúng”, tuy nhiên thì hình như ai cũng làm vậy và ít người kiên nhẫn có thể bỏ qua bìa của chúng mà đi thẳng đến nội dung. Vì thế nếu bạn không thể hiện được sự xuất sắc nội dung cuốn sách ra trên bìa, điều này cũng có thể gây ra ảnh hưởng chung tới giá trị của cả quyển sách đấy. Hy vọng bạn có thể tìm thấy nhiều điều bổ ích trong bài viết này.

————

Với mong muốn mang thật nhiều kiến thức cho các bạn đam mê lĩnh vực thiết kế, thương hiệu, Digital Marketing, Website… Nếu bạn thấy bài viết có ích đừng quên chia sẻ với những người cùng sở thích với bạn, nếu có bất kì câu hỏi hay đề tài nào hay vui lòng gửi cho mình qua Email: Hello.Kenluz@gmail.com . Xin cảm ơn các bạn –“CHEER”

Tác giả:José Torre
Nguồn: blog.prototypr.io