Дизайн и редизайн сайтов на CMS MiWix

Дизайн сайта: когда пора его обновить

Я работаю веб-дизайнером больше 20 лет и за это время убедился: сайт нельзя сделать один раз и забыть. Через 2–3 года дизайн лучше обновить. Объясню почему — на примерах из практики MiWix.

Почему каждые 2–3 года?

За это время меняется слишком многое. Вот что я вижу в работе постоянно:

Тренды. Ещё вчера градиенты и объёмные кнопки были в моде, а сегодня все делают плоские интерфейсы и минимализм. Клиент заходит на сайт и сразу чувствует — «что-то тут из прошлого века».
Привычки людей. Пять лет назад все спокойно листали длинные страницы. Сейчас хотят всё увидеть сразу. Если на сайте десять экранов до контактов — люди просто уходят.
Мобильники. Доля мобильного трафика растёт каждый год. Старый дизайн, который делали под десктоп, на телефоне превращается в кашу: кнопки не нажимаются, текст не читается.
Технологии. Появились новые приёмы вёрстки, плавные анимации, умные формы. Сайт без них выглядит бедно и проигрывает конкурентам.
Конкуренты. Захожу на сайт клиента, а рядом — три аналогичных компании с современными интерфейсами. Понятно, куда пойдёт клиент.

Когда не надо ждать трёх лет?

Не обязательно засекать время по календарю. Я советую смотреть на сигналы:

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

Как мы делаем в MiWix

Мы не бросаемся сразу рисовать картинки. Сначала разбираемся, что именно надо исправить:

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

Потом рисуем несколько вариантов макета. Показываем вам, обсуждаем, правим. Делаем адаптивную вёрстку — чтобы на телефоне было так же удобно, как на компьютере.

В итоге получается не просто «красиво», а работающий проект. Дизайн помогает бизнесу, а не висит как картинка.

Хотите проверить, устарел ли дизайн вашего сайта? Оставьте заявку — мы проведём аудит и скажем честно: обновлять сейчас или можно ещё поработать со старым.

1. Дизайн-концепция

Сначала формируем общий образ: подбираем цветовую палитру, шрифты, определяем стиль иллюстраций и иконок. Цель — отразить характер бренда и сделать сайт узнаваемым.

2. Логотип и фирменный стиль

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

3. Структура и навигация

Продумываем, как пользователь будет двигаться по сайту. Рисуем схему разделов, меню, «хлебных крошек», кнопок возврата. Важно, чтобы человек за пару кликов находил нужное.

4. Прототип

Создаём черновой макет — без цвета и красивых картинок, но с точным расположением блоков: шапка, слайдер, блоки «О компании», «Услуги», «Контакты» и т. д. Это помогает проверить логику и согласовать структуру до детальной проработки.

5. Визуальный дизайн страниц

Отрисовываем все ключевые страницы: главную, внутренние разделы, карточки товаров, формы обратной связи. Прорабатываем:

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

6. Графические элементы

Подбираем или создаём:

иконки;
иллюстрации;
фотографии и фотоколлажи;
баннеры и слайдеры;
анимацию — если она уместна.

7. Адаптивный дизайн

Делаем так, чтобы сайт хорошо выглядел на любом устройстве. Отрисовываем версии для:

десктопа (компьютера);
планшета;
смартфона.

Проверяем, как ведут себя шрифты, картинки, кнопки при смене размера экрана.

8. UI (пользовательский интерфейс)-kit (набор интерфейсных элементов)

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

9. Подготовка к вёрстке

Передаём дизайнерам и разработчикам:

финальные макеты всех страниц;
гайдлайн по цветам и шрифтам;
описание состояний элементов (например, как выглядит кнопка в обычном режиме, при наведении и после клика);
рекомендации по анимации и интерактивности.

При разработке дизайна мы смотрим не только на то, как сайт выглядит. Важны ещё:

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

Да, сайт будет удобно смотреть на любом устройстве. И на компьютере, и на планшете, и на смартфоне — везде всё будет хорошо отображаться и работать.

Да, вы сможете вносить изменения в дизайн. Мы обсудим ваши идеи — посмотрим, что можно сделать, и внесём правки, если они нужны. Иногда дизайнер может предложить свой вариант: объяснит, почему так будет лучше, и мы вместе решим, как поступить.

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

6 простых шагов

01 [ этап ]

Оставьте заявку

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

02 [ этап ]

Договор и предоплата

На ваш контактный электронный адрес мы отправим договор, счёт и акт на предоплату в размере 50% от стоимости проекта.

03 [ этап ]

Разработка макета

Создание макета для ПК и мобильной версии.

04 [ этап ]

Согласование и отрисовка

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

05 [ этап ]

Полная оплата

Высылаем счёт и акт на доплату в размере 50%.

06 [ этап ]

Вёрстка сайта

Верстальщик занимается подготовкой готового дизайна и его интеграцией на ваш сайт.