Хочу поделиться некоторым опытом в разработке дизайна для e-сommerсe среды, спросить совета у сообщества, поэтому буду крайне признателен комментариям на тему оптимизации работы в этой нише. Так уж вышло, что коммерция в интернете давно шагнула вперед. Торговля розницей, не имеющая представительства в интернете, в разы проигрывает той, у которой такое представительство существует. Это давно очевидная вещь, поэтому углубляться не будем в рамках этой статьи.
Заказчики у нас перескакивают с шаблонных сайтов на сайты с индивидуальным дизайном, как только понимают, что конкуренция в интернете тоже есть, и профит быть выше в поисковике — огромен. В чем суть: мы имеем шаблонный сайт с определенным трафиком, подключенной, допустим, метрикой, шаблонным дизайном, шаблонным взаимодействием. В среде конкурентоспособной — это минус и потеря аудитории.
Цель: сделать индивидуальный дизайн за деньги, которые заказчик может потратить на своем этапе развития как бизнесмена и самому остаться на плаву. Конечно, можно предложить написание user-stories, eye-traсking технологию, тестирование прототипов, A/B тестирование дизайна и развернуть проект в несколько сотен тысяч, но, мое мнение, что в данный момент это не подходит для клиента. Думаю, что нельзя перескакивать ступени эволюционного развития.
Прототипирование
Начинаю с составления краткого технического задания, где указываю список программных модулей, поведение каждого элемента на действие пользователя и описываю взаимодействие. Также вшиваю прототипы, сделанные в Axure. Многие скажут, что прототип должен быть интерактивным или это не прототип. Но, как показала практика, статических картинок с проработанными деталями достаточно, чтобы решить нашу задачу. Разрабатывая интерфейс для сложного взаимодействия, я, конечно использую интерактивный прототип, но это тема для другой статьи.
Итак, потратив небольшой кусок времени на переговоры, накидываем wireframes на основе предыдущего сайта или конкурирующих в этом сегменте бизнеса сайтов. Вносить правки в Axure быстро, поэтому мы экономим кучу времени на согласовании дизайна. Примерное время выполнения: 3-4 часа на 6-8 страниц. Приведу примеры:
Дизайн
Имея айдентику или хотя бы логотип не в Word, быстро разворачиваем цветовую палитру и приступаем к отрисовке всех страниц. На данный момент времени я использую Fireworks + PS. Очень удобно построить структуру в Fireworks, а потом сделать рендер в Ps для презентации. Для удобной реализации дизайна использую Bootstrap сетку. Я понимаю, что таким макаром работает масса студий, но на полноценную обкатку в оной иногда не хватает времени. Если проект имеет множественные элементы управления, собираю UI-kit отдельным файлом для верстальщика, с которым работаю — ему так удобнее. Пример отрисовки дизайна по прототипам:
На этом этапе клиент имеет полное представление о визуализации и взаимодействии с сайтом и уже может дать прогнозы конкурентоспособности своего продукта. Конечно, некоторые настаивают на полной интерактивности прототипов, но это необходимо лишь в ряде случаев.
После отрисовки всех страниц на базе Bootstrap готовлю PSD к верстке. На этом этапе также экономлю время путем конвертации из Fireworks в PSD. Верстальщик использует Brackets, ему все равно на разложенные слои по папкам. В процессе верстки я причесываю исходник и кладу в пак файлов проекта.
Опыт заключается в том, что мы выигрываем время на том, что имеем ряд наработок в прототипировании и разработки интерфейса для e-сommerсe, учитывая узкую нишу. Я понимаю, что это не догма — регламентировать процесс именно так. Поэтому призываю к обсуждению сообщество. Буду очень рад развернутым комментариям на эту тему. Благодарю за уделенное время.