Разработка дизайна сайта услуг по ремонту замков

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

В результате получилось 15 типовых страниц.

Макеты дизайна сайта по ремонту и установке замков

Макет рассмотрим один - это главная страница, про которую я писал в кейсе "Разработка прототипа сайта услуг по ремонту замков".

Дизайн главной страницы

Рассмотрим более подробно каждый элемент главное страницы

Рисунок 1 - Дизайн шапки и первого экрана

Из рисунка 1:

1) ГЕО. Сделано с иконкой и подчеркиванием, при нажатии у нас появляется окно с выбором города, но так как привязка идет только к Москве и Московской области услуг, то города в писке только к данному региону, рисунок 2

Рисунок 2 - ГЕО Москва и Московская область

2) Ссылки на страницы статичные с информацией для клиентов
3) Адрес компании с иконкой
4) Логотип компании, который в проекте тоже разрабатывался под название компании, рисунок 3

Рисунок 3 - Логотип компании

5) Бургер - выпадающее меню основных направлений компании по услугам, рисунок 4. При наведении открывается список услуг, а при наведении на услугу подсветка пункта меню

Рисунок 4 - Меню услуг

6) Кнопка “Калькулятор цены”, на нее сделан акцент, для того, чтобы клиенты нажимали и переходили на калькулятор, чтобы могли точно рассчитать стоимость услуги и оставить заявку.
7) Кнопка “Оставить заявку”, тоже имеет акцент, при нажатии будет появляться всплывающее окно с формой заявки, рисунок 5

Рисунок 5 - Форма заявки

8) Режим работы компании с иконкой
9) Ссылка “Перезвоните мне” с иконкой - работает также, как кнопка “Оставить заявку” - почему 2 кнопки похожие - это необходимо для сео продвижения, так как разные слова используются
10) Телефон компании - при нажатии происходит набор номера
11) Ссылка на вайбер - при нажатии переход на чат в вайбере
12) Ссылка на вотсап - при нажатии происходит переход на чат в вотсапе
13) Линия основных услуг, состоит из иконки и названия услуги, при наведении подсвечивается, при нажатии переход на услугу
14) Н1
15) Н2
16) УТП услуги
17) Форма заявки на главном экране
18) Поле ввода телефона с кнопкой “Вызвать мастера”
19) Картинка двери
20) Ссылка на услугу

Рисунок 6 - Второй экран дизайна

Из рисунка 6:

1) Н2
2) Таблица. В нее можно добавлять ссылки и они при наведении будут подсвечиваться активным цветом
3) Цена услуги
4) Н3
5) Текст описание услуги по Н1
6) Иконка услуги
7) Название услуги со стоимостью, при нажатии можно будет перейти на страницу услуги, при наведении на услугу появляется небольшое описание, рисунок 7

Рисунок 7 - Описание услуги

8) Бесконечный слайдер - позволяет добавлять множество услуг, для поисковой оптимизации
9) Кнопка “Посмотреть все услуги”, при нажатии переводит на страницу с прайсом

Рисунок 8 - Этапы работы и Калькулятор

Из рисунка 8:

1) Иконка этапа работы
2) Текст этапа работы
3) Кликабельный телефон для быстрой заявки
4) Этап 3 - название редактируется под страницу
5) Н2
6) Первый столбик в калькуляторе - это выбор услуги
7) Иконка и название услуги, при выборе становится активной и выделяется цветом, рисунок 9

Рисунок 9 - Выбранная услуга в калькуляторе

8) Второй этап калькулятора - это выбор типа замка
9) Выбор происходит через чекбокс
10) Выпадающий список брендов замков

11) Третий этап калькулятора - выбор типа двери
12) Тип выбирается 1 из списка, за счет радиобаттона
13) Четвертый шаг калькулятора - это выбор дополнительных опций
14) Выбор доп. через чекбокс
15) Поле ввода адреса, куда необходимо будет выехать
16) Итоговое поля расчета стоимости услуги
17) Кнопка “Рассчитать стоимость”, при нажатии происходит расчет на основании данных калькулятора
18) Картинка
19) Описание работы калькулятора
20) Кнопка “Вызвать мастера”, после расчета можно нажать и вызвать мастера, заполнив форму заявки

Рисунок 11 - ГЕО, бренды замков и типы замков

Из рисунка 11:

1) Н2
2) Не активный элемент
3) Активный элемент после нажатия
4) Активный элемент
5) Неактивный элемент
6) Бесконечный слайдер
7) Иконка услуги
8) Название услуги и стоимость
9) Кнопка “Посмотреть все услуги в ВАО”

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

Рисунок 12 - Наши работы и отзывы

Из рисунка 12:

1) Н2
2) Картинка выполненной работы
3) Бесконечный слайдер работ
4) Название работы
5) Н2
6) Рейтинг
7) Фото клиента стандартная
8) ФИО автора
9) Текст отзыва
10) Бесконечный слайдер отзывов
11) Кнопка “Оставить отзыв”, при нажатии открывается окно для ввода отзыва, рисунок 13

Рисунок 13 - Форма отзыва

Из рисунка 13:

1) Н3
2) Текст
3) Поле ввода имени
4) Поле ввода телефона
5) Поле для добавление ссылки на профиль в вк
6) Поле выбора оценки работы - выпадающий список от 1 до 5
7) Поле выбора вида услуги - выпадающий список по основным услугам
8) Поле ввода ФИО мастера
9) Поле написание самого отзыва
10) Кнопка “Отправить”

Рисунок 14 - Часто задаваемые вопросы и текст о компании

Из рисунка 14:

1) Направление вопроса
2) Не активный под вопрос
3) Активный - открытый ответ на вопрос
4) Ответ на вопрос
5) Н2
6) Текст о компании

Рисунок 15 - Подвал сайта

1) Логотип
2) Адрес
3) Время работы
4) Основной список услуг
5) Основной список страниц с информацией для клиента
6) Телефон кликабельный
7) Ссылка на форму заявки
8) Поста кликабельная
9) Ссылки на мессенджеры
10) Кнопка на калькулятор

Мы рассмотрели с вами пример дизайна главной страницы проекта “Услуги по ремонту и замене замков”.

Все элементы страницы редактируемые, что дает возможность грамотно и точно оптимизировать страницу под поисковые системы.

Дизайн сайта услуг по ремонту замков получился

1) Современный
2) Структурированный
3) Легкий
4) Удобный для клиентов

Сайт на данный момент полностью готов и сверстан, на нем можно посмотреть остальные страницы https://masters-key.ru/

P.S.

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