Разработка сайта для компании по ребрендингу АЗС Алюмтек АЗС - Веб-студия ARIAL | Создание сайтов под ключ

Разработка сайтов

SEO Продвижение

Разработка сайта для компании по ребрендингу АЗС

Когда бизнес меняет курс, его сайт должен ехать в одном направлении. Для компании Алюмтек, проходящей масштабный ребрендинг, мы создали новый сайт от дизайна и верстки до интеграции в CMS. Чистый код, свежий дизайн и структура, работающая на узнаваемость. Смотрите, как мы превратили корпоративные гайдлайны в живой и удобный инструмент коммуникации с клиентом.

Видеопрезентация процесса создания сайта

01 Технические задачи

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

02 Общая информация

Категория - корпоративный сайт
Тематика - строительств и ребрейдинг АЗС
Сроки разработки - 32 дня
Порталы и информационные сайты.
Сайт - alumtek.ru

Рабочий процесс

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

01

анализ ниши и прототипирование дизайна главной страницы сайта

02

прототипирование дизайна внутренних страниц сайта

03

отрисовка в figma цветного дизайна главной страницы сайта

04

отрисовка в figma цветного дизайна мобильной и планшет версии сайта

05

отрисовка в figma цветного дизайна внутренних страниц сайта

06

верстка сайта (html/css/javascript)

07

интеграция верстки на cms, наполнение контентом

08

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

01

анализ ниши и прототипирование дизайна главной страницы сайта

02

прототипирование дизайна внутренних страниц сайта

03

отрисовка в figma цветного дизайна главной страницы сайта

04

отрисовка в figma цветного дизайна мобильной и планшет версии сайта

08

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

07

интеграция верстки на cms, наполнение контентом

06

верстка сайта (html/css/javascript)

05

отрисовка в figma цветного дизайна внутренних страниц сайта

Видеообзоры каждого этапа разработки

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

1 этап - прототип главной страницы сайта

2 этап - прототип внутренних страниц сайта

3 этап - отрисовка дизайна главной страницы

4 этап - отрисовка дизайна desktop внутренних 11 страниц

5 этап - отрисовка дизайна tablet + mobile главной страницы

6 этап - вёрстка сайта с дизайна figma

7 этап - готовность сайта и загрузка на боевой домен

Этапы работ

1 этап - прототипирование главной страницы

Видеообзор этапа

Первый этап разработки сайта — прототипирование главной страницы. Это фундамент проекта. Сначала понимаем, как сайт решит задачи, потом рисуем дизайн.

Провели анализ аудитории и конкурентов, выделив ключевые смыслы. На основе данных создали черно-белую схему (wireframe). Главная задача — продумать логику взаимодействия пользователя (UX). Мы определили иерархию блоков, навигацию и призывы к действию (CTA). Посетитель должен найти информацию за 3 секунды и понять, куда кликнуть.

Отдельное внимание уделили мобильной версии — адаптивность закладывается сейчас. Каждый элемент проверен на удобство. Прототип согласовали с заказчиком. Это сэкономило бюджет и время на правках в дизайне. Теперь у нас есть четкий план. Грамотное прототипирование гарантирует, что сайт станет конверсионным инструментом.

2 этап — прототипирование внутренних страниц

Видеообзор этапа

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

Главная задача — сохранить единство навигации и логики. Пользователь не должен теряться при переходе между разделами. Для каталога спроектировали удобные фильтры и поиск. В услугах сделали акцент на доказательствах экспертности и триггерах доверия. Формы обратной связи разместили в доступных местах.

Особое внимание уделили хлебным крошкам и перелинковке — это важно для SEO и удобства. Адаптивность проверили на всех типах устройств. Каждый экран прототипа согласовали с заказчиком. Такой подход исключает хаотичные правки на этапе визуального дизайна. Это экономит бюджет и гарантирует эффективную работу каждой страницы на бизнес-цели.

ui-kit Сетка дизайна обеспечивает верное размещение блоков и элементов сайта с сохранением одинаковых отступов на всех версиях отображения от desktop версии до mobile версии. Цветовая палитра и шрифт позволяет соответствовать цветовой концепции компании, брендбука и официального стиля компании.

desktop сетка проекта

tablet сетка проекта

mobile сетка проекта

цветовые решения

#989898

#FF1010

#F9ACAC

#4A54DA

#9CC5E9

шрифтовые решения

Аа

Roboto ExtraLight Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

Аа

Roboto Light Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

Аа

Roboto Regular Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

Аа

Roboto Medium Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

H1 Заголовок

H2 Заголовок

H3 Заголовок

Текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа Ссылка в тексте Ссылка в тексте HOVER Ссылка в тексте PRESSED

3 этап - отрисовка в figma цветного дизайна главной страницы

Видеообзор этапа

Третий этап — отрисовка цветного дизайна главной страницы в Figma. Прототип готов, теперь наполняем его визуальной жизнью. На этом этапе сайт обретает стиль, эмоции и узнаваемость бренда.

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

Важно сохранить баланс между эстетикой и функциональностью. Красиво — не значит удобно. Поэтому все визуальные решения проверяем на соответствие UX-логике из прототипа. Акцентные цвета направляют внимание пользователя к целевым действиям.

Создали несколько вариантов первого экрана для тестирования. Заказчик выбрал оптимальное решение. Все слои в Figma организованы по стандартам — это упростит передачу макета разработчикам.

Дизайн-система готова: прописали стили текста, цветовые переменные, состояния элементов. Это обеспечит единообразие на всех страницах. Адаптивные версии отрисовали для планшетов и смартфонов.

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

4 этап - отрисовка мобильной и планшетной версии в figma

mobile

tablet

Видеообзор этапа

Четвёртый этап — адаптация дизайна под мобильные и планшеты в Figma. Более 60% трафика идёт с устройств, поэтому удобство на маленьких экранах критично. Перенесли все элементы главной страницы, сохранив логику и стиль. Переработали навигацию — сделали бургер-меню. Кнопки увеличили для удобного нажатия пальцем. Шрифты адаптировали для читаемости. Проверили все экраны на разных разрешениях.

5 этап - отрисовка цветного дизайна всех страниц в Figma

Видеообзор этапа

Главная страница утверждена, теперь масштабируем стиль на весь сайт. Это самый объёмный этап, где формируется единое визуальное пространство проекта.

Проработали все ключевые разделы: каталог услуг, карточки АЗС, страницы «О компании» и «Контакты» и форму обратной связи. Для каждой страницы сохранили единую дизайн-систему — цвета, шрифты, отступы, стили кнопок. Это обеспечивает целостное восприятие бренда.

Особое внимание уделили уникальным элементам. Для каталога сделали удобные карточки АЗС с ховер-эффектами. На страницах услуг добавили блоки с преимуществами и отзывами.

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

Как из прототипа делается дизайн

строительство азс

6 этап - вёрстка сайта

Видеообзор этапа

Шестой этап — вёрстка сайта. Переносим макеты из Figma в код (HTML5, CSS3, JS). Главная задача — pixel-perfect соответствие дизайну. Сайт одинаков во всех браузерах.

Настроили адаптивность. Контент подстраивается под любой экран. Добавили микроанимации. Все формы валидируются.

Оптимизировали скорость загрузки. Сжали изображения, код. Важно для SEO. Провели тестирование во всех браузерах.

Код чистый, структурированный. Это упростит поддержку. Сайт готов к натяжке на CMS. Вёрстка завершена успешно. Функции работают корректно. Переходим к интеграции системы управления.

7 этап - натяжка на cms и запись видео урока

Седьмой этап — это натяжка на CMS и видеоурок. Интегрировали верстку в систему управления контентом. Заказчик сможет самостоятельно редактировать тексты и фото. Настроили админ-панель для управления. Проверили работу форм. Всё функционирует корректно. Чтобы клиент не столкнулся со сложностями, записали видеоурок. Показали вход в админку и работу с материалами. Это исключает техподдержку по мелким вопросам. Сайт готов к наполнению. Владелец получает контроль над ресурсом без программирования. Все функции уже протестированы. Проект полностью готов к запуску.

Другие проекты

Aluma Boats

НЛСИ

Полипласт

МИК