17-ый проект в #madeontilda 🖤

https://madeontilda.ru/#!/w/https://re-markable.ru

Референсы и насмотренность

Чтобы быстро пополнять свою копилку насмотренности, и дополнительно ускорять работу над проектами — просто включи в свою рутину несколько минут в день на поиск и анализ референсов. Искать их можно на ресурсах в подборке, а сам процесс выглядит так:

• 1 шаг
Заходим на сайт, пролистываем до подвала. Ловим первое ощущение, эмоцию, стиль.

• 2 шаг
Оцениваем, что зацепило, анализируем.
(Шрифт, цветовая гамма, композиции, контент, структура, анимация)

• 3 шаг
Погружаемся в детали, взаимодействуем с интерфейсом.
(Ховеры, меню, микро-анимации, нестандартные решения)

• 4 шаг
Делаем скриншоты/запись экрана конкретных блоков или элементов.
Добавляем в свою библиотеку в Eagle или Figma, раскидываем по категориям для быстрого поиска (оставляем ссылку на сайт и комментарии, если нужны).

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

Из последних добавленных:

1. doubleplay.studio
Типографика и цвет 🤤, плавность анимаций, дико приятный сайт.

2. duabyab.com
Детали, меню, карточки и страница товара (именно здесь взяла идею для одного из блоков Remarkable).

3. destigmatize.ca
Как фанат навбаров, не смогла пройти мимо, добавила себе.

4. burocratik.com
Тоже отправила меню в библиотеку, классное.

Лучший опыт обучения эвер! Рассказываю!

Я уже год делаю сайты на Tilda.
С каждым новым проектом хочется делать круче — больше кастомного кода, больше всяких деталей и фишек.
И я это делаю. Клиенты довольны, сайты начали залетать в МОТ.

Но иногда смотрю на готовый результат и думаю: окей, это работает... но я фиг знает как это вообще получилось.
Особенно это касается сложных анимаций. Часто я находила референс, упарывалась чтобы повторить, пробовала тыщу итераций кода и настроек. В какой-то момент оно срабатывало, и я такая — всёёёё, только бы не сломать! Не дышим!

Меня это накаляло. Хотелось понимать процесс и управлять им, а не угадывать.

И тут я подумала — я же знаю дизайнера, чьи решения по анимации меня восхищают, чьи сайты я сохраняю в референсы, чьи открытые уроки в Tilda Publishing я обожаю. Что если постучаться в личку, рассказать где у меня затыки и попросить помочь точечно?

Так я написала Алёне Спириной и попросила консультацию.
А она согласилась.

Вчера мы созвонились, — и я обалдела.
Алёна сверстала отдельную страницу с релевантными примерами, разобрала все интересующие меня механики пошагово и поделилась личными фишками в работе с анимацией. Это был мощный концентрат прямо под мой запрос.

Всего час — и я поняла как всё работает изнутри. Один час! И я разобралась с тем, что целый год делала наугад.

Короче, консультации у проверенных экспертов — это огонь. Рекомендую жоско!
Единственное о чём жалею — что не написала Алёне раньше.

Разбор проекта

Есть идея разобрать 1–2 ваших проекта. Дам обратную связь по структуре, дизайну, вёрстке и опубликую видео на канале.

Если хочешь ревью, в комментариях к этому посту:

1. Кидай ссылку на проект (в идеале Figma + сайт на Тильде, но подойдёт и что-то одно)

2. Напиши, какая была задача, с чем есть трудности, что смущает, что не получилось реализовать. Чем подробнее опишешь контекст, тем полезнее будет разбор.

Если будет много реакций 🖤 — оставим такой формат на регулярной основе 😌