Мои клиентки частенько жалуются на то, как сложно найти разработчика сайта, который поймёт с полуслова и не исчезнет с предоплатой. В то же время я слышу и от самих разработчиков жалобы на клиенток. Они часто не знают, чего хотят, а без чёткого техзадания сложно сделать красивый и удобный сайт, который действительно понравится. И это правда.
Чтобы сделать сайт красивым и функциональным, мало найти разработчика и переложить на него весь процесс. Сначала нужно самим проделать подготовительную работу. Если не знаете, с чего начать, следуйте этой пошаговой инструкции.
Шаг 1. Подумайте о том, каков ваш бренд
Бренд — это не всегда глобальная компания с тысячами филиалов по всему миру. Бренды бывают локальными и личными. Бренд может быть компанией или отдельным человеком, который развивает свой бизнес. Бренд — это то, что запоминает ваша аудитория, то, какие чувства она испытывает, взаимодействуя с вашим продуктом.
Характер бренда отражается на сайте, в наружной рекламе, в видео и текстах бренда. Поэтому перед разработкой сайта cформулируйте, каков характер у вашего бренда.
Подберите 3 слова, максимально точно отражающих эмоции и впечатления от коммуникации с вами — то, как вы хотите восприниматься в мыслях клиентов. Это могут быть прилагательные: профессиональный, доступный, дружеский, творческий, гармоничный. А могут быть и существительные: партнёрство, вдохновение, обучение, знания и так далее. Запишите эти слова.
ПОДПИСЫВАЙТЕСЬ НА МОЙ ИНСТАГРАМ С ЕЖЕДНЕВНЫМ ВДОХНОВЕНИЕМ И НАХОДКАМИ ДЛЯ ТВОРЧЕСКИХ ПРЕДПРИНИМАТЕЛЕЙ
Шаг 2. Соберите мудборд сайта
Но одних слов-характеристик для работы по брендингу недостаточно. Какие образы, цвета, картинки, стили передают настроение и эмоции слов, выбранных вами на 1 шаге?
Поищите связи между характеристиками вашего бренда и тем, как эти слова отражаются в образах, соберите картинки, которые созвучны вашему бренду и его характеру. Из собранных картинок создайте мудборд или доску с картинками, наиболее точно отражающими характеристики и настроение вашего бренда.
По возможности оставляйте комментарии. Это поможет вам зафиксировать ваши мысли для себя или легче донести идеи до дизайнера, если вы решите привлечь его к разработке визуального образа вашего бренда.
Определите визуальные элементы стиля: цветовую гамму, шрифтовую пару, характерные графические элементы — линии, стрелки, обводки, выноски и другие, которые вам хотелось бы использовать. Проще всего это сделать на слайде в Power Point, Pinterest или графических редакторах вроде Canva.
Шаг 3. Составьте портрет своей идеальной клиентки и читательницы
В создании сайта важно не забывать, что красоту дизайна и удобство сайта будет оценивать в первую очередь пользователь, поэтому так важно представлять себе, кто это.
Максимально чётко опишите человека, которого вы хотите видеть на своём сайте. Не общими словами «Женщина, 25-40 лет, двое детей», конкретизируйте, чтобы её образ стал объёмным и реалистичным.
Образ идеальной читательницы — это не только имя, возраст, интересы, семейное положение, профессия и наличие детей. Это ещё и эмоциональная составляющая: как живёт эта девушка, чем интересуется, что читает, как проводит дни, что её волнует, печалит, радует, какую информацию она ищет, чтобы решить свои трудности, что она уже пробовала и чего ей не хватило.
Подробное описание поможет вам понять, что посетительница будет искать на вашем сайте. Ответы на какие вопросы вы сможете дать, какой дизайн привлечёт её и какой контент задержит на сайте.
Шаг 4. Сформулируйте главное действие, которое должна выполнить посетительница сайта
Окей, вы добились внимания идеальной клиентки, привлекли её визуальным образом бренда и контентом, а что дальше? Подумайте, какое одно действие ей нужно осуществить на сайте: прокомментировать, купить, подписаться или что-то ещё.
Если вы предлагаете услуги, то я рекомендую главным действием на сайте сделать подписку. В ситуации с услугами люди редко принимают спонтанные решения. Чаще всего им нужно присмотреться к проекту, человеку, специалисту, прежде чем заказать или купить что-то. Подписка поможет вывести общение в комфортный для пользовательницы канал коммуникации.
Шаг 5. Проанализируйте сайты конкурентов и соберите референсы
Возможно, конкурентный сайт кажется вам красивым и удобным и вы хотите такой же. Не просите разработчика сделать сайт точь-в-точь как у кого-то — это не выделит вас и не отразит характер бренда. Исследуйте не меньше 25 сайтов конкурентов или специалистов из смежных ниш, чтобы понять, что вам в них нравится, а что нет, какие решения кажутся вам удачными, а какие — точно мимо. В анализ включайте все сайты: информация о том, что вам не нравится важна также, как и то, что нравится.
Главное — не отсматривать их часами в надежде на память, а сразу фиксировать свои мысли и эмоции, чтобы их можно было отдать разработчику в письменном виде.
Шаг 6. Нарисуйте карту сайта для удобной навигации
Далее вам нужно понять, какие разделы будут на сайте и из каких элементов будет складываться его структура. Если продумать навигацию по сайту заранее, разработчику не нужно будет гадать, вы сэкономите массу времени, когда приступите к дизайну сайта и сайт будет удобным для навигации.
Вы можете подумать сейчас, зачем всё это прорисовывать, это такие очевидные вещи. Но поверьте, когда я продумывала структуру сайта, это оказалось далеко не так просто, как казалось сначала.
Инструментов, подходящих для этой задачи, множество. Можно просто взять карандаш и бумагу, как делала я. Или выбрать электронный сервис.
Для составления ментальных карт и схем подойдут:
Шаг 7. Нарисуйте макеты основных страниц сайта
Нарисованные макеты очень сильно помогли мне визуализировать конечный результат и найти общий язык с разработчиком. Если не сделать эту работу, есть риск закопаться в дизайне сайта и потратить бесконечное количество времени на передвигание элементов по страницам.
Прежде чем обставлять новую квартиру и закупать мебель, вы измерите размеры помещения и скорее всего хотя бы на салфетке нарисуете план, как всё расставить, иначе будет риск, что новый купленный диван попросту не влезет в комнату. С сайтом такая же история.
Разберите все элементы, которые вы собрали в структуре сайта на предыдущем этапе и нарисуйте то, как будет выглядеть каждая из этих страниц. Продумайте, какие блоки будут стоять на главной, на странице «Обо мне», в услугах, в контактах и так далее.
Даже если кажется, что прорисовывать там нечего, что в контактах будут просто контакты, а в политике конфиденциальности — политика конфиденциальности. Всё равно нарисуйте это! Важно всё: и выравнивание текстов, и ориентация фотографий и картинок, и последовательность блоков. Подробные макеты уберегут от многих ошибок и внесут ясность в то, как вы видите конечный результат.
Нарисовать красивую, структурную и логичную главную страницу сложней всего. Если она никак не даётся, начните с других разделов сайта. Продумать логику и расположение блоков поможет пост о 8 важных элементах главной страницы сайта.
Инструменты для создания прототипов и макетов страниц:
- ninjamock.com
- balsamiq.com
- mockflow.com
- moqaps.com
- карандаш и бумага.
Шаг 8. Составьте техзадание для разработчика или делайте сайт самостоятельно
Если все предыдущие шаги сделаны, то у вас будут все данные для составления внятного и исчерпывающего техзадания разработчику:
- описание бренда;
- визуальный мудборд;
- описание целевой аудитории;
- ключевая задача блога;
- анализ конкурентов и референсы;
- структура блога;
- макеты страниц сайта.
Даже если сайт и блог вы будете делать сами, то вам будет на что опереться и дело пойдёт быстрей и легче. А если решите делегировать разработку сайта, то с таким ТЗ вы автоматически становитесь идеальным заказчиком, который знает, чего хочет, и с которым приятно работать. Проверено на себе!
Понравился пост, но нет времени готовиться к созданию сайта сейчас?
Сохраняйте пост к себе в Pinterest. Когда нужно будет подготовиться и сделать сайт, эта информация будет у вас под рукой.
