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
🏳 Восьмой мот и первый сайт-портфолио.

Оказался самым сложным проектом, буквально выстраданный каждый блок) А казалось бы, такой небольшой.

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

Теперь можно некоторое время спать спокойно, пока не захочется все снести и переделать 😂

alenaspirina.ru

...

Следующая задача — оформить кейсы 🙈 Которую тоже как обычно откладываешь «на потом»)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤23🔥13👍4😱1
Media is too big
VIEW IN TELEGRAM
Google Font Previewer for Chrome

Расширение, с помощью которого можно «примерить» разные Google-шрифты на любой сайт.

Ну вдруг после верстки тебе или заказчику резко захотелось все поменять, а так посмотришь и поймешь – я все сделал правильно. или нет 😅

Полезно и чужие сайты так анализировать периодически.

Ссылка на скачивание
❤13🔥4
Media is too big
VIEW IN TELEGRAM
Хотела сделать просто пост с подборкой шрифтов на канал, но что-то пошло не так 😆

В процессе родилась идея заверстать страницу только с теми шрифтами, которые 100% будут актуальны и могут пригодиться в рабочей жизни. Поэтому хочу отбирать максимально тщательно, и только те, которые нравятся. Будет круто, если это окажется полезным и вам)

Что из этого получилось, можно посмотреть по ссылке:
alenaspirina.ru/fonts

PS. Добавила пока несколько, уж очень сильно хотелось поделиться) Планирую наполнять ее регулярно, насколько хватит времени.
🔥24❤6
Шок ✨ Подборка в #madeontilda

Поддержать
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24❤3👍3
Получила свой заветный сертификат с курса «Стилизация стандартных блоков на Тильде с помощью CSS» от Максима Щукина @dsgnmax

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

• Макс очень понятно и доходчиво объясняет сложные вещи простым языком
• Формат коротких уроков не дает закопаться в информации и только подогревает интерес двигаться дальше
• К каждому уроку есть домашка и шпаргалка по коду – можешь сразу отработать на практике
• Блок про применение ChatGPT для генерации кодов – это вообще космос какой-то, открывает столько новых возможностей 🤯
• Про псевдоклассы и анимацию еще точно буду пересматривать несколько раз, хорошо, что доступ остается навсегда

Это был последний поток, но я уверена, скоро будет что-то не менее полезное. А пока, можно присоединиться к Закрытому клубу. 😎
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18❤3
Наложение блоков при скролле — довольно частый прием (я использую модификацию Аннекса ANX824)

И периодически вижу одну и ту же проблему: ставят кнопки или важный текст внизу блока, и при скролле туда не то что попасть не успеваешь, а даже прочитать не можешь. (А если еще «любимый» плавный скролл подключили, который при малейшем движении тебя на середину страницы отбрасывает, то вообще супер 👍 )

Как решить этот вопрос? Есть несколько способов:

1. Не добавлять важные и особенно кликабельные элементы в нижнюю часть блока (пример 1)
2. Оставить отступы в блоках сверху и снизу, в случае, если не планируем занимать 100% высоты экрана (пример 2)

А если уже очень хочется поставить кнопку внизу, то дайте пользователям еще пару сотен пикселей проскроллить на месте, тем самым он успеет нажать куда ему нужно:

3. Добавить между блоками, которые накладываются, еще пустых zero-блоков без фона. И важно, в настройках модификации отключите у них pointer-events. Наглядно показала в видео 3 (примеры здесь и здесь)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤8
«Найди себе дело по душе…» ну дальше вы знаете.

Если ты готов в свои выходные просидеть и прорисовать только потому, что пришло вдохновение, наверно это и правда твое. Смотрела интенсив от Tilda School и так понравилось задание, что дальше все как в тумане)) Ок, будет еще один повод поделиться с вами 😌

Тема – кроссовки Adidas Samba. Структура +- была в тз. На все про все 2 дня.

Опять что-то рождалось прям по ходу верстки, опять идеи из разряда «и как это сделать!?». В общем, иногда очень приятно отвлечься от рабочих задач, чтобы не зарываться в рутине.

Ссылка на проект: samba-store.ru

Кстати, конструктор слайдеров от Annexx — это просто чудо, и как без него жили ❤️
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥28❤4
Пришла идея показывать внутрянку проектов. Хотя бы точечно. Я бы с удовольствием посмотрела у других за непринятыми концепциями, ходом мысли, как и что сделано, заглянуть внутрь Тильды как заверстано и тд. Если это интересно — дайте знать, пожалуйста 🙏

Сегодня хочу показать референсы, которые были использованы в последнем проекте про Samba. Конкретно здесь все родилось просто с какого-то размытого скрина какого-то сайта с Pinterest. Повторила композицию и зашло.

Помимо тех скринов, что во вложении, еще было два сайта, с которых взяла идеи. Этот и этот.

Вот все говорят про «правильную» работу с референсами. А мне всегда было интересно, есть ли она, эта «правильная» работа? Кто-то мудборд составляет из всего, от обложек книги до фото заката. Кому-то достаточно пары скринов сайтов. И где та грань между «вдохновился» и «сп*здил»? (Это вообще отдельная тема дискуссии, можно только вспомнить последний случай с Axe)

Я стала замечать, как от проекта к проекту меняется мой подход к поиску и выбору референсов. Чаще всего, в поиске концепции я просто сижу день-два и рассматриваю подборки, Pinterest, Инстаграм, Dribble, Behance. Нахожу крутые варианты и они благополучно улетают в заветный файлик в Фигме «на потом». А то, что остается, это 5-10 скринов и ссылок. Если начинаешь накидывать больше, точно зароешься и потеряешься.

Это что касается именно концепции. Поймал направление, попробуй применить сразу же. Не подошло. Ищешь дальше.

При отрисовке остальных блоков, уже ищешь не дизайн, а идеи и композицию. Это следующий этап и совсем другая работа с референсами. Вот тут как раз очень пригождается собственная библиотека в Фигме и все отложенные «на потом» скрины. Собирай как можно больше, это очень сократит время в дальнейшем.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22🔥13💯1
Выложила свой первый кейс на Dprofile 🔥 Даже волнительно как-то 😆

Буду рада вашей поддержке:
https://dprofile.ru/case/80129/oura-ring
Please open Telegram to view this post
VIEW IN TELEGRAM
❤17🔥8👍4