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

Антон Григорьев
2 min readMay 4, 2016

--

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

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

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

Акценты

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

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

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

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

Мелочи

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

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

Цвет

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

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

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

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

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

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

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

Понравилось — подписывайтесь

Конспект подготовил Антон Григорьев.

--

--