Hướng dẫn tự thiết kế “Bộ Nhận Diện Thương Hiệu” cho Blog

Trước khi thiết kế một blog bất kỳ, bạn phải thiết kế bộ nhận diện thương hiệu cho blog đó, có thể tốn một chút thời gian và năng lượng nhưng bạn sẽ không hối hận.

Bộ nhận diện thương hiệu (hay gọi là Blog Brand kit) rất quan trọng bởi vì nó sẽ ảnh hưởng cực lớn đến quá trình thiết kế blog của bạn VĨNH VIỄN.

Nếu sau khi hì hục tự thiết kế giao diện cho blog, bạn chợt nhận ra rằng “Làm mãi vẫn không đẹp, thật không biết cần phải sửa ở điểm nào”.

Sai lầm ở đâu ở chỗ trước khi bắt tay vào thiết kế blog bạn đã không thiết kế sẵn bộ nhận diện thương hiệu cho nó.

Vì thông thường blogger không rành về THIẾT KẾ nên không nắm được quy trình thiết kế cơ bản.

Khi bạn đã có bộ nhận diện thương hiệu, blog bạn sẽ trông chuyên nghiệp khác hẳn, kể cả khi bộ nhận diện thương hiệu của bạn vẫn chưa được hoàn hảo đi nữa (bởi bạn tự thiết kế nên sẽ có giới hạn).

Chắc chắn rằng thuê người thiết kế chuyên nghiệp thường không phải là lựa chọn ưu tiên của bạn bởi vì chi phí khá ĐẮT ĐỎ. Trong khi đó với người kinh doanh, chúng ta sẽ chấp nhận một thiết kế điểm 8 nhưng MIỄN PHÍ thay cho một thiết kế điểm 10 nhưng TRẢ PHÍ CAO.

Bài viết này sẽ hướng dẫn bạn cách thiết kế một bộ nhận diện thương hiệu ĐỦ DÙNG cho blog hoặc ít nhất sẽ giúp bạn cải thiện giao diện blog của mình thêm nữa.

Bạn nên bookmark lại bài viết này bởi vì nó sẽ khá dài và tốn thời gian để thực hiện theo.

Bảng màu – nền tảng để thiết kế bộ nhận diện thương hiệu

Tôi bắt buộc phải đưa bảng màu (Color Pallet) lên xếp đầu tiên bởi vì bảng màu là nguyên liệu NỀN TẢNG cho các thiết kế bộ nhận diện thương hiệu còn lại.

Mỗi người thường đeo đuổi những phong cách thiết kế riêng mà mình tâm đắc. Một số blogger thì thích thiết kế đầy màu sắc phản ánh cuộc sống vui vẻ lạc quan, một số khác lại thích phong cách giản dị đơn sắc toát lên mong muốn cuộc sống đơn giản hơn.

Màu sắc chính là CHÌA KHOÁ giúp truyền tải các phong cách thiết kế yêu thích đó của bạn.

Màu sắc ảnh hưởng trực tiếp đến cảm giác của người đọc

Mỗi màu sắc thường gợi cho người xem một CẢM GIÁC khác nhau. Màu sắc có thể khiến bạn buồn, vui, xao xuyến, sảng khoái, nóng nực…

Hãy tìm hiểu nhanh ý nghĩa của những tông màu dưới đây

Đây là các màu cơ bản, thực tế khi chọn màu sắc bạn sẽ không dùng những tông màu cơ bản này mà thay vào đó sẽ là những màu biến thể của nó (Mix hay Shades).

Ví dụ: Thay vì màu xanh dương cơ bản #0000FF (blue), thì shades của màu xanh dương là #6666FF (Medium Slate Blue), Mix của màu xanh dương với xanh lá là #008CFF (Dodger Blue).

Tìm kiếm ý tưởng màu sắc thích hợp cho blog

Nếu bạn không biết bắt đầu từ đâu để có một bảng màu ưng ý thì hãy tham khảo 4 cách tìm kiếm ý tưởng tạo bảng màu sau đây

Cách 1: Tạo bảng màu tự động

Bạn sẽ cần tới công cụ tạo bảng màu tự động ColorSpace.

Cách làm khá đơn giản, bạn nhập màu chủ đạo sau khi bạn đã chọn ở trên và nhập mã màu Hex Code vào (xem Hex code ở trên) à bấm nút “Generate”.

Sau đó, chờ cho ColorSpace tạo bảng màu TỰ ĐỘNG tham khảo cho bạn (không ngẫu nhiên). Kế tiếp, bạn chỉ cần chọn ra loại bảng màu mà bạn cảm thấy hài lòng nhất.

Trừ khi bạn muốn phong cách TỐI GIẢN, bạn chỉ chọn 1 màu căn bản cho toàn bộ blog thì bạn hãy chọn lựa “Shade” và “Gradient”. Thông thường, bạn sẽ tránh loại bảng màu này. (Chỉ riêng với thiết kế blog mà thôi)

Cách 2: Trích xuất bảng màu từ Logo có sẵn

Đây là cách làm khi bạn ĐÃ CÓ một Logo ưng ý sẵn (bạn đã thuê người thiết kế sẵn), tuy nhiên thông thường nhà thiết kế Logo sẽ không cung cấp bảng màu cho bạn trừ khi bạn yêu cầu.

Khi bạn đã có Logo sẵn (file mềm), bạn sẽ dùng công cụ Canva Color Pallet. Công cụ này cho phép bạn upload Logo đã có sẵn của bạn ở định dạng PNG, sau đó Canva sẽ tự động trích xuất cho bạn bảng màu từ Logo đó.

Cách 3: Dùng Color Wheel để chọn bảng màu thủ công

Bánh xe màu Color Wheel (được phát minh bởi Issac Newston năm 1666) giúp bạn tạo được bảng màu sao cho hài hoà nhất.

Bạn chỉ nên tạo bảng màu theo Complementary (tạo ra 2 màu tương phản) hay Triadic (tạo ra 3 màu tương phản) bởi vì blog không nên có quá nhiều màu.

Cách dùng Color Wheel với 3 bước đơn giản: Vào Canva Color Wheel -> Chọn 1 màu chủ đạo -> Chọn Complementary (hay Triadic) -> Xoay tay vòng tròn đến khi vừa ý.

Cách 4: Copy bảng màu sẵn có từ cộng đồng chia sẻ

Cách này nhanh nhất, bạn chỉ cần vào Thư Viện Canva Explore, sau đó bạn đánh tên màu chủ đạo của bạn vào ô tìm kiếm (bằng tiếng Anh, ví dụ: Red, Green, Blue, Black, Pink,…).

Ô tìm kiếm sẽ tự động gợi ý cho bạn các bảng màu phổ biến mà cộng đồng sử dụng. Sau khi bấm chọn vào một trong những bảng màu đó thì bạn sẽ được chuyển đến trang Bảng màu.

Nếu vẫn không hài lòng, hãy kéo xuống khu vực “Related Combinations” Canva sẽ gợi ý cho bạn một số màu liên quan. Bạn sẽ lựa chọn bảng màu mà mình cảm thấy thích nhất.

Cách lưu trữ bảng màu sau khi đã hoàn thành

Sau khi đã có bộ màu ưng ý thì bạn phải chắc chắn rằng mình đã lưu trữ TỐT bảng màu đó ở một nơi an toàn.

Tránh trường hợp, mỗi lần dùng là phải MÒ MẪM xem bảng màu của mình là gì.

Thật ra có nhiều cách để lưu, nhưng để an toàn và tiện lợi mình khuyên bạn nên dùng Công cụ Coolors (Backup cho những công cụ khác). Bạn cần tạo tài khoản Coolors nếu chưa có, để lưu bảng màu của mình.

Coolors cũng có ứng dụng trên IOS và add-on Adobe AI CC, Adobe Photoshop CC giúp bạn sử dụng thuận tiện hơn.

Cá nhân tôi thường chỉ lưu và truy cập bằng trình duyệt mà thôi bởi vì tôi không dùng Adobe và thiết bị IOS.

Coolors cho phép bạn tạo nhiều bảng màu cho nhiều blog khác nhau và tự động tạo tên cho từng màu trong bảng màu.

Logo

Bạn đương nhiên không thể tự thiết kế được các logo đẹp như các công ty lớn như Coca-cola, BMW, Toyota,… bởi vì họ bỏ hàng nghìn USD để thuê chuyên gia thiết kế riêng Logo cho họ.

Với blog, bạn không cần đầu tư quá nhiều tiền như vậy. Tôi sẽ giúp bạn tự tạo một Logo đủ dùng, đủ khác biệt và đủ để người đọc nhận diện.

Mục đích cuối cùng của Logo đó là SỰ NHẬN DIỆN. Logo không được dùng để ngắm cho đẹp mà nó phải giúp khách hàng nhận diện và ghi nhớ thương hiệu, chỉ vậy là bạn có một logo thành công.

Còn sau này nếu muốn đẹp, bạn chỉ cần thuê người thiết kế lại mà thôi không nên quá lăn tăn.

Tìm hiểu Định dạng ảnh đúng cho Logo

Đa phần các bạn sẽ cho rằng định dạng PNG là định dạng đúng cho Logo bởi vì nó tốt cho SEO.

Đúng là vậy, nhưng bên cạnh đó bạn cũng cần Logo ở định dạng SVG cho thiết kế, đây là một dạng ảnh đồ hoạ vector trên internet.

Nghĩa là bạn sẽ cần Logo ở cả 2 định dạng SVG và PNG (định dạng PNG chỉ dùng cho các SEO plugin như YoastSEO, Schema Pro, SEOPress,…).

Ngoài ra, bạn còn cần thêm một dạng tương logo màu tương phản. Nghĩa là Logo màu tối và Logo màu sáng.

Tại sao lại cần Logo tối và sáng?

Bởi vì khi bạn thiết kế blog hay landing page bạn sẽ dùng một tính năng vô cùng phổ biến đó là Transparent Header (Menu điều hướng trong suốt).

Khi đó Logo với màu tương phản sẽ làm nổi bật trên màu nền của trang.

Ví dụ: Phần footer ở blog CuongThach dùng logo màu trắng trên nền đen, nhưng phần header của blog lại dùng logo màu đen trên nền trắng.

Xem Trang bán dich vụ Cloud Hosting của CuongThach đây là trang tôi đã dùng Transparent Header.

Tóm lại bạn sẽ cần có tất cả 4 file Logo: Logo sáng PNG + Logo tối PNG + Logo sáng SVG + Logo tối SVG.

Kích thước ảnh (thậm chí SVG) nên nhỏ hơn 300px để không làm nặng blog và hao băng thông không cần thiết.

Thiết kế Logo với phần mềm Vector

Nếu bạn đã xem qua bài viết dùng Canva để thiết kế Logo thì sẽ thấy rằng Canva sẽ hạn chế trong việc xuất ảnh SVG (bạn chỉ xuất được PNG và JPG).

Trong bài viết này tôi sẽ giới thiệu phần mềm miễn phí nhưng yêu thích của tôi là Gravit Designer. Một công cụ thiết kế vector online của Corel mà bạn có thể dùng trực tiếp trên trình duyệt. (Illustrator của Adobe hay sản phẩm CorelDraw bạn phải mua mới có thể sử dụng và cài đặt rất mất thời gian)

Gravit Design hỗ trợ xuất file ảnh SVG hay PNG rất dễ dàng và không bị lỗi khi tải lên WordPress (WordPress thường rất khắc khe với file SVG vì vấn đề bảo mật).

Nếu bạn bắt buộc thiết kế từ đầu thì đây là 4 cách để bạn có thể thiết kế được

1. Bắt đầu với thư viện Icon liên quan. Vào thư viện icon miễn phí của Gravit và bắt đầu tìm kiếm ý tưởng cho Logo của bạn.
2. Đồ lại ảnh bạn thích bằng Vector. Tìm một bức ảnh bạn thích mà nó trùng với sở thích của bạn và sau đó dùng công cụ Pen để đồ lại, tạo thành logo.
3. Chỉnh sửa ảnh vector đã thiết kế sẵn. Tìm những website thiết kế sẵn định dạng ảnh SVG và bạn chỉ cần import vào Gravit, chỉnh sửa lại thành của mình. Website cho download miễn phí SVG như Flaticon.
4. Vẽ tự do. (đòi hỏi sự sáng tạo) nên bạn có thể sẽ gặp khó khăn nếu không biết kỹ năng vẽ thiết kế.

Favicon

Nếu như bạn đã bookmark bài viết này như tôi đã đề cập ở trên thì bạn sẽ sẽ thấy Favicon của CuongThach nằm trong Bookmark Bar ở trình duyệt (hay folder mà bạn chỉ định bookmark).

Nếu blog bạn thiếu Favicon thì nó có thể làm chậm website của bạn do lỗi “404 not found”.

Favicon là một biểu tượng nhỏ giúp người đọc nhận ra website của bạn trong RỪNG tab mở trên trình duyệt, Bookmark và App.

Tìm hiểu định dạng Đúng Favicon (khác định dạng Logo)

Trước khi bắt đầu thiết kế Favicon bạn cần biết được định dạng chính xác và kích thước ảnh của Favicon tiêu chuẩn cần thiết.

Nếu website bạn được xây dựng trên nền tảng WordPress thì Favicon tiêu chuẩn nên là định dạng PNG và có kích thước 512×512 pixel.

Nếu bạn từ nghe nên dùng file ICO cho Favicon, thì bạn không cần phải tìm hiểu nữa bởi vì định dạng ICO chỉ nên dùng cho những website không phải là WordPress. ICO là dạng file chứa nhiều PNG có kích thước đa dạng bên trong (thực tế cũng là PNG mà thôi).

Kể từ WordPress 4.3 thì WordPress sẽ tự chuyển đổi PNG với kích thước phù hợp với hiển thị của trình duyệt và thiết bị để cho chất lượng hiển thị là tốt nhất. Vì vậy bạn hãy bỏ qua các định dạng khác, cứ PNG mà xuất là ổn cho WordPress.

Ví dụ: Với trình duyệt Chrome trên màn hình FullHD thì favicon sẽ hiển thị ở kích thước 32×32 pixel. Khi bạn thêm một website vào màn hình (Add to Home Screen) trên IPad Pro với màn hình Retina thì Favicon sẽ hiển thị ở kích thước 167×167 pixel.

Cách thiết kế một Favicon cho Blog

Có 2 cách dễ dàng để bạn có thể thiết kế Favicon

1. Chuyển đổi Logo thành Favicon. Tham khảo bài viết Tự Thiết Kế Favicon cho website (khuyến khích làm theo cách này vì dễ).
2. Vẽ lại Favicon (vẽ lại với thiết kế tương tự Logo). Cách này dành cho những bạn thích thiết kế hoặc thuê người thiết kế cho bạn.

Khi bạn đã hoàn thành thiết kế logo xong ở bước #2 thì chỉ cần bỏ thêm chút thời gian để điều chỉnh lại một chút như trên là ổn cho một Favicon.

Tagline – Khẩu hiệu Blog

Tagline là thông tin bạn khai báo ngay từ khi bạn cài đặt WordPress. Cùng với Site Title, Tagline giúp người đọc nắm bắt ngay blog của bạn chuyên về đề tài nào và giúp được họ ra sau.

Không chỉ vấn đề về SEO, mà Tagline còn đóng một vai trò về nhận diện thương hiệu cho Blog của bạn. Khi bạn thiết kế các Banner hay ảnh đại diện blog (bìa blog) cho các mạng xã hội bạn sẽ cần đính kèm Tagline vào bên trong thiết kế.

Thiếu vắng Tagline thì mọi thiết kế quảng cáo cho blog của bạn sẽ khá lúng túng.

Tagline khác Slogan

Quá dễ để bạn có thể nhầm lẫn giữa Tagline và Slogan bởi vì nó khá giống nhau. Ngay cả nghĩa cũng giống nhau đều là khẩu hiệu.

Tuy nhiên, cách sử dụng Tagline và Slogan là khác nhau và bản chất cũng khác nhau.

Tagline là một khẩu hiệu và thường xuất hiện kế bên Logo. Tagline thường ngắn và dễ nhớ với một dòng duy nhất và có ít từ. Tagline đại diện cho giá trị doanh nghiệp, cho việc nhận diện thương hiệu vì vậy Tagline gần như rất ít thay đổi.

Ví dụ: khi nghe Tagline “Hãy nói theo cách của bạn” bạn sẽ nghĩ ngay đến Viettel (ý nói chúng tôi tôn trọng khách hàng), hay “Think different” bạn sẽ nghĩ ngay đến Apple (ý muốn nói luôn mang đến cho người dùng những phát minh khác biệt sáng tạo).

Slogan là khẩu hiệu được dùng cho một dòng sản phẩm hay một chiến dịch quảng cáo của doanh nghiệp ở một giai đoạn nào đó. Slogan thường hay thay đổi để phù hợp với giá trị sản phẩm mới.

Ví dụ: Khi Apple tung ra sản phẩm Iphone 6 thì slogan là “bigger than bigger” (nhấn mạnh màn hình lớn hơn của Iphone 6 so với iphone 5s) thay thế cho slogan “forward thinking” của iphone 5s (smartphone đầu tiên sử dụng chip 64-bit) .

Cách “Nấu” một Tagline hoàn chỉnh cho blog

Tagline không khó như bạn nghĩ nếu bạn biết quy trình 3 bước sau đây

1. Bước #1: Viết một đoạn bao gồm nhiều câu đơn thể hiện giá trị blog của bạn với người đọc. (cứ viết nhiều nhất có thể, đây là giai đoạn brainstorming).
2. Bước #2: Cắt giảm và sát nhập các câu lại thành câu ghép sao cho chỉ còn khoảng 3 câu đơn mà thôi.
3. Bước #3: “Nấu” 3 câu đó lại thành một câu sao cho dễ nhớ nhất và bao hàm tất cả ý nghĩa của 3 câu đó. Cần dùng các phép tu từ như lặp từ, ẩn dụ, nhân hoá,…để biến chế hoặc ít nhất bạn nên viết thẳng ra sao cho người đọc NHÌN VÀO HIỂU LIỀN.

Lý thuyết là vậy, bây giờ bạn hãy xem ví dụ quy trình chế biến Tagline của một blog về du lịch sau đây để tham khảo (vẫn chưa hoàn hảo, chỉ có giá trị tham khảo)

Bước #1: Viết toàn bộ giá trị của blog với người đọc

Tôi chia sẻ cách du lịch châu Âu giá rẻ. Tôi hướng dẫn người trẻ chuẩn bị những gì trước chuyến đi. Tôi giới thiệu những địa điểm du lịch nổi tiếng. Tôi hướng dẫn những điểm ăn phù hợp nhất. Tôi giúp đọc giả tiết kiệm chi phí nhất. Tôi giới thiệu những nơi chụp hình đẹp nhất.

Bước #2: Cắt giảm rút gọn còn tối đa 3 câu

Tôi chia sẻ cách các bạn trẻ có thể tự du lịch châu Âu. Tôi hướng dẫn cách chuẩn bị trước chuyến đi châu Âu. Tôi đưa ra những lời khuyên nên đi đâu, ăn gì, chụp hình ở đâu khi đến Châu Âu.

Bước #3: Hợp nhất thành 1 câu duy nhất

“Hướng dẫn du lịch châu Âu bình dân: Ăn, Ở và Trải Nghiệm”

Vậy là bạn đã có một Tagline ĐỦ DÙNG cho blog rồi.

Font Pair – Lựa chọn cặp font hoàn hảo cho Blog

Trong bất cứ theme WordPress nào cũng sẽ có mục tuỳ chỉnh font cho blog bao gồm body và heading. Vấn đề ở chỗ là bạn nên dùng font nào cho heading và font nào cho body để hài hoà nhất.

Bạn cần đảm bảo rằng font body và font heading kết hợp với nhau sao cho “nuột” nhất.

Để tiết kiệm thời gian bạn có thể tận dụng website FontPair để xem những gợi ý từ cộng đồng nên kết hợp font nào với font nào là đẹp nhất. Đây là website chuyên tổng hợp những cặp font được sử dụng phổ biến nhất và kết hợp với nhau từ những website nổi tiếng.

Bên cạnh FontPair, bạn cũng có thể dùng công cụ Canva Font Combination để tìm những cặp font kết hợp tốt với nhau.

Ngoài ra, dưới đây là một số những cặp font sử dụng cho website phổ biến dùng được cho tiếng Việt hiện nay để bạn tham khảo (toàn bộ là Google Font):

• Roboto (heading) – Open Sans (body)
• Helvetica (heading) – Georgia (body)
• Georgia (body)Arial (heading) – Georgia (body)
• Arial (heading) – Georgia (body)

Ngoài Google Font bạn có thể kết hợp với Adobe Font (trả phí). Tuy nhiên, Google Font miễn phí và mình thấy khá ổn không cần mua Adobe Font làm gì.

Nếu FontPair vẫn không làm hài lòng bạn, bạn cũng có thể vào thẳng thư viện Google Font (link đã chỉnh sẵn bộ lọc cho bạn) để tự tìm kiếm theo ý mình. Sau khi bạn nhấn chọn font bất kỳ hãy kéo xuống bên dưới bạn cũng sẽ thấy gợi ý của Google về font đi cặp với nó.

Khi thiết kế bộ nhận diện thương hiệu bạn nên dùng cặp font đã chọn xuyên suốt toàn bộ blog bao gồm cả quảng cáo, nó sẽ giúp blog bạn được nhận diện tốt hơn.

Lời kết…

Sau khi bạn đã có đủ bộ Brand Kit cho blog hãy lưu trữ cẩn thận bằng các dịch vụ đám mây như Dropbox, Pcloud, Goolge Drive,…để bạn có thể tái sử dụng và truy cập cho các dịch vụ khác sau này.

Bạn thấy rằng bài viết dùng khá nhiều công cụ khác nhau để hỗ trợ quá trình thiết kế bộ nhận diện thương hiệu của bạn. Với nhà thiết kế đồ hoạ chuyên nghiệp họ chỉ cần dùng một phần mềm đồ hoạ là có thể thiết kế được toàn bộ, nhưng chúng ta là dân không chuyên nên phải cần tới nhiều công cụ hỗ trợ khác nhau.

Tất cả không quan trọng, miễn là bạn có thể đạt được mục đích theo mọi cách cố gắng, đúng không nào?

Biết đâu chừng, sau bài viết này sẽ có một số bạn lại cảm thấy mình phù hợp với thiết kế hơn là blogger.

Quá trình thực hiện cũng khá công phu, nếu các bạn cảm thấy bí ở chỗ nào hãy để lại bình luận bên dưới tôi sẽ cố gắng trợ giúp cho bạn.