Я долго думала когда же увижу эту фичу у кого-то. Идея очень крутая, надо проверить реализацию. Кто-то уже использовал такие цифровые примерочные?

Я тут еще не рассказывала, но у меня больше десяти лет опыта в дизайне именно веб-приложений и сайтов. В Ростелекоме я несколько лет отвечала за их главный сайт, полностью его обновила и выстроила (конечно вместе с командой) дизайн-систему для него.

Следующую серию постов хочу посвятить особенностям верстки. Считаю, что это очень важная штука. Объясню почему.

Когда-то давно я была уверена, что моя зона ответственности заканчивается на макете. Я рисую, разработчик верстает — и всё должно работать. Но что-то постоянно шло не так. Меня как перфекциониста это жутко раздражало. Поэтому в какой-то момент я пошла на курсы для фронтендеров.

Мне казалось, что я просто для общего развития, но в итоге это перевернуло моё представление о процессе. Да, мой сертификат по HTML и CSS уже давно можно повесить в музей 😅 , но принципы остались те же.

В новой серии постов я хочу простыми словами объяснить, какие бывают типы вёрстки, и почему понимание их логики может спасти вам весьма значительное количество времени и нервов.

Дайте реакцию ❤️, что тема вам интересна, это в свою очередь даст мне сигнал рассказывать ли о таких вещах чаще.

👉 Ребят, тут Игорь Готт проводит исследование Дизайн и поиск работы 2025. Мне кажется что это довольно важное исследование, которое поможет нам понять ситуацию на рынке.

Давайте пройдем опрос, а потом все вместе посмотрим результаты.

Пост с подробностями в канале Игоря.

Фиксированная вёрстка (Fixed-width)

Это прием верстки, при котором контент имеет одинаковую ширину (и вероятно высоту, но она нам не так критична обычно) независимо от ширины экрана.

Проверим, как страница Кинопоиска выглядит на ширине 1680 px: весь контент располагается по центру и рассчитан на 1280 px. При увеличении экрана ничего не меняется — просто появляются поля по бокам. Контент не реагирует на изменение ширины окна до совсем уж узкой (там будет точка слома).

Такой приём долгое время был стандартом в вебе. Он удобен:

✦ дизайнеру — не нужно думать, что будет при сжатии или растяжении;

✦ разработчику — всё задано точно, «как в макете»;

✦ тестировщику — сильно проще проверять с визуальной точки зрения.

Но у этого подхода есть минус. На широком мониторе остаётся много пустого пространства.

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

Чаще этот прием комбинируют с другими. Например, боковую навигацию фиксируют, а остальной контент растягивают по ширине. Это очень удобно и довольно часто встречается.

Предлагаю небольшое упражнение. Поищите примеры сайтов, где найдете прием фиксированности. Пришлите его в ответ на этот пост. Поразбираем примеры.

🌿 Первый поток курса по продуктовому дизайну подходит к финалу.

И я, если честно, до сих пор не до конца осознаю, каким он получился. Когда мы запускали обучение, я думала, что оно будет плавным, с короткими задачами и лёгким ритмом. Кажется, получилось совсем иначе.

Мы создали живую экосистему: студентов, менторов, шаблонов, фреймворков, проверок, встреч и обсуждений. И до сих пор не можем остановиться, придумывая новые форматы для студентов.

✨ Самое приятное (на самом деле много всего еще другого приятного) — читать, что студенты используют наши шаблоны (особенно user flow) не только на курсе, но и в реальных проектах: в стартапах, банках, IT-компаниях. Эти шаблоны мы с Ирой делали на основе практики в крупных продуктах, поэтому приятно видеть, что они работают и для других.

🎧 Отдельная гордость — менторские проверки. Я переживала перед запуском этой части. Ведь у нас менторы дают развёрнутую обратную связь, и на одно видео может уходить по 30–40 минут. Но оказалось, что именно эта глубина делает процесс ценным. Студенты благодарят за то, что видят свои работы глазами опытных продуктовых дизайнеров. А менторы говорят, что это помогает им самим — учит структурировать обратную связь и аргументировать решения в своих командах.

📚 Сейчас студенты оформляют свои кейсы.
Мы с Ирой и преподавателями каждый день читаем тексты кейсов. Это, наверное, моя любимая часть. Ребята пишут, что наконец почувствовали, чем продуктовое мышление отличается, что они начали видеть связь между решением, задачей и бизнес-результатом. Для меня это главный показатель.

Значит, курс действительно работает как система, которая помогает переосмыслить свой подход к дизайну.

Если вы хотите послушать более подробно о том как устроена работа продуктового дизайнера и наш учебный процесс в частности, приходите на вебинар в следующую среду Youtube / VK ❤️

А завтра я продолжу рассказывать про верстку)

Резиновая вёрстка — это когда контент подстраивается под ширину окна. Вместо фиксированных пикселей используются относительные единицы — проценты.

Например, если блок занимает 50% ширины, то при растяжении окна он просто станет шире, сохраняя пропорции. Вспомним сайт яблока.

В Figma этот принцип легко повторить с помощью автолэйаутов — задай контейнеру нужную ширину, настройте Hug content (обнимать контент) по ширине и он будет «тянуться» так же, как в реальном интерфейсе.

Главное — не забыть продумать, как элементы поведут себя на крайних значениях:
✦ что произойдёт, если экран станет слишком узким,
✦ и как всё выглядит, когда наоборот, слишком много места.

Это частая ошибка начинающих дизайнеров: текст вдруг не влезает в строку, а макет таких ситуаций не предусматривает. Тогда разработчик решает всё сам — и не факт, что так, как вы задумали 🙂

Часто блоки "резинятся" не бесконечно. Для каждого элемента или для целого экрана можно задать минимальное (min-width) и максимальное (max-width) значение. Например, можно сказать что блок баннера-растяжки резиновый и тянется на 100 процентов экрана, но при достижении размера 1440 пикселей , он больше не увеличивается. Если вы такое делаете, важно продумать что будет по бокам этого блока.

Адаптивная (adaptive) вёрстка — это когда блоки меняют свои свойства в зависимости от ширины экрана.

Что я имею ввиду под словом свойства? На самом деле пости любое свойство обьекта может быть изменено: ширина, высота, резиновый обьтект может стать фиксированным. Текст уменьшается, карточки становятся уже, горизонтальные блоки выстраиваются вертикально, а меню прячется под иконку бургера. Что-то может вообще пропасть или появиться. Например, на мобильной версии часто избавляются от декоративных элементов. Напомню, что момент перестройки называется точкой слома или breakpoint.

Давайте вернемся к примеру Кинопоиска. Если сжать сайт Кинопоиска достаточно сильно, можно заметить, как при ширине 1280 px происходит резкий переход — это и есть точка слома. После неё сайт перестраивается: контент сужается, боковое меню прячется, а структура становится удобной для меньшего экрана.

Именно благодаря адаптивной вёрстке один и тот же сайт может выглядеть органично на десктопе, планшете и телефоне — без отдельной мобильной версии. Это проще и дешевле в производстве, чем отдельные версии.

⚙️ Ваша задача — продумать поведение блоков заранее: что скрывается, что меняет размер, а что должно оставаться на месте. Ну и не забудьте проверить как это реализовано на проде конечно) ❤️

🎓 Сегодня на вебинаре в 19:00 — про работу продуктового дизайнера изнутри.

Знаю, что многим интересно, как на самом деле устроена работа продуктового дизайнера — из чего состоит процесс, какие задачи решаются и как это всё выглядит в реальности.
Сегодня мы с Ирой Федькиной покажем это на примере нашего пайплайна, который полностью повторяет продуктовый процесс — от гипотез до реализации и тестирования.

💡 Разберём, как мы выстроили процесс обучения по тем же принципам, по которым строится работа в продукте.

Покажу внутренние инструменты, шаблоны и решения, которые можно применять в реальных командах.

Приходите послушать, посмотреть и понять, как устроена продуктовая работа изнутри.

Youtube / VK ❤️

Начинаем! Присоединяйтесь на Youtube / VK ❤️

🎬 Пятничная рекомендация

Ребята, сегодня я хочу поделиться тем, что можно посмотреть на выходных. Недавно на канале Файб вышло видео про когнитивные искажения и то, как работает наш мозг. Это одна из моих любимых тем.

Если вы читали книгу «Предсказуемая иррациональность», которую я уже как-то рекомендовала, то наверняка понимаете насколько полезная это тема. В ней очень хорошо показано, что люди — не всегда логичны. И именно это делает нас людьми 🙂

Почему это важно дизайнерам? Потому что мы проектируем интерфейсы для людей, а значит — для их восприятия, привычек и предубеждений. Нам (по своему субьективному мнению) очень важно понимание понимание того, как наш мозг принимает решения.

Поэтому, если хотите провести час с пользой и вдохновением, — посмотрите это видео. Гарантирую, вы начнёте замечать искажения и в своей жизни, и в пользовательских сценариях. Хороших всем выходных! ❤️

🎨 Про визуальные концепции и рост

Ребята, сегодня хочу показать вам показательный пример того, как выглядит реальный прогресс студента на курсе.

С разрешения студента — покажу фрагмент работы Максима. Когда он пришёл, у него не было опыта в дизайне. То, что вы увидите в видео — результат его настойчивости, упорства и, конечно, нашей совместной работы. Всё, что вы видите он сделал сам. Мы только направляли, задавали вопросы, помогали думать. Максим буквально “вырос на глазах”, и это тот случай, когда видно, как человек не просто осваивает инструменты, а начинает думать как дизайнер.

Затем Максим подключился к нашим задачам по платформе UX Rock: помогал со скриншотами, анализом сценариев конкурентов — и этот опыт тоже очень прокачал его насмотренность.

На мой взгляд, это идеальный пример того, как работает обучение, когда студент берёт ответственность за свой рост, а команда помогает ему идти дальше. Талант — это прекрасно. Но результат — это всегда сочетание настойчивости и вовлечённости.

💡 Отдельное спасибо хочу сказать Жене и всей команде UPROCK — мы используем их методологию работы с визуальной концепцией, и она действительно даёт системный результат.

Доступ на сутки бесплатно. Мы сейчас предоставляем возможность на сутки получить бесплатный доступ к курсу, достаточно написать моим коллегам в Telegram @uprock_hello слово «Продукт».

Друзья, я наконец-то взяла себе машину и теперь могу свободно передвигаться.

Как часто тут бывает, я живу в районе откуда без машины выбраться практически невозможно. Я очень не хотела, очень долго боялась и не решалась, но в итоге приняла неизбежность.

Конечно, как дизайнеру, мне было важно выбрать не просто машину, а ту, которая сама по себе — целый опыт взаимодействия с технологией. Вы думаю уже догадались что я взяла себе Tesla Model X ⚡️

И вот теперь я официальный владелец Теслы, пока на год. Буду время от времени делиться своим опытом использования. Некоторые функции в Тесле действительно помогают чувствовать себя увереннее, особенно автопилот. Правда, мне его сейчас отключили на неделю тк муж пытался не держать руки на руле и обмануть машину.

В общем теперь я смогу сделать скрины приложения теслы для uxrock, ну и ездить по городу, если преодолею страх.

Напишите что вам интересно про машину:

🧑‍💻 Скрины приложения
😎 Фото машины
👾 Опыт использования
❤️ Просто поддержать меня и дать мне веру в то что я смогу водить