Nice Studio
loading
Отлично! Теперь мы готовы к диалогу :)
Спасибо за заявку! Мы свяжемся с вами в ближайшее время!
Какой сайт вам нужен?
У вас есть фирменный стиль?
Сейчас узнаем, какой приз выпадет вам!
Колесо фортуны Nice Studio
Крутить барабан!
Есть вопросы?
Заполните форму, мы свяжемся с вами в ближайшее время
Нажимая кнопку «Отправить» Вы соглашаетесь с политикой обработки персональных данных
Как сделать прототип сайта
Чтобы понять, что такое прототип, следует разобраться, кто такой веб-дизайнер.

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

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

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

Итак, вы решили сами сделать прототип. Вот несколько советов вам в помощь:

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

02 Придумайте идею
Подумайте, в чем задача вашего будущего сайта? Какое предложение выделит вас из конкурентов? Какие вопросы чаще всего задают ваши клиенты?

Например, вы продаете апельсины. Вам нужно рассказать, почему именно ваши апельсины лучшие, предоставить доказательства в виде сертификатов, фотографий и видео, ссылки на отзывы и т. д. Вы можете предложить покупать у вас апельсины по акции, когда каждый 10-й апельсин будет бесплатным. А можете наоборот увеличить цену, подчеркивая премиальность товара и ориентируясь на более обеспеченный сегмент покупателей.

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

Разделы:

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

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

Отзывы
Разместить 3 отзыва, не забыть запросить еще 1 у клиента X. Под отзывами добавить сертификаты.

04 Уберите лишнее
Зная большинство своих заказчиков, я могу выделить ошибку, которая преследует почти каждого — огромные портянки текстов, нескончаемые галереи картинок, подобранные по принципу «чем больше, тем лучше». Много — не всегда хорошо. Часто ванильные описания товара кажутся неправдоподобными, а липовые преимущества «мы профессионалы» или «качественные материалы» просто пропустят мимо.

05 Напишите тексты
Вы сделали план сайта. Теперь вы четко знаете последовательность блоков. Осталось их наполнить. Но не перестарайтесь! Краткость — сестра таланта. Это правило применимо и к созданию прототипа. Текст должен быть кратким, но емким. Он должен быть структурирован. Нужно стараться минимально использовать сплошной текст, но выделять ключевые смыслы, использовать нумерацию, пункты, колонки.
Мы  никогда не требуем от заказчика рисовать прототип. Нам необходим только структурированный текст. Иногда нам предоставляют уже спроектированные прототипы, и это ускоряет процесс разработки. Однако, если вы не обладаете хотя бы начальными знаниями UX-дизайна, скорее всего ваш прототип нам не пригодится и мы вам предложим свой вариант.
Итак, в каком же виде следует передавать прототип дизайнеру:
Весь контент в 1 месте
Иногда мне дают информацию в виде ссылок на разные сайты, документы: "Вот это возьмите оттуда, а текст отсюда, а картинки скачайте с той ссылки. И вот еще 5 вордовских файлов, из первого возьмите 5 предложение снизу, а из остальных 10 первых абзацев". Такого быть не должно. Весь контент нужно собрать в 1 документ, все картинки разделить по папкам и собрать в 1 архив.
01
Сайт-пример дизайна
Приведите в пример любой сайт, который вам нравится. Стиль и дизайн этого сайта будут взяты за основу, послужат ориентиром для дизайнера. Референс, это важная часть ТЗ, поэтому убедитесь, что он вас полностью устраивает. А если есть замечания, дополните ТЗ: "референс www.site.ru, но мне не нравится шрифт, подберите более округлый и крупный".
02
Выделите заголовки, пункты, акценты
Информация должна быть разделена на смысловые блоки. Сплошной и длинный текст сложно читать.
03
Дополнительные пожелания
Напишите пожелания по картинкам, блокам, кнопкам, формам, всплывающим окнам и другим элементам.
04
Вот пример правильного прототипа
1 блок
Заголовок: «Свежие фрукты с доставкой на дом»
Подзаголовок: «Свежие апельсины, сочные яблоки, мягкие зрелые сливы и множество других фруктов по низким ценам.»
Кнопка «Заказать» (переход на всплывающее окно с формами имени, телефона и кнопкой «отправить». Заголовок: «Оставьте свой телефон и мы вам перезвоним»)
Этот блок должен быть ярким, мне бы хотелось видеть фотографию фруктов на заднем фоне.

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

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