14 Рад по дизайну іконок для мобільних додатків, які слід дотримуватися, блог
Іконка мобільного додатка - це невелика картинка, яка представляє додаток на маркеті, такому як Google Play або App Store, і пристрої користувача. Якщо незабаром вам належить створити свій перший дизайн іконки мобільного додатка, прислухайтеся до цих порад. Вони допоможуть вам уникнути помилок, які підстерігають новачків.
Як дизайнеру, вам важливо звернути увагу на додаток: адже часто користувачі приймають рішення про вибір додатки, керуючись виключно зовнішнім виглядом іконки в маркеті. Продумана іконка асоціюється з якісним додатком і зручним інтерфейсом, а зроблене на швидку руку зображення не вселяє довіри.
Тому візьміть до уваги наступні поради щодо створення дизайну іконки для програми:
1. Дотримуйтесь вимог керівництв
Іконки існують не самі по собі, а всередині графічної оболонки тієї чи іншої системи. Вони повинні гармонійно вписуватися в інтерфейс, не виглядати чужеродно поруч з іконами інших додатків, але при цьому бути унікальними. Тому розробка іконки програми починається зі знайомства з керівництвами виробника системи і вивчення сіток для побудови іконок в Photoshop.
Ось керівництва, з яких варто почати:
- Офіційний сайт. присвячений Material Design для Android. Тут можна прочитати про стиль, анімації, компонентах, патернах, макетах і юзабіліті, а також завантажити матеріали в допомогу дизайнерові.
- Керівництва по iOS Human Interface від Apple знадобляться, якщо ви хочете створити іконку для iPad або iPhone.
Вивчивши тенденції і стандарти, дотримання яких від вас очікує виробник ОС, можна переходити до наступного кроку.
2. Знайте свою аудиторію
Іконка програми для локальної компанії, наприклад служби доставки їжі, буде відрізнятися від іконки фірми, яка хоче вийти на міжнародний ринок. В останньому випадку вам потрібно бути впевненим, що ви використовуєте універсальні символи, які будуть однаково сприйматися людьми з різних частин світу і не скривдять чиїсь почуття:
3. Створюйте іконку в потрібному розмірі
Те, що виглядає добре, займаючи лист A4, не обов'язково «вистрілить» в розмірі 120 x 120 пікселів. Професійний дизайн іконки повинен це враховувати.
4. Спрощуйте і не перевантажуйте іконку зайвими деталями
Мінімалізм - ваш кращий друг. Чим більше прикрас і деталей на іконці, тим нижче її впізнаваність. Іконка повинна бути чимось на зразок символу - досить простою і зрозумілою. Наприклад, ось іконка, яку ми зробили програму з рецептами Кукорама:
5. Правильно розставляйте світло і тіні
Ця рада актуальна, якщо ви робите іконку для Android-додатки. Керівництво по Android Material докладно розповідає про цей аспект. У ньому також наведені значення для тіней, що відкидаються іконкою того чи іншого кольору.
6. Перевірте, як виглядає іконка на тлі іншого кольору (темному, світлому, кольоровому)
У маркеті іконка відображається на білому або світло-сірому тлі, але шпалери на пристроях користувачів набагато різноманітніше. Тому не забудьте перевірити, як виглядає дизайн іконки програми на тлі різних кольорів.
7. Не бійтеся використовувати перспективу
Звичайно, якщо це не порушує загальне враження. Оригінальне використання перспективи допоможе вам зробити іконку програми ще більш помітною. Ось відмінний зразок використання перспективи:
8. Створіть цікаву форму
Іконки нижче запам'ятовуються завдяки використаним на них формах:
Форма допомагає розпізнати іконку навіть якщо вона дуже маленького розміру.
9. Відповідально підійдіть до кольору
Почавши збільшувати кількість використовуваних квітів, вам буде важко зупинитися. Тому використовуйте один або два кольори - цього достатньо. Ось хороший приклад іконки з двома кольорами:
10. Не використовуйте фотографії
Існують чудові фотореалістичні іконки. але використання фотографій - це табу.
11. Створюйте іконки додатків без зайвого тексту
12. Не використовуйте на іконці елементи з інтерфейсу програми
Це дуже погана практика, яка заплутує користувача. Елементів інтерфейсу на місце на вашій іконці.
13. Створюйте іконки, які говорять про головну функцію додатка
З хорошою іконкою користувачеві навіть не доведеться заглядати в опис: для плеєрів зазвичай використовують ноти, інструменти або візуалайзер, для камер - зображення фотоапарата або об'єктива, а для месенджерів на зразок Viber - хмарки повідомлень:
В іконі для проекту UARoads ми відобразили відразу два важливих аспекти програми: необхідність відправляти дані на сервер для обробки і те, що воно призначене для автомобілістів. Також на іконі використані кольори національного прапора:
14. Вивчіть іконки конкурентів
Незважаючи на попередню пораду, погляньте на іконки конкурентів - швидше за все, вони вже якось обіграли головну функцію додатка. Тому спробуйте не повторюватися. Наприклад, іконка Wunderlist вигідно відрізняється від іконок інших додатків зі списками справ:
А ось іконка, яку ми створили для додатка KeepSnap. яке орієнтоване на фотографів:
Як бачимо, навіть до створення такого невеликого елемента як іконка, варто підходити з усією відповідальністю. Вдалий дизайн іконки привертає увагу користувачів, які прийшли в маркет зовсім за іншою програмою.
Зміна іконки - це теж не жарти. Наприклад, власникам Radium, додатки-агрегатора радіостанцій, довелося міняти іконку кілька разів за місяць, тому що вона не припала до смаку користувачам.
Ми, студія stfalcon.com. із задоволенням створимо іконку для вашого застосування, яка буде вигідно відрізняти його від продукції конкурентів.