Инструменты для создания структуры и протипа сайта

Внимание к деталям – залог успеха любого проекта.

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

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

Если проводить параллели между построением дома и разработкой веб-платформ, то дизайн дома – это и будет  дизайн самого сайта, а проект - техническое задание, согласного которому необходимо проводить разработку.

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

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

В первую очередь необходимо построить иерархию разделов сайта. Весьма просто это сделать используя инструменты для создания mind-map. Последнее время я использую coggle.it – удобный и простой в использовании инструмент.

Визуально она выглядит вот так:

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

Следующий этап - разработка прототипов страниц будущего сайта. Здесь также существует огромное множество сервисов. Одни из наиболее популярных и, что приятней всего, имеют бесплатный план – это Figma и Draftium.com.

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

Так выглядит интерфейс для командной разработки дизайна:

Точно также можно создать и прототип:

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

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