Портал для бизнеса · Москва и область
БлизкоСайт, по которому бежит сигнал
«Близко» подключает компании Москвы, Зеленограда и области: оптика до офиса, резервные каналы, хостинг и стойки в дата-центре, VPN, Wi‑Fi и видеонаблюдение. Команда студии разработала новый облик корпоративного портала corp.bliz.co — от фирменного языка и главной до восемнадцати страниц услуг, одиннадцати городских страниц и блога.
- 18 страниц
- услуг — общим каркасом поверх своих текстов
- 11 городов
- со своими страницами и тарифами
- 77 статей
- блога — витриной и журналом
- 11 иллюстраций
- одной серией — в свете оптоволокна
Задача
Портал,
а не визитка
У «Близко» десятки страниц: у каждой услуги свой большой лендинг, есть страницы для городов Подмосковья и блог на 77 статей. Тексты в них написаны, проверены и работают на поиск. Задача — дать всему порталу один современный облик, не переписывая содержание и не останавливая заявки.
- 01Тексты остаются в админкеЛендинги не переписаны. Новый первый экран собирается из их же заголовка, описания и пунктов, а остальной текст встаёт в общий каркас со своим оформлением.
- 02Действие всегда рядом«Проверить адрес», «Подключить», телефон инженера — в первом экране, в закреплённой навигации по странице и в конце каждой страницы.
- 03Связь видна глазамиОптоволокно, по которому бежит свет, дуги сигнала из логотипа, сетка в перспективе — провайдер показывает свою работу, а не рассказывает о ней.
Фирменный язык
Палитра —
по волокнам
Цвета взяты из логотипа «Близко»: его градиент от салатового к бирюзовому стал светом кнопок и акцентов, а фон — почти чёрным с бирюзовым отливом, как зал с оборудованием. Заголовки — широкий Unbounded, текст — фирменный Ubuntu, его мы сохранили. Сквозные мотивы — оптическое волокно, дуги сигнала и сетка в перспективе.
Главная
Главная —
как схема сети
Девять глав, и каждая отвечает на вопрос компании, которой нужна связь: что умеет провайдер, как выбрать услугу, как идёт подключение, кто уже подключён и как связаться с инженером. Выберите главу — окно прокрутится к ней.
Услуги
Не плитка,
а коммутатор
Услуги на главной собраны не сеткой карточек, а списком, как порты на коммутаторе: наведите на услугу — сбоку загорается её картинка с подписью. Картинки — серия иллюстраций, созданных нейросетью по нашему описанию, в одном свете с порталом; это не фото оборудования провайдера. Попробуйте здесь.
Страницы услуг
Восемнадцать лендингов —
один каркас
Каждая услуга — длинный лендинг со своими блоками, тарифами и вопросами. Мы дали им общий каркас: тёмный первый экран с картинкой услуги и бегущим светом, закреплённую под шапкой навигацию по разделам страницы и в конце — другие услуги и консультацию инженера. Собственное оформление каждого лендинга сохранено: мы сверили его со снимками до обновления.
Тарифы по скорости, белый IP, резервный канал и всё, что нужно уточнить до подключения.
Открыть на портале ↗Города
Одиннадцать городов —
одни тарифы
Для Зеленограда, Химок, Мытищ и других городов у провайдера отдельные страницы «Интернет для бизнеса в…». Город в заголовке подсвечен градиентом, а блок тарифов стал карточками: крупная скорость, шкала, которая заполняется при прокрутке, условия и кнопка заявки. Тарифы берутся из одного места в админке — правка сразу видна во всех городах.
- Зеленоград
- Химки
- Мытищи
- Балашиха
- Красногорск
- Одинцово
- Долгопрудный
- Подольск
- Люберцы
- ЮЗАО
- САО
Блог
77 статей —
как журнал
Блог провайдера — практика: SLA и простой, резервные каналы, ЦОД, бэкапы, VPN. Свежая статья встаёт крупно, у каждой — дата и время чтения. В статье три колонки: оглавление с подсветкой текущего раздела и кругом прочитанного, текст с выделенным коротким ответом и колонка «Поделиться» с вопросом инженеру. Ссылку на любой раздел можно скопировать, в конце — «Читайте также». На страницах услуг появились статьи по теме.
Детали
Мелочи,
на которых держится связь
Меню «Услуги для бизнеса» раскрывается списком с номерами. Шапка прячется, когда страницу листают вниз, и возвращается при движении вверх. На телефоне меню открывается на весь экран кругом от кнопки. В подвале надпись «БЛИЗКО» загорается там, где курсор.
Живой портал
Двенадцать страниц —
одним языком
Тёмные страницы услуг с собственным оформлением лендингов, «О нас» с принципами и реквизитами, светлый лист для длинных текстов, витрина блога и карточки контактов. Наведите на окно — страница прокрутится.
На телефоне
Связь —
в кармане
На телефоне текст первого экрана идёт раньше картинки, кнопки — во всю ширину, тарифы и статьи — в одну колонку, навигация по странице листается вбок. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над порталом работала команда студии: разбор, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Новый облик включали на работающем сайте — заявки продолжали приходить, а тексты, тарифы и адреса страниц остались прежними.
- 01РазборСняли 22 страницы сайта на компьютере и телефоне, выгрузили разделы, тексты и настройки — чтобы при обновлении ничего не потерять.
- 02КонцепцияПортал как собственная сеть провайдера: тёмный зал, по оптическому волокну бежит свет, сигнал расходится дугами, как в логотипе.
- 03Дизайн-системаПочти чёрный с бирюзовым отливом, бирюза и салатовый из логотипа, широкий Unbounded для заголовков и фирменный Ubuntu для текста.
- 04Главная, шапка, подвалОптоволокно первого экрана, коммутатор услуг, этапы на волокне, клиенты, призыв; закреплённая шапка с меню услуг и подвал с большой надписью.
- 05Иллюстрации услугОдиннадцать иллюстраций одной серией: тёмная сцена, бирюзовое волокно, тот же свет, что и на всём сайте.
- 06Страницы услугОбщий каркас для восемнадцати лендингов и одиннадцати городских страниц: первый экран, навигация по странице, тарифы, другие услуги.
- 07Блог, контакты, «О нас»Витрина блога, статья в три колонки, своя страница «О нас», контакты карточками, текстовые страницы на светлом листе.
- 08Приёмка и доводкаПроверили страницы на компьютере и телефоне, сверили оформление каждого лендинга со снимками до обновления и довели по замечаниям.
Довели на приёмке
- Картинка услуги на главной держится сбоку, пока листается список
- Надпись «БЛИЗКО» в подвале — без линий на пересечениях букв
- Шапка прячется и появляется плавно, без рывков
- Переходы по ссылкам внутри страницы — плавные, заголовок не уходит под шапку
- В меню подсвечен раздел, в котором вы находитесь
- Оформление лендингов хостинга и аренды стоек сохранено полностью
- Таблицы сравнения — с прежними полосами строк
- Блок «Нам доверяют» на городских страницах получил фон
- Значки под калькулятором VPS снова на месте
Работает как раньше
- Тексты лендингов в админке
- Формы заявок
- Калькулятор VPS
- Тарифы
- Статьи блога
- Адреса страниц
Итог
Провайдер,
который виден на сайте
Главная, шапка, подвал, восемнадцать страниц услуг, одиннадцать городских страниц с тарифами, блог и статьи, контакты и текстовые страницы — одним языком, на работающем портале. Связь, которую продаёт «Близко», теперь видна с первого экрана: свет бежит по волокну, и сайт отвечает на каждое движение.