Всем шалом. В данной статье я расскажу свое поэтапное видение дизайн-процесса: от получения заказа до подготовки макета к верстке.
Мой процесс дизайна состоит из 7 этапов и каждый из них крайне важен и советую при работе проделывать их все.
- Анализ конкурентов и ЦА (куда ж без них)
Основополагающий этап любого маркетингового процесса. Анализируя конкурентов в нише клиента вы смотрите на то, как продвигаются и какие решения используются в ней, можете сформировать первоначальный взгляд на нишу.
Анализируя ЦА, вы понимаете, какие люди покупают в этой нише, какие у них есть триггеры, какие крючки можно создать в интерфейсе, чтобы удержать и довести до целевого действия как можно больше людей
Как пример: люди молодого поколения действуют и принимают решения значительно быстрее чем люди зрелые за счет постоянного использования социальных сетей, где цикл взаимодействия с контентом крайне быстрое. Соответственно для молодой аудитории не нужно писать огромное количество текстов, подробно расписывая что, как и зачем. Пишите четко и по делу
2. Написание текстов для сайта (если требуется)
По хорошему, это работа копирайтера, но зачастую дизайнеру на фрилансе приходится писать или редактировать тексты самому.
Нужно знать, как составлять тексты для сайтов и в принципе для рекламы.
Тексты можно посмотреть, как пишутся у конкурентов и в смежных нишах, а вообще если есть возможность - нанимайте копирайтера.
3. Прототипирование
Наверное, самый важный этап при создании интерфейсов. На данном этапе проектируется структура сайта, наброски информации и смысловых блоков, возможны также композиционные решения на основе выбора сетки.
Лично я использую несколько этапов прототипирования: функциональный анализ, лоуфид прототип и хайфид прототип.
Черные и серые прямоугольники слева - это Low-Fidelity Mockups (макеты низкой детализации). Они позволяют показать идею интерфейса, не отвлекаясь на визуальную составляющую.
Макеты, похожие на реальный продукт - High-Fidelity Mockups (макеты высокой детализации). Они проработаны и готовы к передаче в разработку.
Такая трехступенчатая структура позволяет создавать наиболее продуманные и выверенные макеты интерфейсов.
4) Подбор референсов
Не менее важный этап в создании макетов сайта. Здесь я подбираю различный контент(не только веб), на основе которого буду собирать дизайн.
Сюда могут входить: плакаты, постеры, картины, что угодно, что может вас вдохновить на создание уникального дизайна.
Лично я подбираю референсы на каждый отдельный блок, допустим, если на сайте есть блоки: главная страница, преимущества и допустим форма обратной связи, то для каждого из этих блоков подбираете 10 референсов.
Чуть не забыл крайне важную деталь: всегда согласовывайте мудборды клиентом и просите, чтобы клиент вам прислал примеры сайтов, которые ему нравятся, так вы поймете, что примерно хочет видеть на своем сайте клиент и избежите лишних правок в дальнейшем!
5) Непосредственный дизайн (20% всей работы)
Тут думаю без лишних комментариев. На данном этапе после анализа референсов перехожу к непосредственному дизайну: подбираю шрифты, цветовые решения и контент (если его не предоставил клиент).
6) Подготовка макета к верстке
Очень важный этап, про который большинство дизайнеров забывают.
Здесь нужно провести довольно кропотливую работу: все текстовые и цветовые стили, унифицировать компоненты и сгруппировать все по блокам в самом макете.
Отдельно перед этим этапом нужно создать UI-kit. Я его создаю в три шага: стили, интерактивные элементы и компоненты
Если вы проделаете все эти моменты, то верстальщик или вы сами скажете себе огромное спасибо при переходе к верстке.
7) Умение обосновать свои решения
Обосновывать решения перед клиентов или командой супер ответственный этап, который совмещает в себе как софт, так и хард скиллы.
Тут вы можете предоставить разные варианты презентации вашего дизайна: будь то pdf-файл, где вы текстом описываете решения или же это будет лайф-встреча, где вы показываете на кликабельных прототипах, как все будет работать внутри сайта или приложения ( для эффекта ВАУ)
Это основные этапы при разработке сайтов, на которые не закладываются больших вложений на тестирования, надеюсь было полезно!
Подписывайтесь на канал и делитесь статьей, а также поделитесь в комментариях, какой этап для вас является любимым)