ПРО ШРИФТИ
Хочу з вами розібрати найчастіші помилки новачків та мої рекомендації щодо шрифтів у UI/UX дизайні.
У кожному курсі по дизайну є тема шрифтів, і навіть зараз, шрифт допомагає (чи навпаки) вам читати цей текст. Так ось, щоб шрифт допомагав, доповнював ваш інтерфейс, варто дотримуватися декілька простих рекомендацій:
1️⃣ Перша помилка - занадто складні та нечитабельним шрифти, особливо для текстів маленького розміру.
Використовуйте прості та зрозумілі шрифти. Незважаючи на те, що складніші шрифти можуть додати візуального ефекту, для деяких проектів краще використовувати більш прості та читабельні шрифти. Чим більш читабильні шрифти при різних розмірах - тим краще. Не захоплюйтесь занадто вичурними та художніми шрифтами - такі шрифти гарні тільки на проектах у Dribbble, у житті вони неробочі.
2️⃣ Друга помилка - занадто багато шрифтових груп для одного проекту, поєднувати багато різних типів рукописних шрифтів, тощо.
Важливо також знати, як комбінувати різні шрифти між собою. Для комбінування шрифтів краще використовувати не більше двох шрифтів на проект. Важливо вибрати шрифти, які доповнюють один одного та допомагають зрозуміти ієрархію контенту на сторінці.
3️⃣ Третя помилка - використання тільки одного стилю та не робити акценти у текстах, або робити забагато акцентів.
Користуватися різними стилями одної шрифтової групи - Bold/Semibold/Medium/Regular/Light і тд. Чим їх більше у шрифті, тим краще. Це допоможе вам зробити ваш дизайн цікавішим та зробити акценти, однак не використовуйте усі одразу, гармонія у мірі!
Хочу з вами розібрати найчастіші помилки новачків та мої рекомендації щодо шрифтів у UI/UX дизайні.
У кожному курсі по дизайну є тема шрифтів, і навіть зараз, шрифт допомагає (чи навпаки) вам читати цей текст. Так ось, щоб шрифт допомагав, доповнював ваш інтерфейс, варто дотримуватися декілька простих рекомендацій:
1️⃣ Перша помилка - занадто складні та нечитабельним шрифти, особливо для текстів маленького розміру.
Використовуйте прості та зрозумілі шрифти. Незважаючи на те, що складніші шрифти можуть додати візуального ефекту, для деяких проектів краще використовувати більш прості та читабельні шрифти. Чим більш читабильні шрифти при різних розмірах - тим краще. Не захоплюйтесь занадто вичурними та художніми шрифтами - такі шрифти гарні тільки на проектах у Dribbble, у житті вони неробочі.
2️⃣ Друга помилка - занадто багато шрифтових груп для одного проекту, поєднувати багато різних типів рукописних шрифтів, тощо.
Важливо також знати, як комбінувати різні шрифти між собою. Для комбінування шрифтів краще використовувати не більше двох шрифтів на проект. Важливо вибрати шрифти, які доповнюють один одного та допомагають зрозуміти ієрархію контенту на сторінці.
3️⃣ Третя помилка - використання тільки одного стилю та не робити акценти у текстах, або робити забагато акцентів.
Користуватися різними стилями одної шрифтової групи - Bold/Semibold/Medium/Regular/Light і тд. Чим їх більше у шрифті, тим краще. Це допоможе вам зробити ваш дизайн цікавішим та зробити акценти, однак не використовуйте усі одразу, гармонія у мірі!
June 8, 2023
👩💻 Усім привіт! Поки я в дорозі, вирішила зібрати ваші питання для ефіру про співбесіди для дизайнерів! Можете задавати їх прямо тут у коментарях, або у цій формі:
https://forms.gle/PoRPwsLfRhWiMMn19
Сам прямй ефір думаю провести у кінці наступного тижня, обовʼязково збережу запис, тож не хвилюйтеся, якщо не вийде прийти на сам ефір.
Чекаю на ваші питання 🫶
https://forms.gle/PoRPwsLfRhWiMMn19
Сам прямй ефір думаю провести у кінці наступного тижня, обовʼязково збережу запис, тож не хвилюйтеся, якщо не вийде прийти на сам ефір.
Чекаю на ваші питання 🫶
Google Docs
Питання до ефіру "Як проходити співбесіди для дизайнерів. Мій досвід"
June 12, 2023
Jane Kyr Design. Гайд по UI/UX дизайну pinned «👩💻 Усім привіт! Поки я в дорозі, вирішила зібрати ваші питання для ефіру про співбесіди для дизайнерів! Можете задавати їх прямо тут у коментарях, або у цій формі: https://forms.gle/PoRPwsLfRhWiMMn19 Сам прямй ефір думаю провести у кінці наступного тижня…»
June 12, 2023
Тут зі мною поділилися дуже класною підбіркою по законам UX і я поспішаю поділитися з вами!
https://lawsofux.com/
На жаль, тут не має української чи російської мови, але якщо на цьому пості буде більше 10 лайків, зроблю вам переклад 🙌
І не забудьте поставити питання стосовно співбесід у формі вище!
https://lawsofux.com/
На жаль, тут не має української чи російської мови, але якщо на цьому пості буде більше 10 лайків, зроблю вам переклад 🙌
І не забудьте поставити питання стосовно співбесід у формі вище!
June 13, 2023
Jane Kyr Design. Гайд по UI/UX дизайну
Тут зі мною поділилися дуже класною підбіркою по законам UX і я поспішаю поділитися з вами! https://lawsofux.com/ На жаль, тут не має української чи російської мови, але якщо на цьому пості буде більше 10 лайків, зроблю вам переклад 🙌 І не забудьте поставити…
Окей, я зрозуміла, перекладу бути 😅 але я сподіваюся, що ще підберу для вас якісь кейси під них, тому швидко не буде 🤗
Прийду у себе після новин і почну ❤️🩹 усіх обіймаю🫂
Прийду у себе після новин і почну ❤️🩹 усіх обіймаю🫂
June 14, 2023
Ну що, почнемо наш марафон по законам UX! Спочатку буду вам перекладати статю про закон, а після висновки по ньому для реального дизайнерського життя.
💫 Ефект естетичної використовуваності
Користувачі часто сприймають естетично привабливий дизайн як дизайн, який є більш використовуваним.
Основні положення
1⃣ Естетично привабливий дизайн викликає позитивну реакцію в мозку людей і переконує їх, що дизайн насправді працює краще.
2⃣ Люди більш терпимі до незначних проблем використовуваності, коли дизайн продукту або сервісу є естетично привабливим.
3⃣ Візуально привабливий дизайн може приховувати проблеми використовуваності і запобігати виявленню проблем під час тестування використовуваності.
Походження
Ефект естетичної використовуваності був вперше вивчений у галузі взаємодії людини з комп'ютером у 1995 році. Дослідники Масаакі Куросу та Каорі Кашімура з Центру дизайну Hitachi протестували 26 варіацій інтерфейсу банкомату, попросивши 252 учасників дослідження оцінити кожен дизайн за його простоту використання та естетичну привабливість.
Вони виявили сильнішу кореляцію між оцінками учасників щодо естетичної привабливості та сприйняття простоти використання, ніж між оцінками щодо естетичної привабливості та фактичної простоти використання. Куросу та Кашімура прийшли до висновку, що користувачі сильно впливаються естетикою будь-якого інтерфейсу, навіть коли вони намагаються оцінити базовий функціонал системи.
Ресурс - тут є більше ресурсів для детального ознайомлення з ефектом
#uxlaws
💫 Ефект естетичної використовуваності
Користувачі часто сприймають естетично привабливий дизайн як дизайн, який є більш використовуваним.
Основні положення
1⃣ Естетично привабливий дизайн викликає позитивну реакцію в мозку людей і переконує їх, що дизайн насправді працює краще.
2⃣ Люди більш терпимі до незначних проблем використовуваності, коли дизайн продукту або сервісу є естетично привабливим.
3⃣ Візуально привабливий дизайн може приховувати проблеми використовуваності і запобігати виявленню проблем під час тестування використовуваності.
Походження
Ефект естетичної використовуваності був вперше вивчений у галузі взаємодії людини з комп'ютером у 1995 році. Дослідники Масаакі Куросу та Каорі Кашімура з Центру дизайну Hitachi протестували 26 варіацій інтерфейсу банкомату, попросивши 252 учасників дослідження оцінити кожен дизайн за його простоту використання та естетичну привабливість.
Вони виявили сильнішу кореляцію між оцінками учасників щодо естетичної привабливості та сприйняття простоти використання, ніж між оцінками щодо естетичної привабливості та фактичної простоти використання. Куросу та Кашімура прийшли до висновку, що користувачі сильно впливаються естетикою будь-якого інтерфейсу, навіть коли вони намагаються оцінити базовий функціонал системи.
Ресурс - тут є більше ресурсів для детального ознайомлення з ефектом
#uxlaws
June 19, 2023
📒 Висновки
Уявіть собі, якщо б інтерфейс інстаграму би залишився таким: як у 2010 році! Чи багато людей з вас його використовували? Думаю, що ні.
Я часто стикалася у роботі, що конкуренцію не завжди вигріють ті продукти, які краще працюють та мають більше функціаналу, а частіше ті, хто має чистий та зрозумілий дизайн.
На жаль, не всі власники продуктів розуміють як важливо, щоб дизайн продукту залишався актуальним. Однак, в ваших силах переконати замовника/менеджера у необхідності цього. В якості аргументу можете сміли використовувати цей закон.
Є ще декілька моментів, на які треба звернути увагу:
1. Уникайте ультра модних направлень у дизайні, як наприкрад, неоморфізм колись. Такі стилі дуже важко підтримувати у майбутньому - мода проходить, а вам дизайнерам потім з цим жити. Звісно, якщо позиціонування продукту включає незвичний стиль, то це інша справа. Однак, закликаю вас подумати перед цим.
2. Якщо ви вирішили робити редизайн продукту, підійдіть до цього процесу серйозно, особливо, якщо у вашого продукту багато користувачів. Різкі зміни можуть повпливати негативно на продуктові метрики, через те, що для ваших користувачів інтерфейс став зовсім незнайомим. Можливо, варто робити редизайн поступово у декілька етапів, щоб ваші користувачі змогли поступово звикнути дл нових реалій.
3. Гарна практика використовувати нативні елементи операційних систем для ваших дизайнів, як, наприклад, iOS Kits. Для користувачів ці елементи вже знайомі і їм очевидно як ними користуватись. Це також буде робити ваш дизайн візуально привабливим та знайомим.
Що ви думаєте про цей закон? Чи ви згодні з його важливістю?
І дуже чекаю на ваші реакції! Такі тексти займають час і мені необхідно отримувати від вас фідбек 🫶
#uxlaws
Уявіть собі, якщо б інтерфейс інстаграму би залишився таким: як у 2010 році! Чи багато людей з вас його використовували? Думаю, що ні.
Я часто стикалася у роботі, що конкуренцію не завжди вигріють ті продукти, які краще працюють та мають більше функціаналу, а частіше ті, хто має чистий та зрозумілий дизайн.
На жаль, не всі власники продуктів розуміють як важливо, щоб дизайн продукту залишався актуальним. Однак, в ваших силах переконати замовника/менеджера у необхідності цього. В якості аргументу можете сміли використовувати цей закон.
Є ще декілька моментів, на які треба звернути увагу:
1. Уникайте ультра модних направлень у дизайні, як наприкрад, неоморфізм колись. Такі стилі дуже важко підтримувати у майбутньому - мода проходить, а вам дизайнерам потім з цим жити. Звісно, якщо позиціонування продукту включає незвичний стиль, то це інша справа. Однак, закликаю вас подумати перед цим.
2. Якщо ви вирішили робити редизайн продукту, підійдіть до цього процесу серйозно, особливо, якщо у вашого продукту багато користувачів. Різкі зміни можуть повпливати негативно на продуктові метрики, через те, що для ваших користувачів інтерфейс став зовсім незнайомим. Можливо, варто робити редизайн поступово у декілька етапів, щоб ваші користувачі змогли поступово звикнути дл нових реалій.
3. Гарна практика використовувати нативні елементи операційних систем для ваших дизайнів, як, наприклад, iOS Kits. Для користувачів ці елементи вже знайомі і їм очевидно як ними користуватись. Це також буде робити ваш дизайн візуально привабливим та знайомим.
Що ви думаєте про цей закон? Чи ви згодні з його важливістю?
І дуже чекаю на ваші реакції! Такі тексти займають час і мені необхідно отримувати від вас фідбек 🫶
#uxlaws
June 19, 2023
Jane Kyr Design. Гайд по UI/UX дизайну
👩💻 Усім привіт! Поки я в дорозі, вирішила зібрати ваші питання для ефіру про співбесіди для дизайнерів! Можете задавати їх прямо тут у коментарях, або у цій формі: https://forms.gle/PoRPwsLfRhWiMMn19 Сам прямй ефір думаю провести у кінці наступного тижня…
Доброго ранку) я вирішила, що ефір буде завтра о 17! Хто не зможе доєднатися, не хвилюйтеся, буде запис 🫶 (я сподіваюся, не затуплю, бо це буде мій перший ефір 😅)
Чекаю на ваші питання у цій формі, можна не тільки про співбесіди, але і про організацію роботи дизайнера теж
https://forms.gle/PoRPwsLfRhWiMMn19
Чекаю на ваші питання у цій формі, можна не тільки про співбесіди, але і про організацію роботи дизайнера теж
https://forms.gle/PoRPwsLfRhWiMMn19
Google Docs
Питання до ефіру "Як проходити співбесіди для дизайнерів. Мій досвід"
June 21, 2023
А поки я занурююсь у новий продукт, Apple нарешті випустив перший офіційний Figma файл з UI Kit для ще не вийшовшої у загальний доступ iOS17 (поки Beta-версія) 🥳
Переглянути та зберегти собі можна тут:
Apple Design Resources – iOS 17 and iPadOS 17
Переглянути та зберегти собі можна тут:
Apple Design Resources – iOS 17 and iPadOS 17
June 21, 2023
Зʼявився новий ресурс з референсами по різним UI елементам. Я дуже часто таким користуюся, коли треба знайти специфічний приклад
Що там є:
– Форми логіну та реєстрації
- Поп-апи
- Профілі
- Порожні стани
- Нотифікації
- Таби
- Каруселі
- Візарди
– Завантаження файлів
- Кнопки
- Селекти
- Тости
- Каунтери
- Тултіпи
- Таблиці, та ін.
Зберігайте собі:
https://calltoinspiration.com/
Що там є:
– Форми логіну та реєстрації
- Поп-апи
- Профілі
- Порожні стани
- Нотифікації
- Таби
- Каруселі
- Візарди
– Завантаження файлів
- Кнопки
- Селекти
- Тости
- Каунтери
- Тултіпи
- Таблиці, та ін.
Зберігайте собі:
https://calltoinspiration.com/
CallToInspiration – Small details for very exacting ideas!
Call for inspiration using the purple hat for when you have inspiration blocks or need fresh new ideas. A great tool created by a deisnger for web professionals.
June 22, 2023
Jane Kyr Design. Гайд по UI/UX дизайну
Доброго ранку) я вирішила, що ефір буде завтра о 17! Хто не зможе доєднатися, не хвилюйтеся, буде запис 🫶 (я сподіваюся, не затуплю, бо це буде мій перший ефір 😅) Чекаю на ваші питання у цій формі, можна не тільки про співбесіди, але і про організацію роботи…
На жаль, через технічні причини, ефір переноситься на завтра, тож у вас ще є час написати питання, які ви ще не додали)
June 22, 2023
This media is not supported in your browser
VIEW IN TELEGRAM
Прямому ефіру сьогодні о 17:00 бути, але поки хочу поділитися з вами враження про нове оновлення Figma!
Я тільки закінчила дивитися Config 2023 Product Launch Keynote, і можу сказати, що я дуже вражена! Нова версія Figma точно змінить процес роботи у команді не тільки дизайнера, але і розробників.
Повний список оновлень можна глянути тут
Але давайте детальніше роздивимося, що ж там нового!
Я тільки закінчила дивитися Config 2023 Product Launch Keynote, і можу сказати, що я дуже вражена! Нова версія Figma точно змінить процес роботи у команді не тільки дизайнера, але і розробників.
Повний список оновлень можна глянути тут
Але давайте детальніше роздивимося, що ж там нового!
June 23, 2023
This media is not supported in your browser
VIEW IN TELEGRAM
Перше, що мене дуже зацікавило, це фіча Variables
У цієї фічі ну прям дуже широке застосування, і я думаю, що вона зміне робочий процес дизайнера навіть більше, ніж свого часу autolayouts.
За допомогою Variables можна дуже швидко змінити кольорову тему, масштаби та робити більш складні прототипи. Детальніше як це працює можна глянути тут
Intro to variables
Prototype with variables
У цієї фічі ну прям дуже широке застосування, і я думаю, що вона зміне робочий процес дизайнера навіть більше, ніж свого часу autolayouts.
За допомогою Variables можна дуже швидко змінити кольорову тему, масштаби та робити більш складні прототипи. Детальніше як це працює можна глянути тут
Intro to variables
Prototype with variables
June 23, 2023
This media is not supported in your browser
VIEW IN TELEGRAM
Також був презентований новий режим для розробників Dev Mode, що точно змінить процес колоборації з розробниками!
За допомогою цього спейса, розробник одразу бачить дизайни, які готові для розробки, код у різних варіаціях, різні варіанти одного компонтента, може порівняти зміни, які відбулися у дизайні і все це не відходячи від каси! 😱
Де ця фіча була рік тому? Це як раз те, що було необхідно моїй минулій команді і через що у нас було багато конфліктів. 🥲
Більше про цю фічу тут:
Intro to Dev Mode
За допомогою цього спейса, розробник одразу бачить дизайни, які готові для розробки, код у різних варіаціях, різні варіанти одного компонтента, може порівняти зміни, які відбулися у дизайні і все це не відходячи від каси! 😱
Де ця фіча була рік тому? Це як раз те, що було необхідно моїй минулій команді і через що у нас було багато конфліктів. 🥲
Більше про цю фічу тут:
Intro to Dev Mode
June 23, 2023
This media is not supported in your browser
VIEW IN TELEGRAM
А ще обновили такі фічі як:
- Autolayout - додали функцію Wrap (автоматичне вирівнювання плиткою)
- додали мінімальне та максимальне значення ширина та висоти для елементу - тепер робити респонсів дизайн ще приємніше
- шрифти діляться на ті, які додали ви та системні
- зробили глобальний пошук та нотіфікації
Ці всі оновлення вже є у Figma, треба тільки оновитись!
Також дали затравочку на інтерграцію AI у Figma… це має бути цікаво.
Яка вам фіча сподобалась більше? На що ви чекали? Вже встигли оновитися та спробувати? Пишіть у коментарях та не забувайте про лайки
Все, побачимось зовсім скоро у прямому ефірі о 17:00!
- Autolayout - додали функцію Wrap (автоматичне вирівнювання плиткою)
- додали мінімальне та максимальне значення ширина та висоти для елементу - тепер робити респонсів дизайн ще приємніше
- шрифти діляться на ті, які додали ви та системні
- зробили глобальний пошук та нотіфікації
Ці всі оновлення вже є у Figma, треба тільки оновитись!
Також дали затравочку на інтерграцію AI у Figma… це має бути цікаво.
Яка вам фіча сподобалась більше? На що ви чекали? Вже встигли оновитися та спробувати? Пишіть у коментарях та не забувайте про лайки
Все, побачимось зовсім скоро у прямому ефірі о 17:00!
June 23, 2023
June 23, 2023
Jane Kyr Design. Гайд по UI/UX дизайну pinned «Ми починаємо прямий ефір, доєднуйтесь https://www.instagram.com/jannykyr/»
June 23, 2023
Друзі, дякую усім, хто був присутнім на прямому ефірі про співбесіди і хто задавав питання! Атмосфера була 🔥🔥🔥
Сподіваюся, вам сподобалося і ви отримали корисний контент🥰
Переглянути запис можна тут:
https://www.instagram.com/tv/Ct1mWzgI1QE/?igshid=MzRlODBiNWFlZA==
Дуже чекаю на ваш фідбек 🤗
Сподіваюся, вам сподобалося і ви отримали корисний контент🥰
Переглянути запис можна тут:
https://www.instagram.com/tv/Ct1mWzgI1QE/?igshid=MzRlODBiNWFlZA==
Дуже чекаю на ваш фідбек 🤗
June 23, 2023
Jane Kyr Design. Гайд по UI/UX дизайну pinned «Друзі, дякую усім, хто був присутнім на прямому ефірі про співбесіди і хто задавав питання! Атмосфера була 🔥🔥🔥 Сподіваюся, вам сподобалося і ви отримали корисний контент🥰 Переглянути запис можна тут: https://www.instagram.com/tv/Ct1mWzgI1QE/?igshid=MzRlODBiNWFlZA==…»
June 23, 2023