This is MOB

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

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

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

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

1 концепт:

Главный экран представляет собой раскрытый рабочий стол некой операционной системы. Желаемую эстетику -ретро я отражаю через пиксельные иконки, которые есть в окошках с текстом и числительных преимуществах на фоне экрана. В преимуществах предлагаю указать количество съемочных часов, гигабайтов снятых видео и т.д. Интерактив в этом концепте был бы представлен функцией перетаскивания каждого элемента на экране.
Страница портфолио в этом концепте представлена в привычном виде когда страницу можно скроллить.

2 концепт:

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

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

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

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

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

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

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

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

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

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

Figma, Tilda