This is MOB

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

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

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

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

Главной идеей стало размещение «Сапера». Пиксельные иконки тоже есть, но уже в цветном варианте и более похожие на интерфейс Windows 95 – что может быть роднее...
Интерактив берет на себя игра. Меню показываю в формате софт-бара снизу (нечто похожее на Macintosh) и размещенные кнопки в верхней части экрана – таким образом сохраняю привычный паттерн размещения меню.
Каждая из страниц в этом варианте представлена всплывающим окном. А сайт является одноэкранным, без возможности скролла – эта идея более целостно отражает желаемую концепцию операционной сисиемы.

После обсуждения решено было остаться в концепции 2-го варианта. Единственное чего хотелось – осовременить иконки. Ибо получилось немного нафталиново, и настолько метчитсья с Wibdows 95 все-таки не хотелось. В таком направлении я доработала концепт и подготовила макеты для мобильной версии сайта.

Прелоадер представляет собой загрузку сайта–компьютера, подготавливая посетителя к тематике сайта.

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

Меню для перехода по страницам представлено в верхней панели и софтбаре снизу. Также по целевым папкам-портфолио можно перейти, кликнув на иконки с соответствующим названием, находящиеся прям на рабочем столе.

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

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

Разработка началась с проектирования адаптивной сетки игрового поля. Клетки, содержащие бомбы, отмечались SVG-иконкой, которую пришлось отдельно интегрировать для поддержки внешних графических ресурсов. Для централизованного отображения результатов и оповещений (например, "БУМ! Конец игры") был добавлен элемент уведомлений, адаптированный по размеру и стилю к интерфейсу игры.

Внедрение SVG-иконок для отображения бомб столкнулось с задачей подстройки размеров и прозрачности, чтобы логотип выглядел корректно в каждом размере клетки. Также важным было решение проблемы "залипания" событий после завершения игры — это обеспечило плавный игровой процесс и удобство для пользователей.