Звоните Пн-Пт с 9-20 (мск) +7 (499) 112 33 40
Создание и продвижение сайтов в Москве
 

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

Павел, руководитель компании по всем вопросам: +7 (922) 849-81-44

Павел, руководитель компании
вопросы: +7 (926) 849-81-44

Как разработать хороший, правильный прототип сайта. Я поделюсь своим опытом. Не буду рассказывать какие программы применять для этого. Чисто мой опыт без воды, сухие факты и примеры.

Разработка прототипа сайта

На выходе получаются вот такие сайты, у которых почти все страницы являются посадочными. Вы можете посмотреть их на моем сайте. Войдите в яндекс, вбейте в поисковую строку "сеоком работы" и все увидите.

 примеры сайтов

 

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

Я прошу показать 3-5 сайтов, которые моим заказчикам нравятся и рассматриваю преимущества этих сайтов.

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

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

схема работы - анализ сайтов

 

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

выявление пересечения элементов

 

Для начала, я в виде такого списка для себя все записываю:

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

 

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

таблица сайтов

 

какие элементы есть в содержимом сайта, есть ли на сайте цены, еще услуги, что указано в подвале.

цены, блоки

 

Структура сайта

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

шапка сайта

 

Если есть на сайте конкурента блоки тегов, то, вероятно, следует сделать так же, так как это помогает и удобству использования и ранжированию сайта. Если указан прямой телефон или 8-800..., то это как то влияет на позиции, значит нам его лучше тоже использовать.

блок тегов

 

Тоже самое могу сказать о фильтрах. То есть, основное правило следующее: если у конкурентов есть какой-то элемент, то нам лучше его перенять и внедрить на свой сайт.

фильтры

В основном, я, конечно, объясняю критерии, которые на большинстве сайтов общеприняты, но в любом случае я внимательно просматриваю сайты конкурентов и анализирую все эти пункты. 

Вот такой блок был у большинства конкурентов, которые находятся в топе, соответственно у себя мы будем его внедрять.

популярный блок

 

Блок "примеры готовых работ" также есть у конкурентов (реальные фотографии готовых работ), значит нам нужно его реализовать у себя.

примеры готовых работ

 

 Рекомендую почитать  Общие требования к сайту

blue shadow

Даже, если руководствоваться простой логикой, можно сказать, что людям интересно посмотреть какие дома строила компания, какие услуги она предлагала, какие решения она может предложить посетителям.

карточки товаров

 

В 2019 году  очень активный тренд видео отзывы, так как они вызывают больше доверия и на сайтах их стали размещать многие.

видео отзывы

 

Макет сайта

Далее этот протопим отправляется дизайнеру и он уже рисует вот такой макет сайта. После этот макет я отправлю заказчику. 

макет сайта

 

Заказчик его смотрит и при наличии правок указывает на них и мы их внедряем. В данном случае была изменена цветовая гамма и некоторые страницы были доработаны.

отрисованный макет сайта

 

Тестирование. Карта просмотра сайта

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

тестирование сайта

 

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

карта просмотра сайта

 

До зеленых областей люди уже не доходят.

области просмотра сайта

Такой сценарий более менее нормальный. То есть по ходу опускания прокрутки вниз внимание страница теряет.  Есть еще области, на которых люди не заостряют внимание. Все это тестируется и улучшается.

Видео 

 
 

Вывод

Это был мой опыт того, как создать прототип сайта быстро и эффективно. Не совершайте ошибок. Если у Вас есть потребность в разработке сайта, то делайте все поэтапно и грамотно.

 

Разработка и создание сайтов Сморите подробнее Как происходит создание сайта ...
работы - создание сайтов Созданные нами сайты это: уникальный дизайн проработанная до мелочей структура расположение навигации в наиболее удобных местах гармоничное...
Создание изготовление сайта в Лобне Необходимо Изготовление сайта в г. Лобня - мы готовы вам помочь. Ведет как удобно когда сотрудничество происходит между людьми из...