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

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

Сайт: alenaspirina.ru
Tilda: experts.tilda.cc/alenaspirina
Inst: instagram.com/_alenaspirina_
Download Telegram
Media is too big
VIEW IN TELEGRAM
Тизер нового проекта 🖤 reMarkable Paper Pro

Еще один вдохновляющий проект, когда не отпускает ни по вечерам, ни даже в выходные.

Сегодня согласовали дизайн десктоп версии, на следующей неделе отрисую мобильную и в вёрстку 🥰

Влюбилась в шрифт заголовков, так долго его искала — Canela.

#кейс@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
41🔥30👍15🦄6
Обновила подборку шрифтов 🖤

Накопилось несколько классных шрифтов из последних проектов — делюсь с вами (скриншоты сайтов оставлю в комментарии).

• JetBrains Mono
• Canela
• CD Ovuer
• TT Hoves
• Roobert
• Denistina

Все из них поддерживают кириллицу.

Заходите, сохраняйте:
⛓ https://alenaspirina.ru/fonts
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥4919❤15😍2🦄1
This media is not supported in your browser
VIEW IN TELEGRAM
Оставляю ссылки на другие соц.сети

Вконтакте
⛓ https://vk.com/spirina_design

Max
⛓ https://max.ru/join/x1VADYluVeKuYtxJRDUP9jjY9XMPV1Cp-V3glhRuvHI

Instagram
⛓ https://instagram.com/_alenaspirina_

Подписывайтесь, буду дублировать контент и туда. Остаемся на связи 🖤
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥18🔥8❤54👌2
Wood Kras. Покраска деревянных домов

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

⛓ https://woodkras.ru/

#кейс@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤39🔥1811🦄2👍1
reMarkable Paper Pro Move 🖤

Цифровой блокнот с E-Ink дисплеем, имитирующий бумагу. Один из моих любимых проектов теперь. Идеально, когда тз — «как обычно на твой вкус».

Хотелось оставить акцент именно на «ощущении». Сохранила минимализм, но при этом проработала детали.

⛓ https://re-markable.ru/

#кейс@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥42😍2013❤3🦄2
This media is not supported in your browser
VIEW IN TELEGRAM
Оптимизация контента 🖤

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

Видео
• HandBrake 🔝
• Rotato.app
• Mp4compress
• Compress2go

Как добавляю на сайт:
Небольшие видео загружаю сразу в Тильду, либо на Kinescope+Тильда, либо конструктор видео от Annexx+Kinescope.


Фото
• Squoosh.app 🔝
• Voron Dev
• Photoshop
• TinyPng

Рекомендации
• видео ≤ 5–10 мб, формат MP4 (H.264)
• фото в WebP
• размер = размеру блока
• не отключаем LazyLoad без необходимости

⛓ https://alenaspirina.ru/blog/compress

Напишите в комментариях, чем пользуетесь вы — дополним список 😌
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥4215❤8🦄5❤‍🔥3👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Портфолио работ

Наконец-то собрала в одном месте проекты и по разработке под ключ, и по вёрстке. 😊

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

⛓ https://alenaspirina.ru/portfolio
Please open Telegram to view this post
VIEW IN TELEGRAM
33❤24🦄10😍9
Media is too big
VIEW IN TELEGRAM
Референсы и насмотренность

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

•
1 шаг
Заходим на сайт, пролистываем до подвала. Ловим первое ощущение, эмоцию, стиль.

• 2 шаг
Оцениваем, что зацепило, анализируем.
(Шрифт, цветовая гамма, композиции, контент, структура, анимация)

• 3 шаг
Погружаемся в детали, взаимодействуем с интерфейсом.
(Ховеры, меню, микро-анимации, нестандартные решения)

• 4 шаг
Делаем скриншоты/запись экрана конкретных блоков или элементов.
Добавляем в свою библиотеку в Eagle или Figma, раскидываем по категориям для быстрого поиска (оставляем ссылку на сайт и комментарии, если нужны).

Важно!
Это не обязательно должны быть супер-необычные решения. В первую очередь, это ваш инструмент для реальных проектов, поэтому добавляйте и более прикладные вещи.

Из последних добавленных:

1. doubleplay.studio
Типографика и цвет 🤤, плавность анимаций, дико приятный сайт.

2. duabyab.com
Детали, меню, карточки и страница товара (именно здесь взяла идею для одного из блоков Remarkable).

3. destigmatize.ca
Как фанат навбаров, не смогла пройти мимо, добавила себе.

4. burocratik.com
Тоже отправила меню в библиотеку, классное.
🔥34❤1810😍3🦄3❤‍🔥1🥰1
Лучший опыт обучения эвер! Рассказываю!

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

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

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

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

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

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

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

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