Максим Постников | Дизайн, Тильда и модификации

➕🔥 Кастомный аккордеон внутри Zero-блока

А что если я скажу, что теперь аккордеон можно просто сделать в одном Zero-блоке? Вот просто взять и сверстать – без TX16N, разбивки на несколько блоков и лишних контейнеров.

Да! Теперь это правда ⚡️
Сделал модификацию, которая позволит вам создавать любые аккордеоны внутри Zero-блока. Можно как угодно менять их внешний вид, делать несколько колонок и располагать в абсолютно любом месте – и всё будет работать, как будто это стандартный аккордеон.
Только в Zero)

Как пользоваться:
Просто верстаем карточки в раскрытом состоянии, добавляем им нужный класс, и они будут автоматически сворачиваться/разворачиваться. А Zero-блок и элементы под аккордионом – подстраивать свою высоту и положение под контент)

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

Ссылка на модификацию:
https://postnikovmd.com/mods/accordion

Приятной работы) 💥

Максим Постников | Дизайн, Тильда и модификации

Ребята, всем привет ❤️ Во вторник 18.03.2025 в закрытом клубе пройдет мастер класс

Что у Тильды под капотом?
Делаем кастомный слайдер и вкладки на автолэйаутах

Поговорим о тонкостях работы Тильды и научимся создавать несколько функциональных решений на Zero‑блоках

– Разберём, как работают Zero‑блоки изнутри
– Посмотрим возможности новых автолэйаутов
– Создадим на них Zero‑слайдер и вкладки
– И просто поболтаем о дизайне, Тильде и модификациях

Мастер-класс проведет Макс Постников @postnikovmd Обязательно приходите позадавать вопросы. Будем потихоньку привыкать к автолэйаутам и использовать их на 100% эффективности 😊❤️

Вступить в закрытый клуб можно по ссылке https://m-vasilyev.site/club

Привет, я к вам с анонсом)

В следующий вторник проведу мастер-класс по Zero-блокам и автолэйаутам на закрытой встрече в сообществе Вместе Всё Получится.

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

✍️ Свои правила валидации значений в формах

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

Очень полезная штучка для создания кастомных ограничений. Например, с её помощью можно:
– запретить ввод чисел, меньше 10 и больше 100
– ограничить ввод личных почт (gmail, mail и др.)
– запретить нулевой код товара «0000»

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

Забирайте к себе рабочий код с генератором правил) ⚡️

Ссылка на модификацию: https://postnikovmd.com/mods/forms/validate

Максим Постников | Дизайн, Тильда и модификации

🎲 Поддержка автолэйаута и групп для Zero-слайдера и вкладок

Теперь слайдер и вкладки можно верстать полностью в автолэйауте! Завёз в модификации поддержку групп с типом Object: если им присвоить нужный класс, они будут работать точно так же, как и отдельные элементы. А ещё иметь поддержку автолэйаута)

Например, этот слайдер состоит из объектов с классом .slide, объединенных в общий контейнер. Да ещё и в полном автолэйауте – благодаря недавнему обновлению Тильды, которое позволяет подстраивать весь Zero-блок под размер содержимого. Теперь всё это можно настроить в пару кликов)

Обновления уже можно найти на страничках модификаций:
• Zero-слайдер
• Слайдер с переключением вкладок
• Слайдер в любом шейпе Zero-блока
• Вкладки из Zero-блоков
• Переключатель Zero-блоков
• Переключатель контента в Zero-блоке

И также добавлена поддержка автолэйаутов для всего Zero-блока для расширенного автоскейла.

Скажите, вы там успеваете пробовать модификации? Напишите в комментариях, стоит ли рассмотреть каждую из них подробнее?) 🔥

Максим Постников | Дизайн, Тильда и модификации

✔️ Бета-версия модификаций — всё!

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

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

И как полагается в приличном дизайнерском обществе, у модов теперь есть свой кейс ☺️
https://www.behance.net/gallery/220292349/biblioteka-modifikacij-dlja-tildy

Буду рад вашей поддержке, накиньте там лайков и комментариев) ✨

Максим Постников | Дизайн, Тильда и модификации

📹 Наконец-то у модов появились видеоинструкции!

Записал для вас более 2-х часов полезнейшего контента по работе с библиотекой модификаций. Разобрал примеры с сайта, особенности каждого мода и повторил всё точь-в-точь: хэдер, слайдеры, вкладки, формы и многое другое.

Делюсь с вами супер-качественной подборкой. На её создание ушло 3 недели плотной работы. Вплоть до таймкодов)

VK Видео: Ссылка
YouTube: Ссылка

Все видео теперь также можно найти на страничке самих модификаций в разделе «Видеоинструкция» ✨

Ссылка на модификации: https://postnikovmd.com/mods

Приятного просмотра) Сделано с душой и вдохновением 🤍

Максим Постников | Дизайн, Тильда и модификации

🆕 Отключение автоскейла для отдельных браузеров/устройств

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

Автоскейл работает по-разному в зависимости от браузера и ОС. В большинстве случаев всё хорошо, но с некоторыми устройствами у него до сих пор напряженные отношения, которые достаточно сложно исправить.

Например:
1. Сайты с большим количеством текста перегружают слабые процессоры вычислениями и отрисовываются на iOS медленнее.
2. На айпадах текст может становиться слишком маленьким при загрузке страницы в автоскейле.
3. Во встроенных браузерах iOS (например, в Telegram) вёрстка сайтов с автоскейлом иногда слетает и отображается криво.

Теперь эти проблемы можно решить с помощью модификации, которая позволяет отключать автоскейл для определенных устройств)⚡️

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

Ссылка на модификацию: https://postnikovmd.com/mods/rescale/disable

Сохраняйте к себе, чтобы не потерять 🔥

Максим Постников | Дизайн, Тильда и модификации

Чем я занимаюсь на работе? 🖼

До сегодняшнего дня я бы ответил на этот вопрос вполне однозначно: отвечаю за дизайн и разработку корпоративных сайтов в ИТ-консалтинге. Это простой ответ, который можно дать, не напрягаясь, но на деле всё не совсем так.

Я занимаюсь настолько разнородными задачами, что сразу и не скажешь. Это и маркетинг, и UX, и дизайн, и front-end разработка – в общем, всё, из чего формируется мой конечный продукт. Но недавно я смог уложить всё в исчерпывающий список)

Нас с коллегами попросили написать функциональные области, с которыми мы работаем. И вот, что вышло у меня:

⚡️ Исследования и стратегия
– Определяю ключевые метрики и бизнес-требования к сайтам
– Организую и провожу UX-исследования, изучаю потребности пользователей и лучшие практики в дизайне и веб-разработке
– Формирую технические требования, исходя из бизнес-целей и запросов рынка
– Занимаюсь тактическим и оперативным планированием разработки: формирую роадмап разработки и поддерживаю внутренний бэклог
– Анализирую ключевые метрики и формирую стратегии реагирования на изменения, предлагаю доработки

⚡️ Дизайн и UX
– Создаю прототипы, провожу юзабилити-тесты и корректирую решения на основе обратной связи
– Занимаюсь UX-копирайтингом: вместе с коллегами делаем контент для сайта удобным и понятным
– Разрабатываю и поддерживаю дизайн-систему компании и её компоненты.
– Отрисовываю чистовые макеты сайтов и промо-лендингов.
– Провожу дизайн-чек макетов других дизайнеров и готовлю макеты к передаче в разработку

⚡️ Разработка и интеграция
– Вёрстаю дизайн-макеты на Тильде, 1С-Битрикс и Webflow.
– Разрабатываю функционал сайтов с помощью кода на основе тех. требований (html/css/js/php)
– Вместе с командой маркетинга проводим дизайн-ревью результата разработки, исправляю выявленные баги
– Оптимизирую SEO, интегрирую сайт с сервисами аналитики и CRM, улучшаю его производительность
– Взаимодействую с другими дизайнерами и разработчиками: описываю требования, пишу технические задания и контролирую выполнение задач

По правде говоря, я недооценивал то, с каким объёмом задач мне приходится работать. Вернее, всё это очень размывается, когда просто делаешь работу, которая тебе нравится. А так посмотришь, и оказывается, сколько всего!

Конечно, все эти задачи бывает сложно вывозить, в сутках порой хочется 25-ый час) Но зато такая мультидисциплинарность даёт просто колоссальный опыт, позволяющий видеть как цельную картину продукта, так и его тонкости. Ведь сайты – это не только про дизайн – это в том числе и про маркетинг, продукт, его смыслы и код под капотом. И product-market fit находится именно тогда, когда мы работаем со всеми этими ингредиентами.

Всех обнял и хорошего дня 🤗

Максим Постников | Дизайн, Тильда и модификации

Топовый монитор, на котором я делаю дизайн, взял и перегорел. Пришлось воскрешать своими руками 💥

Уже пару лет пользуюсь монитором, который считаю находкой для дизайнеров — 28-дюймовый Huawei MateView. Там есть практически всё: 4K, 3:2 соотношение сторон, отличная цветопередача и эстетичный корпус. Подключается к маку через Thunderbolt и за пару сек расшаривает картинку в прекрасном качестве.

Это лучшая бюджетная альтернатива Studio Display, соотношение цена-качество там просто зашкаливает. В общем, у монитора крайне положительные отзывы – его хвалили все, кто с ним работал. Пока не начали сталкиваться с тем, что него начала массово отказывать подсветка. То есть через пару лет использования монитор просто переставал включаться.

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

Какой выход? Гарантия на монитор закончилась, сервисный центр попросит кучу денег за ремонт, новые такие мониторы больше не продаются. А вот какой: заказать более мощный предохранитель и перепаять самому. Хотя по правде я вообще не умею паять. Но так как я всё-таки бауманец, грех не попробовать) решил, что в этом деле надо начать 🦾

Заказал SMD компонент, паяльник и набор отверток для точных работ. Сел, разобрал монитор, вытащил из него плату, достал паяльник, чтобы отпаять предохранитель. И просто застрял) Микросхема поглощала практически всё тепло, и припой застывал мгновенно. Пришлось сменить паяльник, десяток нервных клеток и раскалить компонент до 400°C. С горем пополам отпаял предохранитель и поставил новый.

И всё заработало!
Да, с большим трудом и потом, но какое же удовольствие было видеть, как ты заменил всего один компонент, и он органично встроился в целую систему. Притом, что я паял почти впервые, а уж микросхему с SMD варистором так точно, до этого никогда подобное не чинил. Зато теперь знаю, как это делается 🔥

Так что всем коллегам по цеху, кто использует Huawei MateView 28, сохраняйте пост на заметку. Подробная инструкция, как чинить наш дорогой монитор — на Реддите

Максим Постников | Дизайн, Тильда и модификации

☺️ Синхронизация обновлений в модификациях

Привет! С момента выхода последнего релиза я обновил несколько модов, исправил баги и даже выпустил новый вариант слайдера. А ещё рад поделиться новостью: в подборку #madeontilda попал первый сайт с моей модификацией — смотрите, какая красота: https://simple-plants.ru/

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

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

⚡️ Что это такое?
Статичная версия полностью встраивается в код сайта и не зависит от внешних ресурсов. Это надёжное решение для сайтов с большим трафиком, где важно избегать любых сбоев. Единственный нюанс — обновлять статичные модификации можно только через переустановку кода вручную.

Переключиться на такой режим можно в инструкции к каждому моду. Для наглядности на видео показал, как выглядит нужная кнопочка) В общем, пробуйте и делитесь впечатлениями 🔥

Ссылка на модификации: https://postnikovmd.com/mods

Максим Постников | Дизайн, Тильда и модификации

🆕 Новый метод установки модификаций, повышение производительности и новые функции — что изменилось в версии 1.2

Привет!
У модификаций вышло крутое обновление, которое принципиально меняет подход к их установке и существенно облегчает работу с ними. А ещё новые функции для хэдера, слайдера, вкладок и исправление возникших ошибок.

Рассказываю, что изменилось:

⚡️ Установка через единый файл
Раньше для каждого мода приходилось добавлять отдельный код в <head>, что было неудобно и к тому же замедляло загрузку страницы. Теперь это делается проще: вы подключаете установочный скрипт только один раз, и он сам подгружает модификации, которые используются на странице. Всё, что остаётся — просто их запустить.

Почему это круто:
• Вместо множества скриптов устанавливается всего один файл.
• Асинхронная загрузка не блокирует отрисовку страницы.
• Загружаются только нужные функции — лишний код не нагружает сайт.
• Размер установочного файла — всего 4кб.

⚡️ Поддержка базовых и SBS-анимаций
Некоторые модификации получили поддержку стандартных Тильдовских анимаций. Пока это 4 модификации, но в дальнейшем этот список обязательно расширю:
• Хэдер: анимация при раскрытии выпадающих меню и меню-бургера
• Слайдер и вкладки: анимация при переключении вкладок
• Поп-апы: анимация элементов при открытии/переключении слайдов

⚡️ Авторасстановка слоёв
Если вы уже работали с модификацией слайдера, то заметили, что он требовал строгого соблюдения порядка слоёв. Это было неудобно и усложняло работу с ним — при неверном расположении слоёв скрипт переставал работать. Теперь такого не будет) Вы можете располагать слои в любом порядке — модификация сама определит, где первый слайд, а где последний. Небольшое, но заметное улучшение UX.

⚡️ Вывод рекомендаций по установке в консоль
Добавил уведомления об ошибках в консоль. Если вы забыли указать селектор или сделали что-то неправильно, они помогут быстро найти и устранить проблему. Ну и, конечно, исправил баги из предыдущих версий.

Чтобы обновиться, скопируйте установочный скрипт к себе в <head> сайта. Его можно найти в обновлённых инструкциях модов: https://postnikovmd.com/mods

Как вам обновление? Поделитесь в комментариях 👇

Максим Постников | Дизайн, Тильда и модификации

Корпоративный сайт на 2 тыс. страниц или мой самый большой и сложный проект, который я недавно завершил

Для меня это был крутейший вызов — и как для дизайнера, и как для руководителя проекта. Выложился на максимум и постарался сделать работу высочайшего уровня. Горжусь командой и тем, что получилось)

Выложил кейс на Behance с результатами нашей работы и подробностями дизайн-процесса. Лайкать и комментировать по ссылке ниже ❤️

https://www.behance.net/gallery/216461129/korporativnyj-sajt-Navicon

Мне сегодня 24. Рефлексии пост ✔️

Мой смысл — творить и создавать ценность. Не ради денег и материального, а ради того, чтобы делать мир лучше. Дайте шанс, и я превращу груду камней в скульптуру. Точнее, дизайн в продукт, решающий проблемы пользователей. Потому, что в этом я, и в этом моя философия. В качестве, в осознанности и в полной отдаче.

Для того, чтобы творить, нужно быть искренним. И дело не в том, чтобы показывать всё, как есть, а в том, чтобы быть настоящим для самого себя и следовать своим ценностям. В жизни часто встречаются лёгкие пути, по которым есть соблазн пойти, но если они не откликаются в твоём сердце, нужно собрать силы и двигаться дальше, через тернии к звёздам. Это сложный путь, но в нём ты не теряешь себя и несешь в мир своё уникальное видение. ✨

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

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

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

Всех обнял) 🧤

PS. в обложке очень атмосферный трек с вайбом этого поста. Оставлю его в комментариях

🍭 Динь-динь, новогоднее обновление)

Недавно у модификаций добавились примеры и обновились пояснения, чтобы с ними стало проще работать. А ещё теперь у каждого мода указаны свои особенности – их можно найти перед документацией для разработчиков.

Подробнее: https://postnikovmd.com/mods

Всех с наступающим! 🌲
Делитесь своими новогодними ёлками в комментариях)

Максим Постников | Дизайн, Тильда и модификации

Настройки стилей в модификациях ❤️

Привет, я с обновлением)
Теперь в модификациях можно настраивать свои стили.
Например:
• Задавать цвета пунктов меню в шапке сайта
• Настраивать активное состояние стрелок слайдера
• Менять цвета активных/неактивных вкладок
• Задавать размытие фона у поп-апов и меню

Новые свойства находятся в разделе с генератором кода: Настройки модификации -> + настройки стилей. Они доступны для модификаций хэдера, слайдера, вкладок и поп-апов.

Также обновил все модификации до версии 1.1, пофиксил критичные баги и оптимизировал код, чтобы он работал быстрее. Интересный факт: в несжатом состоянии в модах сейчас более 5 тыс. строк кода. А в сжатом — всего 50)

Ссылка на модификации:
https://postnikovmd.com/mods

Приятного пользования)

Максим Постников | Дизайн, Тильда и модификации

Как мы делали стартап 💫
История в продложение предыдущего поста)

Однажды я запустил свой ИТ-стартап — сервис по развитию личного бренда. Мы потратили 2 года на исследования и разработку MVP, проработали все аспекты бизнеса, но в итоге провалились.

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

Почитать можно здесь:
https://postnikovmd.com/blog/how-we-made-a-wcv

Максим Постников | Дизайн, Тильда и модификации

Немного о моём пути ✔️

За 7 лет в дизайне у меня был крутейший опыт, но я почти никогда о нём не рассказывал — создавал свой стартап, участвовал в кейс-чемпионатах, попадал в топ студентов страны, учился, мечтал, много работал и конечно, как и все, факапился и выгорал.

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

Приятного просмотра) ⚡️