WEB дизайн и WEB разработка

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

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

Две разные работы под одной вывеской

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

• Проектирование. Структура сайта, набор страниц, что на каждой и в каком порядке. Самая недооценённая часть: её часто пропускают и начинают сразу с картинок.
• Дизайн. Внешний вид экранов, типографика, цвета, состояния кнопок и форм, вид на телефоне и на компьютере.
• Вёрстка. Превращение макета в код, который одинаково работает в разных браузерах и на разных экранах.
• Программирование. Каталог, корзина, формы, интеграции с учётной системой, личный кабинет, административная часть.
• Наполнение и настройка. Тексты, фотографии, счётчики, карта сайта, robots.txt, скорость.

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

Сайт начинается со структуры, а не с макета

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

Что даёт такой порядок на практике:

1. Правильное количество страниц. Если у вас шесть услуг, а спрос делится на четырнадцать разных задач, вам нужно четырнадцать страниц, а не шесть. Одна страница отвечает на одну задачу — так устроен и поиск, и восприятие человека.
2. Понятные названия разделов. Меню на языке клиента, а не на внутреннем жаргоне компании. «Ремонт под ключ» вместо «Комплексные решения».
3. Отсутствие лишнего. Разделы, которые никто не ищет и не читает, стоят денег на разработку и потом висят пустыми.
4. Готовность к росту. Понятно, куда добавлять новые услуги и города, не ломая навигацию.

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

Мобильная версия — основная, а не дополнительная

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

Что проверять на мобильном макете до подписания:

Подробнее об этом — в статье «Разработка сайта под ключ».

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

Отдельно про всплывающие окна. Окно, закрывающее содержимое сразу после загрузки, портит и поведение людей, и оценку страницы поисковой системой. Если оно нужно, показывать его стоит по действию — при попытке уйти или после прокрутки, — а не по таймеру на третьей секунде.

Что вписать в задание до старта работ

Большинство переделок происходит из-за того, что технические требования не были названы заранее. Исполнитель сделал как умеет, формально претензий нет.

Требование	Зачем нужно	Как проверить после сдачи
Адреса страниц читаемые и без параметров	Понятные адреса не переклеиваются потом с потерей позиций	Открыть меню и посмотреть, что в адресной строке
Возможность редактировать заголовок и описание каждой страницы	Без этого нельзя работать с выдачей	Зайти в админку и найти поля title и description
Один заголовок первого уровня на странице	Дублирование сбивает разбор структуры	Посмотреть исходный код, поискать тег h1
Текст в коде страницы, а не подгружается скриптом	Иначе робот может не увидеть содержание	Отключить JavaScript и посмотреть, что осталось
Автоматическая карта сайта и robots.txt	Помогает роботу найти страницы	Открыть оба файла по прямому адресу
Сжатие и современный формат изображений	Главный вклад в скорость на мобильных	Проверить вес страницы в инструментах разработчика браузера
Счётчики и цели на формы	Без целей нельзя считать заявки	Отправить тестовую заявку и увидеть её в отчёте
Передача исходников и доступов	Смена подрядчика не должна означать новый сайт	Получить доступ к панели, хостингу и домену на своё имя

Помогу с продвижением: продвижение сайта в поиске — вывожу сайты в топ Яндекса белыми методами.

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

Выбор платформы: за что вы платите разницу

Вариант	Кому подходит	Что ограничивает
Конструктор	Одна услуга, простая структура, нужен быстрый старт	Ограниченный доступ к коду, сложности с нестандартной структурой и переносом на другую платформу
Готовая CMS с типовым шаблоном	Сайт услуг, блог, небольшой каталог	Лишний код шаблона, скорость, зависимость от чужих дополнений
CMS с индивидуальной вёрсткой	Основной вариант для среднего бизнеса	Дороже и дольше, нужен разбирающийся исполнитель
Коробочная платформа для магазинов	Каталог с интеграцией с учётной системой и складом	Стоимость лицензии и поддержки, тяжеловесность
Индивидуальная разработка	Нетиповая логика, сервис, расчёты, личные кабинеты	Самый дорогой и долгий путь, зависимость от конкретных разработчиков

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

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

Первый экран: что на нём должно быть

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

Обязательный набор, который проверяется по одному:

• Что вы делаете, названное словами клиента. Не «комплексные решения для бизнеса», а конкретная услуга в той формулировке, по которой человек сюда пришёл.
• Где вы это делаете. Город и, если важно, район или радиус выезда. Отсутствие географии заставляет человека искать её в контактах, и часть уходит раньше.
• Одно понятное действие. Кнопка с конкретным глаголом: рассчитать, вызвать замерщика, узнать цену. Три равнозначные кнопки работают хуже одной.
• Телефон, видимый без прокрутки. На мобильном — кликабельный, чтобы звонок начинался нажатием.
• Один-два факта, снимающих сомнение. Срок выезда, гарантия, объём выполненных работ. Без превосходных степеней и без круглых чисел, взятых из воздуха.

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

Тему разбирал отдельно: «Поведенческий дизайн сайта».

Как принимать работу

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

1. Открыть сайт на своём телефоне. Не в эмуляторе на компьютере исполнителя, а на реальном устройстве, лучше на нескольких.
2. Отправить заявку из каждой формы. Проверить, что письмо пришло, и что заявка отразилась в счётчике.
3. Проверить работу без интернета высокой скорости. Включить на телефоне медленное соединение и посмотреть, за сколько откроется главная.
4. Пройти по всем пунктам меню. Найти пустые страницы и заглушки с текстом-рыбой.
5. Посмотреть исходный код. Убедиться, что тексты в коде, заголовок первого уровня один, мета-теги заполнены и нет запрета индексации.
6. Проверить служебные файлы. Карта сайта и robots.txt открываются по прямым адресам, в robots.txt нет запрета на весь сайт.
7. Проверить доступы. Домен, хостинг, админка, счётчики оформлены на вас, а не на исполнителя.
8. Запросить исходники. Макеты в редактируемом виде и резервная копия сайта.

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

Скорость закладывается на этапе дизайна

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

Что реально влияет на время открытия на телефоне, по убыванию вклада:

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

Если нужна помощь по теме — мой курс по SEO.

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

Почему сайты переделывают через год

Причины повторяются от проекта к проекту:

Смежный материал по теме — «Простой дизайн сайта и его влияние на SEO».

• Структура не под спрос. Пять страниц вместо пятнадцати, поисковый трафик расти не может по определению.
• Нет возможности редактировать мета-теги. Шаблон конструктора или самописная система без нужных полей.
• Каталог без фильтров с собственными адресами. Люди ищут узкие категории, а на сайте им негде появиться.
• Сайт не переносится. Всё завязано на платформу конкретного исполнителя.
• Нет аналитики. Счётчик стоит, целей нет, год работы нечем оценить.
• Заявки уходят не туда. Форма отправляет письмо на почту, которой никто не пользуется.

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

Частые вопросы

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

Сколько страниц нужно на старте? Столько, на сколько задач делится ваш спрос. Для типичного сайта услуг это главная, страница на каждую услугу, страница по каждому крупному направлению, контакты, цены, примеры работ. Обычно получается от десяти до двадцати, а не пять.

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

Кто пишет тексты? Разработчик обычно не пишет, а вставляет то, что дадите. Планируйте тексты как отдельную работу и начинайте их до сдачи сайта, иначе проект зависнет на этапе наполнения на месяцы.

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

Сколько времени занимает разработка? Сайт услуг на готовой системе — от трёх недель до полутора месяцев при готовых текстах. Каталог с интеграцией — от двух-трёх месяцев. Основная задержка почти всегда не в разработке, а в согласовании и в ожидании материалов от заказчика.

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

8:14

Коротко

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

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