Как и в какой материальной или цифровой форме прототипировать сайт от идеи до макета?

Question

[ermushko]

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

Answer 1

[ankfrv]

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

Мой инструментарий:
XMind
Axure или Moqups
Photoshop CC 2014

Comments

[ermushko]

Вот именно в процессе составления блок-схем вероятно и была дыра. Всегда из фантазий пытались начать переводить в начальные PS макеты, вследствие чего логика более-менее нормального сайта начинала сильно страдать, т. к. делалась по методу "одна страница за раз". Спасибо, очень ценная информация!

[ankfrv]

ermushko Не за что. Рад, что вы нашли эту информацию ценной.

Answer 2

[globuzer]

лист+карандаш -> photoshop\visio\pencilproject -> axure -> симбиоз всех графических программ на предыдущих этапах + js + svg + xml + css3 + html технологии.
оперируя каждой из этих сущностей на том или ином этапе проработки идеи достигается хороший результат. единственное, владение каждой программой не всегда у всех может быть в полном совершенствии - тогда приходиться чем-то жертвовать и искать компромисс и альтернативы

Comments

[ermushko]

Если ли какие техники, может даже названные модными словами, или все делают как могут и как привыкли?

[globuzer]

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