Как разрабатывается дизайн интернет-магазина. Прототипирование.

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

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

Крайне не рекомендуется создавать прототип на основе "рыбных" текстов вроде Lorem Ipsum — такие тексты не имеют ничего общего с реальными данными, которые будут в дальнейшем размещаться на сайте. Если заказчик не представляет вам тексты на данном этапе, заставьте его это сделать. Даже, если заказчик говорит, что берет всю вину на себя, переделывать дизайн-макеты, а может и вообще готовый сайт потом придется все равно вам. А объяснить заказчику (особенно российскому), что он должен за это доплачивать, будет ой как непросто. Наш заказчик привык считать, что если вы озвучили сумму, то это полный лакшери-ол-инклюзив и ни за что больше доплачивать не нужно.

Декомпозиция задачи. План действий.

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

1. Из каких разделов будет состоять сайт?

Например: Главная, Каталог, Новости, Поддержка, Контакты.

2. Какие типовые страницы будут составлять содержимое каждого из разделов сайта?

Например: Главная, Страница каталога, Страница раздела каталога, Страница товара, Страница всех новостей, Страница отдельной новости, Страница поддержки, Страница контактов.

Не забывайте о том, что на сайте есть еще и технические страницы. Например, страница ошибки 404 (Страница не найдена).

Постарайтесь на этом этапе подумать, какие страницы будут еще. Уточняйте вместе с заказчиком, какую еще информацию он хотел бы разместить на сайте, какую информацию ВАЖНО разместить на сайте, чтобы сайт работал и выполнял свои функции.

3. Какие типовые блоки должны быть на каждой странице?

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

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

4. Каким должно быть наполнение каждого из блоков?

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

На этом этапе определитесь с тем, кто и какую информацию должен предоставить, кто должен подобрать изображения, кто должен провести фотосъемку, кто должен смонтировать видеоролик, кто должен найти фотографа и так далее. Как вы понимаете, от этих вопросов напрямую зависит бюджет проекта и сроки его выполнения.

5. О чем будет текст в конкретном блоке?

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

6. Что должно быть на изображении в конкретном блоке?

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

Здесь мы обычно абстрактно решаем, что должно располагаться в блоке. Например: "здесь будет фотография счастливой семьи", "здесь будет видео, доносящее ценность продукта при помощи прямых примеров его использования" и т.д. Для наглядности можно найти парочку ссылок на примеры таких видео или изображений, но ни в коем случае не стоит их вставлять в предстоящий прототип.

Сбор текстов и материалов

Уже на этапе прототипа, как я писал выше, нужно подбирать тексты и возможные будущие изображения и видео для сайта, чтобы сразу определиться с тем, насколько реально воплотить вашу идею в жизнь. Стоит уже сейчас оценивать, насколько ваши идеи или идеи вашего ux/ui дизайнера дороги в реализации, от каких из них стоит сразу отказаться, потому что они не укладываются в бюджет или потому что их невозможно реализовать ввиду отсутствия определенных материалов.

Отсекая все лишнее и невозможное, вы удивитесь, как мало на свете заказчиков, у которых есть все материалы. На деле же оказывается, что у большинства заказчиков есть 10 фотографий, сделанных на телефон и 3 файла формата .docx или .pdf, в которых все свалено в одну кучу.

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

Сборка прототипов

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

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

Заключение

Надеюсь, коллега, статья была тебе интересна и полезна. Впереди нас ждет этап дизайн-макетирования. Будет интересно!

Добра и удачи в нашем нелегком, но безумно интересном деле!