Сибирикс 2017: как мы делали новый сайт
Если вы здесь не впервые, то, наверное, заметили, что нас недавно редизайном переехало. И вот как это произошло.
3 октября 2016 года. Сибирь, мороз, уныние. Ничего не предвещало. И тут руководитель студии Владимир, который уже месяца три как бы невзначай говорил: «Хочу новый сайт Сибирикса», и при этом хитро косился на руководителя проектов Ирину, создал группу в скайпе. Называлась она «Сибирикс 2017». С этого дня официально началась работа над нашим новым сайтом.
А до этого неофициально Владимир и QA-менеджер Дарья успели нарисовать прототип.
А до этого неофициально Владимир и QA-менеджер Дарья успели нарисовать прототип.
Для меня это было внезапно. Просто в один день появилась задача сделать прототип. В ней был файл с референсами, которые нравятся Вове, и вот такая постановка: «Страницу со списком кейсов делаем по аналогии со спайковсим вариантом. НО! Нужно придумать, как сделать там навигацию по списку. При этом фильтры по отраслям я принципиально не хочу». Всё.
Дарья
QA-менеджер
Прототип и файлик с референсами и хотелками — вот, в общем-то, и всё, с чего начался проект. Но виденье было чётким: нам нужно смачное видео на главной, удобный ланчпад, тёплый и ламповый сайт. А ТЗ ? Не, не слышали.
Никакого ТЗ — это был просто скрам головного мозга. Какие-то идеи я вносила в файлик — описывала, что должно быть на странице. Периодически что-то по ходу менялось. Просто потому что в середине дня появилась идея, как сделать лучше. В этом сложность внутренних проектов: клиентов ограничить легко, себя — уже сложнее. Поэтому и процент хаоса больше.
Ирина
Руководитель проекта
Дизайн
На брейншторме Владимир, Ирина и арт-директор Евгений посмотрели стопицот примеров, прототип, накидали на доске, как будет главная страница. Договорились, что там будет фоновое видео. Но это — только полдела. Придумать его и снять его оказалось сложнее.
Видео решили соотнести с этапами разработки: с агрегацией, интеграцией, дизайном и другими. Написали сценарий, прописали роли. Вот так должна была выглядеть сцена, в которой придумывают креатив.
Видео решили соотнести с этапами разработки: с агрегацией, интеграцией, дизайном и другими. Написали сценарий, прописали роли. Вот так должна была выглядеть сцена, в которой придумывают креатив.
Переход из среднего плана в общий, в режиме слоумоушен, в кадре дизайнеры, программисты, аналитик, у всех удивлённые лица, открыты от удивления рты, кто-то что-то выронил из рук, оно медленно падает вниз.
Средний план, камера с другой стороны, в кадре менеджер, на доске написано много текста, картинки, таблицы, стикеры, менеджер что-то говорит, усиленно жестикулируя.
Средний план, камера с другой стороны, в кадре менеджер, на доске написано много текста, картинки, таблицы, стикеры, менеджер что-то говорит, усиленно жестикулируя.
Ну вы сами видите — получалось что-то среднее между сценкам КВН и роликами студии «Сокол». Поэтому в видео решили добавить больше жизни. Так что когда увидите на пункте про вёрстку ребят, которые рубятся в плейстейшн — знайте, мы делаем это только в перерывах, а не во время. Честно-честно.
До это видео мы снимали редко и для только себя. Был соблазн позвать какого-нибудь крутого чувака, который придет и сделает как надо, что-то пофотает, поснимает, вжух — и выдаст шедевр. В котором никто не толстый, картинка глянцева, а сотрудничество — плодотворно. Но, с другой стороны, свой, внутренний проект — возможность научиться чему-то новому. Например, делать видео с нуля.
Ирина
Руководитель проекта
Мы знатно прокачались в съемке пролётов. Оказалось, что пряморукого оператора для этого недостаточно — нужно оборудование: рельсы (70 000 рублей) и слайд, который катает по ним камеру (13 000 рублей). Жаба сомкнула склизкие лапы на горле. Но мы узнали (слава интернетам и инженерской смекалочке!), что если собрать аналог конструкции ручками — получится в 40 раз дешевле.
Ну мы схему набросали, съездили в Леруа, купили на 2000 рублей всяких штук: уголок, мебельные колёса, деревяшки. И при помощи какой-то матери и тестирования собрали эти чертовы рельсы. Деревяшки даже покрасили. А штыри с колёсиков спилили на автосервисе возле офиса за 50 рублей. Конструкция — ваще огонь!
Евгений
Арт-директор
Видео в итоге отсняли. Оно своё, живое, и на нём реально мы. Довольные стали искать подходящий фильтр. Перебрали такие варианты:
Выбрали последний — самый тёплый и ламповый. И ещё боке досыпали, чтобы подинамичнее было.
Контент
Контент — важный кусок нашего сайта. Хоть иногда и хочется отскрести его тринадцатилетние наросты и сделать сайт-портфолио в 3 странички, но нельзя — текстовые разделы привлекают трафик. Так что мы не стали их выкидывать. Даже переписали и дописали чуток. Всего-то 25 страниц получилось, пфф. По сравнению с объемами блога — ничтожно мало.
Блог после импорта пришлось глобально вычесать — на это ушло десять целых рабочих дней двух-трёх человек в разные периоды времени. Оказалось, что раньше, еще до того, как мы начали использовать Тильду, он жил беспорядочной жизнью: вперемешку были теги, тексты, кони. И чьи-то ручки должны были это поправить.
Блог после импорта пришлось глобально вычесать — на это ушло десять целых рабочих дней двух-трёх человек в разные периоды времени. Оказалось, что раньше, еще до того, как мы начали использовать Тильду, он жил беспорядочной жизнью: вперемешку были теги, тексты, кони. И чьи-то ручки должны были это поправить.
На второй неделе испытательного срока мне достался архив блога с 2010 года, где более 600 статей. Нужно было вручную шлифовать старый (но всё ещё актуальный!) контент, менять концепции оформления и повторно шлифовать. Временами было ощущение, что блог стал чем-то вроде чистки картошки в армии для «духа».
Пока я редактировал фотоотчеты с праздничных выездов на шашлыки и пейнтболы, лица сотрудников стали узнаваемыми и практически родными.
Пока я редактировал фотоотчеты с праздничных выездов на шашлыки и пейнтболы, лица сотрудников стали узнаваемыми и практически родными.
Юрий
QA-специалист
Разработка
Разработка сайта по этапам — для слабаков. Мы делали всё и сразу — в столько потоков, сколько менеджер успевал контролировать. Одновременно шли работа над контентом, спринт и рисовался дизайн.
Интересно получилось с адаптивом: пока арт-директор делал внутренние странички для десктопа, я делала по ним адаптив. Макеты были еще не утверждены, поэтому пришлось вносить дополнительно правки в адаптив после утверждения десктопной версии. И даже несмотря на это мы быстро управились.
Любовь
Дизайнер
Наш няшный сайт разработчики слепили за 3 спринта. И знатно прокачались за это время — вот пусть они сами и расскажут, в чём и как дело было.
Есть такая шутка, что большую часть времени разработчик тратит не на то, чтобы написать код, а на то, чтобы заставить его работать :) В каждой шутке есть доля правды: на новом сайте львиная доля усилий ушла на оптимизацию. Я всегда тщательно отношусь к аккуратности кода и его быстродействию, но Сибирикс стал просто рекордсменом в этом плане! Например, для того, чтобы не грузить устройство пользователя и не жрать драгоценный трафик, видео из ланчпада начинает грузиться только в тот момент, когда вы кликаете по «гамбургеру».
Ну и конечно же не обошлось без математики, которую я так люблю :) На главной странице, на страницах «История» и «Философия» есть линия, которая чутко реагирует на движение курсора. Мы долго пытались достичь нужного эффекта, перебрали кучу вариантов. В итоге остановились на формуле затухающей синусоиды.
Ну и конечно же не обошлось без математики, которую я так люблю :) На главной странице, на страницах «История» и «Философия» есть линия, которая чутко реагирует на движение курсора. Мы долго пытались достичь нужного эффекта, перебрали кучу вариантов. В итоге остановились на формуле затухающей синусоиды.
Дарья
Разработчик
Формулу подбирали коллективно: Дарья, Владимир и техдир студии Иван. Сначала линия брыкалась и топорщилась, не могла в плавность. Но силой математики её всё-таки усмирили. Так что держите контраргумент для тех, кто не верит, что этот предмет пригодится за стенами школы (учителя алгебры, не благодарите).
Кроме линии, было ещё много борьбы и новых фич: анимированные иконки, новый способ легко и быстро впихивать Тильду в Битрикс, видосики в ланчпаде. Сайт получился навороченный, при это нам не хотелось, чтобы он тормозил. Тут на помощь пришли новые технологии.
Помимо того, что я сам сделал весь новый сайт Сибирикса (почти), я еще и занимаюсь версией сайта для Google AMP. Не считая того, что это новая, а значит, невероятно хайповая и модная технология, она позволяет невероятно быстро загружать сайт на ваших мобильных телефонах с медленным интернетом. Функционал, конечно, будет немного ограничен, но, будьте уверены, форма заказа сработает на ура.
Андрей
Разработчик
Есть подозрение, что Андрею не нравится Google AMP. Но кто его спрашивает? :) Зато на мобилках скоро всё будет летать. А для ускорения десктопных версий мы поставили модуль Google Page Speed. Прямо в день релиза. Ведь что могло пойти не так?..
Релиз
Перед деплоем Вова говорит: «А давайте Google Page Speed модуль воткнем». Ну воткнули, настроили, проверили на поддомене new — вроде как работает. Page speed рейтинг сайта улучшился, картинки стали пережиматься хорошо. Я переключил на наш домен, ушёл проводить собеседование. А позже выяснилось, что этот модуль почему-то все наши красивые SVG-иконки перестал показывать. Вдобавок еще и блог отвалился.
Иван
Технический директор
Ситуация: сайт запущен, иконки потерялись, блог недоступен. Руководитель проекта на диалоге с клиентом, Иван — собеседует соискателя, править косяки некому, ПАНИКА! Это был час дикого бардака, как будто у нас в офисе одновременно тонул Титаник и бушевал лондонский пожар. Но за час Иван, грубо выдернутый с собеседования, всё разрулил.
Выдохнули. И пошли хвастаться.
О своём сайте можно говорить бесконечно, но, кажется, уже пора закругляться. Мы не успели написать про смачные лендинги для продуктов, фотографии команды, новое портфолио, анимированные иконки и кучу клёвых штук. Но вы и так знаете, где их искать. Вот прямо здесь :)
Выдохнули. И пошли хвастаться.
О своём сайте можно говорить бесконечно, но, кажется, уже пора закругляться. Мы не успели написать про смачные лендинги для продуктов, фотографии команды, новое портфолио, анимированные иконки и кучу клёвых штук. Но вы и так знаете, где их искать. Вот прямо здесь :)
~
PS У нас уже появился первый клон! Ну, как клон — скорее, наскоро сшитое чудовище Франкенштейна (и то уже снесли, но интернет всё помнит).