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 — вытянутый шрифт для набора типографических композиций. Скачать
Для оформления некоторых обложек используются типографические композиции, которые иногда взаимодействуют с картинкой-фоном и связаны с ней по смыслу и передаваемой эмоции.
В экранной графике возможно использование кинетической типографики в подобных композициях, а также в самостоятельном виде
Типографические композиции
Key-visual стиля базируется на типографических композициях, в которых заложен потенциал для создания кинетической типографики. Подразумевается, что стиль может развиваться и адаптировать новые формы типографических композиций, но для того, чтобы прицельно очертить направление, было создано 10 базовых композиций, на основе которых можно создавать обложки и анимацию.
1. Дробление + дублирование
2. Дублирование литер
3. Дублирование слов
4. Плавные пересечения
5. Дублирование + круги
6. Круги в перспективе
7. Разная ширина литер
8. Конструктивизм
9. Перспектива по краю
10. Вытягивание и смещение
Верстка
Характерной чертой верстки Surf является поведение контента на плоскости экрана — он заполняет собой пространство, как вода, от угла до угла. Для верстки используется десятиколоночник с 5 базовыми модулями
Различные лейауты, собранные по принципам фирменного стиля Surf:
Обвес
Базовым элементом характерной верстки является «обвес» экрана — рамка (обычно) из четырех элементов, которые расположены в углах плоскости. «Обвес» создает эффект заполнения и может верстаться согласно требованиям текущего макета, нету одного правильного способа сверстать «обвес», это набор принципов, а не четкие рекомендации по тому, в какой угол помещать логотип.
Угловые блоки
Как вода равномерно растекается по плоскости, так следует стремиться к гармоничной верстке угловых блоков, чтобы они уравновешивали друг друга по визуальному весу, либо чтобы выделялся один ведущий блок, и вся вода утекала в него, а остальные бы выполняли поддерживающую, формообразующую функцию
Отступы угловых блоков всегда одинаковые со всех сторон, кегль шрифта одинаковый, либо образующий блоки одинаковой насыщенности, кроме случаев когда выделяется ведущий угловой блок.

Ведущий угловой блок характерен кеглем набора более, чем в 2 раза превосходящим кегль остальных угловых блоков. Как правило, в ведущем угловом блоке используется гарнитура Evolventa.
Композиция
По центру акцент переходит на фон, либо на типографическую композицию. Таким образом в центре предусмотрено место для контента или декоративных элементов, а вокруг помещается рамка «обвеса»

Всегда следует учитывать, чтобы количество информации в рамке было пропорционально противоположно количеству контента внутри рамки. Если внутри рамки отсутствует контент, то акцент может перемещаться в один из углов обвеса.
Дизайн печатных материалов
Фирменный стиль остается консистентным независимо от носителя: экранная графика и печатные материалы создаются и верстаются по единым базовым принципам (см. главу Верстка).
При работе с печатной продукцией стоит учитывать ограничения CMYK-палитры и метода печати. В связи с этим рекомендуется не использовать фоновые изображения, а отдавать предпочтение типографическим композициям, работе с цветом и обвесом.
Верстка на вебе
В отличии от статичных промо-постеров или обложек, в интерфейсах рабочая область постоянно скролится и изменяется, поэтому «обвес» становится плавающим вместе с плоскостью окна, а контент динамически изменяется внутри рамок «обвеса». Прямо как на этой странице.
Обложки для соцсетей
HR-посты. Основная тематика — люди, поэтому используются обложки с фотографиями людей подходящего возраста и характера.

Анонсы конференций или слетов. Общение и расширение связей, тоже используем образы людей. Отличие от HR в том, что показываем людей в компании.

Публикации. Темы публикаций могут не иметь репрезентации в реальном мире, поэтому обложки делаем более минималистичными, используем абстрактные простые формы и характерные цвета.

Релиз нового продукта. В релизных обложках мы хотим использовать красиво анимированные интерфейсы продуктов на мобильных устройствах.
Каждая обложка предполагает наличие обвеса, фоновой картинки и типографической композиции. В некоторых случаях, можно не использовать типографическую композицию, чтобы перенести основной акцент на фоновую картинку или не использовать фоновую картинку. В некоторых случаях вообще остается один обвес (см. визитные карточки).
Анимация
Сквозь весь стиль бренда идет идея алгоритмичности, волнообразности, плавности, потока, принципа перетекания. Те же идеи влияют на анимацию и применение интерактивных элементов (поведение элемента, завязанное на скролл и т.п.)
Исходники
Логотип студии
Шрифтовые композиции
Обложки для соцсетей