Дизайн подход в работе над продуктом.
Приветствую всех! Меня зовут Ирина Хафизова, я дизайн-директор в агенстве Grids. И я сегодня расскажу о дизайн-подходе в работе над продуктом.
Как часто, начиная проект, мы сталкиваемся с ситуацией, когда 95% времени просто смотрим на ТЗ и не знаем, с чего начать.
Бывает что у проекта нет фирменнного стиля, или вообще нет необходимых материалов. И здесь как раз мы встаем в не большой ступор. И как раз, как из него выйти нам подскажет дизайн-подход.
Давайте проведем небольшой интерактив.
Представьте, что вы — дизайнер или продакт-менеджер, работающий в команде с дизайнером. Вы получили стандартное ТЗ на разработку дизайна для продукта, сайта или лендинга. В нем написано: «вверху должно быть навигационное меню, ниже — слайд-шоу и так далее».
Вы изучаете это ТЗ, обдумываете его и начинаете рисовать.
Некоторые сразу переходят к визуальной части. Так сказать начинают с неправильного подхода. Если мы начинаем работать таким образом, мы тратим наше время на доработки и переделки. Потому что мы не изучили продукт должным образом. Мы можем накидывать множество вариантов, но вероятность попасть в точку с сотого раза остается крайне малой
Итак, как это исправить?
Здесь начинается история о дизайн-подходе. Хочу уточнить, что в этом процессе мы не должны игнорировать аналитику и исследования. Мы говорим только о визуальной части дизайна. Если к нам приходит уже существующий сайт на редизайн. Мы анализируем существующий сайт, начиная от конверсии и заканчивая путём пользователя и т.д. Как будто мы пропускаем какую-то вот эту часть. И только после её проработки мы можем переходить к визуальной части. Когда переходим к визуальному дизайну, начинаем применять дизайн-подход.
Это универсальный подход к задачам с максимальным использованием предыдущего опыта в дизайне.
То есть мы можем использовать опыт других людей, какой-то свой личный опыт, опыт своей команды или что-то ещё. Условно говоря, мы говорим о том, что в дизайне, уже давно всё изобрели. Ну, изобрели и структуры, и сетки, и виды кнопок, и огромное количество других элементов. Поэтому дизайн-подход основывается на неком таком работе с референсами, насмотренности и ещё с чем-то.
- Ускоряет проработку . Он ускоряет работу над самим дизайном, потому что у нас никогда нет вот этого "чистого листа".
- Помогает шире посмотреть на задачу. Потому что мы из разных частей вычленяем референсы, и с ними работаем.
- Поможет не бояться чистого листа. Не бояться сидеть над пустым фреймом, и думать какую кнопку куда поставить.
Соответственно, до нас уже всё давно нарисовали, и нам остаётся, по сути дела, адаптировать все элементы и истории взаимодействия пользователя и интерфейса под свой проект.
В основе дизайн-подхода лежит метод прогрессивного JPEG.
В отличие от обычного JPEG, который загружается сверху вниз, прогрессивный JPEG позволяет видеть картинку сразу, даже если она заполнена, например, на 30%. Сначала мы видим только очертания, а по мере загрузки процент заполнения увеличивается.
Таким образом, у нас проект всегда на 100% готов, и отличается он на разных стадиях только степенью своей проработанности. Мы можем сразу же видеть, полностью, например, главную страницу сайта. Мы можем сразу увидеть всю страницу целиком, полностью структуру, контент и так далее. Например, работать уже над деталировкой, над структурой внутри каких-то блоков. У нас всегда есть понимание того, из чего состоит наш проект: что у нас будет на первом экране, на втором экране и так далее.
Как раз такой метод помогает не зацикливаться и не останавливаться на чём-то одном.
Про визуальный вкус, и насмотренность
Что нам ещё помогает в дизайн-подходе — это, собственно, визуальный вкус.
Визуальный вкус складывается из насмотренности, опыта и базы знаний.
У Леонардо да Винчи был свой метод запоминания и формирования "библиотеки" сознания — он фиксировал всё, что видел, и мог извлечь эти знания позже. Насмотренность работает похожим образом: она объединяет опыт и знания, которые у нас есть, — в голове или в специальной папке на компьютере, телефоне, Pinterest и т.д. Это позволяет быстро генерировать идеи и визуальные истории.
Как прокачивать насмотренность?
Чтобы развивать насмотренность, её нужно разложить на несколько параметров. Невозможно развивать её, если вы, например, раз в год посмотрите несколько сайтов или послушаете лекцию по искусству. Насмотренность формируется регулярно.
Можно выделять небольшие промежутки времени для этой практики. Я, например, использую приём чтения книг: когда у меня немного времени, но хочется прочитать, я раскладываю книги в разных частях дома. Например, книга на кухне, в гостиной и в спальне. Каждый раз, когда я оказываюсь в этом месте, могу открыть книгу и почитать.
У меня есть перерыв на 10 минут, и я открываю книгу, чтобы почитать. Я ставлю таймер на 10–15 минут и читаю, чтобы не отвлекаться на что-то другое. В результате мне удалось прочитать три книги за достаточно короткий срок.
Таким образом, с насмотренностью работает точно так же. Например, пока вы пьёте кофе, можно посмотреть 10 минут какой-то ресурс или послушать лекцию. Вы можете запланировать, что раз в месяц будете посещать музей или делать что-то ещё. Главное — регулярно выполнять маленькие шаги. Сначала можете записывать это в календарь. У меня, например, каждое действие прописано, и вы можете делать так, как удобно именно вам. Регулярность — это основной принцип.
Когда вы будете складывать в свою копилку примеры вместе с практическим опытом, это отложится у вас в голове. Например, когда вы будете получать задание на сайт или кто-то опишет какую-то идею, чем больше ваша "копилка", тем быстрее ваше сознание будет извлекать информацию.
Если, например, станет очевидным, что нужен интерактив во взаимодействии с пользователем, вы уже будете помнить, где видели похожие примеры. Это касается и визуала.
Про один из способов - копирование хороших работ. В процессе мы можем понять, как выстроены элементы и взаимодействие с пользователем. Копировать можно не только на работе, но и отдельно, чтобы начать понимать структуру сайтов, правильный визуальный ритм и так далее. Это приходит с опытом.
3) Анализ
Анализируя свои референсы, вы понимаете смысл и идеи, лежащие в их основе: технику, художественные приёмы, сетку и верстку, шрифты и их совместимость. Вы сможете выявить, как масштабируются элементы и развиваются идеи, что помогает лучше понимать анимацию и пользовательские паттерны.
Это может показаться сложным, но со временем всё складывается в структуру в голове. Вы научитесь использовать свою насмотренность и работать с ней
С 19 минуты Ира, рассказывает как они применяли дизайн-подход в работе над проектом Yoola.
Ключевые пойнты дизайн-подхода
