UX-дизайн, немного о прототипировании

publications_prototyping-19-07-2016

Добрый день, уважаемые читатели!

Недавно я посетил конференцию РИТ-2016, на которой была одна очень занятная тема про прототипирование.

В данной статья я хотел бы поделиться теми знания, которые мне передали на конференции.

 

Акценты. Организуйте верную визуальную иерархию

Все элементы, как правило, представляют собой прямоугольники. Так вот у этих самых прямоугольников есть всего 5 акцентов.

other-19-07-16-1

 

Если же мы нарушим данные акценты, то создастся впечатление, что что-то пошло не так.

other-19-07-16-2

 

Мы все стремимся к симметрии. Так же и в дизайне, если набор элементов располагается несимметрично, то возникает внутренний диссонанс. Как вывод — увеличивайте дробность элементов страницы в одном направлении.

other-19-07-16-3

 

Каноническое направление — из левого верхнего угла к правому нижнему. Но вы можете выбрать любое. Главное, чтобы оно было одно.

 

Пример канонического направления:

Пример канонического направления

 

Вертикальный ритм. Не допускайте случайных вертикальных расстояний

Очень важно соблюдать вертикальный ритм.

Выберите размер и интерлиньяж вашего основного текста. По нему постройте базовые блоки по целому числу строк (рекомендуем 3 строки).

other-19-07-16-6

По центру базовый блок.

Посчитайте высоту блока — (кегль + интерлиньяж) * количество строк. Постройте остальные тексты (заголовочные, третичные) по принципу: в базовый блок всегда вписывайте целое число строк нужного текста.

 

other-19-07-16-7

 

Кавычки, тире, союзы

Заботьтесь о мелочах. Это входит в привычку и не занимает много времени.

 

В русских текстах используйте внешние кавычки-ёлочки и внутренние кавычки-лапки.

«Значит, „неалфавитный“ означает именно то, что я имею в виду?» — спросила она подозрительно.

 

Если думаете о тире — ставьте длинное. В интервалах используйте короткое тире, а внутри сложных слов — дефис.

Чёрно-белый, 1–3 ложки.

 

Предлоги и союзы всегда оставляйте на одной строке с зависимым словом.

Используйте предлоги и

и союзы правильно.

 

other-19-07-16-8

 

Цвета. Подберите цветовую палитру перед прототипированием

Выберите основной цвет (тот, который будет преобладать на ваших страницах). Выбирайте на собственный вкус или по материалам заказчика.

С помощью хроматического круга подберите к основному два комплиментарных цвета-акцента (рекомендуем paletton.com).

other-19-07-16-9

other-19-07-16-10

К полученным цветам добавляейте два оттенка серого и вооружайтесь полученной палитрой.

 

Оттенки серого можно брать умолчательные — #424242 и #FAFAFA. Если хотите добавить к ним тон базового, то вооружитесь фотошопом:

  1. Создайте 2 слоя с умолчательными серыми.
  2. Сверху создайте слой с базовым цветом.
  3. К нему примените режим смешивания Overlay и задайте прозрачность 10–15%.

 

Применяем палитру:

other-19-07-16-11

 

В результате мы получили качественный прототип страницы. Вот так, применяя простые инструменты, можно значительно улучшить внешний вид прототипов.

Заказчику сразу видно, как будет отображаться информация.

 

Материалы взяты с конференции РИТ-2016. Автор материалов: Илья Бовкунов из компании «Собака Павлова».

 

Надеюсь, что материал оказался полезным.

На этом все, жду вас в следующих статьях 😉

 

Наставник по HTML, CSS, JavaScript, PHP!
Ищем авторов!
Интернет-магазин редких игрушек из мира Minecraft