chipsa design studio
sites / interfaces / branding / cgi
Поделиться публикацией в соцсетях
назад ко всем публикациям

Статья

Не создаём, а разрушаем: как мы разрабатывали дизайн сайта без ключевого визуала и снова сделали «не как у всех»

Anastasia Dianova
Не создаём, а разрушаем: как мы разрабатывали дизайн сайта без ключевого визуала и снова сделали «не как у всех»
О Статье
3ddesignwebgl
Совсем недавно мы делились, почему решили радикально поменять концепцию своего корпоративного ресурса и заложить в него новую идею. Сегодня расскажем, как мы воплощали креативный сайт студии дизайна — от замысла до финальной реализации, а также почему мы уделили так много внимания 3D-контенту.

Дизайн-концепция как часть позиционирования

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

Наша главная идея — создать сайт-портфолио, который наглядно демонстрирует и творческую, и технологическую стороны нашей студии. Он должен был отражать накопленный за годы опыт и при этом притягивать к нам новых клиентов. А чтобы выделиться, мы поставили себе задачу: «сделать сайт не как у всех».

От простого к сложному — и обратно

Мы решили, что сайт будет «простым» — без избыточных макетов, перегруженной анимации и эффектов. В приоритете должен был стоять 3D-контент: в идеале, чтобы на главной странице он занимал процентов 90. Помимо этого, мы нагенерировали кучу идей: необычную навигацию по странице, динамические рендеры наград (где материалы меняются при обновлении), чат-бот для клиентов, публикации в формате «собственной соцсети», переключатель кейсов и многое другое. Однако реализовать все задумки не успели.

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

3D, 3D и ещё больше 3D

Мы уже упоминали, что согласовать концепцию и дизайн было нелегко, ведь в нашей студии трудятся творческие люди со своим видением. После долгих обсуждений по всем канонам «Искусства переговоров» всё же вернулись к исходной мысли — простому сайту с доминированием 3D.

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

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

Творческие муки

Как водится, не обошлось без проблем. Можно выделить три основных момента.

Первый момент. Мы решили поэкспериментировать и поручить анимации разработчикам, хотя обычно делаем их самостоятельно. Идея была упростить и ускорить процесс, чтобы в дальнейшем тиражировать подобный опыт на проекты клиентов. Однако всё оказалось куда сложнее: без готового моушена на руках объяснить, где и что нужно анимировать, оказалось непросто.

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

Третий момент. Это один из наших первых проектов, где задействовано столь большое количество 3D-графики. Согласовывать всё с CG-художником было непросто: параллельно шла работа над множеством задач, и мы постоянно переключались. В итоге мы создали систему с прописанными материалами, цветами и правилами использования эффектов. Тогда работа пошла гораздо продуктивнее.

Итоги

Хотя мы в итоге не реализовали и половины из задуманного, результатом остались довольны на все сто. Крупная типографика, лаконичная палитра (часто монохромная) с яркими акцентами, тщательно проработанные детали и ясная сетка — всё это даёт чувство лёгкости и минимализма. Контент оказался настолько завораживающим, что нас самих не отпускает. Благодаря этому сайт занял первое место в конкурсах «Золотой сайт» и «Рейтинг Рунета» в номинации «Лучший сайт агентства». На зарубежные премии мы пока не подавались, но рассчитываем и там получить высокие результаты.

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

Следующая публикация
Не создаём, а разрушаем: как мы переделали собственный сайт и заложили в него новые смыслы
Alex Trepachev
10
Привет, поговорим?