В данном репозитории представлены коммерческие проекты, их подробное описание и этапы реализации.
⚡ rufservis.by - Корпоративный сайт производителя строительных материалов (ModX CMS, JS, PHP, MySQL)
⚡ chimney-pro.by - Корпоративный сайт производителя строительных материалов, ориентированный на физических лиц (OpenCart CMS, JS, PHP)
⚡ teploservis.by - Многостраничный сайт услуг строительной тематики (WordPress CMS, JS, PHP)
⚡ ventpro.by - Посадочная страница производителя товаров для вентиляции (Vanilla JS, HTML, CSS(less), PHP)
⚡ minsk-work.by - Страница для контекстной рекламы для поиска новых сотрудников с формой захвата (Webpack, Vanilla JS, SCSS, PHP)
- Полная переработка дизайна сайта (десктоп + мобильный);
- Переработка структуры сайта;
- Создание 3D моделей продукции, 2D схем деталей и сборочных чертежей, дизайн и отрисовка иконок;
- Создание каталога комплектов деталей с фильтрацией по параметрам и карточками товаров;
- Создание кредитного калькулятора для табличного расчета суммы кредита;
- Создание калькуляторов и приложений по расчету для проектных организаций;
- Разработка и создание бумажного каталога производимой продукции.
- Javascript, HTML, CSS (Less);
- PHP, MySQL, ModX CMS;
- CAD и 3D программы: Autocad, Solidworks, Cinema4D + Corona renderer;
- Графические редакторы: Photoshop, Adobe Illustrator, Adobe Indesign, Figma;
-
Для удобства разработки и контроля актуальной версии рабочие файлы были перемещены в приватный github репозиторий с возможностью подгрузки актуальных данных из панели хостинга.
-
Ввиду плохого UX/UI было решено переработать значительную часть структуры сайта с изменением дизайна.
-
Разработка нового дизайна проводилась в Figma. Большинство иконок, фотографий и картинок дорабатывались в фотошопе.
- При создании визуальной части продукции использовались 3D программы для моделирования и визуализации - Cinema4D + Corona renderer, а также CAD программы для создания схем и точных 3D моделей - Autocad и SolidWorks.
- Для удобной навигации по некоторым продуктам был создан каталог с фильтрацией. Для этого использовалась связка JS-PHP-MySQL. [Ссылка на реализацию]
-
При создании кредитного калькулятора был сформирован запрос к API национального банка Республики Беларусь для привязки текущей ставки рефинансирования к табличным расчетам.
-
Проектным организациям и физическим лицам для удобства расчетов было создано несколько приложений:
➡️ Калькулятор веса и размеров деталей [Ссылка на реализацию]
✅ Данный калькулятор позволил упростить и значительно ускорить работу сторонних проектных организаций и проектировщиков, разрабатывающих документацию при строительстве или реконструкции здания.
- В начале при помощи CAD программы Autocad был рассчитан вес и габаритные размеры каталожных деталей. Созданы 2D схемы с размерами.
- Далее в MySQL создана отдельная база данных с несколькими таблицами, связанными между собой.
- Формирование sql запроса происходит в исполняемом php файле.
- На странице калькулятора отображается информация по выбранной детали, а также возможность добавить ее в таблицу для расчета общего веса конструкции и экспорта таблицы-спецификации в excel файл.
- Калькулятор поддерживает получение проектных данных и изображения, добавление и удаление из таблицы, редактирование количества элементов, их удаление, а также экспорт итоговых данных в excel файл.
➡️ Калькулятор смещения дымохода [Ссылка на реализацию]
✅ Реализация данного калькулятора позволило упростить базовые расчеты, без необходимости использования тяжелых CAD программ. Также позволило физлицам, не знакомым со спецификой производства, самостоятельно просчитать требуемые расстояния.
- Пошаговый калькулятор, который помогает рассчитать смещение деталей в пространстве.
- В качестве базы данных используется созданная для предыдущего калькулятора MySQL база данных.
- Расчетные значения, получаемые из отдельного js файла с формулами преобразуются в конечную для пользователя таблицу.
➡️ Кредитный калькулятор [Ссылка на реализацию]
✅ Данный калькулятор предоставил возможность физлицам самостоятельно рассчитать выплаты по кредиту без необходимости предварительного обращения в банк.
- Для получения ставки рефинансирования использовалась API национального банка Республики Беларусь
- При помощи расчетных формул формируется помесячная таблица выплат, основываясь на входных данных пользователя.
➡️ Калькулятор маркировки СТБ-EN 1856 [Ссылка на реализацию]
✅ Калькулятор помогает проектировщикам и проектным организациям, опираясь на предоставленные теоретические данные, сформировать код для продукции, необходимый для спецификации
- На основе выбранных параметров и их описания пользователь получает сформированных код продукции
- Разработка и верстка бумажного каталога опиралась на теоретические расчеты, 3D рендеры и схемы, произведенные ранее. Верстка производилась в Adobe Indesign с последующей печатью в полиграфии
⭐ chimney-pro.by - Корпоративный сайт производителя строительных материалов, ориентированный на физических лиц (для контекстной рекламы и органического поиска)
- Создание одностраничного сайта с посадочной страницей для контекстной рекламы (в дальнейшем сайт расширился до многостраничного каталога);
- Создание дизайна сайта и проработка структуры;
- Создание отдельных 3D моделей для презентации продукта и увеличения конверсии сайта;
- Создание, настройка и ведение рекламной кампании в Яндекс.Директ и Google Ads;
- Создание и настройка метрик для отслеживания конверсий и качества контекстной рекламы.
- Javascript, HTML, CSS (Less);
- PHP, OpenCart CMS;
- CAD и 3D программы: Autocad, Cinema4D + Corona renderer;
- Графические редакторы: Photoshop, Adobe Illustrator, Figma;
- Контекстная реклама и аналитика: Яндекс.Директ, Google Ads, Яндекс Метрика, Google Search Console.
- Первоначальным этапом было создание посадочной страницы для привлечения клиентов при помощи контекстной рекламы. Для этого:
- Был разработан дизайн и структура страницы в Figma;
- В программе Cinema4D были созданы 3D модели продукции, далее отрисованы рендеры при помощи Corona renderer;
- Созданы иконки в Adobe Illustrator;
- Сформирована верстка сайта (декстоп + мобильная);
- Добавлена интерактивность (Vanilla JS);
- Размещение сайта на приватном github репозитории для удобства обновления актуальной версии из панели хостинга.
- Для привлечения клиентов были созданы рекламные кампании в Яндекс.Директ и Google Ads: проведен анализ спроса, собраны ключевые слова по запросам, созданы рекламные объявления под ключевые слова (в том числе схожие объявления для проведения A/B тестирования).
- Настроены метрики для отслеживания конверсий, CTR и поведения посетителей сайта для улучшения юзабилити и степени вовлеченности клиента.
- Для увеличения доли клиентов из органического поиска сайт из одностраничного был расширен до многостраничного с внедрением OpenCart CMS для удобства обработки заказов и формирования каталога:
- В OpenCart была интегрирована изначальная посадочная страница;
- Полностью переработан дефолтный дизайн на дизайн аналогичный главной странице с интеграцией стилей посадочной страницы;
- Создан каталог деталей с фильтрацией товаров по параметрам;
- Переработана корзина товаров и страница оформления заказов для улучшения UX;
- Созданы информационные страницы с индивидуальным дизайном;
- Доработка админ-панели под специфику организации (добавление и редактирование отдельных полей при добавлении товаров, интеграция на страницы каталога и отдельных товаров).
- Полная переработка структуры и дизайна старого сайта;
- Посадка новой верстки сайта на WordPress CMS;
- Проработка структуры и текстов посадочных страниц для дальнейшего продвижения в органическом поиске;
- Наполнение сайта актуальной информацией;
- Написание нескольких статей для продвижения в органическом поиске согласно собранным ключевым и LSI словам;
- Настройка аналитики сайта - Яндекс.Метрика.
- Javascript, HTML, CSS (Less);
- PHP, WordPress CMS;
- Графические редакторы: Photoshop, Adobe Illustrator, Figma;
- Аналитика сайта: Яндекс Метрика.
- Так как над сайтом более 8 лет никто не работал, органического трафика не было, а дизайн был устаревшим - было принято решение полностью переделать дизайн сайта, структуру и перенести верстку на WordPress CMS для удобства самостоятельных правок клиентом (на сайте преобладает текстовая составляющая).
- В Figma был сформирован индивидуальный дизайн и проработаны посадочные страницы с учетом ключевых и LSI слов.
- Создана верстка и интегрирована в новую WordPress тему.
- Посадочные страницы услуг и статей были проработаны по ключевым и LSI словам для написания релевантных текстов.
- На сайт была добавлена страница фотографий выполненных объектов с предварительной обработкой в Adobe Photoshop.
- Настроены метрики для отслеживания конверсий и удобства юзабилити сайта.
- Разработать дизайн и структуру посадочной страницы для использования в контекстной рекламе;
- Создать 3D рендеры для блока с описанием продукции;
- Создать и настроить контекстную рекламу (сбор ключевых слов, формирование объявлений, карточек, A/B тестирование);
- Настроить аналитику для отслеживания конверсий;
- Vanilla JS, HTML, CSS (Less);
- 3D программы: Solidworks, Cinema4D + Corona renderer;
- Графические редакторы: Photoshop, Adobe Illustrator, Figma;
- Аналитика сайта: Яндекс Метрика.
- Так как сайт является одностраничным - было решено создать на простой связке HTML-CSS-JS-PHP (PHP для обработки заявок).
- Был разработан дизайн в Figma и согласован с заказчиком.
- В SolidWorks были созданы 3D модели продукции, а в Cinema4D + Corona renderer - отрисованы рендеры и далее обработаны в Adobe Photoshop.
- Была сформирована верстка (десктоп + мобильные) и добавлена интерактивность.
- На основе собранных ключевых запросов были созданы рекламные объявления.
- Настроена аналитика сайта для отслеживания конверсий и дальнейшего улучшения юзабилити.
- Разработать простую, но в то же время эффективную страницу для поиска новых сотрудников;
- Подготовить контекстную рекламу для привлечения посетителей;
- Подготовить фотографии, в том числе обработка в фотошопе, добавление водных знаков;
- Настроить аналитику для возможности отслеживания качества работы контектсной рекламы;
- Webpack (SCSS, Babel) - сборка с нуля;
- Vanilla JS, SCSS;
- Adobe Photoshop
- Аналитика + контекст: Яндекс.Метрика + Яндекс.Директ
- Создан дизайн в стиле минимализм, сформирована верстка (декстоп + мобильные).
- Ключевой целью одностраничника - сбор заявок для дальнейшего рассмотрения. Поэтому на странице была подготовлена форма захвата. Для большей вовлеченности и конверсии форма захвата состоит из нескольких этапов. Тем самым минимизируется возможность отпугнуть потенциального работника количеством вопросов.
- Создан и настроен приватный telegram канал для аккумулирования поступающих данных и возможности быстрой обработки.
- Итоговая информация после заполнения формы собирается в объект и отправляется в вышеописанный telegram канал.
- Подготовлены ключевые запросы, созданы рекламные объявления, настроена реклама в соответствии с пожеланиями заказчика.
- Настроена аналитика сайта для возможности дальнейшего отслеживания трат рекламного бюджета.