Многие, приступая к созданию схемы процесса для сайта, сразу открывают инструменты дизайна и начинают рисовать. В результате на полпути обнаруживают пропущенные шаги, несоответствие текста, несогласованность стиля и тратят время на бесконечные правки. На самом деле, если заранее выполнить несколько подготовительных шагов, последующая работа пойдет гораздо быстрее. Ниже приведен список того, что нужно подготовить перед созданием схемы. Вы можете следовать ему.
1. Определите цель и аудиторию схемы
Сначала подумайте, где на сайте будет размещена эта схема и для кого она предназначена. Например:
- Если это схема использования продукта, пользователи больше сосредоточены на шагах, поэтому схема должна быть простой и понятной;
- Если это схема обслуживания, пользователей могут интересовать сроки и результаты, поэтому нужно выделить ключевые этапы;
- Если схема предназначена для внутренней команды, потребуются более подробные ветвления и обработка исключений.
После определения цели выберите основной визуальный стиль (деловой, плоский или ручной рисунок) и уровень сложности, чтобы не начинать работу вслепую.
2. Составьте полный список шагов и текстовый план
Не рисуйте сразу. Сначала опишите процесс текстом. Рекомендуется включить:
- Начальная точка: откуда пользователь начинает (например, посещение страницы, нажатие кнопки).
- Ключевые шаги: название каждого этапа, действие или условие.
- Ветвления: куда идти, если условие выполнено, и куда, если нет.
- Конечная точка: завершение процесса (например, успешная отправка, завершение загрузки).
Для каждого шага составьте краткое текстовое описание (не более 8 слов), чтобы не перегружать схему. После подготовки текстового плана проверьте его с коллегами или клиентами, чтобы убедиться в правильности процесса, прежде чем приступать к дизайну.
3. Соберите визуальные референсы и цветовые решения
Заранее определите стиль иконок и цветовую гамму, чтобы не переключаться между инструментами в поисках материалов. Рекомендуется подготовить:
- Библиотека иконок: например, бесплатные сайты с коммерческими лицензиями, скачайте плоские, линейные или заливные иконки в едином стиле;
- Цветовая палитра: на основе фирменных цветов сайта или общего стиля выберите основной, вспомогательный, фоновый и текстовый цвета, обычно 3-4 цвета;
- Стиль стрелок и соединительных линий: прямые, ломаные или кривые, единое направление стрелок;
- Макетные референсы: найдите несколько скриншотов схем процессов на аналогичных сайтах, чтобы оценить расположение и размер текста. Не копируйте, просто используйте структуру.
4. Определите тип и размер схемы
Схема процесса не обязательно должна быть линейной. Выберите подходящий тип в зависимости от содержания:
- Линейная схема: подходит для процессов с небольшим количеством шагов и однонаправленным движением;
- Схема с дорожками: подходит для процессов с участием разных отделов или ролей;
- Дерево решений: подходит для процессов с множеством ветвлений.
Также определите размер изображения (например, ширина 1200 пикселей, высота по содержанию) и учтите, где оно будет использоваться на сайте: как иллюстрация на странице, изображение в статье или часть баннера. Разные места требуют разных размеров и разрешения.
5. Подготовьте инструменты и шаблоны
Выберите подходящие инструменты в зависимости от ваших навыков. Если вы делаете это самостоятельно:
- Онлайн-инструменты: Canva, ProcessOn, Lucidchart и другие, с готовыми шаблонами, достаточно изменить текст и цвета;
- Программы для дизайна: Photoshop, Illustrator или Figma, подходят для более кастомизированных задач.
Если вы заказываете дизайн у фрилансера, предоставьте текстовый план и референсы, чтобы дизайнер работал по вашей структуре, экономя время на согласовании.
6. Проверьте соответствие и авторские права
Наконец, убедитесь, что все используемые иконки, шрифты и изображения имеют бесплатную коммерческую лицензию или получено разрешение. Особенно важно для корпоративного сайта, чтобы избежать проблем с авторскими правами. Кроме того, текстовые описания в схеме должны быть точными и правдивыми, без вымышленных этапов или обещаний.
Заключение
Потратьте полчаса на подготовку вышеуказанных материалов перед созданием схемы процесса — это значительно повысит эффективность дизайна. Сначала продумайте и опишите процесс, а затем приступайте к рисованию, и вы, скорее всего, сделаете все с первого раза. Если вы обновляете страницы услуг или справочный центр на сайте, следуйте этому списку, чтобы сократить количество доработок.
