SlideShare a Scribd company logo
Как создавать прототипы
 будущих веб-сервисов
     В презентации 25 слайдов
   Продолжительность: 1 – 1,5 часа
       Все вопросы – в конце.
Прототипы надо
рисовать  1.

           ЗАЧЕМ?
          2.

               КАК?
          3.

               ГДЕ?
Зачем?
С позиции разработчиков/заказчиков
1.
     Проверка идеи


2.
     Осязаемый объект коммуникации


3.
     Cогласованность идей и задумок


4.   Ответственность за определение будущего функционала
Зачем?
А самое главное…
          Скорость



         Стоимость
         разработки
Зачем?
Когда прототип не нужен… совсем
1.
     Функционал определен



2.
     Непринятие заказчиком



3.
     Креативное визуальное решение
Зачем?
Как?
Помни основные принципы
1.   Прототип – это декорации. Важен сценарий


2.   Осмысленные названия для элементов
     - Никаких Lorem Ipsum и Яндекс.Реферат
     - Контент прежде всего


3.   Создавать библиотеки компонентов



4.   Сетка наше все


5.   Начинать надо со структуры
Как?
Самая большая ошибка, которая
происходит во время проектирования —
сразу же схватиться за инструмент
рисования.

Прототип – одна из последних стадий в проектировании.
До этого должна быть проделана подготовительная работа.
Как?
1.                                2.
     Нужно много раз                   Понять последовательность
     подумать за                       следования по прототипу
     пользователя                      (магистральный маршрут).
                                       Второстепенные маршруты, контекст
      Какая у него проблема?          должен подталкивать.
      Как пользователь           3.
       сталкивается с вашим            Прототип подробно      Компоновка
       решением?                       отобразить шаги,       блоков очень
                                       которые пользователь   сильно зависит
      Как ваше решение будет
       работать (с точки зрения        (по вашему мнению)     от характера
       пользователя).                                         взаимодействия
                                       проходит для           и последователь-
      Как пользователь                достижения своих       ности действий
       получит выгоду?                 целей.
Как?
Как?
Где заканчиваются прототипы
и начинается дизайн?
Метод
прогрессивного
джипега




Решить задачу во
время формулирования
Как?
Научиться создавать прототипы

          Практика
         Практика
        Практика
Где?
Где?
Где?
Где?
Где?
Основа в растре


 Главные инструменты

 слои
Где?
Почему вектор?

 Рост
 производительности
Где?
Фишки

 Артборды
 Векторные иконки
 Smart Grid

              …
Важно помнить

Линейность действий
Важно помнить

                Делаем
                  1.

                Делаем

                  2.


                Делаем
                  3.
Важно помнить

Первый экран
Важно помнить
Что почитать/посмотреть?

Александра Королькова

     Живая типографика

      www.behance.net             и пр.


       Сервисы, сервисы, сервисы
Спасибо

More Related Content

Viewers also liked

план 12 13года
план 12 13годаплан 12 13года
план 12 13годаmamaeva80
 
Póker de color
Póker de colorPóker de color
Póker de color
Gustavo Sanchez Del Hoyo
 
умк школа россии
умк школа россииумк школа россии
умк школа россииYakovleva_I
 
Цветотерапия Биоптрон
Цветотерапия Биоптрон Цветотерапия Биоптрон
Цветотерапия Биоптрон
bioptron-store
 
SERPENT 710 1/10 NITRO
SERPENT 710 1/10 NITROSERPENT 710 1/10 NITRO
SERPENT 710 1/10 NITRO
Gabriel Moraga
 
малая олимпиада харловский д с
малая олимпиада харловский д смалая олимпиада харловский д с
малая олимпиада харловский д с
hdsad
 
интерактивный Flash фильм
интерактивный Flash фильминтерактивный Flash фильм
интерактивный Flash фильмDasha Kudres
 
Presentation of TIGRA PR-network
Presentation of TIGRA PR-networkPresentation of TIGRA PR-network
Presentation of TIGRA PR-network
Глеб Иванюшкин
 
Main presentation 16_9_1
Main presentation 16_9_1Main presentation 16_9_1
Main presentation 16_9_1AFRC_EF_MSU
 
Format of examination
Format of examinationFormat of examination
Format of examination
Manish Paul
 
уважаемые ребята
уважаемые ребятауважаемые ребята
уважаемые ребятаsch1387
 
H70 Presentation
H70 PresentationH70 Presentation
H70 Presentationguest3bce51
 
психофізіологічні особливості (1)
психофізіологічні особливості   (1)психофізіологічні особливості   (1)
психофізіологічні особливості (1)Оксана Кикоть
 
проект курсы икт
проект   курсы иктпроект   курсы икт
проект курсы икт
Gimnasium №1, Mytishchi, Russia
 
музей обеліск
музей обеліскмузей обеліск
музей обеліск
LTymneva
 
публичный доклад
публичный докладпубличный доклад
публичный докладmamaeva80
 
Info cmap
Info cmapInfo cmap
Info cmap
sliderlaura
 

Viewers also liked (20)

план 12 13года
план 12 13годаплан 12 13года
план 12 13года
 
Póker de color
Póker de colorPóker de color
Póker de color
 
Prezentne
PrezentnePrezentne
Prezentne
 
умк школа россии
умк школа россииумк школа россии
умк школа россии
 
Цветотерапия Биоптрон
Цветотерапия Биоптрон Цветотерапия Биоптрон
Цветотерапия Биоптрон
 
SERPENT 710 1/10 NITRO
SERPENT 710 1/10 NITROSERPENT 710 1/10 NITRO
SERPENT 710 1/10 NITRO
 
малая олимпиада харловский д с
малая олимпиада харловский д смалая олимпиада харловский д с
малая олимпиада харловский д с
 
интерактивный Flash фильм
интерактивный Flash фильминтерактивный Flash фильм
интерактивный Flash фильм
 
Presentation of TIGRA PR-network
Presentation of TIGRA PR-networkPresentation of TIGRA PR-network
Presentation of TIGRA PR-network
 
College of governance and business
College of governance and businessCollege of governance and business
College of governance and business
 
Main presentation 16_9_1
Main presentation 16_9_1Main presentation 16_9_1
Main presentation 16_9_1
 
Дубцова М.В.
Дубцова М.В.Дубцова М.В.
Дубцова М.В.
 
Format of examination
Format of examinationFormat of examination
Format of examination
 
уважаемые ребята
уважаемые ребятауважаемые ребята
уважаемые ребята
 
H70 Presentation
H70 PresentationH70 Presentation
H70 Presentation
 
психофізіологічні особливості (1)
психофізіологічні особливості   (1)психофізіологічні особливості   (1)
психофізіологічні особливості (1)
 
проект курсы икт
проект   курсы иктпроект   курсы икт
проект курсы икт
 
музей обеліск
музей обеліскмузей обеліск
музей обеліск
 
публичный доклад
публичный докладпубличный доклад
публичный доклад
 
Info cmap
Info cmapInfo cmap
Info cmap
 

Similar to как создавать прототипы

Designlecture 091008072837-phpapp01
Designlecture 091008072837-phpapp01Designlecture 091008072837-phpapp01
Designlecture 091008072837-phpapp01Nika Stuard
 
Иду по приборам… Практические советы по визуализации работ. Москва
Иду по приборам… Практические советы по визуализации работ. МоскваИду по приборам… Практические советы по визуализации работ. Москва
Иду по приборам… Практические советы по визуализации работ. МоскваMaxim Gaponov
 
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
Andrew Shapiro
 
Интерактивные Прототипы или «Игра в Имитацию»
Интерактивные Прототипы  или «Игра в Имитацию»Интерактивные Прототипы  или «Игра в Имитацию»
Интерактивные Прототипы или «Игра в Имитацию»
Artem Tolstykh
 
Организация эффективных процессов
Организация эффективных процессовОрганизация эффективных процессов
Организация эффективных процессов
Vladimir Melnikov
 
Иду по приборам. Львов, 2011
Иду по приборам. Львов, 2011Иду по приборам. Львов, 2011
Иду по приборам. Львов, 2011Maxim Gaponov
 
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
Nikita Filippov
 
Дмитрий Чирков, "Технологический стартап", занятие 2, 21.03.2012
Дмитрий Чирков, "Технологический стартап", занятие 2, 21.03.2012Дмитрий Чирков, "Технологический стартап", занятие 2, 21.03.2012
Дмитрий Чирков, "Технологический стартап", занятие 2, 21.03.2012ideaperm
 
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
Yury Vetrov
 
Проектирование с учетом пользовательских требований
Проектирование с учетом пользовательских требованийПроектирование с учетом пользовательских требований
Проектирование с учетом пользовательских требований
CEE-SEC(R)
 
Usability don't make me think
Usability don't make me thinkUsability don't make me think
Usability don't make me think
Konstantin Polosukhin
 
рит2007 требования и состав работ бесков доронин
рит2007   требования и состав работ   бесков доронинрит2007   требования и состав работ   бесков доронин
рит2007 требования и состав работ бесков доронинMedia Gorod
 
Консалтинг высоконагруженных web систем
Консалтинг высоконагруженных web системКонсалтинг высоконагруженных web систем
Консалтинг высоконагруженных web системMedia Gorod
 
Как улучшить удобство продукта минимальными затратами?
Как улучшить удобство продукта минимальными затратами?Как улучшить удобство продукта минимальными затратами?
Как улучшить удобство продукта минимальными затратами?
Oleg Karapuzov
 
Канвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипирование
Канвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипированиеКанвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипирование
Канвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипирование
Lumiknows Consultancy
 
Путь Product Owner`s. От факапов до успешного продукта
Путь Product Owner`s. От факапов до успешного продуктаПуть Product Owner`s. От факапов до успешного продукта
Путь Product Owner`s. От факапов до успешного продукта
Andrii Mandrika
 
От энтузиаста к веб разработчику
От энтузиаста к веб разработчикуОт энтузиаста к веб разработчику
От энтузиаста к веб разработчику
Nikolay Mironov
 
Выступление: инструменты и методы эффективной удалённой работы
Выступление: инструменты и методы эффективной удалённой работыВыступление: инструменты и методы эффективной удалённой работы
Выступление: инструменты и методы эффективной удалённой работы
ryba4
 
Тяжело в учении - легко в бою
Тяжело в учении - легко в боюТяжело в учении - легко в бою
Тяжело в учении - легко в бою
Dmitry Zimin
 
Идеальный процесс разработки - размышления на тему (ред 3).
Идеальный процесс разработки - размышления на тему (ред 3).Идеальный процесс разработки - размышления на тему (ред 3).
Идеальный процесс разработки - размышления на тему (ред 3).
Michael Akimov
 

Similar to как создавать прототипы (20)

Designlecture 091008072837-phpapp01
Designlecture 091008072837-phpapp01Designlecture 091008072837-phpapp01
Designlecture 091008072837-phpapp01
 
Иду по приборам… Практические советы по визуализации работ. Москва
Иду по приборам… Практические советы по визуализации работ. МоскваИду по приборам… Практические советы по визуализации работ. Москва
Иду по приборам… Практические советы по визуализации работ. Москва
 
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
 
Интерактивные Прототипы или «Игра в Имитацию»
Интерактивные Прототипы  или «Игра в Имитацию»Интерактивные Прототипы  или «Игра в Имитацию»
Интерактивные Прототипы или «Игра в Имитацию»
 
Организация эффективных процессов
Организация эффективных процессовОрганизация эффективных процессов
Организация эффективных процессов
 
Иду по приборам. Львов, 2011
Иду по приборам. Львов, 2011Иду по приборам. Львов, 2011
Иду по приборам. Львов, 2011
 
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
 
Дмитрий Чирков, "Технологический стартап", занятие 2, 21.03.2012
Дмитрий Чирков, "Технологический стартап", занятие 2, 21.03.2012Дмитрий Чирков, "Технологический стартап", занятие 2, 21.03.2012
Дмитрий Чирков, "Технологический стартап", занятие 2, 21.03.2012
 
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
 
Проектирование с учетом пользовательских требований
Проектирование с учетом пользовательских требованийПроектирование с учетом пользовательских требований
Проектирование с учетом пользовательских требований
 
Usability don't make me think
Usability don't make me thinkUsability don't make me think
Usability don't make me think
 
рит2007 требования и состав работ бесков доронин
рит2007   требования и состав работ   бесков доронинрит2007   требования и состав работ   бесков доронин
рит2007 требования и состав работ бесков доронин
 
Консалтинг высоконагруженных web систем
Консалтинг высоконагруженных web системКонсалтинг высоконагруженных web систем
Консалтинг высоконагруженных web систем
 
Как улучшить удобство продукта минимальными затратами?
Как улучшить удобство продукта минимальными затратами?Как улучшить удобство продукта минимальными затратами?
Как улучшить удобство продукта минимальными затратами?
 
Канвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипирование
Канвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипированиеКанвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипирование
Канвас "Думай как создатель": дизайн-мышление-трендвотчинг-прототипирование
 
Путь Product Owner`s. От факапов до успешного продукта
Путь Product Owner`s. От факапов до успешного продуктаПуть Product Owner`s. От факапов до успешного продукта
Путь Product Owner`s. От факапов до успешного продукта
 
От энтузиаста к веб разработчику
От энтузиаста к веб разработчикуОт энтузиаста к веб разработчику
От энтузиаста к веб разработчику
 
Выступление: инструменты и методы эффективной удалённой работы
Выступление: инструменты и методы эффективной удалённой работыВыступление: инструменты и методы эффективной удалённой работы
Выступление: инструменты и методы эффективной удалённой работы
 
Тяжело в учении - легко в бою
Тяжело в учении - легко в боюТяжело в учении - легко в бою
Тяжело в учении - легко в бою
 
Идеальный процесс разработки - размышления на тему (ред 3).
Идеальный процесс разработки - размышления на тему (ред 3).Идеальный процесс разработки - размышления на тему (ред 3).
Идеальный процесс разработки - размышления на тему (ред 3).
 

More from Alexey Korotkov

Кейсы записей
Кейсы записейКейсы записей
Кейсы записей
Alexey Korotkov
 
Ваш персональный календарь процедур
Ваш персональный календарь процедурВаш персональный календарь процедур
Ваш персональный календарь процедур
Alexey Korotkov
 
Всероссийский конкурс по поддержке высокотехнологичных инновационных молодежн...
Всероссийский конкурс по поддержке высокотехнологичных инновационных молодежн...Всероссийский конкурс по поддержке высокотехнологичных инновационных молодежн...
Всероссийский конкурс по поддержке высокотехнологичных инновационных молодежн...Alexey Korotkov
 
Продажи - сердце бизнеса
Продажи - сердце бизнесаПродажи - сердце бизнеса
Продажи - сердце бизнесаAlexey Korotkov
 
Стратегии финансирования. Инструменты роста
Стратегии финансирования. Инструменты ростаСтратегии финансирования. Инструменты роста
Стратегии финансирования. Инструменты ростаAlexey Korotkov
 
Как составить бизнес-план
Как составить бизнес-планКак составить бизнес-план
Как составить бизнес-планAlexey Korotkov
 
Развитие бизнеса. Подходы и инструменты
Развитие бизнеса. Подходы и инструментыРазвитие бизнеса. Подходы и инструменты
Развитие бизнеса. Подходы и инструментыAlexey Korotkov
 

More from Alexey Korotkov (8)

Кейсы записей
Кейсы записейКейсы записей
Кейсы записей
 
Ваш персональный календарь процедур
Ваш персональный календарь процедурВаш персональный календарь процедур
Ваш персональный календарь процедур
 
Всероссийский конкурс по поддержке высокотехнологичных инновационных молодежн...
Всероссийский конкурс по поддержке высокотехнологичных инновационных молодежн...Всероссийский конкурс по поддержке высокотехнологичных инновационных молодежн...
Всероссийский конкурс по поддержке высокотехнологичных инновационных молодежн...
 
Продажи - сердце бизнеса
Продажи - сердце бизнесаПродажи - сердце бизнеса
Продажи - сердце бизнеса
 
Стратегии финансирования. Инструменты роста
Стратегии финансирования. Инструменты ростаСтратегии финансирования. Инструменты роста
Стратегии финансирования. Инструменты роста
 
Как составить бизнес-план
Как составить бизнес-планКак составить бизнес-план
Как составить бизнес-план
 
лекция1
лекция1лекция1
лекция1
 
Развитие бизнеса. Подходы и инструменты
Развитие бизнеса. Подходы и инструментыРазвитие бизнеса. Подходы и инструменты
Развитие бизнеса. Подходы и инструменты
 

как создавать прототипы