Việc tạo ra những dạng thiết kế đồ họa riêng lẻ khác nhau, người xem sẽ tương tác đầu tiên và với mỗi lần họ thấy sản phẩm khác nhau, điều đó có thể khiến họ cảm thấy khó chịu. Một thiết kế app icon đẹp, nhận diện tốt, dễ nhớ có tác động rất lớn đến độ phổ biến và thành công của app. Nhưng chính xác làm cách nào để tạo ra được 1 app icon tốt? Thậm chí nó còn mang ý nghĩa gì? Đừng sợ, tôi có 1 vài mẹo nhỏ và lời khuyên để trả lời cho những câu hỏi ấy và hướng dẫn bạn thiết kế ra những app icon đẹp.
Tôi đang làm nghề thiết kế, tạo ra những nguồn tài nguyên để phục vụ cho việc thiết kế và làm nên những buổi đàm thoại ngắn về thiết kế icon trong vài năm qua. Trong giới hạn bài này, và nội dung trong video ở cuối bài, tôi sẽ tổng hợp lại những điều tôi đã học về những bản thảo tuyệt vời này.
App Icon là gì?
Đầu tiên bạn cần hiểu, thời điểm tạo ra icon là lúc app icon đó thật sự là gì và loại công việc nào nó sẽ thể hiện. App icon như là mỏ neo tượng trưng cho sản phẩm của bạn. Nó như là một phần thu nhỏ của thương hiệu, nên không chỉ cần trông thật hấp dẫn và khác biệt, mà còn phải sáng tạo để có thể truyền tải những thông điệp thiết yếu về ứng dụng của bạn.
Từ “logo” ngày nay bị gán 1 cách thiếu chính xác. App icons không phải là logo. Trong khi app icons cũng được định vị là cách thể hiện thương hiệu – như về chất lượng, thì chúng lại chịu nhiều những hạn chế khác nhau. Sự khác biệt quan trọng giữa logos và app icons: Logos là những thiết kế dạng vector có thể phóng to – thu nhỏ áp dụng cho đầu thư ngỏ đến những bảng quảng cáo billboards ngoài trời, tất cả chỉ phục vụ cho việc quảng bá thương hiệu. Icons thường được xuất ra dưới dạng kích thước đã được định sẵn, việc tùy chỉnh bị giới hạn trong khung hình vuông, có 1 kích thước cụ thể và ngữ cảnh cụ thể. Việc tiếp cận khác nhau, công cụ làm nên chúng cũng khác nhau, công việc cũng khác nhau, nên vì thế tiêu chí để đánh giá chúng cũng khác nhau.
[caption id="attachment_38360" align="alignnone" width="780"]
App icon gồm có nhiều kích cỡ khác nhau. Nhận những mẫu này từ
Apply Pixels[/caption]
Dựa trên tính ứng dụng, thì khi bạn tạo ra app icon, bạn sẽ tạo ra 1 bộ tập tin hình PNG có nhiều kích cỡ khác nhau – phân loại từ nhỏ 29 x 29 pixels đến 1024 x 1024 pixels – chúng được đính kèm chung với app của bạn. Bộ thiết kế này đã được phác thảo cẩn thận sẽ được sử dụng trong nhiều ngữ cảnh khác nhau khi hệ thống vận hành, cũng là lúc user sẽ thấy ứng dụng của bạn – trên iOS App Store và Google Play, trong bảng thông báo cài đặt, trên thanh tìm kiếm kết quả và trên màn hình trang chủ.
App icons có thể được làm bằng bất kỳ ứng dụng nào có thể xuất file hàng loạt với kích thước khác nhau, nhưng phần mềm phổ biến thường được chọn là Photoshop, Illustrator và Sketch. Những công cụ được tìm thấy trên
Apply Pixels có thể cung cấp những mẫu PSD chuẩn, có thể giúp bạn làm việc nhanh chóng.
[video width="426" height="240" mp4="https://img.idesign.vn/2017/10/11/34047/id_lamsaothietkenhungappiconbatmat_02.mp4"][/video]
5 nhân tố cốt lõi trong việc tạo ra App Icons
Bây giờ, hãy cùng nhìn 1 vài kỹ thuật tạo app icons hay nhất. Tôi sẽ phân tích 5 nhân tố cốt lõi trong việc thiết kế app icons, đưa ra những mẹo nhỏ là làm cách nào để cải thiện từng nhân tố và trình bày 1 vài ví dụ cụ thể. Rất nhiều ví dụ nêu ra sẽ dựa trên dự án thật của chính tôi. Đó không chỉ là vì tôi thích hay vì đây là cách minh họa rõ nhất, mà còn được diễn đạt những trải nghiệm của chính tôi trong quá trình làm dự án. Khi đọc những nhân tố này, bạn hãy cố gắng mường tượng icon theo cách bạn thích và bằng cách nào những nhân tố ấy tạo hình icon trên trang chủ của bạn. Nào cùng bắt đầu.
Sự tăng giảm kích thước
Một trong những nhân tố quan trọng nhất trong việc tạo icon là sự tăng giảm kích thước. Bởi vì những biểu tượng icon sẽ được nhìn thấy ở nhiều nơi thông qua các nền tảng khác nhau,và nhiều kích thước khác nhau, điều quan trọng là bạn duy trì được tính dễ đọc và độc đáo của icon đó. Icons cần được nhìn rõ trên App Store, trên các thiết bị “Retina”và thậm chí trên các bảng cài đặt ứng dụng.
[caption id="attachment_38366" align="aligncenter" width="800"]
App icon cần phải làm ở nhiều độ phân giải khác nhau, vẫn phải đảm bảo độ dễ đọc cho dù ở bất kỳ kích thước nào[/caption]
Những icons phức tạp khi chúng bị nhồi nhét quá nhiều yếu tố vào trong khung canvas và sẽ trở nên tệ khi phóng to – thu nhỏ. Phần quan trọng của việc lên ý tưởng cho thiết kế app icon là phải suy nghĩ về việc dù trong tình trạng nào thì những thiết kế ấy phải đồng nhất và như nhau khi bị phóng to – thu nhỏ.
CẢI THIỆN NHƯ THẾ NÀO?
- Làm trên khung 1024 x 1024 pixel có thể khó cho bạn để phát hiện. Hãy cố gắng đưa thiết kế lên thiết bị, trong những ngữ cảnh và kích thước khác nhau.
- Giữ tính đơn giản và tập trung vào từng đối tượng đơn lẻ, nên là những hình khối duy nhất hay những yếu tố mà khi bị phóng to hay thu nhỏ thì các khung viền cũng như chất lượng hình ảnh sẻ được bỏ qua.
- Đảm bảo rằng icon được nhìn rõ bất kể nền xung quanh là màu gì.
[caption id="attachment_38369" align="alignnone" width="800"]
Một vài icon tôi đã làm với sự co giãn chỉ trong tâm trí[/caption]
2. Khả năng nhận biết
App icon giống như bản nhạc nhỏ, được nhận ra dễ dàng giữa các app icon khác có trên store và trên trang chủ là tiêu chí quan trọng trong việc thiết kế icon đẹp. Những bản nhạc cần phải có sự cộng hưởng với người nghe, và những khối hình, màu sắc, ý tưởng từ app icons cũng tương tự như thế. Thiết kế cần sự ghi nhớ từ từ và sự kết nối giữa chức năng và cảm xúc.
[caption id="attachment_38372" align="alignnone" width="800"]
Một icon có thể chi tiết hay đơn giản, nhưng phải đảm bảo rằng nó sáng tạo, thú vị và truyền tải được ngụ ý của bạn[/caption]
Icon của bạn sẽ phải tạo sự chú ý trong số hàng ngàn icons khác, tất cả đều có cùng khung canvas 1024 pixel để gây tác động và đảm bảo sự kết nối với người xem. Trong khi việc phóng to thu nhỏ icon là 1 phần quan trọng của sự nhận biết, vì vậy hãy làm cho mới lạ vào. Nghiên cứu về sự cân bằng giữa những tính năng này là ranh giới quan trọng giữa đẹp và xấu.
CẢI THIỆN NHƯ THẾ NÀO?
- Những icons phức tạp là kẻ thù của tính nhận biết sản phẩm. Cố gắng loại bỏ những chi tiết không cần thiết cho đến khi cảm thấy icon bắt đầu có dấu hiệu xấu đi thì dừng. Như vậy, điều này có cải thiện khả năng nhận biết không?
- Hãy cố gắng đem thiết kế của bạn ra thử ở nhiều mảng khác nhau. Thử xếp chúng thành hàng trên lưới và nhìn lướt qua chúng, đâu là khía cạnh dễ bắt được ánh nhìn của bạn nhất.
- Tái cấu trúc những app icon mà bạn yêu thích và cố gắng nhận ra tại sao bạn lại thích chúng và phương pháp nào đã được sử dụng để làm chúng nổi bật như vậy.
3. Tính đồng nhất
Đâu đó nói rằng tính đồng nhất là việc tạo nên giữa trải nghiệm tương tác với app icon và tương tác với app. Tôi thì cảm thấy thiết kế icon tốt là việc mở rộng những gì trong app có. Cần đảm bảo rằng cả hai hỗ trợ nhau sẽ tạo thu hút hơn với user.
[caption id="attachment_38375" align="aligncenter" width="800"]
Sự đồng nhất giữa icon và giao diện thì quan trọng trong việc làm tăng khả năng kể chuyện bằng hình ảnh[/caption]
Những khối hình trơn, những hình ảnh thống nhất của app trong tâm trí người dùng sẽ làm tăng độ thỏa mãn của sản phẩm, tăng khả năng quay trở lại và tính tiếp thị cho sản phẩm. Nếu icon của bạn hòa nhịp cùng với những cảm xúc, tính năng cũng như thiết kế ứng dụng của bạn thì đó là chiến thắng rất to.
CẢI THIỆN BẰNG CÁCH NÀO
- Có 1 cách là đảm bảo tính đồng nhất giữa app và icon là cân bằng những bản màu và sử dụng 1 ngôn ngữ thiết kế - ví dụ: giao diện màu xanh sẽ được củng cố bởi app icon màu xanh.
- Tuy không phải lúc nào cũng có thể, nhưng có 1 cách để tăng sự kết nối giữa app và app icon là gắn chặt những ký tự của app icon trực tiếp lên chức năng của app.
[caption id="attachment_38378" align="alignnone" width="800"]
Những icon cũng có thể được làm đồng nhất xuyên suốt những bộ app tương tự[/caption]
4. Tính độc đáo
Điều này quá hiển nhiên mà không cần phải nói gì, nhưng hãy cố gắng tạo ra thứ gì đó độc đáo. Bắt chước 1 phong cách hay 1 xu hướng nào đó thì hoàn toàn ổn, nhưng hãy tạo ra cái của riêng mình. App icon của bạn sẽ trực tiếp giành sự chú ý từ user với các icons khác, và việc thiết kế nào nổi bật có thể trở thành để tài bàn luận gây đau não.
[caption id="attachment_38432" align="alignnone" width="800"]
Những hạng mục "Productivity" trong iOS App Store là ví dụ tuyệt vời để nói lên sự độc đáo không thể bị phá vỡ trong quá trình thiết kế[/caption]
Tính đồng nhất là 1 phần đòi hỏi sự khôn khéo ở người thiết kế, bởi vì nó không chỉ phụ thuộc vào kỹ năng của bạn mà còn là sự lựa chọn của những người khác trong nhóm.
CẢI THIỆN BẰNG CÁCH NÀO
- Xem xét những gì mọi người làm trong cũng lĩnh vực với bạn và hãy đi theo hướng khác. Luôn luôn làm nghiên cứu của chính bạn – thế giới không cần những icon “checkmark” khác nữa đâu.
- 1 ký tự đơn trên nền 1 màu có thể là hơi khó nếu bạn muốn nó độc đáo. Thử với nhiều màu sắc và thành phần khác nhau, và thử thách chính mình để tìm những ẩn dụ mới và hay.
- Màu sắc thì tuyệt và thường được xem là cách để tái cấu trúc lại ý tưởng.
[caption id="attachment_38435" align="alignnone" width="800"]
Bất kể phong cách thiết kế của bạn là gì,sự độc đáo là 1 cách thức để tìm ra ý tưởng lớn[/caption]
[caption id="attachment_38438" align="alignnone" width="800"]
Những thiết kế icon cho game là 1 nguồn cảm hứng tuyệt vời, bởi vì không có giới hạn nào trong việc thể hiện.[/caption]
5. Đừng sử dụng từ ngữ
Đây là một trong những điều quan tâm hàng đầu của tôi. Hiếm có những trường hợp nào mà sử dụng từ ngữ trong App Icon là tốt. Nếu bạn phải dùng những từ viết tay để trừu tượng hóa thì khi đó tôi khẳng định rằng bạn đã không sử dụng hết toàn bộ vũ khí hình ảnh của bạn.
Từ ngữ và hình ảnh được phân ra là những công cụ dùng để thuyết trình, và việc dùng chúng để hỗ trợ lẫn nhau trong thuyết trình dạng đồ họa thường dẫn đến sự rối loạn, mất tập trung và khó để giải mã. Có thật là không còn cách nào để hình tượng hóa những ứng dụng hơn việc dùng kết hợp với những từ ngữ khô khan như thế này? Bất kể khi nào tôi thấy những từ ngữ xuất hiện trong app icon, tôi cảm thấy người thiết kế như đã bỏ lỡ cơ hội để truyền tải những ngụ ý của họ 1 cách rõ ràng.
BẠN NGHĨ GÌ VỀ VIỆC XEM XÉT NHỮNG TỪ VÀ NGỮ TRONG ICONS
Không nhất thiết cần gắn tên app vào icon – tên sẽ thường đi đôi với icon trong giao diện chính. Thay vào đó, bạn hãy dành thời gian cho những ý tưởng về mặt hình ảnh sao cho thật tuyệt vào.
Tôi nghe bạn nói là “nhưng Facebook có chữ ‘f’ trong app icon của họ”. Nếu bạn đang sử dụng ký tự đơn và trông vừa vặn (hay độc đáo), thì khi đó ký tự sẽ đánh mất đi tính chất “chữ” của nó và trở thành biểu tượng. Tuy nhiên, đây là trường hợp ngoại lệ hơn là những quy tắc đưa ra.
Logo và tên công ty bạn cùng xuất hiện trong ô vuông thì chẳng bao giờ là giải pháp tốt. Bạn có hay không những con dấu hay biểu tượng kết hợp tốt trong sự gò ép không? Nếu không, thì khi đó có lẽ bạn đang làm tốt nhất với việc tạo ra những sản phẩm mới. Nên nhớ rằng icon thì không giống với logo và không nên áp chúng trong cùng 1 ngữ cảnh.
HÃY LÀM NÊN DẤU ẤN CỦA BẠN
Trên App Store và Google Play có rất nhiều ví dụ về những thiết kế icon mờ nhạt và không có chính kiến. Nếu icon của bạn có sự kết nối mạnh, bạn sẽ có user. Đó là những gì user thấy đầu tiên khi họ gặp icon của bạn trên App Store. Đó là những gì mà họ tương tác khi user sử dụng app của bạn. Đó là những gì họ nghĩ về app của bạn. Những tác phẩm mà thiếu sự đầu tư – suy nghĩ sâu, cho dù những hiệu ứng hình ảnh có hấp dẫn đến mấy thì cũng xem như thất bại. Quy trình tạo app icon không nên đặt sau cùng, mà nó phải là 1 phần trong quy trình làm việc.
Thiết kế App icons là 1 phần nhỏ của thiết kế thuần túy, và 1 biểu tượng icon tốt là phải: dễ dàng co giãn, dễ dàng nhận biết, có tính đồng nhất, và phải độc đáo. Thông thạo những yếu tố này sẽ giúp bạn rất nhiều trong lĩnh vực thiết kế. Trở thành 1 thiết kế chuyên về icon sẽ giúp ích rất nhiều cho bạn trong lĩnh vực thiết kế.
Bất kể chúng phức tạp hay đơn giản, bình thường hay sáng tạo, những icon tốt có 1 thứ tài sản độc đáo là: chúng thu hút ánh nhìn của mọi người chỉ trong không gian hạn hẹp, nơi mà hoàn toàn chỉ dành cho sự tiêu khiển. Đây là 1 thử thách đặc biệt, và câu trả lời chỉ vỏn vẹn nằm trong không gian hạn hẹp ấy.
Tôi hy vọng những mẹo vặt trên sẽ giúp bạn có thêm tự tin để đón nhận thêm những thử thách mới. Hãy tạo ra những app icon tuyệt cú mèo đi nào!
NGUỒN
Trong bài này, tôi đã sử dụng những công cụ làm icon khi đăng ký làm thành viên của
Apply Pixels, nhưng còn rất nhiều công cụ làm icon ở ngoài kia, có cả tính phí và không tính phí. Thiết kế icon là một trong những niềm đam mê của tôi, và nếu bạn khao khát có nhiều hơn, thì tôi đã làm một vài Video và có rất nhiều đề tài nói chuyện về vấn đề này. Dưới đây là hai video nói rất kỹ về vấn đề này.
[video width="1280" height="720" mp4="https://img.idesign.vn/2017/10/11/34047/id_lamsaothietkenhungappiconbatmat_11.mp4"][/video]
[video width="640" height="360" mp4="https://img.idesign.vn/2017/10/11/34047/id_lamsaothietkenhungappiconbatmat_12.mp4"][/video]
(Sưu tầm - Eye_Catching_App_Icon_Design_How_To)
