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

А сьогодні розглянемо плагіни, які допоможуть покращити accessibility ваших продуктів:

Able ➖ аналізує елементи дизайну та надає рекомендаії щодо виправлення проблем доступності. Зосереджується на контрасті кольорів та розмірі тексту. Режим прев'ю допоможе побачити загальний вигляд елементів після корективів.

Stark A. ➖ набір інструментів, що включає перевірку контрастності, орієнтири й порядкок фокусування, містить вбудований генератор зору, що допоможе скласти уявлення про те, як бачать люди з вадами зору. Версія Pro ($10/м.) відкриває ще більше різноманітних можливостей.

Text Resizer ➖️ оновлює ваші дизайни відповідно до базового розміру шрифту, забезпечуючи відповідність вебстандартам. Стане в нагоді при розробці програми для iOS, бо допомагає вашим дизайнам адаптуватися до системної здатності збільшувати або зменшувати розмір шрифту.

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

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

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

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

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

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

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

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

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

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

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

Залишаю вам нову добірочку безкоштовних гарнітур для комерційного використання. ✨😌

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привіт! 😌

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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