thiết kế logo http://beau.vn/vi vi Cách thiết kế logo wordmark cho thương hiệu http://beau.vn/vi/cach-thiet-ke-logo-wordmark-cho-thuong-hieu <span class="field field--name-title field--type-string field--label-hidden">Cách thiết kế logo wordmark cho thương hiệu</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/85" typeof="schema:Person" property="schema:name" datatype="">content2</span></span> <span class="field field--name-created field--type-created field--label-hidden">T5, 12/29/2022 - 12:06</span> <a href="/vi/branding-chien-luoc-dinh-vi-thuong-hieu" hreflang="vi">Branding</a> <p><span id="cke_bm_1223S" style="display: none;"> </span></p> <p>Bạn có thể bắt gặp logo wordmark ở nhiều ngành khác nhau như công nghệ, truyền thông, thời trang, đồ ăn, etc.</p> <a href="/vi/logo" hreflang="vi">logo</a> <a href="/vi/thiet-ke-logo" hreflang="vi">thiết kế logo</a> <a href="/vi/bo-nhan-dien-thuong-hieu" hreflang="vi">bộ nhận diện thương hiệu</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2022-12/cover-cach-thiet-ke-logo-wordmark-cho-thuong-hieu.jpg" alt="Cách thiết kế logo wordmark cho thương hiệu"> </div> <div class="desktop-space" style="height: 100px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p>Thiết kế logo wordmark tập trung vào sự đơn giản. Với việc chỉ dùng các ký tự chữ cái, kiểu logo này dễ dàng trở nên phổ biến và không bao giờ lỗi thời.</p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/goc-nhin/thiet-ke-logo-mau-sac-noi-len-dieu-gi-ve-thuong-hieu-cua-ban">Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn? <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/tuong-lai-cua-logo-no-da-chet-hay-se-con-song-mai">Tương lai của Logo: Nó đã chết hay sẽ còn sống mãi? <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/dung-ngai-lua-chon-agency-thiet-ke-website-phu-hop-cho-thuong-hieu">Đừng ngại lựa chọn agency thiết kế website phù hợp cho thương hiệu <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Bạn có thể bắt gặp logo wordmark ở nhiều ngành khác nhau như công nghệ, truyền thông, thời trang, đồ ăn, etc.</p> <p>Vậy, hôm nay, hãy cùng tìm hiểu xem logo wordmark, và thương hiệu của bạn có thể cân nhắc sử dụng loại logo này như thế nào.</p> <h2>Logo wordmark là gì?</h2> <p>Logo wordmark là kiểu logo chỉ bao gồm các ký tự tạo nên tên của thương hiệu - và không bao gồm các biểu tượng hay thiết kế nào khác. Logo wordmark còn được gọi là logotypes, và có thể có các biến thể đơn sắc cho các không gian nhỏ hơn như mạng xã hội hay favicon.</p> <p>Vì tính đơn giản của logo wordmark, lựa chọn typeface và điều chỉnh khoảng cách ký tự là rất quan trọng. Một vài ví dụ logo wordmark nổi tiếng có thể kể tới là Google, Coca-Cola, Calvin Klein, etc.</p> <p>Chỉ cần nghe hoặc đọc lên các cụm từ này, bạn đã có thể ngay lập tức liên tưởng đến nhận diện của thương hiệu. Và đó chính là sức mạnh của logo wordmark.</p> <p>Khi bạn thấu hiểu khách hàng mục tiêu, sử dụng các yếu tố văn hoá và hình ảnh hợp lý sẽ truyền đạt thông điệp thương hiệu hiệu quả, dù cho đó chỉ là các ký tự và màu sắc font.</p> <h2>Khi nào thì nên dùng logo wordmark?</h2> <p>Nhiều nhà thiết kế ưa thích logo wordmark vì sự đơn giản và dễ ứng dụng, nhưng tạo ra một logo wordmark hợp lý không phải là điều dễ dàng mà tay mơ nào cũng làm được.</p> <p>Bạn không muốn một logo sinh ra để rơi vào lãng quên. Và việc chỉ sử dụng typeface mà không có sự hỗ trợ hình ảnh khác sẽ khiến việc truyền đạt sản phẩm / dịch vụ khó hơn. Rất nhiều công ty lớn lấy biểu tượng làm logo, như Nike, Apple, McDonald’s, và chỉ biểu tượng đó đã giúp mọi người nhận ra sản phẩm của công ty.</p> <p>Cho nên, hãy cân nhắc kỹ khi lựa chọn logo wordmark hay logomark (dạng biểu tượng) cho thương hiệu của mình. Thử nghĩ về những điều sau:</p> <ul> <li><strong>Tên thương hiệu của bạn có ngăn và đáng nhớ?</strong> Với chỉ một từ, liệu tên công ty bạn có đủ nổi bật so với đối thủ? Nếu tên thương hiệu có nhiều từ, hãy cân nhắc sử dụng phong cách monogram hoặc lettermark - viết tắt chữ cái đầu như HBO hay NASA.</li> <li><strong>Bạn có sử dụng logo trên nhiều kênh khác nhau?</strong> Hoặc trên nhiều hình ảnh và background? Wordmark logo dễ ứng dụng trên nhiều nền tảng vì bạn không phải lo về không gian của các biểu tượng hoặc các phiên bản khác nhau.</li> <li><strong>Bạn có muốn sử dụng màu sắc hoặc typeface đặc biệt cho logo?</strong> Một logo wordmark không cần nhiều yếu tố để tạo ấn tượng, nên hãy dùng ít yếu tố nếu có thể.</li> </ul> <h2>Thiết kế logo wordmark như thế nào?</h2> <h3>1. Tìm đúng typeface</h3> <p>Bởi vì logo wordmark chỉ được tạo ra bằng các chữ cái, nên việc chọn một typeface để truyền đạt tính cách thương hiệu là rất quan trọng. Ngôn từ đem đến ý nghĩa, còn kiểu chữ truyền tải tính cách. Hãy nhớ điều này.</p> <p>Để bắt đầu, hãy tìm vài tính từ mô tả tính cách thương hiệu của bạn, như là “thân thiện” hay “yêu thương”. Sau đó, hãy xem các bộ font và typeface để xem lựa chọn nào phù hợp các tính từ đó.</p> <p>Một bộ typeface sans serif không chân rất phù hợp với các công ty công nghệ là vì nó thể hiện sự đổi mới. Hãy nhìn vào Facebook, Netflix, hay Uber.</p> <p>Cũng như bất kỳ kiểu logo nào khác, hãy chọn một typeface để có thể hiện rõ với nhiều kích cỡ và trên nhiều kênh khác nhau. Hãy cân nhắc về weight, case, và các đặc điểm hình thái kèm theo.</p> <h3>2. Thay đổi ký tự</h3> <p><img alt="thay đổi ký tự logo wordmark" data-entity-type="file" data-entity-uuid="14ae004a-da4a-41bd-a6cb-79ecc44e3825" height="800" src="/sites/default/files/cach-thiet-ke-logo-wordmark-cho-thuong-hieu-4.jpg" width="1200" /></p> <p>Đôi khi, sự khác biệt giữa một typeface thông thường và một typeface tuyệt vời chỉ nằm ở sự thay đổi với một ký tự duy nhất. Yếu tố bất ngờ đó làm cho logo wordmark trở nên đáng nhớ hơn, như chữ C trong logo Casper hay chữ A phóng lớn trong logo Braun.</p> <p>Dù cho không phải lúc nào bạn cũng cần thay đổi ký tự cho logo wordmark, đây có thể là một cơ hội thú vị để khám phá và khiến cho logo bớt trở nên nhàm chán.</p> <p>Nếu bạn quyết định thay đổi một vài ký tự, hãy đảm bảo là có lý do chính đáng cho việc đó. Việc này có nhấn mạnh tên công ty đúng cách? Hay có thể sử dụng cho dạng logo monogram?</p> <h3>3. Giao tiếp bằng màu sắc</h3> <p><img alt="logo wordmark màu sắc" data-entity-type="file" data-entity-uuid="a962bb95-ce9a-4b24-bfb7-2839ffa028fd" height="800" src="/sites/default/files/cach-thiet-ke-logo-wordmark-cho-thuong-hieu-1_0.jpg" width="1200" /></p> <p>Khi bạn chỉ giao tiếp bằng các chữ cái, thì màu sắc là một cách tuyệt vời để khiến cho thương hiệu trở nên khác biệt. Hãy nghĩ về màu cam tươi sáng của Etsy hay màu xanh nổi bật của Kickstarter.</p> <p>Bạn cũng có thể thử nghiệm bằng cách đổi màu chỉ một ký tự duy nhất, như Flickr đã dùng với chữ r màu hồng hay Mobil với chữ o màu đỏ.</p> <p>Bên cạnh đó, bạn chọn màu background gì cho logo wordmark? Hãy nhớ rằng logo sẽ được dùng trên nền trắng khá thường xuyên cho nhiều ứng dụng khác nhau. Để đảm bảo tính đẹp mắt của logo, hãy đưa ra các biến thể màu của logo.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/thiet-ke-logo-mau-sac-noi-len-dieu-gi-ve-thuong-hieu-cua-ban" target="_blank">Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn?</a></strong></p> <h3>4. Căn chỉnh khoảng cách</h3> <p><img alt="logo wordmark khoảng cách" data-entity-type="file" data-entity-uuid="0212f623-0b99-4972-ba32-439e2c9c38e2" height="800" src="/sites/default/files/cach-thiet-ke-logo-wordmark-cho-thuong-hieu-2.jpg" width="1200" /></p> <p>Bây giờ, hãy bắt đầu khó tính hơn với khoảng cách của các ký tự - hay còn gọi là kerning. Điều này sẽ phụ thuộc vào hiệu ứng mà bạn muốn đưa vào logo của mình:</p> <ul> <li>Bạn có muốn các ký tự chạm vào nhau?</li> <li>Việc thêm hoặc bớt khoảng cách giữa các ký tự ảnh hưởng khả năng đọc - readability như thế nào?</li> <li>Weight và góc của font ảnh hưởng spacing như thế nào?</li> </ul> <p>Bạn cũng có thể thử nghiệm viết hoa và viết thường để xem điều gì đặc trưng nhất cho thương hiệu. Hãy quay lại những tính từ bạn đã viết ra để mô tả doanh nghiệp của mình và xem tính phù hợp.</p> <p>Bên cạnh đó, hãy nhớ là logo wordmark thường không có slogan hoặc tagline. Nếu bạn muốn thêm vào hãy đảm bảo là ngắn và ít từ.</p> <h3>5. Sáng tạo hình khối</h3> <p><img alt="logo wordmark hình khối" data-entity-type="file" data-entity-uuid="6b48e3d8-735b-4a17-9031-7a22c85663b2" height="800" src="/sites/default/files/cach-thiet-ke-logo-wordmark-cho-thuong-hieu-3.jpg" width="1200" /></p> <p>Một cách khác mà các nhà thiết kế tạo thêm hứng thú trực quan cho logo wordmark là sử dụng các hình dạng đơn giản.</p> <p>Showtime đặt ba chữ cái đầu tiên trong tên của họ - “SHO” - trong một vòng tròn màu đỏ và đảo ngược màu sắc từ phần còn lại của logo, tạo cho nó một cái nhìn hoàn toàn khác so với khi không có hình tròn.</p> <p>Mặc dù LinkedIn là tên công ty chỉ gồm một từ, nhưng logo đặt một hộp màu xanh lam xung quanh chữ “in” để làm cho nó trở nên đặc biệt về mặt hình ảnh. Điều này gợi ý cảm giác “ bên trong” khi có các mối liên hệ công việc.</p> <p>Ngoài ra, bạn còn có thể tạo nên các tầng chữ như Uniqlo đã làm, hoặc thêm một ô tròn bao quanh các chữ như là Pfizer.</p> <p>Tôi vẫn phải nhắc lại, hãy suy nghĩ về mục đích khi thêm bất cứ điều gì vào logo wordmark của bạn.</p> <p><strong>Đọc thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/tuong-lai-cua-logo-no-da-chet-hay-se-con-song-mai" target="_blank">Tương lai của Logo: Nó đã chết hay sẽ còn sống mãi?</a></strong></p> <h2>Những lưu ý khi thiết kế <a href="https://beautique.vn/insight/art-direction-cho-logomark-cach-chia-dinh-dang-logo" target="_blank">logo wordmark</a></h2> <p>Logo wordmark có thể nghe thì đơn giản, nhưng đừng bỏ qua việc tạo nên một hình ảnh độc đáo. Hãy ghi nhớ những điều nên tránh sau:</p> <ul> <li><strong>Tránh sử dụng quá nhiều thứ</strong>: Wordmark ấn tượng vì tính đơn giản. Đừng sử dụng các typeface phức tạp và chọn chỉ một hoặc hai yếu tố để thêm vào.</li> <li><strong>Tránh ảnh hưởng tính đọc</strong>: Nếu logo wordmark của bạn không dễ đọc, khách hàng sẽ dễ nhầm lẫn và khó chịu. Trên tất cả, hãy đảm bảo logo dễ đọc trong tất cả các môi trường.</li> <li><strong>Tránh thiếu không gian:</strong> Hãy cẩn thận khi điều chỉnh kerning hoặc leading, việc lạm dụng tinh chỉnh có thể làm cho logo trở nên thiếu chuyên nghiệp và bắt mắt. Sự cân bằng đôi khi chỉ nằm ở việc thêm hay bớt một chút spacing.</li> </ul> <h2>Lời cuối</h2> <p>Logo wordmark được sử dụng rộng rãi trong các ngành vì một lý do - chúng dễ nhìn, không phức tạp, và tăng khả năng nhận diện thương hiệu. Quan trọng nhất, chúng bền vững với thời gian, dù là bây giờ hay sau này.</p> <p>Có rất nhiều thứ bạn có thể làm để khiến cho logo wordmark nổi bật trên tất cả các kênh. Hãy tham khảo với chúng tôi để tìm đến sự tối giản hoàn hảo - nơi mà logo wordmark thương hiệu của bạn gây ấn tượng mạnh nhất dù không hề nói gì.</p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/hieu-tu-a-z-ve-thiet-ke-website-responsive" hreflang="vi">Hiểu từ A-Z về Thiết kế Website Responsive </a> <a href="/vi/tai-sao-can-ban-tam-cho-viec-xay-dung-thuong-hieu" hreflang="vi">Tại sao cần bận tâm cho việc xây dựng thương hiệu?</a> <a href="/vi/kinh-doanh-phong-trao-khi-thuong-hieu-thieu-tinh-sang-tao" hreflang="vi">Kinh doanh phong trào - khi thương hiệu thiếu tính sáng tạo</a> <a href="/vi/5-buoc-xay-dung-chien-luoc-thuong-hieu-thanh-cong" hreflang="vi">5 Bước Xây Dựng Chiến Lược Thương Hiệu Thành Công</a> <a href="/vi/nghien-cuu-de-thau-hieu-khach-hang" hreflang="vi">Nghiên cứu để thấu hiểu khách hàng</a> <a href="/vi/cac-phuong-phap-dinh-vi-thuong-hieu-co-ban-mo-rong" hreflang="vi">Các phương pháp định vị thương hiệu cơ bản &amp; mở rộng</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Thu, 29 Dec 2022 05:06:56 +0000 content2 316 at http://beau.vn Bạn đã biết về Quy tắc thiết kế UI cho website? http://beau.vn/vi/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website <span class="field field--name-title field--type-string field--label-hidden">Bạn đã biết về Quy tắc thiết kế UI cho website?</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/38" typeof="schema:Person" property="schema:name" datatype="">content</span></span> <span class="field field--name-created field--type-created field--label-hidden">T6, 04/08/2022 - 09:52</span> <a href="/vi/cam-hung-thiet-ke-sang-tao" hreflang="vi">Cảm hứng thiết kế sáng tạo</a> <p>Việc sử dụng và áp dụng đúng <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">quy tắc thiết kế UI cho website</a> luôn hữu ích cho việc xây dựng và phát triển một website.</p> <h2>Quy tắc <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">thiết kế UI cho website</a> là gì?</h2> <p><a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">Quy tắc thiết kế UI cho website</a> (User Interface Guidelines) là một tài liệu chứa các quy tắc để thiết kế một trang web. Chúng là tập hợp các khuyến nghị về cách áp dụng các nguyên tắc thiết kế để mang đến trải nghiệm người dùng tích cực. Mục đích là cung cấp hướng dẫn rõ ràng, dễ tiếp thu và hiệu quả cho các nhà thiết kế và nhà phát triển sản phẩm.</p> <h2>Tại sao chúng ta phải đưa ra quy tắc thiết kế UI cho website?</h2> <p>Lý do chính tại sao nó được đặt ra là để ưu tiên “tiêu chuẩn và tính nhất quán” trong việc triển khai mọi văn bản, nút, biểu tượng, khoảng cách, màu sắc, v..v…trong quá trình phát triển hệ thống hay một website.</p> <p>Nếu một nhà thiết kế hay nhà phát triển thấy một số thiết kế không nhất quán, họ có thể dễ dàng nhìn vào bản quy tắc thiết kế UI để biết đâu là điểm bất hợp lý. Không chỉ vậy, để một hệ thống có thể phát triển, những yếu tố sẵn có hiện tại cần có khả năng mở rộng và tạo ra các thành phần mới phức tạp hơn.</p> <p>Đối với trường hợp của chúng tôi, vì hệ thống được phát triển bởi 2 nhóm riêng biệt, team chúng tôi và team khác cần quy tắc thiết kế UI để tuân thủ và thống nhất hướng làm việc.</p> <h2>Những khía cạnh nào được thấy trong quy tắc thiết kế UI cho website?</h2> <p>Bây giờ chúng ta xem xét những khía cạnh nào nên được sử dụng làm quy tắc khi thiết kế UI cho website. Các khía cạnh này bao gồm:</p> <ul><li>Typography: Loại font chữ, lựa chọn kiểu chữ, kích thước được phép sử dụng</li> <li>Màu sắc: Các màu được sử dụng, gồm màu chính, màu phụ thứ nhất và màu phụ thứ hai.</li> <li>Nút: Hình dạng, màu sắc, văn bản, bán kính, kích thước và hành động gắn với nút.</li> <li>Nhập và biểu mẫu: Quy định về hình dạng, kích thước.</li> <li>Icon: Loại icon, kích thước của chúng.</li> <li>Khoảng cách: Khoảng cách, khoảng trống giữa các yếu tố.</li> <li>Tương tác và hành động: Các hành động và tương tác của người dùng với một yếu tố (di chuột, cuộn, nhấp,.v..v…)</li> <li>Lỗi và trạng thái hệ thống: Những quy tắc về thông tin hiển thị khi xảy ra lỗi hoặc thông báo về trạng thái.</li> </ul><img alt="quy tac thiet ke ui cho website" data-entity-type="file" data-entity-uuid="e375d703-db11-4e8b-bd24-f77c062c886e" height="600" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-1.jpeg" width="800" class="align-center" loading="lazy" /><p> </p> <h2>Đưa nhận diện thương hiệu của khách hàng vào website</h2> <p>Các quy tắc thiết kế UI cho website cần dựa trên những quy tắc về nhận diện của thương hiệu (brand identity). Trong một số trường hợp, khách hàng không đưa ra yêu cầu cụ thể liên quan đến nhận diện thương hiệu nhưng bạn vẫn nên nói chuyện với họ về vấn đề này. Bởi website cũng là một phần của thương hiệu, chúng nên được xây dựng dựa trên những quy tắc về nhận diện thương hiệu. Hãy nghiên cứu và quan sát xem liệu nhận diện thương hiệu của khách hàng và giao diện mà chúng ta thiết kế đã đồng nhất hay chưa.</p> <p><strong>Xem thêm: <a href="https://beau.vn/vi/goc-nhin/10-nguyen-tac-cot-loi-de-co-mot-thiet-ke-website-tot"><em>10 nguyên tắc cốt lõi để có một thiết kế Website tốt</em></a></strong></p> <h2>Sử dụng công cụ nào?</h2> <p>Khi đưa ra quy tắc giao diện người dùng, tôi đã thực hiện mọi phần trên Figma. Lý do chình là vì Figma chứa công cụ master component và reusable style, tối ưu cho việc thiết kế một hệ thống. Với những công cụ này, tôi có thể dễ dàng tái sử dụng lại những phần mà tôi đã thiết kế trước đó, điều chỉnh một số chi tiết nhỏ mà không cần phải duplicate.</p> <h2>Quy tắc thiết kế UI cho website</h2> <h3>Typography</h3> <p>Nguyên tắc giao diện người dùng trong kiểu chữ bao gồm các quy tắc sử dụng font chữ, cỡ chữ, độ đậm (weight) và tất cả những thứ liên quan tới việc sử dụng văn bản trên một trang web. Ví dụ về quy định typography với typeface Nunito Sans:</p> <img alt="quy tac thiet ke ui cho website" data-entity-type="file" data-entity-uuid="98af7960-4865-4ce4-9c47-228c429a5e12" height="1631" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-2.png" width="1400" class="align-center" loading="lazy" /><p><strong>Xem thêm: <a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-1-lua-chon-font-chu"><em>Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ</em></a></strong></p> <h3>Màu sắc trong <a href="https://beau.vn/vi/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui">Quy tắc thiết kế UI cho website</a></h3> <p>Tạo quy định cho màu sắc bằng cách liệt kê các màu cơ bản sẽ được dùng, ví dụ như đen, trắng, xám và những màu phụ như đỏ - để báo lỗi, xanh lá - báo thành công và màu thương hiệu của khách hàng - trong trường hợp này là cam.</p> <p><strong>Xem thêm: <a href="https://beau.vn/vi/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui"><em>Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI</em></a></strong></p> <p><br /><img alt="" data-entity-type="file" data-entity-uuid="2f0d9e34-04c6-4970-8bae-181445b281e1" height="390" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-3.png" width="761" loading="lazy" /></p> <p>Từ bộ màu này, một số cấp độ màu (sáng hơn hoặc đậm hơn) có thể được tạo ra. Màu phụ sử dụng để điều chỉnh các yêu cầu hệ thống để nó không bị cứng nhắc hay giới hạn, dưới đây là bảng quy tắc giao diện người dùng cho màu:</p> <img alt="quy tac thiet ke ui cho website" data-entity-type="file" data-entity-uuid="2c32567b-8b1c-4439-ad68-b1ec6b6c16c1" height="444" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-4.png" width="798" class="align-center" loading="lazy" /><p> </p> <h3>Nút (Button) khi thiết kế UI</h3> <p>Quy tắc tạo nút được thực hiện bằng cách xác định các loại nút và hành động gắn với chúng. Ví dụ như khi di chuột qua nút hay khi nút bị vô hiệu quá. Nút có thể được thiết kế với một hệ thống phân cấp về mức độ quan trọng: Chính (primary), cấp hai (secondary) và cấp ba (triad).</p> <img alt="quy tac thiet ke ui cho website" data-entity-type="file" data-entity-uuid="2a0ff987-3934-4b17-94a2-58d8bede6619" height="666" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-5.png" width="857" class="align-center" loading="lazy" /><p> </p> <h3>Khoảng cách</h3> <p>Ngoài typeface, màu sắc và icon, khoảng cách cũng là một trong những yếu tố quan trọng nhưng lại ít được chú ý đó là khoảng cách. Mặc dù có vẻ tầm thường nhưng khoảng cách giúp thiết kế có không gian “thở” giữa những yếu tố khác. Khoảng cách cũng rất hữu ích để thiết kế được tối giản và sạch sẽ hơn. Để tạo thuận lợi cho giai đoạn thiết kế và phát triển front-end, đơn vị khoảng cách được sử dụng nên là bội số của 4.</p> <p>Dưới đây là một quy tắc về khoảng cách và cách nó được triển khai trên thiết kế:</p> <h3>Icon</h3> <p>Icon giúp nhấn mạnh vào trọng tâm thông tin qua một hệ thống đồ họa. Hệ thống icon cần được đồng nhất về style thiết kế. Bạn có thể dùng icon từ Material Design Icons, kho icon từ hệ thống thiết kế của Google.</p> <p>Dưới đây là ví dụ về cách triển khai icon:</p> <img alt="quy tac thiet ke ui cho website" data-entity-type="file" data-entity-uuid="ce85e565-84bc-4eb6-be12-43e8abb06a37" height="477" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-7.png" width="1400" class="align-center" loading="lazy" /><p> </p> <p>Sau khi đã có những quy tắc về màu sắc, typeface và icon, chúng ta kết hợp chúng lại tạo hệ thống layout. Trong một website, các trang của nó sẽ có sự tương đồng về cả yếu tố nhỏ lẫn tổng thể layout, việc tạo hệ thống layout cho chúng ta khả năng tái sử dụng nó ở những trang khác.</p> <p><strong>Xem thêm: <a href="https://beau.vn/vi/goc-nhin/kiem-soat-thiet-ke-cua-ban-voi-goc-nhin-truc-z-trong-thiet-ke-phang"><em>Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng</em></a></strong></p> <img alt="quy tac thiet ke ui cho website" data-entity-type="file" data-entity-uuid="303c3b82-220f-4a80-98a0-dfd8193e5fca" height="982" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-8.png" width="1400" class="align-center" loading="lazy" /><p> </p> <p>Khi tạo quy tắc giao diện người dùng trên Figma, những quy tắc này có thể được lưu lại dưới dạng “local style” và “asset list”. Dưới đây là một ví dụ:</p> <h2>Lợi ích của <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">quy tắc thiết kế UI cho website</a> trong giai đoạn phát triển</h2> <p>Tất nhiên, trong giai đoạn thiết kế, quy tắc giao diện người dùng rất hữu ích cho các nhà thiết kế, nhưng với những nhà phát triển nó hữu ích như thế nào?</p> <p>Với những nhà phát triển back-end, những hướng dẫn này hữu ích cho việc hỗ trợ chuẩn bị mô hình cơ sở dữ liệu rõ ràng hơn và giúp hiểu về quy trình kinh doanh mà người dùng muốn đạt được.</p> <p>Từ quan điểm của nhà phát triển back-end, các nguyên tắc này hữu ích cho việc tạo HTML và CSS cho các phần trên website. Không chỉ vậy, với sự hỗ trợ của Figma, nhà phát triển front-end cũng có thể sao chép code từ CSS của mỗi phần. Bởi vậy, việc tạo và tuân thủ quy tắc thiết kế UI cho website sẽ rút ngắn đáng kể thời gian và công sức khi xây dựng một trang web.</p> <h2>Kết luận</h2> <p>Việc sử dụng và áp dụng đúng <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">quy tắc thiết kế UI cho website</a> sẽ hữu ích cho việc xây dựng và phát triển một website. Ngoài ra, những nguyên tắc này cũng có thể được tạo và áp dụng với các sản phẩm số khác như ứng dụng web, ứng dụng di động. Đặc biệt là đối với những nhà thiết kế, những quy tắc ấy là nền tảng để xây dựng một thiết kế đồng bộ, có hệ thống. Và nó cũng là bản đồ cho quá trình thiết kế, loại bỏ tình trạng thiết kế đi lạc hướng.</p> <p>Với trường hợp website sẽ mở rộng và phát triển trong tương lai, thiết kế có thể được điều chỉnh theo nhu cầu/yêu cầu dựa trên những quy tắc sẵn có đó. Việc thay thế hay thêm/bớt có thể được thực hiện dễ dàng, chỉ cần tuân thủ theo những quy tắc ấy.</p> <a href="/vi/nghien-cuu-thiet-ke" hreflang="vi">nghiên cứu thiết kế</a> <a href="/vi/thiet-ke-ui" hreflang="vi">Thiết kế UI</a> <a href="/vi/thiet-ke-web" hreflang="vi">Thiết kế Web</a> <a href="/vi/thiet-ke" hreflang="vi">thiết kế</a> <a href="/vi/thiet-ke-bo-nhan-dien-thuong-hieu" hreflang="vi">Thiết kế bộ nhận diện thương hiệu</a> <a href="/vi/thiet-ke-logo" hreflang="vi">thiết kế logo</a> <a href="/vi/ui" hreflang="vi">UI</a> <a href="/vi/giao-dien-nguoi-dung" hreflang="vi">Giao diện người dùng</a> <a href="/vi/thiet-ke-website" hreflang="vi">Thiết kế Website</a> <div class="f-img" style="margin-bottom: 45px"> <img src="/sites/default/files/2022-04/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-cover.jpg" alt="Bạn đã biết về Quy tắc thiết kế UI cho website?"> </div> <div class="desktop-space" style="height: 100px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <h2><p>Việc sử dụng và áp dụng đúng <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">quy tắc thiết kế UI cho website</a>&nbsp;luôn hữu ích cho việc xây dựng và phát triển một website.</p> </h2> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/goc-nhin/tim-hieu-ve-thiet-ke-trai-nghiem-nguoi-dung-ux-design">Tìm hiểu về thiết kế trải nghiệm người dùng (UX Design) <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/thiet-ke-ui-nhung-yeu-to-co-ban-trong-typography-danh-cho-nhung-tay-mo">Thiết kế UI: Những yếu tố cơ bản trong Typography những &quot;tay mơ&quot; cần biết <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/nhung-nguyen-tac-gestalt-khai-thac-quy-luat-thi-giac-trong-thiet-ke-ui">Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <h2>Quy tắc <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">thiết kế UI cho website</a> là gì?</h2> <p><a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">Quy tắc thiết kế UI cho website</a> (User Interface Guidelines) là một tài liệu chứa các quy tắc để thiết kế một trang web. Chúng là tập hợp các khuyến nghị về cách áp dụng các nguyên tắc thiết kế để mang đến trải nghiệm người dùng tích cực. Mục đích là cung cấp hướng dẫn rõ ràng, dễ tiếp thu và hiệu quả cho các nhà thiết kế và nhà phát triển sản phẩm.</p> <h2>Tại sao chúng ta phải đưa ra quy tắc thiết kế UI cho website?</h2> <p>Lý do chính tại sao nó được đặt ra là để ưu tiên “tiêu chuẩn và tính nhất quán” trong việc triển khai mọi văn bản, nút, biểu tượng, khoảng cách, màu sắc, v..v…trong quá trình phát triển hệ thống hay một website.</p> <p>Nếu một nhà thiết kế hay nhà phát triển thấy một số thiết kế không nhất quán, họ có thể dễ dàng nhìn vào bản quy tắc thiết kế UI để biết đâu là điểm bất hợp lý. Không chỉ vậy, để một hệ thống có thể phát triển, những yếu tố sẵn có hiện tại cần có khả năng mở rộng và tạo ra các thành phần mới phức tạp hơn.</p> <p>Đối với trường hợp của chúng tôi, vì hệ thống được phát triển bởi 2 nhóm riêng biệt, team chúng tôi và team khác cần quy tắc thiết kế UI để tuân thủ và thống nhất hướng làm việc.</p> <h2>Những khía cạnh nào được thấy trong quy tắc thiết kế UI cho website?</h2> <p>Bây giờ chúng ta xem xét những khía cạnh nào nên được sử dụng làm quy tắc khi thiết kế UI cho website. Các khía cạnh này bao gồm:</p> <ul> <li>Typography: Loại font chữ, lựa chọn kiểu chữ, kích thước được phép sử dụng</li> <li>Màu sắc: Các màu được sử dụng, gồm màu chính, màu phụ thứ nhất và màu phụ thứ hai.</li> <li>Nút: Hình dạng, màu sắc, văn bản, bán kính, kích thước và hành động gắn với nút.</li> <li>Nhập và biểu mẫu: Quy định về hình dạng, kích thước.</li> <li>Icon: Loại icon, kích thước của chúng.</li> <li>Khoảng cách: Khoảng cách, khoảng trống giữa các yếu tố.</li> <li>Tương tác và hành động: Các hành động và tương tác của người dùng với một yếu tố (di chuột, cuộn, nhấp,.v..v…)</li> <li>Lỗi và trạng thái hệ thống: Những quy tắc về thông tin hiển thị khi xảy ra lỗi hoặc thông báo về trạng thái.</li> </ul> <img alt="quy tac thiet ke ui cho website" data-align="center" data-entity-type="file" data-entity-uuid="e375d703-db11-4e8b-bd24-f77c062c886e" height="600" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-1.jpeg" width="800" /> <p>&nbsp;</p> <h2>Đưa nhận diện thương hiệu của khách hàng vào website</h2> <p>Các quy tắc thiết kế UI cho website cần dựa trên những quy tắc về nhận diện của thương hiệu (brand identity). Trong một số trường hợp, khách hàng không đưa ra yêu cầu cụ thể liên quan đến nhận diện thương hiệu nhưng bạn vẫn nên nói chuyện với họ về vấn đề này. Bởi website cũng là một phần của thương hiệu, chúng nên được xây dựng dựa trên những quy tắc về nhận diện thương hiệu. Hãy nghiên cứu và quan sát xem liệu nhận diện thương hiệu của khách hàng và giao diện mà chúng ta thiết kế đã đồng nhất hay chưa.</p> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/10-nguyen-tac-cot-loi-de-co-mot-thiet-ke-website-tot"><em>10 nguyên tắc cốt lõi để có một thiết kế Website tốt</em></a></strong></p> <h2>Sử dụng công cụ nào?</h2> <p>Khi đưa ra quy tắc giao diện người dùng, tôi đã thực hiện mọi phần trên Figma. Lý do chình là vì Figma chứa công cụ master component và reusable style, tối ưu cho việc thiết kế một hệ thống. Với những công cụ này, tôi có thể dễ dàng tái sử dụng lại những phần mà tôi đã thiết kế trước đó, điều chỉnh một số chi tiết nhỏ mà không cần phải duplicate.</p> <h2>Quy tắc thiết kế UI cho website</h2> <h3>Typography</h3> <p>Nguyên tắc giao diện người dùng trong kiểu chữ bao gồm các quy tắc sử dụng font chữ, cỡ chữ, độ đậm (weight) và tất cả những thứ liên quan tới việc sử dụng văn bản trên một trang web. Ví dụ về quy định typography với typeface Nunito Sans:</p> <img alt="quy tac thiet ke ui cho website" data-align="center" data-entity-type="file" data-entity-uuid="98af7960-4865-4ce4-9c47-228c429a5e12" height="1631" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-2.png" width="1400" /> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/series-typography-trong-quy-trinh-xay-dung-trai-nghiem-so-1-lua-chon-font-chu"><em>Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ</em></a></strong></p> <h3>Màu sắc trong <a href="https://beau.vn/vi/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui">Quy tắc thiết kế UI cho website</a></h3> <p>Tạo quy định cho màu sắc bằng cách liệt kê các màu cơ bản sẽ được dùng, ví dụ như đen, trắng, xám và những màu phụ như đỏ - để báo lỗi, xanh lá - báo thành công và màu thương hiệu của khách hàng - trong trường hợp này là cam.</p> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/xanh-do-va-cau-chuyen-ung-dung-mau-sac-trong-thiet-ke-ui"><em>Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI</em></a></strong></p> <p><br /> <img alt="" data-entity-type="file" data-entity-uuid="2f0d9e34-04c6-4970-8bae-181445b281e1" height="390" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-3.png" width="761" /></p> <p>Từ bộ màu này, một số cấp độ màu (sáng hơn hoặc đậm hơn) có thể được tạo ra. Màu phụ sử dụng để điều chỉnh các yêu cầu hệ thống để nó không bị cứng nhắc hay giới hạn, dưới đây là bảng quy tắc giao diện người dùng cho màu:</p> <img alt="quy tac thiet ke ui cho website" data-align="center" data-entity-type="file" data-entity-uuid="2c32567b-8b1c-4439-ad68-b1ec6b6c16c1" height="444" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-4.png" width="798" /> <p>&nbsp;</p> <h3>Nút (Button) khi thiết kế UI</h3> <p>Quy tắc tạo nút được thực hiện bằng cách xác định các loại nút và hành động gắn với chúng. Ví dụ như khi di chuột qua nút hay khi nút bị vô hiệu quá. Nút có thể được thiết kế với một hệ thống phân cấp về mức độ quan trọng: Chính (primary), cấp hai (secondary) và cấp ba (triad).</p> <img alt="quy tac thiet ke ui cho website" data-align="center" data-entity-type="file" data-entity-uuid="2a0ff987-3934-4b17-94a2-58d8bede6619" height="666" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-5.png" width="857" /> <p>&nbsp;</p> <h3>Khoảng cách</h3> <p>Ngoài typeface, màu sắc và icon, khoảng cách cũng là một trong những yếu tố quan trọng nhưng lại ít được chú ý đó là khoảng cách. Mặc dù có vẻ tầm thường nhưng khoảng cách giúp thiết kế có không gian “thở” giữa những yếu tố khác. Khoảng cách cũng rất hữu ích để thiết kế được tối giản và sạch sẽ hơn. Để tạo thuận lợi cho giai đoạn thiết kế và phát triển front-end, đơn vị khoảng cách được sử dụng nên là bội số của 4.</p> <p>Dưới đây là một quy tắc về khoảng cách và cách nó được triển khai trên thiết kế:</p> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2022-04/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-6-1_0.png" alt=""> <img src="/sites/default/files/2022-04/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-6_0.png" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <h3>Icon</h3> <p>Icon giúp nhấn mạnh vào trọng tâm thông tin qua một hệ thống đồ họa. Hệ thống icon cần được đồng nhất về style thiết kế. Bạn có thể dùng icon từ Material Design Icons, kho icon từ hệ thống thiết kế của Google.</p> <p>Dưới đây là ví dụ về cách triển khai icon:</p> <img alt="quy tac thiet ke ui cho website" data-align="center" data-entity-type="file" data-entity-uuid="ce85e565-84bc-4eb6-be12-43e8abb06a37" height="477" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-7.png" width="1400" /> <p>&nbsp;</p> <p>Sau khi đã có những quy tắc về màu sắc, typeface và icon, chúng ta kết hợp chúng lại tạo hệ thống layout. Trong một website, các trang của nó sẽ có sự tương đồng về cả yếu tố nhỏ lẫn tổng thể layout, việc tạo hệ thống layout cho chúng ta khả năng tái sử dụng nó ở những trang khác.</p> <p><strong>Xem thêm:&nbsp;<a href="https://beau.vn/vi/goc-nhin/kiem-soat-thiet-ke-cua-ban-voi-goc-nhin-truc-z-trong-thiet-ke-phang"><em>Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng</em></a></strong></p> <img alt="quy tac thiet ke ui cho website" data-align="center" data-entity-type="file" data-entity-uuid="303c3b82-220f-4a80-98a0-dfd8193e5fca" height="982" src="/sites/default/files/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-8.png" width="1400" /> <p>&nbsp;</p> <p>Khi tạo quy tắc giao diện người dùng trên Figma, những quy tắc này có thể được lưu lại dưới dạng “local style” và “asset list”. Dưới đây là một ví dụ:</p> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2022-04/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-8-1.png" alt=""> <img src="/sites/default/files/2022-04/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-8-2.png" alt=""> <img src="/sites/default/files/2022-04/ban-da-biet-ve-quy-tac-thiet-ke-ui-cho-website-8-3.png" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <h2>Lợi ích của <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">quy tắc thiết kế UI cho website</a> trong giai đoạn phát triển</h2> <p>Tất nhiên, trong giai đoạn thiết kế, quy tắc giao diện người dùng rất hữu ích cho các nhà thiết kế, nhưng với những nhà phát triển nó hữu ích như thế nào?</p> <p>Với những nhà phát triển back-end, những hướng dẫn này hữu ích cho việc hỗ trợ chuẩn bị mô hình cơ sở dữ liệu rõ ràng hơn và giúp hiểu về quy trình kinh doanh mà người dùng muốn đạt được.</p> <p>Từ quan điểm của nhà phát triển back-end, các nguyên tắc này hữu ích cho việc tạo HTML và CSS cho các phần trên website. Không chỉ vậy, với sự hỗ trợ của Figma, nhà phát triển front-end cũng có thể sao chép code từ CSS của mỗi phần. Bởi vậy, việc tạo và tuân thủ quy tắc thiết kế UI cho website sẽ rút ngắn đáng kể thời gian và công sức khi xây dựng một trang web.</p> <h2>Kết luận</h2> <p>Việc sử dụng và áp dụng đúng <a href="https://beau.vn/vi/goc-nhin/thiet-ke-trai-nghiem-nguoi-dung-ux-tren-website">quy tắc thiết kế UI cho website</a> sẽ hữu ích cho việc xây dựng và phát triển một website. Ngoài ra, những nguyên tắc này cũng có thể được tạo và áp dụng với các sản phẩm số khác như ứng dụng web, ứng dụng di động. Đặc biệt là đối với những nhà thiết kế, những quy tắc ấy là nền tảng để xây dựng một thiết kế đồng bộ, có hệ thống. Và nó cũng là bản đồ cho quá trình thiết kế, loại bỏ tình trạng thiết kế đi lạc hướng.</p> <p>Với trường hợp website sẽ mở rộng và phát triển trong tương lai, thiết kế có thể được điều chỉnh theo nhu cầu/yêu cầu dựa trên những quy tắc sẵn có đó. Việc thay thế hay thêm/bớt có thể được thực hiện dễ dàng, chỉ cần tuân thủ theo những quy tắc ấy.<br /> &nbsp;</p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/goc-nhin/xu-huong-thiet-ke-website-2018-2020" hreflang="vi">Xu Hướng Thiết Kế Website 2018 - 2020</a> <a href="/vi/goc-nhin/thiet-ke-logo-mau-sac-noi-len-dieu-gi-ve-thuong-hieu-cua-ban" hreflang="vi">Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn?</a> <a href="/vi/goc-nhin/tan-dung-cac-mo-hinh-nhan-thuc-vao-san-pham-thiet-ke-p1" hreflang="vi">Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1</a> <a href="/vi/truyen-thong-thi-giac-nhan-thuc-va-thao-tung" hreflang="vi">Truyền Thông Thị Giác: Nhận Thức Và Thao Túng</a> <a href="/vi/thiet-ke-do-hoa-can-bao-nhieu-cai-wow-cho-mot-thiet-ke" hreflang="vi">Thiết kế đồ hoạ: Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế?</a> <a href="/vi/designer-nen-biet-gi-ve-nhung-loai-nghien-cuu-thiet-ke" hreflang="vi">Designer cần biết gì về những loại nghiên cứu thiết kế để bắt đầu?</a> <a href="/vi/cach-thuong-hieu-ung-dung-mau-sac-trong-thiet-ke-nhan-dien" hreflang="vi">Cách thương hiệu ứng dụng màu sắc trong thiết kế nhận diện</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Fri, 08 Apr 2022 02:52:34 +0000 content 203 at http://beau.vn Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn? http://beau.vn/vi/goc-nhin/thiet-ke-logo-mau-sac-noi-len-dieu-gi-ve-thuong-hieu-cua-ban <span class="field field--name-title field--type-string field--label-hidden">Thiết kế Logo: Màu sắc nói lên điều gì về Thương hiệu của bạn?</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/vi/user/6" typeof="schema:Person" property="schema:name" datatype="">hapham</span></span> <span class="field field--name-created field--type-created field--label-hidden">T6, 07/28/2017 - 10:05</span> <a href="/vi/branding-chien-luoc-dinh-vi-thuong-hieu" hreflang="vi">Branding</a> <div class="container"> <div class="row"> <div class="col-lg-8 col-xs-offset-0 col-sm-offset-0 col-md-offset-0 col-lg-offset-2 "> <p>Sự lựa chọn về màu sắc là một trong những quyết định quan trọng nhất trong <a href="https://beau.vn/du-an/">thiết kế logo và nhận diện thương hiệu</a>. Đã qua rồi thời kỳ màu sắc chỉ đơn giản mang giá trị về mặt thẩm mỹ – giờ đây, nhiều nghiên cứu về tâm lý học người tiêu dùng đã chỉ ra những ảnh hưởng to lớn của màu sắc trong việc thể hiện cá tính và truyền tải thông điệp thương hiệu cũng như tác động đến suy nghĩ, cảm nhận và hành vi của khách hàng:</p> <h3><strong>BÀI MỚI ĐƯỢC QUAN TÂM:</strong></h3> <p>• <a href="https://beau.vn/vi/goc-nhin/tuong-lai-cua-logo-no-da-chet-hay-se-con-song-mai">Tương lai của Logo: Nó đã chết hay sẽ còn sống mãi?</a></p> <p>• <a href="https://beau.vn/vi/goc-nhin/ky-nguyen-so-khi-trai-nghiem-lam-nen-thuong-hieu">Kỷ nguyên Số: Khi trải nghiệm làm nên thương hiệu</a></p> <p>• <a href="https://beau.vn/vi/goc-nhin/tai-dinh-vi-thuong-hieu-thay-doi-hay-la-chet">Tái định vị thương hiệu – Thay đổi hay là chết?</a></p> <p>• <a href="https://beau.vn/vi/goc-nhin/hop-tac-thuong-hieu-vu-khi-moi-cho-doanh-nghiep-viet">Hợp Tác Thương Hiệu – Vũ Khí Mới Cho Doanh Nghiệp Việt</a></p> <p>• <a href="https://beau.vn/vi/goc-nhin/5-dien-hinh-co-branding-thanh-cong-tren-the-gioi">5 Điển Hình Co-Branding Thành Công Trên Thế Giới</a></p> <p> </p> <ul><li><strong>84.7%</strong> người tiêu dùng chọn <strong>màu sắc là lý do chính</strong> khiến họ mua sản phẩm của một thương hiệu</li> <li><strong>80%</strong> người tiêu dùng tin rằng <strong>màu sắc cải thiện mức độ nhận diện thương hiệu</strong></li> <li>Khoảng từ <strong>62% đến 90%</strong> <strong>ấn tượng ban đầu</strong> của người tiêu dùng về một sản phẩn hay thương hiệu phụ thuộc vào màu sắc</li> <li>Màu sắc có khả năng làm<strong> mức độ nhận thức tăng</strong> <strong>73%</strong>, <strong>khả năng học hỏi tăng 68%</strong> và <strong>đọc hiểu tăng 40%</strong></li> </ul><p>Vậy, ý nghĩa của màu sắc trong thiết kế logo là gì – bạn và thương hiệu đã thực sự hiểu rõ chúng?</p> <h3><strong>Màu đỏ</strong></h3> <p><img alt="beau - thiết kế logo - màu đỏ" height="182" src="https://static.beautheme.com/beauvn/2018/04/07153109/Beau-%C4%91%E1%BB%8F.jpg" width="600" /></p> <p>Có lẽ bởi sự bắt mắt đầy nổi bật và sức cuốn hút không thể chối từ, đỏ là một trong những màu được sử dụng nhiều nhất trong thiết kế logo với đa dạng các sắc thái khác nhau. Màu đỏ có thể tạo liên tưởng đến sự năng động mạnh mẽ và nhiệt huyết của sức trẻ, chất lãng mạn và quyến rũ đầy đam mê của tình yêu, hay cả tính khẩn cấp và sự nguy hiểm trong một số trường hợp nhất định.</p> <p>Nhiều nghiên cứu đã chỉ ra màu đỏ có khả năng trực tiếp gây nên những thay đổi về tâm sinh lý đối với người xem, khiến cho màu sắc này phù hợp với một số ngành hàng đặc trưng. Sắc đỏ có tác dụng kích thích vị giác rất mạnh, vậy nên bạn sẽ rất hay bắt gặp các nhà hàng sử dụng màu đỏ xuyên suốt trong các thiết kế về thương hiệu như logo, bao bì thực phẩm và trang trí cửa hàng. Nguyên lý này cũng được áp dụng triệt để với khá nhiều thương hiệu thực phẩm khác như nước giải khát Coca-Cola, tương ớt Chin-su, hay ngũ cốc Kellog’s.</p> <p>Không chỉ có vậy, màu đỏ còn có tác dụng đẩy nhanh nhịp tim của người xem. Trong trường hợp của các hãng tin tức như BBC và CNN, điều này có khả năng tạo nên cảm giác cấp thiết để nhấn mạnh tính cập nhật của những tin nóng được đưa, khiến cho việc sử dụng màu đỏ trong logo khá được ưa chuộng. Đối với ngành công nghiệp giải trí, tác dụng đẩy nhanh nhịp tim của màu đỏ lại được dùng với mục đích tạo sự hưng phấn cho người xem, điển hình như hãng trò chơi điện tử Nintendo và hãng sản xuất – chiếu phim trực tuyến Netflix với những mẫu logo chữ đơn giản nhưng vẫn đầy nổi bật.</p> <h3><strong>Màu vàng</strong></h3> <p><img alt="beau - thiết kế logo - màu vàng" height="128" src="https://static.beautheme.com/beauvn/2018/04/07153210/Beau-v%C3%A0ng.jpg" width="600" /></p> <p>Là màu sắc của ánh mặt trời, vàng tỏa ra một thứ năng lượng tích cực đầy ấm áp, rạng rỡ và chan hòa, tạo nên cảm giác dễ chịu, dễ gần nhưng đồng thời cũng khó có thể bị lu mờ giữa một rừng những sắc màu khác. Giống như màu đỏ, màu vàng cũng có khả năng kích thích vị giác và cả tốc độ ăn uống, khiến cho những nhà hàng thức ăn nhanh như McDonald’s hay Lotteria đặc biệt ưa chuộng sự kết hợp này. Ngoài ra, một số nghiên cứu cho rằng màu vàng còn có tác dụng thúc đẩy khả năng xử lý của não bộ – đây là lý do màu vàng cũng được gắn liền với sức sáng tạo hay tư duy ưu việt.</p> <p>Tuy vậy, những sắc thái khác nhau của màu vàng cũng có thể tạo ra những nét nghĩa hoàn toàn riêng biệt. Sắc vàng trong logo quen thuộc của McDonald’s đem đến cảm giác vui vẻ, thân thiện với gia đình và trẻ em, nhưng đối với logo IMDB hay UPS, ánh vàng kim loại có phần trầm hơn – đặc biệt khi kết hợp với màu đen hoặc nâu – lại ngầm thể hiện sự chín chắn cũng như uy tín hay thậm chí cả nét sang trọng trong một số trường hợp nhất định.</p> <h3><strong>Màu xanh lam</strong></h3> <p><img alt="beau - thiết kế logo - màu xanh lam" height="172" src="https://static.beautheme.com/beauvn/2018/04/07153125/Beau-lam-300x86.jpg" width="600" /></p> <p>Có thể nói, xanh lam chính là vua của các màu sắc trong thiết kế logo, bởi hơn một nửa số logo trên thế giới đều có sự xuất hiện của sắc xanh này. Điều này đặc biệt phổ biến ở các doanh nghiệp lớn, bởi màu xanh lam dường như là hiện thân của những nét tính cách thương hiệu đa phần các doanh nghiệp này hướng đến. Trong khi các công ty dịch vụ ưa chuộng xanh lam bởi sự chuyên nghiệp mà sắc xanh này thể hiện, các nhà sản xuất máy móc, thiết bị lại lấy sự vững chãi, kiên cố làm trọng tâm. Nhiều nhãn hàng công nghệ như Dell, IBM hay Intel cũng sử dụng nhiều màu xanh lam trong thiết kế thương hiệu để nhắn gửi thông điệp về sự thông minh và đáng tin cậy của sản phẩm. Bên cạnh đó, sắc xanh lam còn gắn liền với hình ảnh về quyền lực và thành công – đây cũng là lý do màu xanh thường được lựa chọn bởi các tổ chức về tài chính hay cơ quan nhà nước trong thiết kế logo của họ.</p> <p>Ngoài ra, giống như xanh lục, xanh lam cũng nằm trong bảng màu của thiên nhiên – gắn liền với nước, với trời, với đại dương và những gì trong lành, thanh bình nhất. Bởi vậy, sắc xanh này cũng là lựa chọn không tồi cho những sản phẩm nước tinh khiết hoặc những thương hiệu lấy sự chân thành, dịu nhẹ và an yên làm trọng tâm.</p> <h3><strong>Màu xanh lục</strong></h3> <p><img alt="beau - thiết kế logo - màu xanh lục" height="146" src="https://static.beautheme.com/beauvn/2018/04/07153140/Beau-l%E1%BB%A5c.jpg" width="600" /></p> <p>Khác với những sắc màu ở trên, màu xanh lục (xanh lá cây) không được gắn nhiều với những nét tính cách thương hiệu như đỏ mạnh mẽ, vàng ấm áp hay xanh chuyên nghiệp; tuy nhiên, sắc xanh lục lại mang những nét ý nghĩa rất đặc trưng, liên quan chủ yếu đến hai mảng môi trường và tài chính.</p> <p>Sự liên hệ giữa màu xanh lục và các làn sóng về môi trường đang ngày càng trở nên mạnh mẽ – đến mức “xanh” đã trở thành tính từ chỉ những hoạt động, lối sống thân thiện với môi trường hoặc tốt cho sức khỏe, bởi màu xanh của lá cây vốn thường được sử dụng gắn liền với những nét nghĩa liên quan đến thiên nhiên hay sự sinh sôi nảy lộc. Do vậy, sắc xanh thanh bình, dịu mát này thường là một phần thiết yếu của những bộ nhận diện thương hiệu cho các sản phẩm hữu cơ tươi sạch, có nguồn gốc đến từ thiên nhiên, thân thiện với môi trường và tốt cho sức khỏe.</p> <p>Ngoài ra, màu xanh lục cũng thường được sử dụng trong các mảng hoạt động liên quan đến tiền tệ và tài chính, do sự liên hệ trực tiếp của nó với màu sắc chủ đạo được sử dụng trong hệ thống tiền tệ của nền kinh tế Mỹ.</p> <h3><strong>Màu tím</strong></h3> <p><img alt="beau - thiết kế logo - màu tím" height="120" src="https://static.beautheme.com/beauvn/2018/04/07153155/Beau-t%C3%ADm.jpg" width="600" /></p> <p>Sang, độc, lạ và thật sự nổi bật là những gì một thiết kế logo màu tím thể hiện. Quen thuộc nhất có lẽ là sắc tím trầm với khả năng tỏa ra một thứ khí chất rất hoàng tộc, quyền quý và có chút bí ẩn, đặc biệt phù hợp với định vị thương hiệu của các sản phẩm hàng hiệu sang trọng, đắt tiền. Bên cạnh đó, màu tím ở sắc độ tươi sáng, nổi bật hơn lại mang ý nghĩa về sự thông thái và trí tưởng tượng sáng tạo không ngừng.</p> <h3><strong>Màu cam</strong></h3> <p><img alt="beau - thiết kế logo - màu cam" height="142" src="https://static.beautheme.com/beauvn/2018/04/07153053/Beau-cam-300x71.jpg" width="600" /></p> <p>Không kém phần nổi bật so với đỏ hay vàng, màu cam cũng thường được sử dụng trong thiết kế logo và nhận diện thương hiệu tập trung hơn vào cảm giác thân thiện dễ gần, nhiệt tình tự tin, vui vẻ tinh nghịch, và trên hết: luôn tràn đầy năng lượng.</p> <h3><strong>Màu trung tính: đen, trắng, xám</strong></h3> <p><img alt="beau - thiết kế logo - màu trung tính - đen trắng" height="208" src="https://static.beautheme.com/beauvn/2018/04/07150916/Beau-%C4%91entr%E1%BA%AFng.png" width="600" /></p> <p>Đen là tông màu tiêu biểu cho đẳng cấp và sự tinh tế, với một chút nét huyền bí cùng quyền lực mạnh mẽ nhưng không kém phần sang trọng. Trắng tượng trưng cho sự thanh thuần, tinh khiết, trong sáng và giản đơn – và là bức nền đối nghịch hoàn hảo cho sắc đen tỏa sáng. Đứng giữa hai thái cực trắng đen ấy, xám dường như có được một chút gì đó từ mỗi bên để trở thành màu sắc biểu tượng gắn liền với những thiết kế tinh giản hiện đại, đặc biệt sang trọng và đẳng cấp hơn khi có thêm lớp bóng ánh bạc – điều này cũng chính là lý do khiến sắc xám bạc rất được ưa chuộng bởi các thương hiệu ô tô.</p> <h3><strong>Kết</strong></h3> <p>Có thể thấy, màu sắc là một phần thiết yếu trong thiết kế logo và bộ nhận diện thương hiệu với những tác động không nhỏ đối với tâm lý khách hàng. Lựa chọn được màu sắc chính xác phù hợp nhất với tính cách và định vị thương hiệu cho logo chính là bước khởi đầu quan trọng trên con đường xây dựng một thương hiệu mạnh mẽ, vững bền.</p> <p><em>Bạn còn câu hỏi về thiết kế logo và nhận diện thương hiệu? Hãy <a href="https://beau.vn/lien-he/">liên hệ</a> với chúng tôi để Beau có thể <a href="https://beau.vn/dich-vu/">tư vấn giúp bạn và thương hiệu</a> của bạn!</em></p> </div> </div> </div> <a href="/vi/beau-agency" hreflang="vi">Beau Agency</a> <a href="/vi/thuong-hieu" hreflang="vi">Thương Hiệu</a> <a href="/vi/logo" hreflang="vi">logo</a> <a href="/vi/mau-sac" hreflang="vi">màu sắc</a> <a href="/vi/nhan-dien-thuong-hieu" hreflang="vi">nhận diện thương hiệu</a> <a href="/vi/tam-ly-hoc" hreflang="vi">tâm lý học</a> <a href="/vi/thiet-ke" hreflang="vi">thiết kế</a> <a href="/vi/thiet-ke-logo" hreflang="vi">thiết kế logo</a> <a href="/vi/thuong-hieu-0" hreflang="vi">Thương hiệu</a> <a href="/vi/trending" hreflang="vi">Trending</a> <div class="desktop-space" style="height: 150px"></div> <div class="mobile-space" style="height: 50px"></div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Sự lựa chọn về màu sắc là một trong những quyết định quan trọng nhất trong&nbsp;<a href="https://beau.vn/du-an/">thiết kế logo và nhận diện thương hiệu</a>. Đã qua rồi thời kỳ màu sắc chỉ đơn giản mang giá trị về mặt thẩm mỹ – giờ đây, nhiều nghiên cứu về tâm lý học người tiêu dùng đã chỉ ra những ảnh hưởng to lớn của màu sắc trong việc thể hiện cá tính và truyền tải thông điệp thương hiệu cũng như tác động đến suy nghĩ, cảm nhận và hành vi của khách hàng:</p> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="relateEntry-detail"> <h3 class="f-title">Bài viết liên quan</h3> <ul class="f-list"> <li><a href="/vi/goc-nhin/tuong-lai-cua-logo-no-da-chet-hay-se-con-song-mai">Tương lai của Logo: Nó đã chết hay sẽ còn sống mãi? <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/ky-nguyen-so-khi-trai-nghiem-ux-lam-nen-thuong-hieu">Kỷ nguyên Số: Khi trải nghiệm UX làm nên thương hiệu <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/tai-dinh-vi-thuong-hieu-thay-doi-hay-la-chet">Tái định vị thương hiệu – Thay đổi hay là chết? <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> <li><a href="/vi/goc-nhin/hop-tac-thuong-hieu-vu-khi-moi-cho-doanh-nghiep-viet">Hợp Tác Thương Hiệu – Vũ Khí Mới Cho Doanh Nghiệp Việt <span class="f-icon"><i class="agency-arrow-right"></i></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <ul> <li><strong>84.7%</strong>&nbsp;người tiêu dùng chọn&nbsp;<strong>màu sắc là lý do chính</strong>&nbsp;khiến họ mua sản phẩm của một thương hiệu</li> <li><strong>80%</strong>&nbsp;người tiêu dùng tin rằng&nbsp;<strong>màu sắc cải thiện mức độ nhận diện thương hiệu</strong></li> <li>Khoảng từ&nbsp;<strong>62% đến 90%</strong>&nbsp;<strong>ấn tượng ban đầu</strong>&nbsp;của người tiêu dùng về một sản phẩn hay thương hiệu phụ thuộc vào màu sắc</li> <li>Màu sắc có khả năng làm<strong>&nbsp;mức độ nhận thức tăng</strong>&nbsp;<strong>73%</strong>,&nbsp;<strong>khả năng học hỏi tăng 68%</strong>&nbsp;và&nbsp;<strong>đọc hiểu tăng 40%</strong></li> </ul> <p>Vậy, ý nghĩa của màu sắc trong thiết kế logo là gì – bạn và thương hiệu đã thực sự hiểu rõ chúng?</p> <h3><strong>Thiết kế logo Màu Đỏ</strong></h3> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2020-12/brand_logo_do.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_do1.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_do2.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_do3.jpg" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Có lẽ bởi sự bắt mắt đầy nổi bật và sức cuốn hút không thể chối từ, đỏ là một trong những màu được sử dụng nhiều nhất trong thiết kế logo với đa dạng các sắc thái khác nhau. Màu đỏ có thể tạo liên tưởng đến sự năng động mạnh mẽ và nhiệt huyết của sức trẻ, chất lãng mạn và quyến rũ đầy đam mê của tình yêu, hay cả tính khẩn cấp và sự nguy hiểm trong một số trường hợp nhất định.</p> <p>Nhiều nghiên cứu đã chỉ ra màu đỏ có khả năng trực tiếp gây nên những thay đổi về tâm sinh lý đối với người xem, khiến cho màu sắc này phù hợp với một số ngành hàng đặc trưng. Sắc đỏ có tác dụng kích thích vị giác rất mạnh, vậy nên bạn sẽ rất hay bắt gặp các nhà hàng sử dụng màu đỏ xuyên suốt trong các thiết kế về thương hiệu như logo, bao bì thực phẩm và trang trí cửa hàng. Nguyên lý này cũng được áp dụng triệt để với khá nhiều thương hiệu thực phẩm khác như nước giải khát Coca-Cola, tương ớt Chin-su, hay ngũ cốc Kellog’s.</p> <p>Không chỉ có vậy, màu đỏ còn có tác dụng đẩy nhanh nhịp tim của người xem. Trong trường hợp của các hãng tin tức như BBC và CNN, điều này có khả năng tạo nên cảm giác cấp thiết để nhấn mạnh tính cập nhật của những tin nóng được đưa, khiến cho việc sử dụng màu đỏ trong logo khá được ưa chuộng. Đối với ngành công nghiệp giải trí, tác dụng đẩy nhanh nhịp tim của màu đỏ lại được dùng với mục đích tạo sự hưng phấn cho người xem, điển hình như hãng trò chơi điện tử Nintendo và hãng sản xuất – chiếu phim trực tuyến Netflix với những mẫu logo chữ đơn giản nhưng vẫn đầy nổi bật.</p> <h3><strong>Thiết kế logo Màu Vàng</strong></h3> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2020-12/brand_logo_vang.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_vang2.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_vang3.jpg" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Là màu sắc của ánh mặt trời, vàng tỏa ra một thứ năng lượng tích cực đầy ấm áp, rạng rỡ và chan hòa, tạo nên cảm giác dễ chịu, dễ gần nhưng đồng thời cũng khó có thể bị lu mờ giữa một rừng những sắc màu khác. Giống như màu đỏ, màu vàng cũng có khả năng kích thích vị giác và cả tốc độ ăn uống, khiến cho những nhà hàng thức ăn nhanh như McDonald’s hay Lotteria đặc biệt ưa chuộng sự kết hợp này. Ngoài ra, một số nghiên cứu cho rằng màu vàng còn có tác dụng thúc đẩy khả năng xử lý của não bộ – đây là lý do màu vàng cũng được gắn liền với sức sáng tạo hay tư duy ưu việt.</p> <p>Tuy vậy, những sắc thái khác nhau của màu vàng cũng có thể tạo ra những nét nghĩa hoàn toàn riêng biệt. Sắc vàng trong logo quen thuộc của McDonald’s đem đến cảm giác vui vẻ, thân thiện với gia đình và trẻ em, nhưng đối với logo IMDB hay UPS, ánh vàng kim loại có phần trầm hơn – đặc biệt khi kết hợp với màu đen hoặc nâu – lại ngầm thể hiện sự chín chắn cũng như uy tín hay thậm chí cả nét sang trọng trong một số trường hợp nhất định.</p> <h3><strong>Thiết kế logo Màu Xanh lam</strong></h3> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2020-12/brand_logo_mau_xanh_duong.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_xanh_duong_copy.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_xanh_duong_copy_2.jpg" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Có thể nói, xanh lam chính là vua của các màu sắc trong thiết kế logo, bởi hơn một nửa số logo trên thế giới đều có sự xuất hiện của sắc xanh này. Điều này đặc biệt phổ biến ở các doanh nghiệp lớn, bởi màu xanh lam dường như là hiện thân của những nét tính cách thương hiệu đa phần các doanh nghiệp này hướng đến. Trong khi các công ty dịch vụ ưa chuộng xanh lam bởi sự chuyên nghiệp mà sắc xanh này thể hiện, các nhà sản xuất máy móc, thiết bị lại lấy sự vững chãi, kiên cố làm trọng tâm. Nhiều nhãn hàng công nghệ như Dell, IBM hay Intel cũng sử dụng nhiều màu xanh lam trong thiết kế thương hiệu để nhắn gửi thông điệp về sự thông minh và đáng tin cậy của sản phẩm. Bên cạnh đó, sắc xanh lam còn gắn liền với hình ảnh về quyền lực và thành công – đây cũng là lý do màu xanh thường được lựa chọn bởi các tổ chức về tài chính hay cơ quan nhà nước trong thiết kế logo của họ.</p> <p>Ngoài ra, giống như xanh lục, xanh lam cũng nằm trong bảng màu của thiên nhiên – gắn liền với nước, với trời, với đại dương và những gì trong lành, thanh bình nhất. Bởi vậy, sắc xanh này cũng là lựa chọn không tồi cho những sản phẩm nước tinh khiết hoặc những thương hiệu lấy sự chân thành, dịu nhẹ và an yên làm trọng tâm.</p> <h3><strong>Thiết kế logo Màu Xanh lục</strong></h3> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2020-12/brand_logo_mau_xanh_la.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_xanh_la_copy.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_xanh_la_copy_3.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_xanh_la_copy_2.jpg" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Khác với những sắc màu ở trên, màu xanh lục (xanh lá cây) không được gắn nhiều với những nét tính cách thương hiệu như đỏ mạnh mẽ, vàng ấm áp hay xanh chuyên nghiệp; tuy nhiên, sắc xanh lục lại mang những nét ý nghĩa rất đặc trưng, liên quan chủ yếu đến hai mảng môi trường và tài chính.</p> <p>Sự liên hệ giữa màu xanh lục và các làn sóng về môi trường đang ngày càng trở nên mạnh mẽ – đến mức “xanh” đã trở thành tính từ chỉ những hoạt động, lối sống thân thiện với môi trường hoặc tốt cho sức khỏe, bởi màu xanh của lá cây vốn thường được sử dụng gắn liền với những nét nghĩa liên quan đến thiên nhiên hay sự sinh sôi nảy lộc. Do vậy, sắc xanh thanh bình, dịu mát này thường là một phần thiết yếu của những bộ nhận diện thương hiệu cho các sản phẩm hữu cơ tươi sạch, có nguồn gốc đến từ thiên nhiên, thân thiện với môi trường và tốt cho sức khỏe.</p> <p>Ngoài ra, màu xanh lục cũng thường được sử dụng trong các mảng hoạt động liên quan đến tiền tệ và tài chính, do sự liên hệ trực tiếp của nó với màu sắc chủ đạo được sử dụng trong hệ thống tiền tệ của nền kinh tế Mỹ.</p> <h3><strong>Thiết kế logo Màu Tím</strong></h3> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2020-12/brand_logo_mau_tim.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_tim_copy.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_tim_copy_2.jpg" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Sang, độc, lạ và thật sự nổi bật là những gì một thiết kế logo màu tím thể hiện. Quen thuộc nhất có lẽ là sắc tím trầm với khả năng tỏa ra một thứ khí chất rất hoàng tộc, quyền quý và có chút bí ẩn, đặc biệt phù hợp với định vị thương hiệu của các sản phẩm hàng hiệu sang trọng, đắt tiền. Bên cạnh đó, màu tím ở sắc độ tươi sáng, nổi bật hơn lại mang ý nghĩa về sự thông thái và trí tưởng tượng sáng tạo không ngừng.</p> <h3><strong>Thiết kế logo Màu Cam</strong></h3> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2020-12/brand_logo_mau_cam.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_cam_copy.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_cam_copy_2.jpg" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Không kém phần nổi bật so với đỏ hay vàng, màu cam cũng thường được sử dụng trong thiết kế logo và nhận diện thương hiệu tập trung hơn vào cảm giác thân thiện dễ gần, nhiệt tình tự tin, vui vẻ tinh nghịch, và trên hết: luôn tràn đầy năng lượng.</p> <h3><strong>Thiết kế logo Màu trung tính: Đen, Trắng, Xám</strong></h3> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="img-slide-detail"> <img src="/sites/default/files/2020-12/brand_logo_mau_trang_den.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_trang_den_copy.jpg" alt=""> <img src="/sites/default/files/2020-12/brand_logo_mau_trang_den_copy_2.jpg" alt=""> </div> </div> </div> </div> </div> <div class="item-paragraph"> <div class="container-custom"> <div class="row"> <div class="col-xl-6 offset-xl-3 col-xxl-6 offset-xxl-3"> <div class="f-text"> <p>Đen là tông màu tiêu biểu cho đẳng cấp và sự tinh tế, với một chút nét huyền bí cùng quyền lực mạnh mẽ nhưng không kém phần sang trọng. Trắng tượng trưng cho sự thanh thuần, tinh khiết, trong sáng và giản đơn – và là bức nền đối nghịch hoàn hảo cho sắc đen tỏa sáng. Đứng giữa hai thái cực trắng đen ấy, xám dường như có được một chút gì đó từ mỗi bên để trở thành màu sắc biểu tượng gắn liền với những thiết kế tinh giản hiện đại, đặc biệt sang trọng và đẳng cấp hơn khi có thêm lớp bóng ánh bạc – điều này cũng chính là lý do khiến sắc xám bạc rất được ưa chuộng bởi các thương hiệu ô tô.</p> <h3><strong>Kết</strong></h3> <p>Có thể thấy, màu sắc là một phần thiết yếu trong thiết kế logo và bộ nhận diện thương hiệu với những tác động không nhỏ đối với tâm lý khách hàng. Lựa chọn được màu sắc chính xác phù hợp nhất với tính cách và định vị thương hiệu cho logo chính là bước khởi đầu quan trọng trên con đường xây dựng một thương hiệu mạnh mẽ, vững bền.</p> <p><em>Bạn còn câu hỏi về thiết kế logo và nhận diện thương hiệu? Hãy&nbsp;<a href="https://beau.vn/lien-he/">liên hệ</a>&nbsp;với chúng tôi để Beau có thể&nbsp;<a href="https://beau.vn/dich-vu/">tư vấn giúp bạn và thương hiệu</a>&nbsp;của bạn!</em></p> </div> </div> </div> </div> </div> <div class="field field--name-field-other-articles field--type-entity-reference field--label-above"> <div class="field__items"> <a href="/vi/goc-nhin/tan-dung-cac-mo-hinh-nhan-thuc-vao-thiet-ke-san-pham-p2" hreflang="vi">Tận Dụng Các Mô Hình Nhận Thức Vào Thiết Kế Sản Phẩm p2</a> <a href="/vi/goc-nhin/nhung-nguyen-tac-gestalt-khai-thac-quy-luat-thi-giac-trong-thiet-ke-ui" hreflang="vi">Những nguyên tắc Gestalt - Khai thác quy luật thị giác trong thiết kế UI </a> <a href="/vi/goc-nhin/tam-ly-hoc-mau-sac-va-ung-dung-trong-thiet-ke" hreflang="vi">Tâm lý học Màu sắc và ứng dụng trong thiết kế</a> <a href="/vi/no-luc-nhan-thuc" hreflang="vi">Nỗ lực nhận thức: Quá trình khác biệt hóa hình thức để đáp ứng nghệ thuật</a> <a href="/vi/xay-dung-thuong-hieu-cham-toi-trai-tim" hreflang="vi">Xây dựng thương hiệu chạm tới trái tim trong thời đại nhiễu nhương</a> <a href="/vi/vision-mission-values" hreflang="vi">Vision - Mission - Values - Nguyên tắc cơ bản của thương hiệu</a> <a href="/vi/tai-sao-can-ban-tam-cho-viec-xay-dung-thuong-hieu" hreflang="vi">Tại sao cần bận tâm cho việc xây dựng thương hiệu?</a> <a href="/vi/kinh-doanh-phong-trao-khi-thuong-hieu-thieu-tinh-sang-tao" hreflang="vi">Kinh doanh phong trào - khi thương hiệu thiếu tính sáng tạo</a> <a href="/vi/bc-triet-ly-kinh-doanh-tu-duy-sang-tao" hreflang="vi">B&amp;C - Hiểu về triết lý kinh doanh &amp; Tư duy sáng tạo</a> <a href="/vi/5-buoc-xay-dung-chien-luoc-thuong-hieu-thanh-cong" hreflang="vi">5 Bước Xây Dựng Chiến Lược Thương Hiệu Thành Công</a> <a href="/vi/checklist-nhung-dieu-can-chuan-bi-truoc-mot-du-branding" hreflang="vi">Checklist Những Điều Cần Chuẩn Bị Trước Một Dự Án Branding</a> <a href="/vi/nghien-cuu-de-thau-hieu-khach-hang" hreflang="vi">Nghiên cứu để thấu hiểu khách hàng</a> </div> </div> <div class="field field--name-field-hidden-article field--type-boolean field--label-above"> Off </div> Fri, 28 Jul 2017 03:05:56 +0000 hapham 38 at http://beau.vn