Как представить макеты веб-дизайна клиенту?

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

Каков типичный способ представления макетов клиенту? Я предполагаю, что представление макетов веб-сайтов по электронной почте было не лучшим способом. Если электронная почта является успешным средством представления макетов, объясните это в ответе.

хорошо, успешное средство макета - это кодирование. ВСЕГДА будут отклонения от дизайна к коду. Эта небольшая вариация заставит клиента спросить или сказать: «Это было не так в дизайне».
Вы всегда можете создать свой собственный сервер и дать им ссылки на макет, который вы разработали? Я думаю, это будет лучший способ. Возможно, вы захотите создать учетную запись низкого уровня и предоставить им данные для входа.

Ответы (12)

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

Другой вариант — распечатать их профессионально на плакатах и ​​продемонстрировать на собрании.

создавать слайд-шоу и отображать их в интервью.

Закодируйте веб-сайт в каркасе, поэтому я разместил это .

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

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

РЕДАКТИРОВАТЬ: но на самом деле, если вы так беспокоитесь о том, чтобы клиент получил правильное представление о сайте, вы могли бы также закодировать его и убедиться, что ваш файл CSS достаточно доступен для редактирования, чтобы вы не копали себе дыру с изменениями. Этот сайт должен быть сайтом CMS, простым сайтом HTML, сайтом электронной коммерции и т. д. и т. д. Почему бы просто не создать весь сайт в каркасе CSS?

Это хорошие идеи. Под макетом я подразумеваю качественный пример того, как будет выглядеть сайт (пока без html/css). Я планировал создать несколько разных мокапов в фотошопе, так как быстрее/проще изменить дизайн в фотошопе, а не в коде. Создание веб-презентации поможет клиенту понять, как сайт будет выглядеть в браузере. Я также мог бы добавить немного Google Analytics, чтобы точно знать, какой браузер использует клиент, чтобы я мог убедиться, что он хорошо выглядит в его браузере.
ну, какой браузер использует клиент, на самом деле не имеет значения, если его демографические данные относятся к чему-то другому. вам нужно узнать, каковы их демографические данные, чтобы увидеть, нужен ли IE или нет.
Хороший совет, но я уже знаю целевые браузеры. Важной частью знания клиентского браузера является то, что вы не сделаете какой-нибудь вопиющей ошибки, которую клиент сразу увидит. Кроме того, если клиент использует инструмент администратора для редактирования своего сайта, важно убедиться, что его браузер поддерживается.

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

Что касается меня: нет, не существует.

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

Некоторые инструменты управления проектами, которые я использовал для обратной связи с командой, — это BaseCamp и Trello . Но есть много похожих, которые могут оказаться очень полезными (даже Google Docs — здесь тоже есть полный список ). Их преимущество в том, что они позволяют разным участникам вносить свой вклад в разработку, и, как вы упомянули в комментарии, это позволяет следить за всем.

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

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

Я думаю, вы спрашиваете о физическом акте презентации, а не о деталях технологии.

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

Что я бы порекомендовал, так это формальную прогулку с ними. В идеале лично, но если не лично, вы можете легко справиться с этим по телефону (отправьте файлы за 5 минут до звонка) или с помощью какой-либо технологии совместного использования экрана, такой как Skype.

Таким образом, вы можете не только показать свои визуальные эффекты, но и ОБЪЯСНИТЬ свои визуальные эффекты. Вы можете рассказать об эстетических и бизнес-стратегических решениях, которые вы приняли, чтобы прийти к выводам, к которым вы пришли. Вы можете помочь сосредоточить внимание на ключевых аспектах и ​​отвлечься от менее важных деталей, чтобы сохранить цель проекта.

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

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

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

Методы представления мокапов веб-дизайна

  • Поместите изображение на веб-страницу и отправьте им ссылку

  • Отправить JPEG или PNG по электронной почте

  • Используйте какое-нибудь веб-приложение

  • Используйте веб-сайт CodedPreview

  • Создать клиентскую студию

  • Экспорт макетов в PDF

  • Отправьте им файл в формате JPEG или PNG и попросите распечатать его.

Я обратился к своему другу, который посоветовал следующее:

  • Если вы просто работаете с изображениями, есть такие приложения, как mocku.ps .
  • Если вы ищете более полнофункциональный продукт, есть Pixelapse , который больше ориентирован на совместную работу. Он включает в себя контроль версий, резервное копирование, комментирование и т. д.

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

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

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

Несколько месяцев назад я наткнулся на приложение под названием InVision . Он предоставляет возможность загружать макеты и их версии, создавать интерактивные прототипы и оставлять комментарии в определенной области макета. Это приложение улучшило то, как я даю/получаю отзывы и общаюсь с моими дизайнерами и клиентами.

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

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

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

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

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

Мы используем онлайн-сервис для публикации наших работ. Мы загружаем наши изображения на сторонний хостинг и отправляем URL-адреса клиенту.

Раньше, в 2000-х, была эффективна отправка макетов по почте. Теперь презентация дизайна заказчику имеет специальные услуги. Он специально для этого предназначен.

Давайте посмотрим, как сервис (m)maquetter.com может вам помочь. Специально для этого разработано, что вы найдете:

  • Быстро добавляйте макеты сайта, которые рисуете;
  • Распределить макеты по разделам сайта (например, повторяя его меню).

Это также позволяет вам:

  • отмечать утвержденные заказчиком макеты
  • обновить тот же макет и сохранить его историю.

Этот сервис предоставляет вам короткую ссылку. Вы отправляете его (по почте, текстовым сообщением или Skype). Заказчик может удобно просматривать ваши макеты в любом браузере. Вы можете видеть, как это работает, как это видит ваш клиент .

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

Попробуй сам

Для получения дополнительной информации вы можете прочитать блог

Привет. Да, я создал идею сервиса и руководителя проекта. В свободное время хочу помогать дизайнерам в их работе. Донести до них идею этого и подобных сервисов (про 13ти знаю). Да макеттер представлен в платной версии. Но с 1 октября мы ввели пакет услуг «бесплатно — навсегда».

Вы можете создать интерактивную демонстрацию со своими скриншотами/изображениями. Взгляните на эти инструменты: http://www.appdemostore.com/ и http://giveabrief.com/ .

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