Как сделать прототип сайта

Создание сайта — поэтапный процесс, основа которого не дизайн, а прототип.

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

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

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

Итак, вы решили сами сделать прототип. Вот несколько советов вам в помощь:
1. Изучите конкурентов
Посмотрите сайты конкурентов не с точки зрения дизайна, а наполнения: как продают товар, как рассказывают о себе. Даже если сайт выглядит ужасно с точки зрения дизайна, но имеет высокую конверсию, это главный пример для изучения. Ваша задача — понять, почему имея непрезентабельный внешний вид, проект находится в топ 10 сайтов этой тематики. Соберите несколько таких сайтов. Вы можете придумать что-то подобное? Как вы заинтересуете своего клиента? На все эти вопросы вы должны найти ответы.
2. Придумайте идею
Подумайте, в чем задача вашего будущего сайта? Какое предложение выделит вас из конкурентов? Какие вопросы чаще всего задают ваши клиенты?

Например, вы продаете апельсины. Вам нужно рассказать, почему именно ваши апельсины лучшие, предоставить доказательства в виде сертификатов, фотографий и видео, ссылки на отзывы и т.д. Вы можете предложить покупать у вас апельсины по акции, когда каждый 10-й апельсин будет бесплатным. А можете наоборот увеличить цену, подчеркивая премиальность товара и ориентируясь на более обеспеченный сегмент покупателей.
Как придумать идею для сайта
3. Напишите план
Откройте обычной текстовый редактор и запишите ваши мысли. Постарайтесь их структурировать. Например описание товара, откуда вы экспортируете апельсины, ваш опыт в этой сфере вы вносите в раздел "о нас", а низкую стоимость и скидки на товар — в блок "преимущества". Создайте четкую структуру, добавьте в нее визуальный контент, если он имеется. В нашем примере это фотографии апельсинов, сертификаты, подтверждающие качество товара.
Разделы

Главная обложка
Придумать заголовок, в котором была бы информация о скидке X % для заказа от Y кг.

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

Отзывы
Разместить 3 отзыва, не забыть запросить еще 1 у клиента X. Под отзывами добавить сертификаты.
4. Уберите лишнее
Зная большинство своих заказчиков, я могу выделить ошибку, которая преследует почти каждого — огромные портянки текстов, нескончаемые галереи картинок, подобранные по принципу "чем больше, тем лучше". Много — не всегда хорошо. Часто ванильные описания товара кажутся неправдоподобными, а липовые преимущества "мы профессионалы" или "качественные материалы" просто пропустят мимо.
5. Напишите тексты
Вы сделали план сайта. Теперь вы четко знаете последовательность блоков. Осталось их наполнить. Но не перестарайтесь! Краткость — сестра таланта. Это правило применимо и к созданию прототипа. Текст должен быть кратким, но емким. Он должен быть структурирован. Нужно стараться минимально использовать сплошной текст, но выделять ключевые смыслы, использовать нумерацию, пункты, колонки.
Я никогда не требую от заказчика рисовать прототип. Мне необходим только структурированный текст. Иногда мне предоставляют уже спроектированные прототипы, и это ускоряет процесс разработки. Однако, если вы не обладаете хотя бы начальными знаниями UX-дизайна, скорее всего ваш прототип мне не пригодится, и я вам предложу свой вариант.
В каком виде следует передать прототип дизайнеру
1. Весь контент в 1 месте
Иногда мне дают информацию в виде ссылок на разные сайты, документы: "Вот это возьмите оттуда, а текст отсюда, а картинки скачайте с той ссылки. И вот еще 5 вордовских файлов, из первого возьмите 5 предложение снизу, а из остальных 10 первых абзацев". Такого быть не должно. Весь контент нужно собрать в 1 документ, все картинки разделить по папкам и собрать в 1 архив.
2. Сайт-пример дизайна
Приведите в пример любой сайт, который вам нравится. Стиль и дизайн этого сайта будут взяты за основу, послужат ориентиром для дизайнера. Референс, это важная часть ТЗ, поэтому убедитесь, что он вас полностью устраивает. А если есть замечания, дополните ТЗ: "референс www.site.ru, но мне не нравится шрифт, подберите более округлый и крупный".
3. Выделите заголовки, пункты, акценты
Информация должна быть разделена на смысловые блоки. Сплошной и длинный текст сложно читать. Вы можете использовать тексты, которые нашли на других сайтах. Но их необходимо будет изменить, чтобы ваш сайт правильно индексировался и не попал в бан поисковика из-за неоригинального текста.
4. Дополнительные пожелания
Напишите пожелания по картинкам, блокам, кнопкам, формам, всплывающим окнам и другим элементам. Чем точнее вы описываете свои пожелания, тем точнее результат моей работы будет совпадать с вашими пожеланиями.
Вот пример правильного прототипа


_____ 1 блок _____

Заголовок: "Свежие фрукты с доставкой на дом"
Подзаголовок: "Свежие апельсины, сочные яблоки, мягкие зрелые сливы и множество других фруктов по низким ценам."
Кнопка "Заказать" (переход на всплывающее окно с формами имени, телефона и кнопкой "отправить". Заголовок: "Оставьте свой телефон и мы вам перезвоним")
Этот блок должен быть ярким, мне бы хотелось видеть фотографию фруктов на заднем фоне.


_____ 2 блок _____

Заголовок: "Почему заказывать фрукты следует у нас:" Следующий текст оформите на свой вкус:
- Доставка в Москве и Московской области
- Собственный склад в пределах города
- Доставка до квартиры в течение 1 суток
Кнопка "Узнать больше" (будет вести на блок ниже, под названием "Мы гарантируем качество нашего товара")


_____ 3 блок _____

Заголовок: "Мы гарантируем качество нашего товара"
Тут следует разместить фотографии наших сертификатов, которые находятся по ссылке "ссылка"


_____ 4 блок _____

Заголовок: "Контакты"
Телефон: +7 999 999 99 99
E-mail: mail@mail.ru
Далее нужно сделать форму обратной связи
Подзаголовок: "Оставьте свой телефон и мы вам перезвоним"
Поля для ввода имени и телефона и кнопка "отправить".
Если у вас многостраничный сайт, следует подготовить такой прототип для каждой страницы. Если у вас нет прототипа, вам необходимо подготовить копирайт - текстовое наполнение каждой страницы вашего будущего сайта. Ориентируясь на него, я могу сама вам сделать прототип. Подробнее
Информация для клиентов