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

Создание сайта для кредитной организации

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

верстка сайта в светлой и легкой версии

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

Задачи поставленные клиентом

Клиенту требовалось в короткий срок создать лендинг пейдж для ниши кредитования

Так же необходимо было создать логотип для будущей компании

После обсуждений с клиентом, мы пришли к выводу, что сайт должен быть в светлых тонах, с использованием легкой инфографики

Вёрстка должна быть адаптирована под все разрешения

Дополнительно требовалось установить дживочат и поставить яндекс метрику

Последний этап перед созданием сайта — утверждение структуры блоков и предоставление текстово-графического контента исполнителю

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

Создание логотипа

Первым этапом разработки стало создание логотипа

Клиенту на выбор были созданы несколько вариантов. Был выбран следующий логотип:

svg логотип

Разработка лого происходила в программе для векторной графики adobe illustrator

Создание дизайна сайта в PSD макете

Так как сайт был связан с финансами, основную цветовую гамму решено было сделать бело-зеленой

Все иконки были отрисованы в векторе, так же с помощью adobe illustrator

Клиенту был предоставлен макет и внесены нужные правки

верстка сайта

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

После утверждении макета, приступил этап верстки

Абсолютно для всех сайтов, я придерживаюсь критериям, которые позволяют сделать вёрстку качественной и поддерживаемой

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

Вёрстка данного макета во всех разрешениях заняла 2 дня

верстка сайта мобильная версия

Далее следует заключительный этап проекта

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

Сборка происходит с помощью таск-менеджера gulp

Все стили пишутся на языке less, gulp компилирует его в css, далее оптимизирует, производит минификацию и конкатенацию

Похожая процедура по оптимизации происходит и с javascript файлами

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

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

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

  • Дизайн сайта в PSD макете — 1 день
  • Адаптивная вёрстка — 2 дня
  • Правки и оптимизация — 1 день
Разработка всего проекта заняла 5 дней