Конспект: Дизайн + 1

Арт-директор Студии Артемия Лебедева — Людвиг Быстроновский выступил с лекцией про дизайн, видеозапись доступна на канале свободного пространства «Кто такой Джон Голт?» в трёх частях.

Дизайн + 1

Посмотрел все части «Дизайн + 1». Половину лекции Людвиг рассказывает, как стать хорошим дизайнером, вторую половину отвечает на вопросы. Упорядочил информацию и составил конспект.

°°°

Уровень дизайнера определяет сумма навыков. Стать хорошим дизайнером можно, прокачивая каждый из навыков. Если прокачать каждый навык, то в сумме получится хороший дизайнер.

Дизайнер любит решать задачи

Если после создания дизайна, у вас ощущение, что что-то получилось не так, как хотели, — не переживайте, так у всех. Это нормальное поведение.

Сосредочьтесь на тех вещах, где у вас пробелы. Не умеете хорошо делать меню? В следующем проекте сфокусируйтесь на том, чтобы научиться делать хорошее меню.

Вызов — это желание попробовать что-то новое. Пытаться внедрить в один проект все вызовы, которые ставите перед собой, — плохая идея. Если планомерно разбираться со своими пробелами, год за годом, то рано или поздно они закончатся. В этом заключается секрет, как стать хорошим дизайнером.

Отличный дизайнер должен уметь всё: нарисовать иконки, дизайн сайта, сверстать, запрограммировать и ещё десять раз переписать.

Нельзя сделать хороший дизайн, не побывав в шкуре потребителя, который будет пользоваться решением дизайнера. Если выполняешь редизайн или доработку существующего приложения — установи его на смартфон и пользуйся им какое-то время.

Развитие навыков

Важно уметь потерпеть. Впереди у вас ещё будут проекты, в них можно будет по очереди прокачать все вызовы. У технологов это новый фреймворк или библиотека, у дизайнеров новый подход к расположению блоков и т.д.

Имейте немножко терпения

Прочитайте книгу по ГТД, создайте доску в Трело и там собирайте все вызовы. В каждом проекте, по очереди, прокачивайте по чуть-чуть свои навыки.

В бюро Горбунова есть хорошая аналогия — осьминожка. Можно составить такую осьминожку и от проекта к проекту прокачивать один навык за другим. Раз от раза ваша работа будет лучше.

«Дизайн + 1» означает, что, делая текущую работу, вы уже делаете следующую. Вы понимаете, как в следующий раз общаться с заказчиком, как подойти к разработке меню, чтобы получилось лучше. Если хотите делать хорошие сайты — делайте сайты. Потихоньку прокачивайте каждое умение, в итоге у вас будет получаться отлично. По-другому не бывает.

Любой дизайнер должен быть специалистом по тестированию дизайна. Например, в студии Лебедева нет отдельного специалиста по тестированию дизайна.

Как повысить интерес к работе, если стало скучно?

Есть простое решение: повысить сложность. В следующем проекте можно взять новый инструмент для дизайна или попробовать запрограммировать решение самостоятельно. Только вам нужно, чтобы ваша работа была интересной. Работодателю это не нужно. У него уже есть интересная работа — он создал контору, в которой вы работаете.

Уход в другую компанию в надежде получить интересные задачи не решит проблему. В первую очередь вы сами себе должны быть интересны. Поймите, что важно для вас, и попробуйте применить это в своей работе.

Этапы дизайн-задачи

Постановка задачи

Когда приходит заказчик и говорит: «Нужно сделать так-то», — это решение. Дизайнер не должен «решать решения». Он должен докопаться до сути, почему именно так и действительно ли так надо, может совсем иначе?

Задача изменяется в течение всего процесса: от начала до конца. Это нормально. То одна деталь всплывет, то другая. В итоге результат отличается от изначально планируемого.

Генерация идей

Можно сгенерировать множество идей, но остаться должны только жизнеспособные. Дарвинизм идей в дизайне.

Главная суть дизайнера — это придумать идеи и отобрать только те, которые выживут.

Как дизайнеру понять жизнеспособность идеи?

Только делая и сравнивая. Только беря идею и понимая через какое-то время, удачные были гипотезы или не удачные. По другому этот навык не наработать.

Если дизайнер не умеет программировать, первое, что ему следует сделать — научиться программировать самому.

Необходимо решение, которое будет максимизировать жизнеспособность и ваш интерес. Вас ждет провал, если придумали абсолютно жизнеспособное решение, но не интересное вам. Аналогично и наоборот: интересное для вас, но невозможное для реализации — провал.

Как добиться этого? Только практикой. Пробуем делать сначала неинтересные, потом когда надоест — интересные. После того как надоест, надо пробовать их скрещивать и выдавать максимально полезный результат, который в то же время будет максимально интересен вам.

Общение с заказчиком

Когда есть идея, которая кажется жизнеспособной, дизайнер идет к заказчику и рассказывает.

Заказчик не однороден. Со стороны заказчика, если это компания, могут быть разные люди. Может быть девочка, которую три дня назад взяли на работу и назначили руководить проектом. Встречаться и общаться необходимо с человеком, принимающим решения. Потому что он обладает необходимыми навыками и пониманием того, что действительно нужно. Девочка или мальчик, который получает зарплату, этими навыками и пониманием вряд ли будет обладать, а будет стараться только не обосраться.

После того, как заказчик утверждает дизайн, самая большая ошибка — это «бронзование» идеи. Дизайнер начинает считать, что утверждённый дизайн ни в коем случае нельзя менять. Он же утверждён. Всё, победа.

Разработка

К технологам приносят эту бронзовую фигню и говорят: «Будем делать». На этом этапе возникают проблемы, что нельзя реализовать какие-то части интерфейса. Технологи идут к дизайнерам и начинают выяснять.

Дизайнеры, как правило, после утверждения дизайна заказчиком считают, что любое изменение является ухудшением.

Изменения — возможны и неизбежны. В общении с заказчиком необходимо сделать акцент на том, что показанное решение является гипотезой и что оно может изменяться со временем в зависимости от ситуаций. Таким образом, гипотеза превратится в решение. На этапе разработки могут вскрыться такие вещи, о которых и подумать нельзя было.

Невозможно сесть, нарисовать Спейс Икс, отдать его инженерам, и чтоб он сразу полетел. Необходимо множество испытаний для того, чтобы понять, как на самом деле всё должно происходить, чтобы корабль успешно начал приземляться.

Презентация решения

Лучшее решение — это такое решение, которое заставляет говорить людей: «А что, так можно было?».

Чтобы понять, как лучше презентовать идею, готовое решение заказчику или вашей команде, нужно опробовать все варианты презентаций: принести дизайн на бумаге, сделать презентацию с видео, без видео, видео без звука, принести решение на плоттере. Только после того, как вы опробуете всё в своей практике, появится понимание того, как правильно презентовать идею.

Книги — это хорошо. Но чтение книг по кулинарии не сделает вас профессиональным шеф-поваром. Надо учиться чистить картошку, овощи и мясо. Готовить, готовить и ещё раз готовить.

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

После запуска проекта, дизайнер продолжает его развивать. Представьте, вы собираете команду в плавание, набираете нужные для путешествия вещи, еду, снаряжение. Сажаете на корабль людей и отправляете. Сами не садитесь, вас же уже ждёт следующая группа путешественников.

Нет. Так нельзя. Надо самому отправляться в плавание с этой командой и следить за тем, а всё ли верно сделано. Если нет, то выдвигать гипотезы, внедрять их на месте и проверять, решила она проблему или нет. В этом случае ваша команда может вернуться из путешествия живой и здоровой.

Σ

Делать, делать и ещё раз делать. По другому дизайнером, программистом, арт-директором или менеджером не стать. Чтение книг — это хорошо, но чтение книг по переговорам от Кэмпа не сделает из вас первоклассного переговорщика. Идите на переговоры и договаривайтесь.

Процесс обновления главной страницы

Задизайнил и сверстал главную страницу своего сайта, ниже опишу процесс.

Главный вопрос, который задал себе: зачем это делать? Точно необходимо? Бизиков.ру — личный блог, куда пишу заметки о прочитанных книгах, советы по разработке и наблюдения.

Стараюсь постоянно развиваться, и сейчас самое время завести главную страницу, которая сможет рассказать обо мне посетителю: что умею делать и как со мной связаться. Кроме того, блог обрастает новыми заметками. Возникает потребность каталогизировать содержимое. Первый шаг к этому — отображать на главной только полезные и качественные материалы со всего блога.

Подготовка

Обязательное условие: нельзя начинать верстать, пока нет дизайна в Скетче. Во время выполнения тестового задания для Школы у меня получилось разобраться с ним. При разработке дизайна главной страницы закреплял навыки: использовал горячие клавиши, артборды и символы.

Перечитал «Типографику и вёрстку», поэтому кроме освоения Скетча старался использовать принципы дизайна: правило внутреннего и внешнего, якорные объекты, врезки и модульную вёрстку.

Дизайном занимался в свободное от работы время, параллельно помогал Саше Климову делать курсовой проект для Школы Стажёров в Бюро Горбунова. Договорились о бартере: я помогаю запрограммировать вёрстку в тему Вордпрес, а Саша помогает советами по дизайну.

Прототипы на бумаге — отличная штука, но когда нет понимания чего хочешь, они только мешают.

Бумажные прототипы главной страницы

Бумажные прототипы

Макетов много, определиться сложно. Непонятно, по какому пути идти и на чём остановиться. У меня, как у начинающего дизайнера ещё нет собственного стиля. Говорят, он появляется с опытом. Когда нет опыта и собственного стиля, нужно брать то, что нравится и переделывать под себя.

В Фидли читаю 101 личный блог, прошёлся по каждому и выбрал те, у которых есть главная страница: Салават Абдуллин, Роман Шавня, Артур Кочарян, Ярослав Максимов, Александр Гурьянов, Илья Бирман, Никита Иванов, Александр БеспоясовВладислав Балабанович, Елена Глубко, Максим Ильяхов и Илья Страйков.

Следующий этап отбора: выбрать шапку и основную часть с контентом, которые подойдут к моей главной странице.

Отличные шапки у Александра Гурьянова и Максима Ильяхова.

Шапка Александра Гурьянова
Шапка Максима Ильяхова

У Ильи Бирмана отличный вывод заметок из блога, а у Максима красивая трубка и форма подписки:

Контент Ильи Бирмана
Сайдбар Максима Ильяхова

После отбора элементов я понял, какой должна быть главная страница.

Дизайн-процесс

Основная сложность заключалась не в освоении Скетча, а в умении располагать элементы в соответствии с правилами дизайна.

Первая версия главной — до того, как выбрал путь «копировать под себя» — выглядела так:

Первая версия дизайна

Раньше считал, что дизайн это просто: нарисовал картинку, а всю работу за тебя делает разработчик.

К хорошему дизайну можно прийти только через итерации. От изначальной задумки до завершённой версии настоящая пропасть, которую преодолеваешь по канатному мостику от ступеньки к ступеньке, а по дороге хочется спрыгнуть вниз.

Итог первой итерации:

Первое приближение

Выглядит сыро, но уже что-то. Основа, которую можно развивать. После каждой итерации показывал дизайн Саше, он указывал на мои недочёты и критиковал работу. Это помогло мне исправить многие ошибки.

Итог второй итерации оказался интереснее:

Второе приближение

Концепту тесно в макете, его поджимают описание и рассказ о себе. Выставлять акценты можно с помощью якорных объектов. Но у меня с ними оказался перебор: иконка, бутылка Клейна и смартфон. Глаза разбегаются и непонятно, какой элемент главный.

В третьей итерации исправил ситуацию с шапкой: освободил место и уменьшил количество якорных объектов.

Третья итерация

Шапка стала значительно легче, но блок с подпиской перегружен информацией: подписаться на рассылку, социальные сети, задать вопрос по почте, написать в телеграм и друзьям рассказать.

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

Вёрстка

Прочувствовал, насколько полезно дизайнеру уметь программировать. Дело в том, что картинка — это картинка, пока ты её не превратил в продукт. Готовый продукт может оказаться не таким интересным и полезным, как казалось.

С другой стороны, даже когда ты разработчик, нельзя быть на 100% уверенным в возможности реализации элементов дизайна.

В моем случае оказалось, что нельзя сделать стандартными средствами ЦСС и ХТМЛ обтекание врезки. Рассчитывал на флексбоксы, но даже они не позволили справиться с ситуацией. Поэтому блок с заметками идёт ровно, не утекает под врезку.

Следующая сложность — вывод заметок по тегам. На главной выводятся не все заметки, а только те, которые отмечены галкой «Показать на главной»:

Настройка отображения заметки на главной

Заметки выводятся по порядку, сортировать по тегам оказалось сложно. Решил пофлексить и выводить по порядку, без разделения. Тем более что у меня в Вордпрес полная неразбериха с тегами. Как приведу их в порядок, доработаю вывод на главной.

В шапке добавил чередование ритма: 1, 3, 4. С правой стороны исчезла пропасть из пустого пространства, страница стала приятнее и появилось ощущение завершённости.

Итоговая шапка главной страницы

Дальше предстояло то, что на одной картинке не изобразить: добавление адаптивности. В Сафари есть режим отзывчивого дизайна, с ним было удобно настраивать стили и проверять поведение страницы в зависимости от разных размеров экрана.

Разработка

Σ

В результате получилась главная страница, за которую нестыдно.

Финальная версия главной страницы

Страница отлично чувствует себя на компьютере, планшете и смартфоне.

Главная страница на Айпаде и Айфоне

Посмотреть в живую: Бизиков.ру

Буду рад предложениям, замечаниям и критике по дизайну главной страницы.

СохранитьСохранить

Школа мобильного дизайна: процесс выполнения тестового задания

В прошлой заметке описал впечатления от курса Яндекс.Дизайн, теперь пришло время практики.

С начала года я выполняю лайфлист дизайнера, и обучение в Школе мобильного дизайна — отличная возможность для входа в новую профессию. Поэтому решил выполнить тестовое задание.

Задание состоит из двух частей:

  1. Ознакомьтесь с мобильными продуктами Яндекса и предложите пару идей по улучшению любого из них.
  2. Предложите концепт мобильного приложения сервиса Яндекс.Путешествия. В результате должно получиться несколько ключевых экранов и описание того, как это работает и почему.

Записал видео с демонстрацией ошибки авторизации в приложениях через Яндекс.Ключ.

Второе задание оказалось сложнее, чем думал. Кажется, я допустил все ошибки, какие только мог, об этом и расскажу ниже.

Процесс

О наборе в Школу узнал прямо перед отправкой в Екатеринбург на ДАМП. По дороге в поезде начал продумывать интерфейс приложения и рисовать в блокноте экраны.

Прототип на бумаге

Это была первая ошибка. Я начал строить интерфейсы, как хотел. Правильно было бы сначала понять, какие потребности должен решать интерфейс и в зависимости от этого строить его.

Когда вернулся из Екатеринбурга, у меня было 12 дней на то, чтобы выполнить две задачи в рамках тестового задания. Для лучшего понимания течения времени повесил перед собой листок с днями, чтобы помнить о дедлайне. Каждый вечер зачёркивал прошедший день.

Дни до дедлайна

Иконка

Пользователь знакомится с приложением до того, как запустил его. Иконка приложения имеет большое значение, поэтому я начал с неё. За основу взял иконку уже существующего веб-сервиса Яндекс.Путешествия.

Старая иконка сервиса Яндекс.Путешествий

Начал с того, что нарисовал иконку в своём альбоме для прототипирования:

Прототип иконки приложения Яндекс.Путешествия

Вторая моя ошибка. Выглядит красиво, но на деле никакой пользы. Когда начал рисовать в Скетче, то получилась полная хрень:

Солнце и холм
Солнце и море
Просто солнце

Правильно было бы не перерисовывать уже существующую иконку, а начать с ассоциаций, которые вызывает сервис. Яндекс.Путешествия — сервис для поиска туров и выбора отелей.

Первая ассоциация, которая пришла в голову — это стакан с коктейлем, он позволяет расслабиться, как путешествие на море.

Версия 4

Согласен, выглядит жалко. Хотя тут даже можно заметить Y из логотипа Yandex. Вариант не подходит, так как ассоциация сервиса с алкогольным напитком — не лучшая идея. Следующие ассоциации с путешествиями: пальмы!




Понял, что опять совершил ошибку. Да, иконки начал рисовать, исходя от ассоциаций, но они были в вакууме. Правильнее было бы изучить иконки мобильных приложений Яндекса, выделить общие черты и используя их в сочетании с ассоциациями рисовать иконку.

Кто захочет принять в семью такого уродыша?

Изгой в семье Яндекса

У Яндекса иконки приложений простые, далеко за ассоциациями не ходят. Для Транспорта у них автобус, для Почты — конверт, а для Маркета — продуктовая тележка.

Иконки мобильных приложений Яндекса

Начинаю искать простые ассоциации для Путешествий: багаж, сумка, билет. Пока ищу простые реализации иконок натыкаюсь на компас. Действительно, компас и его изображение всем знакомо. Рисую иконку и одеваю её в фирменные цвета. Проверяю как она себя чувствует в семье:

Вариант 9

Прекрасно. То, что нужно. Дальше начинаю шлифовать, накладывать на существующие иконки, чтоб были правильные отступы и расположение.

Вспоминаю, что половина срока до дедлайна позади. Осталась неделя. Нарисовать иконку — дело не простое. Останавливаюсь на варианте с компасом и перехожу к интерфейсу мобильного приложения.

Версия 11

Слева — иконка с границами для страницы со списком мобильных приложений, справа иконка для использования в прототипе, у неё не должно быть границ.

Иконка хорошо себя чувствует в естественной среде обитания:

Приложение в естественной среде

Мобильное приложение

Открыл Яндекс.Путешествия на смартфоне, чтобы посмотреть, как выглядит мобильная версия сайта. Далее установил приложения: Букинг, Островок, Travelata.ru, Aviasales и AirBnB, чтобы посмотреть, как может выглядеть интерфейс в приложениях, посвящённых путешествиям и поиску отелей/туров. Установил все доступные для айфона приложения Яндекса, чтобы найти общие паттерны в интерфейсах.

Начал искать шоты на дрибббле в надежде найти интересные интерфейсы и взять их за основу в своём концепте. Это было моей следующей ошибкой.

Картинки в дрибббле оказались оторванными от жизни. Экраны, которые я нашёл были красивыми, но они были в вакууме и не решали поставленной задачи.

Пример экрана приложения с Дрибббла

Определил, кто будет пользоваться мобильным приложением Путешествий. В первую очередь, это те пользователи, которые уже пользовались сервисом через мобильную версию сайта.

Переход к приложению от мобильной версии сайта должен быть как можно менее болезненным для пользователя, следовательно интерфейс должен быть знакомым и привычным.

За основу взял интерфейс мобильной версии сайта и доработал его под мобильные реалии. В результате получился скетч-файл на 8.7 мб и 15 артбордов:

Артбоарды приложения в Скетче

В отличии от мобильной версии в приложении появилась страница с подборкой персональных туров, возможность добавить результат поиска в избранное и кнопка «История», которая хранит историю поисковых запросов пользователя.

Прототип

На этом этапе я понял, что совершил самую большую ошибку за всё время выполнения тестового задания.

Интерфейсы рисовал под экран своего старенького айфона 4эс, чтобы на нём продемонстрировать работу концепта. Когда первый раз открыл картинку приложения, то понял, что размеры артбордов не соответствуют размеру экрана смартфона.

В Скетче мои экраны имели размеры 320 на 480 пикселей, а надо было 640 на 960. Начал переделывать все экраны. Дальше понял, что в Скетче элементы смотрятся хорошо, а на смартфоне они маленькие.

Правильнее было бы подойти к процессу иначе: не «Нарисовать интерфейс» → «Начать прототипировать», а нарисовать один экран и сразу проверить, как он отображается на смартфоне, сэкономил бы пару дней работы.

До того, как приступить к выполнению тестового задания, определился с инструментом для прототипирования — это Фрэймер Студия. Там можно писать на КофеСкрипт и делать классные анимации. На деле оказалось, что в сжатые сроки освоить возможности Фрэймера и реализовать на нём мой интерфейс — нелегко. Деваться некуда, дедлайн на носу, надо флексить.

Прототип приложения во Фрэймер Студии

В школе Яндекс.Дизайн Антон Шеин упомянул сервис ИнВижн. Начал разбираться.

Сервис оказался интуитивно понятным: загружаешь картинки и связываешь их переходами. Можно настроить анимацию для переходов, установить свою иконку приложения, которая будет отображаться при сохранении на домашний экран айфона. То, что мне нужно!

Процесс прототипирования в ИнВижн:

Прототип приложения в ИнВижн

Без проблем не обошлось. Пришлось помучиться со статус баром.

Статус бар — это строка интерфейса, где отображается время, заряд батареи и сигнал сотовой связи. В моих макетах был свой статус бар, но ИнВижн умеет отображать системный. Если сохранять иконку на домашний экран и через неё запускать приложение, то статус бар сливается с фоном.

Статус бар слился с фоном

Когда сохраняем иконку сайта на домашний экран и запускаем его, то сайт открывается через веб-вью. Статус бар можно настроить через мета-тэг apple-touch-icon. К сожалению, статус бар нельзя настроить так, чтобы он был прозрачным и с чёрным текстом. Только с белым текстом и чёрным фоном.   

Решение проблемы: установить ИнВижн Апп и использовать его для демонстрации.

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

Результат

Σ

Да, совсем забыл сказать. До тестового задания я ни разу не работал в Скетче. Как оказалось, его легко освоить.

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

Главная причина, почему хочу поступить в Школу мобильного дизайна — получить знания и опыт по созданию дизайна приложений, научиться думать как дизайнер.

Недавно прошёл курс Яндекс.Дизайн. Самостоятельно изучил материал. Но у меня не было возможности общаться с другими студентами, задавать вопросы лекторам и сложно было прочувствовать атмосферу Школы.

Поэтому хочу поступить в Школу мобильного дизайна и лично присутствовать на лекциях, задавать вопросы и главное — получить опыт в создании продукта совместно с другими студентами.

Примут только 30 человек, результаты сообщат до 27 мая. Остаётся только ждать результатов и надеяться на лучшее, а пока можете поддержать меня лайком и комментарием к заметке.

Буду рад услышать замечания и предложения по тестовому заданию.

°°°

Благодарю Антона Карташова за ценные советы, так я смог прочувствовать, как работают профессиональные дизайнеры.

Отдельное спасибо моей жене Юлии за поддержку, понимание и веру в меня.

°°°

Впечатления от обучения в Школе мобильного дизайна можно прочитать по тегу Мобилизация.

СохранитьСохранить

Яндекс.Дизайн

Закончился курс лекций Яндекс.Дизайн. Посмотрел, в процессе записывал полезные идеи. В этой заметке поделюсь с вами впечатлениями и расскажу, что узнал из курса.

Если решили пройти Яндекс.Дизайн, то наберитесь терпения. Первые три лекции сложно воспринимать из-за скучного изложения, но в следующих всё отлично.

Предполагается, что школа не для новичков и нужно иметь опыт в разработке дизайна интерфейсов, веб-сайтов или в смежных областях. Я разработчик и у меня нет опыта разработки дизайна интерфейсов, но для меня курс оказался интересным и полезным.

Курс посвящён процессу создания продукта: начиная с основ и общих сведений, заканчивая созданием прототипа и минимальной рабочей версией.

Дизайнеру на заметку

Школа дизайна Яндекса

Создать хороший продукт в одиночку — задача сложная. Нужно уметь разбираться во многих областях, что невероятно сложно. Поэтому лучше работать в команде.

Продукт можно начать делать в одиночку, но в какой-то момент вы поймёте, что нужны новые люди и их экспертиза в той области, которую вы не знаете, но для роста продукта она жизненно необходима.

Важную роль в жизни продукта играет дизайнер, поэтому он должен соответствовать требованиям:

  1. Цельность
    Дизайнер должен уметь видеть всю картину целиком. Что происходит с проектом сейчас, что будет потом и куда всё идёт.
  2. Чувствительность
    Чувство прекрасного должно быть на максимуме, среди всех других членов команды. Дизайнер оценивает окружающий мир и подмечает несовершенство. Это качество способствует накоплению опыта и мотивирует делать лучше.
  3. Не стереотипность мышления
    Дизайнер не мыслит шаблонами, как обычный человек, это позволяет взглянуть на обычные вещи под не стандартным углом.
  4. Визуализация
    Мышление на уровне визуальных образов. Пока другие обсуждают, дизайнер уже представляет как этим пользоваться.
  5. Практикоориентированность
    Дизайнерское желание создавать вещи. Стремление двигаться к идеалу через итерации позволяет ему и остальным членам команды реагировать на результат и делать продукт лучше.

Мало сделать продукт, его ещё нужно вывести на рынок и за это тоже отвечает дизайнер. Дизайнер должен критически относиться к результатам. В том числе к своим.

Перед тем как разрабатывать для бренда продукт, нужно познакомиться с ним поближе: открыть ноутбук и воспользоваться продуктами этой компании. Ещё лучше — поработать в ней.

От идеи до продукта

Дизайнер продукта сопровождает его на всех этапах разработки и развития. Дизайн процесс состоит из многих этапов:

Дизайн процесс

Дизайн — это всё, начиная с идеи. Идея определяет дизайн. Ценность идеи очень важна. Существует несколько методов генерации идей:

  • Аналитический
    Подход с минимальными рисками. Результат предсказуемый, а риски минимальны. Подход чаще всего используется в готовом бизнесе для улучшения продукта.
  • Синтезирующий
    Подход дизайнеров для революции и резкого скачка вперёд. Риски в таком подходе высоки, но и результат будет стоить того, если идея выстрелит.

Помните: ваша идея никому не нужна, пока вы не сделали из этого минимально рабочую версию.

Как понять, что стоит использовать именно эту идею, а не другую? С каждым днём растёт стоимость изменений. В конце процесса разработки изменить идею будет дорого. Надо стараться проверять работоспособность идеи и решения на старте проекта.

Ваше видение реализации проблемы может быть ошибочным. Важно опрашивать и узнавать мнение других. Абсолютного рецепта успеха нет. Ошибки постоянно происходят. Поэтому нельзя игнорировать проверку решений. Это позволит снизить риски и градус неопределённости. Тестировать можно любые идеи на любой стадии.

Принципы, которых следует придерживаться при доказательстве решений:

  1. Доказательство важнее мнений. Если не можете доказать, то это только мнение.
  2. Экспериментируйте чаще. Опыт понижает риск.
  3. Сначала проверяйте идеи, потом полируйте решение. Никому не нужен идеально вылизанный продукт, которым в итоге никто не будет пользоваться.
  4. Экспериментируйте, но помните о реальности.
  5. Сохраняйте своё видение.
  6. Знайте что является самым важным в продукте. Если это убрать, то продуктом не будут пользоваться. Тестируйте эту часть в первую очередь.
  7. Поймите своих пользователей. Только потом беритесь за решение проблемы.
  8. Обеспечьте измеримость. Исчисляйте проверки решений в одной системе координат, чтоб результаты можно было сравнивать и измерять.
  9. Проверяйте несколько раз самые важные моменты, те, от которых зависит жизнь продукта.

Каждая идея решает какую-то проблему. Сценарий определяет, как именно эта проблема будет решена. Если перед человеком нет проблемы, то незачем делать сценарий и реализовывать идею. В сценарии должна решаться проблема/боль. Сначала опишите решение проблемы в текстовом редакторе. Для этого можно использовать самые простые текстовые редакторы: iWriter, Заметки или Блокнот.

На этом шаге у нас есть гипотеза о том, как решить проблему.

Теперь нужно проверить гипотезу. Опишем наш эксперимент, который поможет установить работоспособность гипотезы.

Кажется, что … это сработает так ….
Чтобы проверить это, мы … сделаем так …
И измерим … вот эту метрику ….
Мы правы, если … метрика поведёт себя так ….

Проектирование опыта взаимодействия

Пользователи следуют трём основным моделям поведения:

  • Сёрчинг
    Поисковая модель поведения, самая простая. Вы приходите в магазин мебели и нужно выбрать определённую кровать, которая поместится именно в вашу квартиру. В этом случае продукту нужно фокусироваться на атрибутах. Определить какие из них являются первичными, а какие вторичными. Атрибуты можно определить через интервью с пользователями. Фокус должен быть на то, что человек должен максимально быстро и понятно найти свой результат и классифицировать его.
  • Браузинг
    Вы приходите в Икею и смотрите, что вообще могло бы подойди в вашу квартиру. Человек из этой модели в конце концов придёт к модели сёрчинг, но пока он изучает, смотрит и ищет. Он знает, что у него есть проблема.
  • Дискавери
    Самая сложная модель. Вы пришли купать кровать, а ушли с кроватью и со столиком. Вы его открыли, когда увидели кровать.

Один пользователь может быть сразу в нескольких моделях поведения. В этом случае полезно описать профиль пользователя/персоны:

Персона … название персоны ….
Использует ваш продукт по причине того, что … мотивация персоны …,
в момент … когда и где …
и ожидает … цель персоны ….

Когда у нас есть сценарий использования приложения и профиль пользователя, который будет пользоваться продуктом, мы можем приступить к созданию прототипа.

Создание прототипа

Прототип — это упрощённая версия будущей системы. Он нужен, чтобы продать идею, объяснить логику, поведение, проверить удобство интерфейса, испытать продукт на себе и на других.

Инструменты для прототипирования

  • POP
    Мобильное приложение для прототипирования. Рисуем на бумаге экраны приложения, фотографируем их и связываем в POP.
  • Invision App
    Удобный сервис для оживления макетов мобильного приложения и сайта.
  • FramerJS
    Инструмент для оживления дизайна приложения.

Для дизайнера будет плюсом, если он умеет программировать. Программирование – это способ мышления и учась программировать вы учитесь думать, системно подходить к решению задач.

Жизненный цикл прототипа

Создание прототипа состоит из шагов:

SAMSUNG CSC

Каждый из шагов включает в себя три этапа: Создать → Показать → Понять. Если на одном из трёх этапов понимаем, что приняли неверное решение, то возвращаемся на шаг назад и корректируем гипотезу.

Прототип готов. Что дальше? Нужно презентовать его своей команде.

Презентация идей

Мало быть хорошим дизайнером. Нужно уметь презентовать свои решения и объяснять, почему ты сделал именно так.

Pitch Deck — краткий обзор бизнес-плана в виде презентации на 10-15 сладов, создаётся чтобы объяснить другому человеку чем вы занимаетесь и какова ваша цель. На слайд отводится одна идея. На каждый слайд уделяйте не больше минуты. Нужно верить, в то что говоришь во время презентации. Слова не должны быть пустыми.

Презентовать дизайн — это хороший способ сохранить идею. Нужно превратиться в автора идей. Продать и реализовать собственную идею сложнее. Если вы не можете сформулировать свою идею за 15 секунд, то оно не очень хорошая. Нужно ещё думать.

Между постановкой задачи и дедлайном надо как можно чаще коммуницировать с заказчиком. Иначе получится полная фигня. Заказчик должен участвовать в процессе создания дизайна. Вы можете вовлекать заказчика в процесс, ведь вы вместе решаете одну задачу.

Реализация решения

На этом шаге уже проведены исследования, готова концепция, сделан прототип продукта и защищён перед коллегами/клиентом. Пора приступать к разработке.

Убедитесь в том, что людям это действительно нужно. Чтобы это понять, ставьте счётчики. Они помогут понять, какие элементы работают, а какие нет.

На этапе реализации главное запуститься как можно быстрее. Ничего идеального не будет, будут обязательно какие-то ошибки, недочёты, и это нормально. Продукт не должен быть сразу идеальным. Продукт запускают для того, чтобы понять, каким он должен быть.

Дизайн без дедлайна не существует. Дизайн — это задача, у задачи обязательно должны быть сроки. Без срока вы будете заниматься перфекционизмом, а не решать задачи.

После реализации продукта работа дизайнера не заканчивается. Дальше — коммуникация, общение с пользователями.

Коммуникация — это не реклама, а более широкая сфера деятельности. Сначала определяем, к кому мы обращаемся, что хотим сказать, а потом — через какие каналы связи. Сообщение определяет канал коммуникации. С помощью коммуникации мы рассказываем о своём продукте, почему человек должен попробовать его.

Σ

Курс Яндекс.Дизайн будет полезен всем дизайнерам и менеджерам. Я увидел, как проходит работа над продуктом в крупных компаниях, таких как Яндекс. Преподаватели приводили много реальных примеров из проектов компании.

Отдельное внимание обратите на лекции Антона Шеина, их стоит смотреть внимательно.

°°°

Продолжение: Процесс выполнения тестового задания.

Процесс создания фавикона

Блог существует с 2009 года. За это время он успел побывать обычной ХТМЛ-страницей, блогом на генераторе статических сайтов и сейчас — на системе управления сайтами Вордпрес.

У всех версий была одна проблема — отсутствие фавикона. Да, у меня никогда не было иконки для блога, теперь она есть.

Денис написал в твиттере, что рисует фавиконы. Решил отозваться на его предложение:
Денис Хуснутдинов предлагает нарисовать фавикон
Рассказал о себе, чем занимаюсь и какие у меня есть увлечения. Денис взялся за работу. Через три дня и один час правок фавикон был готов и добавлен в блог.

Результат

Мне нравится математика и системный подход во всём, тем более что по специальности я математик. Поэтому иконка уходит корнями в мир геометрии, также в ней можно разглядеть первую букву фамилии и если перевернуть — имени.

Ассоциативный ряд иконки

Классно смотрится в браузере:

Фавиконка в Хроме

Иконку можно добавить на домашний экран айфона или айпада, для быстрого доступа к блогу.

Фавиконка на Айпаде

Спасибо

Если вам нужен дизайн мобильного приложения, сайта или логотип — обращайтесь к Денису. Ещё он ведёт подкаст о дизайне, блог и на него можно подписаться в твиттере → @denishus.