Трохи вище обіцяла вам корисні посилання для роботи з градієнтами. Виконую. 🫡😄

🟠 Webgradients — чималенька колекція лінійних градієнтів. Можна завантажити PNG формат градієнта або ж просто скопіювати CSS-код й відтворити його у себе в файлі. При натиску на кружечок з кольором, він відкриється на весь екран.

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

🟠 Colors.dopely — раніше згадувала про цей ресурс (тицьни для переходу), але в контексті градієнтів він заслуговує на більш детальний огляд. Обравши потрібне поєднання кольорів й перейшовши на сторінку редагування, ви з легкістю можете змінити тип градієнту (лінійний, радіальний), видозмінити Hue, Saturation, Lightness, а також кут нахилу й співвідношення. Для завантаження доступні 9 форматів (PNG, SVG, JPG та ін.).

#інструменти #колір

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

✅ Ловіть ґрунтовну статтю «16 маленьких правил дизайну інтерфейсу користувача, які мають великий вплив». У ній дизайнер з майже двадцятирічним стажем ділиться порадами побудови правильної візуальної ієрархії (UI складової). Усі свої рішення він тлумачить крок за кроком, демонструючи на зображеннях з прикладами.

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

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

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

✴ Relume Library — бібліотека, що налічує понад 1000 елементів. Усі вони чітко й зрозуміло розподілені по тематиці (components, page templates, relume library lite), що допомагає краще орієнтуватись у файлі.

✴ White Theme — ще один набір з хорошим структуруванням та широким спектром компонентів, які можна використовувати для створення будь-яких типів вебдодатків.

✴ Ant Design — містить не лише компоненти різних категорій, а й окремі сторінки з іконками та кольорами. Також додано короткі вказівки "Usage", де описано коли, де та як використовувати той чи інших елемент.

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

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

Ці інструменти допоможуть вдихнути життя у ваші дизайни:

Aninix ➖ це плагін, який найкраще підходить для розробки дизайну руху кнопки, появи екрану, переходів тощо. Інтерфейс зручний та зрозумілий, тому розібратись можна за лічені хвилини.

Davv ➖ плагін з реалістичними анімаціями з рухами, які базуються на фізичних властивостях об'єктів, що анімуються. Така собі гравітація, яка легко редагується (сила тяжіння, тертя, пружність та багато інших). Є безкоштовний 7-денний період й місячна(8$) або річна підписка(39$).

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

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

Сьогодні підкину вам декілька цікавих гарнітур у скарбничку. 😉
 
➰ Miedinger Sans Serif Font ➖ шрифтова сім'я гротесків від одного з дизайнерів відомої всім Гельветики (Helvetica). Шрифт поєднює в собі елегантність та сучасний стиль. До безкоштовного завантаження доступні чотири накреслення.  
 
➰ Heming  ➖ цікавий гротеск без засічок із тонкими контрастними деталями, які підкреслюють його особливість. Шрифт безкоштовний для комерційного застосування й наявний у одному накресленні. 
 
➰ Mersad ➖ шрифт без засічок, що характеризується геометричними формами, яскравими контурами та маленькими стилістичними деталями. Безкоштовно можна завантажити 9 накреслень. 
 
#дизайн_ресурси #шрифти #безкоштовні

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

Сподобалось — усе, що сподобалось абсолютно рандомній людині з Інтернету.

Новий тиждень ➖ нова добірка цікавих плагінів.
Усі сьогоднішні інструменти пов'язані зі штучним інтелектом. 🔥

✴ GPT Mate ➖ створить текстовий контент на будь-яку вказану вами тему. Має широкий діапазон швидких налаштувань (тон тексту, стиль, категорію, ключові слова тощо), тому ви можете легко створювати високоякісний вміст, який ідеально відповідає вашому баченню.

✴ GPT Stylist ➖ надійний помічник у доборі кольорів. Обраєте кількість кольорів, яку ви хочете застосувати у своєму проєкті, коротко описуєте тематику продукту й вуаля — перед вами готові коди палітри барв.

✴ Cube GPT ➖ асистент, який може з легкістю перекласти, скоротити чи продовжити текст. Плагін вміє створювати текстовий контент для заголовків, описів, кнопок тощо. Також може генерувати дані для заповнення полів, щоб перевірити, як дизайн працює з реальними даними.

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

Продовжуємо збирати базу якісних джерел з референсами (першу добірку можна знайти тут).
Сьогодні поділюсь ось такими:

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

✅ Landingfolio — ще одне чудове джерело для натхнення. До кожного прикладу додано зображення, опис функцій, використані кольори тощо. Є можливість фільтрування за галузями, типом продукту та кольором.

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

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

Вивчайте дизайн та програмування за щомісячною передплатою 🧑‍🎨

Креативна Практика — це онлайн-платформа для освіти та кар'єри в креативних індустріях. Вивчайте основи дизайну, графічного дизайну, вебдизайну, UX/UI, фронтенду, рисунку на графічному планшеті та роботу з Figma, Photoshop, After Effects, Illustrator, InDesign, Cinema 4D, Webflow, й навіть опановуйте формування власного портфоліо!

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

Наразі вартість передплати становить 390 грн на місяць, проте з червня вона збільшиться до 550 грн. Не впустіть можливість активувати передплату за поточною ціною, яка зафіксується для вас і надалі!

Якісних мокапів багато не буває, тому пропоную доповнити нашу добірку сайтів із ними.

❇ Themockup ➖ якщо ви давно шукали мінімалістичні та стильні мокапи, то це саме воно. Більшість моделей надається у форматі PSD (файл формату Adobe Photoshop), Sketch (файл формату Sketch App).

❇ Аnthonyboyd ➖ добірка прототипів, створена графічним дизайнером та фотографом Антоні Бойдом. Окрім якісних мокапів, на сайті є особистий блог з корисними рекомендаціями, наприклад "How to use my mockups" та інші.

❇ Mr.Mockup ➖ ще один ресурс з якісними мокапами, які можна відкрити й редагувати одразу в Figma. Просто обираєте потрібну модель, переходите до файлу з ним й адаптовуєте під своє зображення.

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

Чи було б вам цікаво попрацювати з найпопулярнішим брендом у світі? Думаю, жоден не відмовився б від можливості перейняти досвід від центру інновацій та креативності.

📚 Залишаю вам статтю Андреї Паченко "What I Learned as a Product Designer at Apple". У 2021 році вона отримала роботу в Apple й тепер ділиться інсайтами, які сформувла за час співпраці із знаменитою компанією. Авторка пише про важливість правильної комунікації та вміння розповідати історії, довіру чуттю при прийнятті рішень без тестування користувачами, вміння виходити за рамки проблеми тощо.

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

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

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

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

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

➰ REDACTION — шрифт з особливою естетикою, що створює враження ручного письма. Поєднує плавні криві та витончені заокуглення, що додають елегантності та водночас своєрідної строгості. Безкоштовний для особистого використання.

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

Рівновага між роботою та відпочинком є запорукою щастя та ментального здоров'я. Чому б не поєднати приємне з корисним, переглянувши на вихідних цікаві фільми, пов'язані зі сферою дизайну? Ловіть мої рекомендації. 😉

🎬 «Гельветика (2007)». Документальна стрічка з дослідженням впливу гарнітур на сприйняття інформації. Фільм розповідає історію створення однойменного шрифту й враження видатних дизайнерів від його використання. Також підкреслено важливість правильного вибору шрифту в дизайні.

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

🎬 «Соціальна дилема (2020)». Документальний фільм, в якому представлені інтер'ю з людьми, що працюють в провідних технологічних компаніях (Facebook, Google, Twitter, Instagram та Apple). Є й сцена з акторами, де розкрито проблему надмірної залежності від соціальних мереж.

#культура_дизайну #кінофільми

Портфоліо є невід'ємним інстурментом для пошуку роботи, оскільки демонструє вміння та навички дизайнера. Однак в середньому на перегляд одного кандидата рекрутери витрачають всього 30 секунд. Виникає запитання: як оформити портфоліо так, щоб привернути увагу до своїх навичок за такий короткий проміжок часу?

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

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

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

Давно у нас тут не було ілюстрацій. Нумо ознайомлюватись з новими джерелами, де ви зможете знайти круті візуальні елементи. Минулий допис можна знайти тут.

🟣 Nikuu ➖ набір 3D ілюстрацій у PNG форматі. Пакет знаходиться у файлі Figma, що значно спрощує їхнє застосування. Ілюстрації поділені на дві категорії: люди та об'єкти. Безкоштовні для комерційного використання.

🟣 Getillustrations ➖ сайт з чималим вибором ілюстрацій на найрізноманітнішу тематику (бізнес, медицина, природа, соціальні мережі тощо). Усі вони у форматі SVG, а деякі навіть анімовані. Більшість безкоштовних пакетів можна використовувати у комерційних проєктах.

🟣 Saly ➖ ще один файл Figma з набором 3D ілюстрацій. Тут можна знайти графічні елементи людей, тварин та об'єктів. Усі вони у форматі PNG й абсолютно безкоштовні для будь-якого використання.

#дизайн_ресурси #ілюстрації

Нову добірку плагінів замовляли? 🔥

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

🔵 Mapsicle ➖ дозволяє вбудовувати мапи у ваш дизайн. Додатково можна налаштувати параметри мапи, наприклад, масштаб, тип, стиль тощо.
Більше не потрібно робити жодних скріншотів, бо усе під руками так ще й з можливістю редагування.

🟣 Appearance ➖ плагін, який допомагає керувати стилями. З його допомогою можна легко застосувати світлу/темну тему одним натиском. Значно підвищує ефективність роботи, оскільки вносить зміни за лічені секунди й дозволяє зберігати стилі у бібліотеці.

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

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

☑ Runway 〰 вміє генерувати відео- та фотоматеріали з текстового опису, розширювати поле зображення, змінювати стилі зображень, видаляти з відео будь-які речі та фон, оживляти зображення тощо. Безкоштовних тариф включає 125 кредитів, стандартний (12$ на місяць) — 625 кредитів, Pro (28$ на місяць) — 2250 кредитів.

☑ Uizard 〰 цей ШІ переведе намальовані вручну зразки інтерфейсу в цифрове зображення й автоматично промалює дизайн. З його допомогою можна легко створювати як мобільні додатки, так і вебсайти.

☑ Midjourney 〰 створює цифрові зображення з описових текстів. Пізніше їх можна використовувати у комерційних проєктах (за умови підписки на Basic, Standard або Pro версію.) Безоплатна демо-версія передбачає генерацію 25-ти зображень.

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

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

Пропоную ознайомитись зі статтею «10 важливих законів UX для чудового дизайну продукту», щоб покращити ефектівність взаємодії користувачів з вашим продуктом. Автор ставить перед собою мету легко та зрозуміло познайомити людей із законами UX дизайну, що, зі свого боку, допоможе дизайнерам створювати інтерфейси, які відповідають потребам та очікуванням людей та покращують загальний досвід користувача.

До кожного закону наведено приклади використання цих принципів великими компаніями, тому інформація дуже доспупна й легка для сприймання. 🙌

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

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

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

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

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

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

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