Marus Design UX/UI
1.84K subscribers
315 photos
32 videos
348 links
Нотатки дизайнерки інтерфейсів.

🔺️ Канал на YouTube:
https://youtube.com/@Valeriamarus

🔺️ Мій Instagram:
https://instagram.com/valeria_marus

Щодо співпраці:
@valeriamarus
Download Telegram
В Інстаграмі Креативної практики дуже зацікавив пост про логотипи міст. Більш за все полюбляю логотипи Львова та, звичайно, Дніпра 💙💛

Взагалі, українці знаються на айдентиці. Памʼятаю, як подумала про це в Одеському аеропорту, де навіть стелі над паркінгом нагадували формами морські хвилі та елементи логотипу самого аеропорту.
👍8
А хто у мене тут з міст, логотипи яких представлені у пості?)
Anonymous Poll
34%
Дніпро
34%
Львів
14%
Запоріжжя
4%
Ужгород
6%
Вінниця
3%
Миколаїв
5%
Дрогобич
Тенденції дизайну щороку невпинно змінюються. Наше з вами завдання полягає у вчасному ознайомленні в усіма нововведеннями, які пропонує digital світ, і сьогодні пропоную більш детально зупинитися саме на мобільних застосунках.

«12 тенденцій дизайну UI/UX для мобільних застосунків 2023» — цікава стаття, яка розглядає актуальні підходи до мобільного дизайну. Тут розглянуті як візуальні стилі, так і дуже актуальні та сучасні рішення, як, наприклад, використання штучного інтелекту та доповненої реальності.

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

#навчання #статті
🔥12
Порядок у файлах — порядок у думках, чи не так? 😄
Саме тому спонукаю вас зберігати порядок у своїх дизайн-файлах для кращої ефективності роботи.

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

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

🟣 Thumbnail Kit — простий метод створити ескізи обладинок для проєктів. Він надає можливість додати статус проєкту, його назву, опис, а також аватари співавторів.

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

#інструменти #плагіни_figma
👍10🔥4😍1
Залишаю вам нову добірочку безкоштовних гарнітур для комерційного використання. ✨😌

SORA 〰️ беззасічний шрифт з цікавою геометричною конструкцією із заокругленими кутиками, що дає йому дружній вигляд. Цікаво, що в перекладі з японської назва шрифта означає «небо».

TASA ORBITER 〰️ універсальний і по-своєму цікавий шрифт без засічок. Це поєднання нейтральності, моденізму та елегантності, що забезпечить чудову зчитуваність.

EPILOGUE 〰️ шрифт із плавними заокругленими геометричними формами. Характеризується простими лініями з характерими акцентами, які виділяють його з-поміж інших гарнітур.

#дизайн_ресурси #шрифти #безкоштовні
🔥17
Співбесіда є доволі стресовим етапом, особливо, коли йдеться про першу роботу. Якщо ви у пошуках і це питання для вас актуальне — цей пост для вас 😉

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

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

Приємних та легких всім співбесід! 🙌

#навчання #статті
👍10🔥2
Мабуть, у всіх була ситуація, коли переглядаєш мільйон сторінок, перериваєш усі можливі сайти, а так і не можеш знайти хороший референс для роботи. 🤯

Саме тому нижче додаю три нові джерела з сучасними сайтами для натхнення.✨

Оgimage.gallery ➖ добірки з реальними сайтами, на які можна з легкістю перейти та переглянти власноруч. Доволі зручна навігація за тематикою допомагає краще орієнтуватися. Цікаво, що на сайті присутня окрема категорія "Animated".😉

Refero ➖ приклади дизайну відомих продуктів, таких як Shopify, Vimeo, InVision тощо. Тут ви можете переглядати окремі сторінки інтерфейсів, а також переходити на категорії "UX Patterns" та "UI Elements".

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

#дизайн_ресурси #безкоштовні #референси
🔥27👍5
Привіт! 😌

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

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

Проте, досвідчені колеги, не поспішайте пролистувати, ви обовʼязково знайдете тут цікаві думки і для себе. А ще стаття заряджена на натхнення - самі перевірте 😅✨

#навчання #статті
🔥24👍3
Корисні плагіни для Google Chrome — це завжди приємно. А корисні розширення для кращої та зручнішої роботи — вдвічі приємніше. 😄
Тому сьогодні згадаємо про них.
(минулу добірку можна знайти тут).

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

Dimensions. Вимірює розміри від вказівника миші по осях Х та Y за допомогою простої комбінації клавіш (ALT + D.). Якщо ви бажаєте виміряти відстані між елементами на вебсайті, то він ідеально вам підходить.

Fonts Ninja. Незмінний помічник для визначення шрифту на сайті. Також він дуже простий у використанні, потрібно просто навести на будь-який текст, щоб отримати його назву та додаткові характеристики.

#інструменти #плагіни_chrome
🔥18👍2
Якщо вам набридло шукати якісні зображення для проєктів на Unsplash, то маю для вас декілька цікавих сайтів із безкоштовними стоковими фото.🙌

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

🟣 Pixabay — понад 4,1 мільйони високоякісних зображень, відео та навіть музики. Можна знайти не лише фотоматеріали, а й ілюстрації (JPG, SVG, PNG форматах). Зручний пошук та швидке завантаження у потрібному розмірі.

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

#дизайн_ресурси #фото #відео
🔥20👍2
Мало не щодня у світі інтерфейсного дизайну з'являються цікаві тенденції, які здатні надихнути на нові ідеї або, можливо, навіть на власний дріббл шот. 😌

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

Дуже раджу продивитись статтю, якщо шукаєте натхнення для візуальних рішень - вона точно допоможе створити свій власний, унікальний дизайн, який буде виходити за межі стандартних ідей. 🚀

Бажаю приємного читання! 😉

#референси #статті
🔥15💯1
Хочу поділитись з вами чудовими наборами іконок для найрізноманітніших потреб. 😉

✅ Iconsax ➖ набір іконок у одній стилістиці. Можна відфільтрувати їх за стилем: лінійні, контурні, жирні, двоколірні тощо.

✅ Remixicon ➖ усі піктограми у форматі SVG, сайт охоплює велику кількість категорій, таких як комунікація, фінанси, здоров'я та медицина та інші. Пошук здійснюється за ключовими словами та категоріями.

✅ Сoolicons ➖ ретельно розроблений сет базових іконок для дизайну інтерфейсів, зосереджений на простоті та послідовності.

#дизайн_ресурси #іконки #безкоштовні
🔥10👍7
Зберігайте три корисних інструменти, які допоможуть налаштувати палітру для ваших інтерфейсів.

🟣 Coolors ➖ вміє генерувати палітру кольорів з фото; демонструє особливості сприйняття барв людьми з вадами зору; дає можливість відредагувати кольори у запропонованій палітрі (при цьому кожний змінений колір буде автоматично підганяти інші кольори для підтримки гармонії).

🟣 MyColor.space ➖ інструмент, що вміє створювати власні кольорові палітри з нуля або ж згенерує добірку до основго кольору, який ви запропонуєте.

🟣 Color Hunt ➖ платформа, що вміщує тисячі комбінацій кольорів. Кожна добірка складається із п'яти відтінків, які готові до використання у ваших концептах. Сайт має зручний інтерфейс з можливістю пошуку палітр за ключовими словами або за популярними темами.

#інструменти #колір
🔥9😍4
Ділюсь з вами статтею, призначеною аспекту контрасту — найефективнішому способу привернути увагу та запам'ятатись користувачеві.

📚 «Сlean UI Guide: 9 контрастних порад і прикладів» — матеріал, що містить інформацію про критичні принципи використання контрастів, різновиди їхнього впровадження в дизайні інтерфейсу користувача, а також надає 9 порад та прикладів їхнього використання на реальних роботах. Розглянуто розміри та якорі в композиції, контраст кольору та фону, використання творчих елементів, принципи руху, текстур, форм, типографії та кнопки.

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

Приємного читання та творчого натхнення! 😉

#навчання #статті
🔥6👍4
Друзі, продовжуємо вдосконалювати знання про доступність, адже створення доступних продуктів — це не лише етично вірно, а й важливо для розширення вашої аудиторії.

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

Охоплено такі теми як:
- використання жестів
- звуковий переклад вмісту
- особливості навігації
- відображення тексту
- використання кольору
та інші.

Бажаю успіхів в опануванні інформації! 😉

#інструменти #доступність
🔥6
Сьогодні у нас за розкладом три круті ресурсами з безкоштовними мокапами. 🔥

Mockupcloud ➖ джерело якісних мокапів із різноманітною стилістикою: від мінімалістичних до креативних та грайливих. Усі з хорошою роздільною здатністю, яка забезпечує чіткі деталі. Більшість з них доступні до завантаження у форматі PSD.

Vexus digital ➖ лаконічна колекція мокапів у одній стилістиці. Створені за допомогою Spine 3D, тому створивши там обліковий запис, ви матимете змогу налаштувати усі параметри девайсу.

Shots so ➖ цікавий сайт, що дозволяє вставляти зображення у потрібну модель й редагувати параметри пристрою одразу на сайті. Готове зображення можна завантажити у форматі PNG або JPG.

#дизайн_ресурси #мокапи #безкоштовні
👍12🔥7
Сьогодні по традиції залишаю вам безкоштовні для комерційного використання шрифти. ✨

➰ Nohemi — шрифт без засічок з тонким характером та нейтральним дизайном. Такі характеристики дозволяють застосовувати його до різноманітних проєктів. До завантаження доступна велика кількість накреслень.

➰ Fungis — гротеск із неймовірно цікавими кривими та формами чаш у заокреглених літерах. Доступний до завантаження у трьох накресленнях: regular, bold, heavy.

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

#дизайн_ресурси #шрифти #безкоштовні
🔥11👍2
#мемасики   
__  
  
Підписуйся на Marus Design:       
Telegram | YouTube | Instagram
🤣44👍1
Підготувала для вас плагіни, які допоможуть оптимізувати роботу із текстом. 😉

🔶 SPELLL ➖ перевіряє ваші тексти на наявінсть орфографічних помилок і дозволяє виправити їх одним клацанням миші. Працює подібно до Google Docs й має багато цікавих додаткових можливостей.

🔶 Content Master ➖ інструмент для ефективного управління вмістом. Замінює вибрані текстові шари реальними даниими, такими як ім’я, адреса електронної пошти, фізична адреса, назва компанії тощо.

🔶 Typescales ➖ визначає базовий розмір шрифту, а потім автоматично обчислює всі інші розміри, які відповідають обраній вами шкалі. Допомагає зберігати гармонію та консистентність між різними текстовими елементами.

#інструменти #плагіни_figma
👍10🔥3