Як зробити перший крок до створення власного додатка

Wireframe.cc (Online)

Межі понять mock-up, wireframe і prototype досить розмиті,

і розбиратися у відмінності варто лише для того, щоб поправляти менш допитливих знайомих. Наша ж мета куди практичніше, тому нам досить знати, що чим менше деталізований ваш макет, тим більше він вайерфрейм. У цьому сенсі wireframe.cc — як раз те, що потрібно.

Створюємо проект

Відразу натискаємо Go premium і реєструємося на тижневий пробний період. Безкоштовна версія не дасть нам зберігати свої вайерфреймы і робити їх клікабельними.

Вибираємо тип проекту. Для прикладу давайте візьмемо смартфон.

Додаємо елементи

Особливість інтерфейсу wireframe.cc в тому, що ви спочатку виділяєте область, а потім вирішуєте, що в ній буде: прямокутник, блок тексту або зображення. Для тих, хто працював в інших програмах, це може здатися злегка незвично, але зручно.

Позначимо прямокутником місце для меню.

Не забувайте частіше зберігати макет, так як, на відміну від десктопних додатків, в wireframe.cc ви втратите всі напрацювання, якщо випадково повернетеся на попередню сторінку або закрити браузер.

 Додамо ще кілька прямокутників для кнопок «Увійти» і «Зареєструватися», які зробимо трохи пізніше, а в центрі розмістимо зображення. Самих зображень в вайерфреймах бути не повинно. Незважаючи на те що багато програм дозволяють вставляти .png і .jpg, витрачати на них час на цьому етапі не має сенсу. Досить умовного позначення, що говорить на мові проектувальників: «Я картинка».
 Також накидаем кілька маленьких кружків, що позначають пагінацію (розбиття інформації на сторінку). Щоб розмножити елемент, його можна скопіювати стандартними Ctrl/Cmd + C, Ctrl/Cmd + V або перетягнути елемент на нове місце з затиснутою клавішею Alt.

Вирівнюємо

Крім того, що wireframe.cc за замовчуванням допомагає вирівнювати елементи, ми можемо скористатися стандартним для всіх подібних програм інструментом Align.

 Щоб вибрати кілька елементів, ми можемо клікнути на них по черзі, затиснувши Shift, а можемо виділити область, затиснувши ліву кнопку миші і рухаючи курсор з правого нижнього кута в лівий верхній (рух з лівого верхнього кута в правий нижній створює новий елемент).
 Потім необхідно натиснути на кілька кнопок, і все готово: гуртки вирівняні по одній лінії і відстань між ними вийшло однакове. Щоб вирівняти блок з гуртками щодо картинки, потрібно просто вибрати всі елементи, згрупувати їх, натиснувши Ctrl/Cmd + G, потім вибрати об’єкт, щодо якого проводиться вирівнювання, та застосувати необхідний тип. Те ж саме потрібно зробити з іншими елементами. Додати тексти, кнопки, виділити кнопку і текст, вирівняти текст всередині кнопки.

Створюємо посилання

У результаті у нас вийшов цілком стерпний прототип привітального екрану:

 Щоб створити такий екран, натисніть на іконку карти сайту і натисніть Add new page. Скопіюйте на нову сторінку блок з меню, збережіть макет.
 Пора перетворювати наш вайерфрейм в клікабельний прототип. Повертаємося на перший екран, виділяємо прямокутник, в якому текст «Зареєструватися», і натискаємо правою кнопкою миші. У випадаючому меню натискаємо Link, після чого вибираємо екран, на який буде вести наша посилання.

Зберігаємо макет і натискаємо Export/Share. Копіюємо згенероване посилання і вставляємо в нову вкладку браузера або натискаємо на іконку з блискавкою, щоб перейти в режим перегляду у поточній вкладці.

 Непогано було б додати іконку «Назад» на екрані реєстрації, але максимум, на що ми можемо розраховувати в wireframe.cc — це кружечки і квадратики. Якщо масштаб нашої ідеї ніяк не хоче змиритися з таким примітивізмом, це означає, що нам пора на наступний рівень — до Balsamiq Mockups.

Balsamiq [Online, Mac, Windows, Linux] + Заготовки

Можливості Balsamiq набагато ширше, ніж у wireframe.cc, але основні прийоми, комбінації клавіш і інструменти працюють за тим же принципом. Розповісти про кожну з особливостей Balsamiq нам не вдасться хоча б тому, що ми самі не знаємо, тому зупинимося на найбільш цінних.

Online або Desktop?

Використовуйте обидві. І десктопна, і онлайн-версія Balsamiq зберігають вихідні файли у форматі *.bmml. Браузерне додаток зроблено на flash і час від часу гальмує, тому створювати мокапы буде зручніше на комп’ютері, а онлайн-версію використовувати в першу чергу для того, щоб презентувати результат або спільно доопрацьовувати проект.

(?) Якщо вам не подобається груба олівцева естетика Balsamiq, змініть її в меню View Skin Wireframe skin.

Інспектор елементів

Balsamiq пропонує нам заготовки для всіх стандартних інтерфейсних елементів, а якщо нам чогось не дістає, в нашому розпорядженні величезна бібліотека безкоштовних символів. Створюючи інтерфейс, ми тільки й робимо, що перетягуємо необхідні елементи UI Library в робочу область.

(?) UI Library — досить громіздка штука. Налаштувати її положення на екрані можна в меню View UI Library.

Відразу після додавання елемента з’являється вікно Inspector, в якому ми бачимо тільки ті налаштування, які потрібні для кастомізації обраної деталі інтерфейсу. Наприклад, якщо ми працює з тумблером, то Balsamiq запропонує нам 2 можливих стану саме для тумблера.

 Якщо ми виберемо кілька елементів, то зможемо змінити тільки загальні параметри (наприклад, колір) і скористатися інструментами вирівнювання, знайомими нам по wireframe.cc або будь-якому іншому графічному редактору.

(?) Якщо постійно виникає вікно Inspector заважає вам працювати, закріпіть його на панелі UI Library: View Dock Property Inspector.

Символи

Уявіть, що ви зробили 25 екранів програми, а потім вирішили поміняти місцями іконки у верхньому меню. Зробити регулярно використовується об’єкт символом — набагато простіше, ніж вносити зміни вручну. Для цього вам знадобиться:

 Виділити потрібні об’єкти і, натиснувши Ctr/Cmd + G, створити з них групу.
 Назвати елемент і натиснути Convert to symbol.
 Після цього символ з’явиться у вкладці Project Assets у UI Library. Щоб відредагувати його, достатньо буде натиснути Edit Source в «Інспектора елементів», і зміни автоматично застосовуються до всіх копій символу. Щоб змінити одну конкретну копію, досить двічі на неї натиснути. Але не забудьте вибрати відредагований символ і натиснути Break apart в «Інспектора елементів», в іншому випадку при редагуванні вихідного символу зміни будуть застосовані і до зміненого нами.

Кілька порад

  •  Потрібно розмножити вибраний елемент так, щоб кожен наступний з’являвся на заданій відстані від попереднього? Виберіть елемент, натисніть Ctrl/Cmd + D, перетягніть з’явилася копію на необхідну відстань і натисніть на цю ж комбінацію клавіш стільки разів, скільки потрібно.
  •  Щоб створити посилання, досить вибрати елемент і в Inspector призначити файл, на який потрібно перейти по кліку. У випадаючому списку ви побачите тільки ті bmml-файли, які зберігаються в тій же папці, що і редагований в даний момент макет.
  •  Для того щоб скористатися посиланнями, потрібно перейти в режим презентації View → Presentation mode.
 Інші базові функції в Balsamiq або інтуїтивно зрозумілі, або нічим не відрізняються від описаних на прикладі wireframe.cc.

Sketch [Mac] Photoshop + Illustrator — все, що вам потрібно

Єдина причина, по якій Sketch можна віднести до інструментів для проектування, — це його простота. Насправді його можливостей вистачає для створення повноцінного, готового до розробки дизайну, але, на відміну від Photoshop і Illustrator, вам не знадобиться купувати підручник у трьох томах і записуватися на піврічні курси. Справа в тому, що жоден з нині існуючих продуктів Adobe не замислювався для вебу. Колишні графічні дизайнери за інерцією продовжували користуватися знайомими їм програмами, звикли не звертати уваги на тонни непотрібних їм функцій і винайшли систему «милиць» для підготовки макетів. Беззаперечне лідерство монструозных інструментів задрало планку входу на ринок веб-дизайну на невиправдану висоту. Давайте кинемо виклик Adobe і навчимося робити красиво без них.

Артборды

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

 Для створення артборда ви можете виділити певну територію, так і вибрати один з поширених розмірів Inspector праворуч.
 Не дивуйтесь, якщо екран вашого iPhone здається вам явно менше запропонованого «Скетчем» артборда. Справа в тому, що пікселі на дисплеї retina десь в 2 рази менше пікселів на екрані вашого комп’ютера, і на невеликій (якщо міряти в сантиметрах) екран їх поміщається в середньому в 2 рази більше. Просто зменшіть масштаб до 50 %.

Бібліотеки символів

Можливості Sketch дозволять вам самостійно намалювати дизайн практично будь-якої складності, наприклад, автор цієї іконки стверджує, що працював з Sketch трохи більше місяця:

Але на вивчення необхідних інструментів «Скетчу» доведеться витратити 3-4 години, а для наших поточних цілей цього забагато, тому скористаємося шаблонами:

File New From Template iOS UI Design.

 Наш попередній макет нікуди не подівся, просто ми відкрили ще один. Якщо цікаво, читаємо міститься прямо в макеті інструкцію, якщо ні — відразу відкриваємо сторінку з символами, клацнувши по напису Welcome в лівому верхньому кутку. Переходимо на сторінку Symbols, запам’ятавши при цьому, що сторінок в макеті може бути кілька.
 Копіюємо всі символи, виділивши артборды по одному c затиснутою клавішею shift (при копіюванні за допомогою cmd + a всі елементи наложатся один на одного), натискаємо Cmd + C, чекаємо пару секунд і повертаємося в наш макет. Створюємо нову сторінку, клікнувши на назву цієї сторінки і натиснувши плюс в самому низу випав списку. Вставляємо символи, натиснувши Cmd + V.
 Вибираємо Menubar Title, копіюємо його, повертаємося на першу сторінку і вставляємо. Вже знайомі нам напрямні лінії допомагають поставити елемент туди, куди нам треба. Повертаємося до символів і двічі клікаємо на Navigation bar.
 На панелі керування елементами зліва ми бачимо «нутрощі» символу. Так як весь він нам не потрібен, затиснувши Cmd або Shift виділяємо три нижніх елемента: Line Background і Gradient Background, копіюємо на першу сторінку.

Нові елементи перекрили вставлений раніше символ, але це легко виправити: просто перетягуємо елемент, який хочемо бачити на першому плані вище тих, що потрібні нам на фоні.

 Давайте замінимо текст у верхній плашці на назву нашої програми. Нехай це буде Prankr, додаток для телефонних хуліганів. Заробити на цьому навряд чи вийде, але у нас все ще попереду. Відразу скопіюємо наш артборд, щоб за допомогою цієї болванки простіше було робити наступні сторінки і в першому артборде клонируем нижню рядок меню, щоб вийшло приблизно ось так:

Імпорт елементів і робота з ними

Насправді ніякого імпорту немає. Ми просто беремо потрібну нам картинку і перетягуємо в Sketch. Якщо шукаємо іконки — шукаємо їх в SVG, зображення цього формату ми зможемо редагувати так, як нам треба. Я взяв цю іконку телефону, зменшив його розмір, натиснув «+» в «Інспектора елементів» на вкладці Borders, тим самим додавши обведення елементу; обведення зробив товстіший, а заливку прибрав, знявши галочку біля чорного прямокутника з написом Fill. Вийшло щось віддалено нагадує дизайн iOS 7.

 Візьмемо кілька фотографій друзів і перетягнемо їх в Sketch. Вставимо овал поверх особи (Insert → Shape → Oval). Щоб вийшов ідеальний коло, розтягуючи овал, тримаємо клавішу Shift або просто підганяємо розміри в Inspector праворуч. Там же робимо коло напівпрозорим, виставляючи значення Opacity на 50 %.
 Затиснувши Shift вибираємо фотографію і овал і натискаємо кнопку Mask на верхній панелі. Отримуємо круглу аватарку, повторюємо ці дії з ще однією фотографією.
 Аватарки треба підписати. Ми можемо скористатися стандартним інструментом Text, але, так як ми працюємо з шаблоном, краще використовувати заготовки з підібраними шрифтами і кеглями.
 Клікаємо в область, в якій хочемо розмістити текст, і пишемо імена. Використовуючи вже знайомі нам інструменти та підходи, робимо з верхньої плашки кнопку «Додати контакт для розіграшу». Непогано буде, якщо трохи заокруглені кути плашкам, для цього вибираємо все через Shift і рухаємо повзунок радіусу:
 Тим часом нам приходять в голову нові ідеї функцій нашого застосування. Якщо ми не хочемо в підсумку заплутатися в своєму ж макеті, варто відразу почати групувати елементи. Для цього виділимо їх і натиснемо Cmd + G, після чого дамо групі назву, за яким будь-яка людина зможе здогадатися, що за елемент перед ним.
 Щоб навчитися збирати інтерактивні прототипи, нам знадобиться зробити другий екран. Нехай це буде екран додавання контакту для розіграшу. Перенесемо групу на другий артборд, зробимо подвійний клік по ній і виберемо іконку плюса. За допомогою інструменту Rotate розгорнемо її так, щоб вийшов хрестик, клацання по якій буде повертати нас до попереднього стану.
 Якщо ми будемо тримати затиснутим Shift, то обертати фігуру зможемо кратно 45 градусам. Якщо знадобиться, поправити кут можна буде на панелі праворуч.

Виберемо елемент Background і продублюємо його на відстані в пару пікселів від першого, щоб як би відбити таку зону, але як би не відбивати. Виглядає непогано, але круглі кути все нам псують. Двічі клікаємо на елемент, щоб поверх кутів з’явилися гуртки, вибираємо потрібні нам кути і прибираємо радіус. Так-то краще.

 Насправді з кутами та лініями можна робити набагато, набагато більше, Sketch — це повноцінний векторний редактор, але поки що це нам не потрібно. Нам треба швидше закінчувати з макетом. У мене вийшло якось так:

З того, що ми не вміємо, я застосував всього один прийом: щоб швидко змінити колір елемента на вже наявний, виберіть його, натисніть сполучення клавіш Ctrl + C і натисніть на потрібний колір. Причому колір може бути як у дизайні, так і в сусідньому вікні браузера.

 Вийшло непогано.

Експорт

В Sketch є маса приємних особливостей експорту, які нам не потрібні. Нам досить вибрати весь зацікавив артборд, натиснути плюс у вкладці Export і натиснути кнопку Export Portrait в самому низу «Інспектора».

 Всі. Тепер у нас є дві картинки, з якими ми навчимося робити псевдоприложения.

Flinto

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

Реєстрація

Для початку реєструємося в Flinto. Досить ввести email і пароль. Далі все настільки просто, що, замість того, щоб писати, я просто покажу діфку:

Головні особливості

Призначивши посилання, ви можете вибрати відповідний вид анімації на панелі зліва. У нашому випадку відмінно підходить Dissolve, вибираємо його, і все готово до експорту. Щоб на робочому столі вашого смартфона з’явилася іконка з вашим прототипом, достатньо натиснути Share & Install, ввести свій номер телефону, перейти за посиланням, що прийшла в смс, і зберегти відкриту сторінку на Home Screen. Таким же чином можна поширити посилання всім, кого ви вважаєте за потрібне, і, кожен раз заходячи по ній, вони будуть бачити актуальну версію вашого додатка.

Додаток Yo, яка дозволяє відправляти повідомлення друзям Yo і отримувати від них те ж саме, недавно привернуло 1 000 000 $. Придумати таке додаток може кожен. Тепер ви можете ще й спроектувати його, і, трохи попрактиковавшись, навіть зробити дизайн. Абсолютно неважливо, якими інструментами ви будете при цьому користуватися: wireframe.cc, WireFrame Skether, Mockflow, Balsamiq, Axure, Pidocu, Pencil Project, OmniGraffle, Mockingbird — список їх зростає з кожним днем. Куди важливіше знати, наскільки насправді елементарні базові принципи, ідентичні для всіх інструментів, і навчитися долати психологічну інерцію, яка заважає нам створювати.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *