Блог или просто интересные статьи

Главная » Статьи » Мои статьи

Этапы создания сайта, лендинга, любого веб-проекта: простое пособие для тех, кто не разбирается в логике работы или следует некорректным советам

© Copyright: Создание сайта – процесс длительный и трудоемкий. Многие думают, что надо найти какого-то одного «универсального солдата», который выполнит все задачи и поднесет готовый проект на блюдечке с голубой каемочкой. Так не бывает.

В этом деле, как и в любом другом, существует такое понятие, как разделение труда. Если его игнорировать, спасение не придет и манна с небес не упадет. Запомните: нельзя верить тем, кто обещает за некую малую сумму выполнить все задачи.

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

Тут вопрос для вас только один: что вам предпочтительнее – «не париться» и не вникать в процесс, найдя «универсального солдата», или вникнуть в суть, заплатить чуть больше, но организовать все самостоятельно? Для этого всего лишь придется научиться оценивать результат, сравнивать предложения, примеры из портфолио, чтобы найти достойных и действительно прямых исполнителей.

Они уже потренировались, реально овладели профессией, пусть и не достигли в ней совершенства. Несовершенство можно исправить, «докрутить», доработать, а результат дилетантства – только менять полностью. Это деньги, выброшенные на ветер.

Еще один вариант, если опять же не желаете ни во что вникать, - обращение в агентство, где представлены все специалисты разного профиля.
Там над созданием проекта будет трудиться целая команда. Теоретически, если это агентство с репутацией, а не структура, аналогичная вышеописанной, то есть номинальная, вы должны получить грамотный и работающий результат.
Однако тут серьезно встанет вопрос цены. В агентстве вы заплатите не только за реально выполненную работу, но также за бренд (если это известный игрок), рекламу, содержание офиса, хотя в данном случае он не требуется, менеджеров, руководства, плюс налоговые нагрузки. Все это раскидывается обычно между заказчиками
Продешевить – получить агентство с командой новичков, которых организовал перекупщик, тот самый деятель, охочий до денег и экономящий на профессионализме. Не продешевить – это крупные вложения, на которые далеко не все сегодня готовы.
Бывают и исключения – агентство с действительно грамотной командой, которая только начинает работать и строить свою репутацию, или просто честные предприниматели, которые не вешают на заказчика свои финансовые проблемы. Ищите таких.

В любом случае делайте вывод: над проектом будет трудиться группа, а не «универсальный солдат», который и швец, и жнец, и на дуде игрец. Он лишь организатор, но эти функции совершенно спокойно можете взять на себя и вы, владелец бизнеса.

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

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

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

Процесс создания и разработки страниц с графикой

Работа идет поэтапно в любом случае, какой бы категории проект у вас ни был. Все виды проектов я подробно расписала в классификаторе (Начало, Продолжение, Окончание). Начинается работа не с текста, как думают многие, вернее, как многих убеждают.

Хотя, надо признать: текст, скажем, для классического коммерческого сайта или информационника можно писать параллельно с работой других специалистов. Это связано с тем, что на его страницах нет многочисленных графических элементов, которые свойственны лендингам или страницам блочного типа, стилизованным под лендинги на комбинированных проектах.
Для блочных я пишу только под графику и не как иначе, то есть иду прямым и правильным путем. Для создания макета дизайнеру текст не нужен! Это важно понять!
Если вы обращаетесь к разработчику или дизайнеру, а он начинает требовать с вас текст, знайте: вы нарвались на дилетанта, новичка или школьника. Такие обычно решают попрактиковаться в незнакомой, неосвоенной сфере, но не дают себе труд изучить ее сначала в теории. Бойтесь их.

Дизайнеру нужна концепция, а не текст, предложение по структуре воронки продаж, черновик для прототипирования. Этот специалист работает с так называемым рыбатекстом или Lorem ipsum. Так называется классическая панграмма, условный, зачастую бессмысленный заполнитель.

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

Разработка концепции – дело маркетолога, а не дизайнера. Это следует признать. При желании экономить на строительстве сайта заказчик обычно сразу идет к бюджетному дизайнеру, а тот традиционно старается свалить дело на копирайтера.
Подобный «дизайнер» слабо разбирается в маркетинге, воронках, да и этапы работы по проекту не представляет. Вы хотите это узнать, а ему почему-то неинтересно! Как можно «творить» без этих знаний? Наверное, бездарно. Я не дам ответ на такой вопрос.
Отсюда так много бэдовых, убогих, хаотичных одностраничников, которые раздражают потребителя, заставляют его ненавидеть все лендинги на свете. Хотя грамотно созданная структура должна работать и приносить дивиденды, но где эта грамотность?
Экономией добились того, чего добились: этот формат оказался тупиковым, хотя изначально придуман был с определенной целью. Даже ее горе-разработчики не учитывали, а заказчики игнорировали.
Получился переизбыток лендингов, как это ранее случилось с переизбытком сеошных текстов под ссылки и анкоры, которые заказывали килотоннами. Лендинги, конечно, пока не убрали полностью, как это было сделано со ссылочной массой, но от органической выдачи отрезали.

Есть не просто креативные, но и грамотные дизайнеры, которые дали себе труд изучить особенности разработки концепции, создания «воронки продаж». Вам повезет, если вы найдете профессионала, способного самостоятельно действовать на первом этапе – исследовать нишу, сформировать структуру, эскизный прототип для своих макетов. Ему достаточно понять задачу, то есть получить ТЗ с пожеланиями.

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

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

Копирайтер облечет идею в доходчивые слова и предложения, подстроит их под картинку без потери смысла. Бессмысленный набор букв превратится в осмысленную воронку продаж.

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

Яркий пример. Представьте: вы строите дом, но сначала решили купить мебель для помещений. Как вы после этого будете подстраивать проект под нее? Получится не дом, а карточный домик, зато с наполнением. Только вот местами мебель придется подпилить или частично выкинуть, потому что гарнитур не пройдет из-за коммуникаций, например. Где-то вылезет вентиляционный короб или труба водоотведения.

По правилам строительства сначала продумывается проект (= концепция страницы).
Создается проектная документация (= стартовое прототипирование, схема расположения блоков). В ней - расчеты, архитектурные эскизы, все данные для строительства.
На их основе отрисовывается графический макет и демонстрируется в 3D, дорабатывается, утверждается (= макет сайта + веб-прототип на его основе, где уже можно что-то нажимать, пробовать, совершать переходы и пр.).
Далее идет монтаж - от фундамента до крыши (= верстка).
Затем все это чистится от мусора, подключаются коммуникации, идет пуско-наладка (= отладка и доработка, навешивание модулей).
Лишь после этого пространство наполняется нужными предметами интерьера (= текстовый и прочий контент).
Иногда можно уже на стадии финишной отделки планировать интерьер, потому что ясны параметры пространства (= написание текста под макет без верстки).

Если вам требуется коммерческое предложение, например, ему графика не нужна. Я напишу - вы разместите на своем бланке и отправите. Корпоративный бланк = графика. Она уже есть. Объявление в газету (не графическое) тоже не требует макета, там все строго – символ-деньги. Деловая переписка не нуждается в обертке и так далее.

Если есть графика, макет делают до текста!

Этапы работы с нуля: веб-проект классического формата, где в приоритете тексты

Схема создания уникального (не шаблонного) сайта единая, и не важно, какой категории этот веб-проект, какой у него формат, какое направление у вашей деятельности. Все начинается с определения задачи. Кто-то действительно должен ее поставить.

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

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

Вам нужны нерентабельные вложения?
Если нет, то потратьте время на изучение вопроса.

1 этап: определение целей разработки, проведение исследований, анализа рынка и ниши

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

Станьте своим клиентом. Изучите, что предлагают конкуренты, но не как владелец бизнеса, а как их потенциальный заказчик.
Поймите, почему там или сям вы испытываете дискомфорт. Желательно смотреть не только на те сайты, которые окажутся в топовой выдаче: всегда помните, что туда в основном попадают за деньги.
Редкий сайт проскакивает в ТОП-10 выдачи бесплатно. Его легко отличить: он наполнен важной и нужной вам информацией.
Вот на такой и нужно равняться, если вы не готовы выбрасывать огромные деньги на абонентку и сео-продвижение.
Даже если вы не окажетесь в ТОП-10, вы попадете в зону интересов вашей аудитории, потому что она уже научилась отличать то, что продвигают за деньги, но при этом не соответствует действительности, от того, что имеет реальную ценность.

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

Все интересные и УДОБНЫЕ пользователю находки вносите в какую-нибудь таблицу, потом изучите ее. Что-то вы уберете, что-то оставите, что-то добавите. В любом случае у вас появится стартовая схема того функционала, который привлечет, а не оттолкнет вашего потенциального клиента.

Появится понимание того, что ждет аудитория от вашего проекта, а ждет она не типового решения, которых итак полно в сети, а удобного для нее. Зачем вам становиться таким же, как конкуренты? Станьте лучше, только не за счет какой-то безумной дизайнерской креативности. Лучше = удобно, привычно и понятно.

2 этап: разработка технического задания (ТЗ) для исполнителей

ТЗ – важнейшая часть работы. Идея, концепция обретает в ТЗ управленческую функцию. Составить задание может как заказчик, так и исполнитель. Самый удачный вариант – совместная работа.

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

Если вы уверены, что нашли честного и профессионального исполнителя, не стоит на него слишком давить: он знает то, что вы знать не можете, ведь это не ваша специализация. Составление правильного ТЗ - необходимый шаг. Предусмотреть придется все, потому что на основании задания будет формироваться и смета.

ТЗ – не статичный инструмент. До определенного этапа задание можно дополнять и менять. Оно обсуждается и согласовывается обеими сторонами.
После старта работы по ТЗ расширение, довнесение каких-то пожеланий к модулям и другим элементам, пойдет за дополнительную плату. Это означает, что работа обратима, но вложиться уже придется сверх сметы.
Иногда изменения невозможны, то есть уже вовсе необратимы проведенные действия. Придется не переделывать или дополнять, а создавать новый проект. Это следует понимать, так что к составлению задания подходите со всей ответственностью.
Да и плата за необдуманные решения с доработкой под новые может оказаться достаточно высокой. Исполнителю придется рушить что-то уже созданное, начинать сначала.

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

Учитывайте это. Недорогие или вообще бесплатные изменения допустимы на этапе начального прототипирования (составления графической схемы), даже создания макета. Это черновой вариант, который как раз и создается для предметного обсуждения и внесения правок.

На этапе верстки уже будет сложнее уговорить исполнителя менять что-то бесплатно. Даже дизайн-макет – это уже выполненная работа. Что включить в ТЗ на создание сайта с нуля:

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

3 этап: создание дизайн-макета веб-проекта

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

создает оговоренное в ТЗ количество схем (прототипов) с черновым графическим представлением концепции (делается все для главной страницы, потому что построение всех прочих типовых будет аналогичным, отличается у них только наполнение);
выбирает с клиентом наиболее подходящий графический прототип концепции, дорабатывает его, согласовывает, утверждает;
создает макеты нетиповых внутренних страниц, которые чем-то отличаются от ведущей схемы (например, карточки товаров/услуг ИМ, служебные страницы и пр.);
если адаптивная версия не предусмотрена, то дополнительно формирует прототип мобильной версии.

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

В этой версии можно ставить демофотографии для наглядности. Главное – прорисовка всех основных элементов дизайна, включая шапку, все виды меню, полная навигация, включая «хлебные крошки», то есть дополнительную навигацию.

4 этап: верстка, программирование и внедрение в CMS

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

универсальность верстки на CMS, возможность внедрять дополнительные модули без серьезной, сложной и длительной работы;
чистота кода (чем он меньше и грамотнее, тем быстрее загрузится сайт, понятнее будет роботу);
кроссбраузерная верстка (Cross-browser) - корректное отображение страниц в любых системах (Chrome, Firefox, Opera и пр.);
валидность (корректность) применения функционала CMS при внедрении дизайна, структуры, модулей, всего, что было утверждено (во всем это должен иметь возможность без труда разобраться ваш админ или аутсорсер, который потом будет вести проект).

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

5 этап: наполнение сайта

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

Конечно, именно контент создает уже не условную, а реальную ценность проекта, поэтому можно начинать наполнение на пятом этапе. Кто будет наполнять? Об этом надо было подумать при формировании команды.

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

Ваш контент не сработает, если займется наполнением пофигист. Такие даже не проверяют:

корректно ли все «закинутое» разместилось на странице;
сможет ли пользователь читать без напряжения;
не превышен ли размер иллюстраций;
верно ли выбран кегль;
не исчезли ли после переноса важные теги;
не засорился ли код;
не появился ли переспам из-за альтов и так далее.

Текстовые материалы отдавайте на написание только профессиональному копирайтеру! Если ошибки выкладки можно быстро исправить, то написать новый текст – это накладно и долго.

Эксперименты с текстовым контентом сегодня не проходят. Это ваша репутация, ваши доходы и расходы, позаботьтесь об этих статьях.

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

Лучше будет у него самого конверсия и конверсия продаж, меньше работы у продающего менеджера. Именно полезный контент погонит вам не грязный, а чистый, целевой трафик. Он будет бесплатным!

Именно полезный контент исключит постепенно или ощутимо снизит ваши рекламные вложения без ущерба для ТОПовых позиций. В нем также залог стабильности естественного показа по запросам при любых алгоритмах.

6 этап: запуск проекта в Сети

Разработчик или веб-мастер переносит проект на хостинг. Потребуется купить или предоставить исполнителю уже существующее доменное имя (адрес). Если в ТЗ были внесены некоторые предварительные работы по сео-оптимизации (добавление проекта в Яндекс и Google вебмастера, создание HTML карты сайта, установка метрики и аналитики, пр), они выполняются на этом этапе.

7 этап: тестирование и отладка

Исполнитель или заказчик просит несколько человек (друзей, знакомых, коллег, семью, соседей и так далее), протестировать, как грузится сайт с разных устройств, работают ли подключенные модули, открываются ли корректно внутренние ссылки (перелинковка) и/или внешние, не утяжеляют ли картинки страницы и пр. Тестирование может длиться достаточно долго, но и сам сайт с нуля – дело небыстрое, особенно его наполнение.

8 этап: развитие и продвижение проекта в Сети

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

Конечно, все вышеописанное касается тех проектов, которые реально строятся с нуля.
Сейчас многие разработчики и дизайнеры только обещают такой вариант, но при этом вполне успешно пользуются шаблонами.
Теоретически – это правильно. Зачем изобретать велосипед? Однако для серьезного бизнеса шаблоны в чистом виде не подходят.
Если они и выбираются, то адаптация под задачи идет все по тем же этапам – от идеи до ее реализации и продвижения. Может быть, немного снижается стоимость за счет того, что основа уже существует.

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

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

Лучше заказать один раз грамотное наполнение, чем потом переделывать, теряя время, деньги и нервы. Завоевывайте аудиторию экспертностью и уважением к ней! Дайте ей то, что она хочет получить – лучшее в ее, а не вашем понимании.

Портфолио Elli (копирайтер Елена Котова)