Основные этапы разработки сайта
Для того, чтобы разобраться с темой создания сайтов и лендингов, которые принесут результат Вашему бизнесу, давайте разберём основные этапы разработки сайтов и то, на чём нужно сосредоточиться на этих этапах.
1. ТЗ и прототипы
Разработка любого сайта: лендинга, блога, интернет-магазина всегда начинается с разработки протототипов (изображений как будет выглядеть веб-сайт) и технического задания.
Образец прототипа интернет-магазина:
прототип интернет-магазина
Что важно учесть при разработке прототипов и технического задания:
- Структура сайта должна чётко соответствовать целям поставленным перед сайтом в digital стратегии Вашего предприятия или, как минимум, служить решению точно определённых целей и поставленных задач.
- Если задача сайта продавать – то набольший акцент в сайте и должны иметь продающие элементы: специальные предложения, карточки акций и товаров, формы захвата и кнопки купить и пр.
- Когда Вы принимаете прототип лендинга или сайта обязательно проверьте точное соответствие фактов и формулировок. Как бы Вас не уверяли, что всё еще 1000 раз поправят на вёрстке, дизайне или через CMS – в 90% об этом все забывают и сайт так и запускается с кривыми цифрами и левыми телефонами. Не делайте себе двойную работу – проверяйте всё в момент принятия прототипов.
- Очень рекомендуем использовать рекомендации по разработке дизайна продающих сайтов при разработке прототипов и дизайна сайтов – это очень правильные принципы, которые сильно повышают конверсию.
- В 90% случаев излишняя креативность скорее вредит сайту. Главное правило юзабилити звучит: «Не заставляйте меня думать!» И это очень правильно. В наш век перегрузки информацией и читателей F-сканеров – пользователь не будет тратить время на то, чтобы разобраться с тем как назвали и где спрятали раздел “Каталог”, “корзина” и кнопку “купить” – он просто уйдёт к конкуренту – у которого всё просто и понятно.
2. Дизайн
Продолжая тему создания визуальной части сайта, переходим к важным правилам, которые очень важно учесть при дизайне сайта.
Образец дизайна:
дизайн интернет-магазина
Кроме перебора креативностью, про который писал в блоке про проектирование, в дизайне обычно бывают следующие грубые ошибки:
- Самая «грубая» ошибка, которая отталкивает от сайта и создаёт впечатление «дешёвки» это использование «буквально набивших оскомину картинок из давно разворованных банков изображений», это прямо признак ленивого дизайнера – когда в качестве иллюстрации вставлена картинка с первого же экрана поиска по картинкам Яндекса или Гугла. Тут есть 2 важных нюанса: а) всегда старайтесь использовать свои изображения – авторское и своё – узнаваемые стены и лица при встрече с клиентам – лучший шаг к установлению доверия; б) если даже вы используете дорогие платные фотобанки – всегда подбирайте изображения с лицами, которые соответствуют представлению Ваших клиентов о вашей команде и целевой аудитории, афроамериканские лица – очень сильно разочаровывают на сайте компании, которая занимается клинингом Челябинске, то же самое касается и откровенно скандинавских лиц, которые мало ассоциируются с работами по монтажу кондиционеров в Казани.
- Самая «дорогая» ошибка это использование неправильных изображений на первой странице/странице входа. С самого раннего детства, когда мы ещё не умели читать и шли к родителям, и показывали на картинку перед сказкой, чтобы нам почитали именно эту сказку. Мы выросли – а ничего не изменилось – если мы зашли на сайт и не увидели картинку, которую ожидали увидеть – то мы и текст читать не будем! Значительная часть отказов (отказ фиксируется системой аналитики если посетитель зашел на сайт и пробыл на нём менее 15 секунд) вызвана именно не «соответствующей» ожиданиям картинке на первом экране.
- Самая неочевидная ошибка в дизайне связана как правило с психологией восприятия, а именно бардаком в шрифтах. Есть очень важное правило в веб-дизайне, что крайне нежелательно использовать более 3-х шрифтов на одном экране. Мы идём даже жестче и причисляем к разным шрифтам даже разный размер и цвет одного и того же шрифта, я уже не говорю про выделение жирным или курсивом. Крайне не рекомендуем использовать шрифты с засечками (например Times New Roman) нигде кроме логотипа – всё же, по нашему мнению, они были придуманы для полиграфии, а не для веба. В вебе лучше использовать стандартные ровные шрифты без засечек (arial и ему подобные).
- Вы можете использовать эффект зачёркивания, но НИКОГДА не используйте эффект подчёркивания – в вебе традиционно привыкли, что подчёркнуты только ссылки и «не работающая ссылка» будет путать пользователя и заставлять его думать, что сайт ещё сырой, недоделанный, нерабочий.
- Крайне внимательно советую, конечно же, следить и за такими очевидными вещами – как светлые шрифты на светлом фоне. Вообще по умолчанию старайтесь избегать сложных фонов под текстом без необходимости, если хотите, что Вас именно читали.
- Из давно забытого, но до сих пор очевидного, если хотите, чтобы Вас именно читали – не используйте никакой постоянно работающей анимации на страницах – всё что непрерывно мелькает и движется – напрягает наше периферийное зрение, и сильно усложняет процесс восприятия вашего контента, особенно чтения текстов.
P.S. Данная статья входит в учебник по разработке сайтов и лендингов, который мы сейчас готовим для одной из бизнес-школ.
Предыдущая статья из этой серии: Маркетинг интернет сайта: какие основные виды сайтов существуют?
Следующая статья в этой серии: Маркетинг интернет сайта: основные этапы разработки сайта. Часть 2-ая
Где можно более подробно ознакомиться с данными материалами?
- Большая часть материалов вошла также и в наш Учебник №2: Landing Page: продающий сайт (лендинг), который завтра выходит в новой версии (добавилось несколько текстовых и около 15 новых видеоуроков): http://bloggerschool.ru/lp
- Полную версию учебника для бизнес-школ в авторской версии можно получить в наборе учебных материалов и видеопродуктов Domashenko.2017 http://bloggerschool.ru/2017
2 комментария
[…] […]
[…] […]