АХ дизайн

💎 Запись мастер-класса «Верстка на Тильде потоков в новой настраиваемой CMS».

Посмотреть можно здесь:
💻 : VK Видео
💻 : RuTube
💻 : YouTube

Благодарю всех, кто приходил посмотреть МК, задавал вопросы и поделился впечатлениями об эфире 🤗✨ Определенно буду и дальше изучать эту тему и делиться с вами материалами по ней 🐾

❤️ Если у вас есть вопросы по материалу из мастер-класса или предложение по темам будущих эфиров — поделитесь в комментариях

#верстка #тильда #видео

📢 Приглашаем на Tilda Case Review — онлайн-митап о создании сайтов с реальными кейсами

30 сентября пройдёт прямой эфир, на котором дизайнеры поделятся, как создавали проекты в разных нишах. Вас ждут пять коротких выступлений и ответы на вопросы.

Запишитесь, чтобы получить ссылку 👉 https://video.tilda.ru/case-review-2026

Какие кейсы разберём:
— Сайт компании по защите от цифровых угроз;
— Персональный сайт психолога;
— Сайт студии электроэпиляции в Москве;
— Персональный сайт норвежского фотографа;
— Интернет-магазин натуральной таёжной косметики.

💡 Программа и регистрация на митап 👉 https://video.tilda.ru/case-review-2026

До встречи 30 сентября в 15:00 по московскому времени!

🎙 Мастер класс по верстке на Тильде

18 сентября в 13:00 (мск) я проведу открытый бесплатный мастер-класс для сообщества Web-коворкинг на тему: «Верстка потоков на Тильде в настраиваемой CMS».

🔔 Ссылка на встречу будет опубликована в чате сообщества. Если хотите попасть на прямой эфир, то обязательно вступайте в чат.

✨ Трансляция пройдет в Яндекс Телемост.
📷 Запись эфира, конечно, будет!

❤️ По любым вопросам пишите в комментариях

🤎 Кейс: портфолио студии STAMESKA по изготовлению мебели класса Deluxe по индивидуальному дизайну

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

☕ Моей задачей было уйти от классического черно-белого стерильного минимализма и сделать его более «крафтовым». В этом мне помогла пыльная приглушенная цветовая палитра, оригинальная шрифтовая пара из фирменного чертёжного гротеска и изящного курсива, а также фирменные «хулиганские» (со слов заказчика) геометричные орнаменты.

❤ При всем при этом я сохранила приёмы, характерные для сайтов, ЦА которых — это ультрабогатые клиенты, а именно: неспешная и плавная анимация, обилие белого пространства и большие фотографии.

Верстала я в автоскейле и в стандартных блоках.

📒 Из интересного в разработке:
🤩 Поп-ап с контактами я сделала из стандартного блока меню, оно идеально подошло по наполнению и дизайну и легко настраивается
🤩 Сетку проектов я сделала блоком магазина, вставив туда кодом пропуски и геометричные узоры. Паттерн определенной последовательности ячеек и узоров бесконечный — это значит, что при добавлении новых проектов в портфолио они будут автоматически выстраиваться в этот повторяющийся паттерн, и узоры будут сами вставляться рядом с новыми ячейками.

🏆 Сайт вчера попал в подборку MadeOnTilda 💗

✨ Если у вас есть вопросы по проекты, смело задавайте их в комментариях к посту ❤

#кейс #портфолио

🪐 Горизонтальный скролл с помощью Автолейаутов

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

С помощью Автолейаутов можно сделать то же самое, но чтобы внутри одного блока находилась и подвижная и статичная части дизайна. Для этого следуйте простым шагам: (работает на grid и window верстке)

⭐️ Объедините подвижную часть в Автолейаут-группу (сокр. АЛ). Внутри могут быть обычные элементы или группы-объекты, не обязательно все делать на АЛ.

⭐️ Начиная с определенного брейкпоинта, где нужен горизонтальный скролл, настройте АЛ следующим образом: (показано на скриншоте)

💛 координата Х = 0 (чтобы объекты скроллились в самый край левой стороны без отступа)
🩷 ширина АЛ для грида: вся ширина блока в рх, Fixed; для виндоу: Fill
💜 паддинги слева-справа = ваши боковые отступы по сетке (крайний слева элемент будет начинаться с него, а крайний справа после скролла остановится на этом расстоянии)
💛 паддинг снизу = 20-30рх для того, чтобы скроллбар не наезжал на объекты
🩷 OVERFLOW: разделяем на X и Y, у Х ставим Scroll, у Y само поставится Auto

✨ Готово! Далее на других брейкпоинтах поправьте только ширину АЛ-группы и внутренних элементов.

💭 По всем вопросам можете писать в комментарии к посту 💕

#тильда #верстка

💕 Как сделать кнопку «Скопировать текст»

С недавних пор я стала делать на коммерческих сайтах своих клиентов кнопку «Скопировать реквизиты». Не то, чтобы это было прямо таки необходимо, это скорее просто маленький удобный UX-элемент, который показывает заботу о посетителе сайта.

Делюсь с вами кодом для кнопки копирования любого текста в буфер обмена:

<!--Code by khudova.design-->
<style>
.copy-button {
    cursor: pointer;
}
</style>

<script>
t_onReady(function () {
    var copyBtn = document.querySelector('.copy-button');
    var copyBtnText = document.querySelector('.copy-button .tn-atom__button-text');
    var TexttoCopy = document.querySelector('.text-to-copy .tn-atom');
    if (!copyBtn || !copyBtnText || !TexttoCopy) return;
    var originalText = copyBtnText.textContent;
    var timeoutId = null;
    copyBtn.addEventListener('click', function () {
        // Код из тг-канала khudovadesign
        // Берём HTML, чтобы корректно обработать <br>
        var text = TexttoCopy.innerHTML;
        // Заменяем <br> и <br/> на перенос строки
        text = text.replace(/<br\s*\/?>/gi, '\n');
        // Удаляем неразрывные пробелы
        text = text.replace(/ /gi, ' ');
        text = text.replace(/\u00A0/g, ' ');
        // Убираем пробелы в начале и конце строк
        text = text.trim();

        navigator.clipboard.writeText(text).then(function () {
            copyBtnText.textContent = 'Реквизиты скопированы!';

            if (timeoutId) clearTimeout(timeoutId);
            timeoutId = setTimeout(function () {
                copyBtnText.textContent = originalText;
            }, 3000);
        }).catch(function (err) {
            console.error('Ошибка копирования:', err);
        });
    });
});
</script>

❗️ Правила использования:

⭐️ Тексту, который надо скопировать, присвойте класс text-to-copy
⭐️ Кнопке, по нажатию на которую должно происходить копирование, присвойте класс copy-button, а поле ссылки оставьте пустой
⭐️ В коде замените фразу 'Реквизиты скопированы!' на ту, которая должна появляться на короткое время после нажатия на кнопку
⭐️ Сам код вставьте в блок Т123

💭 По любым вопросам и пожеланиям к модификации пишите в комментариях 🐱

#тильда #модификации

💎 Кейс: конструктор сережек-пусетов с бриллиантами для ювелирного магазина 18GEMS

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

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

Разработка велась совместно с Вовой ✨ (к которому вы можете обращаться за любыми модификациями к Тильде)

💕 Если у вас есть вопросы по данному кейсу, вы можете задать их в комментариях

#кейс #портфолио

📒 Как анализировать референсы, чтобы их не копировать?

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

🚩 1. Опишите референс словами

Но при этом избегайте общих фраз по типу «красиво», «минималистично», «дорого» и т.д. Вместо этого скажите «Большой заголовок занимает примерно треть первого экрана», «Один акцентный цвет используется только для CTA», «Компактное фиксированное меню» и др.

❤ И вот у вас уже есть набор конкретных UX/UI решений, которые и без подглядывания в референс можно применять в своей работе.

🚩 2. Обращайте внимание не на сами элементы, а на принципы

Допустим, вам понравился сайт с очень крупной типографикой. Можно просто скопировать себе этот же самый размер заголовка в 120px. А можно спросить себя: «Зачем тут такой огромный заголовок?»

И после анализа всего сайта может быть несколько вариантов ответов, например:
— бренд строится вокруг сильного и короткого лозунга;
— на сайте мало фотоконтента и акцент сделан на типографику;
— типографика является главным атрибутом фирменного стиля компании.

✨ И тогда вы увидите принцип, а не просто UI-элемент — сделать типографику главным визуальным приёмом на сайте.

🚩 3. Разберите референс по слоям

Разложите понравившийся вам сайт по уровням:
🤩 Концепция (идея дизайна)
🤩 Композиция
🤩 Сетка
🤩 Типографика
🤩 Цвет
🤩 Фотоконтент
🤩 UI (кнопки, ссылки, меню, формы)

⭐ Когда вы разбираете сайт по слоям, вы начинаете видеть, что бОльшая часть его «уникальности» — совершенно обычные приёмы, а по-настоящему уникальным этот референс делает их грамотное сочетание.

✨ А еще, разбирая сайт на уровни, вы можете заимствовать приёмы только с одного уровня, а затем комбинировать их с другим уровнем с другого референса. Таким образом рождаются действительно уникальные дизайн-решения.

📍 Вывод: чтобы вдохновляться референсом и не копировать его, заимствуйте не конечный результат, который вы видите на экране, а то, какую роль на сайте выполняет конкретное решение, какую проблему клиента данный дизайн решает!

⬇️ Буду рада, если поделитесь в комментариях своими мыслями по данной теме 💗

#дизайн #гайд #насмотренность

🔥 Новый кейс: портфолио архитектора Юлии Стафи

Дизайн сайта выполнен в минимализме (я бы даже сказала гиперминимализме) с пластичным построением форм текстовых блоков.

Дизайн полностью соответствует пожеланиям заказчицы и отражает ее видение об идеальном персональном портфолио:
🤎 межстрочное расстояние в 300% заставляет чуть медленнее читать короткие тексты, делая ударение на каждом слове, словно в стихах Маяковского;
🤎 пластика текста повторяет собой очертания зданий из работ Юлии, которые не всегда выглядят как прямоугольник, а могут принимать необычные формы;
🤎 минимализм — символ четкого подхода в работе, где нет лишних деталей и взаимодействия, остается только сама суть.

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

Из модификаций я использовала блюр текста и масштабирование стандартных блоков от Annexx (стандартное масштабирование мне не подошло, т.к. в нем нет управления коэффициентом увеличения блока). Меню-гамбургер сверстано из комбинации zero-блока, стандартного блока, сбс-анимации и немного JS кода для связки всего этого безобразия в единую систему ))

💜 Если у вас есть вопросы по данному проекту, вы можете задать их в комментариях

#кейс #портфолио