Surf Brand
Guidelines
Surf Brand Guidelines
Surf Brand Guidelines
Surf Brand Guidelines
Surf Brand Guidelines
Стратегия
бренда
Внутренняя стратегия
Surf позволяет оставаться верным себе, развиваться и работать над новейшими технологиями в эпоху глобализации и растущего корпоративного контроля
Внешняя стратегия
Surf культивирует пространство, в котором лучшие таланты развиваются и создают инновационные продукты, на базе новейших технологий
Подача
Все материалы бренда подаются через призму архетипа Creator, который несет основной импульс и фундамент ценностей: искренность, мастерство, экспериментаторство, визионерство, нонконформизм и новаторство.

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

Бренду будут мешать решать задачи: заурядное видение и исполнение, застой, боязнь принимать вызов, бездействие, отсутствие внутренней культуры, притворство.

Противостоять слабым сторонам можно с помощью юмора, самоиронии, естественности и оригинальности.
Задачи бренда
— Показывает экспертизу в дизайне, ML и образовании

— Сплочает коллектив, задает новую планку, создает желанный имидж

— Транслирует ценности и подход, которыми владеет студия
Как показать экспертизу в дизайне, ML и образовании?
Стиль верстки, используемая типографика и эстетика отсылают к технологичности, структурированности и наличию вкуса. Студия позиционируется как продакшен со своим образовательным учреждением. Компания говорит чистым и понятным языком без формальностей или излишних фамильярностей, последовательно, лаконично и со вкусом.
Как сплотить коллектив и создать имидж места, в котором хочется работать?
Студия должна больше доносить до всех общую миссию, чтобы люди из разных отделов могли вокруг нее объединиться. Бросать вызов привычным стереотипам через новые проекты, устройство студии, редактуру, дизайн и поступки. Рейтинг лучших сотрудников, чтобы отмечать достижения, лендинг «Работа в Surf», чтобы привлекать больше сотрудников нужного типа
Почему важно транслировать ценности и подход
Ценности определяют приоритеты и позволяют находить наших идеальных клиентов и специалистов. Открытая база знаний и процессов компании — пример для остальных, прозрачность для клиентов.
Девиз — Challenge Yourself
Образ
Технологии с человеческим лицом
Характерные черты
Mobile/ML продакшн со своим образовательным учреждением
Драйверы
Digital revolution, energy, creativity, mastery & control, simplicity, constant change, ambitions, imagination, experiment, delightful experience, break the boundaries, create values, expand vision, видение в форму
Смысловая составляющая
Революция, смена парадигмы, быть собой, disruption, футуризм, разрушение стереотипов и старого уклада вещей, бросать вызов устоям.
Гибкость, адаптивность, естественность, сила движения — смыслы, которые несет нейминг

Визуальные
образы
Образы для фотосессии
— В slow-mo люди разбивают на много мелких частей битой объекты символизирующие стереотипы, устаревший уклад вещей

 — Проходят/пробивают кулаком стены/перегородки, символизируя выход за пределы ограничений, освобождение, силу и энергию

 — Разрезают катаной объекты, символизирующие антагониста

 — Использовать клавиатуру как молоток, чтобы разлетались клавиши, когда разбиваешь очередной символ уныния и бездействия
Дизайн
система
Цветовая гамма
Для фонов к обложкам используются фотоматериалы, обработанные в соответствии с характерным стилем: яркие, вибрирующие цвета в духе поп-арт, характерная цветовая пара: зеленый/красный. Базовый фон — черный, цвет типографики — белый
Типографика
Evolventa — геометрический гротеск для больших заголовков. Скачать
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0


Roboto Mono — моноширинный шрифт для средних/малых заголовков и текста. Скачать
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0


Oswald Semibold — вытянутый шрифт для набора типографических композиций. Скачать
Для оформления некоторых обложек используются типографические композиции, которые иногда взаимодействуют с картинкой-фоном и связаны с ней по смыслу и передаваемой эмоции.
В экранной графике возможно использование кинетической типографики в подобных композициях, а также в самостоятельном виде
Верстка
Характерной чертой верстки Surf является поведение контента на плоскости экрана — он заполняет собой пространство, как вода, от угла до угла. Для верстки используется десятиколоночник с 5 базовыми модулями
Обвес
Базовым элементом характерной верстки является «обвес» экрана — рамка (обычно) из четырех элементов, которые расположены в углах плоскости. «Обвес» создает эффект заполнения и может верстаться согласно требованиям текущего макета, нету одного правильного способа сверстать «обвес», это набор принципов, а не четкие рекомендации по тому, в какой угол помещать логотип.
Угловые блоки
Как вода равномерно растекается по плоскости, так следует стремиться к гармоничной верстке угловых блоков, чтобы они уравновешивали друг друга по визуальному весу, либо чтобы выделялся один ведущий блок, и вся вода утекала в него, а остальные бы выполняли поддерживающую, формообразующую функцию
Отступы угловых блоков всегда одинаковые со всех сторон, кегль шрифта одинаковый, либо образующий блоки одинаковой насыщенности, кроме случаев когда выделяется ведущий угловой блок
Композиция
По центру акцент переходит на фон, либо на типографическую композицию. Таким образом в центре предусмотрено место для контента или декоративных элементов, а вокруг помещается рамка «обвеса»

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