АХ дизайн

🟠 Tilda Case Review уже сегодня!

Сегодня в 15:00 мск пройдет онлайн-митап о создании сайтов с реальными кейсами, где я приму участие и расскажу об одном из своих самых любимых проектов 💕

Записаться на эфир можно по ссылке 👉 https://video.tilda.ru/case-review-2026

Буду рада вашей поддержке, активности и вопросам 🧡

🔨🔧 Запись эфира доступна по ссылкам:
📱 в VK Видео → https://vkvideo.ru/live-89546664_456240701
📺 на YouTube → https://youtube.com/live/AT13h14x5dY

📱 Chrome обновился!

Теперь он позволяет располагать свои вкладки сбоку вертикально (да-да, прямо как Яндекс сто лет назад мог это делать😁)

Для нас с вами это значит то, что часть пользователей Хрома непременно применит эту настройку и будет смотреть сайты с вьюпортом чуть меньше классических. Следовательно, совет верстать под Брейкпоинты чуть меньше чем 1920рх или 1440рх стал еще более актуален, писала про это ранее в серии постов про Брейкпоинты.

Такие дела, котятки 🐾

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

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

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-элемент, который показывает заботу о посетителе сайта.

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



.copy-button {
cursor: pointer;
}



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, чтобы корректно обработать
var text = TexttoCopy.innerHTML;
// Заменяем и на перенос строки
text = text.replace(//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);
});
});
});


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🌼 Библиотека сильных интернет-магазинов на Tilda

Рада сообщить, что появилась еще одна невероятно полезная тематическая подборка для дизайнеров на Тильде ✨

Это библиотека сильных интернет-магазинов, сделанных на Tilda Publishing (другие платформы не рассматриваются), которые являются удачными с точки зрения структуры, функциональности, технической реализации и пользовательского опыта.

Автор подборки — гуру e-commerce Вика Филекова ❤

Вика лично отбирает проекты для своей подборки, поэтому там собираются только действительно качественные работы. Библиотека еще совсем новенькая, поэтому давайте поможем ее наполнить — отправляйте свои магазины на проверку Вике (анкета по ссылке «Предложить сайт» в библиотеке) .

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

#вдохновение #сервисы