Дизайн сайта хостинга серверов vyrex.co

О клиенте и задаче

vyrex.co продаёт виртуальные и выделенные серверы в Европе. VPS работают на двух платформах: AMD Ryzen 5 3600 и AMD Ryzen 9 9950X с портом до 10 Гбит/с. Выделенные серверы сдаются целиком, с разным объёмом памяти и дисков.

У такого продукта много параметров: локация, процессор, число ядер, память, диск, скорость канала, цена. Если вывалить всё сразу, сайт превращается в прайс-лист, а человек идёт спрашивать в поддержку или уходит к конкуренту с более понятной витриной.

Задачу сформулировали так:

• показать стоимость и два типа серверов сразу, на первом экране;

• дать фильтры, которыми удобно пользоваться и мышью, и пальцем;

• сделать тарифы легко сравнимыми между собой;

• собрать всё на одной системе компонентов, чтобы сайт можно было развивать без переделки с нуля.

По стилю клиент хотел фирменный синий, мягкие свечения в блоках и объёмные 3D-элементы. При этом сайт не должен был походить ни на один из крупных облачных сервисов, на которые обычно равняются хостинги.

С чего начали: сценарий выбора сервера

Прежде чем рисовать экраны, мы расписали путь покупателя. Человек приходит с двумя вопросами: «сколько стоит» и «есть ли нужная мне конфигурация». На первый сайт должен ответить за секунду, на второй — за пару минут работы с фильтрами.

Из этого выросла структура сайта:

1. Главная — витрина с ценами и короткими списками тарифов для тех, кто уже знает, что хочет.

2. Каталог виртуальных серверов — подбор по параметрам для тех, кто сравнивает.

3. Каталог выделенных серверов — та же логика, но с другим набором характеристик.

4. Конфигуратор — для тех, кому не подошёл ни один готовый тариф.

Все страницы сделаны в двух версиях, для компьютера и телефона. Общие блоки вроде списка дата-центров, FAQ и футера переходят со страницы на страницу без изменений, так сайт ощущается цельным.

Главная страница: цена на первом экране

Первый экран отвечает на главный вопрос сразу: заголовок «Быстрые виртуальные и выделенные серверы» и цена от 290 ₽ в месяц. Рядом две кнопки: «Выбрать сервер» ведёт к тарифам, «Конфигуратор» — к сборке своей конфигурации.

Под главным блоком стоят три карточки с ценами по направлениям:

• VPS на Ryzen 5 3600 — от 290 ₽ в месяц;

• VPS на Ryzen 9 9950X с портом 10 Гбит/с — от 1 490 ₽;

• выделенный сервер целиком — от 6 900 ₽.

Это три входа в каталог. Человек, который уже знает свою задачу, переходит в нужный раздел в один клик. Справа от заголовка — объёмная 3D-иллюстрация сети в фирменном синем и подпись «Надёжные серверы в Европе».

Тарифы с выбором локации

Ниже идут два блока тарифов: виртуальные и выделенные серверы. В каждом сначала выбирается локация, потом тариф. Так человек не видит предложения, которые ему не подходят по географии.

Карточка локации показывает флаг, страну, процессор и скорость порта. У неё четыре состояния: выбрана, обычная, под курсором и «нет в наличии». Последнее состояние важно для хостинга: лучше честно показать, что локация временно занята, чем спрятать её и заставить человека искать.

Тарифы VPS показаны карточками с четырьмя цифрами: процессор, память, NVMe-диск и порт. Цифры крупные, единицы измерения мелкие и серые, поэтому тарифы сравниваются просто взглядом. Последняя карточка в ряду — «Своя конфигурация», она ведёт в конфигуратор, где цена пересчитывается сразу.

У выделенных серверов характеристик больше, поэтому там мы сразу поставили таблицу. О ней подробнее ниже.

Дата-центры и частые вопросы

Блок «Работаем только с проверенной и надёжной инфраструктурой» показывает логотипы дата-центров и операторов с подписью страны. Для хостинга это главный аргумент доверия: люди хотят знать, где физически стоит их сервер.

В блоке FAQ вопросы раскрываются по нажатию, а слева стоит карточка «Не нашли ответ?» со ссылкой на Telegram-чат. Вопрос, на который нет ответа, не должен быть тупиком.

Каталог VPS: все фильтры в одной панели

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

Локация

Вверху страницы стоит ряд карточек локаций, и выбрать можно несколько сразу. В карточке видно не только страну, но и платформу: например, в Польше есть AMD Ryzen 5 3600 с DDR4 и AMD Ryzen 9 9950X с DDR5 и портом до 10 Гбит/с. Для технической аудитории процессор важен не меньше страны.

Параметры

Под локациями собраны четыре ползунка диапазона:

• процессор от 1 до 8 vCPU;

• память от 2 до 16 ГБ;

• NVMe-диск от 30 до 480 ГБ;

• канал от 1 до 50 Гбит/с, с шагами 1; 2,5; 10 и 50 Гбит/с.

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

Вторая правка касалась компоновки. Четыре отдельные карточки с ползунками дробили экран, поэтому мы объединили их в одну стеклянную панель с тонкими разделителями. Сейчас фильтры читаются как один инструмент, а не как четыре разных блока. Над каждым ползунком справа подписан выбранный диапазон, например «2 – 16».

Результаты: карточки или таблица

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

Тарифы сгруппированы по платформам: «Польша, AMD Ryzen 5 3600», «Польша, AMD Ryzen 9 9950X». Каждую группу можно свернуть, если она не интересна.

Изначально тарифы были только карточками, как на главной. Потом стало понятно, что техническим специалистам удобнее сравнивать строки. Мы добавили вид таблицей, где названия характеристик вынесены в шапку: слова «Процессор» и «Память» не повторяются в каждой строке. Карточки остались для тех, кто выбирает глазами, а переключатель позволяет выбрать удобный вариант.

В таблице VPS столбцы такие: тариф, процессор, память, NVMe-диск, порт, цена и кнопка «Заказать». Например, тариф R5-1 — это 1 vCPU, 2 ГБ памяти, 30 ГБ NVMe и порт 1 Гбит/с за 290 ₽ в месяц. Старший R5-8 даёт 8 vCPU, 16 ГБ и 240 ГБ за 2 090 ₽.

Каталог выделенных серверов: та же логика, другая таблица

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

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

• ядра от 6 до 16;

• память от 64 до 192 ГБ;

• диски от 1 до 7,68 ТБ;

• порт от 1 до 10 Гбит/с.

Таблица шире, чем у VPS. В ней столбцы «Процессор», «Ядра / потоки», «Память», «Диски», «Порт» и «Цена». Одна строка выглядит так: AMD Ryzen 9 9950X, 16 / 32, 96 ГБ DDR5, 2 × 1,92 ТБ NVMe, 10 Гбит/с, 21 900 ₽ в месяц.

Числа набраны крупно и жирно, а единицы и типы мелким серым шрифтом: «96» и «ГБ DDR5». Получается сканировать таблицу по столбцу и сразу видеть разницу между серверами.

Мобильная версия: списки вместо слайдеров

В мобильной версии мы не стали просто сжимать десктоп, а переделали те блоки, с которыми на телефоне неудобно работать. Макеты сделаны под ширину 390 px.

Тарифы и серверы раскрываются по нажатию

Самый очевидный вариант — горизонтальный слайдер из карточек тарифов. Мы от него отказались: в слайдере виден один тариф, и сравнить их между собой почти невозможно.

Для выбора мы собрали несколько вариантов на одном фрейме и остановились на раскрывающихся строках. В свёрнутой строке видны название, цена и короткая сводка: «R5-2, 590 ₽/мес, 2 vCPU, 4 ГБ, 60 ГБ NVMe». По нажатию строка раскрывается, показывает характеристики и кнопку «Заказать за 290 ₽».

Так на одном экране помещается вся линейка тарифов, и цены можно сравнить сразу. Тот же принцип мы применили к выделенным серверам: в свёрнутом виде строка показывает «16 / 32, 96 ГБ DDR5, 2 × 1,92 ТБ».

Локации списком

На десктопе локации стоят рядом карточками, а на телефоне такой ряд пришлось бы листать вбок. Мы сделали из них вертикальный список строк: флаг, страна, процессор и отметка выбора справа. Недоступная локация остаётся в списке, но тускнеет и получает подпись «Нет в наличии».

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

Меню на весь экран

По кнопке-бургеру открывается меню с разделами: виртуальные серверы, выделенные серверы, дата-центры, FAQ и контакты. Каждый пункт — крупная строка со стрелкой, в неё легко попасть пальцем. Внизу меню две кнопки: «Регистрация» и «Войти», чтобы клиенту не приходилось искать вход в панель.

Шрифт и палитра

На весь сайт один шрифт — Manrope. Цены и заголовки набраны ExtraBold, характеристики в таблицах Medium, чтобы цифры не сливались даже в мелких подписях. У Manrope открытые формы знаков, цифры в нём хорошо читаются, а для сайта с тарифами это главное.

Что учесть при заказе дизайна сайта хостинга

По опыту этого проекта мы собрали семь правил, которые подходят любому хостингу, VPN-сервису или SaaS с тарифами.

1. Покажите цену сразу. Фраза «от 290 ₽ в месяц» на первом экране работает лучше любого слогана. Человек понимает, что предложение ему по карману, и читает дальше.

2. Фильтры делайте привычными. Нестандартный ползунок смотрится интересно в макете, но раздражает в работе. Привычный контрол, оформленный в стиле бренда, почти всегда лучше.

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

4. Не прячьте то, чего нет в наличии. Занятая локация с пометкой показывает, что сервис живой и скоро пополнится. Пустое место на её месте выглядит хуже.

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

6. Покажите инфраструктуру. Дата-центры, процессоры и скорость порта — аргументы, которые технический покупатель ищет в первую очередь.

7. Заказывайте UI-кит вместе с макетами. Тарифы и локации у хостинга меняются постоянно. С китом это рутина, без него — сотни ручных правок по всему сайту.

Частые вопросы

Сколько времени занимает дизайн сайта хостинга?

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

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

Стоимость считаем после брифа: она зависит от объёма страниц и состояний. Для ориентира можно взять этот кейс: главная, два каталога, мобильная версия и кит.

Вы делаете только дизайн или сайт целиком?

Можем и то, и другое. Студия делает сайты под ключ: дизайн, разработку, настройку хостинга и дальнейшую поддержку. Если у вас свои разработчики, передадим им макеты и UI-кит в Figma.

В каком виде передаются макеты?

В Figma: страницы для десктопа и телефона, компоненты со всеми состояниями и цвета в переменных. Разработчик видит отступы, размеры и цвета напрямую в файле.

Подойдёт ли такой подход для VPN или SaaS?

Да. Любому сервису с тарифами и параметрами нужно то же самое: понятная цена, удобное сравнение и быстрый путь до оплаты.

Обсудим ваш проект

Если у вас хостинг, VPN или другой IT-сервис с тарифами и сайт не помогает продавать, напишите нам. Разберём текущий сайт, предложим структуру и назовём сроки.