UX/UI дизайн: от базы до первого заказа

Роль UX/UI и базовые принципы дизайна интерфейсов

Добро пожаловать в курс «UX/UI дизайн: от базы до первого заказа». Вы находитесь в самом начале увлекательного пути. Дизайн интерфейсов — это одна из самых востребованных и динамично развивающихся профессий в мире IT. Но прежде чем мы начнем рисовать кнопки и подбирать шрифты, нам нужно разобраться с фундаментом.

Многие новички ошибочно полагают, что дизайн — это только «сделать красиво». В этой статье мы разрушим этот миф и разберем, как на самом деле работает индустрия, почему математика и психология важны для дизайнера, и чем UX отличается от UI.

Что такое UX и UI? Разбираемся в аббревиатурах

Вы наверняка видели эти две аббревиатуры, написанные через слэш. Они идут рука об руку, но означают совершенно разные вещи.

UX (User Experience) — Опыт пользователя

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

UX-дизайнер отвечает на вопросы:

Как пользователь попадет из точки А в точку Б?

Удобно ли ему нажимать на эту кнопку?

Понятно ли ему, что произошло после оплаты?

UX — это про функцию, логику и эмпатию.

UI (User Interface) — Пользовательский интерфейс

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

UI-дизайнер отвечает на вопросы:

Привлекательно ли выглядит приложение?

Читается ли текст на этом фоне?

Соответствует ли стиль бренду компании?

UI — это про эстетику, эмоции и визуальную коммуникацию.

!Модель айсберга, демонстрирующая соотношение видимой части интерфейса (UI) и скрытой работы над опытом (UX)

Классический пример: Бутылка кетчупа

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

Представьте две бутылки кетчупа:

Стеклянная бутылка. Она выглядит элегантно, дорого и красиво стоит на столе. Это отличный UI. Но чтобы достать из нее соус, нужно бить по дну, трясти её, и в итоге вы либо не получаете ничего, либо заливаете всю тарелку. Это плохой UX.

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

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

В цифровом мире происходит то же самое. Сайт может быть невероятно красивым (хороший UI), но если пользователь не может найти кнопку «Купить» (плохой UX), бизнес потеряет деньги.

Базовые принципы и законы UX

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

1. Закон Якоба (Jakob's Law)

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

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

Как применять: * Используйте привычные паттерны (меню сверху или снизу, логотип ведет на главную). * Не изобретайте велосипед там, где это не нужно.

2. Закон Хика (Hick's Law)

Закон Хика описывает зависимость времени принятия решения от количества вариантов выбора. Чем больше опций вы даете пользователю, тем дольше он думает.

Математически это можно выразить логарифмической формулой:

Где: * — время, необходимое для принятия решения. * — константа, зависящая от когнитивных способностей конкретного пользователя (скорость обработки информации). * — количество вариантов выбора (альтернатив). * — двоичный логарифм, показывающий, что зависимость не линейная, а логарифмическая.

Что это значит для дизайнера? Если вы дадите пользователю список из 50 пунктов без категорий, он впадет в ступор. Если вы разобьете эти 50 пунктов на 5 категорий по 10 пунктов, время принятия решения () значительно сократится.

Как применять: * Упрощайте навигацию. * Разбивайте сложные формы регистрации на несколько простых шагов. * Убирайте все лишнее со страницы.

3. Закон Фиттса (Fitts's Law)

Этот закон касается моторики и удобства нажатия на элементы. Он гласит, что время, необходимое для перемещения курсора (или пальца) к цели, зависит от расстояния до цели и её размера.

Формула индекса сложности задачи ( — Index of Difficulty):

Где: * — индекс сложности движения (насколько трудно попасть в цель). * — расстояние от начальной точки курсора/пальца до центра цели (Distance). * — ширина цели вдоль оси движения (Width).

Из формулы видно: чтобы уменьшить сложность (), нужно либо уменьшить расстояние (), либо увеличить размер цели ().

!Визуализация закона Фиттса: зависимость скорости нажатия от размера кнопки и расстояния до нее

Как применять: * Делайте важные кнопки (например, «Купить» или «Отправить») большими. * Располагайте связанные элементы рядом друг с другом. * Увеличивайте область клика (активную зону) у маленьких иконок, особенно в мобильных интерфейсах.

Процесс работы над дизайном: Design Thinking

Чтобы создать качественный продукт, дизайнеры часто используют методологию Design Thinking (Дизайн-мышление). Это нелинейный процесс, который помогает решать проблемы пользователей. Он состоит из 5 этапов:

Эмпатия (Empathize): Мы изучаем пользователей, их боли и потребности. Мы не гадаем, а проводим интервью и исследования.

Фокусировка (Define): Мы формулируем конкретную проблему, которую будем решать.

Генерация идей (Ideate): Мозговой штурм. Мы придумываем как можно больше решений, не критикуя их.

Прототипирование (Prototype): Создаем черновые версии решения (сначала на бумаге, потом в черно-белом варианте в графическом редакторе).

Тестирование (Test): Показываем прототип реальным людям, собираем обратную связь и, если нужно, возвращаемся на предыдущие этапы.

Почему UX/UI — это профессия будущего?

Мир переходит в «цифру». Банки, магазины, государственные услуги, обучение — всё теперь в вашем смартфоне. За каждым удобным приложением стоит UX/UI дизайнер.

Бизнес понимает: инвестиции в дизайн окупаются. Согласно исследованиям, каждый доллар, вложенный в UX, приносит до 100 долларов прибыли за счет повышения конверсии и лояльности клиентов. Именно поэтому спрос на специалистов, которые понимают и логику (UX), и эстетику (UI), растет с каждым годом.

Заключение

Сегодня мы заложили первый камень в фундамент вашего образования. Вы узнали, что дизайн — это не магия, а совокупность логики, психологии и визуального вкуса. Вы познакомились с законами Хика и Фиттса и поняли, почему важно думать о пользователе.

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

Готовы проверить, как вы усвоили материал? Переходите к домашнему заданию!

Исследование пользователей и постановка задачи

В предыдущей статье мы разобрали фундамент: что такое UX и UI, и на каких законах строится восприятие интерфейса. Теперь пришло время перейти к практике. Но не спешите открывать графический редактор. Если вы начнете рисовать макет сразу после получения заказа, вы, скорее всего, потерпите неудачу.

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

Этап 0: Бриф и понимание бизнеса

Любой проект начинается с разговора с клиентом. Ваша первая задача — не «сделать красиво», а понять бизнес-цели. Для этого существует бриф — документ (или интервью), в котором фиксируются основные требования к проекту.

О чем спрашивать клиента?

Не бойтесь задавать «глупые» вопросы. Вот чек-лист того, что вы должны узнать до начала работы:

Бизнес-цель: Зачем компании этот дизайн? Увеличить продажи? Повысить узнаваемость бренда? Снизить нагрузку на колл-центр?

Целевая аудитория (ЦА): Кто будет пользоваться продуктом? (Возраст, география, профессия, привычки).

Конкуренты: Кто уже делает это хорошо, а кто — плохо?

Технические ограничения: На каких устройствах это должно работать? Есть ли брендбук (готовые цвета и шрифты)?

Часто клиенты приходят с запросом: «У нас низкие продажи, нам нужен новый дизайн». Здесь нам на помощь приходит математика, чтобы перевести абстрактные «низкие продажи» в конкретную метрику — Конверсию.

Где: * (Conversion Rate) — коэффициент конверсии (процент пользователей, совершивших целевое действие). * — количество пользователей, выполнивших целевое действие (купили товар, подписались на рассылку). * — общее количество пользователей, посетивших страницу или приложение. * — множитель для перевода дроби в проценты.

Понимая эту формулу, вы можете поставить задачу корректно: «Нам нужно изменить дизайн карточки товара так, чтобы увеличить с 1% до 1.5%».

Вы — не ваш пользователь

Это главная мантра UX-дизайнера. Вы можете быть технически подкованы, иметь отличный вкус и последний iPhone. Но если вы делаете приложение для пенсионеров-дачников, ваш личный опыт не имеет значения. Вам нужно «влезть в шкуру» пользователя.

!Иллюстрация, показывающая разрыв между ментальной моделью дизайнера и пользователя, и исследования как способ преодолеть этот разрыв

Методы исследований: Качественные и Количественные

Все исследования делятся на две большие группы:

1. Количественные (Quantitative)

Отвечают на вопросы: «Сколько?» и «Что происходит?». * Веб-аналитика: Google Analytics, Яндекс.Метрика. Мы видим цифры: 70% пользователей уходят из корзины. * Опросы: Массовый сбор данных через формы.

2. Качественные (Qualitative)

Отвечают на вопросы: «Почему?» и «Как?». * Глубинные интервью: Беседа один на один с пользователем. * Юзабилити-тестирование: Наблюдение за тем, как пользователь выполняет задачи в интерфейсе.

Для новичка самым доступным и мощным инструментом является глубинное интервью.

Как проводить интервью: Метод «Спроси маму»

Многие новички совершают ошибку, спрашивая: «Вам нравится моя идея приложения для фитнеса?». Любой человек (особенно ваша мама) ответит: «Конечно, милый, это замечательно!», чтобы не обидеть вас. Это ложные данные.

Роб Фицпатрик в своей книге «Спроси маму» сформулировал золотое правило: Не спрашивайте мнение о будущем, спрашивайте о фактах из прошлого.

> Врать вам будут все. И друзья, и коллеги, и инвесторы. Не со зла, а потому что хотят поддержать. Ваша задача — задавать вопросы так, чтобы соврать было невозможно. > — Роб Фицпатрик, «Спроси маму» Ссылка на книгу

Примеры:

| Плохой вопрос (Про будущее/Мнение) | Хороший вопрос (Про прошлое/Факты) | | :--- | :--- | | «Вы бы купили подписку на наше приложение?» | «Когда вы в последний раз платили за какое-либо приложение?» | | «Вам удобно было бы искать туры через карту?» | «Расскажите, как вы искали отель для прошлого отпуска?» | | «Какая функция вам нужна?» | «С какой самой большой проблемой вы столкнулись при заказе?» |

Обработка результатов: Персоны и CJM

После того как вы поговорили с 5–7 представителями целевой аудитории, у вас наберется много информации. Её нужно структурировать. Для этого используются два инструмента.

User Persona (Персонаж)

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

Хорошая карточка персоны содержит: * Имя и фото: Для эмпатии. * Демография: Возраст, город, работа. * Боли и проблемы: Что его бесит в текущих решениях? * Цели: Чего он хочет достичь?

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

Customer Journey Map (CJM)

CJM (Карта пути клиента) — это визуализация пути пользователя от возникновения потребности до получения результата.

Представьте путь заказа такси:

Потребность: Опаздываю на встречу.

Поиск: Открываю приложение.

Выбор: Сравниваю цены «Эконом» и «Комфорт».

Ожидание: Смотрю на карту, где едет машина.

Поездка: Еду в машине.

Результат: Успел на встречу, оплатил.

На каждом этапе у пользователя могут быть разные эмоции и проблемы. Задача дизайнера — найти «ямы» (негативные моменты) на этом пути и «засыпать» их хорошим интерфейсом.

Job To Be Done (JTBD)

Еще одна популярная концепция, которая помогает понять мотивацию. Люди не покупают продукты, они «нанимают» их для выполнения работы.

Классический пример: Человек покупает не дрель, и даже не дырку в стене. Он покупает чувство уюта от повешенной картины.

Формула Job Story:

Где: * — работа, которую нужно выполнить. * — контекст («Когда я...»). * — действие («Я хочу...»). * — желаемый результат («Чтобы...»).

Пример: Когда я стою в очереди (Situation), я хочу быстро прочитать короткую интересную статью (Motivation), чтобы не скучать и узнать что-то новое (Outcome).

Это описание задачи для новостного приложения гораздо полезнее, чем просто «Мужчина, 25 лет».

Заключение

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

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

А пока — проверьте, как вы усвоили материал, выполнив домашнее задание.

Информационная архитектура, прототипирование и UX-сценарии

В предыдущих статьях мы проделали огромную работу: разобрались с психологией пользователя, провели исследования, создали Персону и построили карту путешествия клиента (CJM). У нас на руках есть понимание кто наш пользователь и какую проблему он хочет решить.

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

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

Информационная архитектура (IA): Порядок из хаоса

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

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

Как построить хорошую архитектуру?

Самый популярный метод для создания структуры — Карточная сортировка (Card Sorting).

Выпишите все функции и разделы вашего будущего сайта на стикеры (например: «Каталог», «О нас», «История заказов», «Кроссовки», «Возврат товара»).

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

Дайте названия этим группам.

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

!Визуализация древовидной структуры сайта, показывающая иерархию страниц

User Flow: Проектируем логику движения

Если CJM (Customer Journey Map), который мы делали ранее, описывает эмоции и глобальный путь, то User Flow (Пользовательский сценарий) — это конкретная техническая схема переходов между экранами.

User Flow отвечает на вопрос: «Что произойдет, если пользователь нажмет эту кнопку?».

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

* Круг/Овал: Начало или конец сценария (Вход в приложение / Покупка завершена). * Прямоугольник: Экран или страница (Главная, Корзина). * Ромб: Условие или решение (Пользователь авторизован? Да/Нет). * Стрелки: Направление движения.

Пример сценария «Вход в приложение»

Экран приветствия Нажатие «Войти».

Экран ввода данных Ввод логина/пароля.

Проверка (Ромб): Данные верны?

Если Да:* Переход на Главный экран. Если Нет:* Показ сообщения об ошибке Возврат к вводу данных.

Создавая User Flow, вы находите логические дыры. Например, вы можете обнаружить, что забыли спроектировать экран восстановления пароля, и пользователь окажется в тупике.

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

Прототипирование: От наброска к макету

Когда структура (IA) и логика (User Flow) готовы, мы начинаем визуализировать интерфейс. Этот процесс делится на этапы по степени детализации (Fidelity).

1. Low-Fidelity (Низкая детализация) — Вайрфреймы

Вайрфрейм (Wireframe) — это «скелет» интерфейса. Это черно-белый чертеж, где блоки обозначены простыми прямоугольниками, а вместо картинок — перечеркнутые квадраты.

Главное правило: Никакого цвета, никаких шрифтовых игр, никаких теней.

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

2. High-Fidelity (Высокая детализация) — Интерактивные прототипы

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

Сетки и математика в макете

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

Самая популярная сетка для веба — 12-колоночная. Почему 12? Потому что 12 делится на 2, 3, 4 и 6 без остатка. Это позволяет легко делить экран на равные блоки.

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

Формула расчета ширины колонки:

Где: * — искомая ширина одной колонки (column width). * — общая ширина контентной области (width). * — ширина отступа между колонками (gutter). * — количество колонок (number of columns). * — количество отступов (их всегда на один меньше, чем колонок).

Пример: Допустим, мы делаем дизайн для десктопа. Ширина контейнера пикселей. Мы хотим 12 колонок () и отступ между ними пикселей.

Подставим значения:

Считаем суммарную ширину всех отступов: пикселей.

Вычитаем отступы из общей ширины: пикселей (это место для самих колонок).

Делим на количество колонок: пикселей.

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

Инструменты для работы

В чем все это делать? Забудьте про Photoshop. Он создан для ретуши фотографий, а не для интерфейсов.

Figma — индустриальный стандарт. Бесплатная, работает в браузере, позволяет делать всё: от вайрфреймов до готового дизайна и прототипов. В курсе мы будем ориентироваться на неё.

Miro / FigJam — идеальны для этапа исследований, построения User Flow и IA. Это бесконечные онлайн-доски.

Бумага и ручка — самый быстрый инструмент. Прежде чем идти в Figma, набросайте идею на салфетке. Это сэкономит вам часы работы.

Заключение

Сегодня мы построили скелет нашего будущего продукта. Мы узнали: * Как Информационная архитектура помогает пользователям не заблудиться. * Как User Flow продумывает логику каждого клика. * Почему Вайрфреймы должны быть черно-белыми. * Как с помощью математики рассчитать Сетку макета.

Теперь у нас есть утвержденный чертеж. В следующей статье начнется магия: мы поговорим о Визуальном дизайне (UI). Мы разберем теорию цвета, типографику, композицию и наконец-то сделаем наш проект красивым.

А пока — закрепите знания, выполнив домашнее задание.

UI: визуальная система, компоненты и дизайн в Figma

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

Многие думают, что UI — это просто «раскрашивание» прямоугольников. На самом деле, это строгая инженерная система. Красивый интерфейс — это не случайность, а результат математического расчета и знания правил композиции. В этой статье мы разберем, как превратить черно-белый чертеж в современный дизайн-макет в Figma.

Визуальная иерархия: Управление вниманием

Главная задача UI-дизайнера — управлять глазом пользователя. Когда человек открывает сайт, он не читает его от корки до корки, как книгу. Он сканирует его.

Ваша цель — выделить главное и приглушить второстепенное. Для этого используются три инструмента:

Размер: Заголовок всегда больше основного текста.

Цвет: Кнопка «Купить» должна быть яркой, а кнопка «Отмена» — бледной.

Отступы (Воздух): Важные элементы требуют больше пустого пространства вокруг себя.

Теория цвета в интерфейсах

Новички часто пытаются использовать 10 разных цветов, чтобы сделать «повеселее». Профессионалы используют ограниченную палитру. Существует золотое правило декораторов, которое отлично работает в UI.

Правило 60-30-10

Это правило помогает сбалансировать цветовую гамму: * 60% — Основной цвет (обычно нейтральный: белый, светло-серый, темный фон). Это ваши «стены». * 30% — Вторичный цвет (цвет бренда, плашки, заголовки). Это ваша «мебель». * 10% — Акцентный цвет (кнопки призыва к действию, уведомления). Это «цветы в вазе».

Контрастность и доступность

Красота не должна убивать читаемость. Текст должен быть контрастным по отношению к фону. Для проверки этого существует стандарт WCAG (Web Content Accessibility Guidelines). Он основан на математической формуле коэффициента контрастности.

Где: * (Contrast Ratio) — коэффициент контрастности (число от 1 до 21). * — относительная яркость самого светлого цвета (от 0 до 1). * — относительная яркость самого темного цвета (от 0 до 1). * — константа для корректировки значений при низкой яркости.

Минимально допустимое значение для обычного текста — 4.5:1. Если ваш серый текст на белом фоне имеет коэффициент 2:1, его не прочитают люди с плохим зрением или те, кто смотрит в экран на ярком солнце.

Типографика: Больше, чем просто шрифты

Шрифт — это голос вашего интерфейса. Он может быть строгим (Times New Roman) или дружелюбным (Comic Sans, хотя его лучше не использовать). В UI обычно используют гротески (шрифты без засечек), такие как Inter, Roboto или San Francisco.

Интерлиньяж (Line Height)

Самая частая ошибка новичка — слипшиеся строки. Чтобы текст дышал, нужно правильно настроить высоту строки.

Формула идеального интерлиньяжа для основного текста:

Где: * (Line Height) — высота строки в пикселях. * (Font Size) — размер шрифта в пикселях. * — коэффициент множителя (обычно от 1.3 до 1.5 для основного текста).

Пример: Если у вас шрифт 16px, то высота строки должна быть . Для крупных заголовков коэффициент уменьшается до 1.1–1.2.

Сетки и отступы: Магия числа 8

Почему одни интерфейсы выглядят аккуратно, а другие — как куча мусора? Секрет в системе отступов. В современном дизайне стандартом является 8-point Grid System (8-пиксельная сетка).

Суть проста: все размеры и отступы должны быть кратны 8 (или 4 для мелких деталей).

Где: * (Size/Spacing) — размер элемента или отступа. * — базовый шаг сетки. * — целое число (1, 2, 3...).

Допустимые значения: 8, 16, 24, 32, 40, 48, 64 px. Запрещенные значения: 13, 21, 37 px.

Использование этой системы избавляет вас от мук выбора: «Сделать отступ 15 или 17 пикселей?». Ответ всегда один: делайте 16.

Атомарный дизайн (Atomic Design)

Когда проект разрастается до сотен экранов, поддерживать порядок становится сложно. Здесь на помощь приходит методология Atomic Design, которую придумал Брэд Фрост.

> Атомарный дизайн — это методология создания дизайн-систем. Мы не проектируем страницы, мы проектируем системы компонентов. > — Брэд Фрост Ссылка на методологию

Суть метода в разбиении интерфейса на уровни, как в химии:

Атомы: Неделимые элементы (шрифт, цвет, иконка, кнопка).

Молекулы: Группы атомов, работающие вместе (поле поиска = кнопка + поле ввода).

Организмы: Сложные блоки интерфейса (шапка сайта, карточка товара).

Шаблоны: Структура страницы без контента.

Страницы: Готовый дизайн с реальным текстом и картинками.

!Иллюстрация пяти стадий атомарного дизайна: от простого элемента к целой странице

Работа в Figma: Компоненты и Auto Layout

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

Компоненты (Components)

Представьте, что вы нарисовали кнопку и скопировали её на 50 экранов. Потом клиент говорит: «Давайте сделаем кнопки не синими, а красными». Без компонентов вам придется менять цвет 50 раз вручную.

В Figma вы создаете Главный компонент (Main Component). Все его копии называются Экземплярами (Instances). Вы меняете цвет в Главном компоненте, и он автоматически меняется на всех 50 экранах.

Auto Layout (Автолейаут)

Это функция, которая позволяет контейнерам автоматически подстраиваться под содержимое. Если вы напишете в кнопке длинный текст, кнопка с Auto Layout сама растянется, сохранив отступы. Это аналог верстки на CSS (Flexbox) в мире дизайна.

Правило профи: Старайтесь использовать Auto Layout везде, где это возможно. Это спасет вам часы работы при правках.

Чек-лист перед сдачей макета

Прежде чем сказать «готово», проверьте свой UI по этому списку:

Выравнивание: Все элементы стоят ровно по сетке?

Контраст: Текст читается легко?

Единообразие: Везде ли кнопки одного размера и стиля?

Состояния: Нарисовали ли вы, как кнопка выглядит при наведении (Hover) и нажатии (Pressed)?

Группировка: Связанные элементы находятся ближе друг к другу, чем к чужим группам (Закон близости)?

Заключение

Сегодня мы «одели» наш каркас. Мы узнали про правило 60-30-10, научились считать контрастность и высоту строки, а также познакомились с атомарным дизайном. Теперь ваш проект выглядит как настоящий продукт.

Но дизайн — это не только картинка в Figma. Это еще и презентация вашей работы и передача её разработчикам. В следующей, финальной части курса, мы поговорим о том, как оформить портфолио, найти первого клиента и правильно передать макеты в верстку.

А пока — закрепите знания на практике, выполнив домашнее задание.

Портфолио, коммуникация с клиентом и получение первого заказа

Поздравляю! Вы прошли огромный путь. Вы изучили основы UX, научились проводить исследования, строить информационную архитектуру и создавать стильный UI в Figma. Теперь у вас есть навыки, чтобы создавать качественные цифровые продукты. Но есть одна проблема: навыки сами по себе не приносят денег. Деньги приносят клиенты.

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

Портфолио: Это не картинки, это истории

Главная ошибка новичка — думать, что портфолио — это галерея красивых картинок. Это заблуждение. Клиенту (и особенно арт-директору студии) не важно, насколько красивые у вас тени у кнопок. Им важно, как вы мыслите.

Ваше портфолио должно состоять из кейсов (Case Studies). Кейс — это история решения проблемы.

Структура идеального кейса

Хороший кейс строится по классической драматургии:

Завязка (Задача): Клиент пришел с проблемой (упали продажи, устарел дизайн, пользователи путаются).

Развитие действия (Процесс):

* Как вы исследовали аудиторию? * Какие гипотезы выдвинули? * Покажите черновые наброски и вайрфреймы (да, даже некрасивые). * Покажите User Flow.

Кульминация (Решение): Финальный UI-дизайн. Красивые мокапы экранов.

Развязка (Результат): Чего удалось достичь? (Например: «Время оформления заказа сократилось на 30%»).

!Визуализация структуры дизайн-кейса: от постановки задачи до финального результата

Где публиковать портфолио?

* Behance: Самая популярная платформа. Идеальна для подробных кейсов с описанием процесса. * Dribbble: Больше про визуальный «вау-эффект» и короткие шоты (небольшие фрагменты интерфейса). Хорошо для UI, хуже для UX. * Notion / Tilda: Личный сайт или страница. Выглядит профессионально и позволяет структурировать информацию как угодно.

Совет: Для старта вам не нужно 10 работ. Достаточно 2–3, но проработанных до мелочей. Если у вас нет реальных заказов — придумайте их! Сделайте редизайн любимого приложения или придумайте сервис доставки корма для енотов. Главное — покажите процесс мышления.

Поиск первого заказа: Где прячутся клиенты?

Когда портфолио готово, пора выходить на охоту. Есть три основных пути:

1. Теплый круг (Networking)

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

2. Биржи фриланса

Upwork, Kwork, Freelance.ru. Здесь высокая конкуренция и поначалу низкие чеки. Но это отличная школа жизни. Вы научитесь общаться, соблюдать дедлайны и работать по ТЗ.

3. Холодные письма

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

* ~~«Здравствуйте, я начинающий дизайнер, дайте мне заказ».~~ (Плохо) * «Здравствуйте! Я заметил, что на вашем сайте сложно оформить заказ с мобильного. Я сделал концепт, как это можно исправить, посмотрите во вложении. Буду рад обсудить сотрудничество». (Хорошо)

Математика фриланса: Сколько стоит ваша работа?

Самый страшный вопрос для новичка: «Сколько это будет стоить?».

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

Формула расчета часовой ставки:

Где: * (Rate) — ваша минимальная стоимость часа. * (Income) — желаемый чистый доход в месяц (на руки). * (Expenses) — ваши ежемесячные расходы на работу (подписка на Figma, интернет, амортизация ноутбука, налоги). * (Hours) — количество рабочих часов в месяц (стандартно 160 часов). * — коэффициент эффективности. Фрилансер не может работать 100% времени над проектами. Около 30% времени уходит на поиск клиентов, переписку, бухгалтерию и обучение.

Пример: Вы хотите зарабатывать 50 000 рублей (). Расходы на софт и налоги — 5 000 рублей ().

Округляем до 500 рублей. Теперь, если клиент просит дизайн лендинга, вы оцениваете время: * Анализ и прототип: 4 часа * Дизайн: 8 часов * Правки: 2 часа * Итого: 14 часов.

Стоимость проекта: рублей.

> Никогда не работайте без предоплаты. Стандарт рынка — 50% до начала работы, 50% перед передачей исходников.

Коммуникация: Вы и Клиент — партнеры

Дизайнер — это не «руки», которые двигают пиксели по указке. Вы — эксперт, который решает задачу бизнеса.

Правила здорового общения:

Не бойтесь задавать вопросы. Глупый вопрос — тот, который не был задан. Лучше спросить сейчас, чем переделывать весь макет потом.

Аргументируйте решения. Не «я так вижу», а «я сделал кнопку большой, потому что по закону Фиттса это увеличит скорость нажатия».

Фиксируйте договоренности. После каждого созвона пишите клиенту краткое резюме (Follow-up): «Мы договорились, что я меняю цвет фона на белый и присылаю макет в среду». Это ваша страховка.

Handoff: Передача макетов в разработку

Ваша работа не заканчивается, когда клиент утвердил картинку. Ваша работа заканчивается, когда разработчик получил всё необходимое для верстки.

Разработчики не умеют читать ваши мысли. Им нужны спецификации.

Чек-лист передачи макета (Developer Handoff):

Порядок в слоях: Удалите все скрытые слои, черновики и варианты, которые не пошли в работу. Назовите слои понятно (Header, Button, Footer), а не Frame 1453.

UI Kit / Style Guide: Отдельная страница в Figma, где собраны все цвета, шрифты и состояния кнопок (Default, Hover, Active, Disabled).

Экспорт ассетов: Пометьте иконки и картинки для экспорта (плюсик Export в Figma), чтобы верстальщик мог скачать их в SVG или PNG.

Dev Mode: Если у вас есть доступ к режиму разработки в Figma, убедитесь, что он показывает правильные отступы и свойства.

!Интерфейс Figma в режиме подготовки макета для разработчика

Soft Skills: То, что важнее Figma

В начале пути кажется, что главное — это выучить все плагины и горячие клавиши. Но карьеру строят Soft Skills (гибкие навыки).

* Эмпатия: Умение слышать боль клиента и пользователя. * Умение принимать критику: Когда клиент говорит «мне не нравится», он критикует не вас лично, а решение. Не обижайтесь, а выясняйте причину. * Дисциплина: Сданный вовремя средний макет лучше, чем идеальный макет, сданный на неделю позже дедлайна.

Заключение курса

Мы прошли путь от понимания того, что такое UX, до подготовки макетов к верстке. Вы узнали законы Якоба и Фиттса, научились строить CJM, рассчитывать сетки и создавать компоненты.

Дизайн — это бесконечный процесс обучения. Тренды меняются, инструменты обновляются (вчера был Photoshop, сегодня Figma, завтра — нейросети). Но база, которую вы получили — психология, логика, композиция — останется актуальной всегда.

Не бойтесь ошибаться. Каждый плохой макет приближает вас к хорошему. Начинайте делать, ищите заказы, практикуйтесь. Удачи в мире дизайна!

Теперь выполните финальное задание, чтобы закрепить знания о профессиональной стороне работы.