СберУниверситет — лонгрид про чтение

Перед конференцией «Больше чем обучение» требовалось презентовать результаты масштабного исследования культуры чтения. Из-за сжатых сроков и ограничений на разработку сайт было решено сделать на Tilda.

Задачи:

- Построить структуру повествования лонгрида

- Сохранить визуальный стиль конференции

- Сделать адаптивную верстку

- Реализовать нестандартные интерактивные элементы

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

Структура и подача материала

Структуру и содержание лонгрида нам предоставил заказчик в виде презентации в формате презентации в Powerpoint. В течение всего проекта в контент вносились корректировки, даже когда сайт уже был готов к запуску.

Концепция и визуальный стиль

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

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

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

Мы решили делать лонгрид от сложного к простому — вначале уделили внимание наиболее технически сложным блокам. Далее опишем каждый блок в отдельности.

«Книга среди других источников знаний и видов досуга»

Этот блок реализован в zero-блоке с подключением сторонней CSS-анимации. Всплывающие окна также сделаны в zero-блоках.

«Что мешает читать больше»

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

Загвоздка была лишь в том, что такой приём средствами одной лишь Тильды реализовать невозможно. Можно было сделать что-то подобное в zero-блоке на SBS-анимации, но тогда бы это были разные карточки, просто одна бы пропадала, а другая появлялась на её месте при взаимодействии. Нам хотелось достичь бесшовной анимации.

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

И тут на помощь пришёл HTML-блок, в котором мы с нуля сверстали данный блок на flexbox и реализовали CSS-анимацию с переворотом. В дальнейшем было много корректировок текста, которые вносились моментально прямо в вёрстке, и ничего никуда не ехало ни на одном разрешении экрана. Zero-блок так не умеет.

«Популярные авторы и их произведения»

Данный блок реализован средствами Тильды через zero-блок. К каждой фамилии привязано своё модальное окно с перечнем произведений. Немного доработали внешний вид при помощи CSS.

«Персональные рекомендации» с рандомайзером

Первоначальный вид блока с горизонтальным слайдером сделан на zero-блоке.

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

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

Остальные блоки

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

Блоки, которые требовали более индивидуального подхода, были сделаны в zero-блоках.

Но некоторые контентные блоки были сделаны на штатных блоках Тильды с кастомизацией через CSS. Мы выбрали их, чтобы сэкономить время на адаптации этих блоков под разные устройства, т.к. штатные блоки Тильды адаптируются по умолчанию в отличии от zero-блоков.

Ниже показаны блоки, реализованные через штатные инструменты Тильды и CSS-код:

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

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