Этапы разработки сайта на Тильде + шаблон таймлайна

Как может строиться процесс разработки сайта
SVOEMEDIA.SPACE
ПОДЕЛИТЬСЯ
TEMPLATE ID: 12089636, 12089562
1. Перейдите по ссылке. 2. Выберите в настройках Файл, Создать копию. 3. Задайте название документа и сразу переместите его в нужную папку (управляйте кнопкой Назад, чтобы найти ее). 4. После этого нажмите Выбрать, и документ окажется там, где вам нужно и будет доступен для редактирования.

Альтернативная версия — скачать файл на свой компьютер (ФайлСкачать).
Саша Колташова
SVOEMEDIA
Мы выделили 7 этапов. Внутри каждого из них уже начинаются свои тонкости, а для некоторых проектов появляются подэтапы.
Шаг 1. Провести исследование: изучить себя, аудиторию, конкурентов, найти вдохновляющие примеры
Задача этапа — получить ответы на вопросы:

— кто делает? Исследовать компанию или персону, для которой разрабатывается проект, собрать все требуемые данные;
— для кого делаем? Получить представление об аудитории, ее желаниях и болях;
— кто делал до нас? Изучить конкурентов и собрать мудборд (доску с вдохновляющими примерами).
Кто обычно делает: стратег проекта, маркетолог
Шаг 2. Идея и структура будущего сайта
Все твердят: «Сайт начинается с контента», «Контент — король» и вот это все. На самом деле это не совсем так. Сайт начинается с идеи и понимания структуры.

Задача этапа — получить ответ на вопрос «Что делаем?». Сколько в нашем сайте будет страниц? О чем примерно будем на них говорить и почему? Результатом этого этапа должны стать описанная концепция, схема будущего сайта и ТЗ на тексты.
Кто обычно делает: стратег проекта, маркетолог
Шаг 3. Написать тексты
Этот шаг можно разбить на несколько частей:

1. Придумываем центральный оффер или работаем с его формулировкой. Кто мы такие и что нам надо от посетителей сайта?
2. Пишем текст. В уроках попробуем рассказать о методике, которая позволит написать текст, даже если вы этого никогда не делали.
3. Редактируем. В агентстве это обычно делает профессиональный редактор — указывает на слабые места. В уроках расскажем, как можно «сымитировать редактора».
4. Проверяем ошибки. Корректор вычитывает текст.
5. Оптимизируем текст. Прописываем основные мета-теги.
Кто обычно делает: автор, редактор, корректор, SEO-специалист
Шаг 4. Подготовить прототипы
Прототип схематично изображает полную структуру сайта, расположение текста (работаем уже с реальными текстами), изображений, видео, ссылок.

Важно понимать, что прототип — это не дизайн. Это просто серая схема с текстами, которую дизайнер будет использовать далее, «натягивая» дизайн на этот каркас.
Кто обычно делает: дизайнер
Шаг 5. Определиться с дизайном (эскизы) и отрисовать типовые блоки
На этом этапе можно подготовить несколько визуальных концепций. Для этого не нужно отрисовывать все страницы сайта, достаточно одной, например, главной. После того как определимся — готовим визуализацию для типовых блоков, которые встречаются на других страницах, и фиксируем стили: кегли и начертание текста, отступы и цветовые решения.
Кто обычно делает: дизайнер
Шаг 6. Верстка сайта на Тильде
Этот шаг можно разбить на несколько частей:

1. Верстка главной страницы, типовых блоков, хэдера и футера. Именно они определяют, как сайт будет строиться дальше — как хорошо вы сделаете заготовки = как быстро и правильно будет идти далее верстка.
2. Вот здесь готовится адаптив главной и типовых блоков: как сайт будет выглядеть на планшете и смартфоне.
3. Верстка корневых страниц. Готовим основные типовые страницы (которые могут служить шаблонами для прочих — например, мы создаем одну страницу Услуги, а все остальные будут строиться по этому же принципу).
4. Наполнение контентом. Здесь речь пойдет о заполнении карточек товаров, или верстке статей блога, или заполнении всех Услуг.
5. Верстка технических страниц. Страницы Ошибки и Успеха, Политика обработки персональных данных, Публичная оферта.
6. Проверяем адаптив. Убедитесь, что все страницы со всех устройств отображаются корректно.
Кто обычно делает: дизайнер
Шаг 7. Техническая оптимизация, подключение необходимых интеграций (системы аналитики, рассыльщики) и систем оплаты
Какие работы нужно провести:

1) тестирование работы сайта (проверить, чтобы все кнопки нажимались и вели, куда нужно);
2) подключение и тест форм (куда уходят данные при заполнении форм?);
3) подключение и тест иных интеграций (от CRM до платежных систем);
4) подключение систем аналитики (Яндекс Метрика и Google Analytics) и пикселей (например, Facebook и ВКонтакте);
5) подключение SSL;
6) проверка работы технических страниц;
7) проверка индексации;
8) проверка метатегов и установка бейджей для социальных сетей;
9) установка фавикона;
10) подключение доменного имени.
Кто обычно делает: технический специалист
Не пугайтесь, для создания сайта не обязательно нужны все эти 10 человек, перечисленные в «Кто обычно делает»
В агентстве за этапы отвечают разные люди, потому что они — профессионалы именно в своей области, в этом типе работ. И в конечном итоге это позволяет быстрее, лучше и эффективнее решать задачи клиентов.

Мастер же обычно делает все эти этапы один, самостоятельно — по собственному желанию или в силу обстоятельств. Либо же часто встречаются тандемы из автора и дизайнера (как, например, было на ранних этапах SVOEMEDIA).

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

Для мастеров-фрилансеров. Чтобы не вдаваться в философию, посмотрите лекцию Покраса Лампаса о мастере в современности
Как рассчитать время?
Пока вы не поймете, за сколько вы один или ваша команда выполняете тот или иной этап работ — нормальный реалистичный таймлайн вы не составите. И это нормально — но зато у вас уже есть инструмент :). Адекватную оценку скорости движения по этапам можно получить, если разработать несколько проектов. Тогда вы сможете предсказывать планируемое время на те или иные задачи.

Попробуйте сделать предположение, сколько времени займут этапы, и — ориентируйтесь на ваш дедлайн — обычно это мотивирует :)
Помогло? Поделитесь мнением здесь, задайте вопросы в комментариях
Поделитесь находкой с друзьями! Им полезно — нам приятно :)