Все про ui-китах, навіщо потрібні, як використовувати і де скачати

Навіщо вони потрібні? Щоб швидко зробити проект в єдиній стилістиці. Нижче наведені приклади UI-kits.

Як з ними працювати?

Метод використання UI-набору підходять для розробки чого завгодно: сервісу, корпоративного сайту, інтернет-магазину, мобільного додатку. Кити розрізняються набором елементів, тому підбирайте відповідний завданню. Наприклад, якщо ви створюєте магазин, напевно буде потрібно щось для товарних карток, корзина, форми.

Схема застосування виглядає приблизно так:

1. Підбирайте один або декілька відповідних UI-китів
2. Виймаєте потрібні елементи.
3. Вирішуєте, що будете в них змінювати. Кольорову гаму, 95% кита або нічого?
4. Розробляєте інтерфейс застосовуючи вийшов набір.

Ви можете знайти кити в будь-якій стилістиці: flat, material, skeuomorphism, realism ...

Чому це круто?

Час. Заощаджуємо години і дні роботи. Ui кит - готова дизайн концепція з усіма елементами, залишилося тільки розташувати «цеглинки» майбутнього інтерфейсу. Це крутіше шаблонів, тому що набагато гнучкіше. Це крутіше ручної відтворення кожного прямокутника, тому що швидше. Гнучкіше, швидше, вище, сильніше ... Ну ви зрозуміли.

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

Чи не дизайнерам. Замовник може сам вибрати набір (и) і погратися з елементами, конкретизувати ТЗ і отримати очікуваний результат. Розробник може робити більш-менш прийнятний прототипи без допомоги дизайнера. Всі учасники процесу зможуть заощадити ресурси суті «час-гроші».

Для MVP. Тут UI-kits - незамінна річ. Потрібно зробити мінімальний працездатний продукт? - Немає проблем, натягніть програмну частину на елементи UI-кита. По-моєму, є термін MDP - minimal design product, продукт в мінімальному дизайні. Якщо такого терміна і немає, то такий спір точно трапляється:

- Треба відразу робити гарний продукт, ось тут візуалізацію, ось тут повзунки в сайдбар ...
- Це важко закодіть, нам тільки протестувати на 2 юзерів, зробимо по-простому.
- Люди не зможуть цим скористатися через безперервні нападів блювоти. Повзунки в сайдбарі ПОТРІБНО.

UI-кит поставить крапку в таких діалогах. Це рішення на стику MVP і MDP.

Де скачати UI-кит?

Як я писав вище, можна взяти тільки графічний UI-кит - PSD або Sketch файл, або знайти вже зверстаний варіант. В інтернеті багато безкоштовних. Платні стоять доступних 5-50 $. Так де?

1. Фотостоки. Величезний вибір готових наборів елементів на Shutterstock, Depositphotos, Dreamstime і інших популярних. В основному - все платне.
2. На Themeforest в розділі UI Design.
3. Близько 200 безкоштовних китів на сайт freebiesbug.
4. На сайті freepik близько 1000 і теж безкоштовних.
5. На дизайн-блогах, в стічних розпродажах, де завгодно.

Розробити UI-кит для свого проекту?

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

Потрібен якийсь «брендбук», якщо завгодно, гайдлайни інтерфейсу. Це і буде UI kit. Нехай ведучий дизайнер зробить набір елементів, створить концепт головної сторінки. Решта будуть працювати на цьому фундаменті.

Щиро вірю, що з власним UI-китом, проект, через 2 місяці інтенсивної роботи чи не перетвориться в нього

Хоча, ніхто не застрахований ...