Giới thiệu Thiết kế Đồ họa 1: Cơ bản về Thiết kế

Có bốn nguyên tắc cơ bản của thiết kế:

• Lý thuyết màu sắc
• Hình ảnh
• Kiểu chữ
• Thành phần

Muốn có một khóa học đột phá về thiết kế đồ họa ngoài các nguyên tắc cơ bản của thiết kế? Tham gia Khóa học Thiết kế Đồ họa đầy đủ của Học viện Tiếp thị Kỹ thuật số trên Học viện HubSpot.

4 nguyên tắc cơ bản về thiết kế đồ họa bạn cần biết

1. Lý thuyết màu sắc

Màu sắc là một yếu tố quan trọng để có được ngay trong thiết kế của bạn. Nó được sử dụng để thu hút sự chú ý, truyền đạt ý nghĩa và tất nhiên là để thẩm mỹ. Chúng tôi thậm chí không thường nghĩ về màu sắc mà chúng tôi nhìn thấy; chúng ta đánh giá mọi thứ một cách nhanh chóng và thường đo lường ngay lập tức xem một thứ gì đó được mong muốn, chuyên nghiệp, đẹp, xấu hay thậm chí kỳ lạ dựa trên màu sắc của nó.

Điều quan trọng nhất để nghĩ đến việc sử dụng màu sắc là sự tương phản giữa chúng. Độ tương phản đề cập đến mức độ nổi bật của một màu so với màu khác. Ví dụ, bạn có thể sử dụng các màu tương phản trong một hình ảnh để làm cho văn bản nổi bật so với nền của nó. Các màu bổ sung, chẳng hạn như vàng và tím, hoặc xanh lam và cam, chẳng hạn, mang lại độ tương phản tối đa với nhau.

Tương phản cũng có thể được sử dụng để hướng dẫn hành động của mọi người; để cho mọi người biết bạn muốn họ làm gì. Nếu bạn muốn tăng ‘nhấp qua’, hãy đảm bảo rằng có sự tương phản mạnh giữa nút gọi hành động và phần còn lại của thiết kế.

Bạn có thể kiểm tra độ tương phản của màu sắc bằng cách sử dụng bánh xe màu. Bánh xe màu hiển thị các màu có liên quan như thế nào một cách trực quan. Ví dụ, các màu bổ sung là những màu đối diện nhau trên bánh xe màu.

Màu sắc cũng mang lại ý nghĩa cho các tín hiệu thị giác. Ví dụ: nút màu xanh lục thường biểu thị một hành động khẳng định, như ‘OK’ hoặc ‘Chấp nhận’. Nhưng nếu bạn thiết kế một nút ‘Chấp nhận’ lớn và làm cho nó có màu đỏ, nó thực sự có thể khiến người dùng bối rối và trong một số trường hợp, kết quả có thể rất thảm hại.

Hãy nói về những màu phổ biến nhất được các thương hiệu sử dụng và ý nghĩa hoặc cảm giác mà họ có thể gợi ra từ khán giả của mình.

• màu đỏ có thể kích hoạt những cảm xúc mạnh mẽ – cả tích cực và tiêu cực, để tạo ra cảm giác cấp bách – đó là lý do tại sao nó có hiệu quả với việc bán hàng. Nó cũng khuyến khích sự thèm ăn, vì vậy nó được sử dụng thường xuyên trong lĩnh vực thức ăn nhanh.
• quả cam, một màu ấm khác, được coi là nhẹ nhàng và vui nhộn, vì vậy nó ít phù hợp với các thương hiệu mang cảm giác “công ty” hơn. Màu cam đậm hơn có liên quan đến mùa thu, điều này khiến cho các thương hiệu “đất” hơn.
• Màu xanh lá dễ nhìn và đồng nghĩa với sức khỏe. Vì vậy, bạn sẽ thường thấy nó được sử dụng bởi các thương hiệu quảng cáo sản phẩm sức khỏe như dược phẩm hoặc thương hiệu thực phẩm. Nó cũng có thể được liên kết với sự tăng trưởng hoặc quyền lực chẳng hạn như với các tổ chức tài chính hoặc quân sự.
• Màu xanh dươngmặt khác, nó có tác dụng làm dịu tâm trí và là màu sắc của lý trí, nhưng cũng là sức mạnh, trí tuệ và sự tin tưởng, đó là lý do tại sao nó được sử dụng rộng rãi. Đó là một lựa chọn an toàn cho các thương hiệu, nhưng các thương hiệu cần cân nhắc xem nó có giúp họ nổi bật trong không gian của mình hay không.
• Hồng trong lịch sử đã được sử dụng để miêu tả nữ tính, như với Barbie và Tạp chí Cosmopolitan. Nhưng ngày nay, rất nhiều thương hiệu chính thống sử dụng nó bất kể đối tượng của họ, chẳng hạn như Lyft. Nó miêu tả tuổi trẻ, nhưng cũng truyền cảm hứng thoải mái và đại diện cho hy vọng. Màu hồng đã được sử dụng thành công trong nhiều ngành công nghiệp để “phá vỡ khuôn mẫu”.
• Màu đen là đồng nghĩa với sang trọng và quyền lực. Trong khi kết hợp với một lượng nhỏ màu sáng, nó có thể tiếp thêm năng lượng cho sự tinh tế. Ví dụ, màu đen rất phù hợp với một số ngành như thời trang – nhưng có lẽ không phù hợp với những ngành khác, chẳng hạn như y tế.
• trắng và bạc đại diện cho sự sạch sẽ và thường được sử dụng để có giao diện hiện đại. Tuy nhiên, nó cần được sử dụng cẩn thận, vì nó có thể thiếu cá tính. Nhiều thương hiệu sử dụng màu trắng để bổ sung cho một màu chủ đạo khác. Khi được thực thi tốt, việc thêm màu trắng vào thiết kế của bạn sẽ mang lại một cái nhìn hiện đại, đơn giản và sạch sẽ.

2. Hình ảnh

Chúng tôi nhận thấy rằng hình ảnh rất phù hợp với phương tiện kỹ thuật số, nhưng có một số điểm chung cần xem xét. Thứ nhất, khán giả phản hồi tốt về hình ảnh với những người trong đó. Nó giúp tạo ra một kết nối cảm xúc vì các chiến dịch được nhắm mục tiêu đến những người thực và hình ảnh của bạn cần phản ánh điều đó.

Xem thêm: Bạn nên sử dụng Instagram Reels, TikTok hay Cả hai?

Chất lượng hình ảnh cũng rất quan trọng. Khi khách hàng đang cân nhắc mua hàng trực tuyến, họ muốn có thể xem xét kỹ lưỡng các hình ảnh có độ chi tiết cao của sản phẩm. Mọi người thường từ bỏ một trang web thương mại điện tử vì hình ảnh sản phẩm không có chất lượng đủ cao để giúp họ đưa ra quyết định. Nó ảnh hưởng tiêu cực đến ấn tượng của họ về sản phẩm và bạn có thể mất doanh thu.

Vì vậy, khi bạn chọn hình ảnh làm một phần của thiết kế, hãy đảm bảo rằng hình ảnh của bạn có độ phân giải cao hoặc HD và phù hợp với thiết bị mà khán giả của bạn sẽ sử dụng. Chúng không được kéo dài hoặc tạo pixel.

Tiếp theo, hãy nhớ rằng hầu hết lưu lượng truy cập web đến từ thiết bị di động – vì vậy, điều rất quan trọng là bạn phải kiểm tra đồ họa của mình trên thiết bị di động để đảm bảo rằng chúng vẫn ổn trên các kích thước nhỏ hơn. Nếu không, hãy xem xét tạo một phiên bản riêng của đồ họa của bạn để hiển thị cho những người đang sử dụng thiết bị di động.

Dưới đây là hướng dẫn về kích thước hình ảnh tốt nhất cho các kích thước màn hình khác nhau:

• Hình ảnh biểu ngữ: rộng 2000px và dài 800px
• Thanh trượt: rộng 1920 px và dài 890 px
• Biểu tượng: rộng 300px và dài 300px
• Bài đăng / Sự kiện: rộng 425 px và dài 220 px
• Danh mục đầu tư: rộng 1920px và dài 768px

3. Kiểu chữ

Còn về kiểu chữ, hoặc phông chữ bạn sử dụng? Điều quan trọng khi chọn một phông chữ cho hình ảnh của bạn, không nên thử và làm điều gì đó quá khác biệt. Người đọc mong đợi nhìn thấy các phông chữ quen thuộc, chẳng hạn như phông chữ hệ thống – ví dụ, Arial, Helvetica, Roboto. Sử dụng tối đa hai đến ba họ phông chữ trên một trang web và thậm chí ít hơn cho quảng cáo và hình ảnh của bạn. Chú ý hình ảnh bên dưới. Bạn có thể đếm được bao nhiêu phông chữ trong đó?

Họ phông chữ là gì? Họ phông chữ chỉ đơn giản có nghĩa là một nhóm các phông chữ được xác định bởi các phong cách thiết kế được chia sẻ phổ biến. Ví dụ: roboto là một họ có kiểu in đậm, nghiêng hoặc mỏng.

Bạn cũng sẽ bắt gặp các phông chữ “Serif” và “Sans-serif”. ‘Serif’ là một dòng trang trí nhỏ được thêm vào một ký tự. Phông chữ serif phổ biến nhất là Times Roman. Một phông chữ phổ biến không có serifs, hoặc ‘sans serif’, là Helvetica. Phông chữ Serif được sử dụng để cải thiện khả năng đọc của văn bản trong những thứ như blog, bài báo hoặc báo chí. Cố gắng không sử dụng nhiều hơn 10 từ cho mỗi dòng. Đối với các tiêu đề, hãy cân nhắc sử dụng phông chữ sans-serif có trọng lượng lớn với kích thước lớn hơn. Đảm bảo nhấn mạnh đúng – hoặc kích thước và ‘trọng lượng’ – được áp dụng cho văn bản theo mức độ ưu tiên của nó.

Xem thêm: Tiếp thị truyền thông xã hội 2015 – 5 kỹ thuật cần thiết!

Cách tốt nhất là không thêm văn bản trực tiếp vào hình ảnh, đặc biệt là trong thiết kế web và thay vào đó, làm việc với nhóm web của bạn để phủ văn bản đáp ứng lên hình ảnh. Tại sao? Vấn đề với văn bản trên hình ảnh là, nếu hình ảnh ở trên thiết bị di động, thì đôi khi văn bản quá nhỏ để đọc.

Một xem xét khác là nội địa hóa. Vì văn bản đã được cố định nên nó không thể tự động dịch. Hình ảnh dưới đây cho thấy một trang web được dịch sang tiếng Hungary thông qua Google Dịch. Bạn sẽ thấy lời gọi hành động không phải là HTML – thay vào đó, chúng là hình ảnh bao gồm văn bản, có nghĩa là không thể dịch văn bản.

Nếu bạn cần thêm văn bản, chẳng hạn như hình ảnh trên mạng xã hội hoặc hình ảnh blog, hãy đảm bảo rằng có đủ độ tương phản màu sắc. Ví dụ, trang web này ở đây đã được phân tích với hai biến thể của màu nền. Thứ hai có độ tương phản tốt hơn, làm cho văn bản dễ đọc hơn. Một ‘thủ thuật’ nhanh chóng để thêm độ tương phản màu nền tốt hơn là làm tối đường viền, như trong ví dụ này.

Hãy nhớ rằng: sự kết hợp của một hình ảnh với thông điệp của bạn và cách nó được diễn đạt, và thậm chí cả phông chữ bạn sử dụng, có thể tạo nên sự khác biệt giữa thành công và thất bại trong việc tiếp cận khán giả của bạn.

4. Thành phần

Khi bạn đã biết màu sắc, hình ảnh và phông chữ cho hình ảnh của mình, bạn cần phải kết hợp chúng lại với nhau theo cách tốt nhất có thể – và đó là nơi tạo nên bố cục. Mục tiêu của bạn là làm cho thiết kế đơn giản và trang nhã nhất có thể. Loại bỏ sự lộn xộn và nhiễu hình ảnh giúp người dùng tập trung vào một công việc tại một thời điểm.

Khi bạn đã loại bỏ tất cả thông tin không cần thiết, bạn nên đảm bảo rằng nội dung của bạn – nghĩa là tất cả hình ảnh, nút, màu sắc, hình dạng và văn bản – được sắp xếp theo cách rõ ràng và hợp lý.

Mỗi phần của nội dung thiết kế đồ họa nên phục vụ một mục đích. Khi bạn đang tạo một thiết kế, hãy tự hỏi: “Mục đích của nó là gì?” Nó có nên dẫn dắt người dùng làm điều gì đó không? Thông báo cho họ?

Nhích họ để tiếp tục đọc? Điền vào một biểu mẫu? Hay chỉ ở đó để cung cấp thông tin cho họ? Ngay cả khi bạn có nhiều mục tiêu cho nội dung của mình, hãy chọn một mục tiêu và đảm bảo rằng thiết kế của bạn làm cho người dùng cuối hiểu rõ mục tiêu là gì.

Bây giờ hãy nói về sức mạnh của sự đơn giản trong thiết kế của bạn. Như chuyên gia về UX Nick Babich nói,

“Chủ nghĩa tối giản không phải là lược bỏ các yếu tố, mà là thêm vào vừa đủ để chúng kể câu chuyện của bạn.”

Có hai cách chính để giữ cho thiết kế của bạn đơn giản. Thứ nhất, đảm bảo bạn sử dụng khoảng trắng; và thứ hai, loại bỏ bất cứ thứ gì không thực sự cần thiết. Khoảng trắng giúp tập trung sự chú ý vào bất cứ thứ gì bạn muốn người dùng nhìn thấy. Nó giúp người dùng không bị choáng ngợp bởi những gì họ đang nhìn. Mỗi mục trong thiết kế của bạn nên có một mục đích. Thông tin không cần thiết có thể làm cho thiết kế của bạn trở nên phức tạp và mất tập trung.

Một ví dụ tuyệt vời về ‘khoảng trắng’ là nền tảng blog, Phương tiện. Trang web của Medium không đánh lạc hướng người dùng bằng các biểu ngữ quảng cáo hoặc cửa sổ bật lên gây khó chịu. Thay vào đó, nó ưu tiên nội dung phù hợp và hiển thị thông tin mà người đọc thực sự muốn xem. Thay vì hiển thị ngày được xuất bản, nó thực sự hiển thị khoảng thời gian cần thiết để đọc – điều này rất thông minh!

Bây giờ, mọi người đều biết một trang web ‘xấu’ khi họ nhìn thấy nó. Ví dụ, hãy xem CNN vào năm 2000. Lý do chúng tôi nghĩ rằng điều này là tệ không nhất thiết là vì nó cũ, mà là vì bố cục lộn xộn và nội dung khó đọc mà không bị phân tâm.

Thiết kế đơn giản không nhất thiết phải buồn tẻ nhưng nên ưu tiên một thứ là tâm điểm của trang. Instagram là một ví dụ điển hình khác về điều này. Mục đích chính là để xem hình ảnh và mọi thứ khác đều bị loại bỏ. Cần một số cảm hứng? HubSpot đã tổng hợp một danh sách gồm 32 thiết kế trang web đầy cảm hứng.

Vì vậy, chỉ cần nhớ: Tập trung vào việc làm đúng những điều quan trọng – màu sắc, hình ảnh, kiểu chữ và bố cục – và thiết kế của bạn sẽ ghi dấu ấn với khán giả của bạn.

Hãy cho Trung An Corp biết nếu bài viết này hữu ích đối với bạn nhé!