Розробка красивих мобільних додатків з нуля

Я почав вчитися графічному дизайну в 13 років. Я навчився розробляти веб-сайти з онлайн-курсів і весь день бавився з Photoshop та Affinity Designer. Цей досвід навчив мене, як мислити як дизайнер.

Я розробляю та розробляю програми вже майже рік. Я відвідував програму в Массачусетському технологічному університеті, де я працював із командою для розробки Universeaty. Два місяці тому я почав працювати над новим додатком Crypto Price Tracker, який нещодавно запустив 28 січня.

У цій публікації я поділюсь поетапним процесом проектування, яким я керуюся, а також прикладами програми, над якою працював. Це має допомогти кожному, хто хоче навчитися чи вдосконалити свої навички цифрового дизайну. Дизайн - це не все, щоб знати, як користуватися програмним забезпеченням для проектування, і ця публікація не навчить вас, як ним користуватися. Є сотні підручників хорошої якості в Інтернеті, щоб навчитися. Дизайн - це також розуміння вашого товару навиворіт, його особливостей та функціональних можливостей, а також проектування, маючи на увазі кінцевого споживача. Ось чому ця посада покликана навчити.

Процес проектування :

  1. Створіть діаграму потоку користувачів для кожного екрана.
  2. Створюйте / малюйте каркаси.
  3. Вибирайте шаблони дизайну та кольорові палітри.
  4. Створюйте макети.
  5. Створіть прототип анімаційного додатка і попросіть людей протестувати його та надати відгук.
  6. Завершіть макети, щоб остаточні екрани були готові до початку кодування.

Давайте розпочнемо!

Діаграма потоку користувачів

Перший крок - з’ясувати функції, які ви хочете у своєму додатку. Отримавши свої ідеї, створіть діаграму потоку користувачів. Діаграма потоку користувачів - це дуже високий рівень представлення шляху користувача через ваш додаток / веб-сайт.

Зазвичай діаграма користувача складається з 3 типів фігур.

  • Прямокутники використовуються для представлення екранів.
  • Діаманти використовуються для представлення рішень (Наприклад, натискання кнопки входу, проведення пальцем ліворуч, збільшення).
  • Стрілки пов’язують екрани та рішення разом.

Діаграми потоків користувачів дуже корисні, оскільки вони дають хороше логічне уявлення про те, як функціонуватиме програма.

Ось схема користувальницького потоку, яку я намалював, коли починав працювати над дизайном свого додатка.

Каркасні дроти

Після того, як ви заповнили діаграми потоків користувачів для кожного екрана та розробили подорожі користувача, ви почнете працювати над каркасним оформленням усіх екранів. Каркасні мережі - це, по суті, уявлення про те, як буде виглядати ваш додаток. По суті, ескіз або контур того, куди будуть йти зображення, мітки, кнопки та інше, з їх макетом та розташуванням. Приблизний нарис того, як буде працювати ваш додаток.

Я використовую друковані шаблони від трафаретів інтерфейсу для малювання каркасів. Це економить час і дає приємне полотно, щоб малювати і робити нотатки.

Ось приклад каркасу.

Після ескізування каркасних каркасів ви можете скористатися програмою під назвою Pop і сфотографувати всі свої малюнки за допомогою програми та створити прототип, пов’язавши всі екрани за допомогою кнопок.

Шаблони дизайну та кольорові палітри

Це моя улюблена частина. Це як вітрина. Безліч дизайнерських візерунків та кольорових палітр на вибір. Я вибираю ті, які мені подобаються, і експериментую з ними.

Найкращими платформами для пошуку шаблонів дизайну є Mobile Patterns та Pttrns. А щоб знайти хороші кольорові палітри, перейдіть до Color Hunt.

Макети

Це коли ви нарешті переходите до використання програмного забезпечення для проектування. Макет в дизайнерському розумінні - це вірний образ вашого дизайну. Це майже так, як ви зайшли в цей додаток у майбутньому і зробили з нього кілька знімків екрана. Це повинно виглядати реалістично і майже схоже на справжнє.

Існує програмне забезпечення для проектування та інструменти для створення макетів. Я використовую дизайнер Affinity. Найчастіше використовуваний інструмент для дизайну iOS - це Ескіз.

Ось приклад деяких ранніх проектів мого додатка.

Я більше експериментував з різними палітрами кольорів.

Я поділився початковими макетами зі своїми друзями для їхніх відгуків. Здавалося, багатьом людям подобається золотистий градієнт і чорна схема.

Будьте готові відгукнутися та експериментувати з новими пропозиціями! Ви побачите чудові ідеї ваших користувачів, коли ви розмовляєте з ними, а не коли ви несамовито прокручуєте Dribbble або Behance.

Тож я переробив макет і видалив фонові графіки, оскільки їх генерування було технічно трудомістким процесом, і вони зменшили читабельність. Так виглядав перероблений макет.

Я був дуже задоволений кольоровою гамою, піктограмами на панелі вкладок та загальним макетом. Я пішов уперед і спроектував решту екранів, дотримуючись тих самих рекомендацій щодо дизайну. Це був довгий, але, безумовно, веселий процес!

Як тільки всі мої екрани були готові, я зібрав прототип в Adobe XD і попросив кількох друзів поекспериментувати та дати відгук.

Після останніх штрихів і подібних, ось як виглядає мій остаточний дизайн.

Після того, як всі екрани були завершені, я імпортував їх у Xcode і почав кодувати програму.

Це воно! Сподіваюсь, ця публікація допоможе вам розпочати розробку програм або допоможе вам стати кращим дизайнером. І якщо вам подобається мій додаток, ви можете завантажити його тут.

Закінчую пост однією з улюблених цитат про дизайн.

«Дизайн - це не просто те, як він виглядає і як відчувається. Дизайн - це як це працює »

-Стів Джобс