UX: порядок и логика
UX, пользовательский опыт, отвечает на вопросы до того, как что-то нарисовано. Кто приходит на эту страницу и чего хочет. Сколько шагов до цели и можно ли какой-то убрать. Что происходит, когда что-то идёт не так: форма заполнена неверно или товара нет в наличии. Результат работы UX - потоки и структуры, а не картинки.
UI: внешний вид и отклик
UI, пользовательский интерфейс, - это всё, что видно и до чего дотрагиваются: типографика, отступы, цвет, иконки, состояние кнопки во время загрузки, вид ошибки в форме. Хороший UI делает структуру очевидной. Плохой способен спрятать хорошую структуру за серым текстом, который не читается на солнце.
Почему их делают вместе
На небольших проектах один человек делает и то и другое, и это нормально, потому что разделение ролей осмысленно только с ростом команды. Ненормально пропускать часть UX: когда рисование начинается сразу, получается красивый экран, который не знает, что посетитель должен сделать. Это замечают позже, по заявкам, которые не приходят.
Как это измеряется
Не вкусом, а поведением: сколько людей доходит до формы, сколько её отправляет, где бросают, сколько длится загрузка. Без измерения спор о дизайне превращается в спор о мнениях. Как дизайн связан с видимостью, разобрано в тексте про веб-дизайн.
Мы ведём дизайн от структуры к внешнему виду, расскажите, что должен сделать посетитель.