Дизайн и вёрстка проекта VPNGame

Задизайнено и свёрстано за 18 дней.

Оглавление

  1. Обращение
  2. Общение
  3. Польза до проекта
  4. Дизайн до
  5. Задача
  6. Функциональный прототип
  7. Прототип
  8. Подбор изображений
  9. Редактирование изображений
  10. Дизайн
  11. Дизайн-корзина
  12. Вёрстка
  13. Правки
  14. Подготовка исходников

Обращение

Основатели проекта оставили заявку на фриланс-бирже Фрилансим. Я посмотрел проект, проанализировал сайт и понял, что хочу заняться этим проектом и сделать ребятам классный результат. Я оставил отклик, в котором все подробно расписал.

Осталась одна проблема — не отвечали на заявку. Я подумал, что заказ уже кто-то взял.

Дизайн и вёрстка проекта VPNGame 1
Обращение клиента

Общение

Через неделю эта заявка снова попалась мне на глаза со статусом «Активна». Я зашел на сайт, нашел контакты группу ВКонтакте и написал им напрямую.

Дизайн и вёрстка проекта VPNGame 2

В итоге они ответили и я задал пару вопросов о целях, результате проекта. Уточнил поведение пользователей, их сценарии, попутно составляя прототип проекта в голове.

Пара скриншотов переписки

Дизайн и вёрстка проекта VPNGame 3
Дизайн и вёрстка проекта VPNGame 4
Дизайн и вёрстка проекта VPNGame 5

Польза до проекта

Я люблю делать что-то до клиента, еще не заключив договор и не получив оплату. Для VPNGame я сделал первый экран главной страницы и баннер с ценами в фирменном стиле.

Баннер

Дизайн и вёрстка проекта VPNGame 6

Первый экран сайта

Дизайн и вёрстка проекта VPNGame 7

Дизайн сайта до

Задача

Сделать дизайн 7 страниц сайта и заверстать их для дальнейшей интеграции в систему.

Список страниц:

  1. Главная
  2. Каталог игр
  3. Серверы
  4. Тарифы
  5. Контакты
  6. Условия
  7. Личный кабинет

Функциональный прототип

В первую очередь нужно составить функциональный прототип — описание каждой секции с перечислением элементов.

Такой прототип помогает быстрее начать делать основной прототип. Не появляется вопросов о том, какие элементы разметить на этом экране.

Дизайн и вёрстка проекта VPNGame 17

Прототип

После функционального прототипа начинается прорисовка основного прототипа сайта.

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

Подбор изображений

Для игрового сайта я решил подобрать некоторых персонажей, которые будут добавлять игрового настроения сайту.

Дизайн и вёрстка проекта VPNGame 27
Персонажи для сайта

Редактирование изображений

Не все изображения я мог найти в отличном качестве. Некоторые приходилось обрабатывать детально, что-то срезать, что-то дополнять. В общем реставрация фото 🙂

Дизайн и вёрстка проекта VPNGame 28
До
Дизайн и вёрстка проекта VPNGame 29
После

Дизайн

После основного прототипа остается только добавить цвет и изображения.

Дизайн модальных окон

Хочется показать какие были модальные окна и как я их переработал. Старые окна для входа и регистрации:

Смотря на эти окна, я понимал, что во-первых, у них плохо проработано удобство: нет кнопки просмотра пароля, маленькие кнопки. Во вторых у них был такой вид, которых не хотелось пользоваться.

Игроки любят, когда есть какая-то прикольная графика. Добавить туда пустое пространство, просмотр пароля, удобные кнопки для нажатия и получатся огненные модальные окна.

Дизайн-корзина

Корзина — место для тех прототипов и экранов, которые были в процессе, но не подошли по каким-то причинам.

Экран с призывом

С этим экраном было чуть меньше возни, чем с личным кабинетом. Я никак не мог подобрать интересное изображение, которые бы вызывало желание зайти и поиграть, было динамичным и показывало, что VPNGame — компания, которая ускоряет игру.

Дизайн и вёрстка проекта VPNGame 43

Вариант с орком
В разговоре со своим другом-геймером, он сказал, что это не совсем та ассоциация. Этот персонаж вызывает чувство надежности, крепкости, но не скорости. В целом надежность для VPN-сервиса тоже важна, но я попробовал пойти дальше и поискать персонажей побыстрее.

Дизайн и вёрстка проекта VPNGame 44

Вариант с летящей Трейсер
Трейсер — персонаж Overwatch с ультра-способностями с уклоном в скорость. Тут была задумка летящей Трейсер к логотипу VPNGame. Но посмотрев на неё снова через время понял, что здесь какая-то странная композиция. В ней по прежнему мало динамики и она не клеится.

Дизайн и вёрстка проекта VPNGame 45

Откровенный вариант с Трейсер
Конверсионный вариант для мужчин, шутка 🙂 Здесь я уже отчаявшись в поисках нормального изображения Трейсер решил попробовать такой вариант.

Сам персонаж меня нравится, но из-за его откровенности и отсутствия динамики я отказался от неё.

Дизайн и вёрстка проекта VPNGame 46

Итоговый вариант
В последнем изображении есть динамика, оно не граничит с откровенным и пистолет Трейсер указывает на текст и кнопку.

Вёрстка

Вёрстка сайта — процесс превращения статичного дизайна в код, который можно открыть по адресу и покликать по кнопкам или ввести данные в поля.

В дизайне я создал компоненты, которые и будут использоваться в сайте. Я верстаю сайты не каждый раз создавая стили для нового блока, а компонентно — если элемент используется в сайте более 1 раза, я создаю единые стили, которые при возникновении задачи можно просто скопировать на другой странице — писать заного не нужно.

Сайт без стилей

Первый шаг вёрстки сайта — сделать его скелет, это html-код, который описывает элементы, которые будут на данной странице. Получается что-то такое. Страшно представить такие сайты

А потом добавим чуть-чуть css-волшебства

Дополнительные функции

Кирпичная кладка блоков с вопросами

Изначально блоки с вопросами выглядят в вёрстке как на первом изображении. Это стандартное поведение div в html документе. При раскрытии появляются «дыры» между элементами. Выглядит это странно.

Я подключил библиотеку Masonry и сделал кирпичную кладку. Теперь даже при раскрытии они перемещаются, сохраняя расстояние.

Поиск игр

Видеть список из 100 игр без возможности поиска — это тот еще квест. Я предусмотрел это заранее и прорисовал в дизайне. Я планировал передать это разработчику клиента, но потом решил разработать с помощью JS. Так будет легче для сайта и пользователь быстрее получит результат.

Дизайн и вёрстка проекта VPNGame 58
Поиск игры

Копирование реферальной ссылки

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

Дизайн и вёрстка проекта VPNGame 59

Скрытие всех рефералов

Список рефералов хотелось сделать максимально маленьким. Это вторичная информация, которую вы просмотрите наверное раз в месяц.

По-умолчанию показываются только 3 реферала и время от них.

Дизайн и вёрстка проекта VPNGame 60

Стилизация выбора

Не смотря на развитость веб-технологий, мы все еще не можем нормально стилизовать поля выбора.

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

Мобильная версия

Для мобильной версии разработал панель сверху и мобильное меню.

Меню удалось сверстать таким образом, чтобы оно не дублировалось. То есть в панели и мобильном меню те же самые элементы, что и в версии для компьютеров.

Дизайн и вёрстка проекта VPNGame 63
Панель сверху
Дизайн и вёрстка проекта VPNGame 64
Мобильное меню

Создание видео с тормозами

В дизайне есть блок — «Посмотрите, что умеет VPNGame». Нужно было слева показать игру с тормозами, а справа с плавным геймплеем.

Дизайн и вёрстка проекта VPNGame 65
Секция с двумя видео

Как только сел искать видео, подумал: «Как блин мне сделать тормознтое видео?». Потом дошло — наделать скриншотов и в перерыве между ними сделать видео по 2−3 секунды.

Была проблема как сохранить кадр, попытки сделать скриншот ни к чему не привели. Потом нашёл возможность сохранять стоп-кадр на одном из сайтов. Работала эта функция только в Firefox.

Дизайн и вёрстка проекта VPNGame 66
Обрезка видео и сохранение стоп-кадров

Далее пошёл монтаж. Уже не совсем похоже на вёрстку, да? xD

Дизайн и вёрстка проекта VPNGame 67
Монтаж видео

Итоговое видео с тормозами

Правки

Двигаем Франклина и убираем линии

Дизайн и вёрстка проекта VPNGame 68

Меняем логику переключения полей. Дело в том, что у клиента есть некоторые сложности с проведением оплаты по Paypal. По этой системе можно купить тариф только от 1 месяца, в то время как при оплате другой платёжной системой можно купить тариф на 1 день.

Дизайн и вёрстка проекта VPNGame 69

Подготовка исходников

Перед тем, как отдать код клиенту, его нужно «причесать». Проверить в валидаторе, перепроверить стили, элементы, интерактивность. Еще раз проверить перед сдачей.

При работе можно о чём-то забыть и сделать какие-то ошибки. Валидатор укажет на них. Моя задача — исправить.

Код сайта нужно прокомментировать. Ведь кто-то может дорабатывать этот сайт после меня. Также комментирование помогает программисту, которые будет создавать админ-панель ориентироваться в коде.

Выслал клиенту чеки и исходники.

Дизайн и вёрстка проекта VPNGame 75

Хочешь такой же результат?
Имя
Контакт для связи
Подробнее о проекте

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