Нещодавно натрапила на статтю про редизайн банківського застосунку Revolut.

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

Проте, це ще й можливість застосувати критичне мислення. На багато рішень, які приймає автор,моя реакція була "чувааак, чому??" 😫 До прикладу, чому іконки банківського застосунку виглядають, ніби заблукали й випадково потрапили сюди з якогось розважального інтерфейсу? Для порівняння, Моно не виглядає дуже формальним та серйозним, але це зроблено більш елегантними способами, анід плейфул іконки.

А які у вас є зауваження щодо цього редизайну?
Діліться своїми думками у коментарях 👇

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

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

Ловіть добірку з референсами для мобільних застосунків — помітила, що у нас тут таких майже не було 😱

1. Flowstep.
Бібліотека, яка надає доступ до скріншотів найкращих продуктів, таких як Airbnb, Klarna, Spotify та інші. У полі пошуку є навігація за категоріями, а також можливість сказати штучному інтелекту, що ви шукаєте, і він підбере для вас екрани.

2. Аppshots.
Його перевага полягає в тому, що на сторінці кожного додатка є окреме сортування «Flows», де ви можете знайти приклади екранів (пошуку, сповіщення, налаштування тощо) обраного вами застосунку. Проте, для перегляду флоу доведеться оформити підписку на преміум (12$/місяць).

3. Scrnshts.
Каталог, що вміщує скріншоти застосунку з App Store з посиланням на сам додаток. Сортування також за категоріями.

Тицькайте 🔥, якщо зберегли.

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

__

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

Тиждень виявився насиченим цікавими подіями 🤩

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

2. Презентація Weblium AІ.
Українські розробники представили й запустили його тестову версію з інтегрованим Chat GPT для текстів і DALL-E для фото. Тепер можна створити сайт за назвою бізнесу та його коротким описом.

3. Україна підписала міжнародну декларацію про безпеку використання ШІ на AI Safety Summit у Британії.
Тепер країни співпрацюватимуть для розробки заходів, спрямованих на запобігання можливим негативним наслідкам ШІ.

У той же час, акторка Скарлетт Йоганссон подала до суду на розробника програми з ШІ через використання її голосу без згоди в рекламному ролику. І це при тому, що уряд США ще давніше підписав декларацію. Цікавий збіг, правда? 😆

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

5. CASES надав безкоштовний доступ до запису дизайн-конференції «Дизаріум».
Включено понад 10 доповідей від українських та іноземних фахівців з обговоренням різних аспектів дизайну.

6. Фантазії про можливості Figma чи натяк на нові функції?
Продуктовий лідер Figma заінтригував цікавим дописом «А що, якби…», в якому роздумував над новими можливостями інструменту, серед яких пов'язані активи Adobe та Figma, багатокористувацький режим в Adobe, можливість безперешкодної співраці Firefly з проєктування у Figma та інші. Тримаємо схрещені пальчики на круті нововведення 🔥

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

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

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