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
+1 в #madeontilda

Вчера сайт Plus to level уже через 2 часа после отправки оказался в Подборке лучших сайтов на Тильде 🖤 Такого оперативного попадания в мот не припомню)

⛓ https://madeontilda.ru/#!/w/https://plustolevel.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
40🔥22❤19👍3🤩2😍2🦄1
Четвертый день в Калининграде

Телефон достаю только чтобы открыть навигатор, фотографирую глазами и запоминаю. Пытаюсь прислушаться к ощущениям, потому что первостепенная цель поездки — изучить город, жк и выбрать квартиру.
Вроде нашли то самое)
Если все сложится, как задумали, то скоро переедем.

Сегодня первый раз выбрались к морю, влюбилась еще больше 🖤

Очень устали за эти дни, завтра возвращаться и закрывать накопившиеся рабочие задачи.
❤32🔥16🦄104❤‍🔥1😍1
Artem Kashakov • Сайт-портфолио

Задача была не из лёгких: разработать сайт для другого дизайнера, передать «характер», но не перегрузить креативом, сохранив логику.

В поисках этого баланса было несколько вариантов концепций — от строгого минимализма до вращающейся 3D-головы на полэкрана. 😅 Некоторые могу показать в комментариях, если интересно — дайте знать 🖤

Сфокусировалась на деталях, и после того как всё заанимировала — проект ожил и всё встало на свои места. Артём, спасибо, что доверился)

Посмотреть:
⛓ https://kashakov.art

#кейс@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
344👍13🦄10❤5🔥3💯1
#Madeontilda×12

Еще один проект в подборке, приятно 🖤

⛓ https://madeontilda.ru/#!/w/https://kashakov.art
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2719❤‍🔥11👍4🦄1
Библиотека референсов

Изначально я просто отправляла себе в избранное ссылки на рефы, которые благополучно забывались/терялись.

Листать подборки, собирать понравившиеся сайты и вдохновляться — это хорошо, тем более что во время просмотра мы врубаем «фоновую насмотренность» и качаем визуальный вкус.

Но если мы говорим о чем-то более прикладном, то советую начать собирать свою личную «библиотеку решений».


Почти два года вела файлик в Фигме, где все элементы разложены по страницам (меню, карточки, подвалы и тд) + добавлены комментарии. И было на самом деле просто и понятно. (покажу в комментариях)

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

И для этой задачи идеально подошел Eagle 🦅

Пробовала его как-то давно, но в тот раз не зашел, показался слишком сложным. И как хорошо, что дала ему второй шанс) Протестировала месяц и поняла что да, к Фигме возвращаться не хочу.

И вот почему:

1) удобное распределение по основным и вложенным папкам;
2) создаешь свою систему тегов, что тоже помогает всё структурировать;
3) ссылки на сайты сразу под рукой;
4) можно оставить коммент;
5) автоматически показывает цвета;
6) есть расширение для хрома, с которым добавление рефа в коллекцию занимает несколько секунд и сразу со ссылкой;
...
и это далеко не всё.

⛓ https://ru.eagle.cool/ (Стоит $34,95 единоразово, 30 дней пробная версия. Придется повозиться с оплатой, если из РФ, но оно того стоит)

Распределяя для себя референсы на элементы, потом очень удобно вытягивать оттуда нужное, и не тратить так много времени во время разработки концепции или макета.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤29🔥108👍4🦄1
Истории для поддержки и охватов нашего нового проекта.
Пока в процессе: доделываем с Алёной @spirina_design финальные детали, чтобы потом опубликовать на Дипрофайле.
124❤7🔥6👍4👏2🥰1🌚1🦄1
Media is too big
VIEW IN TELEGRAM
Кастомный аккордеон из Zero-блоков всего за 2 минуты

У Annexx много классных модификаций, но их «конструкторы» — это просто любовь 🖤

В видео показала самую базовую настройку, которой пользуюсь чаще всего:

1) Создаем Zero-блоки
2) Добавляем их ID в конструктор
3) Выбираем иконки раскрытия и закрытия
4) Повторяем для каждой карточки

Всё быстро и просто)
В качестве примеров упоминала сайты Кафедры Dprofile и Артема.
🔥2110😍4👍2👏1🦄1
Media is too big
VIEW IN TELEGRAM
Небольшой тизер нового проекта 🖤

Cейчас в работе интернет-магазин браслетов Whoop. И кто же знал, что уже согласованную концепцию придется переделывать (где-то менять блоки и тексты), потому что выйдет новая 5.0 версия. 🤪

Отправила на согласование макеты, уже не терпится сверстать)

#кейс@spirina_design
140🔥23😍9❤2🦄2
This media is not supported in your browser
VIEW IN TELEGRAM
Подборка 18 ресурсов c модификациями

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

🖤 Мой маст-хэв: Annexx, Voron, Matilda, Design by Max, Tistols.

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

И еще в последнее время очень выручает ChatGPT (помогает доработать код, найти ошибку и тд.)
Please open Telegram to view this post
VIEW IN TELEGRAM
1239🔥19👍9❤1🦄1
Media is too big
VIEW IN TELEGRAM
Сайт Кафедры Dprofile в #Madeontilda 🖤

Еще один совместный проект с Сашей @lagutalaguta, в котором рада была принять участие. Интересный прием с «растягивающимся» фоном (взяла себе на заметку тоже) позволил сверстать сайт по window-контейнеру, сохранив при этом размеры даже на широких разрешениях.

Кстати, еще можно успеть принять участие в программе «Дизайнер интерфейсов: карьера, процессы, инструменты», очень рекомендую. Такой основательный подход вы вряд ли где-то еще найдете, который к тому же подкреплен годами реальной практики.

⛓ https://tilda.cc/ru/madeontilda/#!/w/https://ed.dprofile.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3114🦄10🥰5🔥2🌚2🤩1💯1