Навыки проектировщика в стилизации интерфейсов

Доклад Ильи Бовкунова из «Собаки Павлова» на ProfsoUX 2016.

Один из последних этапов длинного пути проектировщика — подготовка прототипа. Сделайте прототип лучше, проработав:

  1. Акценты на страницах;
  2. Вертикальный ритм;
  3. Мелочи;
  4. Цветовую палитру.

Акценты

Акцент задаётся не только размером элемента и контрастом, но и положением элемента в блоке: в центре и по углам.

Упорядочьте элементы блока. Расположите их так, чтобы дробность уменьшалась в одном считываемом направлении.

Вертикальный ритм

Строится от размера базового текста. Базовый блок состоит из целого числа строк базового текста.

Мелочи

Расставьте правильные кавычки (ёлочки и лапки), дефисы и тире. Уберите висящие предлоги. И так далее.

Смотрите рекомендации Ильи Рудермана по оформлению текста.

Цвет

Используйте материалы заказчика, логотип, предыдущий сайт или сами выберите цветовую гамму: базовый цвет, 2 дополнительных акцентных. Плюс тёмносерый для текста и светлосерый для миниакцентов.

Подбор серых цветов:

  1. Возьмите базовый цвет и оттенки серого #a0a0a0 и #333333;
  2. С прозрачностью 95% наложите базовый цвет на серые.

Также вместо плашек можно использовать изображения.

Комментарий Саши Куценко из Aidem

Fantasy Interactive делает высокодетализированные прототипы: финальная типографика, шрифты, текст, но без цветов. Для расстановки акцентов используются градиенты серого.

Слайды презентации и видео.

На основе своего выступления Илья написал статью «Приёмы эстетического оформления UX-прототипов».

Также опубликовано на Медиуме.

Опечатка? Выделите её и нажмите кнопки Control и Enter.

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.

Теперь электронную версию можно купить и читать на Литресе.