Сайт Statement Of

Контент-студия, которая занимается креативом, продакшеном и стратегией для проектов любого масштаба. Создаёт кампании, расширяет контент-библиотеки и усиливает социальные платформы. Работает вместе с бренд-командами, агентствами и издателями, решая креативные задачи через продуманный подход и нестандартное мышление. #студия #минимализм #горизонтальный_скролл #gsap Посмотреть сайт 👨‍💻

Эти приемы стабильно спасают нам по часу в день:

1. Использование UI-kit, когда 10+ страниц, куча повторяющихся элементов и правки 24/7. Это база для ускорения разработки и быстрого внесения изменений. Если же делаете маленький лендос — куда быстрее работать в рамках одной страницы, всё и так на виду. 2. Компоненты — топчик идея, когда есть много повторяющихся блоков на разных страницах. Сделал один раз, потом переиспользовал сколько надо. Поменял в одном месте — обновилось везде. 3. Личная база знаний. Если в проекте делал какую-то фичу, перенеси это решение к себе, и потом используй его. Голая вставка со старого проекта редко работает идеально, но как точка опоры супер. Поэтому база — это примеры, фишки, сервисы, которые можно быстро подогнать под задачу. 4. CMS — шикарная штука для однотипных карточек. Например: - карточки преимуществ (если их 6+) - слайдеры с командой - отзывы - блоки тарифов и т.п. Из плюсов — порядок, никакого копипаста дивов, легко редактировать. Также можно использовать CMS на ленде для страниц, но это уже в сторону блога и крупного проекта. 5. Свой шаблон-пустышка. Один раз настраиваешь себе структуру проекта: шрифты, контейнеры, базовые стили, фавикон, анимации появления. И каждый раз начинаешь с него, не тратя время на одни и те же настройки 6. Горячие клавиши + Webflow-расширение в браузере. Такие мелочи экономят минуты, а в день это уже целый час. 7. Использование кастомных скриптов или библиотек, заточенных под определенную задачу: - подключение Swiper.js или Splide, вместо ручной сборки слайдера из 40 дивов - автоматические анимации при скролле через gsap - кодовые сниппеты, которые можно вставить и забыть Какие из этих фишек используете вы или может у вас есть свои? 🤝🤝
Изображение поста

Что под капотом у сайта, который будем верстать на буткемпе?

На скринкасте — то, какое красивое портфолио у вас получится. Но перед тем, как врываться в верстку, мы расспросили Даниила, автора дизайна и вёрстки, о процессе ⭐ Анимированная hero-секция — Какие элементы будем оживлять в hero? Фон, текст и интерактивные блоки — они будут реагировать на ховер и менять состояния. Такой экран дает +100 к вовлечению. — Какую анимацию будем вставлять через скрипты? Большую часть сделаем на встроенном GSAP в Taptop. Но для якорной прокрутки до блока кейсов подключим кастомный скрипт, тк у нас динамический контент, и обычные якоря не подходят. — Как кастомизировать hero под себя? Это изи: меняешь цвета, шрифты, тексты, подставляешь направления работы, кейсы, описания. Всё покажем ⭐ CMS и динамические кейсы — Зачем вообще подключать CMS? Чтобы не верстать каждую карточку руками. Один раз создаёшь структуру кейса, и потом добавляешь новый контент через CMS. Taptop сам всё подставит и выведет. — А обложки кейсов будут генериться автоматически? Да, для каждого из кейсов мы заранее скрафтим в ИИ фон, изображение и тематические иллюстрации. И загрузим их ⭐ Интеграция формы связи с тг — Сложно ли будет сделать интеграцию с тг в Таптоп? В пару кликов. Там уже есть встроенный модуль, просто настраиваешь бота и подключаешь форму. — И последнее: на что обратить внимание новичкам при верстке? Всё, что повторяется — делай с классами. Один раз собрал, и потом быстро редактируешь весь проект, не нужно править элементы вручную. 🚨 Залетай на буткемп, чтобы сегодня начать собирать сайт-портфолио на Taptop https://t.me/pxp_reg_bot?start=id486013751 Первый эфир — в 18:30 мск. Ссылки на эфиры можно получить только через бота, в канал выкладывать их не будем

Горячий апдейт для Webflow юзеров ☀️

WF наконец-то релизнули это — весь функционал GSAP стал нативно доступен в Webflow Interactions. Для тех, у кого оплачен Site plans • Новый интерфейс с горизонтальным таймлайном и точной настройкой анимаций • SplitText, Staggers, ScrollTrigger и другие фишки добавляются без кода • Можно переиспользовать interactions по всему сайту Доступ выкатывают постепенно, но скоро праздник будет у всех. А мы уже успели потестить новый функционал. Полный обзор скоро будет на нашем YouTube! Но очень хотели поделиться этой новостью с вами, так что ловите кусочек обзора на скринкасте Такими новостями нужно делиться, так что ставьте 🔥 и кидайте её своим друллегам
Horizontal navigation to showcase projects
Знакомьтесь, Вадим — прошёл наш курс по Webflow и... через пару недель уже верстал коммерческий проект в Relate!
Бэкграунд Вадима был следующий: дизайнер с опытом 3+ лет в интерфейсах. До нас он уже пробовал Framer и делал пару сайтов на шаблонах Webflow. Но понял, что без нормальной базы далеко не уедешь. После курса мы порекомендовали его как сильного студента на стажировку в Relate. Она была насыщенной: в первую же неделю он собрал мобильную версию сайта, а потом получил задачу на вёрстку целого проекта — десктопа + мобилки. В одной из секций нужно было реализовать эффект snap scroll, так что пришлось лезть в JavaScript и GSAP. Справился за пару дней! И понеслась: работы со стажировки быстро начали конвертиться в новые заказы. Так что курс + стажировка дали Вадиму и знания, и коммерческие проекты. Ну наш 💪 Пример одной из работ можно чекнуть тут (или на скринкасте) https://www.diambra.ai Сейчас он продолжает фрилансить, работает парт-тайм в проекте и параллельно будет брать заказы на Upwork. Как вам проект Вадима? Мы в восторге) А @relate_studio спасибо, что доверяете нашим студентам!
Andreas Antonsson Вдохновляющий темный веб-сайт, созданный с помощью gsap, с использованием inter в качестве основного шрифта.
Types: Portfolio, Personal Styles: Dark, Large Type Fonts: Inter, Dahlia
Shimmery Text использует SVG и GSAP для создания анимированного текста. Любые детали можно отредактировать.
Изображение поста
Healthy Together Вдохновляющий веб-сайт мобильного приложения для здоровья и фитнеса, созданный с помощью gsap, с использованием inter в качестве основного шрифта.
Types: Mobile App, Web App, Health & Fitness Styles:Animation, Illustrative Fonts: Inter
Shimmery Text использует SVG и GSAP для создания анимированного текста. Любые детали можно отредактировать.
Изображение поста
Swag Вдохновляющий веб-сайт мобильного приложения для бизнеса и финансов, созданный с помощью gsap, с использованием roobert в качестве основного шрифта.
Types: Business & Finance, Mobile App, Startup Styles: Animation, Illustrative Fonts: Roobert, Rebond Grotesque
ChainZoku
Вдохновляющий nft-анимационный веб-сайт, созданный с помощью gsap, с использованием druk в качестве стандартного шрифта. Types: NFT, Web3, Crypto. Styles: Animation, Illustrative, Colourful, Large, Type, Interactive, Scrolling Animation, Parallax. Fonts: Druk, Neue Haas Grotesk Display, Akzidenz Grotesk Extended.
Коллекция из 50 уникальных javascript-эффектов, созданных с помощью GSAP.
Всем привет, с вами снова ваша вкусная хрустящая чипсина!
Прошу прощения за шуршание и хруст в эфире, но иначе никак — не могу удержаться, когда вижу такой вкусный проект на Webflow. Давайте вместе заценим, похрустим и вдохновимся. https://www.bleibtgleich.com/ Тут всё на высоте: язык, стиль, анимации, работа с типографикой — всё сливается в единый ритм. Несмотря на то, что сайт сделан на базе Webflow, он великолепно сочетается с продвинутыми анимациями на GSAP и Three.js. Переходы между страницами и «живые» эффекты (шейдер, реагирующий на курсор и плавный скролл с Lenis, да-да, именно Lenis) придают завораживающей динамики. По нажатию одной кнопки можно отобразить модульную сетку — мелочь, а приятно, ведь это позволяет увидеть структуру дизайна во всей красе. А ещё текст здесь подаётся в два слоя, что даёт дополнительной глубины восприятию. Этот проект — яркий пример органичного синтеза простоты и сложности: Webflow обеспечивает удобное управление контентом, а кастомный код раскрывает почти «безграничные» возможности для анимации и вовлечения пользователей. Получилось круто и точно достойно того, чтобы об этом похрустеть!
Заглянули в портфолио к Эльвире, ученице нашей школы. И вот что там нашли ↓
• Эльвира из Питера, по образовнию юрист, а по призванию UX/UI дизайнер • прошла курс для новичков, а сейчас учится на курсе для опытных • обожает PP-комьюнити: «Самые лучшие люди, самая лучшая поддержка, все друг другу помогают, и я не устану это повторять» • до нашего обучения прошла два других курса, но все еще была недовольна портфолио и боялась откликаться на вакансии • немного DJ, создает атмосферные плейлисты В общем, Эльвира — супер-умница, такими учениками невозможно не гордиться. А свой путь во взрослую верстку у нее начался (вот сейчас будет неожиданно 😈) с бесячий Тильды. После неудачной борьбы с ней она наткнулась на наш воркшоп по Webflow. И тут понеслось. Эльвира говорит, что главное преимущество Webflow для нее — это супер-понятный интерфейс и куча кастомных возможностей для элементов, которых не было на Тильде. Короче, одно сплошное удовольствие. После того, как курс закончился, наступило время искать проекты и клиентов. И тут Эльвира тоже поступила верно ☺️ Она сразу взялась верстать сайт друзьям за символические суммы. Чтобы наработать опыт и проекты для портфолио. Параллельно в чате откликнулась на клич задизайнить сайт, где заколлабилась с Лешей. Ему отдельное спасибо от Эльвиры за то, насколько увереннее она стала себя чувствовать как дизайнер. Потом пошли заказы на сайты от знакомых и знакомых знакомых. Сейчас Эльвира работает дизайнером продукта в компании, которая специализируется на биометрических системах безопасности. И параллельно берет небольшие заказы на разработку сайтов на Webflow 🦾 В планах дальше — изучение GSAP, новые анимации и прокачка навыков верстки на Webflow. Ведь рынку точно нужны мультизадачные спецы. На гифке один из проектов Эльвиры для транспортой компании. Интересно, что даже не самые крупные российские бизнесы переходят на Webflow. А вот здесь можно посмотреть на все ее портфолио. И сразу связаться, если есть интересные предложения 🙂
Webflow Conf 2024: краткий обзор обновлений 🖼️
Помимо покупки GreenSock, на конференции показали еще несколько обновлений. Смотрим вместе 👀 ↗️ Webflow Analyze и Optimize Нативный инструмент для аналитики сайтов Webflow Analyze выйдет в этом месяце. А Webflow Optimize, нативное решение для A/B-тестирования, персонализации и маркетинга, доступен уже сейчас, но только на сайтовых планах. Функционал для маркетологов — крутой. Некоторые приложения теперь можно будет интегрировать нативным решением. Разработчикам удобно, что больше не нужно мучиться, чтобы подрубать сторонние сервисы. Для фрилансеров, которые сделали и отдали сайт, пока что выглядит немного бесполезно. Optimize: цены стартуют от $299 в месяц, Analyze от $29 в месяц. ↗️ Webflow Localization На базовом тарифе уже появилась возможность стилизовать элементы не только в основной локали. Раньше такой возможности не было. Есть сподвижки в плане экономии и дополнительные плюшки для форм. Также по логике, мощности обработки запросов по API увеличатся. ↗️ Улучшения CMS Уже добавлены новые CMS API, поддерживающие массовые операции. Это упростит импорт данных из сторонних источников. А еще в течение года увеличатся уровни вложенности в CMS. Кажется, что Webflow все больше ориентируется на корпоративные решения. Внимательно следим за тем, какие обновления нас ждут. Кстати, про нативный инструмент для GSAP в Webflow мы уже писали(https://t.me/pixeleperfect/1735) вчера, не забудьте послушать 🥹
Изображение поста