IZUM.STUDY

Салют, друзья! 🤘

Открываем пятый урок бесплатного курса по Taptop.

На этот раз собираем блок «Красные флаги». Это не обычный слайдер с кнопками или свайпом, а блок, который работает по скроллу.

Урок разбили на 2 части.

Сначала собираем статику: структуру блока, линии, декоративные квадратики, контентную часть, карточки и визуалы.

Потом переходим к самому интересному: настраиваем и разбираем позиционирование sticky, отключаем pointer-events там, где это нужно, и собираем анимацию смены слайдов по скроллу.

В итоге получается блок, который фиксируется на экране, а карточки, номера, заголовки и описания меняются во время движения страницы.

Новый урок уже доступен в боте: @Izum_Study_bot

Смотрите, пробуйте повторить за Андреем и пишите в закрытую группу, если что-то непонятно или хочется обсудить ❤️

🧩 Taptop Helper: расширение, которое делает редактор удобнее

Недавно в Taptop добавили AI Assistant прямо в редактор кода. Идея, возможно, хорошая, но на старте получилось спорно: новый блок занял часть пространства, а поле с кодом стало заметно меньше.

Если нужно быстро поправить пару строк, это ещё можно пережить.
Но если вы работаете с CSS, HTML, адаптивами, скриптами и точечными правками, такое окно быстро начинает мешать.

Пользователи начали жаловаться, и Taptop довольно быстро поправил проблему. Но наш разработчик Денис Васильевич уже успел сделать своё решение: расширение Taptop Helper для браузера.

Оно не только убирает лишний AI-блок, но и закрывает ещё несколько рабочих неудобств:

✅ Добавляет поиск по коду через Cmd/Ctrl + F
✅ Позволяет раскрыть модалку редактора по высоте
✅ Даёт вручную менять размер окна
✅ Добавляет поиск по слоям
✅ Расширяет область предпросмотра
✅ Убирает элементы AI assistant и оставляет чистый редактор кода.

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

Пока расширение можно установить только через файл. Сам файл оставим в комментариях.

В закрытой группе уже сделали раздел Taptop Helper. Там можно обсудить расширение и предложить, что доработать.

Салют, друзья! 🤘

Открываем четвёртый урок бесплатного курса по Taptop.

На этот раз верстаем обложку лендинга. Урок разбили на 3 части, чтобы спокойно пройтись по структуре, деталям и адаптивам.

Внутри сначала разбираем важный момент с SEO: семантические теги для Header, Nav, Main, Section и заголовков.

Потом собираем саму обложку: секцию Cover, контейнер, cover-wrap, высоту на весь экран, внутренние отступы и границы.

Отдельно подробно разбираем Auto Layout: Grid: как он работает, как настраивать, как выставлять элементы и чем отличается от Flex.

Дальше добавляем внутренние элементы: буквы ГКВ через div-маски, центральный блок с заголовком, текстом и кнопкой, отдельный H1 для SEO, серый фон, линии и декоративные квадратики.

В финале адаптируем обложку под планшет и мобильную версию: меняем колонки, отступы, размеры букв, расположение центрального блока и настраиваем 100svh, чтобы обложка корректнее работала на мобильных устройствах.

Новый урок уже доступен в боте: @Izum_Study_bot

Смотрите, пробуйте повторить за Андреем и пишите в закрытую группу, если что-то непонятно или хочется обсудить ❤️

IZUM.STUDY pinned a photo

🔎 Почему не стоит сразу прыгать в вёрстку?

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

Но перед стартом лучше внимательно изучить макет.

Не пробежать глазами за пару минут, а реально посмотреть структуру, разрешения, состояния и спорные места. Да, на это нужно потратить время. Но часто именно это время потом экономится в процессе вёрстки.

Важно заранее понять:

• какие есть разрешения
• сколько блоков в проекте
• есть ли UI-kit
• прописаны ли состояния: hover, active, disabled, error
• всё ли понятно по адаптивам
• всё ли дизайнер подготовил корректно
• какие вопросы лучше задать до старта

Последний пункт особенно важен. Вопросы к макету и ошибки лучше поймать до вёрстки, а не когда уже готова половина сайта.

Типичный пример — текстовые стили.

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

Размер, межстрочка, ширина и поведение на адаптиве могут меняться. Но логика элемента должна сохраняться.

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

Если сразу прыгнуть в вёрстку «с первого экрана», очень быстро можно упереться в вещи, которые проще было спросить у дизайнера заранее.

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

В моменте кажется: «Разберусь по ходу».

Но часто это превращается в переделки.

Когда мы заранее изучаем макет, становится понятнее, что вынести в базу, какие элементы собрать в UI-kit, где могут понадобиться дополнительные настройки и какие вопросы лучше задать до начала сборки.

Поэтому нормальный старт вёрстки начинается не с первого div’а.

Сначала смотрим макет.
Понимаем структуру.
Проверяем текстовые стили и состояния.
Собираем вопросы к дизайнеру.

И только потом идём верстать.

Так меньше сюрпризов, меньше переделок и меньше ситуаций из серии «а почему это всплыло только сейчас?» 😎

Зачем мы верстаем в rem? 🧑‍💻

В Taptop можно работать с разными единицами измерения: px, vw, vh, em и rem. У каждой из них своя логика, но для флюида подходит не всё.

Пиксели понятные, но жёсткие. Если задать элементу 40px, он так и останется 40px, независимо от ширины экрана. А нам нужно, чтобы размеры интерфейса пропорционально менялись.

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

em тоже может запутать. Эта единица привязана к размеру шрифта конкретного блока. Из-за этого отступ 3em у крупного заголовка и у мелкого абзаца даст на экране абсолютно разные расстояния.

А вот rem работает спокойнее. Он привязан к одному единственному корневому элементу (root), поэтому 3rem всегда дают предсказуемый размер для любых блоков.

Но просто переключиться на rem недостаточно. Традиционно за основу корня берут 16px. Под эту базу созданы десятки сервисов-конвертеров. Но пересчёт от 16 сложный: чтобы получить точные отступы из макета, нужно постоянно держать калькулятор открытым.

Мы делаем иначе: через embed с глобальными стилями прописываем скрипт и задаём корень так, чтобы на основном разрешении макета он был равен ровно 10px.

Например, если макет нарисован на 1600, значение в скрипте получается 0.625vw. Для макета на 1440 цифра будет другой, но суть остаётся.

Как только root настроен на 10px, мы полностью освобождаемся от калькуляторов. Начинается нормальная жизнь:
• в макете отступ 40px → просто пишем 4rem
• заголовок 56px → ставим 5.6rem
• элемент 120px → пишем 12rem

Берём значение из Figma, мысленно делим на 10 и переносим в Taptop. А когда доходим до адаптива, логика сохраняется. Вам не нужно пересчитывать значения элементов руками — вы просто добавляете в скрипт нужный брейкпоинт (планшет или мобилку) и его vw‑значение.

Ещё один нюанс. В скрипте можно оставить PC без ограничений — тогда интерфейс будет флюидно расти вместе с шириной монитора. А можно поставить потолок (например, на 1920): после этой точки элементы зафиксируются в абсолютных значениях. Это отлично выручает, когда на огромных экранах всё начинает казаться слишком гигантским. 🖥

Салют, друзья! 🤘

Открываем третий урок бесплатного курса по Taptop.

На этот раз начинаем верстать основной лендинг и заходим в Header. Урок получился большой, поэтому разбили его на 4 части.

Внутри собираем базовую структуру страницы, делаем кастомное меню через div’ы, фиксированный Header, фоновую сетку и адаптацию под планшет.

Отдельный интересный блок — мобильная версия. Собираем бургер, выезжающее меню, настраиваем 100svh, декоративные элементы и нативную анимацию: меню открывается, закрывается по бургеру и по пунктам, а сам бургер превращается в крестик.

Новый урок уже доступен в боте: @Izum_Study_bot

Смотрите, пробуйте повторить за Андреем и пишите в закрытую группу, если что-то непонятно или хочется обсудить ❤️

🖥 Почему для PC‑макета мы просим 1600?

Нас часто спрашивают дизайнеры: почему лучше рисовать десктоп именно на 1600, а не на 1440, 1366 или 1920?

Короткий ответ: для флюидной вёрстки это самая удобная точка отсчёта.

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

Обычно нам хватает трёх точек:
📌 1600 для PC
📌 768 для планшета
📌 390 для мобильной версии

Почему именно 1600?
Потому что это золотая середина, которая даёт адекватные пропорции при растягивании и сжатии экрана.

Смотрите, как это работает на практике:
• Если взять за базу 1280, то при просмотре на мониторе 1920 все элементы увеличатся в полтора раза — интерфейс станет гигантским. Придётся добавлять новые брейкпоинты, чтобы это успокоить.
• Если верстать от 1920, то на экранах компактных ноутбуков (1366px) всё сожмётся почти на треть и станет слишком мелким.

При базе 1600 мы получаем комфортный баланс. На широких мониторах контент не раздувается до неадекватных размеров, а на небольших ноутбуках остаётся читаемым и аккуратным.

Конечно, дизайнеры часто отдают макеты в 1366 и 1920. С этим тоже можно работать: верстать от 1366 и корректировать отступы на 1920. Но если на 1920 реально меняется сетка и композиция — это уже отдельная полноценная вёрстка.

Для большинства лендингов 1600 закрывает десктоп без лишних костылей и новых состояний.

А в следующем посте мы отойдём от пикселей и разберём, почему такую вёрстку гораздо удобнее и быстрее собирать в rem. 🧮

Салют, друзья! 🤘

Пока майские немного выбивают из рабочего ритма, мы открываем второй урок бесплатного курса по Taptop.

На этот раз заходим в UI-kit. Он простой, но важный: типографика как основа будущей вёрстки, кликабельные элементы и базовая подготовка проекта к сборке.

Самое интересное в уроке — понятная настройка единиц измерения rem. Это сильно упрощает жизнь, ускоряет вёрстку и помогает дальше спокойнее работать с адаптивами.

Новый урок уже доступен в боте: @Izum_Study_bot

Смотрите, пробуйте повторить за Андреем и пишите в закрытую группу, если что-то непонятно или хочется обсудить ❤️

Салют, друзья! 🤘

Запускаем полностью бесплатный курс по Taptop. Никаких прогревов и долгих воронок.

Да, курс базовый. Но опытным ребятам тоже будет интересно. Покажем наш подход к UI-kit, адаптивам, скрытым состояниям и структуре проекта.

На практике собираем лендинг ГКВ («Готов к верстке»). Разберем красные флаги в макетах, чеклист и анимации. Пройдемся по мелочам, которые обычно всплывают уже в процессе сборки.

Уроки выходят раз в 3-4 дня. Специально открываем дозированно. Вы успеваете всё посмотреть и задать вопросы, а мы собираем обратную связь и делаем короткие разборы в закрытой группе.

Этим курсом мы начинаем масштабное обновление IZUM STUDY. Новые заставки в уроках — небольшой тизер нашего ребрендинга 🤫 Про новый стиль и планы расскажем отдельным постом.

Первые уроки уже лежат в боте: @Izum_Study_bot
Залетайте смотреть и пишите в закрытую группу, если есть вопросы ❤️

#ачивка
Салют! 👋

⚡️У нас маленький, но очень приятный повод порадоваться: сайт TKS (tks.world) взял Site of the Day (SOTD) в Showcase от GSAP 🏆

Радуемся вдвойне, потому что в эту престижную подборку мы попали впервые.

Для тех, кто не пишет код, коротко поясним: GSAP — это самая мощная в мире библиотека для веб-анимаций. На ней работает большинство топовых сайтов со сложным интерактивом. Оказаться в их официальном шоукейсе — это как получить знак качества от создателей индустриальных стандартов.

Это значит, что мы не просто нарисовали красивый дизайн, но и технически безупречно его «оживили».

Сайт проекта: https://www.tks.world/
Мы в шоукейсе: https://gsap.com/showcase/

Зацените, как всё плавно работает, и делитесь в комментариях — какая анимация зацепила больше всего?

Обняли. Ваш IZUM ❤️

🚀 Отличные новости: TKS.WORLD попал в подборку Website of the Month от CSS Design Awards.

Это шорт-лист лучших сайтов за февраль. Но особенно приятно видеть, с кем мы делим эту номинацию — среди авторов Locomotive, OFF+BRAND, Outpost и другие крутые ребята.

Оказаться в компании таких мастодонтов индустрии — большая честь для нас. Это значит, что уровень и качество, которые мы задаем в IZUM, замечают на мировом уровне.

Продолжаем держать планку и ждем результатов от жюри 😎

🔗 Все номинанты по ссылке: https://www.cssdesignawards.com/blog/website-of-the-month-2026-february/431/

Ваш IZUM ❤️

То, за что мы платили WebGL-разработчику, наш дизайнер вчера собрал за 120 минут. Тест новой Gemini 3.1 Pro 🤯

На нашем образовательном проекте izum.study есть сложная Three.js сцена. В свое время, чтобы её реализовать, мы специально нанимали узкопрофильного WebGL-специалиста.

Вчера наш лид решил устроить стресс-тест новой Gemini 3.1 Pro: сможет ли он воссоздать эту анимацию с нуля, используя ТОЛЬКО текст?

Результат нас всей студией реально впечатлил.

Да, собрана пока только первая часть (перетекание волны из тысяч частиц в торнадо и сборку в идеальную 3D-сферу по скроллу). Но это было сделано всего за 120 минут одним человеком!

Обычно такая математика в GLSL-шейдерах отнимает дни:
⚡️ Модель сама прописала логику на кривых Безье, чтобы частицы летели плавно и не вылетали за границы экрана.
⚡️ Сама жестко связала математику воронки со скроллом через GSAP.
⚡️ И даже решила классическую проблему WebGL с микро-погрешностями GPU на первом и последнем кадрах, сделав анимацию бесшовной.

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

Как вам результат для 2 часов промптинга? Оцените от 1 до 10 🔥
Делитесь мыслями в комментах, интересно обсудить, как быстро ИИ меняет нашу индустрию 👇

Safari в 2026-м — это главная боль разработки.

Движок WebKit живет в своей реальности. Он консервативен, капризен и обожает игнорировать стандарты.
Вот наш топ-3 проблем, из-за которых хочется разбить телефон об стену:

1️⃣ Резиновый скролл (Overscroll).
В iOS страница тянется, даже когда контент закончился. Ты делаешь фиксированный хедер или попап, а пользователь свайпает вниз — и видит «дыру» в верстке. Контент под position: fixed начинает вылезать и дрожать.
Safari считает это фичей, мы — багом. Лечится только жесткой блокировкой скролла скриптами, иначе сайт выглядит сломанным.

2️⃣ Лотерея с видео.
Хотите поставить красивый фон на первый экран? Safari скажет «нет».
Политика Apple жестко блокирует автоплей. Забыли атрибут playsinline? Видео не запустится. Включили режим энергосбережения? Видео встанет колом.
Приходится писать кучу условий, чтобы пользователь не увидел черный квадрат вместо вау-эффекта.

3️⃣ Эффекты и анимация «на ощупь».
Парадокс: Apple придумала глассморфизм, но Safari хуже всех его рендерит.
Сложные backdrop-filter вызывают артефакты или просто отключаются.
А нативные CSS-анимации — это вообще русская рулетка. То, что плавно едет в Chrome, в Safari дергается или мерцает. Приходится настраивать тайминги вслепую и обвешивать код хаками вроде will-change и transform: translateZ(0), просто чтобы заставить браузер работать нормально.

В IZUM мы не спорим с Купертино, мы адаптируемся.

🛠 У нас есть негласное правило: задача не закрыта, пока её не потыкали на реальном айфоне.
Клиенту не важно, что Apple «думает иначе». Ему нужен работающий продукт.
Поэтому мы молча делаем двойную работу: одну для всего мира, и вторую — специально для Safari.

👇 Признавайтесь: какой баг Safari отнял у вас больше всего нервов?
Делитесь в комментариях, устроим перекличку пострадавших.

🚀 Коллаба с Лагутой: запустили базу «Плюс к уровню»!

Недавно к нам обратился Саша Лагута с задачей сверстать базу участников его менторского клуба.

Собрали всё на Taptop. На первый взгляд проект кажется простым, ну каталог и каталог. Но над деталями пришлось подумать. Самое интересное здесь это фильтрация. Мы сделали её обратной: по умолчанию выбраны сразу все категории. Ты не «накликиваешь» нужное, а просто отсекаешь лишнее. Это нестандартный паттерн, но работает он логично и интуитивно.

Ну и конечно, прикрутили переключение тёмной и светлой темы. Вроде бы мелочь, но добавляет комфорта.

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

Теперь всех их можно найти на одной удобной площадке. Сохраняйте себе базу, пригодится:

🔗 https://hire.plustolevel.ru/

Рады быть причастными к запуску такого инструмента.

Если вам тоже нужно быстро и качественно сверстать проект — пишите нам. Обсудим!

Ваш IZUM ❤️

😍 Когда дизайн это вызов, получается Боноферлат.

Девчата из е—б эдженси выкатили мощный кейс на Dprofile. Мы отвечали за техническую часть, и задача была со звездочкой: превратить смелый дизайн в работающий сайт, который не развалится от анимаций.

👉 Что делает этот проект особенным:

✨ «Живой» интерфейс: капсулы разлетаются, иконки перелетают между блоками
✨ Сложная логика на Taptop: 90% сделали нативно, GSAP подключили только для заголовков
✨ Скорость: собрали всё за 8 дней, хотя казалось, что нужно недели три

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

Залетайте посмотреть, как всё это работает в связке.

👀 Кейс на Dprofile: https://dprofile.ru/case/168595/sait-dlia-bad-bonoferlat
👉 Сайт вживую: https://bonoferlat.ru

Рады работать с такой креативной командой.

Ваш IZUM ❤️

LITESHOP — Site of the Day на CSSDA 🔥

Еще одна награда в копилку IZUM, на этот раз за техническую реализацию проекта для брендингового агентства Лайтшоп2.

Это была мощная коллаборация: смелый дизайн от Савы и команды AVA при участии Саши Назарова (Лайтшоп2), плюс наша разработка.

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

Теперь это не просто красивый концепт, а рабочий инструмент топового агентства, признанный международным жюри.

Команда проекта:
🎨 Дизайн: Сава, AVA, Саша Назаров
💻 Разработка: IZUM

Посмотреть награду: CSSDA
Посмотреть проект: https://liteshop.design/

TKS World взял Site of the Day на CSSDA 🏆

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

Что сделали:
— Спроектировали и запустили 20+ уникальных страниц.
— Настроили сложную CMS для образовательных программ.
— Всё собрали на WebFlow: сайт быстрый, адаптивный и легкий в поддержке.
— Оживили интерфейс с помощью GSAP. Это дало нам полный контроль над плавностью и характером всех анимаций на сайте.
— Проработали гибридный UX: визуал цепляет подростков (13–17 лет), но структура понятна родителям и партнерам.

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

Посмотреть проект: https://www.tks.world/

Ссылка на награду: https://www.cssdesignawards.com/sites/tks-world/48814/

TKS World: Финальный релиз! 🚀

Помните историю, как наш кейс по редизайну MINDVALLEY на Behance привёл нас к международному клиенту?

Мы прошли путь от первой тестовой страницы за $100 до глобального обновления всей экосистемы. И вот сегодня — финишная черта.

Сайт TKS World полностью в продакшене.

Что под капотом:
Обычно на канале мы показываем проекты собранные на Taptop, но под задачи TKS (масштабирование, западный рынок, специфика поддержки) WebFlow подошёл идеально.
⚡️ 20+ уникальных страниц
⚡️ Сложная CMS структура для программ и историй выпускников
⚡️ Анимации, интеграции и полная адаптивность

Это масштабная платформа для будущих инженеров и фаундеров, которые уже стажируются в SpaceX и Google. Дизайн, кстати, уже успел забрать «рыжую» и «золотую» на Dprofile, пока мы допиливали вёрстку.

Теперь всё это можно потыкать вживую.

👉 Смотреть результат: https://www.tks.world/

Принимайте работу. Это был долгий, сложный, но кайфовый марафон.

Всех обняли,
Ваш IZUM ❤️

#кейс
Салют! Всех с прошедшими праздниками! 🎄

Надеемся, вы отлично отдохнули и уже ворвались в рабочий ритм. Мы — да! И сразу с премьерой.

Открываем год новым кейсом MangoBike. Для нас это знаковая работа — мы в IZUM активно развиваем и усиливаем направление продуктового дизайна. Здесь мы сфокусировались не только на сочном визуале, но и на глубокой проработке UX: чтобы сложный функционал шеринга ощущался легким и интуитивным.

MangoBike — это сервис, который помогает путешественникам и жителям Юго-Восточной Азии находить идеальный транспорт: от юрких скутеров до комфортных авто.

Что внутри приложения:
🔸 Умная карта — поиск транспорта поблизости в пару тапов.
🔸 Удобный каталог — детальные карточки с характеристиками.
🔸 Безопасность — предусмотрели кнопку SOS для экстренных ситуаций.
🔸 Легкий старт — понятный онбординг и быстрая регистрация.

Кейс уже доступен на двух площадках. Залетайте, смотрите структуру и поддержите команду лайком — для нас это отличный старт года! 👇

🔗 Behance: https://www.behance.net/gallery/242120229/MangoBike-Mobile-app
🔗 Dprofile: https://dprofile.ru/case/164210/mangobike-mobilnoe-prilozenie

Команда проекта:
CEO — Дмитрий Упит
Design Lead — Ольга Дубовская
Designers — Татьяна Стребкова, Алёна Неверова

Ваш, IZUM ❤️