В этой статье мы разберем основные ключевые этапы создания сайта, которые нужно знать заказчикам при сотрудничестве с дизайнерами. Эти знания помогут выбрать дизайнера с прозрачным, эффективным и поэтапным сотрудничеством, которое не приведет к увеличению сроков реализации, увеличению стоимости, минимизирует количество правок и будет разделено на комфортные для двух сторон итерации.
Глобально разработку сайта можно разделить на 3 шага
- Анализ и проектирование
- Разработка дизайна
- Верстка и настройка
Анализ и проектирование
Цель шага — познакомиться с вашим продуктом, понять сильные стороны компании и товара и проанализировать конкурентов, чтобы выявить эффективное позиционирование и презентационные решения. На основе результатов разрабатывается прототип сайта.
1 этап — Брифование
Разработка сайта, будь то лендинг, многостраничный сайт или интернет-магазин (ИМ), всегда начинается с брифования.
Бриф может быть представлен в виде анкеты или небольшого интервью. На этом этапе происходит знакомство, выясняются цели и задачи разработки сайта.
На основе брифа и дополнительных материалов создается ТЗ (техническое задание).
2 этап — Прототипирование
После формирования ТЗ, сбора дополнительного контента и исследования продуктов конкурентов стартует этап разработки прототипа. Продумывается структура страниц, определяются посылы и смыслы каждого блока, составляется ТЗ для копирайтера. Если проект предполагает наличие нескольких страниц, то прототипы создаются для каждой типовой страницы и разрабатывается карта сайта.
Этап прототипирования желательно разбивать на подпункты:
- прототип с низкой детализацией (помогает упаковать идею в цифровой документ и согласовать объем работ и стоимость)
- прототип с высокой детализацией (здесь работа ведется над содержимым: текстами, описаниями, подписями, фотографиями. Контент определяет основную идею и помогает расставить акценты, донести до целевой аудитории ценное сообщение от бизнеса. Этот этап прототипирования крайне важен, поскольку согласованный контент, а не «рыба», непосредственно влияет на дизайн)
Например, если в начальной версии макета в блоке «О компании» предполагается использование 2-3 предложений для заполнения пространства, после этого дизайнер приступает к своей работе, создавая дизайн и, иногда, занимаясь версткой, после чего предоставляет его заказчику. Однако, как часто бывает только после этих этапов заказчик предоставляет актуальный контент, который уже не вписывается в ограниченное количество предложений (2-3), а состоит из двух абзацев текста. Это изменение объема контента требует полной переделки дизайна, что приводит к задержке в сроках реализации проекта и увеличению бюджета.
! Важно помнить, что прототип — это не дизайн сайта, это его основа — «костяк». Это этап не про дизайн и эстетику. На этом этапе не подбираются цвета, шрифты и не рисуются блоки в их конечном виде. Макет прототипа презентуется в черно-белом варианте со стандартным визуалом блоков.
Разработка дизайна
Цель шага — разработать современный дизайн сайта, который будет удобен в использовании и понятен ЦА, чтобы посетители могли легко найти ответ на свой запрос и выполнить целевое действие. Также сайт должен быть продолжением фирменного стиля компании, транслировать ее смыслы, ценности и передавать нужную атмосферу.
3 этап — Сбор референсов
Затем переходим к этапу подбора референсов и составлению мудборда. На этом этапе также можно запросить примеры понравившихся сайтов у заказчика, если у вас не было данного вопроса в брифе. Также важно самому дизайнеру проанализировать бренд/компанию, нишу, то какую атмосферу должен передавать сайт.
Референсы — это примеры сайтов или отдельных блоков других компаний и любые другие графические изображения, которые помогают в разработке онлайн-площадки. Они служат связующей частью для дизайнера и заказчика в понимании визуальной концепции и идеи разработки проекта. Это помогает заказчику понять, в каком направлении будет разрабатываться весь дизайн сайта.
4 этап — Разработка концепции
На этом этапе проектируется несколько блоков главной страницы сайта, если это многостраничник либо несколько первых блоков лендинга. Количество варируется от 1 до 3 блоков. Также концепция может быть представлена в нескольких вариантах.
На этом этапе подбираются шрифты и цветовая палитра.
В результате этапа согласовывается стиль, в котором будет разрабатываться весь сайт.
5 этап — Разработка дизайна
Только спустя 4 этапа, начинается основная разработка визуальной составляющей проекта. На основе прототипов и согласованных текстов отрисовывается полностью дизайн лендинга или главной страницы корпоративного сайта.
В результате на согласование выносится макет дизайна сайта, спроектированного в Figmа.
При проектировании многостраничных сайтов, после согласования дизайна главной страницы, добавляется отдельный этап дизайна всех остальных страниц сайта. Это делается для того, чтобы избежать недопонимания между дизайнером и заказчиком, сделать процесс более прозрачным и разделить разработку крупного проекта на несколько комфортных итераций.
Посмотреть кейс на сайте Studio.11
Верстка и настройка
Верстать сайт можно на конструкторе, например, Тильда, а также на специальном движке, передав дизайн-макет программисту.
Я разрабатываю сайты под ключ на Тильде, поэтому дальше буду рассказывать про этот способ.
Цель этапа — перенести макет дизайна в Тильду, адаптировать под разные разрешения, настроить формы для приема заявок и сделать базовые настройки SEO.
6 этап — Верстка на Тильде
Верстка может быть разной сложности, все зависит от ТЗ и макета дизайна. Чаще всего в своей работе я использую Zero-block, который представляет собой адаптируемое пространство, где можно делать индивидуальные дизайны. Тильда покрывает бОльшее количество запросов по уровню дизайна, в ней удобно работать и легко адаптировать макет под разные разрешения, а также намного проще масштабировать проекты. И, конечно, в зависимости от ТЗ можно сделать определенные блоки стандартными по функциональности, что в свою очередь поможет заказчикам самостоятельно с легкостью редактировать контент в дальнейшем ведении сайта.
Также сайт на Тильде можно модифицировать при помощи CSS или HTML кодов. С помощью этого можно добавить wow-эффект или улучшить его функциональность.
7 этап — Финальная настройка
На этом этапе проводится финальная настройка сайта — настраиваются формы, сервисы приема заявок, подключается CRM, дополнительные сервисы, подключается домен, SSL-сертификат и настраивается SEO.
После этого сайт полностью готов к релизу и приему заявок.
Подведем итог. Разработка сайта в широком смысле состоит из 3-х этапов.
- Анализ и проектирование
- Разработка дизайна
- Верстка и настройка
Еще раз хочу сакцентрировать внимание на одном моменте. Формулировка «Сделать дизайн сайта» часто ошибочно воспринимается буквально — нарисовать сразу сайт. Часто люди упускают важные этапы подготовки такие как брифинг, анализ конкурентов, услуги/продукта, прототипирование, а начинают сразу «творить». После этой статьи, я уверена, вы полностью закрыли для себя вопрос правильного поэтапного сотрудничества с веб-дизайнером.
Также есть еще один важный этап в сотрудничестве дизайнера и заказчика — это подписание договора. Я не включила его в общую линейку шагов, т.к. этот этап не всегда используется. Однако, его лучше применять, с ним будет спокойнее работать как дизайнеру, так и заказчику проще согласиться на сотрудничество. Этот шаг можно включить после этапа проработки прототипа низкой детализации, когда стала ясна задача, объем работы, сложность и сроки.
Если вы хотите начать работать со мной над вашим проектом, то заполните небольшой бриф с несколькими вопросами на сайте, или заполните заявку на бесплатную консультацию, или напишите мне в телеграмм.
Подписывайтесь на наши соц.сети! Мы в VK, YouTube и Telegram.