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

Дизайн в целом: проектирование + оформление

Зачем проектирование как отдельный процесс

разделение задач в голове

Зачем проектирование как отдельный процесс

скорость итераций

Зачем проектирование как отдельный процесс

иногда дизайнер —не проектировщик

Стадии проектирования

Предварительная аналитика

Прототипирование

Прототипы: без детализации

Прототипы: детализация

Ок, у нас есть прототипыЭто уже макеты?

Что можно поменять?

Цель: не убить дизайном элементы, которые влияют на конверсию.

Важные детали vs.несущественные мелочи

Надо разобраться, что зачем и почему.

Элементы, о которых мы поговорим

текстКогда мы говорим клиентам, что к работе можем приступить через месяц, мы видим удивленные глаза. Ничего удивительного в этом на самом деле нет, просто у клиента не установлены ни Google Analytics, ни Яндекс.Метрика, а для того, чтобы приступить к работе, нам необходимо опираться на статистику.

кнопки ссылки

картинки

выравнивание

сетка

формы

Кнопки: надпись

опять? скачать!

Кнопки: размер

купить

купить

купить

Кнопки: цвет и формакупить

купить

купить

купить

купить

купить

купить

купить!

купить disabled

Ссылки: в текстеРасставлять ссылки в тексте — очень хорошо. Но они должны отличаться от основного стиля текста так, чтоб все поняли, что перед ними — ссылка!

•Цвет•Использование: текст, список ссылок

•Подчеркивание

Ссылки: в списках ссылокЧто за списки?Например, новости;или категории.Не цветом текста!

Лучше — цветом ссылок;Можно не подчеркивать;А только по наведению.

Картинки: размер и качество

картинки

продают

Картинки: уместность и уникальность

Текст: размерЭто пример слишком мелкого текста. Попробуйте прочитать его с 12-го ряда. Не получилось? То-то же! А если получилось — хау, Зоркий Сокол.

Это нормальный размер. Его легко читать.

Текст среднего размера. Часто встречается, но большие объемы текста читать неудобно.

Текст: смысловая разметкаТруд как проклятие

В театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.

Фестиваль Герца Франка

Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе! Музыканты что видят, то играют. На ходу. Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. С аккордеоном, почему-то.

Разные подходы к саундтреку

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

Труд как проклятиеВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.

Фестиваль Герца ФранкаГерц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе! Музыканты что видят, то играют. На ходу. Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. С аккордеоном, почему-то.

Разные подходы к саундтрекуРокеры замутили Пинк Флойд. Им показалось, это как раз про

Текст: контраст с фономВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.

Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе! Музыканты что видят, то играют. На ходу. Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. С аккордеоном, почему-то.

В театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.

Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе! Музыканты что видят, то играют. На ходу. Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. С аккордеоном, почему-то.

В театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.

Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе! Музыканты что видят, то играют. На ходу. Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. С аккордеоном, почему-то.

Текст: выравниваниеГерц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых

Герц Франк это не кино даже, а  ч / б ф о т о в  д в и ж е н и и . В  «Старше на десять минут» мальчик сидит и  в о л н у е т с я . В  « Б е л ы х

Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых

Текст: межстрочный интервалВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже.

В театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за

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

потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца

Франка, и ему порвали душу.

Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и

волнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже.

Текст: длина строкиВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за

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

потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца

Франка, и ему порвали душу.

В театре два буфета. Один для зрителей, в нём яблочный сок

по цене коньяка. Унизительно. В актёрском за те же деньги

приносят шницель, вино и булочку. Настоящий оплот

культуры. У нас в первом акте серенада, потом пауза до

свадьбы в третьем. Я взял чай, а скрипач два кампари. Он

участвовал в фестивале Герца Франка, и ему порвали душу.

Текст: количествоВ театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.Герц Франк это не кино даже, а ч/б фото в движении. В «Старше на десять минут» мальчик сидит и волнуется. В «Белых колокольчиках» девочка бегает по городу. Всё. Сюжет отсутсвует, звук тоже. Кинокритики говорят: потрясающе! Музыканты что видят, то играют. На ходу. Перфоманс. В первый день рокеры, второй джазмены, в третий струнный квартет. С аккордеоном, почему-то.Рокеры замутили Пинк Флойд. Им показалось, это как раз про девочку и колокольчики. Джазмены булькали в микрофон, или хрюкали. Чем странней,

В театре два буфета. Один для зрителей, в нём яблочный сок по цене коньяка. Унизительно. В актёрском за те же деньги приносят шницель, вино и булочку. Настоящий оплот культуры. У нас в первом акте серенада, потом пауза до свадьбы в третьем. Я взял чай, а скрипач два кампари. Он участвовал в фестивале Герца Франка, и ему порвали душу.

Оставшиеся элементы

выравнивание

сетка

формы

«воздух»

Примеры

Примеры

Примеры

Спасибо за внимание.

Алексей Кириченко

a.kirichenko@promodo.ru

+38 097 457-85-25