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
This media is not supported in your browser
VIEW IN TELEGRAM
16-ый проект в #madeontilda 🖤

Производственная компания Techline. Задача — рассказать об агентской программе в рамках одной страницы.

⛓ https://tilda.ru/ru/madeontilda/#!/w/http://techline-online.tilda.ws

#кейс@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
47🔥44❤20😍6
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