Не создаём, а разрушаем: как мы работали над дизайном сайта без ключевого визуала и снова сделали «не как у всех»
Привет, это Chipsa! Мы уже рассказывали о том, почему решили изменить концепцию своего сайта, заложив в неё новые смыслы. Теперь хотим поговорить о дизайне – как мы пришли к тому, к чему пришли, и для чего нам столько 3D.
Дизайн-концепция как позиционирование
По-хорошему, в первую очередь нужно было рассказать именно о дизайне, потому что работа над новым сайтом шла не так, как у всех. Если многие отталкиваются от позиционирования при создании визуала, то у нас вышло наоборот – конечные смыслы пришли тогда, когда сформировался общий вид сайта. Хотя они настолько плотно переплетены между собой, что тут возникает ситуация, аналогичная вопросу о том, что же появилось раньше – курица или яйцо.
Нам хотелось сделать сайт студии, который помог бы показать наши навыки и раскрыть себя со стороны дизайна и технологий. Он должен был наглядно отражать весь тот опыт, который мы накопили за годы практики, и эффективно продемонстрировать возможности студии, чтобы привлечь новых потенциальных клиентов. А для этого надо выделиться и «сделать сайт не как у всех».
От простого к сложному – и наоборот
Пришли к тому, что нам нужен «простой» сайт – без огромного количества сложных компоновок, эффектов, анимаций и подобного. Хотели сделать акцент именно на 3D-контенте – например, планировали, что главная страница будет состоять на 90% именно из него. Также напридумывали кучу интересных фишек, из которых реализовали далеко не все – навигацию по странице, рендеры наград, материалы которых меняются каждый раз при обновлении, чат-бот для клиентов, публикации в виде собственной соцсети, переключатель кейсов и много всего ещё.
Здесь снова руководствовались принципом «не как у всех». Вместо того, чтобы сразу оттолкнуться от ключевого визуала, мы сгенерировали огромное количество элементов, которые складывались в единую экосистему. Её центром должна была стать наша чипсинка: хотелось, чтобы она постоянно трансформировалась при наведении курсора мыши и меняла структуру. Из каменной становилось бумажной, потом – пластиковой, стеклянной, металлической и так далее. Это бы не только произвело вау-эффект, но и подчеркнуло бы гибкость в работе. В итоге от идеи временно отказались, так как банально не хватило времени, но не теряем надежду реализовать её в будущем.
3D, 3D и ещё раз 3D
Уже говорили про сложность согласования концепции и дизайна, но на всякий случай напомним – из-за того, что в студии работает много творческих людей с уникальным опытом, у каждого есть своё видение. Путём долгих прений по канонам книги Киссинджера «Искусство переговоров» пришли к тому, с чего и начали. Простой сайт с большим количеством 3D.
Для чипсинки выбрали самый говорящий – каменный – материал, ведь он как нельзя лучше ложился в концепцию того, что, чтобы создать новое, необходимо разрушить старое. Рушащийся камень всегда выглядит величественно и даже немного эпично – это что-то серьёзное, внушающее благоговейный трепет, говорящее о серьёзности происходящих процессов.
Также добавили бесшовные переходы, много плавности и ненавязчивых анимаций – так, что при скролле блоки сайта гармонично и естественно перетекают друг в друга. Большая часть главной осталась за визуалом, это акцентирует внимание пользователя на симбиозе эстетики и технологичности. Оставили всё самое важное и нужное, потому что, кажется, в ином случае работа над сайтом могла бы длиться вечно.
Муки творчества
Традиционно не обошлось без сложностей. Пожалуй, можно выделить три основных момента.
Момент первый – работа с анимацией
При создании сайта студии решили поэкспериментировать и отдать разработчикам анимации – обычно с ними работает дизайнер, но захотели испытать новый подход. В теории это должно было облегчить и ускорить процесс, чтобы в будущем мы могли интегрировать такой опыт в работу с клиентами. Но он оказался непредсказуемым – без моушена на руках сложно объяснить, где и какую анимацию хочется видеть.
Момент второй – избыток экспертных мнений
И снова – этап согласования. У каждого в студии имелись свои пожелания и цели, которые они преследовали, любое решение кому-то нравилось, кому-то – нет, а мнения часто разделялись. Из-за этого было тяжело сосредоточиться на самом важном: творческом процессе.
Момент третий – работа с 3D
Это один из первых сайтов, где мы создавали такое большое количество 3D-контента, поэтому было непросто синхронизироваться с CG‑художником. Нас штормило от одной задачи к другой – и над всеми шла одновременная работа. В итоге придумали собственную систему, куда вошли конкретные материалы и цвета, а ещё прописали правила, где и какие эффекты можно применять. Тогда дело, наконец, сдвинулось с мёртвой точки.
Что в итоге
Пусть мы не реализовали и половину из того, что придумали, но остались довольны проделанной работой на сто процентов. Крупная типографика, ограниченное количество цветов, чаще всего уходящее в монохром с яркими акцентами, проработанные детали и понятная сетка. Всё это создаёт ощущение минималистичности и воздушности, а контент получился залипательным даже для нас самих. Благодаря этому сайт получил первое место на премиях «Золотой сайт» и «Рейтинг Рунета» в категории «Лучший сайт агентства». На иностранные конкурсы ещё не подавались, но там тоже ждём крутых результатов.
В следующем тексте мы подробнее поговорим о технических моментах и о том, как шла разработка сайта, а пока – подписывайтесь на телеграм-канал, где мы делимся интересными кейсами, создаём любопытные подборки на тему креатива и рассказываем о внутренней кухне студии.