UX-ресурси, з якими і скіли прокачаєте, і дизайн-процес підсилите
• Короткі підказки та cheatsheets з продуктового дизайну на всі випадки життя.
https://uxhints.com/
• Посібник для універсального дизайну з інклюзивними методами для воркшопів та порадами, як залучати учасників із різними фізичними та ментальними можливостями.
https://universaldesignguide.com/
• Колекція best practices та законів психології, які допоможуть проєктувати користувацькі досвіди.
https://lawsofux.com/info/
• Короткі підказки та cheatsheets з продуктового дизайну на всі випадки життя.
https://uxhints.com/
• Посібник для універсального дизайну з інклюзивними методами для воркшопів та порадами, як залучати учасників із різними фізичними та ментальними можливостями.
https://universaldesignguide.com/
• Колекція best practices та законів психології, які допоможуть проєктувати користувацькі досвіди.
https://lawsofux.com/info/
❤47👍6👎4🔥1
Музей інтерфейсів повертається
Запрошуємо вас на диджитал-екскурсію продуктами, відомими на весь світ. Розглядайте, придивляйтесь, а в коментарях діліться, який інтерфейс особливо вразив.
Першу виставку дизайнів переглядайте тут.
Запрошуємо вас на диджитал-екскурсію продуктами, відомими на весь світ. Розглядайте, придивляйтесь, а в коментарях діліться, який інтерфейс особливо вразив.
Першу виставку дизайнів переглядайте тут.
❤68👍3👎1😁1🤯1
Adaptive & responsive web design — на перший оманливий погляд, одне й теж. Але відмінність полягає у підході та періодах виникнення обох. Та й взагалі перший проклав шлях останньому.
У статті Вова Віндар, незалежний UI-дизайнер і куратор курсу Web Design Beginning, розклав по поличках суть адаптивного та чутливого (responsive) дизайнів. А ще поділився, як створювати чутливі дизайни, що йдуть на зустріч потребам користувачів.
Читати.
У статті Вова Віндар, незалежний UI-дизайнер і куратор курсу Web Design Beginning, розклав по поличках суть адаптивного та чутливого (responsive) дизайнів. А ще поділився, як створювати чутливі дизайни, що йдуть на зустріч потребам користувачів.
Читати.
🔥20❤5👍3👎1
Заглядаємо за технічні лаштунки Projector Mentorship Platform
На її прикладі ділимося, як зібрати no-code сайт на Webflow, який інтегрується з іншими сервісами. Експерт у темі, автор ідеї платформи та розробки, а ще куратор Advanced Webflow Development Workshop — Стас Говорухін. Передаємо йому слово.
🔷 Окрім інтерфейсу менті, у платформи є важливі компоненти:
• бронювання сесії;
• створення запису в Google Calendar і дзвінка в Google Meet;
• запис інформації в табличку (для команди проєкту) тощо.
Щоб все це магічно працювало, ми залучили сервіси для інтеграцій. Один з них — Make.com. Дані ж ми отримуємо не із самого сайту, а з віджета бронювання, який працює через український сервіс Wlaunch.
🔷 Що далі?
Створюємо акаунт у Make й починаємо створювати багатокроковий сценарій:
• беремо дані з Wlaunch: вони надсилаються вебхуком. Якби це була форма у Webflow, ми б поклали інтеграцію з нею на початок;
• працюємо з отриманими даними: вони не дуже чисті, не завжди правильні, тому їх треба налаштувати, щоб Google Meet створив зустріч.
Бонус — він автоматично створює зустріч у календарі. Те саме ми робимо й з записом у Google Sheets.
І це — вершина айсберга. Використовуючи Webflow Logic, API та зовсім трошки кастомного JS (який вам люб’язно напише ChatGPT, наприклад), ми можемо робити складніші штуки. Наприклад, не лише забирати дані з сайту на Webflow, а ще й повертати їх та оновлювати сайт даними з іншого місця.
🔷 Якщо вам цікаво піти далі сайтів із формою — вирушайте на воркшоп Стаса.
На її прикладі ділимося, як зібрати no-code сайт на Webflow, який інтегрується з іншими сервісами. Експерт у темі, автор ідеї платформи та розробки, а ще куратор Advanced Webflow Development Workshop — Стас Говорухін. Передаємо йому слово.
🔷 Окрім інтерфейсу менті, у платформи є важливі компоненти:
• бронювання сесії;
• створення запису в Google Calendar і дзвінка в Google Meet;
• запис інформації в табличку (для команди проєкту) тощо.
Щоб все це магічно працювало, ми залучили сервіси для інтеграцій. Один з них — Make.com. Дані ж ми отримуємо не із самого сайту, а з віджета бронювання, який працює через український сервіс Wlaunch.
🔷 Що далі?
Створюємо акаунт у Make й починаємо створювати багатокроковий сценарій:
• беремо дані з Wlaunch: вони надсилаються вебхуком. Якби це була форма у Webflow, ми б поклали інтеграцію з нею на початок;
• працюємо з отриманими даними: вони не дуже чисті, не завжди правильні, тому їх треба налаштувати, щоб Google Meet створив зустріч.
Бонус — він автоматично створює зустріч у календарі. Те саме ми робимо й з записом у Google Sheets.
І це — вершина айсберга. Використовуючи Webflow Logic, API та зовсім трошки кастомного JS (який вам люб’язно напише ChatGPT, наприклад), ми можемо робити складніші штуки. Наприклад, не лише забирати дані з сайту на Webflow, а ще й повертати їх та оновлювати сайт даними з іншого місця.
🔷 Якщо вам цікаво піти далі сайтів із формою — вирушайте на воркшоп Стаса.
👍14🔥5❤3👎1
This media is not supported in your browser
VIEW IN TELEGRAM
До вашого набору дизайн-інструментів — Durves, генератор патернів.
Можна:
• створювати візерунки з кривими й властивостями, які самі визначаєте;
• експортувати у SVG та PNG форматах;
• проєктувати текстурні дизайни.
Взяти, протестити, користуватися.
Можна:
• створювати візерунки з кривими й властивостями, які самі визначаєте;
• експортувати у SVG та PNG форматах;
• проєктувати текстурні дизайни.
Взяти, протестити, користуватися.
🔥58👍6❤1👎1
Відрізнити ефективну діаграму від неефективної можна з першого погляду. І для цього не обов’язково бути профі. А от щоб візуалізувати дані, які без проблем передають суть ідей, статистики, знахідок — професійні скіли варто підсилити.
Ця #книжкова_рекомендація допоможе крок за кроком розібратися, як створювати діаграми та графіки так, аби було зрозуміло, переконливо та ефективно. У посібнику дізнаєтеся про контроль кольору, створення чіткої візуальної комунікації, вибір типів діаграм тощо.
Ця #книжкова_рекомендація допоможе крок за кроком розібратися, як створювати діаграми та графіки так, аби було зрозуміло, переконливо та ефективно. У посібнику дізнаєтеся про контроль кольору, створення чіткої візуальної комунікації, вибір типів діаграм тощо.
❤24👎1
Доставляємо заряд позитивних вайбів для продуктивної середи. Рекомендуємо повертатися до цього зображення, коли відчуваєте різкий брак мотивації від котиків.
Підгледіли у thischarmingcatt.
Підгледіли у thischarmingcatt.
❤69👎1
«Ну, брейнштормимо!» Як часто з такої чи схожої натхненної фрази починалися командні воркшопи, які у процесі здувалися?
Річ у тому, що шторму ідей потрібна структура та послідовність дій. Як це можна забезпечити?
🔷 Залучати до творення дизайн-рішень і тих членів команди, які «не те щоб креативні».
🔷 Формувати попередній план воркшопу зі стейкхолдерами та отримати фідбек від них.
🔷 Зважено відкидати неробочі ідеї, обирати кращі рішення й будувати подальший план їх валідації.
Щоб розуміти особливості кожного пункту й вміти їх втілювати в роботі, ми засетапили воркшоп Ideation. Co-Creation Sessions.
Для кого? Для дизайнерів, дослідників і продуктових менеджерів.
У процесі працюватимете в командах над реальними проєктами, для яких сплануєте та проведете воркшопи зі стейкхолдерами. А на виході вмітимете вести й фасилітувати командні штормінги, які завершуються чіткими результатами.
Коли: 23-24 вересня.
Ваш куратор: Юрій Грановський.
Ознайомитися з програмою детальніше можна тут. До зустрічі!
Річ у тому, що шторму ідей потрібна структура та послідовність дій. Як це можна забезпечити?
🔷 Залучати до творення дизайн-рішень і тих членів команди, які «не те щоб креативні».
🔷 Формувати попередній план воркшопу зі стейкхолдерами та отримати фідбек від них.
🔷 Зважено відкидати неробочі ідеї, обирати кращі рішення й будувати подальший план їх валідації.
Щоб розуміти особливості кожного пункту й вміти їх втілювати в роботі, ми засетапили воркшоп Ideation. Co-Creation Sessions.
Для кого? Для дизайнерів, дослідників і продуктових менеджерів.
У процесі працюватимете в командах над реальними проєктами, для яких сплануєте та проведете воркшопи зі стейкхолдерами. А на виході вмітимете вести й фасилітувати командні штормінги, які завершуються чіткими результатами.
Коли: 23-24 вересня.
Ваш куратор: Юрій Грановський.
Ознайомитися з програмою детальніше можна тут. До зустрічі!
👍7❤2🔥2👎1
«Сміливо», «чесно», «жахливо». Такі реакції викликає веббруталізм
Та усе почалося з архітектури та періоду, коли світ переживав наслідки розрухи після Другої світової війни. Будівлі у цьому стилі не мали декоративних елементів і нагадували важкі бетонні «будинки-коробки» з простими геометричними формами.
Розквіту ж бруталізм як архітектурний напрям набув у 1950-1970-ті. Загалом його філософія полягала в тому, щоб відкинути високі ідеали краси та «штучність» й показати правду, яка вона є.
• Через десятиліття ця ідея перекочувала в дизайн інтерфейсів і трансформувалась у прагнення відійти від м’яких, шаблонних сайтів. Паскаль Девіль, який ввів термін «бруталізм» у вебдизайн, бачить привабливість стилю в «його грубості та байдужості, щоб виглядати зручно чи легко».
Які основі характеристики веббруталізму?
• Базові, не змодельовані HTML для сайтів;
• монохроматичні колірні схеми, як-от чорно-білі або сірі;
• проста типографіка з великими розмірами шрифту, щоб збільшити візуальну вагу тексту;
• акцент на функціональності без додаткових декоративних елементів;
• повторювані елементи дизайну, прямокутні форми тощо.
🔷 А як вам цей стиль?
Зображення: Studio Push, PART Architects, Stedelijk Museum Amsterdam.
Та усе почалося з архітектури та періоду, коли світ переживав наслідки розрухи після Другої світової війни. Будівлі у цьому стилі не мали декоративних елементів і нагадували важкі бетонні «будинки-коробки» з простими геометричними формами.
Розквіту ж бруталізм як архітектурний напрям набув у 1950-1970-ті. Загалом його філософія полягала в тому, щоб відкинути високі ідеали краси та «штучність» й показати правду, яка вона є.
• Через десятиліття ця ідея перекочувала в дизайн інтерфейсів і трансформувалась у прагнення відійти від м’яких, шаблонних сайтів. Паскаль Девіль, який ввів термін «бруталізм» у вебдизайн, бачить привабливість стилю в «його грубості та байдужості, щоб виглядати зручно чи легко».
Які основі характеристики веббруталізму?
• Базові, не змодельовані HTML для сайтів;
• монохроматичні колірні схеми, як-от чорно-білі або сірі;
• проста типографіка з великими розмірами шрифту, щоб збільшити візуальну вагу тексту;
• акцент на функціональності без додаткових декоративних елементів;
• повторювані елементи дизайну, прямокутні форми тощо.
🔷 А як вам цей стиль?
Зображення: Studio Push, PART Architects, Stedelijk Museum Amsterdam.
🔥40❤8🤔4👍3👎1