- Заказчик
- Технопарк «Сколково» — крупнейший технопарк Восточной Европы. Здесь создаются и тестируются передовые технологии, развиваются стартапы и работает уникальная экосистема из компаний.
- Задача
- Для удобного доступа к информации установили интерактивную панель 1800?1012 мм. Команда Технопарка поручила нам создать для неё полноценный интерфейс.
Сегодня сенсорная панель в Едином центре услуг «Сколково» — это функциональная точка доступа к услугам и информации о Технопарке. В кейсе рассказываем, как без готового ТЗ и в сжатые сроки мы разработали с нуля интерфейс для экрана нестандартного формата и сделали его понятным и комфортным для любого посетителя.
Погружение в проект
Технопарк «Сколково» — крупнейший технопарк Восточной Европы. Здесь создаются и тестируются передовые технологии, развиваются стартапы и работает уникальная экосистема из компаний, экспертов и инфраструктуры. Каждый год Технопарк принимает более 280 000 посетителей.
Весной 2025 года команда «Сколково» готовилась к открытию Единого центра услуг — нового формата многофункционального пространства, где любой гость, резидент или житель Инновационного центра мог бы:
- получить информацию о проектах, сервисах и инфраструктуре;
- записаться на экскурсии;
- подать заявки на услуги;
- узнать о мерах поддержки, акселерации, аренде и защите интеллектуальной собственности.
Единый центр услуг «Сколково»
Чтобы обеспечить самостоятельный и удобный доступ к информации прямо на месте, было решено установить в центре интерактивную вертикальную тачпанель размером 1800×1012 мм.
На этом этапе команда Технопарка обратилась к нам с просьбой разработать для этой панели полноценный пользовательский интерфейс.
У клиента было понимание, что интерфейс должен быть:
- удобным для любых посетителей;
- красиво выглядеть на огромном экране;
- стабильно работать с первого дня открытия центра.
На разработку, верстку и подключение у нас было чуть больше трех недель — запуск интерфейса был приурочен к открытию капсулы 30 мая.
Задача и вызовы
Перед нами стояла задача — разработать с нуля интерфейс для сенсорной панели. Но реальный ее масштаб выходил далеко за рамки «дизайна и верстки».
Вместе с клиентом мы должны были определить, каким должен быть интерфейс: как он будет выглядеть, что именно показывать, как организовать навигацию, как обеспечить простоту и надежность.
Ключевые вызовы:
- Нестандартный формат устройства. Панель большая — 1800?1012 мм, имеет вертикальную ориентацию. Разместить ее планировалось в публичном пространстве. Важно, чтобы использование было удобным — «на ходу», без обучения и подсказок.
- Открытые вопросы по функциональности. Клиент изначально предполагал наличие внешних ссылок, но не все партнерские сайты корректно отображались на панели — нужно было найти альтернативный способ предоставить доступ к внешним сайтам без угроз стабильности интерфейса.
- Тексты и структура разделов формировались уже в процессе. Это означало, что архитектура должна была быть гибкой: мы проектировали интерфейс в условиях, когда многие элементы уточнялись параллельно с разработкой.
- Сжатые сроки. Проект был привязан к дате запуска Центра. На реализацию всех этапов — от согласования концепции до подключения к реальному устройству — у нас было чуть больше трех недель.
Все эти факторы сделали проект сложным, но именно поэтому он потребовал от нас системного подхода и нестандартных решений, о которых расскажем дальше.
Ключевые решения
Мы работали итерационно, небольшими этапами. На каждом из них согласовывали решения с командой «Сколково» и сразу вносили правки. Такой формат позволил контролировать результат на всех стадиях — от проработки логики и структуры до подключения интерфейса к оборудованию.
Совместная проработка структуры и сценариев
Проект мы начали с самого важного — понимания, зачем человек подойдет к панели и что он ожидает увидеть на экране. Вместе с командой «Сколково» мы выделили четыре ключевые задачи, которые интерфейс должен решать без лишних действий:
- навигация по услугам центра,
- доступ к информации о мерах поддержки,
- регистрация на экскурсии,
- обращение за консультацией.
Навигацию делали максимально простой и интуитивной, убрав все, что могло замедлить или запутать взаимодействие.
Отдельной задачей стала работа с форматом устройства: вертикальный экран размером 1800?1012 мм требовал особого подхода к визуализации. Мы использовали опыт разработки полноэкранных слайдерных сайтов, где важно, чтобы разделов каждый экран корректно масштабировался под разные размеры и разрешения. Этот подход позволил адаптировать макеты под панель так, чтобы они занимали всю ее площадь без потери качества и читаемости.
Так мы получили структуру, которая сочетает в себе простоту навигации, быстрый доступ к ключевой информации и визуальную целостность на экране любого масштаба.
А что делать, если клиент хочет, чтобы на сайте было много анимаций, и при этом все выглядело стильно и работало без сбоев? В кейсе «„Живой“ сайт нам по зубам: разработка интернет-магазина для дистрибьютора стоматологических материалов» рассказали, как нашли баланс между «живым» дизайном и удобством, сохранив функциональность интернет-магазина
Интерфейс, понятный с первого взгляда
Проектируя интерфейс, мы учитывали два ключевых фактора: вертикальный формат экрана и особенности поведения людей в офлайн-пространстве. На такой панели пользователь не готов долго разбираться с навигацией — информация должна быть видна и понятна сразу.
Поэтому навигация была построена на крупных, легко различимых блоках, каждый из которых содержал полный и самодостаточный набор данных по разделу. Такой подход позволил посетителю быстро находить нужное, не переходя между множеством экранов.
Мы сознательно отказались от сложных переходов и многоуровневых меню: каждый раздел открывался на отдельном экране, без лишних шагов и скрытых веток. Это сделало работу с панелью одинаково удобной и для человека, который пользуется ей впервые, и для того, кто возвращается за конкретной информацией.
Тестирование на реальном оборудовании
После подготовки первых рабочих макетов мы сразу подключили их к тестовой панели и проверили в условиях, максимально приближенных к эксплуатации. Это позволило оценить интерфейс на реальном оборудовании — вертикальном сенсорном экране в офлайн-пространстве — и увидеть, как с ним взаимодействует пользователь.
Такой формат работы был удобен обеим сторонам: все изменения проверялись и внедрялись непосредственно на панели, что сокращало время на согласование и повышало точность доработок.
Проверка в реальной среде помогала выявлять нюансы, которые неочевидны на этапе проектирования: читаемость текста с расстояния, масштаб элементов, скорость отклика. К моменту запуска интерфейс прошел полноценное тестирование на устройстве, что обеспечило его стабильную работу в день открытия.
Почему появились QR-коды
Одним из сценариев использования панели были переходы на сайты партнеров — например, для получения дополнительной информации. На практике это оказалось проблемой: не каждый сайт корректно отображался на панели, а адаптировать их под нужный формат было бы долго и технически затратно.
Мы нашли более надежное решение — всплывающие QR-коды. Вместо открытия сайта на панели пользователь видит на экране код, сканирует его телефоном и переходит на ресурс напрямую.
Так мы сохранили доступ к дополнительной информации, исключили риск ошибок в работе панели и сделали процесс простым и понятным для любого посетителя.
Итоги
За три недели мы разработали и подключили полноценный интерфейс для сенсорной панели в Едином центре услуг «Сколково» — от первых пользовательских сценариев до запуска на реальном устройстве.
Проект включал:
- проработку логики и структуры интерфейса,
- дизайн всех экранов под вертикальный формат 1800?1012 мм,
- разработку на собственной CMS с использованием React,
- итерационную верстку и тестирование на физическом оборудовании,
- внедрение QR-механики для внешних переходов.
Панель в Едином центре услуг «Сколково»
Технический запуск состоялся точно в срок — 30 мая, в день открытия капсулы. Сегодня панель стабильно работает в публичном пространстве, ежедневно помогая посетителям быстро находить нужную информацию. Интерфейс остается гибким для обновлений и готов к расширению функциональности.
Технопарк «Сколково» выражает признательность компании WebCanape за разработку интерфейса информационной панели Единого Центра Услуг «Сколково».
В сжатые сроки специалисты команды профессионально справились с нетривиальной задачей логического объединения разноплановых сервисов и превращения контента в понятный для конечного клиента продукт.
Кравченко М.И., руководитель Департамента внешних коммуникаций
Проект стал примером того, как наша команда слаженно решает комплексные задачи: от проработки логики до технической реализации. Мы объединили опыт проектирования, дизайна и разработки, чтобы в сжатые сроки создать устойчивый цифровой продукт, полностью соответствующий целям и условиям заказчика.
