Процесс создания сайта электромонтажной компании

После интервью и анализа информации + очевидного этапа прототипирования, я сделал несколько вариантов дизайна — в первую очередь чтобы определить лучший из них. Задача была не из лёгких, т.к. заказчик хотел сайт в "брутальном стиле", исключительно в чёрно‑белых цветах и с жёсткой геометрией, чтобы это не значило…

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

Ниже — коротко что было сделано, кроме дизайна:

Сайт адаптирован под все устройства отображения:

начиная от самых популярных разрешений для десктопов, таких как 1920×1080 px (Full HD) и 1366×768 px,

заканчивая полной адаптацией под мобильные устройства — два планшетных разрешения (горизонтальный 960 px и вертикальный 640 px) + два мобильных разрешения (480 и 360 px соответственно)

Для шапки сайта я использовал 5 стандартных брейкпоинтов в двух системах координат (GRID и WINDOW контейнерах)

По мере уменьшения экрана — менее важные элементы меню скрываются

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

Чтобы определить наилучший вариант отображения, каждый Zero Block на сайте я сверстал разными способами,

а для каждого стандартного блока из библиотеки Тильды — прописал стили, которых нет в настройках, чтобы они соответствовать дизайну уникальных блоков

Коротко о важных блоках и функциях:

• T886 — уведомление о куки (требование закона о персональных данных)

• BF905A — виджет мессенджеров (все способы связи с выбором региона)

• ME403 — скрытое «гамбургер»-меню (для мобильной версии)

• GL15 — галерея с комбинированными изображениями + настроенные стандартные текстовые блоки (удобное редактирование контента заказчиком без участия дизайнера)

• T213 — alias‑блоки (вставка контента с других страниц, напр. контакты)

• SEO — базовые настройки заголовков, описаний и ключевых слов

• HEADERS — разметка заголовков мета‑тегами

• error‑page — страница ошибки с анимацией и ссылкой на главную

• all‑pages — уникальные ЧПУ‑адреса и бейджики для соцсетей (улучшение SEO) у каждой страницы сайта

Дизайн логотипа, визиток и фирменной одежды — строгий, в меру "брутальный", что соответствует пожеланиям, а главное —позиционированию и духу компании

Figma

Tilda

CSS code

Alice AI

Сайт реализован «под ключ» ~ за 2 месяца в 2025 году, работа прошла в 3 этапа:

Александр — вдумчивый, заинтересованный исполнитель.

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

Антон Бусень, г. Орёл
руководитель компании