UI/UX дизайн сайта: чем отличается от обычного дизайна
Обычный дизайн отвечает на вопрос «как это выглядит». UI/UX отвечает на вопрос «получится ли у человека этим воспользоваться» — и это два разных набора навыков.
UX — не про красоту
UX-проектирование начинается до того, как открывается графический редактор: с вопросов, какие задачи решает пользователь на сайте, в каком порядке он их решает, и что мешает ему дойти до заявки. Результат этого этапа — схема экранов и пользовательских путей, а не картинка.
Ошибка на уровне UX не исправляется покраской кнопки в другой цвет. Если форма заявки спрятана на третьем экране, а не там, где пользователь её ищет, красивый визуальный дизайн этого не компенсирует.
UI — это уже видимый слой
UI-дизайн работает поверх готовой структуры: расставляет визуальную иерархию, цвет, типографику, состояния кнопок — нажата, наведена, неактивна. Именно здесь макет превращается в то, что видит пользователь.
Хороший UI делает понятную структуру ещё понятнее: подсказывает, куда смотреть в первую очередь, какая кнопка главная. Плохой UI может испортить хорошо продуманную структуру — например, спрятать важную кнопку среди одинаковых по весу элементов.
Почему красивый макет иногда не работает
Дизайнер без UX-опыта нередко оценивает макет по тому, как он смотрится статично на большом мониторе. Реальный пользователь листает сайт с телефона, отвлекается, не читает текст полностью — и часть красивых решений в этих условиях перестаёт работать.
Частый случай: полноэкранная анимация или крупная иллюстрация, которая отлично смотрится в портфолио дизайнера, но занимает весь первый экран и не сообщает, что именно предлагает компания. Пользователь либо ждёт, либо уходит.
Как выглядит нормальный процесс
Сначала — карта экранов и черновая раскладка блоков без цвета и шрифтов (wireframe), где проверяется логика: в каком порядке идёт информация, где находится форма, куда ведёт каждая кнопка. Эта версия обсуждается и правится быстрее, чем готовый визуальный макет.
Затем — визуальный дизайн поверх утверждённой структуры, и уже на этом этапе подключаются цвет, типографика, фирменный стиль компании. Менять структуру после этого шага заметно дороже, чем на этапе wireframe.
Как проверить, что интерфейс работает
Дайте макет или прототип человеку, не участвовавшему в проекте, и попросите вслух найти цену или оставить заявку. Места, где он останавливается или переспрашивает, — это и есть проблемы UX, которые не видны изнутри проекта.
После запуска сайта смотрите на реальное поведение: где пользователи чаще всего уходят, докручивают ли до формы, сколько заявок приходит с мобильных против десктопа. Эти данные точнее любого личного мнения о том, «красиво или нет».