198 lines
12 KiB
Markdown
198 lines
12 KiB
Markdown
# Дизайн VEILIX
|
||
|
||
|
||
## Общая задача
|
||
|
||
Нужен дизайн сайта по продаже персональных VPN. Не классический VPN провайдер, когда много клиентов на 1 сервере, а когда мы делаем каждому клиенту индивидуальный IP.
|
||
|
||
Быстрый современный сайт на tailwind с максимальной скоростью под Google Page Speed. Стек который будем дальше использовать: payloadcms + Next.
|
||
|
||
|
||
## Дизайн
|
||
|
||
"Чистый" современный дизайн без лишней маркетинговых бессмысленных фраз, которые есть у всех крупных. Нам нужно выделиться, чётким предложениям видным и понятным, по делу, а не придумывать того чего нет. Прям минимум, тк нет лишней информации.
|
||
|
||
Если сравнить карты Apple vs Карты Google. Apple в своих картах явно пошёл не биться в лоб с Google, тк это бессмысленно, а сделан совсем минимальный интерфейс, при том что у Google в целом, тоже понятно, но за счёт функционала интерфейс перегружен в любом случае. Этот же пример и про Apple Music.
|
||
|
||
### Основные тезисы:
|
||
|
||
- "Чистая" страница с минимум информации
|
||
- Современный шрифт, не технический
|
||
- Это сайт не для гиков, а для обычных людей. Графика, иконки, шрифты должны располагать и быть понятны человеку не компьютерному. Есть когда сайты выглядят больше как для гиков и не только по описанию и текстам, а потому какие шрифты, графика, иконки.
|
||
- Не нужны банальные иконки всяких замков, защит и прочего
|
||
- Ночная тема
|
||
|
||
|
||
## Верхнее меню
|
||
|
||
1. Логотип (слева)
|
||
2. далее отдельно немного от логотипа правее
|
||
- Цены
|
||
- Локации
|
||
- Поддержка
|
||
3. далее прижато справа:
|
||
- Переключение языков (иконка)
|
||
- Кнопка Login
|
||
- Кнопка Get VPN
|
||
|
||
Название Veilix - без слова VPN для EN. Для русского Вейликс.
|
||
|
||
Висит всегда на экране, стандартно.
|
||
|
||
|
||
## Нижнее меню
|
||
|
||
Меню, теже пункты что и вверху
|
||
Дополнительно Legal страницы
|
||
Оплата карточками
|
||
Переключение темы 3 режима
|
||
Переключение языка
|
||
|
||
|
||
## Логотип
|
||
|
||
Придумать логотип лёгкий, тк Veilix, от слова Вуаль - Veil, когда она легко скрывает за собой что-то, нужен и логотип такой же. Те нужно чтобы это были какие-то замки и вот это всё банальное. У Nord на лого какие-то горы, возможно что-то с севером ассоциировано.
|
||
|
||
|
||
|
||
## Цвета
|
||
|
||
Сайту нужен светлый, например у Nord hero экран тёмный - так не нужно. У blancvpn тоже. При этом акцентные цвета - тёмно фиолетовый, глубокий и пастельный.
|
||
|
||
У Firefox режим инкогнито когда включается там набор градиентный фиолетовых цветов.
|
||
|
||
У Protonvpn в сторону Фиолетового неплохие цвета и светлое всё, нет тёмных.
|
||
|
||
|
||
## Языки
|
||
|
||
Сделать всё на 2х языках RU и EN.
|
||
|
||
|
||
|
||
## Главная страница
|
||
|
||
### Hero экран
|
||
|
||
Ваш личный VPN с индивидуальным IP. Но не нужно его делать на весь экран по высоте, достаточно 2/3, чтобы далее контент просматривался ниже.
|
||
|
||
|
||
### Преимущества
|
||
|
||
C иконками и расшифровкой, что это значит. Нужно написать красиво, то что перечислил ниже, можно разложить даже как-то иначе. Художественно, чтобы понятно было потребителю не разбирающемуся в технологиях, и руководителям.
|
||
|
||
|
||
1. Индивидуальный ip
|
||
- Работа с западными AI снижается риск блокировки по сравнению с публичными VPN
|
||
- Безопасность вашего трафика в любой точке мира где вы будете пользоваться
|
||
- Одинаковый IP на всех ваших устройствах где-бы вы не находились, не отличить. Вы всегда в одной локации с вашим IP.
|
||
- Любые сервисы работают стабильнее с личными IP, тк при использовании массовых часто срабатывает защита и ботов
|
||
|
||
2. Тариф включает до 4-х устройств
|
||
- Можно приобретать дополнительные тарифы в этой или других локациях с дополнительными индивидуальными IP
|
||
|
||
3. К выбранному тарифу дополнительно выделенный RU IP адрес
|
||
- Используется и как прямое соединение и для организации моста в обе стороны
|
||
|
||
4. Два типа протоколов WireGuard (Amnezia WG) и Xray (Vless + Histeria2 + xhttp)
|
||
- Дополняются и обновляются
|
||
|
||
5. Умная маршрутиризация трафика из Ру к Глобал
|
||
- К RU сайтам через RU сервер напрямую
|
||
- К Глобальным трафик через туннель прокидывается через локацию в вашем тарифе
|
||
|
||
6. При использовании из Глобала обратная маршрутиризация
|
||
- К мировым сайтам прямой коннект из вашей локации
|
||
- К RU сайтам трафик через туннель идёт через RU сервер
|
||
- Для работающих с Россией
|
||
|
||
7. О нас
|
||
- Работаем с 2022 года
|
||
|
||
|
||
### FAQ
|
||
|
||
Стандартная история, несколько вопросов с ответами раскрывающимися. Придумай для моей тематике исходя из описанного в задаче.
|
||
|
||
|
||
|
||
## Страницы Цены
|
||
|
||
Сразу крупно обыграть блок с ценой на первом экране, одна цена
|
||
|
||
4900 - первый месяц
|
||
2900 далее
|
||
|
||
Должен быть выбор локации, и при этом какие-то локации показывают, есть несколько серверов в наличии, а какие-то показывают будет готово через 24 часа.
|
||
|
||
Готово через 24 часа это даже фича, что покупатель реально видит что под него делается.
|
||
|
||
Выбор локации и Купить. Переход на страницу оформления заказа.
|
||
|
||
Кнопка собирать лиды, кому требуется индивидуальные условия - оставьте заявку.
|
||
|
||
|
||
|
||
|
||
## Страница Поддержка
|
||
|
||
Крупно блок с контактный email и tg, дальше в FAQ разделённый по разделам и ниже форма связи.
|
||
|
||
|
||
|
||
|
||
## Страница Оплаты и Оформления заказа
|
||
|
||
Страница оплаты заказа при нажатии на Купить.
|
||
|
||
Стандартно как у Nord и Blanc, с предложением Авторизоваться по почте.
|
||
|
||
|
||
|
||
|
||
## Личный кабинет на Вебе
|
||
|
||
Максимально простой, как у Nord и Blanc. Страница и слева сайдбар. Для личного tailwind если используют, то на нём, если что-то другое применяют, то предлагай.
|
||
|
||
Регистрация и авторизация только по почте по одноразовому паролю, при этом не разделять авторизацию и регистрацию.
|
||
|
||
В сайбаре Главная, Купить Ключ, Список ключей и внизу Поддержка, Язык и Тема.
|
||
|
||
C Иконками пункты меню.
|
||
|
||
В отличии от Nord и Blanc у нас ключей может быть несколько, чтобы сразу в нужный попадать и видеть срок истечения.
|
||
|
||
### Главная страница
|
||
- Список ключей
|
||
- Купить Ключ
|
||
- FAQ
|
||
|
||
### Страница Ключа
|
||
|
||
- Дата окончания
|
||
- Изменить Оплату (привязанную карточку)
|
||
- Скачать 4 конфигурации для WG или отсканировать QR
|
||
- И ключ для Happ, crypto. Копировать и плюс QR.
|
||
|
||
### Страница Купить
|
||
|
||
Внутри личного кабинета без перехода на сайт, весь функционал как в разделе Купить с выбором локации
|
||
|
||
|
||
|
||
## Личный кабинет в Telegram
|
||
|
||
Нужен дизайн для MiniApp, и чтобы это выглядело в стиле телефона, например у самого Telegram, есть нативное приложение Wallet, и там похоже на интерфейс телефона.
|
||
|
||
Обыграть всё что я написал про Личный на Вебе, в парадигме MiniApp и интерфейса как у телефона.
|
||
|
||
|
||
|
||
## Дополнительный вариант Дизайна
|
||
|
||
Будет 2 одинаковых сайта, но на 1 будет продаваться только индивидуальные IP, на втором чтобы была возможно и Массовые тарифы купить и также индивидуальный. Всё одинаково, за исключением 2х тарифов, Базовый и Премиум. Везде нужно это обыграть, где представлены тарифы.
|
||
|
||
Но нужно максимально унифицированно.
|
||
|
||
Чтобы в итоге это обрабатывали одни скрипты под разными доменами будет разное видно. В тч в Личном кабинете.
|