Создание лендинга для аренды кладовок
Задача
Создать сайт для компании, сдающей в аренду ячейки для временного хранения вещей.
Исходные данные
У заказчика была листовка, которая должна быть визуальной основой для сайта. Из нее был взят логотип, слоган, «картонный» фон, цветовая гамма.
Работа
Исследование
Изучила сайт единственного конкурента, отметила его плюсы и моменты, которые нужно сделать лучше. Помимо этого проанализировала сайты похожих компаний из других городов. Провела исследование целевой аудитории.
Проектирование
Изучила, по каким запросам потенциальные клиенты ищут варианты мест для временного хранения вещей. На основе анализа предложила клиенту уйти от позиционирования кладовки в качестве мини-склада, т.к. использование данной формулировку затруднит поисковую оптимизацию сайта.
Разработала вайрфрейм (черно-белый прототип сайта). Написала все тексты.
Разработала вайрфрейм (черно-белый прототип сайта). Написала все тексты.
Дизайн
Отрисовала в Фигме главную страницу. Чтобы сделать ее интересней, придумала анимации, включая интерактивное взаимодействие с сайтом (возможность открыть двери кладовок, чтобы заглянуть, что в них хранят клиенты). На скорую руку сверстала их на Тильде, чтобы согласовать с заказчиком.
Вот этот блок выглядит в финальной версии. Кликнете на картинку, чтобы перейти на сайт и посмотреть, как это работает.
Вот этот блок выглядит в финальной версии. Кликнете на картинку, чтобы перейти на сайт и посмотреть, как это работает.
Подобные мелочи делают взаимодействие с сайтом интереснее, тем самым увеличивая время, проведенное на сайте. А поисковики воспринимают это как положительный фактор и улучшают место в поисковой выдаче.
Т.к. на момент начала работы над сайтом бизнес только открывался, фотографий было мало. Во время работы над дизайном, стало ясно, какие фотографии нужны, и я отправила заказчику техническое задание.
Когда были готовы фотографии, доделала дизайн главной страницы в Figma и создала из него кликабельный прототип.
Тестирование
Протестировала полученный прототип на потенциальных клиентах. Во время тестирования сайта выяснилось, что:
- все, как обычно хотят на первом экране одну большую красную кнопку, которая решит все их проблемы. И это оказался тот проект, где это возможно сделать: на главный экран я добавила стоимость аренды и адрес, где расположены кладовки.
- моя гипотеза о том, что тремя самыми главными вещами являются цена, безопасность и расположение не совсем верна. Безопасность подразумевалась по умолчанию, а более важным оказались размеры кладовки. Соответственно в меню я заменила «безопасность» на «размеры», чтобы пользователи могли сразу перейти к нужному разделу.
Было
Стало
Адаптация
После согласования финального дизайна заказчиком я адаптировала сайт в Фигме под разные устройства (планшет, смартфон).
Верстка
Сверстала все на Tilda. Практически вся главная страница сделана не на стандартных блоках, а на Zero Block, позволяющий реализовать практически любой дизайн.
Но стандартные блоки тоже использованы. Например, меню. Но для того, чтобы оно соответствовало дизайну, его пришлось дорабатывать с помощью кода.
Чтобы сделать сайт более "живым" настроила базовую анимацию. Т.к. вещи в кладовку складывают сверху вниз, то для элементов сайта была выбрано появление сверху вниз, т.е. они как коробки, которые складывают в кладовку.
Ну и стандартные вещи: делала базовые SEO-настройки и создала технические страницы (Политика в отношении обработки персональных данных, согласие на обработку персональных данные, шаблон договора аренды, страница ошибки 404, на которую попадает пользователь в случае ошибки в адресе страницы сайта).
Но стандартные блоки тоже использованы. Например, меню. Но для того, чтобы оно соответствовало дизайну, его пришлось дорабатывать с помощью кода.
Чтобы сделать сайт более "живым" настроила базовую анимацию. Т.к. вещи в кладовку складывают сверху вниз, то для элементов сайта была выбрано появление сверху вниз, т.е. они как коробки, которые складывают в кладовку.
Ну и стандартные вещи: делала базовые SEO-настройки и создала технические страницы (Политика в отношении обработки персональных данных, согласие на обработку персональных данные, шаблон договора аренды, страница ошибки 404, на которую попадает пользователь в случае ошибки в адресе страницы сайта).
Трудности
Частой проблемой дизайнеров является полное отсутствие у клиента контента, в данном случае проблема заключалась в большом количестве текстового контента, стиль которого был далек от информационного (являющегося оптимальным для сайтов) в силу того, что клиентка пишет книги и для писателей как раз характерен подобный стиль. Мне помог большой опыт создания и редактирования локальных нормативных документов, полученный на прежних местах работы.
На этапе верстки у клиентки возникли новые идеи, которые она хотела внести на сайт, но которые не были предусмотрены в техническом задании. Договорились, что я внесу только то, что не требует доработки дизайна (например, изменить цены, добавить тултип — всплывающую подсказку). А то, что требовало разработки новых элементов, оставили на доработку по новому договору.
На этапе верстки у клиентки возникли новые идеи, которые она хотела внести на сайт, но которые не были предусмотрены в техническом задании. Договорились, что я внесу только то, что не требует доработки дизайна (например, изменить цены, добавить тултип — всплывающую подсказку). А то, что требовало разработки новых элементов, оставили на доработку по новому договору.
Отзыв клиента
