АХ дизайн

🟠 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 Вика Филекова ❤

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

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

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

🧮 Калькулятор стоимости разработки сайта на Тильде

В качестве практики работы с ⭐️Вайб-блоком⭐️ я решила сделать в нем что-то действительно полезное и остановилась на создании калькулятора стоимости разработки сайта (на мой взгляд эта задача для многих остается нерешенной или вызывает много вопросов).

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

Вычисления основываются на вашей часовой ставке, но если вы ее не знаете, то вот примерные ориентиры, исходя из вашего опыта:
До года: 300 — 1000 ₽/ч
1-2 года: 1000 — 1500 ₽/ч
2-4 года: 1500 — 2000 ₽/ч
4-6 лет: 2000 — 3000 ₽/ч
6+ лет: 3000 — 6000 ₽/ч

🐾 Воспользоваться калькулятором можно по ссылке

А еще я добавила в него кнопку «Сохранить смету в PDF» 🔥

💜 Буду рада услышать ваши комментарии относительно переменных для расчёта стоимости, что бы вы хотели поменять/добавить?

#сервисы #тильда #freebie

❤ Новый кейс: одностраничный сайт для авторского курса «Искусство стилизации» от школы моды «Лаборатория стилей»

Сегодня проект попал в МОТ 🏆 💗

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

Шрифты я подбирала с учетом характеров основных смыслов курса:
🎨 Искусство — изящный и благородный шрифт Kudry
📒 История — классический Playfair Display
🌷 Стиль — элегантный неогротеск Manrope

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

Верстку я делала в Автоскейле с моим основным набором брейкпоинтов — 360, 640, 1200 и 1600. Местами были использованы стандартные блоки, но, не смотря на отсутствие масштабирования в них, они прекрасно вписались в дизайн-систему автоскельной верстки.

Отдельное удовольствие я получила от верстки блока с работами студентов, выполненного в новых потоках Тильды, это просто сказка какая-то — сколько там всяких настроек и возможностей 😍 Я пока не сильно углублялась в их изучение, но даже мое поверхностное изучение повергло меня в полный восторг от их обновления. Всем советую их попробовать ❤

📒 Над проектом вместе со мной трудились:
Аня Войн (тексты и прототип)
Настя Гусева (дизайн и верстка)

❤️ Любые вопросы по проекту вы можете задать в комментариях

#кейс #портфолио #награды