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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://www.behance.net/

https://dribbble.com/

https://www.pinterest.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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