Что это такое? Это чертеж твоего сайта или приложения, нарисованный на салфетке пьяным архитектором. Тут нет цветов, красивых картинок и модных шрифтов. Только серые блоки, линии и текст-заглушка «Lorem Ipsum».
Боль новичка: Ты пытаешься сделать вайрфрейм красивым. Добавляешь тень под серый прямоугольник, подбираешь оттенок серого посимпатичнее. Остановись! Цель вайрфрейма — договориться о структуре. Где будет меню? Где кнопка «Купить и страдать»? Где блок с котиками? Всё. Не трать на это больше часа, иначе коллеги начнут подозревать, что ты просто не умеешь ничего другого.
Макет
Это твой вайрфрейм, который сходил к стилисту. Тут уже появляются цвета, шрифты, реальные иконки и картинки. Это статичная, красивая картинка того, как будет выглядеть финальный продукт.
Боль новичка: Ты показываешь заказчику мокап, а он начинает тыкать в кнопку и орать: «ПОЧЕМУ НЕ НАЖИМАЕТСЯ?!». Запомни, золотое правило: всегда, ВСЕГДА предупреждай, что это просто картинка. Неинтерактивная. Неживая. Красивая, но неживая. Макет — это визуальная концепция, а не работающий сайт.
Прототип
А вот это уже мокап, в который немного вселили жизнь. Кнопки нажимаются, экраны переключаются, можно пройти по всему пути пользователя от главной до экрана «Всем спасибо, все свободны».
Прототип — это симуляция работы твоего интерфейса.
Боль новичка: Ты делаешь прототип всей системы. Каждой кнопочки, каждой ссылочки, каждого чекбокса. В итоге тратишь на это три недели, а потом приходит менеджер и говорит: «Мы тут всё передумали, давай по-новой».
Делай прототип только для ключевых сценариев, которые нужно протестировать или показать. Не нужно анимировать иконку лайка, если вы еще не решили, будет ли у вас вообще система лайков.
Часть 2. Мозг и душа проекта (то, за что платят больше всего)
UX (User Experience, или «Опыт пользователя»)
Это не про красоту. Это про чувства.
Что ощущает пользователь, когда взаимодействует с твоим творением? Радость и легкость? Или желание найти твой адрес и высказать все, что он о тебе думает? UX — это логика, удобство, понятность. Это ответ на вопрос «Как сделать так, чтобы юзер достиг своей цели и не сошел с ума?».
Боль новичка: «Я сделал хороший UX, потому что у меня красивые кнопочки». Нет.
Это так не работает. UX — это невидимый фундамент. Если пользователь за 3 секунды нашел то, что искал, — это хороший UX. Если он полчаса ищет кнопку выхода — это плохой UX, даже если она переливается всеми цветами радуги.
UI (User Interface, или «Пользовательский интерфейс»)
А вот это уже те самые кнопочки, иконки, ползунки, цвета и шрифты.
UI — это визуальная оболочка, то, с чем пользователь непосредственно взаимодействует.
Это то, как выглядит руль, педали и приборная панель в автомобиле.
Боль новичка: Путать UX и UI.
Запомни раз и навсегда: UX — это то, насколько удобно вести машину. UI — то, как выглядит и ощущается руль. Можно сделать руль из чистого золота (крутой UI), но если он будет квадратным, водить будет невозможно (ужасный UX). Они работают вместе, но это разные вещи.
CJM (Customer Journey Map, или «Карта пути клиента»)
Звучит страшно, на деле — детективная история.
Это визуализация всего пути твоего пользователя: от момента, когда он впервые услышал о продукте, до превращения в лояльного фаната (или хейтера).
CJM помогает найти «болевые точки» — места, где пользователь страдает, путается или уходит к конкурентам.
Боль новичка: Рисовать CJM для выдуманного сферического пользователя в вакууме. «Наш пользователь — мужчина 20-50 лет, живет на планете Земля». Нет! CJM строится на данных, интервью, аналитике. Тебе нужно понять реальные проблемы реальных людей, а не свои фантазии о них.
Часть 3. Кубики LEGO для дизайнера (Визуал и компоненты)
UI Kit (UI-кит, или «Набор интерфейсных элементов»)
Это твоя коробка с LEGO. В ней лежат все возможные «детальки» для сборки интерфейса: кнопки во всех состояниях (обычная, наведенная, нажатая), поля ввода, чекбоксы, иконки, цвета, шрифты. Все в одном месте, все консистентно.
Боль новичка: Рисовать каждую кнопку с нуля на каждом новом экране. В итоге на одном сайте у тебя 15 вариантов одной и той же синей кнопки. Это ад для разработчика и позор для дизайнера. Сделай один раз хорошо, сложи в кит и переиспользуй.
Design System (Дизайн-система)
Это твой UI-кит на стероидах. Это не просто набор деталек, а целая философия. К деталям добавляются правила, принципы, рекомендации по использованию, описание тона голоса бренда и паттерны поведения. Дизайн-система — это «Библия» твоего продукта.
Боль новичка: Называть свой файлик в Figma с тремя кнопками и двумя цветами «дизайн-системой». Не надо так. Дизайн-система — это масштабный продукт, который живет и развивается вместе с компанией. Начни с UI-кита, не замахивайся сразу на святое.
Accessibility (Доступность, или a11y)
Это проектирование интерфейсов так, чтобы ими могли пользоваться все. Вообще все. Люди с плохим зрением, с дальтонизмом, те, кто не может пользоваться мышью, и даже твоя бабушка. Это про контрастность текстов, про подписи к иконкам, про навигацию с клавиатуры.
Боль 'продвинутого' новичка: Считать, что это скучно и для галочки. Во-первых, это огромная часть аудитории, которую ты просто выкидываешь. Во-вторых, делая дизайн доступным, ты чаще всего делаешь его просто лучше и понятнее для всех. Контрастный текст легче читать на солнце. Понятные подписи к полям помогают всем, а не только пользователям скринридеров.
Affordance (Аффорданс)
О, это слово, которое обожают говорить на созвонах, чтобы казаться умнее. Аффорданс — это свойство объекта, которое как бы «намекает», как его использовать. Дверная ручка намекает, что за нее надо взяться и потянуть. Кнопка с тенью и объемом намекает, что на нее можно нажать. Синий подчеркнутый текст в интернете кричит: «Я ССЫЛКА, КЛИКНИ НА МЕНЯ!».
Боль новичка: Делать «инновационный» дизайн, убивая все аффордансы. Например, делать все ссылки такого же цвета, как и обычный текст. Пользователь не понимает, что кликабельно, а что нет. Он растерян. Не надо так. Не ломай то, что и так работает.
Часть 4. Мост в реальный мир (Технические штуки)
Responsive vs. Adaptive Design (Респонсив vs. Адаптив)
Два подхода к тому, чтобы твой сайт не выглядел как взорванный сарай на разных экранах.
Responsive (резиновый): Дизайн гибкий, как гимнаст. Он плавно растягивается и сжимается под любой размер экрана. Элементы меняют размеры в процентах.
Climbers on Mount Rainier
4K Timelapse Video
Adaptive (адаптивный): Дизайн как одежда разных размеров. У тебя есть несколько жестко заданных макетов под конкретные разрешения (например, для мобилки, планшета и десктопа).
Climbers on Mount Rainier
4K Timelapse Video
Боль новичка: Использовать эти слова как синонимы. Запомни: резина тянется, а одежда меняется. Сегодня почти все делают респонсив, но с элементами адаптива на ключевых точках.
Breakpoint (Брейкпоинт, или «Точка излома»)
Это и есть та самая ширина экрана, на которой твой дизайн «ломается» и перестраивается. Например, на 768 пикселях меню из горизонтального превращается в «бургер», а колонки встают одна под другую. Это ключевые точки в адаптивном/респонсивном дизайне.
MVP (Minimum Viable Product, или «Минимально жизнеспособный продукт»)
Это не твой идеальный продукт мечты со всеми фичами, которые ты придумал в 3 часа ночи. Это самая урезанная версия продукта, которая решает хотя бы одну, но самую главную боль пользователя.
Цель MVP — быстро запуститься, собрать реальные отзывы и понять, нужно ли это вообще кому-то, не потратив на разработку годы и миллионы.
Боль новичка: Пытаться впихнуть в MVP все свои гениальные идеи. «Без анимированного курсора в виде котика наш продукт не взлетит!». Взлетит, если будет решать проблему. А котика прикрутишь потом. Или никогда.