Đông Đông Đông Đông - Tutorial

Cùng phân tích chuyên sâu một thiết kế Poster

Việc ngắm nhìn thật kỹ, phân tích thật sâu những điều nhỏ nhặt nhất trong tác phẩm sẽ mang lại rất nhiều lợi ích chuyên môn.


Có vô vàn những quyết định nhỏ nhặt trong lúc thiết kế — làm ảnh hưởng trực tiếp đến tổng thể cuối cùng. Bài viết sau đây, xin chia sẻ lại toàn bộ quá trình thiết kế từ lúc bắt đầu với một ý tưởng nền tảng, sau đó dẫn đến những quyết định khác tiếp theo. Lưu ý, đây chỉ là một ví dụ của việc tập luyện cá nhân, điều đó đồng nghĩa là các thiết kế sẽ không chịu sự ảnh hưởng của bất kỳ khách hàng nào.

Xin chia sẻ kiểu tập luyện yêu thích của tôi là tìm cách thử nghiệm với nhiều typeface khác nhau, thậm chí khi một trong số đó vẫn còn đang ở giai đoạn phát triển. Tôi xem việc tập luyện này như là một cơ hội tốt để ta có thể học hỏi và trải nghiệm nhiều phong cách thiết kế khác nhau, cũng như cảm nhận sâu sắc hơn trong quá trình làm việc. Và tác phẩm dưới đây là một trong những bài tập luyện thiết kế của tôi.


“1975” quyết định phần còn lại

Đầu tiên tôi sẽ nói cho bạn một điều quan trọng, tất cả lựa chọn trong bản thiết kế này đều khởi nguồn từ con số tiêu đề “1975” với typeface Maelstrom Sans.

Tôi thích cách làm việc theo kiểu bắt đầu từ một typeface, sau đó mọi gợi ý tiếp theo đều xuất phát từ typeface đó. Cách này giúp tôi bắt tay vào công việc một cách nhanh chóng và hạn chế việc bí ý tưởng.

Maelstrom Sans, được biến đến với thiên hướng reverse-stress nổi bật, khác biệt với các typeface truyền thống vì nét thanh của Maelstrom Sans sẽ là nét đậm và ngược lại. Vì tính cách thanh đậm khác thường, Maelstrom Sans mang trong mình sức hút kì lạ, cố tình làm người xem phải chậm rãi ngắm nhìn từng đường nét trên kí tự mới có thể hiểu được nội dung. 

Domaine Sans Display (trái) và Maelstrom Sans reverse-stress (phải)

Khi sử dụng Maelstrom Sans, tôi cố gắng tìm một nội dung gì đấy thật ngắn gọn, hợp lý để lột tả nét thẩm mỹ của bộ typeface. Và trong trường hợp này, các con số là lựa chọn tuyệt vời. Ta có thể thấy trong typeface ấy, độ rộng chắc khỏe của số “1” giúp nó không nhàm chán như những typeface thông thường. Tiếp theo tôi chọn bộ ba số “975”, sau khi phân tích cách chúng tương tác với nhau. Số “9” có một vòng tròn khá ưa nhìn ở phần trên, và một nét nhọn dày ở phần dưới, đấy là lý do tôi cảm thấy nó khá thú vị.

Thử nghiệm với một vài chữ số khác thì chúng đều mang lại cảm giác trống trải và rời rạc nhàm chán.

Thường thì, tôi rất hạn chế việc dùng số “7” để trang trí, vì nó để lại một khoảng trống rất kì cục. Tuy nhiên trong trường hợp này, tôi có thể nhờ đường uốn cong của số “9” để ôm lấy khoảng trống bên dưới của số “7”. Số “5” là một phiên bản lật ngược tuyệt vời của số “9”, và vòng tròn ở dưới móc ngược vào bên trong rất đẹp mắt. Cuối cùng, tinh chỉnh một ít khoảng cảnh giữa số “5” và số “7” để mọi thứ trông thật chỉn chu.

Tinh chỉnh một tí cách sắp xếp (alignment) giữa số “7” và số “5”

Chọn một cái tên với độ dài phù hợp

Thế là xong việc chọn một dãy số với các kí tự kết hợp thật đẹp mắt. Bước tiếp theo sẽ là tên một bộ anime nào đó được sản xuất vào năm 1975, có độ dài phù hợp với con số 1975 ở phía trên.Getter Robo G, với 13 kí tự (đếm luôn cả khoảng trắng) là một mảnh ghép hoàn hảo.

Cái tên “Steel Jeeg” đơn giản là độ dài không phù hợp vì quá ngắn so với bề rộng của con số “1975” phía trên.
Thậm chí khi sử dụng một số typeface có độ rộng (line width) dài hơn cũng không được,
vì bản thân nó đã có phân cấp thị giác thấp hơn với phần chữ Maelstrom Sans phía trên
nếu kéo ra thêm nữa sẽ trông rất kì cục.

Khi đã sử dụng một typeface có quá nhiều điểm độc đáo như Maelstrom Sans thì một typeface khác (subdued typefaces) dùng để kết hợp với nó phải không quá nổi bật và thu hút nhiều sự chú ý. Tôi nghĩ typeface Marby là một lựa chọn hoàn toàn hợp lý.

Những vòng tròn luôn khơi dậy sự mời gọi hơn là nét góc cạnh của hình tam giác. Với khoảng cách chặt chẽ, thể hiện rõ các đường cong — thậm chí cả kí tự “t” phần dưới cũng được bo tròn —  Marby mang lại một sắc thái hình học hiền hòa.

Bạn thấy đó, những typeface khác thiếu mất đi tính chất quan trọng ấy, làm cho sự kết nối giữa “1975” và “Getter Robo G” không được trọn vẹn.

Kí tự “e” trong Marby với phần dưới được uốn cong ra khỏi phía ngoài của nửa phần trên, điều cũng diễn ra tương tự với Maelstrom Sans.

Tại sao phần chữ Getter Robo G lại để khích nhau đến như vậy?

Tôi cố tình để line width cực kì hẹp với ý muốn mô phỏng phong cách typography trong ngành quảng cáo PC ở những thập niên 70, 80. Còn một vấn đề khác mà tôi muốn bạn chú ý đến: Khoảng không gian trống (“dead air”) ở dưới số “1” làm người xem có cảm tưởng phần bên trái “1975” bị thiếu hụt, tạo cảm giác không thoải mái về mặt thị giác, như thể nó khiến ta bị hút vào và không có lối ra.

Và để giải quyết vấn đề này, còn một cách sắp đặt nhằm tạo ra khoảng không gian âm (negative space) hiệu quả hơn, phần chữ Getter Robo G nên nằm lệch về phía bên phải (asymmetry), cho khoảng trống làm điểm hút thị giác, dẫn dắt mắt người xem đọc tiếp phần còn lại của đoạn chữ. Điều này làm bố cục trở nên tự nhiên, không phải kiểu gò bó canh thẳng đều hai bên (justified).


Con số “39”

Tiếp theo, con số “39” bên dưới cần chút tương phản trong khu vực phần chữ lí nhí xung quanh nó. Trong cùng một tác phẩm, mỗi khi bạn quyết định dùng lại một typeface với kiểu dáng chi tiết, phức tạp, và cầu kỳ như Maelstrom Sans (tấm hình phía trên bên trái), là bạn đang cố tình làm giảm đi vị thế độc tôn của nó trong tổng thể. Vì một thứ trang trọng đặc biệt không thể cứ xuất hiện nhan nhản ở khắp nơi với nhiều kích cỡ khác nhau như vậy.

Lý do Marby không được tiếp tục sử dụng vì nó không tạo được sự tương phản thị giác đủ để phân biệt với các phần thông tin khác. €urobüng là một lựa chọn hiệu quả hơn vào lúc này, với những nét cắt cực chi tiết nhưng lại không chiếm lấy quá nhiều ấn tượng thị giác so với các thành phần còn lại trong tác phẩm.

Kiểu typeface tôi quyết đình dùng (góc dưới phải)
có nhữg nét tương đồng so với Marby (dưới trái),
nhưng lại sắc nét và có nét tương phản vừa đủ so với các đoạn chữ khác.

Phần thông tin bên dưới

Dạo một vòng Wikipedia giúp tôi có thêm một số thông tin khác về bộ phim anime Getter Robo G để lấp đầy khoảng trống bên dưới thiết kế. Rất tiếc là typeface Marby không còn phù hợp nữa rồi vì nó đem lại cảm giác rất rời rạc— loạn xạ trên mặt giấy. Thay vào đó, Söhne Breite—một typeface với chiều ngang “no tròn” và đầy đặn thấy rõ, các con chữ liên kết với nhau rất đồng đều, nhất quán.

Bắt đầu với hàng chữ “Mecha Oni”,
bạn có thể thấy Marby đem lại một cảm giác đọc rất rời rạc,
các kí tự không tạo thành một khối thống nhất.

Ở bước tiếp theo, ta sẽ xem xét kĩ hơn phía bên dưới của bố cục. Điều tôi lưu tâm bây giờ là làm sao không “bẫy” mắt người xem vào khoảng không chính giữa (trap space) của tác phẩm. Trap space xuất hiện khi xung quanh nó chất đầy những yếu tố đồ họa khác và để lại một khoảng không gian ngay trung tâm. Bởi thế, các bạn nên hạn chế tối đa việc đặt trap space ở những vị trí “vô nghĩa” trong thiết kế, vì các khoảng trống đó thường sẽ thu hút mắt người đọc đầu tiên.

Hãy liên tưởng negative space như là một hồ nước, nếu xung quanh bít bùng, thì nước sẽ không thoát ra được khỏi hồ. Cũng giống như việc negative space không còn kẽ hở, và khi người dùng bị hút sự chú ý vào đó, họ không biết nên di chuyển mắt theo hướng nào tiếp theo. Cách giải quyết đơn giản, là tạo một khe hở phía bên trái cho nước thoát ra khỏi hồ.

Hình (giữa) có một khoảng không giang bẫy (trapped space),
khiến người xem cảm giác nó đang thiếu mất đi khoảng thông tin nào đấy.
Còn chiếc hình (trái) mang lại cảm giác rất cảm giác
rất không chắc chắn vì phần dưới bị thủng mất một lỗ to.
Và cách sắp xếp hợp lý nhất (phải), mang lại cảm giác dễ chịu nhất,
khi nó có một khe hở bên phải để mắt người thoát ra được.

Thêm một điều nữa, logo của TOEI animation (hình tam giác góc trái bên dưới ngoài cùng) có khối hình học rất phù hợp, khác biệt hoàn toàn với phần chữ còn lại, làm điểm nghỉ cho mắt người xem về mặt thị giác (moment of visual rest).

Kích thước độ rộng cũng cố tình được tinh chỉnh để những phần logo phía dưới ngang bằng với độ rộng của các hàng chữ phía trên. Lý do là vì tôi muốn chúng đóng vai trò như là mặt sàn trong thiết kế, có nhiệm vụ nâng đỡ và phân chia tách bạch thông tin rõ ràng hơn. Kết quả cuối cùng là đường dẫn thị giác sẽ chầm chậm, tự nhiên hơn khi đi từ phía bên trái dưới số “39”, sau đó xem hết những logo bên dưới mà không bị quá đột ngột.

Tấm ảnh được lựa chọn cố ý để phần nắm đấm của robot thu hút ánh nhìn về góc trái phía trên đầu tiên, và những đường nét trên khuôn mặt sẽ dẫn dụ ngay đúng sang bên phải của khối chữ.


Có cần phải chú ý từng chi tiết nhỏ nhặt như vậy không?

Hầu hết ý tưởng đột phá sáng tạo đều bắt nguồn từ những kiến thức nền tảng và có chiều sâu. Bạn có thể dễ dàng tìm kiếm trên mạng vô vàn các phân tích, đánh giá về một bộ phim, cuốn sách, hoặc tác phẩm nghệ thuật, nhưng đối với thiết kế thì không. Rất hiếm khi designer bàn luận về một thiết kế nào đó (thậm chí là thiết kế của chính mình). Và có lẽ lý do chính là họ không thực sự sẵn sàng hay đủ khả năng để trình bày các công đoạn trong quá trình thiết kế. Tôi nghĩ không có nhiều designer, những người thực sự biết rõ cặn kẽ những thứ mình làm đâu.

Thiết kế cũng giống như hiệu ứng Domino, quyết định lúc ban đầu sẽ làm toàn bộ phần còn lại ngã đổ theo. Và bắt đầu từ bây giờ, mỗi khi quyết định làm bất cứ chuyện gì, hãy tập cách học hỏi từng thứ nhỏ nhặt và kết nối chúng thành một khối thống nhất. Biết rõ mình đang làm gì và làm nó với một chủ đích rõ ràng, điều đó sẽ rèn luyện bạn cách suy nghĩ sắc bén và nâng cao khả năng chuyên môn. Những thiết kế hời hợt và chỉ có một mục đích là tìm cách kiếm tiền từ khách hàng sẽ không tồn tại được lâu.


Người dịch: Đông Đông
Tác giả:
Bethany Heck

Hình trong bài (17)