Дизайнер повинен вміти все? Верстальник — це найзапекліший ворог дизайнера? Копіювання — найжахливіший гріх? 🤔

✅ Запрошую вас розглянути ці та інші найпоширеніші міфи про вебдизайн у свіженькому відео на каналі:
https://youtu.be/Ld-ucGH2NmY

Приємного перегляду! 😌

#нове_відео

Якщо ти досі витрачаєш багато часу на пошук іконок, то цей пост для тебе.👇

*⃣ Streamline Icons — плагін з добре промальованими комлпектами іконок. Цікавий бонус у вигляді ілюстрацій та емодзі.

*⃣ Iconify — також плагін з векторними значками. Справді великий вибір (понад 100 наборів, що містять понал 100 000 іконок). Єдиний мінус полягає в тому, що таки доведеться заморочитись, щоб дібрати комлект для свого проєкту з однаковою шириною, стилістикою і тд.

*⃣ Iconfinder — ресуср з іконкми в одній стилістиці. Просто обираєте потрібні й не переймаєтесь чи однакова ширина лінії у значів. Дуже зручне сортування у лівій колонці, яке зекономить чимало часу. Також наявні ілюстрації та стікери.

#дизайн_ресурси #іконки

Як зробити інтерфейс зручним обʼєктивно, а не покладатись просто на свою власну думку? Адже UX дизайнеру часом доводиться розробляти інтерфейс без залучення цільової авдиторії - тобто, без тестування безпосередньо на користувачах.

Залишаю вам посилання на великий гайд, в якому розміщені основні закони, правила, принципи й критерії юзабіліті.📚 Це те, що вам необхідно вивчити, щоб розробляти не просто гарні, а зручні юзер-френдлі інтерфейси та впевнено називати себе UI/UX дизайнером.

Щиро сподіваюсь, що вам вистачило наполегливості й ви прочитали усю статтю до кінця 💪

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

Привіт!

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

✅ Fontsinusе ➖ великий каталог типографіки, який зручно фільтрується за галуззю застосування шрифтів. Наприклад, обравши розділ "музика" ви побачите гарнітури, які застосовувались саме для цієї тематики.

✅ Fontsinthewild ➖ зручна галерея шрифтових пар. У головному меню є розділи: free fonts, google fonts, adobe fonts, тож можна знайти багато поєднань безкоштовних шрифтів та одразу перейти на сторінку завантаження.

✅ Myfonts ➖ величезний каталог, де можна знайти майже будь який шрифт. Також має функцію what the font, яка розпізнає шрифт по картинці й одразу дає посилання на його завантаження. Також пропонує схожі безкоштовні альтернативи платних шрифтів.

#дизайн_ресурси #шрифти

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

Саме тому ловіть ще кілька посилань, де можна знайти необхідні. 😉

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

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

🟣 Manypixels — близько 2500 ілюстрацій. Зручний фільтр з налаштуванням категорії та типу ілюстрації (контурна, одноколірна, двоколірна, ізометрична, лінійні). Скачування доступне у форматі SVG та PNG.

Також продублюю вам джерела, які згадувала у чаті:

🟣 Humaaans

🟣 Oblikstudio

🟣 Pixeltrue

🟣 Ui8

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

Чи задумувались ви про те, як виглядав перший сайт Apple, McDonald`s чи Netflix?🤔

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

Усі сайти впорядковані за десятиліттями, тематикою та стилями, тому обравши потрібний напрям, ви з легкістю почнете свою подорож у минуле.

Гортайте, ностальгуйте й розширюйте свій кругозір. 😉

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

Привіт! ✨

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

🟦 Zvin Serif. Автор Іван Цанко-Хлібович. Натхненний типографікою 1850 - 1960 років, цей шрифт складається з безлічі гострих кутів та засічок. Доступні п'ять накреслень.

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

🟦 Irpin Type — втілення українського авангарду. Олексій Поповцев відобразив цей мистецький напрям за допомогою цікавих геометричних форм. Тут також є велика кількість накреслень, безкоштовно можна завантажити Regular та Bold.

#дизайн_ресурси #шрифти

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

✴ Onepagelove — приклади односторінкових сайтів. Тут дуже зручна навігація з тематикою (finance, movie, restaurant). У розділі "UI" головного меню можна знайти окрему потрібну сторінку, тип контенту та блоки.

✴ Mobbin — це скріншоти популярних застосунків (iOS, Android, Web). Чудовий ресурс для вивчення елементів дизайну та їх функціональності, оскільки сайти та додатки цих компаній ми використовуємо мало не щодня.

✴ Muz.li — тут добірки не лише реальних цільових сторінок, а й wireframe, UI kits колекцій та навіть якісних мокапів, які доступні для завантаження у форматі SVG. Також у розділі "Muzli Search" є пошук за ключовими словами.

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

Давненько ми з вами не поповнювали скарбничку плагінів. Сьогодні усі вони про імітацію 3D. 👇🔥

☑ 3D Transformer ➖ перетворює будь-який кадр на 3D-макет. Легко налаштовуються параметри моделей (масштаб, перспектива, позиція, заокреглення кутів).

☑ 3D Wave ➖ робить візуальний ефект хвиль. Дуже багато параметрів редагування (зовнішній вигляд: форма, висота, щільність, яскравість, темрява; зсув: редагування по осях, масштаб; обертання по осях).

☑ Isometric ➖ створює ізометричні шари із звичайного прямокутного зображення без жодних налаштувань вручну. Потібно просто обрати потрібний шар, перспективу та кут.

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

Чат GPT зібрав навколо себе багато обговорень. Хтось вже подумки прощається із своєю роботою, а хтось взагалі впав у депресію через загрозу повстання машин над людством. 😅

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

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

P.S Також на моєму YouTube каналі є відео, де я розказую про те, як chatGPT допоможе дизайнерам інтерфейсів у роботі та як саме використовувати ШІ в роботі. 😉

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

Знаю як ви любите добірки зі шрифтами, тому сьогодні розповім ще про декілька. (Минулі добірки можнай знайти тут і тут). 😉

🔹Fixel. Автор MacPaw. Це гарнітура із двома стилями (MacPawFixel Text та MacPawFixel Display), які є поєднанням геометричних і гуманістичних гротесків. До безкоштовного завантаження досутпні 9 накреслень.

🔸Ermilov Кирила Ткачова. Гротескний шрифт із цікавими скосами у кутах літер. Під час його створення автор надихався роботами українського художника Василя Єрмілова.

🔹Namu — персональний шрифт для Національного художнього музею України, який був створений Дмитром Растовцевим. Усього в цій гарнітурі 9 варіацій й кожна з них відповідає певній епосі українського мистецтва. Останнє ж накреслення є сукупністю усіх цих епох.

🔸Arsenal. Автор Андрій Шевченко. Це гротеск, що повністю відповідає критеріям сучасного українського ділового стилю. У нього є чотири накреслення (Regular, Italic, Bold, Bold Italic). Також гарнітура здобула перемогу на консурсі «Український шрифт».

#дизайн_ресурси #шрифти

Доступність (Accessibility) — це забезпечення користувачів з обмеженими можливостями доступом до застосунків з максимально можливою легкістю та ефективністю.

У всьому світі переймаються про доступність взаємодії користувачів з інтерфейсом — дизайнер має враховувати потреби усіх своїх користувачів, тому цей аспект є надваждивим. У деяких країнах це питання навіть регулюється законодавством (США, Японія, країни ЄС). В свою чергу, правильний вибір кольорової схеми та контрасту є одним з елементів покращення доступності для людей з вадами зору.

Саме тому залишаю цікавий сайт, на якому можна детально ознайоимить з цими двома аспектами. На ньому ви знайдете інформацію про контраст, гостроту зору, сенсорні адаптації, явища появи кольору тощо.
Найцікавіше те, що до кожної теми виведені короткі підказки "How it affects UI design", які допомагають зрозуміти взаємозв'язок обраної теми безпосередньо з дизайном інтерфейсів. 🔥

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

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

Лови круту підказку для роботи з інтерфейсами. 🙌

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

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

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

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

▪️Design.facebook — це ресурси, які надає Facebook для дизайнерів. Тут нявна велика кількість моделей компʼютерів, планшетів, телефонів (є навіть мокап кнопкового Nokia 230 😆) та годинників. Коли ви натискаєте на потрібну модель, то вам автоматично завантажується варіант з тінню та без неї.

▪️Designstripe. Обравши потрібний прототип, ви можете з легкістю прямо на сайті вставити потрібну картинку й відедагувати її параметри (fit, fill, custom); зміні підлягають й кольори на фоні. Єдиний мінус, що більшість мокапів доступна лише з підпискою (20$ в місяць).

▪️Studio.morflax. Це джерело вирізняється доволі великою кількістю налаштувань. Зображення також можна вставити одразу на сайті у потрібну модель девайсу й змінити її колір, колір фону, оточення, ротацію та позицію, а у pro версії доступна ще й анімація. Готове зображення можна завантажити у форматі PNG або JPEG.

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

Ловіть сьогоднішню добірку корисних плагінів для Figma 🔥

✅ Noise & Texture — ресурс для додавання шуму та текстури. Безліч індивідуальних налаштувань для кожного виду, які допоможуть адаптувати елементи до потрібного стану (розмір, віньєтка, обертання, прозорість та багато-багато інших). Також є додаткова вкладка з нестандартини видами градієнтів, які також підлягають редагуванню.

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

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

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

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

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

Зовсім скоро залишу вам ще декілька корисних посилань, щоб полегшити та пришвидшити роботу з градієнтами. 😉

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