Этапы работы над дизайном

Привет друг! Меня зовут Максим Акимкин, я UX/UI Дизайнер и если ты открыл эту статью, значит ты как минимум интересуешься дизайном и возможно ты найдешь ответы на свои вопросы в этой статье.

Что такое дизайн процесс да и дизайн в целом? Это не просто рисование картинок, шотов или презентаций для Behance и Dribbble, это длинный и интересный процесс с иногда очень большим количеством этапов, и сейчас мы рассмотрим каждый из них по отдельности.Процесс работы над дизайном может и скорее всего будет отличаться в зависимости от проекта. На какой стадии он зашел? За что готов платить заказчик? И тут можно долго продолжать… Но в целом нужно понимать что эта статья написана для тех

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

Первый этап — Аналитика и процесс сбора информации о продукте.

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

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

1. Какие цели и задачи преследуют Ваш продукт и Ваш интерфейс? И подумайте над тем как их лучше достичь.

2. Кто Ваш пользователь? И обязательно задайтесь вопросом про аудиторию и контекст использования Вашего приложения, в каких обстоятельствах, с какой скоростью и в каком ритме жизни будет использоваться Ваше приложение. (Тут очень хорошо помогут интервью с существующими или потенциальными пользователями). Обратите внимание на конкурентную среду. Ведь, наверняка, кто-то сделал что-то уже подобное. Посмотрите отзывы в Google Play, App Store что пользователи говорят о подобных продуктах ( что им нравится/не нравится, чего хватает/не хватает) именно отсюда вы можете почерпнуть то, что будет нововведением в вашем продукте.

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

Второй этап — Проектирование навигации, логики и структуры.

Этот этап делится на несколько под этапов в зависимости от сложности того продукта над которым вы работаете. Создание карты функционала продукта в дизайне интерфейсов называется Mind map

Mindmap Картинка из интернета

Чтобы правильно составить Mind map вам нужно выписать весь ваш будущий функционал и составить взаимосвязи между функционалом.

Зачем еще нужен Mind map? Это вещь позволит вам взглянуть на ваш продукт как бы сверху и не упустить никакую мелочь. Тогда вы увидите всю картинку целиком и можете приступить к следующему этапу.

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

Скетчи Картинка из интернета

Не пренебрегайте этим методом. Почему он так хорош? Потому что Вы затрачиваете гораздо меньше времени на самые первичные итерации. Тот набросок который вы можете сделать на бумаге карандашом будет занимать примерно 3-4 минуты и даже может быть меньше и этот же набросок в каком-то же графическом редакторе займет у вас около получаса именно для этого и нужно делать эскиз на бумаге.

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

Третий этап — Ваерфреймы (Wireframes).

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

Wireframes Maxim Akimkin

Естественно впоследствии дизайн этих экранов будет выглядеть совершенно по-другому, но на этапе ваерфрейминга ни важна не композиция, ни типографика. Мы просто расставляем основные функциональные элементы и продумываем навигацию, по которой пользователь будет двигаться по Вашему приложению. Если вы работаете над мобильным приложением то здесь уже можно учитывать платформу iOS или Android по тому как навигация у них совершенно разная. Затем из ваших ваерфреймов нужно создать карту экранов, это дает представление о структуре приложения. Это нужно затем же, зачем вы рисовали Mind map

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

После того как вы составили карту основных экранов, вы можете приступить к следующему этапу.

Четвертый этап — Прототипирование.

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

Как только вы сделали прототип основного сценария, вы идете в поле (то есть на улицу или просто по офису) и тестируете свой прототип, опрашиваете людей, делая на основе полученных данных какие-то выводы, что получилось хорошо, а что нужно улучшить или вовсе убрать.

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

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

Пятый этап — Визуальный дизайн или по другому UI (User Interface).

Что же такое визуальный дизайн и дизайн концепции? Это по сути воплощение вашей задумки в графике. Есть определенные базовые вещи которые необходимо учитывать до того как приступаете. Во-первых, не забудьте собрать к референсы и сделать из них мудборд (moodboard), мудборд — это такая себе доска настроения, то есть стиль которому вы будете следовать. Это то что поможет вам накопить опыт и поможет сделать действительно красивый проект.

Я советую пользоваться такими ресурсами как:

На первых двух сайтах Вы можете почерпнуть вдохновение и идеи, а последний это просто очень удобный для создания мудбордов. Хотя в последнее время в моей практике прослеживается тенденция собирать их в Figma.

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

Также на этапе визуального дизайна важно учитывать специфику платформы. Не забывайте что в ios могут не работать те паттерны которые работают в android и наоборот.

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

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

Представим, что мы протестировали наш прототип и у нас все хорошо. Тогда мы приступаем к следующей части.

Шестой этап — Передача в разработку или Hand Off.

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

Необходимо помнить о фундаментальных вещах при передаче материала в разработку.

В первую очередь это конечно UI Kit. что такое UI Kit? Это карта всех ваших элементов интерфейса собранная в одном месте. вы выносите все кнопки, все ссылки, всевозможные интерактивные элементы: картинки, иконки. Разработчик должен знать где все это лежит.

Что здесь такого важного и для чего это делают? Когда дизайнер рисует какой-то визуальный ряд, то чаще всего он делает это в статике. Но нам, как дизайнерам интерфейсов нужно помнить и о динамике, и именно UI Kit позволяет нам продумать заранее как будет выглядеть та или иная кнопка, иконка или поле ввода в нажатом состоянии.

К примеру для кнопки вы должны учесть такие состояния как:

  • Normal - В спокойном состоянии
  • Disabled - Неактивное состояние
  • Hover - Эффект при наведении
  • Focus - Фокусное состояние - Когда кнопка выделена с помощью кнопки Tab, это важная часть Accessibility

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

см. пример ниже.

Состояния кнопок Картинка из интернета

Анимация. Если вы ее делали, то Вам обязательно нужно написать спецификации к ней для разработчиков. Что представляет собой спецификация? Это документ где записан основной сценарий анимации и посекундно расписано действия того или иного элемента и как он должен выглядит в тот или иной момент времени анимации. В чем передавать саму анимацию Вам нужно договориться с самим разработчиком непосредственно. Если я рисую анимацию, я делаю это в principle и уже после, передаю разработчику вместе со спецификацией. Хотя Figma также делает очень большие шаги в этом направлении.

Анимация кнопки Картинка из интернета

Седьмой этап — Контроль качества или Design Review

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

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

P.S. — Я решил начать этот 2022 год с чего-то полезного и это моя первая статья на vc.ru и я буду рад комментариям и поддержке: )

0
5 комментариев
Alibek Azimov

Красавчик братец, мне было полезно. Жги дальше!

Ответить
Развернуть ветку
Ирина Самойлык

Спасибо за статью. Было полезно

Ответить
Развернуть ветку
Степан Прокопенко

Не хватило конкретных примеров практик передачи спек анимаций в разработку и ревью

Ответить
Развернуть ветку
Maxim Akimkin
Автор

Спасибо! Нужно будет учесть в следующий раз :)

Ответить
Развернуть ветку
Vlad

Все правильно - на х_й пользователей. Подумал пару минут о TA и положил на них болт.

Ответить
Развернуть ветку
2 комментария
Раскрывать всегда