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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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