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
Forwarded from Саша, что ты наделала?
Лучший опыт обучения эвер! Рассказываю!
Я уже год делаю сайты на Tilda.
С каждым новым проектом хочется делать круче — больше кастомного кода, больше всяких деталей и фишек.
И я это делаю. Клиенты довольны, сайты начали залетать в МОТ.
Но иногда смотрю на готовый результат и думаю: окей, это работает... но я фиг знает как это вообще получилось.
Особенно это касается сложных анимаций. Часто я находила референс, упарывалась чтобы повторить, пробовала тыщу итераций кода и настроек. В какой-то момент оно срабатывало, и я такая — всёёёё, только бы не сломать! Не дышим!
Меня это накаляло. Хотелось понимать процесс и управлять им, а не угадывать.
И тут я подумала — я же знаю дизайнера, чьи решения по анимации меня восхищают, чьи сайты я сохраняю в референсы, чьи открытые уроки в Tilda Publishing я обожаю. Что если постучаться в личку, рассказать где у меня затыки и попросить помочь точечно?
Так я написала Алёне Спириной и попросила консультацию.
А она согласилась.
Вчера мы созвонились, — и я обалдела.
Алёна сверстала отдельную страницу с релевантными примерами, разобрала все интересующие меня механики пошагово и поделилась личными фишками в работе с анимацией. Это был мощный концентрат прямо под мой запрос.
Всего час — и я поняла как всё работает изнутри. Один час! И я разобралась с тем, что целый год делала наугад.
Короче, консультации у проверенных экспертов — это огонь. Рекомендую жоско!
Единственное о чём жалею — что не написала Алёне раньше.
Я уже год делаю сайты на Tilda.
С каждым новым проектом хочется делать круче — больше кастомного кода, больше всяких деталей и фишек.
И я это делаю. Клиенты довольны, сайты начали залетать в МОТ.
Но иногда смотрю на готовый результат и думаю: окей, это работает... но я фиг знает как это вообще получилось.
Особенно это касается сложных анимаций. Часто я находила референс, упарывалась чтобы повторить, пробовала тыщу итераций кода и настроек. В какой-то момент оно срабатывало, и я такая — всёёёё, только бы не сломать! Не дышим!
Меня это накаляло. Хотелось понимать процесс и управлять им, а не угадывать.
И тут я подумала — я же знаю дизайнера, чьи решения по анимации меня восхищают, чьи сайты я сохраняю в референсы, чьи открытые уроки в Tilda Publishing я обожаю. Что если постучаться в личку, рассказать где у меня затыки и попросить помочь точечно?
Так я написала Алёне Спириной и попросила консультацию.
А она согласилась.
Вчера мы созвонились, — и я обалдела.
Алёна сверстала отдельную страницу с релевантными примерами, разобрала все интересующие меня механики пошагово и поделилась личными фишками в работе с анимацией. Это был мощный концентрат прямо под мой запрос.
Всего час — и я поняла как всё работает изнутри. Один час! И я разобралась с тем, что целый год делала наугад.
Короче, консультации у проверенных экспертов — это огонь. Рекомендую жоско!