Веб-дизайн для компании «Фрегат Сервис».
Как устроен сайт
IT-сервис с ценами, которые можно сравнить
IT-сервис чинит и настраивает компьютеры, сети и видеонаблюдение. Дизайн за два клика ведёт к нужной услуге и показывает пакеты с фиксированными ценами. Нажмите на акцент — экран прокрутится к нужному месту.
01Главная
Четыре направления, один путь к контакту
Клиенты приходят с конкретной проблемой. Поэтому четыре направления (интернет и Wi-Fi, безопасность и видеонаблюдение, обслуживание техники, IT-аутсорсинг) вынесены отдельной строкой под шапку, а форма связи есть уже на первом экране.
Акценты
-
Режим работы, телефон и кнопка «Мы вам перезвоним» — в шапке каждой страницы.
-
Каждое направление раскрывает список конкретных услуг, например монтаж, модернизация или диагностика систем видеонаблюдения.
-
Имя, телефон, сообщение: три поля рядом с предложением, без поиска страницы контактов.
-
Роутеры, видеонаблюдение, обслуживание, монтаж сетей: картинка и название, один клик до услуги.
-
Известные торговые сети среди партнёров дают доверие ещё до звонка.
Отвечает на вопросы
- Вы делаете и видеонаблюдение?
- Когда вы на связи?
02Страница услуги
Три пакета вместо «цена по запросу»
Для «Настройки ноутбука / ПК» есть три пакета: что входит, что нет, и фиксированная цена. Средний пакет выделен. Ниже — отдельные услуги с ценой и кнопкой.
Акценты
-
Строка четырёх направлений повторяется на каждой странице, переход — один клик.
-
Одинаковые строки во всех трёх колонках: галочки и крестики сразу показывают разницу.
-
Средний пакет выше и в цвете: взгляд попадает туда, где выбирает большинство.
-
Удаление вирусов, диагностика, чистка: в каждой строке короткое пояснение, цена и своя кнопка заказа.
Отвечает на вопросы
- Сколько стоит настроить мой ноутбук?
- Что входит в пакет?
03Стайлгайд
Одна система для всех страниц
К дизайну прилагается небольшой стайлгайд: палитра, состояния кнопок и шрифт. Так новые страницы выглядят как старые, а вёрстка идёт быстрее.
Акценты
-
Серо-синий как основа, красный только для действий: «Заказать» и «Перезвоните» сразу заметны.
-
Обычное, наведение, нажатие: для каждой кнопки задано, как она реагирует.
-
Montserrat во всех заголовках и текстах держит картинку спокойной.