@RomanPetrov15 июл 2011 в 13:25

Как мы показываем дизайн сайта клиенту

2 мин

19K

Управление проектами *

+39

105

Комментарии 105

@DeusModus 15 июл 2011 в 13:37

Невероятно!

@kyrie 15 июл 2011 в 13:37

А почему переходы между страничками не работают?

@kyrie 15 июл 2011 в 13:38

Спросит внимательный заказчик…

@RomanPetrov 15 июл 2011 в 13:40

Ведь это же картинки! Ответит наш проект-менеджер. Принимайте дизайн, потом будем верстать :)

@capt_Rimmer 15 июл 2011 в 16:11

А это только одна страничка?! А как будут другие выглядеть?
(так же изумленно спросит заказчик)…
Неплохая статья… По крайней мере понимаю, что не один я такой :)

@sshz 15 июл 2011 в 19:27

Еше вариант:
Хотелось бы увидеть как он работать будет перед тем как дизайн принять

@gorbarov 15 июл 2011 в 18:46

Как вариант дальнейшего развития этого способа это ссылки на другие страницы через area =)

@nekt 15 июл 2011 в 19:09

как вариант, дизайн сразу можно готовить в виде верстки.

@HEm 2 фев 2012 в 15:02

любой каприз за ваши деньги

@cst 15 июл 2011 в 13:44

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

@statievsky 15 июл 2011 в 14:57

А зачем пытаться картинку в прототип превращать? Разные немного задачи и разные деньги. :)

@cst 15 июл 2011 в 15:00

Задача-то один раз и на полчаса, распространится на все будущие «смотрины», а уж эффект не оценим. Ибо вы сделали 90%, осталось 10, но для конечника это именно нужные для него 90%. Особенно если учесть навыки оценщиков.

@statievsky 15 июл 2011 в 15:06

Ну уж про 1 раз и навсегда Вы как-то сильно позитивно написали…

@cst 15 июл 2011 в 15:18

Эм, комменты, в стиле лебедевского линча, вы тоже каждый раз заново прописываете в коде? =)

@tarlarion 15 июл 2011 в 16:31

И все же лучше делать прототипы сначала, а потом дизайн.

@cst 15 июл 2011 в 16:38

Кто же спорит-то я не пойму?) Просто выши прототипы будут живые.

@RomanPetrov 15 июл 2011 в 17:59

Сама система состоит из двух частей: размещение эскизов (ее написала специалист технической поддержки за 2-3 часа) и система размещения и отображения комментариев.
Комментарии добавляются щелчком мышки в нужном месте на картинке.
Как конкретно реализованы комментарии, вы можете уточнить у нашего технического директора unnamed777, именно он реализовывал данный функционал.

Задачи сделать из эскизов интерактивные прототипы не стояло — интерактивные прототипы мы делаем в других программах. Стояла задача сэкономить на объяснении клиенту, как будет выглядеть его сайт в браузере.

Сейчас картинку добавляет менеджер за полминуты. Код никто не пишет.

@developer 16 июл 2011 в 18:00

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

@RomanPetrov 16 июл 2011 в 19:18

Даже вот не знаю, что и ответить.
Да, конечно разработчики в штате есть. И очень хорошие.
А сделать возможность комментировать было личной инициативой тех. директора.

@developer 17 июл 2011 в 18:57

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

и никаких отправок дизайна на мыло и т.д.
Почему? да просто потому что вы сделали клевый дизайн, показываете его вашему клиенту, ему все нравится, а потом он показывает его своему другу (или недайбоже своему подчиненному) и тот его обсирает просто чтобы самовыразиться и дело тут не в вашем умении или не умении, а в человеческой природе — все эксперты во всем. И денег много больше брать по такой схеме работая не нужно. Деньги берутся только за реальное изменение планов:
Коротко схема работы: почитал ТЗ, принял (подпись), посмотрел дизайн, сравнил с ТЗ, непонравилось, нашли консенсус, переделали, все понравилось (подпись), пошел к «друзьям», передумал, пришел говорить что нужно переделать — заплатил.

@RomanPetrov 17 июл 2011 в 19:29

Хороший метод. Главное, что презентация проходит в студии — это экономит время на поездки.
Мы тоже после принятия дизайна подписываем акт. Даже после принятия главной страницы иногда подписываем.

@altima 18 июл 2011 в 06:22

Схема для студии хорошая, вопросов нет

Проблема в том, что не все клиенты, особенно крупные, будут по ней работать.

Также

@developer 17 июл 2011 в 19:00

PS. открыл ваше портфолио, не смог увеличить сканы дизайна, ушел.

@HEm 2 фев 2012 в 15:05

Знавал я одного тех. дир.-а, среди прочих работ в конторе он и компы админил и лампочки вкручивал и еще тысячей дел занимался.

В зависимости от масштабов фирмы в это гордое звание можно вложить разные должностные обязанности.

@chemedia 15 июл 2011 в 13:58

Мы думали про то чтобы дать возможность комментировать по верх уже сверстанного сайта. Но не придумали как легко вести историю версий уже сверстанных макетов.

@resurection 15 июл 2011 в 14:05

Дали бы хоть движек… А то рассказ получился о том как правильно показать картинку не опытному человеку.

@RomanPetrov 15 июл 2011 в 18:01

Всё, кроме комментариев — это стандартный компонент «Каталог», создается за 2-3 часа.
Рассказ — именно поделиться опытом для владельцев веб-студий. Думаю, те, кто заинтересовался, сделают себе подобный функционал сами.

@Terion 15 июл 2011 в 14:23

Давно своей студии такую штуку хочу сделать, все времеи не хватает (

@Dmitry_f 15 июл 2011 в 17:33

Аналогично. Реализация такой системы требует времени примерно еще одного сайта.

@RomanPetrov 15 июл 2011 в 18:01

Без системы комментариев это делается 2-3 часа. И позволит вам существенно сэкономить потом.

@Dmitry_f 15 июл 2011 в 18:08

И без админки вообще, вы хотели сказать

@RomanPetrov 15 июл 2011 в 18:21

С админкой. Стандартные ифоблоки битрикса.
Вот как выглядит добавление картинки в админке:

А комментарии уже делаются в публичной части.

@Gronpipmaster 15 июл 2011 в 18:27

ох тыж жесть какая ваша админка битрикса.

@dutchakdev 16 июл 2011 в 12:29

Это прискорбно.

@Dmitry_f 15 июл 2011 в 18:33

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

@RomanPetrov 15 июл 2011 в 18:38

Да, в данном случае это внутренний проект и он сделан был быстро.

@DenisZ 15 июл 2011 в 18:47

В Битриксе это действительно не долго реализовать… если без излишеств.

@Terion 15 июл 2011 в 22:04

Да ну, без комментариев оно действительно за несколько часов делается, даже если не на битриксе, а на фреймворке каком-нить (на том же Codeigniter).
Ну, это если, конечно, админка простейшая (а надо ли больше?).
Комментарии — это уже сложнее, там на фронтенде работы много, да…

@unnamed777 16 июл 2011 в 06:37

Комментарии были сделаны за 2.5 часа

@Dmitry_f 16 июл 2011 в 10:47

Просто поражает ваша скорость. Интересно, сколько вы за час берете, если не секрет?

@RomanPetrov 16 июл 2011 в 12:16

От 800 до 1400 рублей в час

@Dmitry_f 15 июл 2011 в 18:35

А что сэкономить, простите? Время на общении с заказчиком? Смешно.
Скорее просто уникальная и удобная фишка для студии.

@RomanPetrov 15 июл 2011 в 18:39

Время на общение с заказчиком. 70 сайтов в год х 1 час на сайт = 70 часов в год.

@Dmitry_f 15 июл 2011 в 18:43

Откуда целый час?
То есть вы с заказчиком вообще не разговариваете? 0_o
Расстановка комментов и заливка картинок также времени больше требует, по сравнению с обычным письмом в gmail.
Или вы час объясняете заказчику, как правильно скриншот открыть?

@RomanPetrov 15 июл 2011 в 18:47

Приведу пример.
Как раз на одном из проектов удалось это протестировать:
До внедрения системы мы высылали макет и я лично минут по 30 рассказывал, как его открыть. Постоянно что-то не получалось.

После внедрения системы мы выслали ссылку. Дизайн был принят в течение 30 минут. все спорные моменты были сняты.

@RomanPetrov 15 июл 2011 в 18:48

Важно! На одном и том же проекте с одним и тем же заказчиком!

@Dmitry_f 15 июл 2011 в 18:54

Капец (простите). Хорошо что мне не попадались пока заказчики, неспособные дизайн на 100% открыть. Даже девушка с опытом работы на компьютере в пол-года открыла макет без затруднений и все правильно поняла.
И тем не менее глубоко сомневаюсь, что вы экономите 70 часов в год)

@RomanPetrov 15 июл 2011 в 19:15

Попробуйте внедрить такую систему у себя. Потом поделитесь опытом

@Dmitry_f 15 июл 2011 в 19:34

Обязательно. Идея очень хорошая. Но я её интегрирую с новой концепцией комментов.

@Yukka 16 июл 2011 в 08:59

Тут я думаю не только и не столько экономия времени, сколько экономия нервов. Дело в том, что макет не только нужно показать и объяснить что там и как, но и принять. А заказчик всегда сомневается и всегда переживает, особенно если макет не в том масштабе. =)

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

@RomanPetrov 16 июл 2011 в 11:19

Да, все правильно

@drunas 15 июл 2011 в 14:50

А если сразу странички сверстать?
Так «ховеры» видно будет(динамики добавится), переходы работать будут и отпадут вопросы в будущем почему не как на картинке

@Terion 15 июл 2011 в 15:05

Может и програмить сразу?

@sskalmykov 15 июл 2011 в 21:35

Зачем программить? Вы о прототипах не слышали? Верстать — это конечно перебор, но сделать рабочий прототип в Axure — это хорошо. Сразу показываем как что работает. Это важно. Ну, конечно если бюджет на сайт 30к, то срать, а если что-то стоящее, то прототипирование — хороший тон.

@RomanPetrov 16 июл 2011 в 05:29

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

@milax 15 июл 2011 в 20:37

вы вообще понимаете о чем говорите? или так, абы ляпнуть

@drunas 15 июл 2011 в 20:59

Конечно, понимаю.
Потратьте ещё 1 час на вёрстку и сможете избежать ещё 2 часа на обсуждение вопросов с клиентом. Profit! Разве не в этом суть?

@milax 15 июл 2011 в 21:03

это что же у вас за сайты такие и дизайны к ним, что на верстку надо потратить «еще 1 час».

прям как два пальца об асфальт

к тому же, динамику прекрасно можно передать и на эскизах или в презентации

@drunas 15 июл 2011 в 22:27

Вы на пример посмотрите сначала. Вы его 2 дня верстать собрались?

@milax 16 июл 2011 в 01:59

Какая разница сколько? Для того чтобы показать структуру будущего сайта — делают прототипы, внешний вид — дизайн. После апрува — он верстается и программится.

@drunas 15 июл 2011 в 22:32

И, таки да, за час — как два пальца!

@RomanPetrov 16 июл 2011 в 05:25

Если вы можете сверстать наш сайт за час — приходите к нам верстальщиком. Высокая зарплата.

@yui_room9 16 июл 2011 в 14:29

А можно psd в личку? Ради интереса посмотреть сколько времени займёт :)

@RomanPetrov 16 июл 2011 в 18:51

можно просто посмотреть на текущую верстку по адресу itconstruct.ru

@yui_room9 16 июл 2011 в 18:55

Ну чтобы уж честь по чести дизайн порезать, а не с png или jpeg, просто интересно уложусь в час или нет :)

@RomanPetrov 16 июл 2011 в 19:35

выслал вам ссылку на psd. надеюсь, мы одинаково понимаем слово «верстка».
В нашей компании верстка — это набор html, css и картинок, которые точно передают дизайн (в том числе одинаково в разных браузерах)

озвучьте потом результат. ну и ради интереса — каждый сайт обычно содержит 2-10 внутренних страниц, их, по вашей логике, тоже верстать надо.

@serjoga 17 июл 2011 в 18:45

ОГО товарищи…
А Ваша верстка состоит то из таблиц. Как-то несолидно что ли…

@yui_room9 17 июл 2011 в 21:03

Отправил в личку, забыл сюда запостить,

Полтора часа вышло :)
Ну это div валидная и без JS хаков например на менюшку.
Жаль пруфы похерил,
снимал видео, а оно на минутах 20 из за какого то глюка остановилось, то есть всего пруфа нет
завтра если не лень будет пересниму :)

@RomanPetrov 18 июл 2011 в 06:20

Итого, получается, что верстка одной страницы — 0,5 — 2 часа. Чтобы просто передать движение.
Если говорить о вашей работе, то это отличный и быстрый результат, вы молодец!

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

Поэтому лучше без верстки.

Хотя, признаюсь, видел иногда псевдо-верстку — «Лишь бы нажималось». Но не уверен в финансовой эффективности данного подхода

@yui_room9 18 июл 2011 в 15:12

А никто не спорит что это рентабельно, это само сабой лишний геморрой, по непринятому дизайну делать вёрстку.

Я просто попробовать хотел в какое время я уложусь :)

@Rubiroid 15 июл 2011 в 15:50

На прошлой работе тоже использовали подобный способ презентации, только всё вручную делали. Был шаблон html, в котором менялось имя файла макета. Вручную заливали на фтп.
Без комментирования, конечно.

С другой стороны, недавно на Яндекс.Субботнике рассказывали об html-прототипировании.

@Stepanow 15 июл 2011 в 16:29

для резиновых сайтов всё равно придётся объяснять на пальцах

@sshz 15 июл 2011 в 19:33

А для фиксированных можно и простую картинку показать, без центрирования

Так что профит хоть и есть, но не сильно большой

@RomanPetrov 15 июл 2011 в 19:38

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

@reega 15 июл 2011 в 16:36

ни разу не видел клиента, который после вопроса, «А почему так мелко?»
задаст вопрос — «как дизайн будет выглядеть на разных мониторах»

один клиент не может задать оба вопроса — лишь один из них.

НЛО прилетело и опубликовало эту надпись здесь

@sskalmykov 15 июл 2011 в 21:38

Ага! У меня одни клиенты (два мужика занимающиеся ВЭД) привлекли своих жен. И советовались. И их фотографии на сайт поставили. Так что вместо двух клиентов получилось целых четыре. Как вспомню — так вздрогну.

НЛО прилетело и опубликовало эту надпись здесь

@sskalmykov 16 июл 2011 в 06:44

Комикс конечно же видел. Я его после десятой версии дизайна отправил его заказчикам. Сказали что все поняли, но продолжали советоваться с женами тайно.

@RomanPetrov 15 июл 2011 в 18:03

Описанный в статье метод снимает оба этих вопроса.

@Serov_George 15 июл 2011 в 20:52

У адобе есть продукт, которые многие недооценивают — Fireworks, кажется. Так вот он позволяет отлично экспортировать странички в ПДФ и, что еще более круто, создавать хтмл страничку с макетом сайта и с центрованием, где также можно выделить области, которые программа сделает ссылками, которые будут вести на другие странички.

@Terion 15 июл 2011 в 22:07

Кстати, да.
Но там без комментирвания, конечно ) Хотя…

@DR69 15 июл 2011 в 18:08

Такое решение облегчает некоторые вопросы по восприятию, но всё ровно, презентация должна быть сопутствующая. Желательно всегда в живой форме — лично, по скайпу, телефону.

Я еще прикладываю макет с наложенной модульной сеткой, и объясняю на этом примере почему «логотип такой маленький».

И всё линчевание тоже делать в живой форме, так как с таким инструментом, это превратится в игру. Заказчик будет сидеть и из пальца высасывать и придумывать косяки, раз такая возможность дана. Живьем можно на лету объяснить что и почему. Сэкономить время на бесполезную переписку.

Еще советую в этом решении, сразу после презентации удалять все эти макеты; что бы заказчик не стал рассылать ссылку по аське всем своим друзьям и знакомым «дизайнерам» что бы те помогли советом.
Вообще по возможности не оставлять промежуточные этапы работы.
Главное — первое впечатление.

@RomanPetrov 15 июл 2011 в 18:24

Согласен с вами, что обязательно, после отправки письма нужно позвонить и прокомментировать голосом.
Комментирование (то, что вы назвали «линчевание») НЕ делается клиентом. Это инструмент для нашего менеджера проектов.

Мы не удаляем макеты после презентации, только после завершения проекта. Заказчик имеет право смотреть дизайн в то время, в которое ему удобно. И показать друзьям мы тоже не можем ему запретить. Это политика нашей компании.

@DR69 15 июл 2011 в 18:35

А… если так, то это действительно удобно.

@art008 15 июл 2011 в 19:27

Мы тоже так показываем, вот про комментарии — отличная идея, молодцы, ребята

@Gangsta 15 июл 2011 в 19:36

комменты в стиле САЛ можно, кстати, делать на picbite.com (мой сайт, продал недавно) или на lynchelka.ru

@sshz 15 июл 2011 в 19:37

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

Ну а создателям почет и слава.

@crimean 15 июл 2011 в 20:38

о, как же это все знакомо

@heller 15 июл 2011 в 21:01

Боже, какой идиотизм. Не пишите больше.

@milax 15 июл 2011 в 21:06

@tarya 15 июл 2011 в 21:07

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

www.batik.org.ua/admin/nash.html

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

Пока что такой вариант как бы он не был прост меня устраивает. Хотя есть и минусы — клиенты не всегда понимают что это лишь картинка, думая о том почему не происходит переход при щелчке по линкам.

@Terion 15 июл 2011 в 22:09

Вручную делаете?

@tarya 16 июл 2011 в 07:53

Там не сложно перевести на автоматический режим, но проще откровенно сказать просто в html файлик накидать пару картинок и все. Все остальное нарисуется само и высота окна подстроится под каждую картинку.

Я как то об автоматизации не думал, так как бывает создаю по несколько таких веток превью одновременно. Просто клиенту отправляю линки а они щелкают говорят что и как. Ниспадающая модульная сетка показывает как в макете все будет ровно выстроено. Я пользуюсь 960gs потому у меня вот так на 16 колонок все разбивается.

@dimabudnikov 16 июл 2011 в 05:36

а исходный код получить можно?

@tarya 16 июл 2011 в 07:01

Да, конечно забирайте. Там все очень просто работает, в единственный html файл в тело кладете любые картинки, помечаете их классом source кажется и все. Скрипт подсчитает их и сделает перелистывание. Там конечно скрипт немного недописан, и может и кривоват, как-то оно работает все время и я не задумывался над ним вообще, потому мне стыдно только от части. :-)

@Amput 16 июл 2011 в 07:41

Лично я использую Axure, что позволяет не только втиснуть дизайн в виде картинки но и показать интерактивность макета.

@RomanPetrov 16 июл 2011 в 08:19

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

@Spree 16 июл 2011 в 10:00

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