Почему это важно?
В основе любой хорошей работы - правильно налаженный процесс. Твои скиллы рисования и хороший вкус - это приправа к главному блюду: выстроенной системе.
Классический дизайн-процесс включает несколько этапов:
Исследование. Собираем информацию о бизнесе клиента и его пользователях. Как зарабатывает бизнес? Откуда приходят клиенты? Какие боли клиентов этот бизнес закрывает? И самое важное: как это делают их конкуренты? Вот тебе простой инструментарий для решения этих задач:
- Similar Web - хорошая тулза для поверхностного анализа сайта клиента и конкурентов. Узнаешь, откуда приходит трафик, какие публикации/ страницы работают лучше всего.
- Google Analytics клиентского сайта. Не стесняйся, запрашивай информацию. Здесь ты сможешь отследить поведение клиентов, что их привлекает, а что отталкивает.
- Google Trends - для понимания того, что сейчас происходит в индустрии. Например, ты имеешь дело с магазином одежды. Введи пару релевантных тегов в поиск, посмотри какие гео реагируют активнее, что люди ищут дополнительно. Это большое поле для новых инсайтов в твоей работе. Здесь мы пишем, как составить аватар пользователя.
Формирование текстового прототипа. Самое время генерировать идеи из полученных знаний: в текстовом формате или в виде зарисовок. Желательно несколько, желательно провести валидацию и выбрать наиболее подходящую.
Создание мудборда. Здесь создается «душа» проекта. Ты собираешь подходящие шрифты, цвета, изображения и формы. Их тоже лучше создавать несколько, затем сопоставлять с подходящей идеей.
Создание user story. На этом этапе строится логика сайта. Когда ты хорошо понимаешь, что именно ищет клиент, ты легко сможешь отразить это в своем прототипе.
User Story создается с помощью вот такой формулы:
Пользователь хочет <что-то получить> для того, чтобы <цель, мотив пользователя>.
Например, в магазине одежды девушка хочет найти спортивный костюм.
- Сначала она будет рассматривать разные варианты онлайн-магазинов.
- Девушка ищет подходящую модель спортивного костюма.
- Теперь ей нужна информация о конкретной модели.
- После этого она захочет сравнить различные модели по следующим факторам: цена/качество/ производитель.
- Девушка обязательно обратит внимание на отзывы, чтобы убедиться в своем выборе.
- Потом узнает условия заказа и доставки.
- Девушка совершает целевое действие: отправляет товар в корзину и оформляет покупку.
На основе примера, мы получаем следующую рубрикацию:
1 — Каталог магазина
2 — Раздел со спортивными костюмами
3 — Карточка товара
4 — О нас
5 — Отзывы
6 — Доставка и оплата
7 — Корзина
.jpg)
Сбор прототипа. Не спеши, пока что он будет без цвета и изображений. Тебя должно интересовать только расположение заголовков, текстов и блоков. Сделай так, как это будет в итоговой работе.
Прототип+мудборд. А теперь время объединить две составляющие. На выходе ты получаешь готовый дизайн-макет. Здесь важно подготовить все возможные версии интерфейса для передачи клиенту и разработчикам.
Адаптация макета под мобильные устройства. Не забудь о юзерах, которые будут взаимодействовать с твоим дизайном на экране своего смартфона.
Презентация проекта и «упаковка« под портфолио. Конечно, если ты не подписал с клиентом NDA)
И еще немного:
- Исследование всегда начинается с опроса клиента. Бриф - это неплохо, личное интервью - намного лучше.
- Создавай аватары пользователей, чтобы понять, какие группы целевой аудитории будут взаимодействовать с твоим дизайном.
- User Story поможет тебе избежать ошибок в создании прототипа.
- Создавай текстовый прототип только в том случае, если ты получаешь проект « с нуля».
- Текстовый прототип также подлежит апруву со стороны клиента. Утвердили его, и можете двигаться дальше.
- Обращай внимание клиента на то, что текстовый прототип - это отдельный процесс и оплачивается он отдельно.
- Дай понять клиенту необходимость каждого процесса: исследование/ мудборд/ текстовый прототип. Все это - основа хорошего дизайна.
Каждый этап дизайн-процесса приведет тебя к нужному решению. Да, на старте карьеры мы хотим как можно скорее «отрисовать» дизайн. Это часто приводит к тому, что реализованные проекты очень далеки от клиентской реальности. Кроме того, такие работы сложнее презентовать клиенту. Почему?
Представь себе, что ты показываешь проект заказчику, а он задает тебе простой вопрос: «А почему эта кнопочка находится здесь?»
Что ты ответишь? Потому что я так хочу? Во-первых, это красиво? Когда ты знаешь все о мотивации клиента, понимаешь сценарии его поведения - аргументов становится масса.
Еще больше о том, как строить дизайн-процессы внутри команды или на фрилансе мы рассказываем на нашем коучинге: «Веб-дизайнер: счастливый билет в Таиланд».
