Веб-дизайн сайта

Шаблон рисовали под «магазин вообще», поэтому подгонять под него приходится ваш бизнес, а не наоборот.

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

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

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

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

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

UX — это просто порядок, в котором человек находит то, за чем пришёл, и не думает, куда нажать дальше.

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

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

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

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

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

Телефон для большинства сайтов — главный экран, поэтому мобильную версию проектируем отдельно, а не уменьшаем десктопную.

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

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

• отдельные макеты для телефона и планшета, а не один десктопный
• меню, фильтры и таблицы перестраиваем под узкий экран
• кнопки и ссылки делаем такими, чтобы попадал палец
• проверяем поворот экрана и длинные названия товаров

Показательный пример — магазин дверей. На компьютере фильтр с десятью параметрами спокойно стоит колонкой слева. На телефоне эта колонка либо съедает весь первый экран, либо исчезает совсем — оба варианта плохие. Рабочее решение другое: отдельная кнопка «Фильтр», которая открывает параметры поверх страницы.

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

Сайты конкурентов смотрим не чтобы повторить, а чтобы увидеть, что в нише уже приелось, и сделать иначе.

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

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

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

Иногда после такого разбора вывод неудобный: в вашей нише выигрывает не оформление, а скорость ответа, наличие цен и нормальные фото работ. Тогда мы так и говорим — и делаем ставку именно на это, а не на эффекты и анимацию.

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

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

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

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

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

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

Если вам предлагают «AI-дизайн» и на этом всё — спросите, кто будет проектировать структуру страниц. Красивая картинка без продуманного пути пользователя заявок не приносит.

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

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

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

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

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

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