В первую очередь необходимо подробно сформулировать задачу.
Никакого специального брифа для подготовки техзадания не существует, это некорректный подход.
Для постановки задачи вполне достаточно вдумчивой беседы на 15-20 минут.
Создание нового проекта проще всего начать с изучения референсов и с выставления акцентов на интересных деталях.
Подобрав несколько вкусных примеров, я смогу создать скелет для разработки эффективного сайта.
Обозначив задачу и определив референсы, можно приступать к созданию структуры будущего проекта.
Ментальная карта представляет из себя скелет сайта: навигация и порядок размещения элементов на всех типовых страницах.
Структура в Miro для корпоративного сайта
Этот скелет, с учетом прочих нюансов, будет служить техзаданием для дизайнера.
Утвердив структуру проекта, я выдаю клиенту чек-лист для сбора необходимой информации.
Эти материалы потребуются после технической сборки на этапе наполнения сайта.
Кроме того, структура укажет на необходимый функционал и позволит определить технический стек, чтобы в будущем можно было развивать проект без необходимости проводить рефакторинг.
После создания структуры к проекту подключается веб-дизайнер для отрисовки дизайн-макета сайта.
На данном этапе необходимо определить фирменный стиль будущего проекта:
- Цвета
- Шрифты
- Фоновые элементы
- Межблочные отступы
- Глубину скругления элементов
Чтобы поймать и развить вкусный визуальный ряд, иногда приходится проводить несколько итераций отрисовки. Дизайнер создает прототипы: 2-3 очень разных варианта первого экрана главной страницы.
Дизайн-макет в Figma для корпоративного сайта
Именно так и выглядит процесс создания фирменного стиля с нуля без брендбука. Мы рисуем интерфейс до тех пор, пока каждый участник процесса не ощутит эстетическое удовольствие от результата.
Кроме того, некоторые лучшие идеи не приходят в голову до тех пор, пока вы не зайдёте достаточно далеко. Мы нередко дорабатываем отдельно взятые элементы и после релиза, но основной стиль проекта определяется в процессе отрисовки главной страницы.
Это важно, посколько вносить правки в дизайн-макет значительно проще, чем редактировать уже сверстанный интерфейс. К разработке можно переходить только после утверждения фирменного стиля.
Утвердив дизайн-макет, я разворачиваю выбранный заранее движок (или фреймворк) на закрытом домене и начинаю верстку главной страницы, включая адаптив под мобильные устройства.
Каждое обновление технического характера подлежит логированию — я веду подробный конспект разработки, стараясь ограничиться понятными формулировками без сложных технических терминов.
Логирование доработок обеспечивает простоту входа в проект новых специалистов и позволяет владельцу проекта отслеживать статус задач в процессе первичной разработки и на этапе доработок.
Любой многостраничный сайт, вне зависимости от задачи, с технической точки зрения разрабатывается под дальнейшее SEO-продвижение в связке с проверенным специалистом.
Проект дорабатывается для эффективной индексации в органической выдаче:
- Автозаполнение мета-данных
- Хлебные крошки с микроразметкой Schema.org
- Динамическая карта сайта
- Подключение и настройка основных метрик
- Оптимизация скорости загрузки
После релиза сайт сразу начинает корректно индексироваться в поисковой выдаче.
Подготовка документации является стандартом разработки, наравне с соблюдением методологии и с обязательном добавлением комментариев к каждой функции в исходном коде.
Инструкции представляют из себя скриншоты со стрелочками:
Пример инструкции для управления проектом
Ближе к запуску сайта я всегда запрашиваю у клиента список задач, которые владелец хотел бы уметь решать самостоятельно без привлечения программиста — и создаю соответствующие инструкции.
Подобный подход невольно дарит клиенту надежду на светлое будущее его продукта.
Для контроля за ходом разработки я создаю доску в Trello, чтобы хранить там входящие задачи, технические отчеты, инструкции и доступы.
Канбан-доска в Trello для управления сайтом
Доступ к Trello обеспечен через международный домен coffeehard.space в обход любых ограничений.
Под основные задачи, связанные с контент-менеджментом (обновление товаров, управление статьями, загрузка отзывов и т.д.) я предварительно создаю интерфейс в панели администратора.
Такой подход позволяет управлять проектом без навыков программирования.
Как правило, ближе к релизу проекта я выдаю клиенту доступ к панели администратора прямо на своем закрытом домене для оперативного наполнения страниц и для загрузки товаров.
После релиза владельцу сайта выдается полный доступ к проекту вместе с документацией.
Как только проект сверстан, адаптирован и интегрирован в панель администратора, я подключаю целевой домен к хостингу, провожу миграцию сайта, оживляю формы обратной связи, настраиваю метрики для отслеживания посещаемости и выхожу в релиз.
Сайт в релизе на целевом домене
При наличии старой версии сайта я создаю поддомен old.@ на том же хостинге и закрываю сайт на пароль во избежание индексации со стороны поисковых систем.
Это полезно на первое время для сверки перенесенного контента. И еще для истории, само собой.
Хостинг (виртуальный сервер) в обязательном порядке оформляется на владельца сайта.
Все проекты по веб-разработке
Исходники для изучения
Реальные примеры применения алгоритма, материалы и результат.
Изучите структуру, ознакомиться с дизайн-макетом и сравните с результатом для оценки качества разработки.
Многие проекты были доработаны после релиза, но основная структура сохранена.