Thursday, January 28, 2016

RESPONSIVE WEB VÔ CÙNG DỄ HIỂU QUA 9 GIFS MINH HỌA

Responsive web design là một giải pháp tuyệt vời để tháo gỡ khó khăn về yêu cầu hiển thị thông tin tương thích với nhiều độ phân giải màn hình khác nhau của website.




Do đó, chúng ta hãy cùng tìm hiểu một số nguyên tắc cơ bản về responsive web để có thể dễ dàng áp dụng linh hoạt trong dự án của mình. Trong phạm vi của bài viết này, chúng tôi sẽ tập trung vào 9 nguyên tắc cơ bản nhất của website responsive.

1. Phân biệt thiết kế web Responsive hay Adaptive
Về hình thức, cả 2 có vẻ rất giống nhau khi đều hiển thị thân thiện và co giãn linh hoạt với các loại màn hình. Tuy nhiên, khi đặt song song (hình mình họa), chúng ta sẽ nhận ra điểm khác nhau giữa chúng và đây cũng là yếu điểm của Adaptive web design khi phải mất một khoảng thời gian nhỏ để phân tích, dịch chuyển các thành phần tương thích theo màn hình. Dù vậy, Adaptive web design cũng có ưu điểm của mình trong trường hợp cần cải tạo website trong thời gian ngắn và 1 số thành phần của website cũ cần giữ lại. Với Responsive web design thì bạn phải thiết kế hoàn toàn lại từ đầu.


Đều có nhiều ưu và khuyết khác nhau, nên giữa thiết kế website Responsive và Adaptive không có cách nào là tốt hơn hay xấu hơn. Tùy theo trường hợp và yêu cầu của trang web mà chúng ta lựa chọn cho mình phương pháp phù hợp.

2. Nguyên tắc dòng chảy – The flow
Khi chuyển qua màn hình kích thước nhỏ, nội dung sẽ bị tràn xuống theo chiều dọc và đẩy những phần ở dưới đi xuống – nguyên tắc dòng chảy (the flow). Đây là hạn chế của cách thiết kế theo điểm ảnh dựa trên kích thước pixels thông thường. Nhưng Responsive Web Design sẽ giải quyết được điều này. Bắt đầu bằng việc xác định kích thước tối đa cho trang web (thường là 1024px để phù hợp hầu hết màn hình), trang được chia thành 1 số cột cụ thể và mỗi phần tử có chiều rộng, chiều cao tỷ lệ nhau. Khi thay đổi thiết bị hoặc kích thước màn hình, các yếu tố sẽ tự động điều chỉnh chiều rộng và cao theo tỷ lệ phù hợp.




3. Nguyên tắc thống nhất bố cục hiển thị
Là 1 trong những nguyên tắc cơ bản của thiết kế Responsive web. Bố cục được thống nhất với tỷ lệ % thay vì với mật độ điểm ảnh (pixels) như thường thấy do có tính linh hoạt hơn.




Ví dụ, với tổng bố cục 1 web, tỷ lệ hiển thị quy định trên trình duyệt web máy bàn là 100% (với tất cả trình duyệt), 90% với laptop và 50% với màn hình điện thoại. Trong layout chi tiết, có 1 object đặc biệt được thiết kế quy định luôn có chiều rộng 50% màn hình. Khi được launching thực tế. dù thay đổi màn hình thiết bị như thế nào, object này vẫn luôn giữ nguyên tỉ lệ 50% màn hình hiển thị tương ứng.

4. Breakpoint
Breakpoint cho phép layout được thay đổi tại những điểm định trước, ví dụ layout sẽ có 3 cột trên giao diện desktop nhưng chỉ 1 cột trên giao diện di động. Ta có thể thay đổi hầu hết thuộc tính CSS giữa các breakpoint. Thông thường, các designer đặt breakpoint dựa trên nội dung; tuy nhiên, cần cẩn thận khi sử dụng quá nhiều breakpoint vì chúng có thể làm xáo trộn đến layout và ảnh hưởng đến những phần khác nếu bạn không nắm rõ cách hoạt động của chúng.




5. Giá trị Max (tối đa) và Min (tối thiểu) 
Với các website có chiều ngang hiển thị trọn màn hình, dù có ưu điểm là tối đa hiệu quả thẩm mỹ với người dùng và bắt kịp xu hướng, nhưng cũng đồng nghĩa gặp phải hạn chế khi hiển thị trên Smart TV vì trông khá kỳ quặc. Nguyên tắc Giá trị Max và Min của thiết kế Responsive Web được dùng để giải quyết vấn đề này. Ví dụ, nếu ta quy định hiển thị full màn hình 100%, và giá trị Max width là 1000px, có nghĩa là nội dung luôn hiển thị tràn đầy 100% màn hình nhưng khi kích thước màn hình vượt quá 1000 px, nội dung sẽ ngừng phóng to thêm.



6. Lồng ghép các thành phần - Nested objects
Chúng ta hẳn chưa quên thuộc tính Relative position trong CSS. Nếu Relative position định dạng vị trí tương đối của từng thành phần trong layout website (như top, right, left, bottom) thì Nested objects được hiểu như là cách thức định dạng và quản lý các thành phần này theo từng nhóm/khối thay vì riêng lẻ. 




Trong layout website, vì tính liên kết tất nhiên trong một tổng thể, nên thường các thành phần (objects) bên trong luôn có tính tương tác, ảnh hưởng lẫn nhau. Các thay đổi của một thành phần sẽ ảnh hưởng đến nhiều thành phần khác, có thể là rất nhiều, đôi lúc bố cục sẽ bị rối lên. Do đó, chúng ta cần các thành phần liên quan mật thiết (có cùng đặc tính hiển thị) lại thành một khối thống nhất cho dễ quản lý và gọn gàng. Các khối này cũng được xem như các thành phần trong layout nhưng có kích thước lớn (hoặc rất lớn), mối quan hệ giữa thành-phần-chứa và thành-phần-bên-trong này được gọi là Nested object. Đây là lúc các static units như pixel phát huy tác dụng. Chúng rất phù hợp đối với những nội dung không đòi hỏi phải phóng to hay thu nhỏ, ví dụ như nút nhấn hay logo.

7. Mobile first hay Desktop first
Về mặt kỹ thuật mà nói, không có khác biệt lớn giữa lựa chọn quy trình thiết kế Mobile first (bắt đầu thiết kế với giao diện điện thoại, sau đó từ nền tảng này phát triển qua các thiết bị khác như tablet, desktop, retina) hay Desktop first (tương tự quy trình Mobile first nhưng thiết kế giao diện trên desktop là nền tảng đầu tiên).



Tuy nhiên, bên cạnh trường phái thiết kế ưu tiên giao diện mobile với nhiều ưu điểm như: tránh viết lại CSS (vì 1 CSS trên điện thoại có thể tái sử dụng trên desktop), ở mọi kích thước luôn hiển thị tốt, dễ fix lỗi, nâng cấp sau này và đặc biệt là vì xu hướng sử dụng điện thoại di động ngày càng tăng nên cần phải có giao diện chuẩn, … vẫn có một trường phái khác cho rằng sẽ có rất nhiều hạn chế nếu chọn lựa quy trình Mobile first như: dễ bị rối khi bắt đầu do phải tìm ra các phần tử chung giữa mobile và desktop, phải tập trung nội dung ngay từ đầu, tối ưu hóa nhất có thể cho người dùng trước khi phát triển phiên bản đầy đủ, nhiều tính năng hơn, …

Vì vậy, khi bắt đầu dự án, chúng ta nên tiếp cận cả 2 quy trình một lúc, sau đó tùy vào yêu cầu của từng dự án và ưu khuyết khi triển khai mà lựa chọn Mobile first hay Desktop first.

8. Webfont vs System font
Nếu bạn muốn website của mình đảm bảo phong cách và độc đáo với các kiểu font “cool” như Futura hay Didot, hãy chọn Webfont, còn nếu đơn giản chỉ muốn nội dung hiển thị nhanh và không mất nhiều thời gian load thì hãy chọn System font.




System font có ưu điểm giúp hiển thị nhanh hơn, tuy nhiên nếu xảy ra trường hợp lỗi font, trang web sẽ tự động chuyển sang font mặc định.

9. Ảnh bitmap vs Vector
Ảnh bitmap được tạo ra từ việc sắp xếp các điểm ảnh pixels theo dạng ô/lưới (giống như khi chúng ta lát gạch). Ảnh Vector được tạo ra từ các đường thẳng và cong trong toán học (vectors), bao gồm cả thông số về màu sắc và vị trí của ảnh. Linh động vẫn là nguyên tắc ưu tiên, tùy vào mục đích sử dụng mà bạn chọn loại ảnh phù hợp. 




Ví dụ, nếu hình ảnh bạn muốn upload có nhiều chi tiết thì nên chọn ảnh bitmap (thường có định dạng jpg, png, gif). Còn nếu chỉ là ảnh đơn giản hơn thì ảnh vector sẽ là lợi thế (như SVG – Scalable Vector Graphics – “Chuẩn đồ họa vector” có khả năng co giãn linh hoạt hoặc Icon font). Mỗi định dạng đều có những ưu khuyết riêng nhưng đều cần phải tối ưu hóa kích thước trước khi upload lên website. Ảnh vector có thêm ưu thế với dung lượng nhỏ gọn, tuy nhiên một số trình duyệt cũ sẽ không hỗ trợ định dạng này. Hơn nữa, nếu các ảnh càng có nhiều đường cong thì sẽ càng tốn nhiều dung lượng, thậm chí hơn các ảnh định dạng bitmap. Vì vậy, việc lựa chọn và sử dụng vẫn là TÙY trường hợp. 

Trên đây là “9 nguyên tắc cơ bản của responsive web được minh họa bằng các ảnh GIFs” giúp giải thích một cách đơn giản nhất cho các designer và lập trình web quan tâm tìm hiểu về Responsive web. Để hoàn thiện hơn về các kiến thức thiết kế website Responsive được chia sẻ, Sdmedia sẽ cố gắng chọn lựa và giới thiệu thêm nhiều thông tin hữu ích hơn nữa đến các bạn trong các bài blog tiếp theo.


(Nguồn: froont.com)

Wednesday, January 20, 2016

TỈ LỆ VÀNG VÀ ỨNG DỤNG TRONG THIẾT KẾ ĐỒ HỌA

Đóng vai trò quan trọng tạo nên tính cân bằng và hài hòa trong các tác phẩm thiết kế, tỉ lệ vàng là khái niệm đươc rất nhiều designer rất quan tâm và tìm hiểu. Nhưng thật sự nó có ý nghĩa gì và ảnh hưởng thế nào đến thiết kế của bạn? Và bạn có thực sự cần phải quan tâm đến nó? Hôm nay, SDmedia sẽ giúp bạn hiểu hơn về khái niệm này và cách ứng dụng tỉ lệ vàng một cách tốt nhất vào thiết kế. 



Tỉ lệ vàng - TLV (The Golden Ratio) là một tỉ lệ trong toán học, hiện diện rất nhiều trong tự nhiên; giúp mang đến sự hài hòa, tạo cảm giác dễ chịu hơn cho thiết kế của bạn (có thể gọi là “Sự hài lòng thị giác”). Tỉ lệ vàng còn có tên gọi là "Giá trị vàng trung hòa - The Golden Mean", "Lát cắt vàng - The Golden Section" hoặc được ký hiệu bằng ký tự La Mã – Phi (φ). 

Cụ thể hơn, Tỉ lệ vàng là gì? 
Fibonacci (1170-1240), tên đầy đủ là Leonardo Pisano – nhà toán học tài ba nhất thời kỳ Trung cổ đã mô tả TLV như là một phương trình thể hiện mối quan hệ giữa 2 phần trong một thiết kế. Dãy số Fibonacci (mà ta đã được học trong toán học, hoặc từng biết qua trong nội dung quyển tiểu thuyết nổi tiếng “Mật mã Da Vinci" của Dan Brown) là dãy số bắt đầu bởi số 0 và số 1, các số sau mỗi số bằng tổng của 2 số liền trước nó. 

Các số đầu tiên của dãy Fibonacci là: 
 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, … 
Nếu chúng ta lấy tỉ số của 2 số liên tiếp trong dãy Fibonacci thì sẽ được dãy số: 
1/1=1     2/1=2     3/2=1,5     5/3=1,666     8/5=1,6     13/8=1,625     21/13=1,61538 

Tỉ số này sẽ tiến dần đến giá trị thần thánh φ = 1.618, cũng chính là TLV. Sự độc đáo của một thiết kế ứng dụng TLV ở chỗ sự tương quan giữa thành-phần-nhỏ đối với thành-phần-lớn cũng bằng sự tương quan giữa thành-phần-lớn với thành-phần-tổng-cộng, lớn – nhỏ - toàn thể chỉ có 1 giá trị tương quan duy nhất, con số vàng = 1.618. 

Tỉ lệ 1:1.61 của TLV là tỉ lệ cân đối nhất, có thể được diễn tả qua hình chữ nhật vàng – một hình chữ nhật lớn chứa một hình vuông (có cạnh bằng chiều rộng của hình chữ nhật lớn) và một hình chữ nhật nhỏ nằm trong. 



Các cạnh của hình chữ nhật vàng là tuân theo TLV. Nếu bỏ hình vuông ra khỏi hình chữ nhật lớn, ta sẽ được một hình chữ nhật vàng khác, nhỏ hơn. Việc này sẽ tiếp nối mãi mãi, tương tự như chuỗi số nguyên Fibonacci – nhưng với quy tắc ngược lại (tiếp tục thêm một hình vuông có cạnh bằng chiều rộng của hình chữ nhật để tiến gần hơn đến hình chữ nhật vàng và TLV). 


 Và nếu ta vẽ một đường xoắn ốc dựa trên các hình chữ nhật đã chia, ta sẽ có được hướng dẫn làm thế nào để có được một bố cục tuyệt vời.


Vậy thì con số này có điều gì kỳ diệu? Một số người tin rằng đây là tỉ lệ thần thánh của tạo hóa, là quy luật nhào nặn ra vạn vật từ bàn tay của Chúa. TLV mang đến sự cân bằng, hài hòa và vẻ đẹp tự nhiên. Có lẽ vì thế, không có gì quá ngạc nhiên khi TLV đã được ứng dụng vào hội họa và thiết kế ít nhất từ 4000 năm trước (thực tế có thể còn lâu hơn khi một số nghiên cứu cho rằng người Ai Cập cổ đại cũng đã sử dụng TLV khi xây dựng các kim tự tháp của họ) 

Đền Parthenon 

Mối quan hệ giữa chiều rộng, chiều cao, kích thước hàng hiên hay ngay cả cấu trúc vị trí các cột của công trình kiến trúc Hy Lạp cổ này đều hoàn toàn đúng theo các tỉ lệ. Ký tự φ của TLV cũng nhằm tưởng nhớ đến Phidias, nhà điêu khắc đền Parthenon. 

"The Last Supper - Bữa tiệc cuối cùng" của Leonardo da Vinci 


Cũng như các họa sỹ khác trong nhiều thời đại, Leonardo da Vinci cũng tận dụng tối đa TLV trong những tác phẩm của mình. Cụ thể, trong bức "Bữa tiệc cuối cùng", các nhân vật đều được sắp xếp ở 2/3 phía dưới khung tranh  và vị trí của Chúa Jesus được xác định bằng cách thiết lập những hình chữ nhật vàng trên khung tranh. 

Cách vẽ 1 hình chữ nhật có tỉ lệ vàng 
Vẽ một hình chữ nhật vàng là không khó – chúng ta chỉ cần bắt đầu từ một hình vuông cơ bản. Sau đây là từng bước cụ thể: 

01. Vẽ hình vuông:  điều này giúp ta xác định chiều rộng hình chữ nhật vàng.
02: Chia đôi hình vuông: bằng một đường dọc, ta được 2 hình chữ nhật nhỏ. 
03. Vẽ một đường chéo:  Tại một hình chữ nhật, vẽ đường nối liền 2 góc đối diện 

04. Xoay: đường chéo này sao cho theo chiều ngang nó thẳng hàng với cạnh đáy hình chữ nhật còn lại.

05. Vẽ hình chữ nhật mới: với chiều rộng là cạnh hình vuông ban đầu, chiều dài là đường chéo tạo được lúc nãy. 
Thiên nhiên 

Có rất nhiều ví dụ của TLV trong thiên nhiên – bạn có thể thấy chúng ở khắp mọi nơi. Hoa, vỏ sò, quả dứa (thơm), ngay cả loài ong cũng tuân thủ quy tắc TLV trong khi xây dựng tổ của chúng. Do đó, việc chúng ta ứng dụng TLV trong tác phẩm thiết kế của mình là hoàn toàn phù hợp và đi theo quy luật tự nhiên. 

Đưa Tỉ lệ vàng vào thiết kế của bạn 
Là bí mật của vẻ đẹp nhưng TLV không phải quá cao siêu. Bạn có thể ứng dụng một cách dễ dàng vào layout thiết kế nếu biết một vài mẹo nhỏ, hoặc bạn cũng có thể lập kế hoạch, phác thảo rõ ràng hơn từ đầu để có thể tận dụng tối đa khái niệm TLV vào tác phẩm. 

Mẹo ứng dụng nhanh 
Chắc hẳn bạn đã từng nghe đến quy tắc “Một phần ba” (đường mạnh điểm mạnh). Layout sẽ được chia làm 9 phần bằng nhau, được tạo bởi 2 đường kẻ dọc và 2 đường kẻ ngang, tạo nên 4 giao điểm/điểm mạnh. Các chủ thể chính và các thành phần cần nhấn nằm trên 4 điểm mạnh & theo đường kẻ sẽ hiệu quả hơn về thẩm mỹ sáng tác do mắt người có xu hướng tập trung vào các điểm nhấn này. 

Quy tắc này thường xuyên được ứng dụng trong nhiếp ảnh, layout dàn trang, mockup cho website, và cả trong thiết kế poster. 
Ngoài ra, quy tắc này còn phù hợp với nhiều định dạng khung hình (hình vuông, toàn cảnh) chứ không chỉ riêng trên hình chữ nhật. Tuy nhiên, nếu áp dụng trên một hình chữ nhật với tỉ lệ cạnh xấp xỉ là 1:1.6, bạn sẽ có được một tổ hợp các hình chữ nhật vàng. Bố cục đạt được trong trường hợp này sẽ rất hài hòa và đẹp mắt hơn. 

Ứng dụng triệt để 
Rất đơn giản để làm điều này, nhất là trong thiết kế website: hãy giữ tỉ lệ giữa phần nội dung và sidebar luôn ở 1:1.61. Có thể làm tăng hoặc giảm tỉ lệ này một chút để làm tròn đơn vị. Ví dụ, nếu phần nội dung là 640px, sidebar là 400px thì vẫn không sao cả, dù tỉ lệ giữa chúng chỉ là 1.6. 

Bạn có thể tham khảo thêm trang web của Twitter để hiểu rõ hơn về cách ứng dụng này. Giám đốc sáng tạo của Twitter – Doug Bowman đã giải thích cách mà Twitter sử dụng TLV trong bản redesign (2010) của mình qua 1 hình ảnh được đăng trên trang Flick, với dòng mô tả “Cho bất cứ ai tò mò về tỉ lệ của #NewTwitter, để biết rằng chúng tôi đã không hề bỏ qua các tỉ lệ nào”. 

Các công cụ hỗ trợ đi tìm Tỉ lệ vàng trong thiết kế 
Sau khi tìm hiểu TLV, ngoài việc có thể áp dụng khá đơn giản với lưới hình vuông hoặc hình xoắn ốc, các công cụ hữu ích khác sau đây cũng có thể giúp các bạn tối ưu hóa thiết kế bằng cách nhập các kích thước bạn muốn:
- GoldenRATIO
- Golden Ratio Typography Calculator
- Phicalculator 
- Atrise Golden Section
Ngoài ra,  Adobe Exchange cũng cung cấp một template miễn phí mà có thể xem như "Bản hướng dẫn ứng dụng TLV vào thiết kế logo" với tên gọi Golden Spiral. Bạn có thể download từ Adobe Illustrator.

Chia sẻ từ SDmedia: 
Được xem là “cây đũa thần” của thiết kế, TLV mang đến những hiệu quả không thể bàn cãi và cũng quan trọng như các định luật khác (như định luật ngón tay cái, định luật 1/3). Nhưng một nhà thiết kế giỏi sẽ không bị giới hạn gò bó bởi một quy luật cụ thể nào. Có vô vàn tác phẩm sáng tạo đẹp và độc đáo mà người thiết kế chẳng cần quan tâm đến TLV. 

TLV quan trọng vì nó là công cụ hỗ trợ thiết kế chứ không phải là chân lý để đánh giá vẻ đẹp của một tác phẩm. Vì vậy, bạn cần hiểu TLV nhưng không nhất thiết phải luôn tuân theo nó. Sáng tạo bắt đầu bằng việc xây dựng ý tưởng, sau đó mới nghĩ đến việc làm sao để phù hợp với các quy tắc thiết kế. Và hơn hết, sáng tạo chính là cốt lõi của thiết kế nên hãy tin tưởng vào chính mình vì có thể ý tưởng của bạn sẽ phá vỡ mọi quy tắc đấy! 


(Theo creativebloq.com)

Thursday, January 14, 2016

31 BÍ QUYẾT SÁNG TẠO VỚI LOGO GỒM 2 CHỮ CÁI

Chữ cái là những yếu tố rất kỳ lạ khi là nền tảng chính cho hệ thống giao tiếp văn bản giữa chúng ta, nhưng khi nhìn kỹ lại thì chúng chỉ là những hình ảnh. 

Chữ cái có thể truyền tải một thông điệp trực tiếp đến người đọc, đồng thời cũng là những yếu tố thị giác có thể thay đổi màu sắc, hình dáng và đặc tính. Vì vậy khi cần tìm cho thương hiệu 1 hình ảnh đại diện – logo, người ta thường chọn hình thức logo chữ bởi chỉ một vài chữ cái có thể bao hàm rất nhiều ý nghĩa. 

Tuy là lựa chọn phổ biến nhưng việc thiết kế một logo chữ hiệu quả thì không dễ, vì nếu quá thiên về hình ảnh sẽ mất đi tính giao tiếp; còn nếu quá đơn giản và truyền thống sẽ không ấn tượng với khách hàng. Chẳng những vậy, với chỉ 1 chữ cái chúng ta có thể thoải mái sáng tạo và biến hóa, vậy còn nhiều hơn nữa thì sao? Làm sao cho chúng kết nối nhau, ví dụ như là với 2 chữ cái? 

Nếu đang băn khoăn tìm kiếm hướng đi cho logo của mình, hoặc yêu thích việc sáng tạo thương hiệu, hãy cùng chúng tôi xem thử qua một số bí quyết thiết kế logo với 2 chữ cái sau đây. 

Ghép chung các nét dọc 
Đây có thể được xem là cách đơn giản nhất và thường được áp dụng. Để sáng tạo thêm bạn có thể chọn 2 màu sắc chữ khác nhau, hoặc chỉ đơn sắc theo xu hướng tối giản. 

Hai chữ đều in hoa 
Được liên tưởng từ tên viết tắt của công ty. Khi mà gần phân nửa số chữ trong bảng chữ cái có các nét dọc ở bên trái hoặc bên phải thì đây được xem là phương án được xem xét đầu tiên. 
Hai chữ đều viết thường 
Nếu không thể tìm ra đường thẳng chung giữa hai chữ in hoa, hãy thử “giảm cấp” và cho chúng thành chữ viết thường xem sao nhé. Logo sử dụng chữ viết thường cũng ấn tượng độc đáo mà vẫn giữ được sự nhẹ nhàng, góp phần giảm bớt tính “nghiêm trọng” của logo chữ in hoa. 
1 in hoa – 1 viết thường 
Phương án này có thể không đúng ngữ pháp cho lắm, nhưng đi ngược lại với quy tắc một chút để đạt được “mục đích” thì đây là sự lựa chọn không tồi. 
Hòa trộn các nét thẳng và nét xiên 
Trong kỹ thuật này, bạn cần khéo léo lược bớt một vài đặc tính cá nhân của mỗi chữ cái để giúp chúng hòa hợp hơn với nhau.“Khéo léo” ở đây có nghĩa là thay đổi nhưng người đọc vẫn có thể nhận ra các chữ cái – đừng biến chúng thành những con người hoàn toàn xa lạ nhé! 
Khi làm việc với những chữ cái có nét xiên, cắt đôi để dễ kết nối chúng với chữ cái khác hơn. Người nhìn sẽ tự “điền vào chỗ trống” và nhận ra chúng. Hơn nữa, bạn cũng tạo ra một cái nhìn tối giản cho logo đấy. 
Hòa trộn các đường thẳng và đường cong 
Những chữ cái tròn vo như chữ O sẽ gây khó khăn cho chúng ta nhưng vẫn có phương án giải quyết khi mà ta có thể cắt bớt phần nét tròn của chúng, hoặc “bẻ cong” nét dọc của chữ còn lại để khi ghép vào vẫn là một sự hài hòa. 



Dùng chung các nét ngang 
Nét thẳng nằm ngang nối 2 đường kẻ trong các chữ cái hoa “A” và “H” được gọi là crossbar. 
Nét ngang ở trên 
Sử dụng đường crossbar nằm trên đầu chữ làm sự kết nối. Trong vài trường hợp, các font chữ serif (có chân) sẽ dễ liên kết hơn là sans serif (không chân) vì font không chân tạo cho người xem một cảm giác không rõ ràng – liệu tổ hợp đó một chữ cái hay là hai chữ cái được kết nối với nhau? 
Nét ngang ở giữa 
Trường hợp này khó hơn vì chỉ áp dụng được với chữ cái có crossbar nối 2 đường kẻ. Khi sử dụng, nên làm nổi bật crossbar chung bằng màu sắc đặc biệt, hoặc nổi lên trên lớp nền. Vẫn phải đảm bảo logo vẫn có thể đọc được từng chữ cái – crossbar chỉ có chức năng kết nối chứ không biến chúng thành một “sản phẩm” khác. 
Nét ngang phía dưới 
Trường hợp này không nhiều, do rất ít chữ cái có đường ngang nằm phía dưới. Tuy nhiên, nếu dùng font chữ có chân, bạn có thể kéo dài phần “chân” này ra để tạo thành 1 crossbar. Tất nhiên, các chữ cái vẫn luôn phải phân biệt được với nhau. 
Đường ngang không đồng cấp 
Các chữ cái không nhất thiết phải đặt thẳng hàng – bạn có thể dịch chuyển một trong hai chữ lên trên hoặc xuống dưới để tìm được nét crossbar chung giữa chúng. (Kỹ thuật này thường áp dụng với logo các đội thể thao hoặc trường đại học ở Mỹ). 
“Biến tấu” đường cong 
Các chữ cái là một đường cong sẽ khiến bạn đau đầu khi muốn liên kết chúng với các chữ cái “thẳng băng”. Để giải quyết vấn đề này, bạn cần biến tấu đường cong đó một tí nhưng cẩn thận phần chọn để “làm thẳng”. Ví dụ, có thể làm thẳng phần trên và dưới của chữ C nhưng không được làm thẳng phần dưới chữ G do điều này sẽ làm cho chữ G không nhận diện được. 

Xóa và cắt 
Thỉnh thoảng, khi cần tạo sự kết nối chúng ta không nhất thiết phải thêm thắt vào, mà cũng có thể xóa hoặc cắt bớt đi như một số kỹ thuật sau đây: 
Xóa nét 
Một lần nữa, vẫn phải đảm bảo “khả năng nhận diện” sau khi bạn xóa bớt nét trong các chữ cái. Và sẽ dễ dàng hơn khi bạn chọn loại font có đường ngang mỏng, bởi vì các chữ cái sẽ trông rất kỳ cục nếu bị mất đi một nét dày. 
Xóa một phần nhỏ 
Nếu cảm thấy giải pháp trên làm chữ trở nên khó nhận diện, thì thay vì xóa toàn bộ nét hãy chỉ xóa một phần nhỏ của nó. 
Cắt nét của cả hai chữ cái 
Đôi khi người nhìn sẽ dễ đoán hơn nếu bạn cắt nét của cả hai chữ cái cùng một lúc thay vì chỉ một. Điều này tạo nên sự cân bằng cho cả “cặp đôi”. 





Sử dụng không gian âm (negative space) 
Khi khoảng âm được áp dụng một cách thông minh (ví dụ như bao hàm một hình ảnh ẩn dụ), người xem sẽ phải nhìn kỹ lại logo nhằm hiểu chúng rõ hơn. 


Thêm khoảng âm 
Hãy thử tạo một chữ cái (hoặc toàn bộ chữ cái, nếu bạn có thể) bằng cách thêm khoảng âm vào một hình khối. Kỹ thuật này thậm chí còn cho phép bạn tạo ẩn một chữ cái bằng cách thêm khoảng âm vào một chữ cái khác. 
Tận dụng khoảng âm có sẵn 
Đối với những chữ cái có nhiều khoảng trống bên trong (như O, D), bạn có thể biến khoảng trắng đó thành một chữ cái khác. Bạn cần thử nhiều giải pháp cho đến khi tìm được phương án cuối cùng. Cần đảm bảo khoảng âm đủ rộng để chiếm hết khoảng trống của chữ. Ví dụ, nếu không lấp đầy khoảng trống của chữ O, chữ cái này sẽ nhìn trống như một hình tròn. 
Một đường nối liền 
Nếu không thành công khi đặt một chữ cái kế bên một chữ khác, hãy thử xóa nhòa mọi ranh giới giữa chúng bằng cách tạo ra một đường nối liền mạch, bắt đầu từ chữ cái này và kết thúc ở chữ cái còn lại. Kỹ thuật này giúp tạo một mối liên kết về thị giác giữa các chữ ngay cả khi chúng không đứng gần nhau. 


Tạo cầu nối 
Nếu các chữ cái không hề có điểm nào kết nối với nhau, hãy tự mình tạo cầu nối cho chúng bằng cách thêm các hình vẽ, mũi tên hay đường cong. Bạn có thể thử mọi cách kết nối, miễn là các kết nối này không che mất các chữ và khiến người ta không đọc được chúng. 
Thêm hình ảnh hoặc các yếu tố bổ sung 
Thêm một vài yếu tố đằng sau hoặc ở giữa các chữ là một cách hay để liên kết chúng một cách đơn giản nhất. Đừng quá tay! Chỉ một vài chi tiết kết nối đơn giản là đủ cho một logo đẹp. 
Đường cong uốn lượn 
Sử dụng font lả lướt giúp liên kết các chữ khá là dễ dàng. Tuy nhiên, ngay cả khi font chữ bạn đang dùng hơi cứng, bạn vẫn có thể làm được việc này mà không làm mất đi tính tự nhiên của font chữ đó. 1 số trường hợp khi các đường cong có thể không phù hợp với thương hiệu, hãy thử gia giảm liều lượng giữa chữ nét cứng và chữ nét mềm như trường hợp của Pinterest . 


Những chữ cái có nét giống nhau 
Nếu may mắn, bạn sẽ gặp những chữ cái có nét tương đồng với nhau, và khi đó rất dễ để khai thác các điểm giống nhau này. 
Chữ cái có các đường nét giống nhau 
Một số cặp chữ cái vốn là anh em cùng cha khác mẹ, như “V”-“W, hoặc “M”-“N”, … Việc cần làm là tìm hiểu và phát hiện ra sự giống nhau này, vì không phải lúc nào chúng cũng dễ thấy. Như “HN” không có gì giống nhau, nhưng “hn” lại gần gũi hơn nhiều, vì vậy kỹ thuật này được ứng dụng tùy theo loại font bạn chọn.
Những chữ cái đối xứng 
Bạn có nhận ra những cặp chữ cái là đối xứng của nhau như “d” - “b” (đối xứng theo chiều dọc), và “M” - “W” (đối xứng theo chiều ngang). Nếu gặp trường hợp này, không cần phải làm gì thêm ngoài việc liên kết và làm nổi bật sự đối xứng giữa chúng bằng loại font phù hợp. Thậm chí, bạn có thể áp dụng kỹ thuật này với những cặp đối xứng không hoàn toàn như “d’ và “p”. 

Xoay chữ 
Nếu đã thử mọi cách trên mà vẫn bí, hãy thử xoay một chữ cái xem sao! 


Xoay để gặp nhau 
Hãy thử xoay một hay vài chữ cái đến khi chúng tìm được tiếng nói chung. Tuy nhiên đừng xoay quá đà, sẽ tạo cảm giác không tự nhiên. 


Lật ngược 
Thỉnh thoảng, kỹ thuật lật ngược sẽ hiệu quả - tuy nhiên, đừng áp dụng kỹ thuật này cho một số chữ cái; ví dụ, chữ W khi lật ngược sẽ thành chữ M, hoặc chữ S lật ngược cũng không thay đổi mấy. 




Sử dụng biểu tượng 
Biểu tượng là một cách tốt để người xem kết nối giữa logo chữ của bạn và loại hình kinh doanh của thương hiệu. Biểu tượng có thể liên quan đến ngành nghề hoặc mang tính đại diện cho tính cách của thương hiệu. 


Thay chữ cái bằng biểu tượng 
Từ rất lâu, chúng ta đã dùng biểu tượng trái tim để thay thế cho chữ O, hoặc dấu chấm trong chữ i. Tùy vào thương hiệu mà bạn có thể chọn một vài chữ cái để thay thế bởi biểu tượng. Điều quan trọng là, thành phẩm cần phải đọc được, do đó nên chọn một biểu tượng có hình dáng tương đồng với chữ cái để người nhìn dễ dàng nhận ra thông điệp từ bạn. 


Thêm biểu tượng vào khoảng âm 
Nếu muốn thêm vào một biểu tượng không giống với bất kỳ chữ cái nào mà bạn cần sử dụng thì có thể tham khảo kỹ thuật thêm vào khoảng âm. Phương pháp này mang lại nhiều không gian sáng tạo cho bạn hơn, bởi nó cho phép tận dụng khoảng âm cho một mục đích cụ thể. Ví dụ, khoảng âm phía dưới của chữ “a” có thể được biến tấu thành biểu tượng trái tim để mang lại một vài tính cách mong muốn. 


Một số kỹ thuật khác 
Vẫn chưa hài lòng với các kỹ thuật trên? Hãy thử các cách sáng tạo hơn sau đây:


Chữ lồng trong chữ 
Tùy vào hình dáng và kích thước của chữ, bạn có thể cho chữ này ôm trọn chữ kia như búp bê của Nga. Vì chữ cái ở ngoài tất nhiên sẽ lớn chữ cái nằm trong, nên kỹ thuật này phù hợp nhất khi dùng một đường thẳng mỏng bởi, vì một đường thẳng mỏng sẽ không tạo ra sự chênh lệch quá lớn về kích thước giữa 2 chữ cái. 
Vừa chạm vào nhau 
Trong thiết kế logo chữ, các chữ cái càng có nhiều điểm tiếp xúc sẽ càng hiệu quả do làm tăng độ mạnh kết nối, tạo cảm giác vững chắc, mạch lạc. Tuy nhiên, thường thì quá nhiều sẽ gây phản tác dụng, nên cũng không sao cả nếu các chữ cái chỉ vừa chạm nhau (như ”K” và “X” có nét xiên rộng sẽ phù hợp hơn với tiếp xúc chỉ chạm ở các đỉnh) 
Lồng ghép vào nhau 
Nếu muốn giữ nguyên mọi thành phần của chữ, bạn có thể lồng ghép chúng vào nhau như những mắc xích. Đừng chỉ đơn giản chồng chữ cái này đè lên chữ cái kia – hãy cho chúng lồng ghép và kết nối với nhau tạo tính kết nối và độc đáo. Kỹ thuật này dễ dàng áp dụng với những chữ cái có nhiều đường cong. 
Chữ viết tay 
Nếu cảm thấy bế tắc — hãy lấy bút ra và vẽ lên logo độc đáo của riêng mình bằng kiểu chữ viết tay. Trường hợp không có kinh nghiệm thiết kế chữ viết tay, bạn có thể dựa trên những font chữ viết tay có sẵn và sáng tạo thêm. 
Chồng lấn và trong suốt 
Sau khi đặt lồng 2 chữ cái lên nhau, hãy thử làm mờ một trong hai chữ (đặc biệt chú ý ở phần giao nhau để hai chữ được rõ ràng hơn). Nếu dùng 2 màu khác nhau cho 2 chữ, vùng giao thoa giữa hai chữ sẽ tạo ra màu khác – điều này sẽ tạo ra hiệu ứng đẹp mắt cho thiết kế của bạn. 
Tạo điểm nhấn màu sắc 
Điểm độc đáo của phương pháp này là làm ẩn đi đường nét của 1 chữ cái bên trong chữ cái còn lại (ví dụ, chữ P thật ra là chữ D thêm một nét nhỏ ớ phía dưới). Yếu tố ẩn đi được làm nổi bật bằng màu sắc. Vấn đề duy nhất của kỹ thuật này là không áp dụng được nếu yêu cầu logo thiết kế có màu đơn sắc. Để giải quyết, thay vì dùng màu sắc, bạn hãy thử thêm khoảng cách hoặc các tố khác để “tách bạch” các chữ cái ra. 

Một vài lưu ý khi thiết kế logo chữ (lettermark) 

Ø Đôi khi các đường nối sẽ khiến cho logo chữ trông giống như một sản phẩm lỗi có font chữ kerning quá hẹp, chứ không phải một tác phẩm được cố ý sáng tạo. Để giải quyết vấn đề này, tùy trường hợp bạn có thể cân nhắc thêm chân cho chữ, tạo thêm các họa tiết, hoặc sử dụng màu để giúp phân biệt giữa 2 chữ cái. 
Ø Cũng cần đặc biệt lưu ý tránh tạo ra một chữ cái “mới” ngoài mong muốn khi liên kết giữa 2 chữ cái khá giống nhau. Nếu vô tình tạo ra tình huống này, hãy tìm cách tách 2 chữ cái ra rõ ràng để người đọc không hiểu lầm. 
Ø Font chữ cũng rất quan trọng. Nếu không tìm ra ý tưởng nào với loại font đang sử dụng, hãy thử đổi font. Hãy xem xét đường nối của chữ trong nhiều font khác nhau để có thể hiểu rõ hơn về cách mà các chữ liên kết với nhau. Nếu bạn quyết định không thay font chữ, thì hãy thử đổi thật nhiều phương án kết nối khác. 
Ø Nên sử dụng phối hợp nhiều kỹ thuật để tạo ra những tác phẩm mới lạ và độc đáo hơn. Tuy nhiên phải tiết chế phù hợp, tránh “trang trí” logo chữ với nhiều yếu tố rườm rà nhưng vô ích. Font chữ càng nhiều chi tiết thì càng khó đọc. 
Ø Cần nhớ rằng, phần chữ trong logo chữ là rất quan trọng. Bạn có thể thay đổi và di chuyển các chữ cái tùy thích nhưng cần giữ nguyên đặc tính “chữ”, vì nếu chúng trở thành biểu tượng hoặc hình ảnh thì logo sẽ không còn là logo chữ nữa. Ví dụ, logo Toyota về mặt kỹ thuật đều chứa tất cả chữ cái trong từ “Toyota”, nhưng không ai gọi đây là logo chữ. 
(Nguồn: companyfolders.com)