Мы OFF+BRAND., небольшая по дизайну студия дизайна и разработки, родившаяся в Глазго, Шотландия.
Мы начали в 2020 году как два соучредителя с общим видением: создавать удивительные впечатления, подобные нашим героям, в таких агентствах, как Resn, Monks и Lusion. К сожалению, никто из нас не знал, как выглядит путь к этому: мы никогда не работали ни в каких агентствах и не занимались подобной работой.
Шесть лет спустя мы — команда из 30 невероятных талантов. Мы реализовали флагманские проекты для таких клиентов, как Microsoft, Slack и Webflow, и приступаем к работе над проектами, которые нас действительно волнуют.
Наше путешествие
ВЫКЛ+БРЕНД. началось с двух человек в небольшом офисе в Глазго. Мы оба хотели создать что-то, что позволило бы нам проявить творческий подход. Поскольку мы оба были трудоголиками и нам не о чем было беспокоиться в личной жизни, мы могли хорошо работать. И тогда случился наш прорыв с Тотем: сборка, реализация которой обошлась нам, вероятно, в четыре раза больше бюджета, и управлять которой было кошмаром. Но это был первый проект, когда мы поняли, что у нас есть шанс сделать что-то особенное. Когда мы показали клиенту окончательный вариант, они все бегали вокруг, а один из них прыгнул в бассейн, потому что был так счастлив. Это было великолепно.
Проект получил награду «Сайт дня» на сайтах Awwwards и FWA, и почти за одну ночь у нас появились более крупные клиенты, готовые передать больше творческого контроля. До появления Totem клиенты не верили в нашу креативность. После «Тотема» клиенты приходили к нам, ожидая чего-то особенного, а это означало, что мы могли выполнять более эффективную работу, что, в свою очередь, приводило к большему признанию. Мы поняли, что отличная работа с клиентами начинается с репутации, которую вы создаете еще до того, как клиент позвонит. Без этого доверия каждый в конечном итоге принимает более безопасные решения (то есть плохие решения).
Несмотря на то, что мы выполнили множество работ для клиентов, которыми гордимся, мы никогда не прекращали инвестировать в наши внутренние проекты. Это, вероятно, так же важно, как работа с клиентами, потому что они значительно повышают квалификацию вас и вашей команды, и (для нас) именно они приводят к увеличению количества клиентов. Они также очень веселые. Два хороших примера: Манифест и Эфир. Есть множество плохих примеров, которые не видят дневного света, но на них тоже можно учиться.
Креативность в масштабе для предприятия
Это скучно, но по мере того, как мы росли, мы многое узнали о (откровенно говоря, неизмеримой) важности хорошего управления и управления изменениями. Звучат ужасно, но именно эти две вещи позволяют вам реализовать творческий подход в большом масштабе. По сути, завоевывайте и поддерживайте доверие крупных клиентов, и они позволят вам заниматься творческой работой. Потеряйте их доверие, и вы либо полностью потеряете контракт, либо предложите что-то ванильное, что всех разочарует, что гораздо хуже.
И вы укрепляете доверие следующим образом:
- Видимый контроль над проектом и сроками.
- Помогите клиенту увидеть и поверить, что вы контролируете проект и сроки.
Итак, когда мы думаем о креативности в масштабе, второй по важности вещью (после аппетита клиентов) является управление. Но как только вы это поймете, все станет легко (э-э). И тогда открывается творческая часть: вам нужно дать творческим людям пространство и полномочия, чтобы они могли делать удивительные вещи. Чем больше вы будете мешать им своими проблемами, тем менее особенным будет этот опыт.
Витрина
Окна & Поверхность
Раньше мы никогда не реализовывали проект такого масштаба, с таким количеством разных агентств и уровней управления. Размах был огромен. ВЫКЛ+БРЕНД. пришлось создать полную систему проектирования для трех флагманских продуктов Microsoft (и получить одобрение от каждого отдела).
Очень большая задача:
- Спроектируйте и создайте новое Microsoft Windows веб-сайт. Еще один очень большой вызов.
- Разрабатывать новые Microsoft Поверхность опыт работы с веб-сайтом, разработанный нашими друзьями из Feels Like Studio. Нелегко.
Первым шагом было создание повторно используемых компонентов и общей системы проектирования — основы, которая должна была поддерживаться на одном из самых посещаемых технологических веб-сайтов в мире по всему набору продуктов. На практике этот проект дублировал работу по проектированию Windows и Surface, что усложняло получение одобрения, но также гарантировало, что в конечном итоге мы получим более надежную систему. Нам удалось создать красивую, современную дизайн-систему, которая сейчас масштабируется по всей экосистеме.
Затем мы разработали новый интерфейс Windows и разработали как Windows, так и Surface. В частности, целевая страница Windows стала для них большим шагом вперед. Это не обычная корпоративная домашняя страница. Самой сложной частью пути было количество заинтересованных сторон и обеспечение того, чтобы каждый чувствовал себя услышанным и понятым. Здесь нет короткого пути: вам просто нужно убедиться, что вы искренне учитываете отзывы всех участников и, по крайней мере, должным образом объяснить, почему вы не принимаете все это во внимание, если не можете. Множество трекеров, множество электронных таблиц, множество встреч, но мы все дошли до цели.
Лэндо Норрис
Лэндо был полностью посвящен полученному опыту и рассказу своей истории за пределами автоспорта. К счастью для нас, он выиграл вместе с выпуском сайта, что привело к огромному трафику и, вероятно, способствовало общему эффекту, который оказался даже большим, чем мы ожидали.
Что касается дизайна, нам не нужно было беспокоиться о более широкой системе; речь шла о максимальном воздействии на пользователей сайта. Такие задания встречаются очень редко, поэтому мы сделали все возможное, чтобы создать что-то красивое и оригинальное.
Опыт героя теперь стал мемом: каждый вибкодер в Твиттере воссоздает свои собственные (иногда ужасные) версии. Но когда мы выпустили сайт, это была свежая концепция, которая оказала самое большое влияние, которое мы когда-либо видели. Самой сложной частью всего этого была передача идеи: мы знали, что она победит с самого начала, но мы просто боялись, что клиенту она не понравится, поэтому мы почти построили всю идею, прежде чем показать ее им, чтобы убедиться, что они подпишут.
По срокам это была настоящая гонка: меньше двух месяцев на полное проектирование и разработку. Затем мы сидели над этим около шести месяцев, ожидая, что это может стать для них большим облегчением, но не зная этого. Наш руководитель отдела развития Адриан Губрика с самого начала заявил, что это будет «Сайт года». Молодец, Адриан!
Тревор Ной
Мы большие поклонники Тревора, и мы не могли в это поверить, когда он предложил нам поработать. Он сказал, что хочет сделать что-то интересное и веселое, поэтому мы долго изучали идеи, прежде чем определиться с направлением. Тревор не торопил нас со временем, поэтому мы получили массу удовольствия, исследуя разные точки зрения.
Тревор много делает. Вставать. Подкасты. Письмо. Живые выступления. Комментарий. Каждая идея, которую мы исследовали, в конечном итоге сводилась к попыткам разбить их на четкие категории, но это никогда не было в его духе. Что ему действительно казалось, так это постоянное любопытство, ощущение, что он всегда что-то замечает, устанавливает связи и собирает идеи, и это стало концепцией.
Домашняя страница превратилась в живой коллаж мыслей, историй и моментов, почти как если бы вы заглянули в голову Тревора. По большей части мы сохранили все в виде плоских 2D-элементов с тщательно подобранным подходом к WebGL. Было важно, чтобы технология никогда не стала предметом внимания; мы хотели, чтобы люди помнили Тревора, а не нас (может быть, немного нас).
Другая задача заключалась в том, чтобы сделать все аспекты его карьеры одинаково важными. Мы не хотели, чтобы стендап, книги, живые выступления и все остальное выглядело как коробки на сетке. Им всем нужна была собственная индивидуальность, но при этом они чувствовали себя принадлежащими одному и тому же человеку и переживающим один и тот же опыт.
Стивен
Стивен и его команда пришли к нам с действительно сложной задачей. Они описывают себя как операционную систему для экономики создателей, которая является совершенно новой категорией, и нам нужно было создать веб-сайт, который помог бы людям понять это почти сразу. Проблема заключалась в том, что наши попытки объяснить это не были особенно наглядными. Поэтому мы сократили его до самых важных частей. Стивен построен на четырех столпах: средства массовой информации для авторов, сообщество, продукты и технологии. Мы могли бы дать каждому отдельную страницу, но это казалось неправильным подходом. Вся суть платформы в том, что все взаимосвязано, поэтому мы хотели, чтобы веб-сайт выглядел как нечто, что вы можете изучать, а не читать. Таким образом, пользователь может исследовать нить взаимосвязи между четырьмя столпами экосистемы, а не переходить к отдельным фрагментам информации.
Это привело к тому, что в центре всего опыта оказался интерактивный холст. Вместо того, чтобы действовать как навигация, она стала навигацией. Кроме того, в процессе проектирования нашей клиентке (спасибо Джорджии Гибсон) настолько понравилась навигационная армиллярная сфера, что она пришла на один из наших звонков с настоящей деревянной моделью, сделанной ее другом-плотником.
Каждая часть экосистемы имела свое собственное пространство и индивидуальность, что затягивало вас глубже в историю, прежде чем вы действительно заметили, что перемещаетесь по сайту. Это произошло из того, с чем мы экспериментировали в нашем собственном проекте Manifesto, где мы поняли, что навигация не всегда должна находиться вне опыта: она может быть опыт. Стивен дал нам возможность развить эту идею гораздо дальше и доказать, что она может работать в большом коммерческом проекте.
Оставшаяся задача заключалась в том, чтобы все это взаимодействие по-прежнему было легким. Аудитория Стивена проводит большую часть своей жизни в Интернете, поэтому, если сайт казался медленным или перегруженным, мы потеряли их еще до того, как начали. Все должно было быстро загружаться, мгновенно реагировать и при этом оставлять место для небольшого сюрприза.
ВЫКЛ+БРЕНД. Манифест
Наш Манифест создавался не для клиента. Это было сделано для нас, поэтому на это ушло около 2 лет, и в какой-то момент в проекте участвовал почти каждый креатив агентства.
По сути, это онлайн-головоломка с прекрасным художественным оформлением и эксцентричным копирайтингом (если мы сами так говорим). Это дало нам возможность сказать и показать, что такое OFF+BRAND. означает экспериментирование с моделями взаимодействия, повествовательными структурами и визуальными идеями, которые никогда не появятся в коммерческом задании. Нам было очень весело сделать навигацию центром нашего опыта, связующим звеном с некоторыми другими нашими проектами.
Это также дало нам что-то действительно ценное, когда мы говорили с клиентами о возможностях Интернета. Демонстрация клиенту того, что мы создали этот безумный мир ради него, помогла завоевать доверие, которое мы ему обеспечим. И это также иллюстрирует, что мы можем сделать так, как вы не можете с помощью презентационной презентации.
Эфир1
Aether1 был шансом пойти ва-банк. Весь продукт посвящен «безграничному звуку», поэтому сайт должен был выглядеть кинематографичным с самого первого кадра, одной непрерывной дугой от главного до нижнего колонтитула, с каждым движением, синхронизированным с прокруткой.
Больше всего мы гордимся чатом с искусственным интеллектом, встроенным непосредственно в сцену. Вместо того, чтобы загонять чат-бота в угол, мы сделали его частью самого мира, так что вы можете спрашивать о продукте и получать ответы, даже не выходя из него. Вокруг него расположены голографические демонстрации продуктов и небольшие мелочи, например, возможность управлять звуком сайта, возясь с элементами управления на боковой стороне наушников. Честно говоря, такие пасхальные яйца важны для нашей команды доставки не меньше, чем для всех остальных. Мы понятия не имеем, как мало людей их находят, но мы все равно их помещаем. В этом вся суть.
Под всем этим представляет собой смесь запеченной 3D-хореографии и генеративных эффектов в реальном времени, и настоящая задача заключалась в том, чтобы обеспечить плавность работы на всех устройствах, потому что кинематографический сайт, который заикается, не кинематографичен, он просто медленный. Полностью построен на Webflow, что (опять же) удивило людей, учитывая, как много всего происходит.
В 2025 году он выиграл премию Webby за лучшее использование анимации или анимированной графики, и люди задерживались на нем в среднем на три минуты — долгий срок для сайта продукта и лучшее доказательство того, что анимация оказывает влияние, а не просто хвастается.
Этот сайт позволил нам получить больше работ, чем любой другой.
Маленький по дизайну
Чем дольше мы занимаемся бизнесом, тем меньше мы заинтересованы в росте. Мы оба оставили карьеру, чтобы заняться чем-то интересным, поэтому мы стараемся оставаться рядом с работой, а не превращать нашу творческую маленькую студию в оперативную работу. Тесное сотрудничество с нашими креативщиками (а в OFF+BRAND креативщиками являются все, в том числе и наши продюсеры) — лучшая часть работы.
Клиенты и коллеги приходят к нам по той же причине: мы выпускаем фейерверки. Все в нашей культуре существует для ее защиты. Это культура совершенства в доставке, а не в процессе. Мы стараемся не сосредотачиваться на уровнях управления или методологии; мы выбираем замечательных людей…