UXPUB 🇺🇦 Дизайн-спільнота: Anna

Безкоштовні та корисні сайти для дизайнерів #1 (копірайтинг)

Anna — Mon, 12 Feb 2024 19:29:32 +0000

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

Copy.ai - Підійде для короткого контенту.
Допоможе заощадити час та гроші, надаючи оригінальний високоякісний контент за лічені секунди. Крім того, ви можете зареєструватися за допомогою облікового запису Facebook і завантажити розширення Chrome для написання статей на основі штучного інтелекту. Цей інструмент для письма на основі штучного інтелекту проведе за вас мозковий штурм.

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

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

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

Writer - Для електронної комерції.
Кожній команді потрібен помічник із написання ШІ. Підробка статей зробила революцію у тому, як компанії думають про написання статей. Writer - ідеальний додаток для всіх ваших письменницьких потреб.

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

Чекаю на ваші вподобайки, та діліться сервісами в коментарях)

Психологія кольору у веб-дизайні: Створення дивовижного досвіду користувача через колірні схеми

Anna — Fri, 30 Jun 2023 23:01:20 +0000

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

1. Розуміння психології кольору:
Кольори мають здатність викликати емоції та асоціації у людей. Наприклад, теплі кольори, такі як червоний та помаранчевий, можуть викликати почуття енергії та пристрасті, тоді як холодні кольори, такі як синій та зелений, асоціюються зі спокоєм та гармонією. Веб-дизайнери повинні враховувати ці емоційні реакції при виборі палітри кольорів для своїх проектів.

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

3.Рекомендації щодо вибору колірних схем:

Червоний:
Приклад: Яскраво-червона кнопка "Купити зараз" на веб-сайті електроніки.
Аналіз: Червоний колір викликає почуття терміновості та важливості. Він може привернути увагу користувачів та спонукати їх до дії.
Доказ: Використання червоного кольору для акцентних елементів, може допомогти підвищити конверсію і привернути увагу користувачів.

Синій:
Приклад: Синя колірна схема для веб-сайту банку.
Аналіз: Синій колір асоціюється з довірою та надійністю. Він може створити відчуття безпеки та стабільності у користувачів.
Доказ: Використання синього кольору у веб-дизайні для фінансових чи технологічних компаній може допомогти зміцнити довіру користувачів та створити професійний образ.

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

Жовтий:
Приклад: Жовта колірна схема для веб-сайту дитячого садка.
Аналіз: Жовтий колір асоціюється з оптимізмом та радістю. Він може створити веселий та грайливий настрій у користувачів.
Доказ: Використання жовтого кольору у веб-дизайні, пов'язаному з дитячими послугами чи розвагами, допоможе привернути увагу дітей та їхніх батьків та створити позитивний настрій.

Помаранчевий:
Приклад: Помаранчевий акцент елементів на веб-сайті спортивного клубу.
Аналіз: Помаранчевий колір асоціюється з енергією, теплотою та дружелюбністю. Він може викликати почуття оптимізму та веселощів у користувачів.
Доказ: Використання помаранчевого кольору в дизайні може допомогти привернути увагу користувачів та створити відчуття позитивного настрою, особливо для веб-сайтів, пов'язаних із розвагами, подорожами чи спортом.

Фіолетовий:
Приклад: Фіолетовий колір для веб-сайту музичного фестивалю.
Аналіз: Фіолетовий колір асоціюється з розкішшю, таємницею та креативністю. Він може викликати відчуття інтриги та елегантності у користувачів.
Доказ: Використання фіолетового кольору може надати веб-сайту відчуття витонченості та привернути увагу користувачів, особливо для веб-сайтів, пов'язаних із модою, дизайном чи культурними подіями.

Жовто-зелений:
Приклад: Жовто-зелена колірна схема для веб-сайту органічних продуктів.
Аналіз: Жовто-зелений колір асоціюється з природою, здоров'ям та життєвою енергією. Він може викликати відчуття вітамінності та природності у користувачів.
Доказ: Використання жовто-зеленого кольору допоможе створити веб-сайт, який зв'язується з ідеєю здорового способу життя, природності та органічних продуктів.

Рожевий:
Приклад: Рожева колірна схема для веб-сайту, пов'язаного з мамами та дітьми.
Аналіз: Рожевий колір асоціюється з ніжністю, м'якістю та жіночністю. Він може викликати почуття затишку та довіри у користувачів.
Доказ: Використання рожевого кольору у веб-дизайні може допомогти створити веб-сайт, який залучатиме мам та дітей, асоціюватиметься з турботою та комфортом.

Сірий:
Приклад: Сірий колір для веб-сайту архітектурного бюро.
Аналіз: Сірий колір асоціюється зі стриманістю, стабільністю та професіоналізмом. Він може створити враження надійності та серйозності.
Доказ: Використання сірого кольору у веб-дизайні для бізнес-сайтів, пов'язаних з архітектурою чи юридичними послугами, допоможе створити діловий та професійний образ.

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

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

Вибираючи колірні схеми для веб-сайтів, дотримуйтесь деяких рекомендацій:

Дослідіть асоціації з квітами: Вивчіть психологію кольору та асоціації, які вони викликають у людей. Врахуйте значення та конотації кольорів та виберіть ті, які відповідають вашим цілям та повідомленню.
Адаптуйте кольори під цільову аудиторію: Враховуйте переваги та очікування вашої цільової аудиторії. Різні групи людей можуть сприймати кольори по-різному, тому важливо адаптувати схему кольору під їх переваги.
Створіть контраст та баланс: Використовуйте контрастні кольори, щоб виділити ключові елементи та забезпечити читабельність. Поєднуйте кольори таким чином, щоб вони гармонійно взаємодіяли між собою.
Тестуйте та оптимізуйте: Проводьте A/B-тестування різних колірних схем та аналізуйте їх вплив на користувальницьку активність та конверсію. Вносити коригування на основі отриманих результатів.

Важливо також згадати вплив кольорів на різні аспекти взаємодії користувачів з веб-сайтом:

1.Увага та привабливість:
Яскраві та контрастні кольори, такі як червоний або помаранчевий, можуть привертати увагу користувачів та допомагати виділити важливі елементи інтерфейсу, такі як кнопки "Купити" або "Зареєструватися".Використання незвичайних кольорових комбінацій, що запам'ятовуються, може допомогти вашому веб-сайту виділитися серед конкурентів і залучити більше відвідувачів.

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

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

4.Брендинг та ідентичність:
Кольори є важливим елементом брендингу та допомагають створити унікальну ідентичність вашого веб-сайту. Використовуйте кольори, що відповідають вашому логотипу та загальному стилю бренду, щоб посилити візуальне враження та впізнаваність вашого веб-сайту.

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

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

7.Експериментування та аналіз:
Не бійтеся експериментувати з різними колірними схемами та варіантами.Проводьте A/B-тестування, щоб порівняти різні варіанти кольору та аналізувати їх вплив на поведінку користувачів, конверсію та задоволеність.На основі отриманих результатів робіть коригування та оптимізуйте вашу колірну схему.

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

Безкоштовні шрифти з підтримкою української мови #2

Anna — Fri, 12 May 2023 09:24:02 +0000

В цій добірці представлені шрифти розроблені українськими дизайнерами.

Kyiv Type Це сучасний шрифт, що читається, створений Валерією Калашниковою. Він має безліч накреслень, включаючи Regular, Bold, Italic та Bold Italic. Шрифт підтримує українську мову та містить діакритичні знаки. В основу дизайну було покладено риси архітектури та меморіальних знаків міста Києва.

Misto Font Це дизайнерський шрифт, розроблений українським дизайнером та графіком Олексієм Ільєнком. Шрифт було створено у 2019 році спеціально для використання у міському середовищі, для показу назв вулиць, місць та інших об'єктів. "Misto Font" має простий та лаконічний дизайн, що дозволяє використовувати його на різних поверхнях та матеріалах. Він також містить підтримку української мови, зокрема кирилиці.

Kharkiv Tone це дизайнерський шрифт, розроблений українським дизайнером Ivan Datskov. Шрифт створювався спеціально для міста Харкова, і на його створення надихнули яскраві кольори та контрасти міської архітектури. Шрифт має унікальний дизайн, що добре підходить для використання у великих заголовках, плакатах та інших елементах дизайну. Він включає 2 зображення - Bold і Regular - і містить підтримку української мови, в тому числі кирилиці.

NAMU typefaces Wе сімейство шрифтів, які поєднують у собі елементи каліграфії та сучасного дизайну. Вони мають унікальний дизайн і доступні для використання у різних проектах та дизайнерських завданнях. Підходить для створення логотипів, банерів, візиток, упакування, рекламних матеріалів та інших графічних проектів.

MAK Варіативна версія популярного українського шрифту Мак. Це дисплейний шрифт з українським настроєм, натхненний українською музикою.Експерименти з історичними формами, контрастами, сміливими формами допомогли створити на її основі новий образ української кирилиці та латиниці. Гарнітура включає 4 безкоштовні стилі шрифту: Mak Regular Low, Mak Semibold High, Mak Extrabold, Mak Black High. Вони доступні за ліцензією Open Font License (OFL). Гарнітуру розробив Валентин Ткаченко у 2019-2022 роках.

Дякую за перегляд!

Безкоштовні онлайн курси для дизайнерів

Anna — Thu, 11 May 2023 11:16:04 +0000

В цьому пості хочу поділитися безкоштовними курсами. Вони будуть дуже корисні для новачків, які хочуть отримати знання в дизайні безкоштовно або вдосконалити навички.
Також невеликий бонус, при проходженні курсів, будут надаватися онлайн дипломи (можливо це вам допоможе у пошуках роботи ;).

Coursera
На цьому курсі ви вивчите всі основи дизайну, включаючи теорію кольору, типографію, іконки та принципи дизайну інтерфейсу користувача (UI). Крім того, ви навчитеся створювати прототипи і тестувати їх за допомогою програмних засобів, таких як Sketch, InVision і Adobe XD.
Udemy
На цьому сайті ви отримаєте всі необхідні знання для створення красивих і функціональних веб-сайтів за допомогою HTML і CSS. Також включає в себе використання інструментів дизайну, таких як Adobe Photoshop та Illustrator.
FreeCodeCamp
На цьому сайті ви знайдете безліч безкоштовних курсів, які включають в себе основи HTML, CSS, JavaScript, React, Node.js і багато іншого. FreeCodeCamp також надає проекти для практики, щоб допомогти вам отримати отримані знання на практиці.
OpenClassrooms
Курси з дизайну та розробки веб-сайтів на OpenClassrooms - на цьому сайті ви знайдете курси з дизайну та розробки веб-сайтів, які включають в себе основи HTML, CSS, JavaScript та інші технології, такі як PHP і MySQL. Курси надаються на різних мовах, включаючи англійський, французький та іспанський.
Alison
Курс по дизайну веб-сайтів від Alison - на цьому сайті визнайдете та вивчите всі основи дизайну, включаючи колір, композицію та типографію, а також отримаєте практичні навики зі створення веб-сайтів за допомогою HTML і CSS.
Codecademy
Курси веб-розробки на Codecademy - на цьому сайті ви знайдете курси веб-розробки, включаючи основи HTML, CSS і JavaScript, а також додаткові теми, такі як веб-сайти на React і Angular. Курси на Codecademy засновані на інтерактивних вправах і проектах, щоб допомогти вам отримати практичні навики з розробки веб-сайтів
Google Developers
Курси з веб-розробки та дизайну на Google Developers - на цьому сайті ви знайдете безкоштовні курси з розробки веб-сайтів і дизайну. Курси включають в себе основи HTML, CSS і JavaScript, а також інструменти дизайну, такі як Adobe XD і Sketch. Курси Google Developers відрізняються тим, що вони пропонують практичні завдання та проекти, які допоможуть вам отримати свої знання на практиці.

Дякую за перегляд, сподіваюсь інформація була корисною!

Корисні статті в області UX-дизайну

Anna — Thu, 11 May 2023 10:50:44 +0000

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

The Ultimate Guide to User Personas
Ця стаття пояснює, що таке користувальницькі персони і як вони можуть допомогти вам створити ефективніший UX-дизайн. Стаття також описує, як створювати персони та використовувати їх у процесі дизайну.
A Comprehensive Guide to Design Systems
Ця стаття описує, що таке дизайн-системи і як вони можуть допомогти вам створювати більш послідовний та ефективний дизайн. Вона також містить посібник зі створення дизайн-системи.
The Principles of Design and Their Importance
Ця стаття описує основні принципи дизайну та пояснює, чому вони такі важливі для створення гарного UX-дизайну. Стаття також містить безліч прикладів, як ці принципи можуть бути застосовані у практиці.
10 Rules of Good UI Design to Follow on Every Web Design Project
Ця стаття містить 10 правил гарного дизайну інтерфейсу користувача, які допоможуть вам створити більш ефективний дизайн. Стаття також містить безліч прикладів та рекомендацій
The Ultimate Guide to Web Animation
Ця стаття пояснює, що таке веб-анімація та як вона може бути використана в UX-дизайні. Стаття також містить безліч прикладів та рекомендацій, як використовувати анімацію у вашому дизайні.

Сподіваюсь, що ця добірка була для вас корисною. Якщо у вас є цікаві матеріали стосовно цієї теми, обовязково поділіться у коментаріях.
Дякую!

Корисні плагіни для Figma #2

Anna — Wed, 08 Feb 2023 08:43:34 +0000

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

Remove BG
Корисний плагін, який є незамінний у роботі. Він допомагає прибрати фон у будь-якої картинки і залишити важливі елементи.
Є мінус в тому, що в безкоштовній версії якість гірша, але у мене для вас є лайфхак)
Щоб якість картинки була краща, поставте обтравку під оригінал і натисніть "Use as mask".
Iconscout
В цьому плагіні міститься багато корисних 3D іконок та ілюстрацій, які допоможуть у роботі.
Isometric
Ця функція у Figma допоможе в розробці мокапів, а саме накладення логотипів, тексту та інш., під тим кутом, яким вам необхідно.
Image Editor
Цей плагін розроблений для редагування фотографій у Figma. Він корисний тим, що можна робити корекцію картинок не використовуючи інші программи. Є багато фільтрів та налаштування інших показників.
Soroka
Корисний плагін для підбірки шрифтових пар. Якщо у вас іноді виникают такі ж проблеми, як і у мене в типографіці, то же як чарівна паличка)

Тренди дизайну 2023 року

Anna — Tue, 31 Jan 2023 18:31:36 +0000

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

1. Назад у 90-ті
Як кажуть, мода циклічна, тому назарі епоха 90 набуває актуальності. Цей стиль є чимось рідним та давно відомим. Ретро являється чимось яскравим, різнобарним, тому будуть актуальні саме дифамінові кольори. Вони мають змогу притягувати увагу, створювати запальний настрій. Стиль охоплює собою ретро шрифти, тобто зараз самий час погратися з типографікою.
Згадуючи старі мультфільми з космісмічною темою, можна проникнути у цей світ неону, трошки кіберпанку та футуристики.

2. 3D-моделі
Вже багато часу на ринку трендів посідає перші місця 3D дизайн. Цей стиль багатовирімний. Його можна поєднувати майже зі всіма іншими. Такі елементи в дизайні є дійсно заворожуючими. Моушн дизайн набирає обертів, слідкуючи за ним, він стає все краще.
3D дизайн дуже цікава галузь для вивчення та створення чогось особливого. Також хочу зазначити, що вивчення нового, розширить знання та актуальність як спеціаліста.
Цей стиль, як на мене більш всього поєднується з немешн актуальним у цьому році "кислотним" напрямком. Комбінація цих двох виглядає дуже пекучим тандемом. Кислотний напрямок є чимось незвичним та цікавим у своєму поєднанні палітри.

3. Малюнки та ботаніка
Популярним джерелом натхнення для створення різних дизайнів є природа. Якщо потрібні свіжі ідеї, достатньо подивитися на те, що вже створили за нас. Поєднання кольорів, недосконалість ліній та текстура - це неймовірно. Цей стиль не про геометричну точність, яка часто нав'язується редакторами.
Роботи у цьому стилі придають натуальності, живості та яскравих емоцій. Це чудова нагода, створити унікальні візерунки, картинки та паттерни для проєктів. Доречне поєднання до цього стилю є ризографія, яка дуже схожа мотивами. Зерно, крапки та яскаві кольори є невід'ємною частиною ризографії.
На мою думку ботаніка буде імпонувати для еко-проєктів, особливо використовуючи разнобірвні кольори задля привернення уваги, яка є важлива до цієї теми.

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

5. Бруталізм як анти-дизайн
Брутал-можна описати такими словами: грубий, незвичайний, сміливий, спотворений, промисловий, провокаційній.
В цьому стилі дійно є смілисть. В використанні не порібно прив'язуватись до рамок, навпаки, використувати можливості для створення чогось нового та неординарного.
Бруталізм стане у нагоді в використанні як яскравих, так і "сірих" дизайнів. Тому дає змогу не обмежувати себе у чомусь.
Анти-дизайн, сама назва кричить за себе. Але не варто плутати ці стилі. Вони дуже схожі між собою, але є велика різниця в тому, що анти-дизайн більше за "потворність", а бруталізм більш до краси та гармонії поєднання.
Мінусом бруталу є те, що цільова аудиторія може зрозуміти цей дизайн та він підходить не для всіх ніш.

Зробивши виновки, можу сказати одне - яскравість. Саме це вважаю доречним використувати у своїх роботах. Особливо в такі тяжкі періоди життя, обов'язково порібно нести в собі яскравість та світло і ділистися з ним.
Дякую!

Безкоштовні шрифти з підтримкою української мови #1 (рукописні)

Anna — Wed, 27 Jul 2022 19:49:47 +0000

Актуальна добірка тут:

Безкоштовні рукописні шрифти з підтримкою української мови

Dinozavrix ・ Листоп 6 '24

#fonts #typography #collections #ua

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

Lemon Tuesday
Красивий рукописний шрифт, з безкоштовною ліцензією. Шрифт початково був орієнтований на короткі емоціональні надписи, але на мою думку, він ідеально підійде для заголовків, постерів, соціальних мереж, тощо.
Підтримка мов: Кирилиця, латиниця.
Celestina
Повітряний та легкий шрифт. Підійте для листівок, заголовків. Я вважаю, що краща тематика для Celestina це весілля, або річниці.
Підтримка мов: Кирилиця, латиниця.
Solena
Надзвичайний шрифт, який дуже нагадує море, сіль, подорожі та літо. Підійде як раз таки на тематику з перших асоціацій про Solena. Назва кричить сама за себе.
Підтримка мов: Кирилиця, латиниця.
Storytella
Цей шрифт було намальовано пензликом. Має багато альтернатив у використанні. Підійде для постерів, картинок, заголовків. Тож хай ваша фантазія використовує його як тільки заманеться.
Підтримка мов: Кирилиця, латиниця.
Sweet Mavka Script
Казковий шрифт, дуже містичний (по назві). Хочу зазначити, що цей шрифт можна використовувати у великих розмірах. Підійде для оформлення різної айдентики, накладення на фото, заголовків, оформлення, тощо.
Підтримка мов: Кирилиця, латиниця.

Дякую за перегляд та вподобайки!

Актуальна добірка тут:

Безкоштовні рукописні шрифти з підтримкою української мови

Dinozavrix ・ Листоп 6 '24

#fonts #typography #collections #ua

Корисні плагіни для Figma #1

Anna — Fri, 15 Jul 2022 13:06:44 +0000

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

LottieFiles
Цей плагін дозволяє додавати анімації до проєктів. В доступі є бібліотека з готовими файлами, також є можливість завантажити свої. Доступні формати у SVG та GIF.
Get Waves
Завдяки ньому можливо створювати унікальні хвилі у форматі SVG та налаштовувати їх під свій смак.
Circular Text
Як часто ви бачили текст по колу, і робили його у сторонніх сервісах? Завдяки цьому плагіну можна зробити це прямо у фігмі. Варто спробувати!)
Content Reel
Цей плагін може заповнити ваші проєкти данними, замість заїждженого "Lorem ipsum". Все доволі просто, обираємо те що потрібно замінити (фото або текст), та вставляємо вже готовий вподобаний контент.
Unsplash
Плагін дає змогу відразу у фігмі вставляти фотографії зі стоку у власний проєкт. Дуже зручно, економить ваш час на пошуки у браузері.
Pattern Hero
Якщо ви до сих пір мучетесь з створенням патернів у інших программах, цей плагін буде корисний тим, що домогає створювати відразу у фігмі.
Charts
Раніше, дивлячись на круті роботи, не знала як зборити графіки та повторити їх. Але нажаль, про цей плагін я дізналась лише зараз. Він робить графіки за вас. Дуже зручно.
Blend
Більш декоративний плагін. За допомогою нього можна створити послідовні абстакті зоображення з еліпсів, тощо.
Можна зробити повторення фігури, та задати їй траєктротію.
Spellchecker
Я часто роблю помилки у тексті, особливо коли є надхнення. Ще я дуже швидко друкую, і це мені заважає. Але цей плагін вирішує цю проблему. Він перевіряє ваш текст на орфографічні помилки на українській, англійській та російській мові.
Blobs
За допомогою цього плагіну можна створювати "краплі" різної форми. Можна прикрасити свій проєкт. Він також робить рандомні каплі, коли вже немає фантазії :D

Якщо стаття була для вас корисна, прошу поставити вподобання, щоб я розуміла, писати ще, або ні :)

Також пишить у коментарях, про які плагіни знали, а які взяли собі на замітку)

Як підібрати кольори?

Anna — Wed, 13 Jul 2022 10:28:58 +0000

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

Почнемо з інстаграм сторінок

Color Palette Cinema
Тут зібрані різні поєднання кольорів взяті з кадрів разних фільмів та серіалів. Я дуже полюбляю подивитися, та іноді навіть з'являються ідеї для нових проєктів після перегляду.
Khroma - Color Inspiration
На цій сторінці зібрані разноманітні кольори з їх назвами. Буває таке, що сподобався колір, але не знаєш точної назви, а тут все є.
Мінус, що немає нових постів, але там все одно є на що подивитися.
Colours Cafe
Підбірка кращих кольорових поєднань, вже з прикладом того, як це виглядає. Ця сторінка одна із моїх улюбленних. На ній безліч підбірок під різний настрій, від самих природніх зелених до 50 віддітків сірого :D
Coolors® Color Palettes
Ще одна типова підбірка кольорів з назвами (дуже зручно) та прикладами ілюстрацій. Можна залипнути)
colorpalette.cc
Сама простенька підбрібка палітр, але теж не без уваги до неї. Багато постів, цікаво перегладати у стрічці новин.

Корисні сайти з підбору палітри

Adobe Color
Це класика!) Тут можна підібрати палітру по власному бажанню. Є різні варіанти , такі як монохромна, трикутна віддіточна і т.п. Можна підбирати хочь весь день. Також є вже готові палітри яки можна переглянути.
Coolors
Це просто мастхев по підбору. Дуже зручний сервіс, можна користуватись онлайн, або завантажити плагін до фігми, або навіть на ПК.
Color.Hailpixel
Сайт як гра мишкою) Водите по екрану і отримуєте рандомний колір, після хвилини користування стає ясно як і куди водити щоб отримати потрібний відтінок.
Color Hunt
Цікавий сайт, можна зберігати палітри, переглядати нові, та взагалі передивитися рандомні, цікаві поєдання. Вони поділені за темами. Зручно що коли потрібні саме холодні віддінки, то можно переглянути тільки їх, без зайвого.
Galactic.Ink
Цей сайт підійде як і для новачків, так і для професіоналів. Має багато можливостей і сервіс дає змогу підібати насиченість, відтінки, сатурації, тощо. Отримані кольори можна відразу завантажити у фотошоп або ілюстратор.
Paletton
Сервіс схожий на попередній по своїм можлостям, але в ньому є своя фішка, можна передивитися як обрані кольори будуть виглядати для людей з дальнотізмом, та на різноманітних екранах.
Colorhexa
Цей сайт дає повну інформацію щодо обраного вами кольору. Корисний для роботи у створенні сайтів та їх верстки.
Photocopa
За допомогою цього сервісу можно витянути всі відтінки кольорів з фотографії.
In color Balance
На цьому сайті забрані різні фото, з яких взяті кольори, тобто невеличкі палітри. Цікаво переглядати для натхнення.
Picular
Сервіс є чудовим генератором кращих кольорів за допомогою слів.
Все просто, пітбно написати предмет або колір який вам потрібен, і сайт формує накращі та найпопулярніші відтінки.
Muzli Colors
Генерує підходящі палітри під обраний колір. Зручніть в тому, що при наведенні можна побачити як ці палітри будуть виглядати у роботі.
Сolorsandfonts
Комбінація готових кольорів та шрифтів. Є голові палітри, градієнти та навіть сиволи.

Мобільні додатки

Palette Republic
Цікаві підбірки фото, можно генерувати кольори зі своїх фотографій.
PANTONE Studio
Думаю по назві, вже все зрозуміло) Класичні кольори від пантон)
I Love Hue
Трошки не по темі, але вважаю цей додаток корисним.
Ще в шкільні часи сприймала більше як гру)
Додаток допомагає навчитися розрізняти кольори, відтінки, та знайти гамонію. Також поєднувати та правильно відрізняти. Буде корисним повивчати, подивитися та навіть трішечки пограти)

А якими сервісами користуєтесь Ви? Чекаю відповіді у коментарях!)

Дякую за перегляд)

Безкоштовні фотостоки для ваших проєктів

Anna — Fri, 08 Jul 2022 20:34:00 +0000

1. Класика - Pixabay
Крутий сток з різноманітними фотографіями. Його плюс в тому що, можно скачувати фото бехліч разів за день. Із мінусів, не всі розширення доступні.
На багатьох фото є ліцензія і не потрібно вказувати авторство
https://pixabay.com

2. Unsplash
Цікавий та зручний у використанні. Є різні розділи і незвичні фото.
https://unsplash.com

3. Gratisography
Фото та вектори. Позиціонують себе як причудливі і не як усі.
https://gratisography.com

4. Рexels
Також один з самих популярних стоків і безкоштовних. Як на мене схожий по використанню на Pixabay (іноді навіть плутаю).
https://www.pexels.com

5. Picjumbo
Звичайний сток, гарні фото. Прикольний тим, що є колекції із фото, але вони платні.
https://picjumbo.com

6. Isorepublic
Цікаві фото, трохи є естетічні)
https://isorepublic.com

7. Visualhun
Безкоштовні фото, не зовсім стокові, але привабливі)
https://visualhunt.com

8. Skitterphoto
Милі безкоштовні фото від фотографів з Голландії.
https://skitterphoto.com

9. Lifeofpix
Сайт в стилі інстаграму. Оргінально)
https://www.lifeofpix.com

10. Kaboompics
Теж красиві фото, доречні до різних проєктів, з дозволом використання)
https://kaboompics.com

11. Picography
Ще один фотосток, в стилі Рexels та Pixabay
https://picography.co

12. Twnsnd
Олдові чорно-білі фотки.
https://nos.twnsnd.co

13. Everypixel
Індексує контент відразу з 23 різних джерел. В основі його пошукової видачі — алгоритм, що працює на нейросетях. Можна налаштувати фільтри за фотографіями та ілюстраціями, горизонтальними та вертикальними зображеннями.
https://www.everypixel.com/free

14. Focastock
Звичайний фотосток з картинками та відео
https://focastock.com

15. Splitshire
Зручний, привабливі фото. Підійдуть для будь-яких ідей)
https://www.splitshire.com

Мої улюблені плагіни для Figma

Anna — Sat, 25 Jun 2022 20:04:33 +0000

1. Image Palette
Витягує палітру кольорів із 5 різних кольорів із вибраних зображень. Все просто, зручно і красиво.
Використовується алгоритм, який приблизно наближає найбільш помітні різні кольори на зображенні. Все добре працює, але можуть буди проблеми з зображеннями низької якості, векторною графікою.
Автор: Matt DesLauriers

2. Mesh Gradient
Дозволяє вийти за рамки, і створити не тільки лінійні і радіальні градієнти.
Плагін створює градієнтне зображення з основною двовимірною сіткою і дозволяє редагувати вершини та краї сітки, щоб отримати ідеальний вигляд градієнта.
Автор:Gautham

3. Better Font Picker
Плагін допомагає вибрати шрифти з попереднім переглядом того, як він виглядає (цього дуже не вистачає у figma).
Ви можете швидко проглянути всі ці тисячі шрифтів, встановлених без проблем як альтернативу вибору шрифтів за замовчуванням.
Автор:Nitin Gupta

4. Text From Image
Цей плагін дозволяє розпізнати текст по фотографії. Дуже корисний в роботі, особливо коли багато тексту і не хочеться все переписувати.Не потрібно використовувати сторонні сервіси і витрачати дорогоцінний час.
Автор:Michael Wang

5. Image tracer
Крутий плагін, який дозволяє перевести растрові фото у вектор.
Особливо корисний у фотографіях з низькою якістю.
Об’єднає всі слої разом в одне зображення (незалежно від того, чи є вони вже вектором чи ні) — потім перетворить його на «чорно-білий» і спробує відстежити його в новий векторний.
Автор: Dave Williames