Những bước căn bản để thiết kế Icon tốt hơn

Những bước căn bản để thiết kế Icon tốt hơn

Icon và thị trường cung cấp vector như Iconfindertạo ra những icon dạng vector đẹp và có giá cũng dễ chịu, phù hợp với những người thiết kế web và graphic.

Bài viết này trao đổi về những hướng dẫn dành cho một bộ icons với sáu bước. Những bước tuân theo những thiết kế icon cơ bản, bao gồm sự nhất quán, rõ ràng, dễ nhận biết. Các yếu tố cơ bản của thiết kế hiệu qủa được trao đổi trong cuốn sách The Icon Handbook của John Hicks, cũng như hướng dẫn thệ thống icon của Google.

Sáu bước được nêu ra trong bài này nên được xem là một hướng dẫn, chứ không phải quy luật bắt buộc. Một phần của việc trở thành nhà thiết kế tốt chính là học hỏi để phá vỡ các quy luật khi đi làm theo chúng, như thứ chúng ta sẽ chứng minh ở đây.

Trong ví dụ của những hình ảnh dưới đây trong bài viết, sau bước được nêu sẽ áp dụng để làm mới một biểu tượng chú chó (loài Corgi) được đưa lên bởi người sử dụng tên là Kem Bardly. Biểu tượng rất có tiềm năng nhưng nó thiếu một chút để được đánh giá “chất lượng cao cấp”.

Chúng tôi đã cung cấp cho Kem một số mẹo nhỏ để làm theo, và chỉ cần tinh chỉnh thêm chút ít thì bộ icon của anh ấy sẽ trở nên cao cấp. hình ảnh dưới đây là phiên bản biểu tượng trước và sau của Kem. Trong các phần dưới, chúng tôi sẽ giải thích cách sử dụng lý thuyết để đi từ bản ban đầu tới sau này.

Lưu ý rằng hướng dẫn trong bài này để sử dụng biểu tượng web, chúng nhìn chung cũng có thể phù hợp với biểu tượng in ấn. Nếu bạn làm về in thì có thể bỏ qua những phần về pixel-hoàn hảo.

Ba thành phần của thiết kế icon hiệu quả

Icon được thiết kế thể hiện bởi một cách tiếp cận cơ bản bằng ba thành phần chính giúp tạo nên bất cứ icon nào: hình dáng, thẩm mỹ và khả năng nhận biết.

Khi thiết kế một bộ cion, cân nhắc các thành phần trong một cách tiếp cận tương tác, bắt đầu với hình dáng chung chung và tiến tới những đặc điểm riêng. Thậm chí nếu bạn tạo ra một icon đơn lẻ, ba thành phần này vẫn được dùng.

Không nghi ngờ gì, nhiều hơn ba thành phần tạo ra một icon hiệu quả, nhưng ba thành phần kết hợp ban đầu đủ để khởi động công việc.

 1. Hình dáng – Form

Hình dáng là một cấu trúc cơ bản của một biểu tượng, hay cách nó được tạo ra. Nếu bạn bỏ đi các chi tiết của một biểu tượng và vẽ một nét xung quanh hình dạng chính, chúng tạo ra một hình vuông, một vòng trọn, một hình chữ nhật ngang hoặc đứng, một hình tam giác hay một hình dạng bất kỳ? Những hình dạng hình học học cơ bản – vuông, tròn và tam giác – tạo ra một hình dạng thẩm mỹ cho thiết kế biểu tượng.

Trong ví dụ về biểu tượng Corgi của Kem Bardly, đầu của chú chó được tạo ra bởi 2 hình tam giác và hai hình ellip. Như thể nó được bắt đầu bằng việc phác ra những thứ lớn nhất, hình dạng giản đơn nhất và sau đó tinh chỉnh các chi tiết, một thứ bắt đầu băng đơn giản rồi thêm các chi tiết khác – nhưng chỉ với các chi tiết cần thiết để truyền tải ý tưởng thành hiện thực, từ 1 đối tượng, một ý tưởng hay một hành động.

2. Thống nhất thẩm mỹ

Những yếu tố được chia sẻ trong một icon đơn lẻ và trong suốt một bộ icon  là những gì chúng ta gọi là Thống nhất thẩm mỹ (Aesthetic Unity). Những yếu tố đó là hững thứ như các góc bo hoặc góc vuông, những kích thước của góc (2px, 4px…), sự giới hạn và độ đậm thống nhất của nét, kiểu cách (phẳng, nét, đổ bóng…), bảng màu và những thứ khác.

Sự thống nhất thẩm mỹ của một bộ icon là một danh sách các yếu tố mà bạn sẽ lặp đi lặp lại trong suốt bộ thiết kế để làm chặt chẽ hình ảnh tạo sự thống nhất của cả bộ. Trong ví dụ dưới bạn sẽ thấy ba chú chó của Kem có những điểm chung, như 2 px góc bo, nét 2px…

3. Tính nhận biết

Tính nhận biết là vẻ hấp dẫn của một icon hay một sản phẩm hay thứ gì khiến icon độc đáo. Liệu một icon có hiệu quả, phục vụ việc người xem nhận ra nó dễ dàng ra sao. Tính nhận biết bao gồm việc chỉ ra những đặc điểm phổ biến liên quan tới ý tưởng, nhưng nó cũng có thể gồm những yếu tố độc đáo và bất ngờ, như hình dạng trái tim thay vì hình mũi trên chú chó.

Nhớ rằng những sự nhận biết đó không chỉ là sự hiểu biết về đối tượng, ý tưởng hay hành động được mô tả, mà còn được nhận ra bởi sự độc đáo trong icon của bạn. Trong hình ảnh ở dưới, chúng tôi nhận ra được sự khác biệt của hai loại chó, Corgi và Husky vì màu sắc của chúng, hình dáng đầu, tai, tuy vậy chúng ta vẫn thấy nó chia sẻ những thứ chung và cùng cách thiết kế.

Như vậy là chúng ta đã thấy điều gì chúng ta cân nhắc với ba thành phần để có thiết kế hiệu quả. Trong phần tiếp, chúng ta sẽ nhìn sâu hơn vào sáu bước để chỉ ra những gì liên quan với ba thành phần trên.

Sáu bước

1. Thường xuyên bắt đầu với lưới

Lợi ích tốt nhất của lưới đã được nhắc tới trong nhiều bài viết. Trong bài viết này chúng ta sẽ dùng lưới 32x32px. Lưới của chúng ta chứa một số hướng dẫn chung nhằm giúp tạo ra một hình dạng bên dưới mỗi thiết kế icon.

Vùng 2px có tên là “No go zone – Không đụng tới” dùng để tránh việc đặt những gì của icon vào khu vực này trừ những trường hợp vô cùng đặc biệt. Việc tạo ra vùng này nhằm mục đích để biểu tượng có không gian thở.

Phần hình dạng của một icon là hình dạng chung và có định hướng. Bạn có thể vẽ một nét xung quanh cạnh của một icon – một khung viền, bạn vẽ một hình dạng chung như vuông, tròn, tam giác, chữ nhật ngang, dọc hoặc góc nhọn.

Icon hình tròn được đặt trung tâm của lưới và thường chạm cả bốn cạnh xung quanh của phần “cho phép”, không lấn vào vùng “không đụng tới”. Lưu ý rằng vì một số lý do đặc biệt bạn có thể cho những yếu tố nhỏ lấn qua một chút như ví dụ bên dưới.

Icon vuông thường đặt trung tâm của lưới, nhưng trong hầu hết trường hợp không nên lấn ra tới phần viền cho phép. Để duy trì sự thống nhất về tỉ lệ thị giác. So với icon tròn hoặc tam giác, những hình vuông thường có cảm giác trọng lực lớn hơn.

Bạn có thể xem các ví dụ ở dưới với các vùng màu xanh là những gì mà mắt đánh giá vùng của icon hiển thị.

Cần nhớ là bạn không nhất thiết phải tuân theo grid trong mọi trường hợp. Grid ở đó để giúp bạn tạo tính thống nhất, nhưng nếu cần chút khác biệt bạn vẫn có thể phá vỡ quy luật.

2. Bắt đầu với một dạng hình học cơ bản

Hãy bắt đầu thiết kế icon của bạn với các nét vẽ hình học đơn giản như vuông, tròn, tam giác. Bạn có thể phác bằng tay, và sau đó sử dụng Illustrator để tinh chỉnh nó để có sự chính xác. Dùng những hình cơ bản giúp tạo sự chính xác và cũng có thể co kéo kích thước dễ dàng, chỉ cần chắc rằng nó vẫn theo đường lưới mà bạn có.

3. Dùng các số, cạnh, nét, góc, đường cong và góc độ.

Càng nhiều càng tốt để thiết kế không có vẻ quá máy móc, nhàm chán. Sử dụng các góc, các đường cong và góc độ nên được tính toán chính xác. Nói cách khác, tuân theo các con số chứ đừng tin vào sự ước đoán hay vẽ tự do khi đi sâu và các chi tiết. Sự thiếu nhất quán của các biểu tượng có thể giảm chất lượng của chúng.

a. Góc độ

Trong hầu hết các trường hợp, đi theo góc 45 độ. Việc sử dụng góc 45 sẽ giúp bạn giảm thiểu việc bị răng cưa ở nét, hơn nữa mắt người cũng thích góc này. Sự thống nhất về sự nhận biết này tạo ra sự đồng nhất từ mỗi icon với các icon khác trong cả bộ. Nếu bạn muốn phá vỡ quy luật, cũng nên làm tròn số như 25 độ, chứ không nên là 24,2 chẳng hạn.

b. Đường cong

Một trong những khu vực có thể làm giảm chất lượng của icon và cũng là nơi tạo sự khác biệt giữa người chuyên nghiệp – người học việc, là ai có đường cong hoàn hảo hơn. Bất cứ đâu mắt con người cũng có thể nhận ra những sự khác biệt nhỏ về tính chính xác, sử dụng tay không làm nên những có số tuyệt đối. Hãy tin cậy các công cụ và các con số để tạo nên các đường nhiều nhất có thể, hơn là vẽ nó bằng tay (dùng tay chỉ để phác thảo). Khi bạn cần vẽ một đường cong trên AI, tốt hơn nên giữ Shift để làm tròn góc độ.

Như chúng ta thấy hình “trước đó” trên, đường vẽ tay ảnh hưởng tới chất lượng của thiết kế.

c. Bo góc

Một góc thông thường được bo với giá trị khoảng 2-3 pixel. Trong icon 32×32, một góc bo 2px là đủ lớn để nhìn thấy được bo tròn nhưng cũng không khiến góc bị cảm giác quá tròn để khiến hình tổng thể bị thay đổi. Giá trị góc mà bạn chọn sẽ ảnh hưởng tới phong cách bạn muốn trong thiết kế.

Thử với các hình học, chúng tôi đã thêm vào 2 pixel đường viền chứng ming cho việc các hình dạng cùng với sự thống nhất trong chi tiết như góc bo đã tăng cường thiết kế thế nào.

Điều này đã khiến phiên bản mới tốt hơn với những góc bo, nét mềm mại ở đầu và tai.

d. Hoàn hảo từng Pixel – Pixel-Perfection

Việc tinh chỉnh từng Pixel là điều quan trọng đối với kích thước nhỏ. Răng cưa ở cạnh của một icon có thể khiến nó giảm chất lượng. Không gian giữa các nét không căn đúng với những điểm pixel sẽ bị mờ. Căn icon vào với pixel sẽ khiến những cạnh ngang dọc của icon rõ nét, các đường cong với góc hợp lý giúp nó rõ ràng hơn.

Như đã nhắc tới, một góc 45 độ là tốt nhất để hiện một đường cong hoàn hảo. Và càng chính xác về toán học thì những vấn đề nhoè viền sẽ giảm xuống. Bạn cũng nên biết vấn đề răng cưa này cũng bớt nặng nề hơn nếu bạn nhìn trên màn hình phân giải cao như “Retina:

e. Độ đậm của nét

Khi nói tới độ đậm của nét, thì 2 pixel là lý tưởng, nhưng cũng không hẳn cần thiết. Mục tiêu của thiết kế là cung cấp một hình ảnh rõ ràng phân cấp, mà không có quá nhiều độ đậm và khiến nó không giữ được tính thống nhất.

Sử dụng con số 2px và 4px có thể dễ dàng biến đổi trong vài trường hợp. Trong nhiều trường hợp, nên né việc sử dụng nét 1px, trừ phi bạn đang tạo ra một thiết kế phong cách line-icon.

4. Sử dụng những yếu tố thiết kế thống nhất và duy trì xuyên suốt.

Hemmo de Jonge đã có một buổi nói chuyện thú vị tại Icon Salon 2015 khi nói về khía cạnh thiết kế icon. Trong hai năm làm việc chuyên về icon cho chính phủ Hà Lan, Hemmo và những cộng sự đã dùng một vệt khắc trên loạt biểu tượng. Không phải tất cả đều có dấu khắc này, nhưng hầu hết. Những kiểu dấu hiệu được sử dụng xuyên suốt giúp cho các icon có liên quan tới nhau hơn.

Trong các ví dụ của các chú chó chúng tôi đã sử dụng hình trái tim để thay hình dáng đầu mũi của những chú chó, chúng vừa thống nhất vừa thân thiện phù hợp.

Trong nhiều trường hợp, nếu một số phần của icon bị thay đổi – ví dụ như phong cách – các yếu tố vẫn có thể đứng cạnh nhau, như bên dưới. Ba chú chó ở dạng phẳng, đơn sắc nhưng vẫn có vẻ thông nhất.

5. Sử dụng các chi tiết và trang trí một cách tinh tế.

Icon tố hơn là nhanh chóng có cảm giác tương tác với một đối tượng, ý tưởng, hay một hành động. Quá nhiều chi tiết nhỏ chỉ làm tạo thêm phiền nhiễu khiến chúng khó nhận biết, đặc biệt ở kích thước nhỏ. Cấp bậc của các chi tiết bạn gắn trong icon hay bộ icon cũng là khía cạnh quan trong trong việc nhận biết và thẩm mỹ chung.

Nguyên tắc tốt nhất của việc xác định cấp độ trong chi tiết trong icon là việc tối giản chi tiết để tạo ra ý nghĩa rõ ràng.

Tại phiên bản trên, chúng tôi gần như đi đến bước cuối cùng để nâng cấp thiết kế. Phần viền đen ở tai được phủ bở màu nâu, phần viền đen ở mặt cũng bị loại bỏ nhưng vẫn còn 2 pixel khoảng cách giữa phần trắng để tạo khuôn cho mặt.

6. Khiến chúng độc đáo

Số lượng những nhà thiết kế xuất sắc, và tạo ra những icon miễn phí cũng không ít. Là một nhà thiết kế chuyên nghiệp, chúng ta nên nhìn xung quanh ngành công nghiệp thiết kế icon, nhìn vào các kiến trúc sư, thiết kế chữ, thiết kế công nghiệp, khoa học, tự nhiên và mọi lĩnh vực khác để tìm cảm hứng. Khiến thiết kế của bạn đọc đáo rất rất quan trọng.

Nhìn lại vào những bước đơn giản, bạn có thể nhận ra những cải thiện của icon trước và sau khi áp dụng. Chúng tôi chỉ đề cập tới những bước cơ bản nhất, và cũng có nhiều cách khác của người khác đem đến hiệu quả. Cách tốt nhất để thiết kế tốt hơn là xem nhiều thiết kế tốt nhất có thể, đọc các tài liệu, phác thảo thường xuyên để thực hành, thực hành và thực hành.

Tóm lại

Chúng ta đã cùng trao đổi cách thức cơ bản để có 1 icon đẳng cấp. Những kiến thức cơ bản như vậy ai cũng có thể học bằng việc thực hành. Nhớ rằng việc tạo ra một icon tốt hơn, bắt đầu từ những hình dáng hình học cơ bản và bắt đầu đi tiếp vào các chi tiết.

Giữ icon của bạn thống nhất, và thống nhất trên cả bộ icon. Khi bạn đã là thông thạo với các kỹ thuật cơ bản, bạn có thể tập trung năng lượng vào điều gì tạo nên đặc điểm độc đáo của thiết kế của bạn.

Trên đây là bài viết về thuật ngữ này và nó giúp cho các bạn hiểu cũng như để thiết kế tốt. Đồ hoạ 360 cùng các bạn hiểu về những bước căn bản để thiết kế Icon tốt hơn.