Інструменти

Moqups – легкий спосіб створити прототип сайту або додатку

Ті з вас, хто мав справу з розробкою сайтів, знають, що перед тим як приступати до фінальної верстки, потрібно зробити макет майбутнього дизайну, зазвичай в PSD-форматі (Photoshop). Потім, на його основі, верстальник і програміст, починають розробку діючого сайту.

І все б добре, але розробку макету необхідно замовляти у дизайнера, і вартість такої роботи може бути чималою. Є ряд випадків, коли це невиправдано:

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

Особливо небезпечний пункт два, оскільки в результаті, все може вилитися в купу витраченого часу, вагон правок і результат, який відповідає бажаному, мабуть, відсотків на 80.

А що якщо взяти і зробити макет самостійно? Спасибі Кеп, скажете ви, але я і з Paint то особливо працювати не вмію, не кажучи вже про Photoshop.

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

За допомогою спеціалізованих інструментів можна без проблем створити крутий прототип сайту або мобільного додатку, не будучи професійним дизайнером. Один з таких інструментів – сервіс Moqups.com.

До того як почати працювати з Moqups, я перелопатив купу схожих сервісів і десктопних інструментів, але цей виявився найзручнішим. Практично ідеальним по співвідношенню ціна/зручність використання/функціонал. І юзабіліті варто поставити на перше місце в списку – щоб розібратися у всьому, вам вистачить хвилин 15-20 активного використання.

Ось приклад макета, створеного мною особисто – це фрагмент майбутнього редизайну сайту Webexpert.com.ua, розділу блогу:

А ось ще кілька прикладів прототипів по різним темам, які створювалися іншими користувачами:

Система роботи в Moqups вибудувана по дуже простій логіці, і суть можна пояснити в двох словах – у вас є полотно і набір різних готових елементів (Stencils), які можна розміщувати на цьому полотні в будь-якому вигляді, створюючи все, на що вистачить фантазії. Робиться це шляхом простого перетягування по алгоритму drag-n-drop.

Дуже зручна фіча – можливість імпортувати зображення, якщо раптом ви захочете додати в свій макет елемент, якого немає в бібліотеці сервісу. Наприклад, можна зробити скріншот чужого сайту і просто додати його до свого творіння в режимі Copy/Paste.

Наприклад, ми часто використовуємо цю можливість при формуванні рекомендацій для клієнтів:

У Moqups можна створювати проекти, а потім, окремі сторінки всередині них:

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

Властивості кожного елемента можна налаштовувати, наприклад, його зовнішній вигляд. Для цього достатньо натиснути на нього лівою кнопкою миші, і справа з’явиться панель форматування:

При бажанні, можна натиснути кнопку «Preview», у верхньому правому куті, а потім – «Full Screen» і подивитися, як все виглядає на чистому листі, без елементів інтерфейсу:

Є можливість експортувати результати своєї роботи в PDF/PNG, в тому числі, з підтримкою Retina-екранів. Але, ця опція доступна тільки для платних тарифів.

Одна з моїх улюблених можливостей – коментарі. Ставити їх можна де завгодно, і в роботі ця фіча дуже корисна. Приклад як виглядає робота з коментарями, можна побачити на анімації нижче:

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

Ось кілька найбільш очевидних способів використання Moqups:

  • створення макета сайту для майбутнього відтворення в PSD-форматі;
  • швидкі «замальовки» для формування концепції дизайну;
  • проектування структури сайту для розробників/SEO;
  • ескізи рекомендацій щодо впровадження на сайті;
  • проектування окремих елементів інтерфейсу;
  • створення прототипів додатків для будь-яких типів пристроїв.

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

У Moqups.com, крім безкоштовного аккаунта, є декілька тарифних планів, починаючи з $19 в місяць. Обмеження безкоштовного тарифу – 2 проекти в роботі (до 300 об’єктів) та 5 Мб місця на диску.

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

Поділіться своїм досвідом роботи з даним сервісом в коментарях! Чи може підкажете ще якісь цікаві сценарії його використання?<?strong>