Как делать дизайнпо прототипам
Дизайн в целом:проектирование + оформление
Зачем проектированиекак отдельный процесс  разделение задач в голове
Зачем проектированиекак отдельный процесс      скорость итераций
Зачем проектированиекак отдельный процессиногда дизайнер —не проектировщик
Стадии проектирования           Предварительная           аналитика           Прототипирование
Прототипы: без детализации
Прототипы: детализация
Ок, у нас есть прототипыЭто уже макеты?Что можно поменять?
Важные детали vs.несущественные мелочи        Цель: не убить        дизайном элементы,        которые влияют        на кон...
Элементы, о которых мыпоговорим      формы  кнопки                               ссылки                                   ...
Кнопки: надпись  опять?      скачать!
Кнопки: размеркупить                  к         купить
Кнопки: цвет и форма  купить!   купить                       купить  купить    купить     disabled купить     купить купит...
Ссылки: в текстеРасставлять ссылки в тексте— очень хорошо. Но они должны                                   •отличаться от ...
Ссылки: в списках ссылокЧто за списки?      Лучше — цветомНапример,           ссылок;новости;            Можно неили катег...
Картинки: размер и качество                          ин ки                    ка рт                           да ют       ...
Картинки: уместностьи уникальность
Текст: размер     Это пример слишком мелкого текста. Попробуйте     прочитать его с 12-го ряда. Не получилось? То-то же! А...
Текст: смысловая разметкаТруд как проклятиеВ театре два буфета. Один для зрителей, в нём яблочный сок по                  ...
Текст: контраст с фономВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрско...
Текст: выравниваниеГерц Франк это   Герц Франк это           Герц Франк это не кино даже,   не кино даже,            не ки...
Текст: межстрочный интервалВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актё...
Текст: длина строкиВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за...
Текст: количествоВ театре два буфета. Один для зрителей, в нём      В театре два буфета. Один для зрителей, в нёмяблочный ...
Оставшиеся элементы  формы  выравнивание   сетка  «воздух»
Примеры
Примеры
Примеры
Спасибо за внимание.Алексей Кириченкоa.kirichenko@promodo.ru+38 097 457-85-25
Upcoming SlideShare
Loading in …5
×

Как делать дизайн по прототипам

706 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
706
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Как делать дизайн по прототипам

  1. 1. Как делать дизайнпо прототипам
  2. 2. Дизайн в целом:проектирование + оформление
  3. 3. Зачем проектированиекак отдельный процесс разделение задач в голове
  4. 4. Зачем проектированиекак отдельный процесс скорость итераций
  5. 5. Зачем проектированиекак отдельный процессиногда дизайнер —не проектировщик
  6. 6. Стадии проектирования Предварительная аналитика Прототипирование
  7. 7. Прототипы: без детализации
  8. 8. Прототипы: детализация
  9. 9. Ок, у нас есть прототипыЭто уже макеты?Что можно поменять?
  10. 10. Важные детали vs.несущественные мелочи Цель: не убить дизайном элементы, которые влияют на конверсию. Надо разобраться, что зачем и почему.
  11. 11. Элементы, о которых мыпоговорим формы кнопки ссылки выравниваниетекстКогда мы говорим клиентам, что к сеткаработе можем приступить черезмесяц, мы видим удивленные глаза. картинкиНичего удивительного в этом насамом деле нет, просто у клиента неустановлены ни Google Analytics, ниЯндекс.Метрика, а для того, чтобыприступить к работе, нам необходимоопираться на статистику.
  12. 12. Кнопки: надпись опять? скачать!
  13. 13. Кнопки: размеркупить к купить
  14. 14. Кнопки: цвет и форма купить! купить купить купить купить disabled купить купить купить купить
  15. 15. Ссылки: в текстеРасставлять ссылки в тексте— очень хорошо. Но они должны •отличаться от основного стиля •текста так, чтоб все поняли, чтоперед ними — ссылка! •
  16. 16. Ссылки: в списках ссылокЧто за списки? Лучше — цветомНапример, ссылок;новости; Можно неили категории. подчеркивать;Не цветом текста! А только по наведению.
  17. 17. Картинки: размер и качество ин ки ка рт да ют п ро
  18. 18. Картинки: уместностьи уникальность
  19. 19. Текст: размер Это пример слишком мелкого текста. Попробуйте прочитать его с 12-го ряда. Не получилось? То-то же! А если получилось — хау, Зоркий Сокол. Текст среднего размера. Часто встречается, но большие объемы текста читать неудобно. Это нормальный размер. Его легко читать.
  20. 20. Текст: смысловая разметкаТруд как проклятиеВ театре два буфета. Один для зрителей, в нём яблочный сок по Труд как проклятиецене коньяка. Унизительно. В актёрском за те же деньги приносятшницель, вино и булочку. Настоящий оплот культуры. У нас в В театре два буфета. Один для зрителей, в нём яблочный сок попервом акте серенада, потом пауза до свадьбы в третьем. Я взял цене коньяка. Унизительно. В актёрском за те же деньги приносятчай, а скрипач два кампари. Он участвовал в фестивале Герца шницель, вино и булочку. Настоящий оплот культуры. У нас вФранка, и ему порвали душу. первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале ГерцаФестиваль Герца Франка Франка, и ему порвали душу.Герц Франк это не кино даже, а ч/б фото в движении. В «Старше надесять минут» мальчик сидит и волнуется. В «Белых колокольчиках» Фестиваль Герца Франкадевочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже.Кинокритики говорят: потрясающе! Музыканты что видят, то играют. Герц Франк это не кино даже, а ч/б фото в движении. ВНа ходу. Перфоманс. В первый день рокеры, второй джазмены, в «Старше на десять минут» мальчик сидит и волнуется. В «Белыхтретий струнный квартет. С аккордеоном, почему-то. колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе!Разные подходы к саундтреку Музыканты что видят, то играют. На ходу. Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. СРокеры замутили Пинк Флойд. Им показалось, это как раз про аккордеоном, почему-то.девочку и колокольчики. Джазмены булькали в микрофон, илихрюкали. Чем странней, тем гениальней, решили они. Разные подходы к саундтреку Рокеры замутили Пинк Флойд. Им показалось, это как раз про
  21. 21. Текст: контраст с фономВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель,вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач двакампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках»девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе! Музыканты что видят, то играют. На ходу.Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. С аккордеоном, почему-то.В театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель,вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач двакампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках»девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе! Музыканты что видят, то играют. На ходу.Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. С аккордеоном, почему-то.В театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель,вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач двакампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках»девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе! Музыканты что видят, то играют. На ходу.Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. С аккордеоном, почему-то.
  22. 22. Текст: выравниваниеГерц Франк это Герц Франк это Герц Франк это не кино даже, не кино даже, не кино даже, а ч/б фото а  ч / б ф о т о а ч/б фото в движении. в  д в и ж е н и и . в движении. В «Старше на В  «Старше на В «Старше на десять минут» десять минут» десять минут»мальчик сидит мальчик сидит мальчик сидит и волнуется. и  в о л н у е т с я . и волнуется. В «Белых В  « Б е л ы х В «Белых
  23. 23. Текст: межстрочный интервалВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском зате же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада,потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале ГерцаФранка, и ему порвали душу.Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит иволнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже.В театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском зате же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада,потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале ГерцаФранка, и ему порвали душу.Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит иволнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже.
  24. 24. Текст: длина строкиВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском зате же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада,потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале ГерцаФранка, и ему порвали душу.В театре два буфета. Один для зрителей, в нём яблочный сокпо цене коньяка. Унизительно. В актёрском за те же деньгиприносят шницель, вино и булочку. Настоящий оплоткультуры. У нас в первом акте серенада, потом пауза досвадьбы в третьем. Я взял чай, а скрипач два кампари. Онучаствовал в фестивале Герца Франка, и ему порвали душу.
  25. 25. Текст: количествоВ театре два буфета. Один для зрителей, в нём В театре два буфета. Один для зрителей, в нёмяблочный сок по цене коньяка. Унизительно. В яблочный сок по цене коньяка. Унизительно. Вактёрском за те же деньги приносят шницель, вино актёрском за те же деньги приносят шницель, вино ии булочку. Настоящий оплот культуры. У нас в булочку. Настоящий оплот культуры. У нас в первомпервом акте серенада, потом пауза до свадьбы в акте серенада, потом пауза до свадьбы в третьем. Ятретьем. Я взял чай, а скрипач два кампари. Он взял чай, а скрипач два кампари. Он участвовал вучаствовал в фестивале Герца Франка, и ему фестивале Герца Франка, и ему порвали душу.порвали душу.Герц Франк это не кино даже, а ч/б фото вдвижении. В «Старше на десять минут» мальчиксидит и волнуется. В «Белых колокольчиках»девочка бегает по городу. Всё. Сюжет отсутсвует,звук тоже. Кинокритики говорят: потрясающе!Музыканты что видят, то играют. На ходу.Перфоманс. В первый день рокеры, второйджазмены, в третий струнный квартет. Саккордеоном, почему-то.Рокеры замутили Пинк Флойд. Им показалось, этокак раз про девочку и колокольчики. Джазмены
  26. 26. Оставшиеся элементы формы выравнивание сетка «воздух»
  27. 27. Примеры
  28. 28. Примеры
  29. 29. Примеры
  30. 30. Спасибо за внимание.Алексей Кириченкоa.kirichenko@promodo.ru+38 097 457-85-25

×