Комментарии 13
Главный недостаток — такой прототип долго делать, это ж надо брать и колбасить настоящий код со всеми вытекающими последствиями. Ну а в выкидывании нет никаких проблем, по-моему. Набросал на салфетке, все оценили, потом сделал чудовище в balsamiq — понял, насколько действительно реализуемо, показал клиенту, ну а потом начал делать UI на html.
Что делать, когда нет ресурсов запилить сразу весь функционал? Как выстраивать траекторию? На салфетке это не работает, к сожалению.
Ну и забыл написать, что долго — это как посмотреть. Тратишь время на прототип — экономишь его на верстке продукта. Плюс реально большой выигрыш при изменениях-итерациях.
а кто должен всю эту работу делать, верстальщик или проектировщик или фронтэнд-разраб/angular-guru? Если проектировщик, то верстальщик и фронтэндщик потом либо оба повесятся, либо перепишут js и css по-новой.
Можно проектировщика дотянуть до разраба+верстальщика, но это какой-то очень уж мощный персонаж получается. Либо можно лабать прототип втроем, время от времени показывая клиенту. Вообще очень интересно узнать, как выглядели итерации и были устроены процессы согласования и разработки в проектах, где подход доказал свою успешность.
Иногда проектировщик — это очень дешевый дизайнер, который даже фотошоп не умеет. Его задача — быстро двигать элементы при общении менеджера с клиентом.
Но если проектировщик прочитал хотя бы 10 книг по профессии, то прочитать +1 по html+css без js для такого человека только в радость.
Но если проектировщик прочитал хотя бы 10 книг по профессии, то прочитать +1 по html+css без js для такого человека только в радость.
— Про персонажа это вы тонко заметили! — сказал Арамис, наслаждаясь беседой :)
На самом деле, любой дизайнер неизбежно мигрирует в сторону проектировщика-верстальщика. Ну, после того, как отдал красивый макет, а получил кривую верстку. Тут волей-неволей захочется самому все сверстать и отдать конфетку.
Никаких особых итераций у нас нет. Поскольку и дизайн и прототип делает один человек, то процесс абсолютно бесшовный и выглядит это так:
Есть пара нарисованных макетов основных экранов, которые определяют дизайн продукта. Детально не прорисовывается ничего — все равно поменяется еще не раз. После этого создается проект и копируется структура из Denim — создаются 6-7 пустых страниц с переходами между ними. Ну и па-ле-те-ли: создаешь _variables.scss, определяешь основные цвета, шрифты и проч. Дальше бьешь страницу на части: header.html, footer.html, off-canvas.html подключаешь на все страницы через include. И вот у тебя есть скелет. Дальше наращиваешь мясо, постоянно что-то меняя. Тут нет pixel-perfect верстки — поскольку верстает сам дизайнер, он не упирается рогом и на ходу меняет свои решения, если это дает преимущества в чистоте кода и быстроте верстки. Тут подключается бизнес-аналитик и начинает гонять сценарии на полигоне, периодически выдергивая кого-нибудь из продажников или сервиса и тестируя сценарии на них.
С разработчиками на этом этапе никакой связи нет. А вот когда прототип передается в производство, и если вдруг технологии разные, то иногда приходится слегка менять что-то под капотом. Но внешне все остается и работает точно как в прототипе.
На самом деле, любой дизайнер неизбежно мигрирует в сторону проектировщика-верстальщика. Ну, после того, как отдал красивый макет, а получил кривую верстку. Тут волей-неволей захочется самому все сверстать и отдать конфетку.
Никаких особых итераций у нас нет. Поскольку и дизайн и прототип делает один человек, то процесс абсолютно бесшовный и выглядит это так:
Есть пара нарисованных макетов основных экранов, которые определяют дизайн продукта. Детально не прорисовывается ничего — все равно поменяется еще не раз. После этого создается проект и копируется структура из Denim — создаются 6-7 пустых страниц с переходами между ними. Ну и па-ле-те-ли: создаешь _variables.scss, определяешь основные цвета, шрифты и проч. Дальше бьешь страницу на части: header.html, footer.html, off-canvas.html подключаешь на все страницы через include. И вот у тебя есть скелет. Дальше наращиваешь мясо, постоянно что-то меняя. Тут нет pixel-perfect верстки — поскольку верстает сам дизайнер, он не упирается рогом и на ходу меняет свои решения, если это дает преимущества в чистоте кода и быстроте верстки. Тут подключается бизнес-аналитик и начинает гонять сценарии на полигоне, периодически выдергивая кого-нибудь из продажников или сервиса и тестируя сценарии на них.
С разработчиками на этом этапе никакой связи нет. А вот когда прототип передается в производство, и если вдруг технологии разные, то иногда приходится слегка менять что-то под капотом. Но внешне все остается и работает точно как в прототипе.
Замечательная статья! Как "Матрица" или "Шестое чувство"! Интригует, зовет узнать, как получить все эти увлекательные плюшки и незадорого, а ближе к концу раз — и angular. Ощущение, как доской по голове дали. Зато сразу отрезвление наступило и морок пропал. Да, "серебряной пули" не существует, каждое решение имеет свои границы применимости, angular ничуть не хуже ember/knockout/backbone/smartclient, а твои проекты — это те проекты, в которых прототипирование такой ценой не нужно. Нет, разумеется, есть такие по настоящему крупные проекты, в которых построение прототипа на angular'е дает все эти бонусы и плавно перетекает в production (особенно, если production тоже на angular'е), но вот для твоих задач (разработка модулей для Magento) и бумаги хватит (или Enterprise Architect'а, если нужно красиво). В любом случае, написано здорово, а то, что цена высока — так никто не говорил, что это для всех.
Вы так говорите, как будто ангуляр это что-то плохое :) Помой ему, ангуляр можно использовать через 20 минут курения доков. Например, прятать/показывать блоки на странице. Да еще с анимацией!
А вот с ванила-jscript у меня так не получалось в течение полугода. Да и сейчас проблемы. Так что ждем 2.0.
А вот с ванила-jscript у меня так не получалось в течение полугода. Да и сейчас проблемы. Так что ждем 2.0.
Для того, чтобы аналитики, клиенты и пр не путали html-прототип с реальным продуктом я использовал плашку на фоне: 20px вертикальную строчку слева: "прототип-прототип-прототип". Это успокаивает, потому что люди переживают из-за рыбы, когда видят ее "на реальном сайте". Особенно, если рыба похожа на реальные данные (но устаревшие на 2 месяца). Они переключаются на проверку данных, а не макета.
А кто-нибудь делал прототип совсем реальным (с базами данных, например)? Это примерно как финальное тестирование клиентом перед сдачей, только на первой стадии.
А кто-нибудь делал прототип совсем реальным (с базами данных, например)? Это примерно как финальное тестирование клиентом перед сдачей, только на первой стадии.
Беда! Судя по обсуждению в фейсбучных группах, мне ну удалось донести основую мысль — что hi-fi прототипы сегодня — это легко и просто.
Попробуйте. Может быть просто в песочнице. Заведите себе pet-project. Совсем не нужно быть Джесси Пинкманом, чтобы сделать это. Справится даже Уолтер-младший. Поверьте, мне есть, с чем сравнивать. И не переживайте за потраченное на прототип время. Если делать зачет по пяточкам, то вы выиграете: конечно, если ваша конечная цель — продукт, а не прототип. Продукт будет лучше и быстрее выпущен, можете мне поверить. Честно говоря, я жалею, что не начал делать hi-fi прототипы раньше. Да-да, Actionspace, я смотрю на тебя!
Подход оправдан не только, когда вам надо белку в глаз. Если у вас горизонтальная команда и дизайнер сидит рядом с верстальщиком в молодом, подвижном стартапе и все роют землю в одном направлении — возможно, вам будет еще выгоднее иметь такой прототип. Верстальщик сможет сделать его быстрее и грамотнее, с учетом будущего использования в продукте.
Поэтому, я снова кричу здесь: НЕ ССЫТЕ, ДА НЕ МОКРЫ БУДЕТЕ!
Попробуйте. Может быть просто в песочнице. Заведите себе pet-project. Совсем не нужно быть Джесси Пинкманом, чтобы сделать это. Справится даже Уолтер-младший. Поверьте, мне есть, с чем сравнивать. И не переживайте за потраченное на прототип время. Если делать зачет по пяточкам, то вы выиграете: конечно, если ваша конечная цель — продукт, а не прототип. Продукт будет лучше и быстрее выпущен, можете мне поверить. Честно говоря, я жалею, что не начал делать hi-fi прототипы раньше. Да-да, Actionspace, я смотрю на тебя!
Подход оправдан не только, когда вам надо белку в глаз. Если у вас горизонтальная команда и дизайнер сидит рядом с верстальщиком в молодом, подвижном стартапе и все роют землю в одном направлении — возможно, вам будет еще выгоднее иметь такой прототип. Верстальщик сможет сделать его быстрее и грамотнее, с учетом будущего использования в продукте.
Поэтому, я снова кричу здесь: НЕ ССЫТЕ, ДА НЕ МОКРЫ БУДЕТЕ!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Прототипы как предчувствие продукта