{"id":14287,"url":"\/distributions\/14287\/click?bit=1&hash=1d1b6427c21936742162fc18778388fc58ebf8e17517414e1bfb1d3edd9b94c0","title":"\u0412\u044b\u0440\u0430\u0441\u0442\u0438 \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0434\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0437\u0430 \u0433\u043e\u0434","buttonText":"","imageUuid":""}

Очищенный от мусора сайт клининговой компании

Рассказываю и показываю как происходило создание лендинга компании «Сияние» — одной из работ курса веб-дизайна от Логомашины

«Сияние» — клининговая компания, осуществляющая уборку в Санкт-Петербурге и Ленинградской области. Клиент пожелал простой, минималистичный лендинг, который расскажет про компанию, ознакомит с прайсом, а так-же соберёт заявки на обратный звонок.

Конкуренты

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

Всего было выбрано 6 сайтов конкурентов, которые нужно проанализировать на то, какие обязательны для сайтов клининговых компаний и выявить слабости и ошибки, на которые следует обратить внимание. Как итог, получилось 7 основных блоков имеющихся на большинстве сайтов конкурентов, из которых использовалось 7.

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

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

Клиенты

Анализ клиентов компании не делался, поскольку все это описано в брифе. На его основе было составлено 2 портрета пользователя.

Самое тяжёлое, с чем пришлось столкнуться при составлении портрета пользователя: тяжело выдумать из головы информации о том, какие блоки ему необходимы. Поэтому было решено произвести опрос старшего поколения, возраст которых варьировался от 30 до 45 лет — такой же возраст описан в брифе.

Всего было задано несколько открытых вопросов:

  1. Для чего заказывается клининг?
  2. На что обращается внимание при выборе клининговой компании?
  3. Какие блоки просматриваются в первую очередь?

Из всех перечисленных вопросов удалось выяснить что:

  • Клининг заказывается в основном для того, чтобы разгрузиться от ненужной рутины и освободить время для чего-то более значимого
  • При выборе клининговой компании обращается внимание на: возраст нахождения на рынке, известность, а так-же мнения друзей или родственников, пользовавшихся услугами клининговых сервисов
  • Блоки, просматриваемые в первую очередь: отзывы, услуги
  • Никто из опрошенных не хотел рассчитать стоимость клининга самостоятельно

User flow

User flow или же путь пользователя — последовательность действий, которые совершает пользователь на сайте или в приложении, для достижения какой-либо цели: заказать товар, оформить услугу и др.

В моем случае путь пользователя не понадобился, поскольку делается небольшой лендинг, но для больших проектов это необходимая часть.

Прототипирование

Этап прототипирования проходил не так затруднительно, были некоторые непонятные моменты, но по итогу этот этап занял примерно 2 недели — достаточно, если учесть скорость ответа кураторов.

С самого начала создавался макет шириной 1440px, в процессе выполнения размер был заменен на 1980px, для телефона был выбран макет шириной 360px.

Создание мудборда, «раскрашивание» прототипа

После утверждения прототипа было произведено создание мудборда — небольшой коллаж из фотографий, паттернов, иллюстраций и др., который задаёт определенный стиль для будущего сайта.

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

Далее последовало «раскрашивание» прототипа — создание конечного результата внешнего вида сайта, а именно заполнение его цветом, фотографиями, а так-же корректировка и добавление элементов сайта согласно мудборду.

UI Kit

В самом конце был собрал UI Kit — все цвета, шрифты, как будут выглядеть поля ввода, кнопки и т.д. Показывать здесь все эти элементы было бы довольно муторно, учитывая их количество, поэтому часть из них будет находиться в кейсе на Behance (который по некоторым обстоятельствам всё никак не удается закончить)

Итог

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

Если у вас есть какие то конструктивные замечания по поводу моей работы - прошу в комментарии

0
8 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Эмин Абдуллаев

Здравствуйте!

Начинается лендос вроде чисто, но уже после заголовка начинает "шуметь" из-за жирного текста, очень ярких плашек в "гармошке", а в подвале, когда плашка наложена на фотку, уже слишком шумно, а текст уже не рассмотреть.

Ещё можно подумать, легко ли читать так много текста в «Рассчитаем стоимость…». Быть может, надо переверстать :-)

Ну из мелочей могу посоветовать

1. По возможности не использовать стоковые фотки.
2. Аккуратнее со шрифтом Монтсеррат, у него ужасный знак рубля.
3. Есть где поработать с типографикой и русским языком. Например, вместо «так же» надо «также», плюс висячие предлоги и союзы. Ещё советую обращать внимание на текст и по возможности редактировать его. Например, очень много местоимений, а фразу «Среднее время выполнения клининга: 5-6 часов» можно спокойно заменить на «5-6 часов», поставив перед этим иконку часов.
4. Иконки вверху, ну, явно неудачные. 2 и 3 это обычно «Ссылка» и «Документ», но никак не «Гарантия качества» и «Гарантия качества».

Удачи и новых клёвых проектов!

Ответить
Развернуть ветку
Dr.TheSaw -

Люди старшего поколения, 30-45 лет. Автор статьи в каком классе учится?

Ответить
Развернуть ветку
Mark Nam
Автор

Закончил колледж недавно, 19 лет

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Олег Славнов

Как можно с вами связаться?

Ответить
Развернуть ветку
Пётр Советов

Ну адок

Ответить
Развернуть ветку
Protein Wars

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

Ответить
Развернуть ветку
5 комментариев
Раскрывать всегда