Сайт «Сотби»

Задача.
Сделать сайт для необычной юридической компании.

Зачастую хитрые ребята, увязнув в долгах, решают совершить ряд относительно легитимных мероприятий для того, чтобы выйти сухими из воды. В итоге получается, что активов у таких «должников» — кот наплакал и погасить многомиллиардные (реже многомиллионные) долги им вроде как нечем.

Их кредиторы этим сильно недовольны. Тогда они обращаются к «Сотби». А тут знают все хитрости и нюансы работы в этом правовом поле и вообще съели на этой теме не одну собаку. Решив, что пора привести форму в соответствие с содержанием, компания пришла за сайтом в студию.

Приступаем к первой концепции

Дизайнер

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

После подробного обсуждения проекта на встрече сотрудники «Сотби» предстают на страницах в образах настоящих супергероев. Они скрывают свои лица, но всегда готовы прийти на помощь. Характер каждого сотрудника должен быть понятен даже в маске. Начинается примерка.


Персонажи появляются рядом неожиданно — совсем как в жизни
Услуги компании описываются предельно коротко и ясно
Рабочий процесс представляется как циклическое движение от обращения клиента до вынесения решения суда
Лучше сотрудников о компании не расскажет никто
Самым значимым клиентам на сайте отведен особый раздел
Заказчик

«Ребята, это все очень круто. Но мы тут не похожи на себя ¯\_(ツ)_/¯»

Уходим на второй круг.



Придумываем вторую концепцию

«Сотби» глазами клиентов
«Сотби» глазами сотрудников
Дизайнер

У сайта появляется вторая сторона — «темная». По умолчанию она скрыта и показывается только при нажатии на специальную кнопку. В «темной» версии присутствуют все те же разделы, что и в «официальной», только описания в них сделаны от лица сотрудников. А эти люди часто смотрят на свою работу очень специфически, с нетривиальным юмором и упоминанием внутренних ценностей.

Редактор

В связи со сменой дизайна нужно написать максимально серьезные тексты для «белой» стороны и отвязные — для «черной». Важно, чтобы они говорили про то же самое, но совсем другими словами. Для знакомства с образцами жанров полезно изучить корпоративную газету заказчика «Надысь».

Дизайнер

Заказчику очень нравится его слоган «В долгах как в шелках», поэтому по всему заднему фону вполне закономерно расстилается красивая материя. Полотна призывно колышутся, вызывая объяснимое любопытство: что же там за ними. Движение ткани замоделено в 3D и сохранено как видео.

Технолог

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

Логотип при этом превращается в хитрый «бургер».

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



Беремся за услуги

Дизайнер

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

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

Технолог

Первая версия анимации сделана с использованием ЦСС. Так при появлении новых комментариев и правок от дизайнера проще менять настройки прямо на лету.



Иллюстратор

Отрисовка картинок начинается с простых метафор. Круг диаграммы отлично превращается в купол, а выносные линии великолепно выглядят в качестве стропов.

Вместо завода, не понравившегося заказчику, в воздух в итоге поднимаются ценные документы.



Юрист-супергерой по сценарию на «темной» стороне превращается в Халка. В первой версии Халк просто переодевался в костюм и терял бицепсы, получая лишь модный портфель.

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

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

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

Технолог

Анимация всех метафор потребовала более серьезных средств, чем обычный ЦСС, — этот вариант в данном случае вообще не годится. В итоге решено использовать библиотеку svg.js, но для ее нормальной работы предварительно исправлена куча багов.



Делаем раздел «Клиенты»

Дизайнер

В «белом» клиентском разделе размещаются реальные отзывы — их заказчик предоставил. А вот для «черной» части нужно что-то повеселее. Пусть это будут сообщения от представителей несуществующих компаний.

 

Редактор

Надо придумать, кто эти люди, как их зовут и зачем они пользовались услугами «Сотби». Персонажи должны вызывать хоть какие-то эмоции, поэтому хорошо бы начать с всем знакомых персон.

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

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

Переходим к принципам компании

Дизайнер

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

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

Редактор

Смертельный номер, очень напоминающий старую шутку про четыре кубика с буквами Ж, П, А и О, из которых нужно сложить слово «счастье». Что, если так?

Технолог

Скрытый текст на страницах дублируется и размещается поверх оригинального. Изначально он сделан прозрачнее. А группы слов из верхнего слоя, которые должны осыпаться, обернуты в отдельный тег </span>.




Проверяем знания географии

Дизайнер

На «светлой» стороне показываются города, где «Сотби» уже успешно реализовала свои проекты. Это понятно, но чем оживить «темную» сторону?

Редактор

В России набирается масса населенных пунктов с необычными названиями. Именно там и должны размещаться вымышленные представительства компании.

В каждом из полусотни отобранных городов, поселков городского типа, округов и поселений вполне реально воплотить проект, похожий на уже выполненные. Но поскольку речь идет о «темной» стороне, для отдельно взятого места придумана своя захватывающая история. Понятно же, что недружественное поглощение пасечного хозяйства монопольным медопроизводителем могло произойти только в Добрых Пчелах, и больше нигде.

Карьера

Иллюстратор

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

Заказчик

( ╯°□°)╯

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

При смене версий с «белой» на «черную» на странице наступает конец рабочего дня, и все выглядит уже несколько по-другому.

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

Сейчас перекурим
и покажем вам печатную презентацию