Лендинг для компании по онлайн микрокредитованию - портфолио по верстке и дизайну

Лендинг для компании по онлайн микрокредитованию

Создание сайта для компании по выдаче микрозаймов

верстка сайта в деловом стиле

Ссылка на рабочий сайт:

Начало работы

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

Этапы разработки

Создание дизайна

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

Адаптивность

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

Адаптивная вёрстка сайта

Когда все макеты были подтверждены заказчиком, наступил этап вёрстки. Я всегда придерживаюсь определенному списку правил, который помогает сайту быть технически правильным и уже со старта иметь начальную СЕО оптимизацию. Список моих критерий:
  • Адаптивная вёрстка для всех разрешений
  • Полностью валидный код, без ошибок (проверяется — валидатором)
  • Быстрая загрузка сайта, 80+ баллов (проверяется — инструментом гугла)
  • Кроссбраузерная вёрстка для всех современных браузеров
  • Максимальное использование векторной графики и спрайтов
  • Техническая оптимизация сайта для SEO
  • Использования методологии БЭМ
  • Автоматическая сборка проекта (при помощи Gulp)
Далее следует заключительный этап проекта

Сборка и оптимизация сайта

Сборка происходит с помощью таск-менеджера gulp Все стили пишутся на языке less, gulp компилирует его в css, далее оптимизирует, производит минификацию и конкатенацию Похожая процедура по оптимизации происходит и с javascript файлами Еще несколько этапов оптимизации: сжатие картинок, минификация векторной графики, создание svg-спрайтов, префиксы для кроссбраузерности, добавление нужных css/js библиотек…

Сроки выполнения работы

На сроки сильно повлияло наличие прототипа сайта у заказчика, что позволило сразу представить будущий сайт
  • Дизайн сайта в PSD макете — 1 день
  • Адаптивная вёрстка — 3 дня
  • Правки и оптимизация — 2 день
Разработка всего проекта заняла 6 дней