Разработка сайтов на заказ: сначала удобство, затем внешний вид

Веб-дизайн начинается с контента и сценариев использования

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

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

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

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

Правила отображения и взаимодействия в профессиональном интерфейсе

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

Приоритет информации на небольшом экране

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

Понятные действия и обратная связь

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

Доступность компонентов

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

Как дизайнерские решения связаны с технической основой SEO

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

• Заголовки страниц выстраиваются в осмысленную HTML-иерархию независимо от их визуального размера.
• Поля заголовка и описания можно редактировать в панели управления отдельно для каждой страницы.
• Структурированные данные соответствуют содержимому, которое действительно присутствует на странице; несуществующие отзывы и цены не добавляются.
• Решения по URL, каноническим адресам и соответствующим языковым версиям документируются вместе со структурой навигации.
• До запуска уточняются требования к данным для аналитических тегов и порядок работы с пользовательским согласием.

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

Как мы сравниваем индивидуальный дизайн и готовую тему

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

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

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

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

• Фиксируется контент, который нельзя найти через меню, но который полезен пользователям.
• Собираются примеры неотображающихся изображений, таблиц, выходящих за границы экрана, и состояний, не предусмотренных в мобильной версии.
• Для контентных блоков, которые сейчас нельзя редактировать, предусматривается управление в новой панели.
• Составляется список зависимостей прежнего программного обеспечения и требований к серверу.
• Уведомления об отправке форм и ссылки на скачивание включаются в проверку переноса.

В файле сопоставления адресов вместе указываются старый URL, соответствующий новый адрес и решение о переносе. Перенаправление каждой старой страницы на главную не является корректным сопоставлением. До запуска определяются порядок резервного копирования и способ отката; после запуска отслеживаются критически важные пользовательские сценарии и состояние сканирования сайта поисковыми системами. Этот план направлен на снижение риска потери видимости, но не гарантирует полного отсутствия колебаний.

Оценивайте предложение по веб-дизайну по составу экранов

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

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

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

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