Меню
Обсудить сайт

Катарсис

Верстка и программирование промосайта

http://dgu-v-arendy.ru

Срок реализации

  • 4 дня

Этапы работы

    • Верстка
    • Программирование

Задача

Сделать адаптивную верстку по картинке от маркетолога компании.

Обычно я верстаю сайты по готовым макетам от дизайнеров, которые были наняты мной или заказчиком, но в этот раз пришлось работать с картинкой:

Катарсис 1

Почему это не дизайн-макет?

Дизайн-макет — не картинка, это собранные в один файл: изображения, шрифты, картинки, текст. Через графический редактор, самый популярный — Adobe Photoshop, я могу посмотреть какого размера текст, двумя кликами вырезать картинку в удобном формате, узнать какой шрифт используется.

В предоставленной картинке не было ничего: ни информации о шрифтах, о размерах, текста, отдельных изображениях. Просто склеенная картинка. Это усложняет работу и увеличивает время реализации проекта. Мне также нужно было додумывать внешний вид 5 блоков: условия аренды, преимущества, мы предлагаем, контактная форма, подвал.

Мною было принято решение об увеличении стоимости на 15% от начальной стоимости проекта.

Мне удалось неплохо преобразить изначальный макет и в итоге получился легкий лендинг. Здесь сыграл роль опыт из других проектов, когда работаешь с хорошим дизайном, вкус и привычки вырабатываются автоматически. Несмотря на предоставленный макет, мы добились отличного результата в короткие сроки:

Катарсис 2

Выбор модели

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

Я представил что являюсь клиентом: нажимаю «заказать"… ничего не происходит, жму еще раз, опять ничего, *ругать про программистов*, набираю номер и говорю менеджеру что сайт сломан.

Так не пойдет. Я решил сделать плавное перемещение к форме, чтобы пользователь понимал, что все работает, что разработчик все предусмотрел.

При отправке заявки с сайта, администратору сайта приходило письмо с данными пользователя и если он кликал по кнопке «заказать» у какого-то товара, эта информация передавалась на сайт.

Это удобно для менеджеров — они смогут подготовить наиболее полную информацию о той модели, которая интересует посетителя.

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

Катарсис 3
Процесс заказа продукта

Единственное, к чему можно придраться, это то что «заказать» работает только для одного товара. Мне не сказали по этому поводу ничего. Заказчика все устроило и я подумал о том что товары это не такие и дешевые, чтобы набирать целую корзину и оплачивать с карты.

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

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



Поделиться
Отправить

Комментарии