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

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

Автор материала

Артем Зернов. Веб-разработчик, создатель проекта Лектория, эксперт MODX Revolution, директор веб-студии OpenColour. Youtube-канал OpenModx.

58
7 минут на прочтение
Теги по этой теме:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример итогового набора прототипов
Пример итогового набора прототипов

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

Какие я сделал выводы за все время создания сайтов для различных заказчиков?

  1. Уж лучше минималистичный сайт, на котором есть все необходимые тексты, чем большой сайт, на котором половина текстов "Раздел наполняется" или "Скоро здесь будут изображения".
  2. Лучше донести заказчику мысль о том, что он тоже ответственен за результат, дождаться от него необходимых материалов, сорвать все сроки, но сделать аккуратный прототип, где для всех блоков уже есть наполнение (или будет подготовлено в ближайшее время), чем нарисовать "суперкрутоймегапрототип", где "все потом будет", а потом сесть в лужу на этапе запуска сайта.

Заключение

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

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

Как создать сайт для заказчика. Общие вопросы

Общий обзор процесса разработки сайта для заказчика

Читать
Мы используем куки на нашем сайте. Продолжая просмотр, вы соглашаетесь с условями пользовательского соглашения Я согласен
Пожалуйста, подождите. Процесс оформления заказа может занимать до 30 секунд.