Верстка лендинга для компании «Катарсис»

Задача

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

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

Верстка лендинга для компании «Катарсис» 1

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

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

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

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

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

Верстка лендинга для компании «Катарсис» 2

Выбор модели

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

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

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

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

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

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

Верстка лендинга для компании «Катарсис» 3
Процесс заказа продукта

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



Хочешь такой же результат?
Имя
Контакт для связи
Подробнее о проекте

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

Вопрос-ответ

Работаете с NDA?

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

Вы отвечаете за сроки?

Я не планирую впритык. Закладываю время на коммуникацию и детальную проработку. За каждый день просрочки по моей вине вычитаю 3% от моей оплаты. Прописываю это в договоре.

Работаете по договору?

Да, я зарегистрирован как самозанятый. Оплата может быть переводом на карту или по счету. Формат работы с самозанятым практически не отличается от работы с ИП. Составляем договор, пишем техническое задание, в договоре указываю штрафы за срыв сроков.

Какие этапы разработки сайта?

  1. Знакомство с задачей, ЦА и целью сайта.
  2. Заключение договора
  3. Предоплата 50%
  4. Изучение конкурентов, сильных и слабых мест.
  5. Создание структуры сайта
  6. Написание текстов
  7. Создание прототипа
  8. Создание дизайна
  9. Вёрстка сайта
  10. Создание админ. панели сайта
  11. Постоплата 50%
  12. Предоставление доступов и исходных материалов

Сможем ли мы самостоятельно редактировать сайт?

Да, сможете. В процессе разработки сайту будет добавлена возможно редактирования текста, изображений, блоков.

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

Нужно ли платить за сайт ежемесячно?

Разработка сайта выполняется за единовременную оплату. Постоянное отображение в интернете с уникальным адресом требует небольших ежемесячных вложений.

Нужно будет приобрести хостинг и домен. Хостинг — место хранения сайта в интернете. Домен — красивое название сайта. В среднем стоимость домена — 250 рублей в год, хостинга — 1800 рублей в год.

Если вы заказали разработку сайта на Тильде, вместо хостинга нужно будет оплачивать аккаунт в Тильде. Стоимость ежемесячной платы от 500 до 1200 в зависимостей от требования проекта.

Работаете по предоплате?

Размер предоплаты — 30−50%.

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

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

Вы создаете сайты на конструкторе?

Я работаю с конструктором Тильда. Работаю в основном в zero-блоке, он позволяет создать уникальный дизайн для каждого блока. Для большинства лендингов и корпоративных сайтов сайт на конструкторе более экономный и быстрый вариант.

Какие способы оплаты?

Qiwi, Яндекс деньги, Paypal, перевод на карту банка, перевод на юр. лицо, безопасные сделки через сторонние сервисы.

Вы продвигаете сайт после создания?

Я не занимаюсь продвижением. После создания сайта передаю клиента на продвижение профессионалам в области.

За какой срок выполняется создание сайта?

Срок выполнения работ зависит от объема и сложности задачи. В среднем — 14 дней. Крупные порталы могут создаваться 6 месяцев, а одностраничный сайт может быть готов уже спустя 10 дней.