Дизайн и вёрстка многостраничного сайта

Оглавление

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

Обращение

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

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

Общение

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

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

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

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

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

Баннер

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

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

Задача

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

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

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

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

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

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

Прототип

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

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

[изображения удалёны из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]

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

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

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

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

Дизайн

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

[изображения удалёны из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]

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

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

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

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

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

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

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

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

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

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

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

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

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

Вёрстка

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

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

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

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

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

[изображения удалёны из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]

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

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

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

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

Поиск игр

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Правки

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

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

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

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

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

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