Дизайн сайта хостинг-компании

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

  • Таблицы тарифов и конфигураторы — на прототипе
  • Условия тарифов — в таблице, а не в сносках
  • Сайт и личный кабинет в одном стиле

Рассчитать стоимость

Изучим задачу и пришлём план работ с ценой.

Первый экран сайта хостинг-провайдера

На сайт хостинга приходят с задачей: разместить проект, взять сервер, зарегистрировать домен. Схема — методика, а не описание чужого сайта.

  1. 1

    Шапка с продуктами

    Хостинг, серверы, домены, сертификаты — отдельными пунктами, справа — вход в кабинет и поддержка.

  2. 2

    Проверка домена

    Поле для имени домена с проверкой, свободно ли оно, — для тех, кто начинает с адреса будущего проекта.

  3. 3

    Предложение с ценой

    Для кого план и цена в месяц с условием — при оплате помесячно или за год.

  4. 4

    Три плана

    Короткие карточки с главными отличиями и ссылкой на полное сравнение.

  5. 5

    Статус и поддержка

    Ссылка на страницу состояния сервисов и способы связаться с поддержкой.

Кейсы

Добыча наших клиентов

  • Частный юрист · Симферополь

    350 ₽

    стоимость заявки в контекстной рекламе Яндекса

    Дизайн сайта-визитки частного юриста из Симферополя: стоимость заявки в контекстной рекламе Яндекса — 350 рублей.

    Смотреть кейс
  • Интернет-магазин спецтехники

    Дизайн сайта интернет-магазина спецтехники Lonking

    Дизайн сайта интернет-магазина спецтехники Lonking: продажа по всей России, сервис, запчасти и лизинг.

    Смотреть кейс
  • Компания по строительству бассейнов · Севастополь

    Дизайн сайта компании по строительству бассейнов в Севастополе

    Дизайн сайта компании, которая строит бассейны на заказ в Севастополе и по Крыму: планирование, проектирование и строительство. Десктопная и мобильная версии.

    Смотреть кейс
  • Частное охранное предприятие · Севастополь и Ялта

    Дизайн корпоративного сайта частного охранного предприятия

    Дизайн корпоративного сайта частного охранного предприятия в Севастополе и Ялте. Десктопная и мобильная версии.

    Смотреть кейс

Тарифы, сравнение, панель управления

Здесь решают цифры и настройки, а не картинки.

  • Таблица сравнения

    Одинаковые единицы во всех колонках, отличия подсвечены, ограничения записаны строкой таблицы, а не сноской.

  • Конфигуратор сервера

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

  • Панель управления

    Если кабинет свой, его экраны рисуем на том же UI-ките, и переход с сайта не выглядит переходом в другой продукт.

  • Тёмная тема

    Цвета задаём переменными Figma с режимами — светлая и тёмная темы живут в одном файле и не расходятся.

Что мешает выбрать тариф

Из-за них человек откладывает выбор или идёт с вопросом в чат.

  • 01

    Разные единицы

    В одном плане диск в гигабайтах, в другом — «безлимит» со звёздочкой.

  • 02

    Цена без условий

    Крупная цифра за месяц, а мелко — что это при оплате за три года.

  • 03

    Слишком много планов

    Девять колонок в одной таблице, и разница между соседними не видна.

  • 04

    Продление мелким шрифтом

    Стоимость продления клиент узнаёт из письма через год.

Что передаём после дизайна

  • Исходники в FigmaВсе макеты и прототип — с правами владельца или доступом на редактирование
  • UI-китЦвета, шрифты, кнопки, поля и их состояния
  • АдаптивыВерсии для телефона, планшета и компьютера
  • Спецификация для разработчикаСетка, отступы, поведение элементов
  • ГрафикаИконки и иллюстрации в форматах для вёрстки
  • Права на макетыПередаём по договору; шрифты и фото — с лицензией для коммерческого использования

Как работаем над дизайном

Сроки — ориентиры для проекта до 10 шаблонов: лендинг быстрее, магазин дольше. Точный график — в договоре.

  1. 2–3 дня

    Бриф

    Задача, аудитория, конкуренты, текущая версия и данные Метрики, если проект уже работает.

    Итог этапаБриф и список шаблонов

  2. 3–7 дней

    Прототип

    Схемы страниц без цвета и картинок: блоки, их порядок, кнопки и формы.

    Итог этапаСогласованная структура страниц

  3. 3–5 дней

    Концепция первого экрана

    Шрифты, цвета, фото и кнопки на одном экране. После согласования стиль переходит на остальные страницы.

    Итог этапаУтверждённый стиль

  4. 2–3 недели

    Макеты страниц

    Все шаблоны из брифа, включая формы, сообщения об ошибках и служебные страницы.

    Итог этапаМакеты для компьютера

  5. 3–5 дней

    Адаптив

    Версии для телефона и планшета: порядок блоков, меню, размеры кнопок и текста.

    Итог этапаМакеты для телефона и планшета

  6. 1–2 дня

    Передача разработчику

    UI-кит, состояния элементов, спецификация. По договорённости сверяем вёрстку с макетами.

    Итог этапаФайл Figma и спецификация

Стоимость дизайна для хостинг-провайдера

Сайт с тарифами, конфигуратором и базой знаний обычно укладывается в пакет «Сайт до 10 шаблонов». Интерфейс личного кабинета считаем отдельно.

  • Лендинг

    Одна страница под рекламу или акцию. Ориентир — 2–3 недели

    от 40 000 ₽

    • Прототип
    • Макет для компьютера и телефона
    • Две итерации правок
  • Сайт до 10 шаблонов

    Для компании или сферы услуг. Ориентир — 4–6 недель

    от 90 000 ₽

    • Прототип и концепция
    • До 10 уникальных шаблонов
    • Адаптив и UI-кит
  • Интернет-магазин

    Каталог, карточка товара, корзина. Ориентир — 5–8 недель

    от 150 000 ₽

    • Каталог, фильтры и карточка
    • Корзина и оформление заказа
    • Личный кабинет
    • Сверка вёрстки с макетами
  • Число правок — в договоре
  • Вёрстка и программирование — отдельная услуга

Не подошёл тариф — предложите свою цену

Назовите бюджет — предложим состав работ или запуск по этапам.

FAQ

Вопросы о дизайне сайта хостинга

Не нашли ответ?

Как показать тарифы на телефоне?

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

Рисуете интерфейс панели управления?

Да, отдельным проектом. Там важнее сценарии, чем стиль: создать сайт, подключить домен, оплатить. Начинаем с обращений в поддержку — они показывают, где клиенты путаются.

Как оформить страницу статуса сервисов?

Состояние каждого сервиса — словами и цветом одновременно, чтобы его понимали и без различения цветов. Ниже — история инцидентов с датами и объяснением, что произошло. Если сбой идёт прямо сейчас, ссылка на статус появляется в шапке сайта и в кабинете.

Можно заказать дизайн только страниц тарифов?

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

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

Как сравнивают тарифы

Человек смотрит на три вещи: что входит, сколько стоит сейчас и сколько будет стоить потом. Сравнение строим вокруг этих вопросов — одинаковые единицы, цена с условиями оплаты рядом, продление в той же строке. Рекомендованный план выделяем, но остальные не прячем.

Сайт, кабинет и база знаний — одна система

Клиент переходит с сайта в кабинет, оттуда — в инструкции и обратно. Если у каждой части свой стиль, это выглядит как три разных сервиса. Общий UI-кит связывает их, а страница состояния сервисов и база знаний с поиском отвечают на вопросы раньше, чем их зададут поддержке.

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

Первый шаг

Пришлите страницу тарифов — начнём с неё

Покажите нынешние тарифы или конфигуратор — предложим, как упростить сравнение.

Что написать в заявке, чтобы план был точнее:

  • Какие продукты продаёте — хостинг, серверы, домены
  • Есть ли свой личный кабинет
  • Сколько тарифов в линейке

Перезвоним в рабочее время и ответим на вопросы.

Расскажем, как сделали этот проект, и прикинем план для вашего бизнеса.