Пані та панове — анімація
Звичайна та мікро, у лого, слайдері, застосунку та скролі сайту.
Розглядайте й надихайтеся добіркою жвавих інтерфейсів, яку склав куратор Вадим Грін.
А навчитися теж анімувати можете на інтенсиві Вадима — Basic Animation in Figma Workshop.
Усе про воркшоп.
Анімацїї: Lazarev agency 1, 2, Evan Place, Prakash Ghodke, Taras Migulko.
Звичайна та мікро, у лого, слайдері, застосунку та скролі сайту.
Розглядайте й надихайтеся добіркою жвавих інтерфейсів, яку склав куратор Вадим Грін.
А навчитися теж анімувати можете на інтенсиві Вадима — Basic Animation in Figma Workshop.
Усе про воркшоп.
Анімацїї: Lazarev agency 1, 2, Evan Place, Prakash Ghodke, Taras Migulko.
🔥50❤4
Відчиняйте, бо прийшов грудень, а з ним і добірка наборів Проджа
Обирайте, які навички прокачаєте під кінець року:
🔹 Курси
• Web Design Beginning 4 грудня
• Product Design 4 грудня
• UX Design Beginning 6 грудня
• Mobile Apps Design 18 грудня
🔹Інтенсиви
• Basic Animation in Figma Workshop 4, 6, 9 грудня
• Designing for Complex UI 6, 7, 8 грудня
• Mobile UI Design Workshop 11, 14 грудня
• Data Tables in Figma 16, 17, 22 грудня
🔹Відеокурси
• Figma
• Webflow
Обирайте, які навички прокачаєте під кінець року:
🔹 Курси
• Web Design Beginning 4 грудня
• Product Design 4 грудня
• UX Design Beginning 6 грудня
• Mobile Apps Design 18 грудня
🔹Інтенсиви
• Basic Animation in Figma Workshop 4, 6, 9 грудня
• Designing for Complex UI 6, 7, 8 грудня
• Mobile UI Design Workshop 11, 14 грудня
• Data Tables in Figma 16, 17, 22 грудня
🔹Відеокурси
• Figma
• Webflow
❤9👍3
Заглянемо у минуле застосунків?
Цього разу у музею інтерфейсів specialedition виставка.
Запитання до вас — яку апку пам’ятаєте у цих версіях?
Цього разу у музею інтерфейсів special
Запитання до вас — яку апку пам’ятаєте у цих версіях?
❤38🔥11😁1
Кому добірку помічників-плагінів Figma?
Куратори Проджа поділилися улюбленими.
🔹Андрій Курочкін, куратор курсів Web Design Beginning, Web Design Junior
• Smooth Shadow — робить чудові тіні у два кліки.
• Image Tracer — надійний помічник, коли треба швиденько векторизувати зображення.
• To Path — розміщує тексти на будь-яких кривих.
🔹Мар’яна Бучкович, кураторка курсу Web Design Junior
• RemoveBG — ШІ-плагін, який допомагає позбутися фону на фото в один клік.
• Invert Color — інвертує фони, заливки, контури та кольори ефектів.
• Contrast — допомагає перевірити контрастність кольорів та відповідність до WCAG.
🔹Вадим Грін, куратор Basic Animation in Figma
• Autoflow — допомагає швидко й охайно створити user flows у Figma.
• Relume Ipsum — AI-плагін, щоб створювати контент для дизайну без усіляких lorem ipsum.
• Jitter — дозволяє анімувати безпосередньо у Figma.
Робимо другу частину?
Куратори Проджа поділилися улюбленими.
🔹Андрій Курочкін, куратор курсів Web Design Beginning, Web Design Junior
• Smooth Shadow — робить чудові тіні у два кліки.
• Image Tracer — надійний помічник, коли треба швиденько векторизувати зображення.
• To Path — розміщує тексти на будь-яких кривих.
🔹Мар’яна Бучкович, кураторка курсу Web Design Junior
• RemoveBG — ШІ-плагін, який допомагає позбутися фону на фото в один клік.
• Invert Color — інвертує фони, заливки, контури та кольори ефектів.
• Contrast — допомагає перевірити контрастність кольорів та відповідність до WCAG.
🔹Вадим Грін, куратор Basic Animation in Figma
• Autoflow — допомагає швидко й охайно створити user flows у Figma.
• Relume Ipsum — AI-плагін, щоб створювати контент для дизайну без усіляких lorem ipsum.
• Jitter — дозволяє анімувати безпосередньо у Figma.
Робимо другу частину?
❤82🔥27
Складні в опануванні. Прості у використанні.
Якби створювали загадки про компоненти Figma, щось таке написали б про таблиці.
Щоб скіпнути складну частину, рекомендуємо:
• ознайомитися з прикладами організації даних в таблицях;
• навчитися швидко створювати та редагувати таблиці у Figma на воркшопі Data Tables in Figma.
Якби створювали загадки про компоненти Figma, щось таке написали б про таблиці.
Щоб скіпнути складну частину, рекомендуємо:
• ознайомитися з прикладами організації даних в таблицях;
• навчитися швидко створювати та редагувати таблиці у Figma на воркшопі Data Tables in Figma.
❤19
Коли не знаєте, за що братися, починайте з основи. Коли стартуєте у дизайні мобільних застосунків, теж починайте з основи. З нею відкинете зайвий шум і зосередитеся на базових принципах, що роблять апки зручними.
🔹Пам’ятайте про «зону великого пальця»
• розміщуйте ключові дії так, щоб їх було легко досягти великим пальцем;
• розташовуйте важливі елементи дизайну в центральних частинах і нижній половині екрана.
🔹Інтуїтивна навігація — маст
• використовуйте навігаційні елементи та патерни, з якими юзери вже знайомі;
• переконайтеся, що юзери можуть без проблем відповісти на запитання «Де я?».
🔹Починайте дизайнити з екранів меншого розміру
• надавайте пріоритет маленьким екранам для кращого UX застосунку;
• розробляйте дизайн так, щоб його можна було масштабувати на більші пристрої.
🔹Давайте користувачам фідбек
• використовуйте тактильні, звукові або візуальні підказки;
• інформуйте користувачів про стан системи: підтверджуйте дії, попереджуйте про наслідки.
🔹Пам’ятайте про gesture UI
• використовуйте інтуїтивно зрозумілі та загальновідомі жести: swipe, drag, tap;
• тестуйте ці та інші жести з користувачами.
🔹Текст має бути читабельним
• не бійтесь робити шрифти більшими;
• пам’ятайте про ієрархію типографії. Недостатній контраст між основним текстом і заголовком та нехтування правилом близькості — найчастіші помилки.
🔹Не змушуйте користувачів вводити багато даних
• використовуйте степпери, чекбокси та автозаповнення, коли це можливо;
• не забувайте про перевірку полів та підказки.
🔹 Швидкість має значення
• знайдіть точки, коли користувачі чекають відгуку від інтерфейсу;
• подумайте, як їх обіграти — анімація пошуку або прелоадера краще, ніж пауза в кілька секунд без реакції на дії юзерів.
🔹Використовуйте нативні можливості мобільних операційних систем
• покращуйте UX за допомогою камери, GPS, Touch ID, Face ID, dynamic island тощо.
#гостьова_середа
🔹Пам’ятайте про «зону великого пальця»
• розміщуйте ключові дії так, щоб їх було легко досягти великим пальцем;
• розташовуйте важливі елементи дизайну в центральних частинах і нижній половині екрана.
🔹Інтуїтивна навігація — маст
• використовуйте навігаційні елементи та патерни, з якими юзери вже знайомі;
• переконайтеся, що юзери можуть без проблем відповісти на запитання «Де я?».
🔹Починайте дизайнити з екранів меншого розміру
• надавайте пріоритет маленьким екранам для кращого UX застосунку;
• розробляйте дизайн так, щоб його можна було масштабувати на більші пристрої.
🔹Давайте користувачам фідбек
• використовуйте тактильні, звукові або візуальні підказки;
• інформуйте користувачів про стан системи: підтверджуйте дії, попереджуйте про наслідки.
🔹Пам’ятайте про gesture UI
• використовуйте інтуїтивно зрозумілі та загальновідомі жести: swipe, drag, tap;
• тестуйте ці та інші жести з користувачами.
🔹Текст має бути читабельним
• не бійтесь робити шрифти більшими;
• пам’ятайте про ієрархію типографії. Недостатній контраст між основним текстом і заголовком та нехтування правилом близькості — найчастіші помилки.
🔹Не змушуйте користувачів вводити багато даних
• використовуйте степпери, чекбокси та автозаповнення, коли це можливо;
• не забувайте про перевірку полів та підказки.
🔹 Швидкість має значення
• знайдіть точки, коли користувачі чекають відгуку від інтерфейсу;
• подумайте, як їх обіграти — анімація пошуку або прелоадера краще, ніж пауза в кілька секунд без реакції на дії юзерів.
🔹Використовуйте нативні можливості мобільних операційних систем
• покращуйте UX за допомогою камери, GPS, Touch ID, Face ID, dynamic island тощо.
#гостьова_середа
❤41🔥4🥰4
А ви знаєте своїх користувачів? Ці базові методи й інструменти (та їх різні альтернативи) допомагають аналізувати поведінку юзерів і виявити потенційно проблемні місця в роботі апки. Ділюся з вами.
🔹Кількісний аналіз
Підходить для роботи з великою кількістю даних. З аналітикою виявите тенденції та шаблони поведінки користувачів у застосунку.
• Інструменти: Amplitude, Google Analytics for Mobile, Mixpanel, Firebase
🔹Юзабіліті тестування
Побачите в дії, як юзери користуються застосунком й вийдете на потенційні проблеми з дизайном
• Інструменти: Maze, UserTesting, Lookback, UXCam
🔹Опитування
Дізнаєтеся, як користувачі сприймають застосунок загалом або нові функції, які у них виникають потреби та проблеми.
• Інструменти: Monkey Survey, Typeform, Google Forms, JotForm
#гостьова_середа
🔹Кількісний аналіз
Підходить для роботи з великою кількістю даних. З аналітикою виявите тенденції та шаблони поведінки користувачів у застосунку.
• Інструменти: Amplitude, Google Analytics for Mobile, Mixpanel, Firebase
🔹Юзабіліті тестування
Побачите в дії, як юзери користуються застосунком й вийдете на потенційні проблеми з дизайном
• Інструменти: Maze, UserTesting, Lookback, UXCam
🔹Опитування
Дізнаєтеся, як користувачі сприймають застосунок загалом або нові функції, які у них виникають потреби та проблеми.
• Інструменти: Monkey Survey, Typeform, Google Forms, JotForm
#гостьова_середа
❤32🔥4