- Обращение
- Общение
- Польза до проекта
- Дизайн до
- Задача
- Функциональный прототип
- Прототип
- Подбор изображений
- Редактирование изображений
- Дизайн
- Дизайн-корзина
- Вёрстка
- Правки
- Подготовка исходников
Обращение
Основатели проекта оставили заявку на фриланс-бирже Фрилансим. Я посмотрел проект, проанализировал сайт и понял, что хочу заняться этим проектом и сделать ребятам классный результат. Я оставил отклик, в котором все подробно расписал.
Осталась одна проблема — не отвечали на заявку. Я подумал, что заказ уже кто-то взял.
Общение
Через неделю эта заявка снова попалась мне на глаза со статусом «Активна». Я зашел на сайт, нашел контакты группу ВКонтакте и написал им напрямую.
В итоге они ответили и я задал пару вопросов о целях, результате проекта. Уточнил поведение пользователей, их сценарии, попутно составляя прототип проекта в голове.
Пара скриншотов переписки
Польза до проекта
Я люблю делать что-то до клиента, еще не заключив договор и не получив оплату. Для VPNGame я сделал первый экран главной страницы и баннер с ценами в фирменном стиле.
Баннер
Первый экран сайта
Дизайн сайта до
[скриншоты «станиц до» удалёны из-за наличия иконок компаний запрещенной в России организации Meta]
Задача
Сделать дизайн 7 страниц сайта и заверстать их для дальнейшей интеграции в систему.
Список страниц:
- Главная
- Каталог игр
- Серверы
- Тарифы
- Контакты
- Условия
- Личный кабинет
Функциональный прототип
В первую очередь нужно составить функциональный прототип — описание каждой секции с перечислением элементов.
Такой прототип помогает быстрее начать делать основной прототип. Не появляется вопросов о том, какие элементы разметить на этом экране.
Прототип
После функционального прототипа начинается прорисовка основного прототипа сайта.
На нём создаём все элементы, но без цветовых акцентов, чтобы не отвлекаться от сути — подачи информации.
[изображения прототипа были удалены из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]
Подбор изображений
Для игрового сайта я решил подобрать некоторых персонажей, которые будут добавлять игрового настроения сайту.
Редактирование изображений
Не все изображения я мог найти в отличном качестве. Некоторые приходилось обрабатывать детально, что-то срезать, что-то дополнять. В общем реставрация фото 🙂
Дизайн
После основного прототипа остается только добавить цвет и изображения.
[изображения дизайна удалёно из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]
Дизайн модальных окон
Хочется показать какие были модальные окна и как я их переработал. Старые окна для входа и регистрации:
Смотря на эти окна, я понимал, что во-первых, у них плохо проработано удобство: нет кнопки просмотра пароля, маленькие кнопки. Во вторых у них был такой вид, которых не хотелось пользоваться.
Игроки любят, когда есть какая-то прикольная графика. Добавить туда пустое пространство, просмотр пароля, удобные кнопки для нажатия и получатся огненные модальные окна.
Дизайн-корзина
Корзина — место для тех прототипов и экранов, которые были в процессе, но не подошли по каким-то причинам.
Экран с призывом
С этим экраном было чуть меньше возни, чем с личным кабинетом. Я никак не мог подобрать интересное изображение, которые бы вызывало желание зайти и поиграть, было динамичным и показывало, что VPNGame — компания, которая ускоряет игру.
Вариант с орком
В разговоре со своим другом-геймером, он сказал, что это не совсем та ассоциация. Этот персонаж вызывает чувство надежности, крепкости, но не скорости. В целом надежность для VPN-сервиса тоже важна, но я попробовал пойти дальше и поискать персонажей побыстрее.
Вариант с летящей Трейсер
Трейсер — персонаж Overwatch с ультра-способностями с уклоном в скорость. Тут была задумка летящей Трейсер к логотипу VPNGame. Но посмотрев на неё снова через время понял, что здесь какая-то странная композиция. В ней по прежнему мало динамики и она не клеится.
Откровенный вариант с Трейсер
Конверсионный вариант для мужчин, шутка 🙂 Здесь я уже отчаявшись в поисках нормального изображения Трейсер решил попробовать такой вариант.
Сам персонаж меня нравится, но из-за его откровенности и отсутствия динамики я отказался от неё.
Итоговый вариант
В последнем изображении есть динамика, оно не граничит с откровенным и пистолет Трейсер указывает на текст и кнопку.
Вёрстка
Вёрстка сайта — процесс превращения статичного дизайна в код, который можно открыть по адресу и покликать по кнопкам или ввести данные в поля.
В дизайне я создал компоненты, которые и будут использоваться в сайте. Я верстаю сайты не каждый раз создавая стили для нового блока, а компонентно — если элемент используется в сайте более 1 раза, я создаю единые стили, которые при возникновении задачи можно просто скопировать на другой странице — писать заного не нужно.
Сайт без стилей
Первый шаг вёрстки сайта — сделать его скелет, это html-код, который описывает элементы, которые будут на данной странице. Получается что-то такое. Страшно представить такие сайты
А потом добавим чуть-чуть css-волшебства
[изображения удалёно из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]
Дополнительные функции
Кирпичная кладка блоков с вопросами
Изначально блоки с вопросами выглядят в вёрстке как на первом изображении. Это стандартное поведение div в html документе. При раскрытии появляются «дыры» между элементами. Выглядит это странно.
Я подключил библиотеку Masonry и сделал кирпичную кладку. Теперь даже при раскрытии они перемещаются, сохраняя расстояние.
Поиск игр
Видеть список из 100 игр без возможности поиска — это тот еще квест. Я предусмотрел это заранее и прорисовал в дизайне. Я планировал передать это разработчику клиента, но потом решил разработать с помощью JS. Так будет легче для сайта и пользователь быстрее получит результат.
Копирование реферальной ссылки
Чтобы привести рефералов, нужно дать им ссылку. На многих сайтах её нужно выделять вручную. Я решил так не делать и дать пользователям дополнительное удобство. Один клик и реферальная ссылка скопирована.
Скрытие всех рефералов
Список рефералов хотелось сделать максимально маленьким. Это вторичная информация, которую вы просмотрите наверное раз в месяц.
По-умолчанию показываются только 3 реферала и время от них.
Стилизация выбора
Не смотря на развитость веб-технологий, мы все еще не можем нормально стилизовать поля выбора.
Я не мог оставить стандартное исполнение. Подключил библиотеку Select2 и добавил стилей для соответствия с дизайном.
Мобильная версия
Для мобильной версии разработал панель сверху и мобильное меню.
Меню удалось сверстать таким образом, чтобы оно не дублировалось. То есть в панели и мобильном меню те же самые элементы, что и в версии для компьютеров.
Создание видео с тормозами
В дизайне есть блок — «Посмотрите, что умеет VPNGame». Нужно было слева показать игру с тормозами, а справа с плавным геймплеем.
Как только сел искать видео, подумал: «Как блин мне сделать тормознтое видео?». Потом дошло — наделать скриншотов и в перерыве между ними сделать видео по 2−3 секунды.
Была проблема как сохранить кадр, попытки сделать скриншот ни к чему не привели. Потом нашёл возможность сохранять стоп-кадр на одном из сайтов. Работала эта функция только в Firefox.
Далее пошёл монтаж. Уже не совсем похоже на вёрстку, да? xD
Итоговое видео с тормозами
Правки
Двигаем Франклина и убираем линии
Меняем логику переключения полей. Дело в том, что у клиента есть некоторые сложности с проведением оплаты по Paypal. По этой системе можно купить тариф только от 1 месяца, в то время как при оплате другой платёжной системой можно купить тариф на 1 день.
Подготовка исходников
Перед тем, как отдать код клиенту, его нужно «причесать». Проверить в валидаторе, перепроверить стили, элементы, интерактивность. Еще раз проверить перед сдачей.
При работе можно о чём-то забыть и сделать какие-то ошибки. Валидатор укажет на них. Моя задача — исправить.
Код сайта нужно прокомментировать. Ведь кто-то может дорабатывать этот сайт после меня. Также комментирование помогает программисту, которые будет создавать админ-панель ориентироваться в коде.
Выслал клиенту чеки и исходники.
[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]