Spirina Design
1.17K subscribers
287 photos
135 videos
149 links
Алёна Спирина — веб-дизайнер, фрилансер (Калининград) @alen_spirina

Делюсь:
• полезными материалами,
• кейсами и процессом работы,
• немного личным.

Сайт: alenaspirina.ru
Tilda: experts.tilda.cc/alenaspirina
Inst: instagram.com/_alenaspirina_
Download Telegram
Лучший опыт обучения эвер! Рассказываю!

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

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

Меня это накаляло. Хотелось понимать процесс и управлять им, а не угадывать.

И тут я подумала — я же знаю дизайнера, чьи решения по анимации меня восхищают, чьи сайты я сохраняю в референсы, чьи открытые уроки в Tilda Publishing я обожаю. Что если постучаться в личку, рассказать где у меня затыки и попросить помочь точечно?

Так я написала Алёне Спириной и попросила консультацию.
А она согласилась.

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

Всего час — и я поняла как всё работает изнутри. Один час! И я разобралась с тем, что целый год делала наугад.

Короче, консультации у проверенных экспертов — это огонь. Рекомендую жоско!
Единственное о чём жалею — что не написала Алёне раньше.
40🔥27🥰12❤4👍3🦄1
Дизайн-студия Мамаенко // Кейс по вёрстке

Еще один результат совместной работы с @DubDigitalPro и еще одна #madeontilda 🖤

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


⛓ https://mamaenko.com/

#кейс_вёрстка@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
36😍18🦄9❤6❤‍🔥5👍3
Разбор проекта

Есть идея разобрать 1–2 ваших проекта. Дам обратную связь по структуре, дизайну, вёрстке и опубликую видео на канале.

Если хочешь ревью, в комментариях к этому посту:

1. Кидай ссылку на проект (в идеале Figma + сайт на Тильде, но подойдёт и что-то одно)

2. Напиши, какая была задача, с чем есть трудности, что смущает, что не получилось реализовать. Чем подробнее опишешь контекст, тем полезнее будет разбор.

Если будет много реакций 🖤 — оставим такой формат на регулярной основе 😌
144🔥18🦄12❤7
Транспортная компания СТР / Кейс по вёрстке

Возвращаюсь к работе спустя неделю выходных (что-то невероятное). Хочу показать новый проект, который сдали до праздников. Кстати, он уже попал в подборку #madeontilda.

25 страниц, 2 темы. Кастомный курсор, квиз, калькулятор и кнопки. Автоскейл и 4 брейкпоинта (390, 640, 960 и 1200).

⛓ https://lkstr.ru/

Проект реализован совместно с @itcultura и @DubDigitalPro
#кейс_вёрстка@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3916😍8❤5🦄1
Попала в рейтинг тг-каналов в разделе «Дизайн» от kokoc.tech 🖤

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

Помогает ли канал в продвижении/поиске заказов/узнаваемости? В целом — да. Обязательно ли дизайнеру/фрилансеру нужен тг-канал? Вообще нет.

Если цель именно найти клиентов, то канал — не самый эффективный и быстрый способ. Скорее долгосрочная инвестиция, которая в дальнейшем сработает как дополнительный триггер доверия и способ познакомиться с тобой заочно.

Этот канал появился в момент работы над проектом Oura, когда поняла, что очень хочется где-то делиться процессом и фиксировать опыт. Собственно, сейчас мало что изменилось)
36❤‍🔥27🔥13🦄2❤1
Media is too big
VIEW IN TELEGRAM
В последний месяц помимо основных проектов, погружение в более сложную вёрстку захватило всё внимание. Не теряйте 😌

• Разбираюсь с флюидной вёрсткой, clamp(), vw/vh (в идеале — начать меньше включать автоскейл, больше строить сайты на правилах, а не на фиксированных размерах)
• Всё чаще использую GSAP-анимации и ScrollTrigger вместо SBS
• Начала анализировать референсы через консоль и смотреть уже не только на дизайн, а на логику сборки

Что сейчас по проектам:

• Логистическая компания Кристал (вёрстка, 2 сайта)
• Интернет-магазин снаряжения для туризма и спорта Good2Go (дизайн+вёрстка, в видео — кусочек макетов, анимацию покажу позже)
• Агентство ProDigital (дизайн+вёрстка)
• Oura Ring (редизайн, вышла новая версия)
• Студия Paradigma (дизайн+вёрстка)
• Студия веб-разработки на Webflow Bravico (дизайн)
• Компания по продаже и импорту авто Marlin Cyprus (редизайн)

Помимо этого в июне запланированы две консультации: по организации работы и по sbs-анимации. Подробнее здесь. И еще, выбрала проект из комментариев на разбор, готовлю видео.
🔥4517🦄9❤‍🔥7❤4
Рубрика «Рекомендасьон»: у меня случилась консультация по анимации на Тильде с Аленой Спириной

Мне так понравилось, что непременно решила об этом написать! (Кстати, на мое решение обратиться к Алене в том числе повлиял отзыв Саши — поэтому считаю важным делиться фидбэком).

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

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

Собсно, в чем был основной запрос: я часто смотрю на какие-то анимационные решения, понимаю: «О, тут, наверное, без кода можно, это должно быть просто… но кааак?». А так как в базе есть пробелы, то либо ищу что-то похожее, готовое, либо как-то еще изворачиваюсь. И вот я решила свой хаос в этом вопросе убрать и таки разобраться более предметно и основательно.

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

Кстати, еще один важный личный критерий — когда после консультации есть воодушевление и желание что-то делать. Тут именно так — я сразу пошла пробовать применить новые знания)

В общем, красивые и профессиональные женщины — моя любовь❤️
❤2318🔥17🦄4
У Oura Ring вышла новая версия, соответственно пора было немного обновить сайт.

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

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

Если вы верстаете на Wordpress, быстро и качественно — напишите пожалуйста мне в лс, желательно приложив портфолио 🙏🏻
20❤‍🔥15🦄8😍2❤1🔥1
Отзыв о консультации 🖤

С Мишей это была уже вторая консультация, на которой подробно разобрали все этапы работы над проектом, а также:

• Как рассчитывать сроки, стоимость и от чего они зависят
• Как минимизировать правки от клиента
• Как ускорить работу
• Что важно зафиксировать в договоре на старте
• Как строить работу когда маленький/большой загруз

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

#консультации@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1710🦄9🔥3
Дизайн-ревью на канале Tilda Publishing 🖤 16 июля в 14:00 МСК

Предлагаю в этот раз провести mobile-first ревью) Сначала разберём мобильные версии, а уже после посмотрим десктоп.

Поговорим о том, как работать с ограниченным пространством, про типографику и анимацию, а также про некоторые моменты в вёрстке (любимый Safari браузер 🥲).

⛓ https://t.me/TildaEventsBot?start=dl-1748948697d0edc996dc08

Буду ждать вас на эфире 😊

Отправить сайт на разбор: https://webinars.tilda.cc/submit
Please open Telegram to view this post
VIEW IN TELEGRAM
4❤‍🔥28🦄109❤2🔥1
Tilda School Helper — новое шикарное расширение для Chrome, которое объединяет в себе кучу других 🖤

Что внутри:

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

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

⛓ Установить: https://chromewebstore.google.com/detail/tilda-school-helper/pmkmenafkkcdpnenfdlbcohnedcaihoh
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥4411👍8❤3🎉1🦄1
Меняем ссылки t.me на telegram.me через скрипт ✈️

! UPD: t.me вернулся 🤪

<script>
t_onReady(function () {
document.querySelectorAll('a[href^="https://t.me/"]').forEach(function(link) {
link.href = link.href.replace('https://t.me/', 'https://telegram.me/');
});
});
</script>


• Добавьте код в блок T123, удобнее сразу в хэдере или футере
• Переопубликуйте все страницы, сбросив кэш

За код спасибо Худовой Саше @khudovadesign 😊
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤21🙏98❤‍🔥2🔥2
Ребят, спасибо за вашу поддержку! 🖤

Запись эфира уже доступна:
📱 в ВК Видео → https://vkvideo.ru/video-89546664_456240620
📺 на YouTube → https://youtube.com/live/43BHo5HKnvw

Все ссылочки с эфира:

Памятка по мобильным версиям:
⛓ https://alenaspirina.ru/blog/mobile

Страница с разбора:
⛓ https://alenaspirina.ru/review2026

Ресурсы для поиска референсов:
⛓ https://alenaspirina.ru/refs
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥2812🦄10❤‍🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Июль 25 — Июль 26 🖤

Сделаем это традицией и подведем статистику за год. Прошло 3 года с окончания Tilda Pro, и момента, когда начала называть себя «веб-дизайнером» 👀

Что изменилось? (Намеченный в прошлом году план кажется работает):
• Проектов под ключ стало меньше, но средний чек заметно вырос
• Все больше запросов на сложную вёрстку
• Получилось больше отдыхать 🙂‍↔️ Август почти полностью выпал из-за переезда, плюс за год было несколько небольших отпусков.

Вместе с текущими, всего проектов за период: 41

По типам сайтов:
• Лендинги — 15
• Многостраничные — 23
• Интернет-магазины — 3

По видам работ:
• Сайт под ключ — 14
• Только вёрстка — 21
• Только дизайн — 3
• Доработки — 3

Источники:
• Сотрудничество — 58,5%
• Made on Tilda — 12,2%
• Рекомендации — 12,2%
• Повторные клиенты — 7,3%
• Другое — 9,8%

Также в этом году стало больше консультаций и запросов на ревью сайтов. +2 эфира на канале Tilda Publishing. Хочется развиваться в этом направлении и дальше.
Please open Telegram to view this post
VIEW IN TELEGRAM
6❤‍🔥52🦄1913❤7🔥7😍3