Стаття про те як отримати користувальницький досвід на стадії проектування. Показую це на поточній версії робочого UX-прототипу. Створений у програмі UXPin, дивитися за посиланням тільки на десктопі, мобільна версія окремо.



На його прикладі докладно: про термінологію, ніж інтерактивний прототип краще традиційного (10 моментів), як його використовувати кілька висновків.

Читати далі →

Ідея другої стаття виникла спонтанно і утвердилася завдяки нашим читачам. Після першої статті нам задавали питання і ми розповідали про процес створення сайтів. Кілька разів прозвучав термін «прототип». Дійсно, це важливий етап, який не можна пропустити. У цій статті ми розповімо про наш досвід створення інтерактивних прототипів на платформі PIXLI.



Читати далі →

14 рад по використанню Sketch і InVision в роботі дизайнера

image
Инвижн дозволяє дизайнеру продемонструвати замовнику прототип дизайну програми, зробивши його інтерактивним. Крім того, завдяки Инвижн, можна організувати злагоджену роботу всередині команди, між дизайнером, менеджером проекту, верстальником і програмістами, незалежно від платформи (mac os, Windows, Linux). Пропоную вашій увазі зручні сценарії використання зв'язки Sketch + InVision.
Читати далі →

Axure. Удар інтерактивом по інтерфейсу. Проби і помилки

Axure
  • Дійсно цей продукт не більш ніж інструмент для прототипування?
  • Може UI designer повністю перейти на роботу в Axure, відмовившись від інших інструментів?
  • Які сильні та слабкі сторони цієї програми?


Я постараюся знайти відповіді на ці питання нижче. Порівняно недавно я вирішив піти від Adobe Photoshop до Axure, раптово розкривши для себе потенціал цього інструменту, не тільки як засобу для прототипування.

Читати далі →

9 безглуздих способів відкрити .sketch-файл. І один нічого такий

Отже: потрібно відкрити .sketch-файл, створений програмою Sketch. Тієї самої, яка є тільки на повне mac ' ах.

А повне mac ' a немає. Є тільки Windows і цей дурний .sketch-файл, який хтось прислав. І у цього когось Mac є. А в тебе немає. Тільки Windows.

Читати далі →

Використання SVG для малювання ескізів схем

Введення
Ця стаття про те, як накидати простеньку схему з десятка елементів, коли під рукою немає ні Altium'а, ні Orcad'a, ні навіть Visio Draw.io раптово зламався.

Це зовсім не складно: сучасні браузери підтримують мову розмітки SVG, за допомогою якого в звичайному текстовому редакторі можна легко і швидко намалювати невелику схему типу:

Sketch of a low-power step-up converter

Читати далі →

UI/UX події 2017 року, які вас точно не втомлять

Який дизайнер не хоче стати найкращим у своїй галузі? А найкращий спосіб дізнатися щось дійсно круте – це поспілкуватися з людьми, які на цьому собаку з'їли. Тому сьогодні ми пропонуємо вашій увазі список всіляких цікавих заходів (в першу чергу, присвячених темі UI/UX) як для дизайнерів-початківців, так і для просунутих, які ви, можливо, захочете внести в свій щоденник.



Читати далі →

В скарбничку інструментів для прототипування: Make My App

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



Якщо коротко підсумувати всі переваги, прототипування дозволяє:

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

На сьогоднішній день на ринку представлено таке розмаїття рішень для прототипування всіляких видів софта, що зорієнтуватися серед них непросто. Хабре можна знайти огляди про безліч подібних програм. Як і багато інші розробники, ми довгий час трималися перевіреного рішення — відомого Moqups — шкодуючи часу тестувати численні альтернативи. На Make My App — інструмент, про який піде мова в огляді, ми вийшли випадково, завдяки рекомендації з боку: у списках ми цей продукт не знаходили. Нижче представляємо невеликий огляд, за яким можна скласти загальне уявлення про функціоналі програми.

Читати далі →

Інтерфейси: Мій, твій, ваш, наш чи цей

Замітка про точках зору.

image
Еволюція Мого Комп'ютера
Пам'ятайте значок Мій Комп'ютер (My Computer) на старих версіях Windows? То була чудова маленька іконка, що представляє собою все, що було на вашому комп'ютері — всі програми, всі праці і твори, всі цифрові шматочки користувача.

У більш пізніх версіях Windows Microsoft назвали цю іконку Комп'ютер (Computer), згодом перейменувавши її в Цей Комп'ютер (This PC). З чим пов'язані ці зміни? Можливо, займенник «мій» вводило в оману? Було непослідовним? Або взагалі не потрібне?

image
Постійні зміни назви цієї іконки змусили мене замислитися: якими критеріями
розробники роблять вибір між «моє» і «ваш»?

Читати далі →

JavaScript 2016, а можна простіше?

Останні півроку багато пишуть про невиправдану складності клієнтського JavaScript. Недавня стаття How it feels to learn JavaScript in 2016 її переклад на хабре викликали багато уваги, критика багато в чому справедлива, але...
Ускладнювати просто, спрощувати складно. (Один із законів Мерфі)
У цій статті я дам практичні поради, як можна просто зробити фронт-енд додаток, використовуючи при цьому сучасні технології. Спочатку практичні деталі реалізації, а в кінці статті буде аналіз вибраного стека.
Як приклад використовується додаток для роботи з колекцією фільмів. Фільми відображаються в списку з посторінковим вибіркою, пошуком, сортуванням, редагуванням і видаленням.
Використаний стек: create-react-app як збирач для клієнта, React, bootstrap, API з json-server або json-заглушки.

Працююче демо тут: Movies List.

Читати далі →