Что такое — создание сайта?

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

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

Если заказчик затрудняется с формированием ТЗ, а от количества непонятных слов в брифе у него волосы на руках встают дыбом, то нужно ему помочь. И прежде, чем помочь — надо понимать самим, как и из чего состоит процесс создания сайта.
Я разделил процесс создания сайта на несколько простых этапов:
 
Нулевой этап: цель
Это основа основ. Это фундамент. Всегда нужно определяться, для чего необходимо разработать сайт.
Заказчик может сколько угодного говорить «ну, у всех есть сайт, вот и мне надо» в течение недели, а затем выдать «ну, ещё каталог товаров надо, а ещё неплохо бы было электронную оплату прикрутить». И вся работа, проделанная в течение недели, окажется пустой тратой времени.
Поэтому нужно задать как можно больше точных и понятных вопросов, чтобы заказчик раскололся (или подумал) и рассказал, для чего ему нужен сайт на самом деле.
 
Первый этап: структура
Перед созданием структуры сайта настоятельно рекомендую изучить продукты заказчика, его целевую аудиторию в интернете и ближайших конкурентов (сайты, приложения).
Любой заказчик хоть немного, но представляет внешний вид своего сайта — страницы, пункты, блоки. Поэтому стоить уделить час-два времени на то, чтобы обсудить и прописать с заказчиком в любом удобном текстовом документе (MS Word/Excel, Google Таблицы, etc) структуру сайта. Каждую страницу. Зачастую уникальных страниц получается около 5-7 остальные являются однотипными, т. е. по структуре они полностью идентичны, различен лишь смысл контента (например, на автосайтах это страницы с кредитованием и страхованием).
Готовую структуру передаём на растерзание интернет-маркетологу, который пропишет основные пользовательские сценарии и расставит формы захвата (если они необходимы).
 
Второй этап: прототипирование
На данном этапе дизайнер, исходя из структуры, накидывает небольшой прототип сайта при помощи Adobe XD или Adobe Muse (либо таких сервисов, как https://gomockingbird.com/ ). Параллельно с этим определяемся со стилистикой будущего сайта.
Готовый прототип согласовывается с заказчиком.

Второй этап может занимать и день, и два, и три. Но это — лучший способ сократить время создания макета. Нет необходимости пытаться что-то придумать, нажимая пальцем в небо. Кроме того, вы экономите время заказчика и дизайнера, а значит — экономите и деньги.
 
Третий этап: UI
Когда на руках есть структура и прототип  — можно смело приступать к разработке визуальных макетов.
Процесс кропотливый и монотонный, с подбором цветов из брендбука заказчика для тех или иных форм, с отрисовкой уникальных тематических иконок, подбор web-шрифтов и многое другое, чтобы может входить в процесс создания макетов.
После получения от дизайнера готовых макетов — идём на согласование к заказчику. Если всё хорошо, то готовим UI-kit для верстальщиков.

UI-kit — это графическое изображение всех элементов интерфейса, с которыми так или иначе взаимодействует пользователь. В такой комплект, как правило, входят:
элементы навигации — табы, вкладки, кнопки prev/next, индикаторы, флажки,
элементы взаимодействия — кнопки, текстовые поля, слайдеры, чаты.
UI-kit помогает верстальщикам видеть, как те или иные элементы должны отображаться при включении/выключении или правильном/неправильном действии (например, при неправильном заполнении, поле для ввода email должно приобретать бордер красного цвета размером 2 пикселя).

 
Четвёртый этап: вёрстка
Это один из самых магических этапов для заказчика — неделю назад он видел макеты в картинках, а сейчас они ожили! Можно нажимать на кнопки, заполнять формы или просто показывать всем своим знакомым.
 
Пятый этап: логика
Логика. Бэк. Back-end. Этап, когда верстальщики передали всё в руки программистов. Здесь кнопки начинают работать по замыслу, а данные с форм приходить на почту/в CRM. Заказчик не понимает, почему этот процесс занял столь длительное время, ведь сайт (под ним понимает «вёрстку») уже был готов!
 
На этом этапы создания сайта заканчиваются и готовый продукт переезжает на хостинг заказчика.

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

Поделиться
Отправить
Запинить
Популярное