4 нові класні плагіни для Figma у вашу колекцію.

1. Brandfetch.
Миттєвий доступ до мільйонів логотипів із варіаціями, кодами кольорів, описом грифтів та банерами відомих брендів.

2. Relume Ipsum.
Інструмент для копірайтингу з ШІ. Достатньо просто коротко описати проєкт, виділити фрейм й натиснути кнопку "Generate", він заповнить усі текстові поля потрібною інформацією. Але-але, безкоштовне обмеження — 2000 символів, далі від 9$ на місяць за дві тисячі символів.

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

4. Figma GPT.
ChatGPT безпосередньо в Figma, нарешті не потрібно перемикатись між вкладками під час роботи ❤️‍🔥

#інструменти #плагіни_figma
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

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

Проте, зробити це власноруч може бути дуже складно та довго, особливо якщо у вас ще немає досвіду роботи з ним. На щастя, багато вже зроблено за нас, а отже — можна скористатися готовими шаблонами 😏

За цим посиланням знайдете чудову добірку шаблонів Notion, серед яких:

🟣 Роадмап для організації роботи над проєктом
🟣 Шаблони для User Research
🟣 Заготовка сторінки портфоліо дизайнера
🟣 Шаблон для збереження нотаток з мітингів

та деякі інші.

Чи користуєтесь Notion? Чи зберігаєте все по-старому, в документах? Або знаєте альтернативи? Діліться в коментарях 👇

#дизайн_ресурси #безкоштовні
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Ловіть сайт із велетенською кількістю різноманітних анімованих прелоадерів.

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

Наче й дрібничка, а приємно 😌

#дизайн_ресурси #безкоштовні
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Привіт, дизайнери! Ловіть новини тижня:

1. Музей Майдану представив проєкт «Територія Гідності у доповненій реальності: музеєфікація пам’яток Майдану».
Відтепер кожний охочий у просторі Києва зможе відтворити 10 найвідоміших об’єктів Революції Гідності за допомогою QR-коду.

2. Monobank отримав стильний редизайн – перший за останні шість років!
Співзасновник Олег Гороховський анонсував редизайн додатку: відтепер головний екран вміщуватиме інформацію про стан рахунку, картку, поточні транзакції та сповіщення, а перемикатися між картками можна буде свайпом, який супроводжуватиметься 3D-анімацією.

3. Тестування нової кнопки «Відтвори щось» від YouTube.
Кнопка направлятиме користувача на випадкове відео у випадку, коли він не може визначити, що саме хоче подивитися. Як на мене, цікава ідея, однак поки невідомо чи враховуватиме він історію переглядів й за якими алгоритмами пропонуватиме контент 🤔

4. Верифікація акаунта у застосунку «Укрзалізниці» через «Дія. Підпис».
Міністр цифрової трансформації Михайло Федоров зазначив, що така інтеграція допоможе в боротьбі з перекупами, бо акаунти, які масово скуповують квитки, будуть блокуватися.

5. Ребрендинг музичного стрімінг-сервісу Deezer.
Тепер дизайн в темно-фіолетовій гамі, а логотип викликає асоціацію музичної хвилі. А ще появилась нова функція Shaker, яка дозволяє обмінюватись піснями з друзями на інших стрімінгових платформах, таких як Apple Music, Spotify і Tidal.

6. Picsart вражає – 20 нових інструментів на штучному інтелекті Ignite!
З ними користувачі можуть легко створювати рекламу, соціальні медіа-публікації, логотипи тощо. Також інструменти дають можливість створювати відео, зображення, GIF-файли, логотипи, фони, QR-коди та наліпки.

#дайджест #новини
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

В проєкті, на якому я працюю зараз, велика увага приділяється дизайну таблиць з різноманітними та складними даними. Таблиці самі по собі досить болючі для дизайнерів та викликають купу питань (як порахувати ширину стовпців? Як побудувати на автолейяутах, щоб можна було легко редагувати? В якому порядку розташовувати дані? По якому краю вирівнювати?…). А коли ми маєму справу ще й великою кількостю різноманітних даних, то проблем стає ще більше: як показати багато стовпців в обмеженій ширині контейнеру? Як і коли використовувати горизонтальний скрол? Яка оптимальна кількість рядків? Як організувати сортування? Як зробити таблицю такою, яку легко читати?

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

🟣 Велика стаття про UX патерни в таблицях з прикладами добре/погано

🟣 Також приклади UX рішень для таблиць

🟣 І ще приклади, до того ж анімовані

А я пішла ресерчити сортування та фільтрацію 🤔

#статті #референси
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Безкоштовні для комерційного використання гарнітури з підтримкою кирилиці 👍

➰ «3270»
Моноширинний шрифт від Рікардо Банфі, натхненний гарнітурою із теміналу серії IBM 3270. Дуже цікавий та характерний. Існує у двох накресленнях: regular та medium.

➰ «Hibana»
Гротескний із особливими деталями та захопливою історією створення. Його назва перекладається як «іскра». До завантаження доступне одне накреслення.

➰ «Binchōtan»
Моноширинний шрифт, що вдало поєднує елементи систем письма C.J.K. (китайської, японської та корейської) із «західними» (латинськими) алфавітами. Доступний у одному накресленні.

#дизайн_ресурси #шрифти #безкоштовні
______

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

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

Створення UX для інтернет-магазину, платформи чи іншого складного інтерфейсу може стати великим головним болем, якщо ви не вмієте проєктувати пошук.

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

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

та інші.

Чи були у вас проєкти зі складним просунутим пошуком? З якими проблемами ви тоді зіткнулися? Діліться у коментарях 👇

#навчання #статті
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Продовжуємо рубрику "працюємо над проєктом разом з Лєрою" 🙌

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

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

Є бажання зробити все like a pro. Щоб один компонент на всі варіації і швидкі налаштування пропертіс, як на гіфці (яка, доречі, звідси).

Оцим сьогодні і займаюсь. І знайшла епічне відео, яке показує як то все зробити, не могла не поділитися з вами. Чувак показав цю магію буквально за 15 хвилин.

Але то ще не все, бо я досі з Variables не розібралася.. 🤯 Схоже, час прийшов.

#навчання #відео #figma
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Занудьгували, обираючи кольори?
Маю для вас класний ресурс.

UI Colors — генератор, що дозволяє з створювати та редагувати кольорову палітру. 🌈

Окрім цього, покаже як виглядатиме обраний відтінок на банері та у різних стилях кнопок (solid, оutline, gradient) та їх станах (default, hover, active, disabled).

Користуєтесь такими тулзами? Чи робите палітру самі, власноруч?

#дизайн_ресурси #безкоштовні
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Сьогодні неділя, а значить, час для дизайн-дайджесту! Найцікавіші новини цього тижня:

1. Естонський аналог «Дії» за участю українських айтівців.
Наші IT-фахівці допомогли Естонії створити аналог українського застосунку «Дія» під назвою «mRiik». Зараз застосунок ще на стадії тестування через правові аспекти, але він вже має потенціал стати засобом для онлайн-голосування. Нагадаю, що на початку року аж 5 європейських країн виявило намір створити у себе аналоги нашої Дії 💙💛

2. Telegram для Apple Vision Pro.
На відео, яке опублікував Павло Дуров, показано, як програма виглядатиме на Apple Vision Pro в доповненій реальності. Повідомлення можна надсилати за допомогою диктування Siri або віртуальної клавіатури. Це, якщо чесно, вражає)

3. Новий застосунок Windows для Apple і Microsoft.
Програма надає доступ до операційної системи Windows з різних платформ, в тому числі iOS, iPadOS, macOS і веб-браузерів. Непогана спроба, Віндоус, подивимось що з цього вийде) Тим паче, що анонс повністю концептуальний і вони ще нічого не обіцяють.

4. Інструменти для редагування відео та фото на основі ШІ від Meta.
Цих помічників згодом можна буде використовувати для публікацій просто в Instagram або Facebook. Перший — Emu Video, перетворює текст у високоякісні відеоролики, тоді як Emu Edit дозволяє легко редагувати відео за допомогою текстових підказок, а ще виконувати його редагування відповідно до наданих інструкцій.

5. Bug Bounty від Monobank: мільйон гривень за пошук вразливостей додатку.
Банк вже відкрив свій код й запрошує всіх охочих знайти помилки у продукті. Після аналізу застосунку учасники мають подати організаторам звіт із деталями та висновками щодо вразливостей, які вдалося знайти. Хакатон триватиме від 17 листопада до 1 грудня.

6. Які зміни відбулись у свідомості українців від 2014 року й як вони вплинули на google-запити?
Юрій Копишинський, СЕО компанії Webpromo провів мінідослідження, в якому вияснилсь, що майже по всім запитам, рік від року, усе більшої популярності набирає тренд на українське. Найпрекраснішу новину зберегла на кінець)

Гарної неділі, друзі!

#дайджест #новини
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Шукаєте можливості для самостійного опанування UX?

Сайт Uxtools.co пропонує практичні завдання, які допомагають освоїти важливі навички з таких тем, як юзер інтервʼю, user journey map, конкурентний аналіз, персони, опитування та багато-багато інших.

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

P.s. На сайті можна також знайти чимало корисностей, наприклад, перейти за посиланням на YouTube з туторіалами або ж знайти велетенську кількість статтей. Кайф та й годі 😍

#дизайн_ресурси #безкоштовні   
__  
  
Підписуйся на Marus Design:       
Telegram | YouTube | Instagram

А що, якщо я скажу, що є ціла бібліотека з безкоштовними книгами про UI/UX та бізнес процеси? 🤯 Ще й з короткими описами вмісту та посиланнями на завантаження?

Це все про Eleken.books — книгосховище української дизайн-агенції, із рядом книг, відібраних спеціально для тих, хто цікавиться користувацьким досвідом, дизайном та ефективною роботою у команді.

До речі, до якого типу людей належите ви: тих, хто читає книги виключно у онлайн-форматі чи тих, хто не може встояти перед спокусою придбати паперову? 📚

#дизайн_ресурси #безкоштовні

__  
  
Підписуйся на Marus Design:       
Telegram | YouTube | Instagram

Зовсім скоро на каналі вийде нове відео про топ-помилки дизайнерів-початківців (а у вас є можливість подивитись його за посиланням ще до премʼєри 🔥). І в додаток до нього залишаю декілька статей, які допоможуть глибше розібратись в деяких болючіх для новачків темах:

Теорія близькості:

🟣 Про теорію близькості
🟣 Правило внутрішнього та зовнішнього
🟣 Психологія в дизайні інтерфейсів: 20 законів UX


Типографія і тексти:

🟣 Інтро до ієрархії в типографії
🟣 Більше про верстку текстів
🟣 Контраст в UI дизайні (не тільки про тексти)


Іконки:
🟣 Ікони в веб-дизайні
🟣 Іконки як частина UX

#статті
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Світ дизайну живе у своєму невпинному ритмі, тож прийшов час ознайомитись із найцікавішими новинами тижня:

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

2. Проєкт Grids від Obys Agency отримав Red Dot Best of the Best.
Інтерактивний гайд Grids ілюструє чотири типи сіток, які активно використовує команда агенції: Columns, Van De Graaf, Rectangular та Others.

3. WhatsApp впроваджує можливість авторизації через електронну пошту.
Таке нововведення дозволяє користувачам зручно увійти на нових пристроях поза зоною оператора чи без отримання SMS.

4. MacPaw разом зі студією АльфаБраво випустили колекцію українських символів до першої річниці шрифту Fixel.
Символи об'єднують елементи козацької геральдики та народного мистецтва. Шрифт Fixel отримав ще два важливі оновлення: додано стиль курсиву та розширену кирилицю.

5. Укрпошта оголосила конкурс на нову марку до Дня Гідності та Свободи.
Головна умова — створення ескізу для нової поштової марки, що символізуватиме ці важливі для українців події. Учасників запрошують надсилати до п'яти ескізів до 21 грудня.

#дайджест #новини
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Пройшло багато часу з моменту, як ми оновлювали колекцію іконок. За цей час з'явилось чимало нових ресурсів, тож зберігайте найкращі 🔥

1. Ripple Icon Library — повністю редагований набір іконок у трьох стилях (лінійні, двоколірні, із заливкою), а також окрема сторінка із лого соціальних мереж.

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

3. Phosphor Icons — сет з дуже гарною організацією: 6 вагових коефіцієнтів кожної іконки складені як варіанти, а в найменування включені в опис компонента, для легкого пошуку.

#дизайн_ресурси #іконки #безкоштовні

__  
  
Підписуйся на Marus Design:       
Telegram | YouTube | Instagram

Я розповідала, що зараз працюю з британцями?

Вчора лід дизайнер дивився мою роботу та пропонував покращення. Без кінця казав, що це super cool, обережно накидуючи варіантів як ще можна зробити. Але постійно повторював оце super cool, really great job!

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

А коли я в моїй першій студії вперше показала свою роботу фронтендеру, він сказав “Слухай, ну це ж лайно”, і ні про які вибачення і не йшлося - така от різниця ментальностей 😂

Платформа для вивчення UX-дизайну 👇🔥

Uxcel — знахідка для тих, хто хоче вивчати дизайн користувацького досвіду в динамічному форматі, адже сайт має безліч функцій, таких як:

🟣 Інтерактивні курси, що включають завдання з прототипування, користувацького дослідження та багато-багато інших 🔥

🟣 Гейміфікація із балами та винагородами, щоб зробити засвоєння нової інформації веселим та захопливим 🎮

🟣 Дизайнерські завдання, що допоможуть відточити теорію на практиці 📚

Це таке собі Duolingo, але призначене виключно для UX-дизайну, що дозволяє прокачувати знання у оптимальному для себе темпі.

#дизайн_ресурси #безкоштовні
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

Неділя! Тиждень був насиченим на новини:

🟣 1. Анонс гри про Голодомор від Steam.
Українські розробники представили трейлер нової гри «Голодний Шлях», присвяченої 90-річчю Голодомору. Гра демонструє страшну реальність трагедії у в Україні 1932-1933 років очима 10-річної героїні. У русні вже знатно підгорає від цього проєкту, що не може не тішити 😏

🟣 2. Проєкт для моніторингу геноцидної риторики.
Український Інститут спільно з креативною агенцією Bickerstaff.932 створили Genocide Speech Monitor — інструмент, що дозволяє оцінювати рівень геноцидної риторики у висловлюваннях лідерів різних країн. Також планується розширення функціоналу для можливості аналізу геноцидної риторики штучним інтелектом у реальному часі.

🟣 3. «Be Brave Like Ukraine» отримали три золоті та три срібні нагороди на Effie Awards.
Синьо-жовтими барвами красуються банери у понад 140 містах світу: у супермаркетах, метро, автобусах, навіть на Times Square. Цей проєкт дозволив понад двом мільярдам людей з різних куточків світу дізнатися про Україну та надзвичайно сміливих українців 💙💛

🟣 4. Генеральні прокурори 33 штатів вважають, що Meta порушила конфіденційність дітей до 13 років.
Хоча Meta вимкнула деякі з цих облікових записів, прокурори заявляють, що компанія порушила закони про захист прав споживачів і Правило захисту конфіденційності дітей в Інтернеті (COPPA), яке забороняє збирати особисту інформацію дітей до 13 років без згоди батьків 🤨

🟣 5. Команда Monobank працює над Expirenza — новим застосунком, де можна буде оплачувати рахунок у закладі або ж зберігати список улюблених страв. Крім цього, у додаток планують додати функцію «частування», щоб користувачі могли пригощати своїх друзів. Дуже цікаво побачити, що з цього вийде 🔥

🟣 6. Англомовні версії документів в Дії
Деякі документи, як от закордонний паспорт, техпаспорт і посвідчення водія, тепер можна переглянути англійською. А Посвідення та техпаспорт ще й мають міжнародне кодування, що використовується у ЄС, США та Канаді. Давно вже пора було 😫

🟣 7. Кібербезпека по мультфільмах: Moonlock від MacPaw представили освітні короткометражки.
Вони обіцяють навчити вас кібербезпеці весело і легко. Дуже раджу до перегляду, сьогодні це актуально для всх 👀

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

🟣 9. Розіграш унікальної скульптури «Україна-мати» з LEGO, виготовлену Максимом Мітякіним.
Це частина проєкту LEGOwithUKRAINE, де талановиті креатори перетворюють пам’ятки України у LEGO. Ексклюзивний конструктор подарують рандомній людині, яка здійснить благодійний внесок від 100 грн. Прийом заявок з донатами вже завершився, втім донати ніколи не бувають пізніми 🙃

🟣 10. Інтерактивна карта від ЛУН Місто.
Мапа дозволяє киянам перевірити готовність інтернет-провайдерів до можливих відключень електроенергії та подати заявку на підключення. Поки карта доступна лише для мешканців Києва, але планується розширення проєкту на інші міста.

#дайджест #новини
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram

А також вітаю всіх із Всесвітнім днем компьютерної графіки! 🥳🎨

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

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

Саме цього бажаю і вам 💜

Ваша Лєра із Marus Design:
Telegram | YouTube | Instagram

Як пришвидшити роботу з допомогою компонентів?

Найпродуктивнішими є ті компоненти, які адаптовані до різних випадків використання — уявімо, у вас є 3 типи кнопок, кожен з яких може бути з іконкою зліва, справа, ще й кожен в усіх станах. Чи варто створювати варіант компонента для кожного з них? Не так давно можна було б сказати «так», але зараз є набагато продуктивніші способи створення компонентів, коли ми маємо меншу кількість варіантів (що пришвидшує внесення змін), але вони при цьому можуть бути максимально функціональними.

Я вже торкалася цієї теми ось тут, коли розказувала про свій ресерч щодо компонентів у дизайн-системі, а сьогодні ділюся з вами ще однією статтею з прикладом (неймовірно!) таблиці. Таблиці в компоненті! 😱 Як налаштувати її, зробити максимальною можливість кастомізації, та чи такий вже страшний той момент кліку на «Detach component»? Читаємо!

#статті
__

Підписуйся на Marus Design:
Telegram | YouTube | Instagram