Найти в Дзене

Создание сайта для сервисного центра по ремонту компьютеров и оргтехники "МастерКом"

Оглавление

Приветствую вас, друзья! Хочу представить вашему вниманию мой новый сайт для сервисного центра по ремонту оргтехники и компьютеров "МастерКом". Посмотреть сайт можно здесь https://masterkom74.ru/

Полностью адаптивный сайт под любое устройство
Полностью адаптивный сайт под любое устройство

1. Дизайн для сайта.

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

Вариант оформления слайдера 1
Вариант оформления слайдера 1

Вариант оформления слайдера 2
Вариант оформления слайдера 2

Вариант оформления слайдера 3
Вариант оформления слайдера 3

Абсолютно на всех своих сайтах я использую авторскую инфографику. Все иконки я рисую отдельно. Обычно использую для этого Corel DRAW и Adobe Photoshop. Особо важные блоки я выделяю с помощью анимации и теневой подцветки.

авторская инфографика в цветах бренда "МастерКом"
авторская инфографика в цветах бренда "МастерКом"

Для основных разделов предоставляемых услуг я люблю использовать 3D флипбоксы, которые крутятся слева направо, напоминая при этом эффект открытия и закрытия книги. Очень необычная подача разделов каталога специально для привлечения внимания пользователей.

3D флипбоксы для основных разделов каталога услуг
3D флипбоксы для основных разделов каталога услуг

Логотип компании "МастерКом" должен модернизироваться и трансформироваться в начертании и визуализации в зависимости от его назначения т.е. на сайте один вариант в одной программе, возможно с применением спецэффектов, для полиграфии другой вариант, возможно более упрощенный. При создании бренда, я ориентируюсь на комплексный подход - это техническое исполнение, визуальное восприятие, история бренда, четко выстроенная логика подачи.

По итогу мы получаем основной вариант - это комбинированный логотип с текстом и изображением (символом), и упрощенный вариант - отдельное изображение (символ) кнопки, которую мы можем в последствии перекрашивать в разные цвета, соответствующие основным разделам каталога.

варианты логотипа "мастерком"
варианты логотипа "мастерком"

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

вкладки для 5 основных разделов каталога - оргтехника
вкладки для 5 основных разделов каталога - оргтехника
вкладки для 5 основных разделов каталога - телефоны
вкладки для 5 основных разделов каталога - телефоны

Также на сайте используется инфографика с основными этапами проводимых работ мастеров сервисного центра, чтобы заказчику был наглядно виден и понятен весь процесс. Для каждой категории техники были написаны свои этапы работы и подобраны подходящие изображения. Чтобы не перегружать сайт, был добавлен скролл.

инфографика для проводимых работ
инфографика для проводимых работ
скролл для инфографики этапов работы
скролл для инфографики этапов работы

2. Разработка и программирование.

Теперь расскажу об основных фишках и структуре данного сайта.

Когда мы переключаемся на один из разделов каталога, нашему вниманию будут представлены 2 колонки с информационными блоками. В левом блоке мы видим список обслуживаемых брендов, основные модели техники и возможные неисправности и проблемы, с которыми сталкивается клиент.

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

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

Раздел бренды ноутбуков
Раздел бренды ноутбуков

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

Раздел неисправности
Раздел неисправности

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

Также на сайте были проведены работы по защите от спама. Поставлены самые новые ловушки для ботов. Поэтому спама на этом сайте нет.

Сайт включает в себя 143 страницы и 7 опубликованных статей для блога.

3. Реклама и продвижение.

Данный сайт полностью адаптирован для поисковиков Яндекс и Google. Настроено базовое SEO (карта сайта, метатеги, заголовки, скорость, адаптивная верстка под любые устройства). Поставлен счетчик метрики. Установлен сертификат безопасности SSL. Настроена корпоративная электронная почта.

Разработан дизайн для аккаунта ВКонтакте (баннеры, аватар, обложка) и группы Вконтакте. Разработан дизайн подарочных сертификатов. Открыт канал Яндекс Дзен. Написаны авторские статьи. Также открыт телеграмм-канал и открыт аккаунт в Тик-Ток.

обложка для сообщества ВКонтакте
обложка для сообщества ВКонтакте

дизайн сертификата
дизайн сертификата

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

Мой личный сайт-портфолио, где еще больше работ https://designshaman.ru/

Всем хорошего вечера ;*