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