VERTEX STUDIO: как из пустой студии перезапустил игровую студию с особенным характером

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

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

Фундамент проекта

Изучение VERTEX STUDIO началось со сбором информации и в погружения в контекст. Я смотрел не только на то, что делает студия, но и как она себя подаёт.

Изучал конкретно:

• Визуальному стилю компании

• Точного позиционирования

• Тону общения с клиентами

• Презентации продукта или услуги у конкурентов

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

Создания гибкой айдентики

После сбора информации и визуального анализа я перешёл к более глубокому изучению бренда и его логики. На этом этапе задача была выявить ключевые особенности компании — те элементы, которые позволяют сформировать уникальную визуальную систему и задать нужную атмосферу при взаимодействии с сайтом.

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

Формирование логотипа

Работа над логотипом VERTEX STUDIO началась не с формы, а с понимания идеи и характера бренда. Поиск идеи началось с набором количество смыслов чтобы собрать полноценный характер

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

Ключевыми ассоциациями стали:

• пиксели — как основа цифровой и игровой среды

• код — символ технологии, структуры и системности

• творчество — как пространство для экспериментов и идей

• игровое безумие — отражение динамики, эмоций и характера студии

Эти смыслы стали отправной точкой для поиска идеи логотипа. Моя задача была объединить их в единый визуальный образ, который будет одновременно технологичным, живым и запоминающимся. Угловатые и резкий шрифты показывает свою дерзость и отличие, и отдельная плашка отображает то игровой пиксель который проникает в айдентику и отлично сходится с лого. Обычно конкуренты используют примитивные символы типа: консоль, персонаж и тд, хотя позиционирования веселья и творчество.

Эти смыслы стали отправной точкой для поиска идеи логотипа. Моя задача была объединить их в единый визуальный образ — технологичный, живой и запоминающийся, без ухода в очевидные решения.

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

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

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

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

Начало проектирования сайта компании

После формирования айдентики я перешёл к проектированию сайта компании. На этом этапе важно было не просто перенести визуальный стиль в интерфейс, а ещё адаптировать сайт под все устройства не потеряв удобство и логику.

Перед началом работы была проведена аналитика конкурентов. Я изучил их сайты с точки зрения структуры, навигации и подачи контента, чтобы понять, какие решения работают, а какие, наоборот, мешают восприятию и взаимодействию.

Полученные выводы помогли выстроить логику сайта и построить выводы, которые можно превратить в киллер-фичу.

Проектирования логики

Когда была собрана база по рынку, проведён анализ конкурентов и изучен контекст game-индустрии, я перешёл к проектированию логики сайта. На этом этапе я работал повествовательно — выстраивал структуру и смысл блоков, а не сразу уходил в wireframes.

Для меня было важно сначала понять, что именно сайт должен рассказывать пользователю и в каком порядке, а уже потом думать о визуальной форме. Если сразу приступать к дизайн-прототипам, логика начинает «плыть»: структура меняется, фокус смещается, и дизайнер легко уходит от основной цели проекта.

Референсы - поиск вдохновения и повествования

Референсы — один из самых любимых этапов у дизайнеров. Кажется, что именно здесь начинается творчество и поиск вдохновения. На деле — здесь чаще всего дизайнер и теряется.

Поиск референсов легко затягивает. Люди начинают просто смотреть красивые работы и перестают понимать, зачем они вообще это делают.

Как я подхожу к референсам

К референсам я приступаю только после аналитики и выстроенного повествования сайта. Ищу не «красиво», а рабочие визуальные решения:

• композицию

• сетки

• визуальную иерархию

• логику подачи контента

Что именно я смотрел

Я намеренно искал работы из разных сфер:

• game-студии

• студии программистов

• digital-агентства

• дизайн-студии

• аниме-дизайн студии

Такой разброс помогает выйти за пределы шаблонов и нащупать стиль, который действительно может стать особенностью проекта.

Дополнительно изучал коммерческие проекты на Dprofile — важно было видеть, как сильные студии решают реальные задачи, а не просто делают «красивые экраны».

Весь поиск сильных работ занял около 5–6 дней. За это время сформировался чёткий ориентир, куда двигаться дальше.

Референсы в этом проекте — не про вдохновение. Это был рабочий этап, который помог не потерять фокус и не уйти в хаос.

Создания визуальной концепции главной страницы

Создания проектирования главной страницы начали после составления сильных референсов, сделал первые наброски Wireframe. Наброски и интегрировал с текстом, чтобы было проще ориентироваться как стоит текстовый контент, но не работа с композицией

После первых набросков я перешёл к детализации. Начал «чистить» экраны и собирать композицию блоков, опираясь на выбранные референсы.

На этом этапе я сознательно не добавлял цвет и изображения. Работал только с формами, отступами и типографикой. Это помогает не замыливать глаз и держать темп, не уходя в декоративные решения раньше времени

Во время процесса работы, я действовал по нескольким аспектам.

• Динамичной композиции для демонстрации бренда

• Баланс блоков

• Логику взаимодействия

• Эмоции от посещения

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

После работы с композицией наступил момент финализации главной страницы. На этапе работал в цвете, сформированном в айдентике, ярко-зеленый и фиолетовый для акцента. Добавления фотоконтента. В процессе дорабатываю и завершаем полностью визуальную концепцию главной страницы.

Отрисовки внутренних страниц

После финализации главной страницы я перешёл к внутренним страницам сайта. Здесь работа велась по концепции главной, чтобы не потерять ритм и продолжать цеплять взгляд. Каждая страница должна была работать как часть общей системы.

Также после отрисовки всех страниц, готовим все макеты как на латинице и на кириллице, чтобы в последующем закрепить навык и уже на коммерческих проектах возможно было готовить не только на латинице, но и на других языках

Адаптивы и подготовка макетов

Когда все макеты были отрисованы и подготовлены, я перешёл к созданию адаптивных версий и сборке UI-kit. На этом этапе важно было привести все элементы в систему: зафиксировать сетки, отступы, типографику и компоненты, чтобы интерфейс работал стабильно на всех разрешениях.

Адаптивы проектировались с сохранением логики и ритма основного дизайна, без потери смыслов и визуального характера проекта.

UI-kit собираем все компоненты и auto-layout для последующей работы.

Итог работы:

За счёт системной работы — анализа рынка, поиска идей, проработки айдентики и UX | UI дизайна — удалось создать необычный учебный проект, который выделяется на фоне конкурентов и чётко отражает свой характер.

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

Посмотреть креативный кейс проект, который был сделан в UPROCK, можно глянуть по ссылке:

BEHANCE (Eng)

DPROFILE (Ru)

Огромное спасибо хотел Евгению Кузьмину за крутой проект и замечательных кураторов, которые сильно помогали на всех этапах)))

Была полезная статья?

Было приятно поделиться своим опытом, если кому-то полезная статья и вам пригодилась эта информация, поставьте реакцию под этим постом. Также буду очень рад, если посетите и подпишитесь на мой Telegram-канал - в этом канале я делюсь своим опытом работы на фрилансе, своими кейсами проектов вместе с UPROCK, полезные материалы и частичкой из жизни.

TELEGRAM 

Instagram

Vs.ru