🧪 Что проверять в прототипе до начала разработки

Екатерина Соловьёва собрала подробный гайд по тестированию прототипов. Ранняя проверка помогает найти проблемы в сценариях и навигации до того, как решения попадут в код и станут дорогими в исправлении. Бумажные наброски подходят для проверки общей идеи и структуры. Интерактивные схемы помогают пройти основные сценарии, а подробные прототипы нужны для проверки текстов, визуала и мелких взаимодействий. Во время тестов стоит фиксировать успешность задачи, время, ошибки и места, где пользователь останавливается или уходит. Внутри: – Как выбрать детализацию прототипа под задачу исследования; – Когда использовать юзабилити-тесты, интервью и экспертную оценку; – Как подготовить сценарии, метрики и участников; – Какие ошибки команды допускают при проведении тестов; – Как проверять доступность интерфейса ещё до разработки. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Обещают очень предметный разговор: → Какие роли нужны проекту и где искать под них людей → Как найти и привлечь первых партнёров с конкретным алгоритмом → Как объединять ресурсы и экспертизу разных людей, сохраняя управление → Как превращать зрителей и разовых участников в сообщество, которое продолжает жить своей жизнью → Пять рабочих схем кооперации, которые помогают проектам выживать и расти в небольших городах Своим опытом поделятся эксперты, которые прошли через городские проекты на практике: Святослав Мурунов — урбанист, социальный инженер, основатель сети Центров прикладной урбанистики. За плечами 40+ городов России и больше 300 тысяч человек, которые благодаря этой методологии запустили свои городские инициативы. Автор методологии «Сетевая модель города». Мария Романова — директор по развитию образовательных продуктов «Городского университета 2.0», организатор крупных мероприятий для IT-сообщества. Вебинар бесплатный, но для участия требуется предварительная регистрация. Реклама. АНО ВО «Городской университет 2.0» Erid:2VtzqvMdr11

Плагин для удобного создания руководства по стилю с типографикой, цветовыми схемами и т.д. Install ️

Install ️

Install ️

Здесь вы сможете быстро создавать схемы, диаграммы и другие данные в формате зарисовок при помощи готовых шаблонов и инструментов. 🔍Глянуть сервис🔍 #сервисы

Сейчас прохожу карьерный курсик, и там было задание собрать компании, продукты и команды, с которыми хотелось бы поработать. Я не ищу работу, но строю долгосрочный нетворк, задание подтолкнуло систематизировать для себя, все что я знаю о брендинговом\графическом рынке Так появилась ❤️ экселька ❤️ Внутри: 👉 Важные премии и фестивали, через которые удобно находить сильных авторов, в том числе начинающих и нишевых (со ссылками) 👉 Рейтинги студий и агентств (тоже ссылочками) 👉 Единый список студий из этих рейтингов со ссылками на сайты (на сайтах вакансии, проекты и ссылки на соцсети) ❤️ и отдельно мои любимые студии, за которыми я слежу и которыми вдохновляюсь. Отрываю от сердца свой секретик. Что бы вы добавили в эту таблицу?

Недавно я рассказывал, что мы с командой готовим большой кейс об одном из наших проектов. И вот сегодня мы наконец его опубликовали 🔛 В прошлом году в агентстве мы создали мобильное приложение для крупной международной компании, разрабатывающей инновационные препараты для эстетической медицины и косметологии. Приложение предназначено для специалистов-косметологов: оно помогает быстро ориентироваться в ассортименте препаратов, подбирать подходящие решения для различных зон лица и тела и получать всю необходимую информацию в одном интерфейсе. Работа над проектом оказалась для нас супер интересной. Мы изучили огромное количество профессиональных материалов, разбирались в препаратах, схемах применения, глубинах введения, анатомических зонах и специализированной терминологии. Всё для того, чтобы создать действительно удобный инструмент, которым специалисты пользуются каждый день. Сегодня приложение успешно работает в App Store и Google Play, а мы наконец готовы показать, как создавался этот проект. ➡️ https://dprofile.ru/case/187898/palitra-fillers-app Отдельное спасибо 💡 Маше за огромную работу над кейсом — получилось очень круто. Много анимации, интересных решений и внимания к деталям. Кейс уже опубликован на 🔥 https://dprofile.ru/case/187898/palitra-fillers-app">Dprofile. Буду признателен за поддержку лайками — это поможет нам попасть в рекомендации. ❤️ @ancora_design

Install ️

Авторы рассказывают, как команда ушла от процесса, где дизайнеры долго полировали прототипы, а разработчики подключались только после передачи макетов. В старой схеме всё выглядело понятно, но на практике ломалось: дизайн тянулся бесконечно, разработчики теряли контекст, прототипы воспринимались как финальный интерфейс, а важные вопросы всплывали слишком поздно. Итеративный подход помог разделить работу на более короткие циклы. Сначала грубая схема и логика, потом интерактивный прототип, потом крайние случаи, ошибки, состояния и уже после этого финальный визуал. На некоторых проектах пошли ещё дальше: брали одну небольшую user story на спринт, быстро собирали прототип, отдавали в разработку и к концу недели показывали заказчику работающий кусок продукта. Это не всегда комфортно, особенно если привык показывать только вылизанный результат, зато команда раньше видит проблемы и дешевле меняет направление. Внутри: – Почему детальные прототипы часто начинают мешать разработке; – Как раннее подключение разработчиков снижает количество переделок; – Зачем начинать с грубой общей картины, а не с polished-макета; – Чем отличаются большие продуктовые итерации от коротких недельных спринтов; – Почему пользователю и заказчику важно заранее объяснять, что они смотрят не финальный дизайн; – Как Design Decision Records помогают не терять причины старых решений; – Когда стоит остановить прототипирование и перейти дальше; – Почему для перфекциониста итеративность может снижать тревогу, а не усиливать её. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Основная идея проекта — собирать, классифицировать и документировать такие практики, а также показывать, какие компании их используют и какие законы с ними борются. Например: Confirmshaming — стыдят пользователя за отказ ("Нет, спасибо, я не хочу экономить деньги"). Hard to cancel — подписаться легко, отменить очень сложно. Fake urgency — "осталось 2 минуты", хотя это неправда. Fake scarcity — "осталось 3 товара", хотя ограничения нет. Hidden costs — скрытые комиссии в конце оформления. Preselection — галочки уже проставлены за пользователя. Trick wording — запутанный текст, из-за которого человек ошибается. Nagging — постоянные всплывающие окна и просьбы. Visual interference — визуально прячут важные опции или выделяют выгодные компании действия. https://deceptive.design

Основная идея проекта — собирать, классифицировать и документировать такие практики, а также показывать, какие компании их используют и какие законы с ними борются. Например: Confirmshaming — стыдят пользователя за отказ ("Нет, спасибо, я не хочу экономить деньги"). Hard to cancel — подписаться легко, отменить очень сложно. Fake urgency — "осталось 2 минуты", хотя это неправда. Fake scarcity — "осталось 3 товара", хотя ограничения нет. Hidden costs — скрытые комиссии в конце оформления. Preselection — галочки уже проставлены за пользователя. Trick wording — запутанный текст, из-за которого человек ошибается. Nagging — постоянные всплывающие окна и просьбы. Visual interference — визуально прячут важные опции или выделяют выгодные компании действия. https://deceptive.design

Кейс NDA. Поэтому, увы, покажу вам бокал, но зато расскажу как это было и как можно получить действительно качественный результат. ⚡️ Дано: презентация pptx на 18 слайдов со сложными схемами. В некоторых схемах 3х-ступенчатый уровень вложенности (кто сталкивался — поймет КАК это больно верстать). 💥 Результат: лендинг на 18 экранов в Claude Design за 3(!) часа с сохранением контента, стиля компании, анимациями и интерактивными схемами 🏃‍♂️ Что получилось: — дословный перенос контента — сохранение фирменного стиля компании — сложные, многоэтажные, статичные схемы стали интерактивными. И это стало главным вау-эффектом для заказчика — спецэффекты без боли: анимации появления экранов и отдельных блоков, эффекты стекла и плавные переходы. 🥲 Главное в этом кейсе — это скорость и возможность повторить алгоритм на других презентациях. Напоминаю, эту красоту со сложнейшим контентом удалось сотворить (десктоп+моб версии) за 3(!) часа. По моему скромному мнению, это — невероятный результат. И наконец-то реальный кейс с эффективным использованием ИИ. Кстати, коллегам так зашло, что на встрече с заказчиком показывали именно лендинг, а не классическую статичную презентацию. 💥 Что нужно на вход, чтобы попробовать применить у себя: — собственно оформленная презентация, сохраненная в .pdf. Но если у вас совсем нет времени, то супер базовая верстка и отдельно прикрепить визуалы. 👀 Важный нюанс: все визуалы прикрепляю отдельными вложениями и прописываю на каком экране какой визуал должен быть. — UI-кит стиля компании. Причем я делала компонентами не так много вещей: палитру, типографику и плашки) Все! Никакие skills, референсы и специальные промпты не давали такого результата, как ui-кит и базово оформленная презентация. Пишите в комментариях, если будут вопросы по алгоритму действий 🙏

Впервые в истории турнир с 48 командами станет более доступным 💜 Сурдоперевод Опять же впервые в истории FIFA трансляция с сурдопереводом на каждом матче. Это иммерсивный опыт для глухих и слабослышащих болельщиков: переводчики передают не только игровые моменты, но и ключевые звуковые сигналы — свистки арбитра, рёв трибун, эмоциональные сдвиги атмосферы, — чтобы зрители чувствовали каждый момент в реальном времени. Всё это живёт в официальной аппке FIFA World Cup 2026™. Я хотела протестировать её на доступность, но она недоступна в рф. Субтитры На стадионах они идут на бегущих строках, табло и экранах, плюс по ссылкам в приложении — для тех, кто хочет следить за голосовым контентом во время матча. Хаптика Это доска размером с планшет с рельефной схемой поля. Кладёшь пальцы на поверхность и следишь за игрой на ощупь: по схеме движется магнитное кольцо — мяч, а у каждого события свой паттерн вибрации — пас, подкат, удар. Незрячий болельщик буквально чувствует игру: где мяч, в какую сторону атака, гол. Будут на стадионах в Далласе, Нью-Йорке, Сиэтле и Ванкувере. Сенсорные пакеты и сенсорные комнаты На каждом стадионе будут доступны сенсорные пакеты с шумоподавляющими наушниками, fidget-инструментами и средствами коммуникации. Также будет оборудована сенсорная комната с приглушённым освещением, звукоизоляцией, тактильными арт-объектами и мягкими сиденьями. Моя дочка устаёт от шума, и для нас такие комнаты — огромное спасение. Когда вокруг 50 тысяч кричащих людей, возможность выйти на десять минут в тихое место, выдохнуть и вернуться к игре — спасает от побега с игры ) Официальное приложение турнира тоже сделано с учётом доступности — обещают регулируемый размер шрифта, настройку цветового контраста и субтитры к видео. Ну вот это я проверить не могу. Если вы не в рф, качните, гляньте, что там. И если несложно, напишите в комментах, как всё реализовано на самом деле. Очень интересно ) На сайте FIFA посмотрела быстро: работает со скринридером (но нужно тщательнее проверять), альты прописаны, даже есть изображения в разных размерах, значит сайт быстрее загрузится, контрастность гуд, таб работает, зуммируется все прекрасно, текст не обрезается. И знаете, это большая работа. Просто молодцы! За кого болеть будем? ⚽️

А ведь настоящие продуктовые проблемы часто скрываются на стыке команд. Между поиском и корзиной. Между онлайном и оффлайном. Между ожиданиями пользователя и реальностью бизнеса. Дизайнер, который долго работает внутри одной части продукта, часто перестаёт замечать эти проблемы. Что делать? 🔵Пользоваться собственным продуктом. Возможно в B2B/B2E сегментах это и не всегда возможно, но если мы имеем дело с B2C — грех не быть пользователям сервиса доставки, такси, почты или банка; 🔵Проектировать дизайн, учитывая все корнер кейсы, отражая в Фигме все состояния системы и условия поведения пользователя; 🔵Собирать кликабельный прототип и проходить его перед показом дизайна. Делать это можно и стандартными средствами Фигмы и с помощью ИИ; 🚤 И ещё кое-что. Устроившись в продукт я обычно рисую blueprint-схему работы продукта — она помогает не только вникнуть в процессы, попутно обнаруживая точки роста и проблемы продукта, но и познакомиться с большинством ключевых команд. Дизайнер, который видит весь end-to-end опыт ценнее того, кто знает только свой кусок продукта. 🌊🌊

https://fvdesign.org/knigi/kniga-nejroseti-v-dizajne-odezhdy-3-0/ Практическое руководство для дизайнеров, брендов и студентов, где собраны 20+ актуальных нейросетей для работы с эскизами, принтами, бордами, виртуальной примеркой, 3D-визуализацией и автоматизацией рутинных задач. Это обновлённая версия 2025 года, с новыми инструментами, пошаговыми инструкциями и промптами для эффективной работы. Книга в формате черновика — вся информация свежая и будет регулярно обновляться! Для начинающих дизайнеров, брендов и всех, кто хочет работать быстрее, творить смелее и зарабатывать больше! 📚Книга : Adobe Illustrator в дизайне одежды https://salebot.site/perech_kniga_1?utm_course=Telegram Автор : Чайковская Екатерина Дизайн одежды — это особый мир со своими правилами и законами. Для того чтобы стать в нём профессионалом и чувствовать себя как рыба в воде, необходимо знать, как устроены процессы, на что нужно обратить внимание, какие программы используется в работе. Эта книга познакомит вас с одной из таких программ– Adobe Illustrator. Здесь, вы найдёте описание этапов работы дизайнера, как работать с векторной графикой, как создавать технические эскизы и технологические схемы, а также много полезных инструкций и лайфхаков для дизайна одежды. Все техники опробованы и используются автором лично, а также получили одобрение от студентов.

Пока у команды нет общей структуры, каждый экран собирается заново: где-то основной текст 14 px, где-то 16 px, где-то межстрочный интервал выставлен руками, где-то тот же жирный стиль выглядит иначе. В макетах это еще терпимо, а в разработке быстро превращается в хаос. Олуватосин Обалана показывает практичный подход, как собрать типографику через примитивные и семантические токены и масштабировать ее на веб, планшет и мобильный в Фигме. Ценность статьи в том, что это не просто теория про читаемость, а пошаговая схема: как назвать токены, как разложить роли текста, как связать стили с переменными и переключать режимы без дублей. Внутри: – Какие принципы держат типографику в порядке: удобство, ясность, иерархия; – Какие базовые требования по доступности стоит заложить сразу: размер текста, контраст, межстрочный интервал, масштабирование; – Что такое примитивные токены и какие свойства туда выносить: семейство, вес, размер, межстрочный и межбуквенный интервалы; – Зачем нужны семантические токены и почему они снимают ручные правки по всему продукту; – Как назвать токены по иерархии, чтобы дизайнеры и разработчики говорили на одном языке; – Как разложить роли текста: Display, Heading, Subheading, Body, Caption, Label; – Как считать межстрочный интервал через коэффициенты для крупных и мелких размеров; – Как настроить в Фигме режимы для разных экранов и не плодить отдельные стили под каждый размер. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Самые важные фидбеки редко приходят от автоматических проверок, они приходят от реальных людей. Поэтому GitHub сделал такую схему: фидбэк от пользователей собирается в одном месте, Copilot делает первичный анализ: классифицирует по WCAG, выставляет приоритеты, предлагает команду, а потом всё это проверяет живая a11y team. И если есть расхождение между Copilot и человеком, по умолчанию считают, что прав человек. Год назад почти половина фидбэка по доступности оставалась нерешённой более 300 дней. Сегодня этого бэклога нет вообще: 89% задач закрываются в течение 90 дней 62% сокращение среднего времени решения 70% сокращение ручного административного времени 1150% рост задач, решённых в течение 30 дней 50% сокращение критических задач уровня sev1 100% задач закрыты в течение 60 дней в нашем последнем квартале Я зашла на их форум, там 3 года не могли поменять светло-серые галочки в формах на более контрастные. И знаете что? Поменяли. Правда пока только в тёмной теме, но не будем придираться, дадим время на светлую )) Ведь важно то, что они сделали рабочую систему, которая будет развиваться и делать их продукты доступнее. Ссылка на статью

На этом сайте вы найдёте готовые цветовые схемы или можете создать свою. 🌈Глянуть сайт🌈 #сервисы

Когда вы кодите с LLM, проблема обычно не в том, что модель совсем ничего не умеет. Она умеет слишком правдоподобно угадывать. Поставит 12px там, где у вас должно быть 8px, выберет «почти тот» синий, придумает токен, которого в системе нет, и на каждом новом сеансе начнет делать это заново. По отдельности всё выглядит нормально. Вместе получается интерфейс, который расползается уже через несколько итераций. Здесь предлагают довольно жесткую, но рабочую схему: не надеяться на память модели, а дать ей опору в виде спецификаций, закрытого слоя токенов и автоматического аудита. То есть вынести дизайн-систему в структуру, которую LLM может читать как источник истины, а не как намек. Тогда она не выдумывает значения, а берет их из ограниченного набора, а любое отклонение ловится скриптом до ревью. Внутри: – Почему LLM плохо держат дизайн-систему в голове даже в рамках одного проекта; – Какие три ограничения модели быстрее всего разваливают консистентность интерфейса; – Зачем делать отдельные spec-файлы для foundations, tokens, components и patterns; – Почему закрытый слой токенов лучше, чем набор «примерно правильных» значений; – Как аудит по CSS ловит хардкод и не дает визуальному дрейфу копиться; – Зачем связывать инструкции для агента, токены и CI в одну систему; – Почему такой подход особенно важен для больших прототипов и длинных AI-сессий; – Как именно структура дизайн-системы превращается из знания в голове в рабочую инфраструктуру. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы