Разработка площадки для проведения онлайн-форума банка ВТБ по "Зеленой повестке"

1. Вводная задача от заказчика, проблематика, цели

Разработать полностью функциональную и удобную для пользователей страницу для проведения онлайн-форума по “Зеленой повестке”, который состоялся 25 мая 2021.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Первым этапом стало прототипирование страницы. Заказчику была представлена презентация с предполагаемой структурой лендинга и схемой расположения его элементов. После согласования окончательного варианта мы приступили к разработке дизайн-макета.

Дизайн был выполнен в фирменном стиле ВТБ, а его отличительной особенностью стало большое количество анимированных элементов.

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

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

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

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

• На этапе адаптации анимированные элементы были проработаны таким образом, чтобы страница пролистывалась более плавно, а пользователю стало проще и удобнее воспринимать информацию.
• Помимо адаптации сайта для ПК, планшетов и смартфонов, были созданы адаптивные версии для нестандартных экранов, например, для экранов с разрешением 1024 х 768.
• Наряду с этим страница была адаптирована для Internet Explorer, который также отличается нестандартным разрешением. Особенность этого браузера в том, что он построен на старом движке, и некоторые CSS-стили и скрипты отображаются некорректно. Мы отработали вёрстку, и теперь сайт выглядит в Internet Explorer так же хорошо, как и в более современных браузерах.

3. Результаты сотрудничества

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