[МУЗЫКА] Итак, давайте поговорим про основные этапы разработки сайтов. С чего начинается разработка любого сайта? Cтратегические продажи и маркетинг начинаются с постановки цели. Раньше или позже вы приходите к тому, что вам нужна площадка приземления, то есть сайт, который будет выполнять функции именно продающей страницы, каталога и т.д. С чего мы начинаем сайт? Всегда сайт, так же, как ремонт офиса, квартиры, мы начинаем с проекта, то есть мы отрисовываем все прототипы и описываем все необходимые действия, функционально что происходит, а также все интеграции со всеми остальными ресурсами: системами учета, оплаты, CRM, колл-трекингами и прочего также в ТЗ. То есть все прототипы взаимодействия, то есть все возможные протоколы взаимодействия. Самое главное в разработке — конечно же, прототип, чтобы мы сразу видели, где что у нас находится: какие тексты, какие картинки. Для лендинга это особенно важно, потому что у лендинга прототип — это практически зафиксированная продающая модель. Для интернет-магазина, где будет десять тысяч карточек заполнено товаров, вы рисуете, конечно же, одну карточку товара, ну или по одной карточке на разные рубрики — если есть у вас сыпучие, текущие, жидкие, газообразные и т.д. После того, как вы сделали ТЗ и прототип и утвердились, вы переходите к этапу дизайна. Сайт отрисовывается, все картинки, все изображения утверждаются, потом они верстаются — происходит верстка, то есть перевод сайта в программный код для того, чтобы его видел браузер. Для лендинга на этом все заканчивается, для сайтов посложнее. Где есть динамически генерируемый контент, такой, как постоянные новости в блоги, постоянные новые товары в интернет магазине и т.д., прикручивается к системе управления сайтом, так называемому движку. После того, как вы натянули дизайн, то есть порезали, сверстали дизайн, натянули его на движок, вы заполняете этот движок, соответственно, контентом: статьями, картинками, данными, и эти данные из базы данных выводятся, то есть необходимые картинки, страницы и прочее. Так вот, после этого сайт готов. Когда он заполнен контентом, он заливается на хостинг, там, где домен, и происходит финальное тестирование. Если все хорошо, запускают в продакшен, а дальше уже идет эволюция проекта: развитие, масштабирование, апгрейд и т.д. Что важно учесть при прототипировании сайта? Разработка любого сайта начинается с прототипов и технического задания. Напоминаем, что прототипы для дизайнера — это фактически уже готовый чертеж, по которому он уже рисует, чтобы дизайнер не придумывал, и у вас не было сюрпризов, что какие-то элементы оказались не на тех местах и пропорции не те, старайтесь отрисовать прототип максимально качественно, чтобы все логотипы, если есть картинки, чтобы картинки уже стояли на своих местах. Для лендинга, где картинок будет немного, тексты, факты, пропорции — все должно быть соблюдено на прототипе. То есть прототип, это чем лучше чертеж, тем лучше модель. Чем лучше прототип, тем лучше будет дизайн, и работать сайт. Потом, когда прототип готов, если это не лендинг, где один прототип, а сайт, где там 30 прототипов может быть, конечно же, обязательно должно быть техническое задание, где будет точно описано, что как происходит при нажатии на эту кнопку: всплывает форма такая, такая, такая и т.д. Чем лучше написано ТЗ, тем более прогнозируем результат, и тем меньше шансов, что вы вылетите из сроков и вылетите из бюджета. Ну, вот сейчас вы можете посмотреть на типичный прототип интернет-магазина. То есть вот здесь видите: это практически дизайн. После этого мы будем смотреть дизайн, вы увидите, что там изменилась, конечно, графическая составляющая, но основные блоки, элементы, тексты, образцы, цифры, факты и картинки и логотип и контакты подставлены уже актуальные. Наш опыт говорит, что если вы в прототипе забыли какую-то цифру или картинку поменять, то чаще всего на этапе дизайна, верстки, сборки, запуска вы про нее забудете, и разработчики забудут. И потом через две недели после запуска вы увидите, что у вас оказывается, не знаю, расстояние от метро до вашего офиса — два диаметра Земли просто потому, что кто-то пошутил, вы забыли. И поэтому важно: все факты... То есть какие-то вещи можно, тексты можно поправить в дизайне, верстке, в сборке и т.д., но постарайтесь все-таки, чтобы не произошло чудес, если у вас есть такая возможность, все цифры и все факты зафиксировать на этапе прототипа. Дальше обязательно учитывать, чтобы сайт и прототип соответствовал целям компании. То есть то, что вы на сайте отражаете в прототипе, оно в вашу стратегию укладывается, то есть не должно быть каких-то чудес. Здесь даже жестче скажу: если у вас есть digital стратегия, то сайт должен четко следовать, выполнять цели и задачи, поставленные. Кнопки конверсионные, офферы, захваты, направления — все, что заложено в digital стратегию на сайте, через сайт должно быть реализовано. То есть не должно быть, что у нас в стратегии одно... Чаще всего ее, правда, нет, но вот если нет, то совсем плохо. По крайней мере как-то сфокусируйтесь. Пусть через разработку сайта. Зафиксируйте те вещи, те константы, которые вам важно помнить. Если задача сайта — продавать, то конечно же максимальный элемент и акцент в прототипах должен располагаться непосредственно на конверсионных элементах. Большие кнопки «Купить», большие формы спецпредложений, офферы, тексты, формулировки и т.д. Поэтому не забывайте: если мы продаем — мы продаем. Не надо вот этой игры, что мы как бы хотим продать, но мы вот не готовы об этом говорить. Если продаем — то продаем. Ну и еще раз напоминаю: принимая прототип сайта, обязательно проверьте факты, формулировки, орфографические ошибки. Потом это исправить легко и просто с точки зрения технологии, но системно с точки зрения менеджмента и стратегии скорее всего, вы будете об этом забывать. Поэтому, пожалуйста, этот факт не упустите. Что еще важно учесть при расчете, при прототипировании и при дизайне сайтов? Как правило, многие клиенты, заказчики и ученики говорят: я такой прямо оригинальный, я хочу выделиться. Я сейчас вместо доставки напишу, не знаю, «телепортация». Вместо контактов — «Точка сборки», вместо «О компании» — «Мы во вселенной» и т.д. Первое правило юзабилити, напоминаю — не заставляйте меня думать. Если клиент пришел на ваш сайт и понял, что он не понимает, где здесь что, то скорее всего он его закроет, потому что он... десять сайтов, времени ограничено. Он открыл, ему нужно срочно купить, приобрести. Вот три понятных сайта, семь непонятных. Не будет никто разбираться. Вашу сверхкреативность с большой вероятностью никто не оценит. Не заставляйте меня думать. Поэтому старайтесь быть... Вот в приложениях, в формулировках, в товарах можете быть креативны. А вот в продающих презентациях старайтесь быть максимально близкими и понятными пользователю. Мы делаем сайт не для себя, мы делаем сайт для посетителя и для клиента. Поэтому старайтесь быть максимально ему понятны, доступны и просты в использовании. После того, как мы сделали прототип, утвердили, мы передаем прототипы в дизайн, и дизайнер уже отрисовывает необходимые графические элементы, оформляет переходы, цветовые пятна, баланс и прочее, и прочее. С дизайном есть следующие важные штуки, которые нужно знать и помнить. Дизайн в принципе вещь субъективная, есть такой субъективизм, вкусовщина и т.д. Поэтому дизайн, конечно же — вопрос вкуса заказчика, но дизайн... Вот какие есть правила? Что можно формализовать, я бы даже сказал, алгоритмировать, что важно помнить и знать в дизайне? Самая дорогая ошибка в дизайне — это когда картинка на главном экране (а человек зашел, увидел картинку) не соответствует его ожиданиям. То есть есть такое понятие — отказ. Человек пришел на сайт, не увидел того, что он ожидал, закрыл. Вот он чаще всего даже текст не читает. Он пришел на сайт купить яхту, а у вас там пароходы, у вас там космические корабли, вас там игрушечный джип. Вы вот креативно подошли и нарисовали, не знаю, девушек в купальниках на пляже. Но он хотел купить яхту. Он яхту не увидел — он закрыл и ушел. Поэтому самое важное — хорошее атмосферное изображение. А что это обозначает? Если вы покупаете и используете готовое, это не ваша фотосессия, тогда конечно же покупайте в хороших фотобанках. Если дизайнер поленился, открыл Яндекс картинки, Google картинки, набрал слово «яхта», взял первую попавшуюся, влепил. Ну вот знаете, так бывает. Есть такая девушка, которую я видел уже везде: на всех щитах, плакатах, журналах, сайтах. Она уже была медсестрой, учительницей, бизнесменшей, кем только не была. Одно и то же лицо. Я видел, то есть... Люди, как правило, особенно, кто много ходит в интернете, даже не кто те, кто часто появляются, они... вот уже там замылены глаза. Если мы видим человека из фотобанка, мы думаем: а, дешевка. Человек поленился, решил отделаться на раз. А раз это дешевка, то раз люди несерьезно отнеслись, значит, это фирма и компания какая-нибудь такая ленивая, лентяйская. То есть с такими... То есть сайт — это элемент доверия, поэтому здесь, раз это элемент доверия, важно это знать и помнить. Что вот лучше люди, если из фотобанков, (а лучше — свои), но если не свои, то хотя бы из дорогих купленных фотобанков. Не дешевые, не первые попавшиеся. И конечно же, мы ожидаем увидеть людей славянского типа внешности. Не афроамериканского, наверное, в меньшей степени азиатского, даже не скандинавский тип, а именно славянский, если мы работаем на Россию. Если мы работаем на международный рынок, то разные могут быть люди. Даже на СНГ у нас разные бывают народы. Но имейте в виду: люди должны соответствовать тем ожиданиям, которые есть у вашей целевой аудитории. Это, казалось бы, мелочь, но слишком часто на этой мелочи люди прогорают. Дальше. Последний важный пункт, который важно знать про дизайн и помнить про дизайн — это то, что самая неочевидная ошибка в дизайне — это шрифты. Обычно желательно, чтобы у вас на одном экране и в принципе на всем сайте было не более двух-трех шрифтов. И обычно это не обозначает, что у вас есть Times New Roman, Arial и Courier. Это обозначает, что у вас один шрифт: Verdana, Tahoma, не знаю, Open Sans. При этом шрифт ровный, без засечек. Шрифты с засечками оставьте для полиграфии. все Times New Roman, все Gothic — это все для полиграфии. Для сайтов у вас только логотип может быть с засечками, то есть шрифт с завитушками, а шрифты в digital должны быть ровные и максимально простые. Более того, не надо никаких италиков, не надо не дай бог каких-то подчеркиваний. Потому что подчеркивание в интернете — ссылка, и нет более грубой ошибки и неуважения к пользователю, чем использовать подчеркивания в тексте. Человек думает, что ссылка, кликает, там ссылки нет, он думает: а, это какая-то ерунда, сайт недоделанный, с ошибками, какой-то сырец. И он уходит с него. Поэтому никаких подчеркиваний. Зачеркивания можете использовать, но в идеале использовать, если вы хотите зачеркнуть цену, большие красные линии. Два больших перекрещивания. Нешрифтовое оформление старайтесь использовать. Поэтому у вас, как правило, - мы рекомендуем и учеников заставляем - у вас два шрифта на сайте. Причем это все Open Sans, 16 для текстов размер, 32 для заголовков. В редких местах можно использовать сверхкрупный для главного заголовка, для оффера, и может быть, иногда выделить жирным, но никаких италиков, никаких подчеркиваний. Это важно. [МУЗЫКА] [МУЗЫКА]
