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
История о том, что стоит брать предоплату перед тем, как ставить проект в очередь)

Почти месяц отказывала новым запросам, ожидая его.

Как так можно не ценить чужое время?

#человекпиздеж
💩2
Своя кнопка для формы в Zero-блок 🪄

Пригодился сегодня данный код, когда нужно было дать класс для кнопки + сделать ее немного не стандартную

https://mo-ti.ru/myformbutton

#модификации
❤2
Если мобилка слииишком долго грузит, можно взять этот код 👌🏻


• Редирект на мобильную версию

<script>
if (window.matchMedia("(max-width: 700px)") .matches) {
window.location.href = "ссылка_мобилка";
}
</script>

#модификации
Media is too big
VIEW IN TELEGRAM
🤍 Лендинг // Smart-кольцо
OURA RING

• Две недели на все этапы: от текстов до оптимизации
• Верстка по Window-контейнеру
• Шесть брейкпоинтов
• Модификации и нестандартные решения
• Кастомная корзина и карточка товара
И просто много сил и любви 😌

Посмотреть можно по ссылке: https://oura.tilda.ws/

#кейс
Please open Telegram to view this post
VIEW IN TELEGRAM
😍12👍1🔥1
Закинула в МОТ) Ждем 🙂

А еще, думаю рассказать здесь, как реализованы некоторые решения с Oura, так как есть запросики)

Напишите, что было бы интересно? Может скринкаст запишу ✨
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6🔥2
Media is too big
VIEW IN TELEGRAM
Очень близка эта мысль. Возможно, сайт с видео довольно спорный, и на мой взгляд, далек от реальной жизненной задачи наших заказчиков.

Но! Мысль, что мы все время пытаемся «приукрасить», добавить всего и побольше, как будто пытаясь отработать бюджет или залатать дыры некомпетентности (а быть может, неуверенности), она очень точная.

Хочется стремиться к тому, что если ты оставил только две детали на экране, то ты точно знаешь почему и зачем сделано именно так. Стремиться к чистому, аккуратному, дорогому дизайну.

Сама часто накидаю как можно больше всего, потом сижу и спрашиваю себя «А зачем это здесь?», и если ответа нет – убираю.

А как считаете вы?)

#наподумать
👍12
Собрала несколько кодов, которые чаще всего спрашивали, надеюсь будет полезно 😐 В планах добавить остальные))

https://oura.tilda.ws/codes
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥17🏆2🔥1
Увидела этот первый экран в Кириллица.Дизайн, думаю «блин, ну как так, ну висячий же, почему не перенесли?»

А потом зашла в комменты, и немножко прифигела) Честно, у меня настолько правило переноса устоялось, что очень сложно отойти от этого в своей голове, и попробовать иначе.

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

Нашла статью на vc, с понятными примерами 👌🏻 А кому лень читать, вот основные тезисы:

1️⃣ Да, в текстовых блоках переносить висячие действительно стоит, так как это на удоство чтения влияет.
Кроме тех частиц, что имеют связь с предыдущими словами, например «бы». Но это тоже не правило, а рекомендация


2️⃣ В заголовках и коротких тезисах можно оставлять, только если это улучшает визуальную конструкцию и не рушит смысловую читаемость.
А самое главное, не меняет смысл прочитанного.


3️⃣ Выключка также влияет на поведение висячих, и это стоит учесть.
Направляющая меняет свою ориентацию — правило меняет свою ориентацию.

Переносите «висячие»? 😅

•••
#наподумать
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10
Ееее 🙂 Пятый.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤12👍2🔥1💯1
Как бы я не обожала виндоу-контейнер, есть у него все-таки свои ограничения) 😔 И приходится искать компромиссы, и идти на всяческие ухищрения.

На втором экране, очень уж хотелось сохранить центральную выключку у текста. Пробовала выставить по левому краю – ну совсем не то.
А как сверстать по виндоу, но при этом, чтобы контейнер текста всегда был по центру левой части экрана?
Ничего лучше не придумала, как сохранить текст как svg, добавив в прозрачный фрейм 600*750px 😁
Затем кидаем svg в шейп в Тильде и ставим 50% ширину и 100% высоту)
Только тссс, никому, ладно? 😅 Лучше конечно так не делать)

Кстати, пока писала этот пост, подумала, что можно было бы по одной строке сделать текстовыми контейнерами…Но более запарно конечно.

А первый раз, когда я такая «а что, так можно было?», было на Воксе. Поняла, что текстовые контейнеры можно растягивать, и выставлять им ширину в процентах. А до этого не знала..

К чему это всё. На мой взгляд, на этапе дизайна лучше пытаться абстрагироваться от ограничений Тильды. Хотя бы до момента презентации заказчику. Перед ней конечно, свои новые идеи лучше уточнить или попробовать сверстать. Но я уверена, вы по-любому найдете решение, и только так получится расти 😐
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Полезную штуку нашла сегодня 😍
Если нужно скачать, например, все картинки со страницы сразу в пакетном режиме:
Расширение для Chrome «Simple Mass Downloader» – ссылка на скачивание

Открываем страницу – выбираем расширение – выбираем тип файла – даже можно фильтр по названию поставить – и скачиваем 🤍

#можетпригодится
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7
Хочу по максимуму показывать все, над чем работаю. И самые обычные тоже.

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

Задача была сделать максимально просто и понятно. Чтобы целевая аудитория сходу разобралась как сделать заказ, или как оставить заявку. Плюс сайт будет использоваться под Я.Директ.
Не люблю все виджеты и поп-апы всплывающие, но тут сказали обязательно нужны, перед запуском добавим.

На скриншоте слева – предыдущий, справа – новый проект.
А в этом еще карточки товара дополнила иконками, через css 🙃

Ссылка: https://tsklider.tilda.ws/

#кейс
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍4