Добрый день, уважаемые читатели!
Недавно я посетил конференцию РИТ-2016, на которой была одна очень занятная тема про прототипирование.
В данной статья я хотел бы поделиться теми знания, которые мне передали на конференции.
Акценты. Организуйте верную визуальную иерархию
Все элементы, как правило, представляют собой прямоугольники. Так вот у этих самых прямоугольников есть всего 5 акцентов.
Если же мы нарушим данные акценты, то создастся впечатление, что что-то пошло не так.
Мы все стремимся к симметрии. Так же и в дизайне, если набор элементов располагается несимметрично, то возникает внутренний диссонанс. Как вывод — увеличивайте дробность элементов страницы в одном направлении.
Каноническое направление — из левого верхнего угла к правому нижнему. Но вы можете выбрать любое. Главное, чтобы оно было одно.
Пример канонического направления:
Вертикальный ритм. Не допускайте случайных вертикальных расстояний
Очень важно соблюдать вертикальный ритм.
Выберите размер и интерлиньяж вашего основного текста. По нему постройте базовые блоки по целому числу строк (рекомендуем 3 строки).
По центру базовый блок.
Посчитайте высоту блока — (кегль + интерлиньяж) * количество строк. Постройте остальные тексты (заголовочные, третичные) по принципу: в базовый блок всегда вписывайте целое число строк нужного текста.
Кавычки, тире, союзы
Заботьтесь о мелочах. Это входит в привычку и не занимает много времени.
В русских текстах используйте внешние кавычки-ёлочки и внутренние кавычки-лапки.
«Значит, „неалфавитный“ означает именно то, что я имею в виду?» — спросила она подозрительно.
Если думаете о тире — ставьте длинное. В интервалах используйте короткое тире, а внутри сложных слов — дефис.
Чёрно-белый, 1–3 ложки.
Предлоги и союзы всегда оставляйте на одной строке с зависимым словом.
Используйте предлоги
ии союзы правильно.
Цвета. Подберите цветовую палитру перед прототипированием
Выберите основной цвет (тот, который будет преобладать на ваших страницах). Выбирайте на собственный вкус или по материалам заказчика.
С помощью хроматического круга подберите к основному два комплиментарных цвета-акцента (рекомендуем paletton.com).
К полученным цветам добавляейте два оттенка серого и вооружайтесь полученной палитрой.
Оттенки серого можно брать умолчательные — #424242 и #FAFAFA. Если хотите добавить к ним тон базового, то вооружитесь фотошопом:
- Создайте 2 слоя с умолчательными серыми.
- Сверху создайте слой с базовым цветом.
- К нему примените режим смешивания Overlay и задайте прозрачность 10–15%.
Применяем палитру:
В результате мы получили качественный прототип страницы. Вот так, применяя простые инструменты, можно значительно улучшить внешний вид прототипов.
Заказчику сразу видно, как будет отображаться информация.
Материалы взяты с конференции РИТ-2016. Автор материалов: Илья Бовкунов из компании «Собака Павлова».
Надеюсь, что материал оказался полезным.
На этом все, жду вас в следующих статьях 😉