Что нужно знать дизайнеру, кроме UX и UI

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

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

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

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

Кратко напомним, чем отличается UX от UI

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

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

Общая цель UX- и UI-дизайна — создать продукт, который будет удобным для пользователя и в то же время привлекательным.

Как мы уже говорили, сегодня хорошему UX/UI-дизайнеру мало разбираться исключительно в своем направлении. Он должен разбираться в каждом этапе работы над проектом или хотя бы знать основы каждого направления.

Об этом и многом другом расскажем далее.

Как правило, основной акцент делают на этапе дизайна, но он далеко не самый трудоемкий и длительный. Большое количество времени уходит именно на подготовительный этап — проведение анализа и работа с гипотезами, а не на саму отрисовку интерфейса. От того, насколько тщательно будет проведен подготовительный анализ, зависит успешный результат UX/UI-дизайнера.

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

Навыки, которыми дизайнер должен обладать прежде всего:

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

Для понимания технической стороны UI/UX поможет глубокое изучение таких направлений, как:

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

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

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

Проджект-менеджер, проектный менеджер, менеджер проекта (project manager) — специалист, который управляет проектами и командой. Иными словами, человек, который организует рабочий процесс и доводит его до конечного результата.

Задачи project-менеджера

1. Структурировать требования по проекту

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

2. Составить план работы

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

3. Собрать команду

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

4. Найти подрядчиков

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

5. Ставить задачи и следить за их выполнением

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

6. Следить за бюджетом проекта

Бюджет предполагает стоимость проекта для компании и определяет прибыль. Любое увеличение бюджета project-менеджер должен обосновать заказчику. Что касаемо прогнозов будущей прибыли — это требует тщательной аналитики.

7. Вести документацию

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

8. Взаимодействовать с командой

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

9. Презентовать результаты работы над проектом заказчику и разработчику

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

Грамотный project-менеджер — это человек, обладающий управленческими навыками и владеющий тайм-менеджментом. Он способен объединить команду, найти решение при возникновении проблемы и дать развернутую обратную связь по уже выполненным задачам.

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

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

Задачи UX-исследователя:

В работе UX-исследователя дизайнеру важно владеть следующими знаниями:

1. Как подготовиться к исследованиям:

• Описать цели и задачи будущего проекта.
• Продумать сценарии для проведения исследования, прописать главные вопросы: о чем думают пользователи, что ждут от продукта, какие модели поведения им присущи чаще всего и т.д.
• Описать требования к участникам исследования (респондентам).
• Чтобы отобрать подходящих респондентов, можно воспользоваться услугами рекрутинговой компании.

2. Как провести исследование — какие они бывают:

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

3. Как провести анализ полученных результатов:

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

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

SEO-специалист — это человек, который занимается продвижением сайтов в поисковых системах.

Что может быть результатом продвижения:

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

Задачи SEO-специалиста

1. Провести SEO-аудит сайта

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

2. Оптимизировать сайт для поисковых систем

SEO-специалист устраняет уже имеющиеся ошибки, а именно:

• Удаляет повторяющиеся блоки и страницы 404 (ошибка сервера).
• Осуществляет настройку 301-редиректа (переадресация сайта на новый адрес).
• Создает карту сайта (файл, который содержит список страниц сайта в нужном порядке).
• Настраивает доступные URL-адреса.
• Делает микроразметку (разметка страниц сайта с тегами и атрибутами, которые помогают поисковым роботам и самим пользователям определить содержимое каждой страницы).
• Проверяет и корректирует навигацию по сайту, чтобы она была максимально удобной.
• Отслеживает скорость загрузки страниц.
• Создает внутреннюю перелинковку (связывание страниц между собой при помощи гиперссылок).
• Анализирует поведенческие и коммерческие факторы (действия поисковых систем и пользователей сайта).

3. Создать список ключевых слов и фраз, которые приведут целевых пользователей на сайт

Это называется составление семантического ядра. На основе этих данных SEO-специалист дает рекомендации по созданию новых страниц и написанию текстов. А еще он должен:

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

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

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

Что из всего этого многообразия необходимо знать дизайнеру:

1. Как работать с тегами

Теги — это метки, ключевые слова, которые помогают пользователям быстро найти информацию через поисковые запросы. Например, теги помогают читателям найти книгу по интересующей их теме:

• Поисковые роботы анализируют теги, по которым проходят, и принимают решение — подходят ли страницы веб-ресурса под запрос пользователя.
• Есть теги, которые отвечают за выделение текста. Здесь важно уметь делать тег наклонным, полужирным, подчеркнутым, так как это также влияет на восприятие информации поисковиками.
• Еще один важный параметр для SEO — теги заголовков, они выглядят так: <h1>…<h6>.
• Метатеги <title>, <description> описывают страницу, изображения и другие элементы.

2. Что такое внутренняя оптимизация

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

Дизайнеру необходимо как минимум знать следующие определения:

• ЧПУ — это написание адреса страницы, из названия которого становится понятно, что ждет пользователя на этой странице.
• Плотность ключевых слов — это показатель количества ключевых слов по отношению к остальному тексту (тошнота текста).

3 простых сервиса для анализа плотности ключевых слов:

• ISTIO — отлично подходит для SEO-анализа сайта, выдает точные результаты и самостоятельно загружает тексты с введенного адреса веб-ресурса.
• SEOP — один из плюсов сервиса — вместе с анализом плотности ключевых слов, он также выдает грамматические ошибки. Минус — текст необходимо добавлять вручную, это не всегда удобно.
• ADVEGO — один из плюсов сервиса — вместе с анализом плотности ключевых слов, он также выдает грамматические ошибки. Минус — текст необходимо добавлять вручную, это не всегда удобно.

3. Что такое внешняя оптимизация

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

4. Какими SEO-инструментами нужно владеть

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

• Вебмастерские панели «Яндекса» и Google, которые помогут получить различные данные о сайтах: какие запросы популярнее, какие ошибки встречаются чаще всего.
• Сканеры сайтов для поиска ошибок: Screaming Frog SEO Spider, Xenu's Link Sleuth, Page Weight Desktop.
• Программа для работы с семантическим ядром — это перечень ключевых слов и фраз, которые приведут на веб-ресурс целевую аудиторию: Key Collector.
• Инструменты веб-аналитики от «Яндекса» и Google, которые предоставляют информацию о пользовательском поведении, об источниках трафика и много других необходимых данных.
• Программы для сбора позиций сайта «Топвизора» или AllPositions.
• Многочисленные сервисы MegaIndex — это SEO-гигант, в котором есть все необходимое для работы над проектом.

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

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

В профессии разработчика существует 3 больших направления:

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

Что должен знать веб-разработчик

Backend-разработчик

• Должен владеть одним из языков программирования — PHP, Java, Go или Python.
• Работать с package manager (пакетный менеджер) — система управления пакетами, которая позволяет добавлять в веб-ресурсы сторонние библиотеки для расширения своих возможностей и создания новых функций. Для каждого языка программирования существует свой пакет.
• Понимать SQL — язык запросов, который предназначен для работы с базами данных.
• Уметь работать с базами данных и знать, как они устроены.
• Знать основные принципы работы с Git — система контроля версий, которая записывает внесенные изменения и позволяет вернуться к ним позже.
• Работать с фреймворками — это готовые шаблоны для программной платформы.

Frontend-разработчик

• Знать программы HTML, CSS и JavaScript. HTML — для создания каркаса страницы, CSS — для внутреннего наполнения, работы с цветами и шрифтами, JavaScript — для добавления анимационных элементов.
• Работать с системой контроля Git.
• Уметь адаптировать веб-ресурс для разных браузеров и экранов.
• Понимать, как работать с фреймворками.

Fullstack-разработчик

• Должен хорошо разбираться и во frontend, и в backend, и выполнять весь цикл разработки.
• Владеть языками программирования, как пример: для frontend-разработки — JavaScript, для backend-разработки — Python.
• Уметь работать с фреймворками.
• Понимать язык запросов SQL и язык разметки CSS.
• Знать азы системного администрирования.
• Разбираться в системе контроля Git и Docker — платформа для разработки, тестирования и развертывания веб-ресурсов.

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

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

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

Задачи UX-копирайтера:

1. Писать микротексты для веб-ресурсов

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

2. Устанавливать контакт с пользователем через текст

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

3. Работать с дизайнерами над юзабилити

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

4. Делать интерфейс человечнее

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

5. Повышать вовлеченность и конверсию

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

6. Отражать голос бренда

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

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

Грамотное сочетание текстового контента и дизайна — одна из успешных основ качественного интерфейса.

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

Полезные сервисы для работы с текстом:

• Новинка 2022 года — Retext.Ai — сервис перефразирования текста.

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

• Орфограммка — сервис, предназначенный для проверки орфографии.

• Text.ru — на этом сервисе можно проверить текст на уникальность, а также увидеть уровень заспамленности.

Благодаря этим сервисам дизайнер может проверить свой текст или текст копирайтера на качество и уникальность. Также рекомендуем всю литературу Максима Ильяхова, он просто и доступно объясняет основы текста и дает эффективные техники по написанию продающего контента.

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

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

Результат проекта зависит от всего процесса разработки. Важно заложить качество в самом начале — чем лучше настроены внутренние процессы работы, тем проще тестировать готовый веб-ресурс и меньше в нем будет ошибок.

Мы напомнили, о чем важно знать дизайнеру, кроме UX/UI, при разработке проекта, а также с какими специалистами необходимо взаимодействовать, для того чтобы продукт получился качественным. Разобрали задачи и роли каждого специалиста и дали определения основным терминам, которые необходимо знать для продуктивной работы над проектом в команде.

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

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