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
Производственная компания Techline. Задача — рассказать об агентской программе в рамках одной страницы.
#кейс@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Тизер нового проекта 🖤 reMarkable Paper Pro
Еще один вдохновляющий проект, когда не отпускает ни по вечерам, ни даже в выходные.
Сегодня согласовали дизайн десктоп версии, на следующей неделе отрисую мобильную и в вёрстку🥰
Влюбилась в шрифт заголовков, так долго его искала — Canela.
#кейс@spirina_design
Еще один вдохновляющий проект, когда не отпускает ни по вечерам, ни даже в выходные.
Сегодня согласовали дизайн десктоп версии, на следующей неделе отрисую мобильную и в вёрстку
Влюбилась в шрифт заголовков, так долго его искала — Canela.
#кейс@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
Обновила подборку шрифтов 🖤
Накопилось несколько классных шрифтов из последних проектов — делюсь с вами (скриншоты сайтов оставлю в комментарии).
• JetBrains Mono
• Canela
• CD Ovuer
• TT Hoves
• Roobert
• Denistina
Все из них поддерживают кириллицу.
Заходите, сохраняйте:
⛓ https://alenaspirina.ru/fonts
Накопилось несколько классных шрифтов из последних проектов — делюсь с вами (скриншоты сайтов оставлю в комментарии).
• JetBrains Mono
• Canela
• CD Ovuer
• TT Hoves
• Roobert
• Denistina
Все из них поддерживают кириллицу.
Заходите, сохраняйте:
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥49 19❤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_
Подписывайтесь, буду дублировать контент и туда. Остаемся на связи🖤
Вконтакте
Max
Подписывайтесь, буду дублировать контент и туда. Остаемся на связи
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥18🔥8❤5 4👌2
Wood Kras. Покраска деревянных домов
Задача — разработать логотип и посадочную страницу под платный трафик. Важно было передать уровень экспертизы и системный подход.
⛓ https://woodkras.ru/
#кейс@spirina_design
Задача — разработать логотип и посадочную страницу под платный трафик. Важно было передать уровень экспертизы и системный подход.
#кейс@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤39🔥18 11🦄2👍1
reMarkable Paper Pro Move 🖤
Цифровой блокнот с E-Ink дисплеем, имитирующий бумагу. Один из моих любимых проектов теперь. Идеально, когда тз — «как обычно на твой вкус».
Хотелось оставить акцент именно на «ощущении». Сохранила минимализм, но при этом проработала детали.
⛓ https://re-markable.ru/
#кейс@spirina_design
Цифровой блокнот с E-Ink дисплеем, имитирующий бумагу. Один из моих любимых проектов теперь. Идеально, когда тз — «как обычно на твой вкус».
Хотелось оставить акцент именно на «ощущении». Сохранила минимализм, но при этом проработала детали.
#кейс@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥42😍20 13❤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
Напишите в комментариях, чем пользуетесь вы — дополним список 😌
В борьбе за каждую секунду загрузки сайта — не забываем сжимать контент во время вёрстки. Ресурсы, что использую сейчас:
Видео
• HandBrake 🔝
• Rotato.app
• Mp4compress
• Compress2go
Как добавляю на сайт:
Небольшие видео загружаю сразу в Тильду, либо на Kinescope+Тильда, либо конструктор видео от Annexx+Kinescope.
Фото
• Squoosh.app 🔝
• Voron Dev
• Photoshop
• TinyPng
Рекомендации
• видео ≤ 5–10 мб, формат MP4 (H.264)
• фото в WebP
• размер = размеру блока
• не отключаем LazyLoad без необходимости
Напишите в комментариях, чем пользуетесь вы — дополним список 😌
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥42 15❤8🦄5❤🔥3👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Портфолио работ
Наконец-то собрала в одном месте проекты и по разработке под ключ, и по вёрстке.😊
Реализовала через функционал потоков, как их кастомизировать рассказывала здесь. Но сейчас, с помощью Cascad сделать это в разы быстрее и проще (чуть позже напишу про него подробнее, еще тестирую).
⛓ https://alenaspirina.ru/portfolio
Наконец-то собрала в одном месте проекты и по разработке под ключ, и по вёрстке.
Реализовала через функционал потоков, как их кастомизировать рассказывала здесь. Но сейчас, с помощью Cascad сделать это в разы быстрее и проще (чуть позже напишу про него подробнее, еще тестирую).
Please open Telegram to view this post
VIEW IN TELEGRAM
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
Тоже отправила меню в библиотеку, классное.
Чтобы быстро пополнять свою копилку насмотренности, и дополнительно ускорять работу над проектами — просто включи в свою рутину несколько минут в день на поиск и анализ референсов. Искать их можно на ресурсах в подборке, а сам процесс выглядит так:
• 1 шаг
Заходим на сайт, пролистываем до подвала. Ловим первое ощущение, эмоцию, стиль.
• 2 шаг
Оцениваем, что зацепило, анализируем.
(Шрифт, цветовая гамма, композиции, контент, структура, анимация)
• 3 шаг
Погружаемся в детали, взаимодействуем с интерфейсом.
(Ховеры, меню, микро-анимации, нестандартные решения)
• 4 шаг
Делаем скриншоты/запись экрана конкретных блоков или элементов.
Добавляем в свою библиотеку в Eagle или Figma, раскидываем по категориям для быстрого поиска (оставляем ссылку на сайт и комментарии, если нужны).
Важно! Это не обязательно должны быть супер-необычные решения. В первую очередь, это ваш инструмент для реальных проектов, поэтому добавляйте и более прикладные вещи.
Из последних добавленных:
1. doubleplay.studio
Типографика и цвет 🤤, плавность анимаций, дико приятный сайт.
2. duabyab.com
Детали, меню, карточки и страница товара (именно здесь взяла идею для одного из блоков Remarkable).
3. destigmatize.ca
Как фанат навбаров, не смогла пройти мимо, добавила себе.
4. burocratik.com
Тоже отправила меню в библиотеку, классное.
🔥34❤18 10😍3🦄3❤🔥1🥰1