Обложка канала

Поясни за UX

Интерфейсы здорового человека

Поясни за UX

4 года назад
Открыть в
Как развивать визуал Умение рисовать, а уж тем более учить рисовать "красивый" UI для меня всегда было болью. Красивость интерфейса, в отличие от его полезности или удобства - вещь эфемерная. Измерить ее невозможно, а вывалиться во вкусовщину и "это не очень красиво смотрится" ничего не стоит, да и критиковать визуал рад каждый, кто имеет глаза. Я для себя выделяю несколько уровней, которые надо преодолеть. А еще я придумала уровням названия, мне кажется, они забавные. 🗿Уровень 0: Камень. "Делаю уродливо, не понимаю что не так" На этом уровне нужно запомнить базовые правила, научиться видеть их применение в чужих макетах и набить руку. Упражнения для уровня 0: 1. Изучаем основы композиции 2. Изучаем основы колористики 3. Изучаем основы типографики 4. "Срисовка". Находим и срисовываем один любой UI (с dribbble/awwwards/и т.д.) пиксель в пиксель. Анализируем как применяются правила композиции, колористики и типографики в каждом из экранов, выписываем рядом. Повторяем упражнение ежедневно 2 недели подряд. 🐝 Уровень 1: Пчелка "Соблюдаю базовые правила, очень стараюсь, но все равно получается каша" На этом уровне ваша задача – научиться а)делать чистенько б)не бояться пустоты. Дизайнеры, которые освоили базовые правила и научились собирать прямоугольники в кучки, часто начинают бояться пустого пространства, стараться применять свои знания на максимум и заполнять каждый пиксель "пользой". Получается то, что мы назваем шумным интерфейсом: минимум отступов, куча цвета, линий, теней и рюшек. Упражнения для уровня 1: 1. "Кубики". Берем свой или чужой экран, каждый визуальный/логический блок накрываем серым прямоугольником. Удаляем все, кроме получившихся прямоугольников. Играем в кубики: переставляем прямоугольники местами, меняем их размеры, расстояния между ними, применяем правила третей, золотого сечения и т.д. Восстанавливаем контент согласно тому, в каком прямоугольнике какой контент был изначально. Оцениваем результат. 2. "Уборка". Берем любой свой экран, сверху вниз анализируем каждый графический объект (линия, прямоугольник, иконка, текст, тень - все вообще). Задаем себе вопрос "зачем он". Если не можете ответить - удаляете объект (ответ "для красоты" не считается). Если ответ "чтобы отделять одно от другого" - попробуйте заменить объект, например линию, на отступ побольше. Помогло? Удаляйте объект. По итогу должно остаться только то, что реально важно. 3. "Книгопечатание". Берем любой свой UI и делаем все тексты в нем черными и одного размера 14px. Находим самый главный текст на экране. Увеличиваем его в три раза, поправляем межстрочный и межбуквенный интервалы согласно правилам типографики. Находим второстепенные тексты, увеличиваем их в два раза, правим интервалы. Находим все интерактивные тексты, красим их в основной цвет. Находим все дополнительные тексты, красим их в серый. Оцениваем результат.