Оффтоп Денис Олексюк
470

Этапы создания сайта: на заметку Заказчику

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

В закладки

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

В том или ином виде, но все эти этапы при заказе разработки сайта Вы пройдете!

Запрос

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

Как выбрать веб-студию и получить объективное КП на сайт читайте в нашем материале «Как выбрать подрядчика для разработки сайта»

Оценка

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

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

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

Договор и ТЗ

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

Как составляется ТЗ и какие пункты в себя включает читайте в отдельной статье «Техническое задание: что это и зачем составляется?»

Четкая постановка задачи - залог успеха

Дизайн

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

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

На этапе дизайна, часто Заказчик задает вопрос, - «а что за бред тут написаны, какие-то английские тексты, где мой сайт?» Стоит понимать, что сейчас необходимо оценить только визуальную составляющую сайта, цвета, шрифты, картинка в шапке, меню и кнопки выглядят так как вы хотели? Если да, то не беспокойтесь на этапе наполнения вместо классического текста-рыбы «Lorem ipsum…» появятся тематические тексты про вашу компанию

Верстка

Когда весь дизайн согласован с клиентом, готовится верстка, обеспечивается адаптивность. Зачастую мы готовим только десктопную версию дизайна, а адаптивность обеспечивает фреймворк bootstrap и здравый смысл, дизайнер просто просматривает готовую верстку в мобильных версиях и дает рекомендации верстальщику как лучше свернуть дизайн. Такой подход экономит примерно 50% времени дизайнера, а на выходе получается сайт с отличной мобильной версией, за счет использования при дизайне и верстке заранее подготовленных сеток.

Разработка

Готовая верстка натягивается на CMS и обеспечивается работоспособность интерактивных элементов, нажимаются кнопки, отправляются формы, публикуются новости и т.д.

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

Именно разработчики превращают отдельные картинки и странички в стабильно работающий сайт, отвечают за его быстродействие и отсутствие «глюков»

Наполнение и оптимизация

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

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

Он же приводит в порядок фото, типографику и систематизирует присланные клиентами описания кейсов/услуг/истории компании.

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

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

  • визуальный тест дизайна
  • проверку адаптивности путем изменения размеров окна браузера и с реального мобильного и планшета (иногда вылезают внезапные глюки, которых нет на ПК)
  • проверку быстродействия через Google PageSpeed, стараемся попасть в зеленую зону, но это не всегда возможно, поэтому ориентируемся на желтую.
  • проверку текстов на ошибки
  • проверку отправки форм/заявок, работы чата
  • проверку работы уникального функционала (калькуляторы, фильтры и т.д.)

Правки

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

Хорошее ТЗ и участие Заказчика в разработке на всех этапах позволяет свести правки к минимуму

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

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

Публикация

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

После этого проект берется на техподдержку и продвижение!

Чего стоит опасаться?

Слишком быстро

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

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

Шаблоны сайтов, это неплохо, часто помогает хорошо сэкономить и быстро запустить сайт, главное, чтобы шаблон тщательно адаптировали под ваш бизнес и доработали

В варианте «сайт за 5000 за 5 дней» это зачастую готовый Wordpress шаблон, в котором остаются английский текст элементов интерфейса (category, January, comments и т.д.) и ненужные блоки с притянутым за уши контентом просто потому, что они уже были, смотрится это все обычно довольно непрезентабельно.

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

Слишком дешево

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

Без технического задания

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

Без промежуточных согласований

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

Желаем успеха в разработке сайта для вашего дела!

digital агентство - ADVIANA

Разрабатываем качественные, адаптивные сайты и оказываем полный комплекс услуг по продвижению бизнеса в Интернете. Экспертно. Выгодно. Результативно.

Получить консультацию по реализации Вашего проекта можно написав на почту sales@adviana.ru или оставив заявку на нашем сайте http://adviana.ru

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Денис Олексюк", "author_type": "self", "tags": [], "comments": 9, "likes": 4, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 41441, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 41441, "author_id": 183833, "diff_limit": 1000, "urls": {"diff":"\/comments\/41441\/get","add":"\/comments\/41441\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/41441"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

9 комментариев 9 комм.

Популярные

По порядку

Написать комментарий...
2

всё индивидуально, причем настолько, что от этого может зависеть успех всего бизнеса, если это интернет-магазин уж точно. я, например, сайты для своих проектов сам от начала до конца разрабатывал. не в части кода, а в части как оно на каждом этапе должно работать. удивляюсь когда собственники бизнеса не вникают в работу сайтов, а типа "ну сделайте вот чтобы оно работало и чтобы заказы шли")))

Ответить
0

Очень правильный подход, нужно принимать активное участие в обсуждении идей, ведь никто не знает ваш бизнес лучше вас

Ответить

Комментарий удален

–1

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

Ответить

Комментарий удален

0

Сайт компании без https? Вы серьезно?)

Ответить
4

А, все норм, все портфолио такое же

Ответить

Комментарий удален

0

Разработка сайтов идет тем же путем, который раньше прошло материальное производство. В свое время на производствах работали высококлассные специалисты, но потом все инженерные знания были вложены или в системы проектирования или в мозги ЧПУ. И теперь изготовить уникальную деталь может любой муфлон, у которого в детстве дома был компьютер + за плечами месяц обучения интерфейсу ЧПУ станка.
То же самое и с сайтами - ставишь себе бесплатный Mobirise и фигачишь на нем как в Word адаптивный сайт, который одинаково хорошо отображается на большом мониторе и на смартфоне.
И верстать там уже ничего не надо - все уже сверстано до нас.
Ваша задача - контент и свои изображения. И все, для лендинга или корпоративного сайта - за глаза.

Ответить
0

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

Ответить
2

Я к тому, что "сайт за 5 тысяч за пять дней" - вполне реально и далеко не факт, что он будет плохой. Я бы только сказал - 5 тысяч рублей и один-два дня, потому что по 1000 р. в день работать нерентабельно даже пионеру.

Ответить
0

Ну это частные случаи работы фрилансеров.

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

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления