Кейс: верстка интернет-магазина «Ремит»

Share
22.11.2017
Содержание

Вступление

Проект: Интернет-магазин «Ремит»

Над проектом работали: 1 верстальщик

Объем работ: 14 страниц для верстки по готовым макетам

Срок выполнения: 20 рабочих дней

Общие положения

Ко мне обратились с просьбой верстки интернет -магазин для завода «Ремит». Заказчик поставил задачу сверстать страницы по готовым макетам, с адаптивной версткой (Минимальное разрешение 320, максимальное — согласно макетам).

Были предоставлены готовые дизайны под расширения:

• 1366

• 768

• 320

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

Кейс: верстка интернет-магазина «Ремит» • Создание и продвижение сайтов

Этапы выполнения

1. Для начала структурируются задачи проекта, для этого используется Asana. В них перечисляются: дизайн заказчика с комментариями, вопросы по верстке и срокам реализации, скидываем ссылку на битбакет. Выглядит это примерно следующим образом:

Кейс: верстка интернет-магазина «Ремит» • Создание и продвижение сайтов

2. Создается документ где заказчик отвечает на вопросы по реализации проекта: какая анимация должна присутствовать на сайте, как работает определенный блок, его функционал и прочее. Данную информацию очень важно получить в самом начале проекта.

3. Приступаю к выполнению: По ходу выполнения проекта заливаю на сервер и битбакет, анализирую что готово и насколько движусь по намеченному плану.

4. Промежуточные результаты показываются заказчику раз в 2 дня.

Подробности проекта

В проекте было 14 страниц: Главная, каталоги, предложения, корзина, рецепты и пр.

На сайте решили применять несложную анимацию. Большинство из осуществленных анимаций происходит при взаимодействии с выбранным элементом.

Кейс: верстка интернет-магазина «Ремит» • Создание и продвижение сайтов

На страницах товаров и рецептов использовались слайдеры и stiky панельки созданные с помощью библиотеки Jquery.

Кейс: верстка интернет-магазина «Ремит» • Создание и продвижение сайтов

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

Кейс: верстка интернет-магазина «Ремит» • Создание и продвижение сайтов

Сама структура у проекта довольно не простая. Ее реализовали колонками на CSS, с помощью свойства column, не разбивая при этом на отдельные дивы.

Кейс: верстка интернет-магазина «Ремит» • Создание и продвижение сайтов

Итог

За короткое время получилось качественно реализовать проект. Макет соответствует pixel perfect, корректно отображается во всех браузерах и стандартных устройствах. Благодаря наработанной за 6 лет системе оптимизации скорости написания кода и опыту в ведении подобных проектов его реализация заняла всего 20 дней: от начала переговоров с заказчиков до полной сдачи.

Хотите также? Оставьте заявку на профессиональную верстку сайта по макету.

До связи,

Александр Рыбка

Подпишитесь на блог

В блоге

  • CSS
  • Pixel Perfect
  • UI\UX
  • Адаптивная верстка
  • Анимация
  • Бизнес
  • Верстка
  • Достижения
  • Идеи
  • Интернет-магазин
  • Кейс
  • Лендинг
  • Обзор
  • Написание кода
  • Примеры работ
  • Разработка
  • Разработка сайта
  • Результат
  • Сайт
  • Стоимость
  • Тестирование
  • Успех
  • Чек лист