ݺߣ

ݺߣShare a Scribd company logo
HolyGrail  Святой Грааль прототипирования  для менеджеров http://www.amazedev.com/holygrail Коноплицкий Павел
Предпосылки Точный прототип позволяет проработать требования к интерфейсу и позиционированию функциональных блоков уже на этапе проектирования. Дизайнеры будут задавать меньше вопросов и не будут отрисовывать несуществующую функциональность. С прототипом дизайн чаще рисуется «с первого раза». Заказчикам прототип дает четкое представление того, что они получат по итогу проекта. Интерактивный прототип понятнее для заказчика. http://www.amazedev.com/holygrail
Проблема http://www.amazedev.com/holygrail В большинстве компаний отсутствует  этап прототипирования  web- проектов или он выполняется людьми не всегда обладающими необходимыми знаниями в области юзабилити и  web- технологий.
Проблема C овременные средства прототипирования не способны полностью удовлетворить потребности   и требования к прототипу всех участников проекта. Требования: Скорость создания прототипа Интерактивность Детализация Необходимость повторной отрисовки Доступность для всех участников проекта Возможность простого внесения изменений http://www.amazedev.com/holygrail http://www.amazedev.com/prototipirovanie-web-proektov-sobiraya-voedino/
Проблема Неудовлетворённость текущей ситуацией с прототипированием  web- проектов. http://www.amazedev.com/holygrail
Потребности Автоматизировать типовые решения, сохранив пространство для творчества. Быстро создавать интерактивные, детализированные прототипы, доступные  всем участникам проекта, с возможностью вносить изменения. Учитывать невысокий уровень знаний и опыта у человека выполняющего прототипирование. Веские и достаточные аргументы в пользу прототипирования. Выгода должна выражаться цифрами. http://www.amazedev.com/holygrail
HolyGrail.  Решение Open Source Части  layout’ а  (header ,  footer  и другие )   реализованы с помощью  SSI  вставок Набор паттернов   проектирования  (snippets)  для программы  Dreamweaver Типичный проект Usability Guidelines http://www.amazedev.com/holygrail
HolyGrail . Процесс http://www.amazedev.com/holygrail
HolyGrail . Процесс http://www.amazedev.com/holygrail
HolyGrail  для менеджера Делает предметным общение с клиентом о проекте.  Уменьшает время на создание прототипа. Больше времени для выполнения творческих задач. Повышает качество проектов уменьшая количество ошибок связанных с юзабилити. Снижает требования к знаниям менеджера необходимых для получения приемлемого прототипа. Позволяет сразу же протестировать интерактивный прототип на пользователях. http://www.amazedev.com/holygrail
HolyGrail  для девелопера http://www.amazedev.com/holygrail Интеграция  (x)HTML  и  CSS  прототипа  c  используемым в компании фреймворком. Позволяет копировать элементы из прототипа и сразу же вставлять в проект.  Сокращает время на создание и вёрстку типовых элементов. С помощью правил и стандартов позволяет избежать негативного эффекта от домысливания недостающих элементов управления в интерфейсе.
HolyGrail . Пример http://www.amazedev.com/holygrail Главная страница
HolyGrail . Пример http://www.amazedev.com/holygrail Страница контактов
HolyGrail . Пример http://www.amazedev.com/holygrail Авторизованный пользователь. Изменение данных профиля
HolyGrail . Пример http://www.amazedev.com/holygrail Администратор. Рассылка
HolyGrail . Пример http://www.amazedev.com/holygrail Adobe.com
HolyGrail . Пример http://www.amazedev.com/holygrail Amazon.com
HolyGrail.  Узкие места Менеджеру всё же иногда приходится разбираться и править  HTML  код. Иногда есть необходимость делать фейковую функциональность. Симулировать будущую реальную ( AJAX, pop-up) . Поддержка  SSI  на хостингах   не всегда бывает включена по-умолчанию. http://www.amazedev.com/holygrail
ToDo . Внесите свой вклад Поддержка  IT  сообщества Обратная связь от менеджеров Переход к полной поддержке  web -стандартов Создание большего количества типовых лэйаутов (блог, интернет-магазин, корпоративный сайт, социальная сеть и т.д.)  Пополнение библиотеки сниппетов (вёрстка новых элементов) Создание мастера генерации прототипа Оформление Русско-английский перевод http://www.amazedev.com/holygrail
Спасибо за внимание .  Вопросы? Коноплицкий Павел [email_address] +7 985 414 906 1 http://www.amazedev.com http://www.amazedev.com/holygrail http://pkonoplitskiy.moikrug.ru

More Related Content

Viewers also liked (12)

Трудный путь к юзабилити
Трудный путь к юзабилитиТрудный путь к юзабилити
Трудный путь к юзабилити
Pavel Konoplitski
Юзабилити интернет-магазинов
Юзабилити интернет-магазинов  Юзабилити интернет-магазинов
Юзабилити интернет-магазинов
Pavel Konoplitski
Рост продаж и конверсии после улучшения user experience сайта PosterXXL.ru. Р...
Рост продаж и конверсии после улучшения user experience сайта PosterXXL.ru. Р...Рост продаж и конверсии после улучшения user experience сайта PosterXXL.ru. Р...
Рост продаж и конверсии после улучшения user experience сайта PosterXXL.ru. Р...
Pavel Konoplitski
Использование usability guidelines для повышения качества веб-разработок
Использование usability guidelines для повышения качества веб-разработокИспользование usability guidelines для повышения качества веб-разработок
Использование usability guidelines для повышения качества веб-разработок
Pavel Konoplitski
Всемирный день юзабилити в Минске 2010. Приветственное слово и идеи
Всемирный день юзабилити в Минске 2010. Приветственное слово и идеиВсемирный день юзабилити в Минске 2010. Приветственное слово и идеи
Всемирный день юзабилити в Минске 2010. Приветственное слово и идеи
Pavel Konoplitski
DUMP-2013 Проектирование интерфейсов - А где же яйца? - Клевакин Денис
DUMP-2013 Проектирование интерфейсов - А где же яйца? - Клевакин ДенисDUMP-2013 Проектирование интерфейсов - А где же яйца? - Клевакин Денис
DUMP-2013 Проектирование интерфейсов - А где же яйца? - Клевакин Денис
it-people
DUMP-2013 Проектирование интерфейсов - Как мы делаем креатив в дизайне - Кула...
DUMP-2013 Проектирование интерфейсов - Как мы делаем креатив в дизайне - Кула...DUMP-2013 Проектирование интерфейсов - Как мы делаем креатив в дизайне - Кула...
DUMP-2013 Проектирование интерфейсов - Как мы делаем креатив в дизайне - Кула...
it-people
DUMP-2013 Проектирование интерфейсов - Бац-бац, и в продакшен! - Зотов Андрей
DUMP-2013 Проектирование интерфейсов - Бац-бац, и в продакшен! - Зотов АндрейDUMP-2013 Проектирование интерфейсов - Бац-бац, и в продакшен! - Зотов Андрей
DUMP-2013 Проектирование интерфейсов - Бац-бац, и в продакшен! - Зотов Андрей
it-people
DUMP-2013 Проектирование интерфейсов - Путь воина в проектировании интерфейсо...
DUMP-2013 Проектирование интерфейсов - Путь воина в проектировании интерфейсо...DUMP-2013 Проектирование интерфейсов - Путь воина в проектировании интерфейсо...
DUMP-2013 Проектирование интерфейсов - Путь воина в проектировании интерфейсо...
it-people
DUMP-2013 Проектирование интерфейсов - "Дом качества" как инструмент анализа ...
DUMP-2013 Проектирование интерфейсов - "Дом качества" как инструмент анализа ...DUMP-2013 Проектирование интерфейсов - "Дом качества" как инструмент анализа ...
DUMP-2013 Проектирование интерфейсов - "Дом качества" как инструмент анализа ...
it-people
Юзабилити-тестирование
Юзабилити-тестированиеЮзабилити-тестирование
Юзабилити-тестирование
Pavel Konoplitski
Подбор респондентов
Подбор респондентовПодбор респондентов
Подбор респондентов
Vladimir Melnikov
Трудный путь к юзабилити
Трудный путь к юзабилитиТрудный путь к юзабилити
Трудный путь к юзабилити
Pavel Konoplitski
Юзабилити интернет-магазинов
Юзабилити интернет-магазинов  Юзабилити интернет-магазинов
Юзабилити интернет-магазинов
Pavel Konoplitski
Рост продаж и конверсии после улучшения user experience сайта PosterXXL.ru. Р...
Рост продаж и конверсии после улучшения user experience сайта PosterXXL.ru. Р...Рост продаж и конверсии после улучшения user experience сайта PosterXXL.ru. Р...
Рост продаж и конверсии после улучшения user experience сайта PosterXXL.ru. Р...
Pavel Konoplitski
Использование usability guidelines для повышения качества веб-разработок
Использование usability guidelines для повышения качества веб-разработокИспользование usability guidelines для повышения качества веб-разработок
Использование usability guidelines для повышения качества веб-разработок
Pavel Konoplitski
Всемирный день юзабилити в Минске 2010. Приветственное слово и идеи
Всемирный день юзабилити в Минске 2010. Приветственное слово и идеиВсемирный день юзабилити в Минске 2010. Приветственное слово и идеи
Всемирный день юзабилити в Минске 2010. Приветственное слово и идеи
Pavel Konoplitski
DUMP-2013 Проектирование интерфейсов - А где же яйца? - Клевакин Денис
DUMP-2013 Проектирование интерфейсов - А где же яйца? - Клевакин ДенисDUMP-2013 Проектирование интерфейсов - А где же яйца? - Клевакин Денис
DUMP-2013 Проектирование интерфейсов - А где же яйца? - Клевакин Денис
it-people
DUMP-2013 Проектирование интерфейсов - Как мы делаем креатив в дизайне - Кула...
DUMP-2013 Проектирование интерфейсов - Как мы делаем креатив в дизайне - Кула...DUMP-2013 Проектирование интерфейсов - Как мы делаем креатив в дизайне - Кула...
DUMP-2013 Проектирование интерфейсов - Как мы делаем креатив в дизайне - Кула...
it-people
DUMP-2013 Проектирование интерфейсов - Бац-бац, и в продакшен! - Зотов Андрей
DUMP-2013 Проектирование интерфейсов - Бац-бац, и в продакшен! - Зотов АндрейDUMP-2013 Проектирование интерфейсов - Бац-бац, и в продакшен! - Зотов Андрей
DUMP-2013 Проектирование интерфейсов - Бац-бац, и в продакшен! - Зотов Андрей
it-people
DUMP-2013 Проектирование интерфейсов - Путь воина в проектировании интерфейсо...
DUMP-2013 Проектирование интерфейсов - Путь воина в проектировании интерфейсо...DUMP-2013 Проектирование интерфейсов - Путь воина в проектировании интерфейсо...
DUMP-2013 Проектирование интерфейсов - Путь воина в проектировании интерфейсо...
it-people
DUMP-2013 Проектирование интерфейсов - "Дом качества" как инструмент анализа ...
DUMP-2013 Проектирование интерфейсов - "Дом качества" как инструмент анализа ...DUMP-2013 Проектирование интерфейсов - "Дом качества" как инструмент анализа ...
DUMP-2013 Проектирование интерфейсов - "Дом качества" как инструмент анализа ...
it-people
Юзабилити-тестирование
Юзабилити-тестированиеЮзабилити-тестирование
Юзабилити-тестирование
Pavel Konoplitski
Подбор респондентов
Подбор респондентовПодбор респондентов
Подбор респондентов
Vladimir Melnikov

Similar to Holygrail. Система прототипирования (20)

Основы быстрого прототипирования
Основы быстрого прототипированияОсновы быстрого прототипирования
Основы быстрого прототипирования
Mitya Osadchuk
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Yandex
Обзор средств прототипирования веб-сайтов
Обзор средств прототипирования веб-сайтовОбзор средств прототипирования веб-сайтов
Обзор средств прототипирования веб-сайтов
Pavel Konoplitski
О разработке сайтов в целом
О разработке сайтов в целомО разработке сайтов в целом
О разработке сайтов в целом
Uplab_University
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite
Как сделать хороший прототип вовремя?
Как сделать хороший прототип вовремя?Как сделать хороший прототип вовремя?
Как сделать хороший прототип вовремя?
Mikhail Kulakov
Teatro
TeatroTeatro
Teatro
Alexey Ermolaev
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВИспользование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
SQALab
Основы разработки сайтов by Uplab
Основы разработки сайтов by UplabОсновы разработки сайтов by Uplab
Основы разработки сайтов by Uplab
Digital-агентство Uplab
Automation from the trenches
Automation from the trenchesAutomation from the trenches
Automation from the trenches
Gleb Rybalko
Automation from the trenches
Automation from the trenchesAutomation from the trenches
Automation from the trenches
GlobalLogic Ukraine
Введение в Agile
Введение в AgileВведение в Agile
Введение в Agile
Василий Савунов
11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов
borovoystudio
MockServer-driven development
MockServer-driven developmentMockServer-driven development
MockServer-driven development
Testableapple
Layout testing with galen framework selenium camp
Layout testing with galen framework   selenium campLayout testing with galen framework   selenium camp
Layout testing with galen framework selenium camp
anna_chernysheva
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
borovoystudio
Создание прототипа как этап разработки сайта: задачи, методы, преимущества
Создание прототипа как этап разработки сайта: задачи, методы, преимуществаСоздание прототипа как этап разработки сайта: задачи, методы, преимущества
Создание прототипа как этап разработки сайта: задачи, методы, преимущества
Techart Marketing Group
комерческое предложение
комерческое предложениекомерческое предложение
комерческое предложение
Mike Balandin
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
Yury Vetrov
Тяжело в учении - легко в бою
Тяжело в учении - легко в боюТяжело в учении - легко в бою
Тяжело в учении - легко в бою
Dmitry Zimin
Основы быстрого прототипирования
Основы быстрого прототипированияОсновы быстрого прототипирования
Основы быстрого прототипирования
Mitya Osadchuk
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Yandex
Обзор средств прототипирования веб-сайтов
Обзор средств прототипирования веб-сайтовОбзор средств прототипирования веб-сайтов
Обзор средств прототипирования веб-сайтов
Pavel Konoplitski
О разработке сайтов в целом
О разработке сайтов в целомО разработке сайтов в целом
О разработке сайтов в целом
Uplab_University
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite-2016 (осень), день 1, 02 Татьяна Шульгина. Процесс разработки в...
HappyDev-lite
Как сделать хороший прототип вовремя?
Как сделать хороший прототип вовремя?Как сделать хороший прототип вовремя?
Как сделать хороший прототип вовремя?
Mikhail Kulakov
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВИспользование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
SQALab
Automation from the trenches
Automation from the trenchesAutomation from the trenches
Automation from the trenches
Gleb Rybalko
11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов
borovoystudio
MockServer-driven development
MockServer-driven developmentMockServer-driven development
MockServer-driven development
Testableapple
Layout testing with galen framework selenium camp
Layout testing with galen framework   selenium campLayout testing with galen framework   selenium camp
Layout testing with galen framework selenium camp
anna_chernysheva
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
«Правильный процесс дает правильный результат». Как грамотно выстроить работу...
borovoystudio
Создание прототипа как этап разработки сайта: задачи, методы, преимущества
Создание прототипа как этап разработки сайта: задачи, методы, преимуществаСоздание прототипа как этап разработки сайта: задачи, методы, преимущества
Создание прототипа как этап разработки сайта: задачи, методы, преимущества
Techart Marketing Group
комерческое предложение
комерческое предложениекомерческое предложение
комерческое предложение
Mike Balandin
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
Yury Vetrov
Тяжело в учении - легко в бою
Тяжело в учении - легко в боюТяжело в учении - легко в бою
Тяжело в учении - легко в бою
Dmitry Zimin

Holygrail. Система прототипирования

  • 1. HolyGrail Святой Грааль прототипирования для менеджеров http://www.amazedev.com/holygrail Коноплицкий Павел
  • 2. Предпосылки Точный прототип позволяет проработать требования к интерфейсу и позиционированию функциональных блоков уже на этапе проектирования. Дизайнеры будут задавать меньше вопросов и не будут отрисовывать несуществующую функциональность. С прототипом дизайн чаще рисуется «с первого раза». Заказчикам прототип дает четкое представление того, что они получат по итогу проекта. Интерактивный прототип понятнее для заказчика. http://www.amazedev.com/holygrail
  • 3. Проблема http://www.amazedev.com/holygrail В большинстве компаний отсутствует этап прототипирования web- проектов или он выполняется людьми не всегда обладающими необходимыми знаниями в области юзабилити и web- технологий.
  • 4. Проблема C овременные средства прототипирования не способны полностью удовлетворить потребности и требования к прототипу всех участников проекта. Требования: Скорость создания прототипа Интерактивность Детализация Необходимость повторной отрисовки Доступность для всех участников проекта Возможность простого внесения изменений http://www.amazedev.com/holygrail http://www.amazedev.com/prototipirovanie-web-proektov-sobiraya-voedino/
  • 5. Проблема Неудовлетворённость текущей ситуацией с прототипированием web- проектов. http://www.amazedev.com/holygrail
  • 6. Потребности Автоматизировать типовые решения, сохранив пространство для творчества. Быстро создавать интерактивные, детализированные прототипы, доступные всем участникам проекта, с возможностью вносить изменения. Учитывать невысокий уровень знаний и опыта у человека выполняющего прототипирование. Веские и достаточные аргументы в пользу прототипирования. Выгода должна выражаться цифрами. http://www.amazedev.com/holygrail
  • 7. HolyGrail. Решение Open Source Части layout’ а (header , footer и другие ) реализованы с помощью SSI вставок Набор паттернов проектирования (snippets) для программы Dreamweaver Типичный проект Usability Guidelines http://www.amazedev.com/holygrail
  • 8. HolyGrail . Процесс http://www.amazedev.com/holygrail
  • 9. HolyGrail . Процесс http://www.amazedev.com/holygrail
  • 10. HolyGrail для менеджера Делает предметным общение с клиентом о проекте. Уменьшает время на создание прототипа. Больше времени для выполнения творческих задач. Повышает качество проектов уменьшая количество ошибок связанных с юзабилити. Снижает требования к знаниям менеджера необходимых для получения приемлемого прототипа. Позволяет сразу же протестировать интерактивный прототип на пользователях. http://www.amazedev.com/holygrail
  • 11. HolyGrail для девелопера http://www.amazedev.com/holygrail Интеграция (x)HTML и CSS прототипа c используемым в компании фреймворком. Позволяет копировать элементы из прототипа и сразу же вставлять в проект. Сокращает время на создание и вёрстку типовых элементов. С помощью правил и стандартов позволяет избежать негативного эффекта от домысливания недостающих элементов управления в интерфейсе.
  • 12. HolyGrail . Пример http://www.amazedev.com/holygrail Главная страница
  • 13. HolyGrail . Пример http://www.amazedev.com/holygrail Страница контактов
  • 14. HolyGrail . Пример http://www.amazedev.com/holygrail Авторизованный пользователь. Изменение данных профиля
  • 15. HolyGrail . Пример http://www.amazedev.com/holygrail Администратор. Рассылка
  • 16. HolyGrail . Пример http://www.amazedev.com/holygrail Adobe.com
  • 17. HolyGrail . Пример http://www.amazedev.com/holygrail Amazon.com
  • 18. HolyGrail. Узкие места Менеджеру всё же иногда приходится разбираться и править HTML код. Иногда есть необходимость делать фейковую функциональность. Симулировать будущую реальную ( AJAX, pop-up) . Поддержка SSI на хостингах не всегда бывает включена по-умолчанию. http://www.amazedev.com/holygrail
  • 19. ToDo . Внесите свой вклад Поддержка IT сообщества Обратная связь от менеджеров Переход к полной поддержке web -стандартов Создание большего количества типовых лэйаутов (блог, интернет-магазин, корпоративный сайт, социальная сеть и т.д.) Пополнение библиотеки сниппетов (вёрстка новых элементов) Создание мастера генерации прототипа Оформление Русско-английский перевод http://www.amazedev.com/holygrail
  • 20. Спасибо за внимание . Вопросы? Коноплицкий Павел [email_address] +7 985 414 906 1 http://www.amazedev.com http://www.amazedev.com/holygrail http://pkonoplitskiy.moikrug.ru