Незважаючи на величезну кількість всіляких інструментів для дизайну мобільних додатків далеко не кожне володіє всім необхідним функціоналом. Крім того, необхідно розуміти, що деякі інструменти розраховані для створення оформлення мобільних додатків на платформі Android, а інші для iOS. Починаючи створювати дизайн програми для мобільного пристрою необхідно заздалегідь обзавестися всіма необхідними інструментами.
Для максимально ефективної розробки оформлення додатків для смартфонів і планшетів необхідно користуватися тільки самим перевіреним софтом. З цієї причини ми підготували список найкорисніших інструментів для дизайнера мобільних додатків.
1. Генератор інтерактивних прототипів Axure:
- Має можливість візуального редагування;
- Підтримує фрейми;
- Підходить для розробки дизайну додатків на Android і iOS.
- Підтримує CSS3-ефекти;
- Дозволяє легко проводити тести дизайну на дисплеї будь-якого мобільного пристрою;
- Містить величезну кількість графічних елементів.
- Дозволяє швидко створювати спеціальні скетчі;
- Даний дизайнерський пакет дозволяє розробляти оформлення для мобільних пристроїв на різних платформах;
- Включає в себе масу корисних плагінів.
- Основною особливістю даного інструменту є те, що при його допомоги можна реалізовувати дизайнерські рішення в режимі онлайн;
- Включає масу симуляторів для тестування дизайну додатків;
- Має масу графічних елементів.
На просторах всесвітньої мережі інтернет можна знайти ще не один десяток корисних і ефективних інструментів для створення дизайну мобільних додатків. За їх допомогою практично кожен зможе створити гарне оформлення для мобільних програм.
Я створила спеціальну презентацію, щоб показати, з чого починається дизайн мобільних додатків і які фішки допомагають зробити його зручним і зрозумілим для користувачів.
Чим відрізняється UX від UI дизайну?
В ідеалі дизайн об'єднує в собі форму і функції, властивості і естетичні прояви. UX (User Experience) дизайн відповідає за функції і властивості, це процес створення продукту, який корисний, легкий у використанні і приємний для взаємодії. Завдання UX дизайнера - привести користувача до кінцевої мети, допомогти йому «вирішити проблему».
UI дизайн - це візуальне оформлення «вироби»: які використовувати кольори, чи зручно буде людині потрапляти пальцем в кнопки, читабельним чи буде текст.
З чого починається UX?
У досліджень, які проводять на перших етапах UX дизайну є багато спільного з маркетинговими. Наприклад, аналіз конкурентів і ринку, визначення ЦА і бізнес моделі.
Бенчмаркінг - одне з таких досліджень. Це спосіб для вивчення діяльності компаній-конкурентів, щоб перейняти їх позитивний досвід і застосувати дані про нього у своїй діяльності.
Навіщо проводити бенчмаркінг дизайнеру?
- Визначити сильні та слабкі риси оцінюваних об'єктів.
- Розширити розуміння ринку і бізнес-домену *.
- Розвинути власне бачення проекту і виробити нові ідеї.
* Бізнес-домен (в рамках розробки ПО) - предметна область, яка визначає набір стандартних вимог, спеціальної термінології і функціональності (наприклад, розваги, туризм та подорожі або соціальні сервіси).
Також з маркетинговими дослідженнями перетинається аналіз аудиторії. UX дизайнери проводять його на перших етапах роботи. Починаючи з інтерв'ю, опитування або спостереження, сегментуємо аудиторію за типами користувачів. Створюючи персон (вигадані особистості, образи майбутніх користувачів) і продумуючи сценарій для кожного з них. Навіщо проводити подібні дослідження? Які вигоди дизайнер отримає від цього:
- Визначить основні і вторинні завдання користувачів.
- Визначить мотивацію користувачів.
- Виявить типові проблеми, з якими стикаються користувачі.
- Виділить пріоритети в розрізі призначених для користувача потреб.
- Сформує збірний портрет користувача.
- Чи знайде передумови для вибудовування емпатичних зв'язку.
UX - це підхід до дизайну, який враховує всі аспекти взаємодії людини з продуктом або послугою. Він міцно пов'язаний з розумінням поведінки користувача, його потребами, цілями, мотивацією і контекстом, в якому буде використаний продукт.
Після того, як всі дослідження проведені, майбутнє додаток спроектовано і створено Wireframe, слід візуальне оформлення.
Чотири правила створення зручного дизайну
UI (User Interface) - це те, що у багатьох людей відразу асоціюється зі словом «дизайн»: кольору, графіка, іконки і логотип. Це засіб зв'язку між людиною і системою. Для того, щоб дизайн був зручний, вирішував проблему і «продавав» продукт існує ряд правил і тенденцій, яким слідують UX / UI дизайнери для досягнення своєї мети:
- Спрощення користувацького взаємодії. Коли користувач взаємодіє з додатком, у нього є певна мета. І, як правило, чим менше зусиль користувач докладає для досягнення цієї мети, тим краще для користувача досвід. Хороший приклад - дизайн лінійного шляху, коли кожен крок користувача супроводжується виконанням тільки однієї дії.
- Колір як функціональний елемент. Вибір кольору продіткован не тільки естетикою, це частина користувацького взаємодії. Колір - інструмент акцентування на головному. Наприклад, дизайнери можуть використовувати кольори, щоб встановити візуальне відмінність між різними типами повідомлень.
- Діалоговий дизайн.Користувачі часто використовує тільки три додатки, і як мінімум одне з них - месенджер. Люди люблять спілкуватися. Тому чатбот і голосові помічники, посилені штучним інтелектом, стали трендами останніх років.
- Емоційне взаємодію.Навіть в епоху інтерфейсів командного рядка ми використовували емотикони (смайлики), щоб донести до інших свої почуття. Людям властиво встановлювати емоційний зв'язок з усіма використовуваними продуктами. Як наслідок, при взаємодії з продуктами ми очікуємо реакцій схожих на людські.
Ринок мобільних додатків розвивається, девайси стають розумнішими, а дизайнери знаходять все нові візуальні рішення, щоб «олюднити» смартфон. Все це для того, щоб задовольнити потреби користувачів і бізнесу.
Чим схожі дизайн і маркетинг?
Маркетолог і дизайнер ставлять завдання і домагаються мети на основі оцінок, аналізу та досліджень ринку, специфіки, затребуваності і аудиторії. Дизайнери навчилися бути емпатії, адже для того, щоб спроектувати додаток необхідно багато знань про споживача та його поведінці. Теж саме використовують і маркетологи для проведення успішної рекламної кампанії. Формула успіху для бізнесу - це хороший дизайн + хороший маркетинг.
Маркетинг і дизайн пов'язує бізнес (продукт), а саме прогнозування майбутнього відгуку і враження, проектування поведінки, нового досвіду і планування поведінки на основі вже існуючих моделей.
висновки
- Завдання UX / UI дизайну - «продати» товар або послугу через інтерфейс. Саме на основі роботи UX / UI дизайнера користувач приймає рішення: «Бути чи не бути?», Подобається чи не подобається.
- UX (User Experience) дизайн відповідає за функції і властивості, це процес створення продукту, який корисний, легкий у використанні і приємний для взаємодії. UI дизайн - це візуальне оформлення «вироби»: які використовувати кольори, чи зручно буде людині потрапляти пальцем в кнопки, читабельним чи буде текст.
- Щоб дизайн був зручний, вирішував проблему і «продавав» продукт існує ряд правил, яких дотримуються UX / UI дизайнери для досягнення своєї мети:
- діалоговий дизайн;
- колір як функціональний елемент;
- спрощення користувальницького взаємодії;
- емоційна взаємодія.
Як правило, маркетологи відштовхуються від створеного продукту і вирішують, хто повинен бути клієнтами бізнесу. Дизайнери роблять навпаки, спочатку досліджують проблему клієнта і створюють для неї рішення - продукт. Пов'язує їх те, що дизайн і маркетинг служать цілям бізнесу (продукту).
Якщо ви знайшли друкарську помилку - виділіть її та натисніть Ctrl + Enter! Для зв'язку з нами ви можете використовувати.
Для дизайнера інтер'єрів стало звичною справою тягати з собою план квартири, рулетку і незамінну палітру RAL. Але зараз робити це необов'язково: завдяки різноманітним сервісів і додатків можна створити креслення приміщення з 3D-моделлю, підібрати кольори для майбутнього інтер'єру або вибрати новий диван або картину за допомогою технологій доповненої реальності (AR). The Village попросив дизайнерів інтер'єру розповісти про свої улюблені додатках для смартфонів, які можуть використовувати і ті, хто просто цікавиться дизайном або робить ремонт.
Олена Горська
Faradise
Faradise - мобільний додаток, яке використовує технологію доповненої реальності і дозволяє приміряти сподобався предмет в існуючому інтер'єрі: зручні цифрові кімнату і розмістити в ній потрібну модель на екрані смартфона. По суті, це простий у використанні інструмент, який не вимагає від користувача дорогою периферії або спеціальних навичок.
«Колориметр AR»
Додаток буде однаково корисно як веб-дизайнерам і 3D-визуализатор, так і тим, хто просто робить ремонт. Завдяки йому можна визначити необхідний колір по зображенню або реальному об'єкту, отримати його код в системах RGB, CMYK або HEX, a також підібрати найбільш близькі відтінки по системі кодування Pantone, яка використовується при маркуванні лакофарбових матеріалів.
CamToPlan
У CamToPlan можна визначити розмір в горизонтальній площині. При цьому додаток зберігає всю розмірну ланцюжок, збираючи з неї обмірний план, який можна експортувати для подальшої роботи в будь-якій програмі для дизайну інтер'єрів. Він також вважає площа приміщення і вміє визначати кути статі, навіть якщо вони знаходяться за меблями.
Toolbox
Можливості інструментів в Toolbox скромніше, ніж в попередньому додатку, але їх кількість вражає. У наборі є як проста рулетка, транспортир або схил, так і інструментарій для визначення напруженості магнітного поля або висоти над рівнем моря, що незамінне при самостійному будівництві, наприклад дачі.
Planner 5D
платформа
Ціна
умовно безкоштовно (більшість предметів інтер'єру розблокуються тільки при разової оплати або щомісячної передплати)
що вміє
створювати дизайн-проект з підбором матеріалів і меблів
Простий інструмент для створення візуального макета ремонту дозволяє вивести в реальних розмірах кімнату, квартиру або садибний будинок, підібрати оздоблювальні матеріали та предмети меблів і отримати приблизне уявлення про те, чого ви хочете від свого ремонту. Правда, цей додаток не є маркетплейсом, тому всі предмети інтер'єру дані без прив'язки до інтернет-магазинах - доведеться шукати вподобані речі самостійно.
Анастасія Холопцевою
SketchUp Viewer
Нескладна програма, яка дозволяє працювати з 3D-моделями, вибудовувати і заповнювати простір. Стане в нагоді як професіоналам для ескізних робіт, так і іншим для втілення своїх ідей. В цілому, звичайно, не може служити альтернативою серйозним архітектурним або 3D-програмами, але цілком може використовуватися як помічник для розумового дизайн-процесу, коли час є, а комп'ютера під рукою немає: в метро, \u200b\u200bв черзі і так далі.
Adobe Capture CC
Дуже зручна і багатофункціональна програма, гранично проста у використанні, яка допомагає підібрати гармонійну колірну гаму для інтер'єру. Маючи один-два заданих кольору, можна знайти кілька інших, придатних згідно різним колірним схемами, і доповнити колірну карту приміщення. Всі створені колірні поєднання можна зберігати і коригувати згодом.
Корисні поради про те, як домогтися від дизайнера якісного результату, відповідного вашим цілям. Процес, вартість і методики - все це в нашому новому пості.
Всі ми бачили приклади того, як дизайн ставав причиною успіху того чи іншого мобільного додатка. Навколо посередній проектів піднімалася галас завдяки свіжому дизайну, а деякі прекрасні ідеї були під шаром жахливого інтерфейсу. У цій статті ми розкладемо по поличках процес створення дизайну для мобільних додатків. Отже, з чого почати?
визначити цільову аудиторію
додатки і свої бізнес-цілі
Як директор компанії або керівник проекту ви відповідаєте за те, щоб відповісти на ці ключові питання, перш ніж приступити до створення самого додатка. Хто ваша цільова аудиторія? Що їй подобається? Які програми вона використовує кожен день? Для чого? Подумайте і про свої цілі. Як ви будете монетизувати додаток? Яку бізнес-модель виберете?
Не приступайте до проектування дизайну додатки, які не визначившись з відповідями за всіма цими пунктами.
знайти дизайнера
Якщо ви читаєте цю статтю, швидше за все, у вас немає дизайнера в штаті. Дизайнери-фрілансери живуть на Dribbble і Behance. Вибирайте такого фахівця, чиє портфоліо відповідає вашим смакам.
Хорошим рішенням буде найняти цілу команду, що складається з дизайнерів, розробників, тестувальників і менеджера проекту. Так ви отримаєте не тільки дизайн, а ціле працює додаток. Наймаючи компанію, а не фрілансера, ви отримуєте додаткові навички: аналітику, UI / UX-дизайн, мобільний і веб-розробку та т. Д. Вони - команда, так що у них є усталений бізнес-процес, це заощадить вам час в порівнянні з набором незнайомих один одному фрілансерів. Команди теж розміщуються на платформах, так що спробуйте Upwork.
Також звертайте увагу на відгуки клієнтів і рейтинг. Відсутність рейтингу не обов'язково означає, що команда погана, вони просто могли тільки зареєструватися на платформі. Але ризик в цьому випадку, звичайно, буде вище.
розповісти дизайнерові все
Простий, але дуже важливий пункт - розкажіть своєму дизайнеру все про майбутнє додатку. Всі ваші думки про цільову аудиторію, який образ ви хочете створити, яка стратегія монетизації, які програми подобаються вам з точки зору дизайну, ніж ви збираєтеся виділятися серед конкурентів і так далі. Поділіться натхненням і уважно вислухайте зворотний зв'язок від дизайнера.
Намагайтеся домовитися по всіх пунктах заздалегідь. Якщо фахівець відмовляється слідувати принципам «плоского дизайну» для Android-додатки, попрощайтеся і знайдіть іншого. Не забудьте забезпечити дизайнера усіма актуальними посібниками по стилю, що використовуються вашою компанією. Навіть якщо вони для вебу, можуть стати в нагоді в роботі над додатком.
отримати прототип
Хороший дизайнер завжди починає з прототипу - робочої моделі майбутнього програми. Створює всі екрани додатка, має елементи і встановлює зв'язки елемента. За допомогою такого прототипу можна «помацати» майбутній проект, знайти і усунути помилки в UI / UX. Спробуйте прототип на друзях або фокус-групі, щоб зрозуміти, чи так вони використовують додатки, як ви припускали.
Прототипування коштує грошей і на нього потрібно час, але це дуже важливий етап. Завдяки прототипу можна точно визначити вартість дизайну додатки, так що ви точно будете знати, скільки витратите. Найкращим інструментом для демонстрації прототипу ми вважаємо InVision - там є можливість коментувати дизайн, що дуже зручно.
отримати дизайн
Коли обумовлені терміни і вартість, дизайнер може приступати до творчості. Домовтеся, що будете дивитися екрани в міру готовності і направляти зворотний зв'язок. Якщо ви працюєте з фрілансером, звертайте увагу на те, в якому вигляді ви отримуєте матеріали. Всі вихідні повинні бути впорядковані в папках відповідно до структури проекту, у папок повинні бути зрозумілі імена, щоб розробником не довелося витрачати час на розгадування шифрів. В ідеалі дизайнер повинен залишити коментарі для розробників, особливо в складних місцях і зробити файл з нарізкою поведінки всіх елементів (interface guidelines, GUI).
Протягом десятиліть найпопулярнішою програмою для створення графіки був Adobe Photoshop і його товариші по Creative Suite. Тепер же великою популярністю користується Sketch, так як він був створений спеціально для дизайнерів інтерфейсу. Ми в «Культпросвіт» використовуємо обидва: вибираємо в залежності від типу графіки.
тестувати і розвивати додаток
Не можна зробити успішний проект раз і назавжди. Вам доведеться додавати новий функціонал, змінювати щось, керуючись статистикою і зворотним зв'язком від користувачів. Так що, вибираючи дизайнера або команду, обговоріть питання подальшої підтримки програми.
Оригінальне або крос-платформенне
додаток - що вибрати?
Якщо у вас грандіозні плани і є бюджет, завжди вибирайте нативні додатки. Вони краще працюють і відмінно виглядають. Поведінка користувачів на Android і iOS дещо відрізняється, так що це потрібно враховувати. Інтерфейс програми повинен бути виконаний відповідно до встановлених гайдлайни, наприклад material design для Android. Так ви забезпечите високий рівень утримання користувачів і будете задоволені показниками когортного аналізу.
Однак іноді крос-платформенне додаток буде кращим рішенням. Йдеться про випадки, коли потрібно зробити MVP (продукт з мінімальним функціоналом) в стислі терміни і з обмеженим бюджетом. Перевага цього рішення в тому, що вам не потрібно наймати програмістів для кожної окремої платформи - одного буде достатньо.
Скільки коштує розробка мобільного
додатки?
Дизайн мобільного додатка не може коштувати дешево, але це важлива інвестиція в його майбутній успіх. Вартість роботи залежить від країни. Наприклад, «Культпросвіт» базується в, вартість години дизайну у нас починається від 25 доларів. Ось вартість деяких наших робіт:
Aegle
Це крос-платформенне додаток, яке допомагає користувачеві залишатися у формі. З його допомогою можна планувати складні тренування, дивитися відеоуроки з вправами і відстежувати з'їдене за тиждень. Є також лічильник калорій і режим «Відрив», де можна записувати весь з'їдений фастфуд. Ми робили дизайн цього додатка для iOS, витратили 57 годин на 13 екранів. Загальна вартість - $ 1430.
FlyMyCard
Сервіс, який дозволяє створювати красиві віртуальні листівки та відправляти їх друзям, а також знаходити нових друзів з інших країн. Можна вибрати фото, додати рамку і текст і переслати результат близькій людині або новому знайомому. Клієнт хотів мати і Android-, і iOS-версію додатка, так що нам знадобилося 73 години, щоб створити 18 екранів, і ціна склала $ 1840.
WaysGo
Досить складний проект: соціальна мережа, яка дозволяє знайомитися з новими людьми, грунтуючись на тому, які речі ви любите і які місця відвідуєте. Користувачам доступні різні ролі, а в самому додатку є безліч функцій: можна шукати закладу і місця, читати історії про них і створювати власний контент. Ми створили 32 екрану для iOs- і Android-додатків, витратили 120 годин, а вартість склала $ 3000..
Платформа доя прототипирования мобільних додатків. Створення інтерактивних прототипів і симуляція основних користувальницьких дій з підтримкою основних браузерів. Є редактор, панель створення прототипу і плеєр для перегляду інтерактивного прототипу в роботі.
Готовий прототип можна тестувати на реальному мобільному Стройство або в браузері.
2.
Інструмент для створення мокап на HTML5 з простим інтерфейсом і набором форм, кнопок, полів, контейнерів та основних елементів інтерфейсу.
Містить шаблони для прототипування застосувань під iPhone і iPad.
3. UXPin
Інструмент швидкого створення прототипів на основі простої розмітки з нуля. Є можливість контролю ітерацій, редагування та спільного коментування проекту кількома дизайнерами і розробниками в режимі реального часу.
4.
Один з найпопулярніших інструментів прототипирования мобільних інтерфейсів і додатків. В комплекті - десятки і сотні іконок і елементів інтерфейсу. Є шаблони під кілька основних смартфонів і мобільних операційних систем.
5.
Платформа для дизайну і прототипування мобільних додатків для iPhone, Android-смартфонів і iPad. Підтримує роботу з віджетами.
6. Fluid
Баузерное додаток на HTML5 для створення інтерактивних прототипів мобільних додатків під Android, iOS і Windows 8. Підтримує редагування перетягуванням, анімацію та бібліотеку з 1700 + готових елементів інтерфейсу. Є можливість експорту дизайнерських прототипів в різні типи документів і зображень.
7. Axure
Генератор інтерактивних прототипів з можливість швидкого візуального редагування і викачуваними бібліотеками для віджетів з підтримкою фреймів для iOS, Retina-екранів, бібліотеками для iPhone, iPad і Android.
8.
Швидкий інструмент фреймінг додатків і бібліотека елементів для прототипування з підтримкою розробки дизайну додатків для iPhone, Android, iPad і Windows Phone.
9.
Потужна платформа-конструктор з підтримкою 2D- і 3D-анімації готових прототипів. Прототипи дизайнерських рішень можна експортувати і встановлювати на iPhone, iPad або Android-смартфон для подальшого тестування.
10.
Простий інструмент для фреймінг і прототипирования з підтримкою швидкого малювання за пару кліків. Пропонує два базових поля для розробки шаблону або прототипу: вид з вікна браузера і вид на екрані смартфона. Підтримує розробку концепції дизайну для горизонтальної та вертикальної орієнтації екрану мобільних пристроїв (смартфони і планшети).
11. Wireframe Sketcher
Інструмент для дизайнерів, що створює швидкі скетчі для прототипування застосувань з підтримкою роботи в якості допоміжного рішення для Eclipse IDE. Є плагіни і набори елементів інтерфейсу для основних мобільних ОС.
12.
Інструмент створення інтерфейсів і діаграм для додатків під iPhone.
13.
Веб-додаток для прототипування з підтримкою клікабельних елементів інтерфейсу і модулем для тестування прототипів. Є симулятори для iPhone і iPad.
14. Flair Builder
Плоскі прототипи інтерфейсу на основі віджетів і додаткової бібліотеки елементів. НА виході отримуєте повнофункціональний HTML-прототип майбутнього програми з ефектами і внутрішньою структурою. Готовий прототип можна експортувати для тестування на реальних пристроях під iOS і Android.
15. iPhone Mockup
Інструмент створення простих мокап для iPhone, годиться для початківця дизайнера, що займається прототипами.
16.
Потужна бібліотека елементів всередині веб-додатки для прототипування, є підтримка CSS3-ефектів. Підтримує спільну роботу над одним проектом і коментування в реальному часі.
17.
Прототипування на основі як готових, так і створюваних дизайнером елементів. Є можливість експортування начерків в різні формати зображень.
18. Mokk.me
Швидкий конструктор прототипів з функціональністю drag-and-drop і редагуванням віджетів. Результат можна тестувати на iOS- і Android-пристроях.
19.
Дозволяє створювати клікабельні мокап з можливістю навігації по елементах і структурі прототипу додатку. Є шаблони для iPhone / iPad і пристроїв на основі Android. Готовий прототип можна експортувати в IPML, JPG, PNG, PDF або HTML, або відправити посиланням на веб-сторінку іншим учасникам проекту для обговорення і спільного тестування.
20. Pencil Project
Завершує добірку open-source інструмент розробки діаграм і прототипів інтерфейсу з підтримкою вбудованої бібліотеки форм і елементів і можливістю створювати візуальні блок-схеми для дизайнерів мобільних додатків.
