Базовые правила визуального дизайна, которым вы можете смело следовать в любом проекте

❗Дисклеймер: Вы не обязаны следовать этим правилам каждый раз. Если у вас есть веская причина нарушить какое-либо из них, нарушайте.❗

1. Используйте почти черный и почти белый цвета вместо чисто черного и белого

Чистый черный (#000000) выглядит на экране неестественно, чистый белый (#ffffff) — слишком ярко, а вместе они дают чрезмерный контраст, что негативно сказывается на восприятии контента. Используйте вместо них близкие цвета. (Любые другие упоминания  «черного» и «белого» в статье предполагают, что вы следуете этому правилу.)

2. Подкрашивайте нейтральные цвета

Нейтральные цвета — это, как правило, черный, белый или серый. Если вы используете какой-то дополнительный оттенок в своем интерфейсе, добавьте немного этого цвета в нейтральный цвет. Так ваша палитра получится более целостной.

3. Делайте важные элементы более контрастными

Важные элементы — это кнопки, контент или что-то еще, что пользователь должен заметить. Более высокий контраст привлекает внимание. Второстепенные элементы (например, тени, декоративные линии) могут быть менее контрастными.

4. В вашем дизайне не должно быть случайных решений

Вы должны продумать каждую деталь. Это касается отступов, выравнивания, размеров, цветов, теней. Всего. Если кто-то попросит вас рассказать, почему тот или иной элемент выглядит именно так, у вас должно быть объяснение. Следовать этому правилу особенно важно, если вы только начинаете свой путь в дизайне.

5. Оптическое выравнивание зачастую точнее, чем математическое

Дизайн-программы выравнивают объекты математически. Однако такой подход неэффективен, когда мы имеем дело с несимметричными формами, визуальный центр которых не совпадает с математическим. Часто вам придется выравнивать фигуры на глаз, чтобы все выглядело правильно.

6. Чем крупнее текст, тем меньше высота строки и наоборот

Чем крупнее текст, тем меньше должно быть расстояние между буквами и строками. Обратное тоже верно. Если этого не сделать, крупный текст будет выглядеть слишком разреженным, а мелкий — слишком сжатым.

7. Каждый элемент должен быть выровнен относительно чего-то

Выравнивание помогает пользователям понять, что объекты связаны. Если какой-то элемент располагается сам по себе, возникает ощущение, что ему не место в макете. В идеале каждый элемент должен быть выровнен относительно чего-то, это помогает проследить лежащую в основе дизайна логику.

8. Выбирайте разные по яркости цвета

Цвета должны различаться не только по оттенку, но и по яркости. Подобные цветовые палитры выглядят более удачно, поскольку оттенки не так сильно конкурируют друг с другом.

9. Не смешивайте теплые и холодные оттенки фона

Когда вы смешиваете теплые и холодные оттенки фона, дизайн не выглядит целостным.

10. Числовые значения должны быть математически связаны

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

11. Располагайте элементы согласно их визуальному весу

Если в строке или колонке есть несколько элементов с разным визуальным весом (например, три кнопки), их следует разместить в соответствующем порядке: самый «тяжелый» элемент должен идти первым, а самый «легкий» — последним. Такое расположение выглядит максимально логично. Одна оговорка — самый «тяжелый элемент» должен располагаться у внешнего края, по которому выровнены элементы (если по правому — справа).

12. Отступы должны отсчитываться от точек высокого контраста

Когда вы рассчитываете отступы между элементами, например, 100px по вертикали между блоками контента на целевой странице, расстояние должно отмеряться от одной точки высокого контраста до другой. Это связано с тем, что наши глаза распознают края элементов именно по контрасту.

Если у нас есть два абзаца, набранных черным шрифтом, на белом фоне, точками контраста будут конец одного абзаца и начало следующего. Но если вы поместите один из них на черную плашку, отступ будет отсчитываться до границы черного фона.

13. Элементы, которые находятся ближе к нам, должны быть светлее

Чем ближе элементы находятся к пользователю, тем светлее они должны быть. Это правило актуально как для светлого, так и для темного режимов, поскольку оно отражает поведение объектов реального мира.

Слева — неправильный пример, справа правильный:

14. Сделайте размытие теней вдвое больше значений X/Y

Например, если вы создали тень, которая сдвинута на 4px по оси Y, поставьте размытие (blur) 8px. Чем «ближе» объект к зрителю, тем меньше должна быть непрозрачность тени (opacity). Это выглядит хорошо, потому что по мере приближения элементов к источнику света их тени становятся более размытыми.

15. Накладывайте простое на сложное и наоборот

Сложный фон (например, градиентная заливка) работает лучше всего, если объекты на переднем плане (например, текст) выглядят максимально просто. И наоборот, сложные элементы лучше всего смотрятся на простом фоне. Конечно, вы можете размещать простое на простом, но это в большинстве случаев будет выглядеть скучно.

16. Выбирайте цвета в пределах определенных значений яркости

Проанализировав около 100 сайтов, я пришел к выводу, что разница в яркости между фоном и контейнером должна быть в пределах 12% для темных интерфейсов и 7% для светлых интерфейсов. Эти значения актуальны для цветовой модели HSB.

‍

17. Сделайте внешние отступы такими же или больше, чем внутренние

Внутренние отступы — это пространство между элементами внутри контейнера. Внешние отступы — это пространство между элементами и краями контейнера. Внешние отступы должны быть такими же или больше, чем внутренние. Связанные элементы нужно размещать ближе друг к другу, а элементы внутри контейнера связаны между собой больше, чем с самим контейнером.

18. Размер основного текста предпочтительно 16px или больше

16px — размер текста по умолчанию в большинстве браузеров. Текст меньшего размера труднее читать, поэтому его лучше не использовать для основного текста.

19. Рекомендуемая длина строки — около 70 символов

Длина строки может составлять 60 или 80 символов, но если вы слишком сильно отклонитесь от среднего значения, текст станет менее читабельным. Если строки будут чрезмерно короткими, людям придется слишком часто перемещать взгляд, если длинными — им будет трудно найти начало следующей строки.

Пример текста с длиной строки 70 символов:

20. Горизонтальные отступы внутри кнопок должны быть в два раза больше вертикальных

Ширина стандартной кнопки больше, чем ее высота. Если вы хотите, чтобы люди мгновенно распознавали этот элемент, придерживайтесь указанного паттерна. В примере ниже отступы над и под подписью составляют 30px, а отступы слева и справа — 60px.

21. В большинстве случаев достаточно двух шрифтов

Второй шрифт — это возможность усилить вашу концепцию. Он также помогает добавить в дизайн некоторое разнообразие. Обычно двух шрифтов достаточно, большее количество может создавать визуальную путаницу.

22. Правильно оформляйте вложенные углы

Иногда объекты со скругленными углами накладываются друг на друга. Если вы хотите, чтобы они выглядели гармонично, рассчитывайте радиус внутреннего угла следующим образом: радиус внешнего угла минус расстояние между ними.

В примере ниже радиус внешнего угла равен 30px, расстояние между ними составляет 20px, поэтому радиус внутреннего угла равен 10px.

23. Не размещайте жесткие визуальные границы рядом друг с другом

Фоновые переходы, края контейнеров и разделительные линии создают жесткие визуальные границы. Не следует располагать две или более таких границ в непосредственной близости друг от друга, поскольку они создают визуальный беспорядок и отвлекают внимание.

В примере ниже границы выделены красным цветом. Я убрал фоновый переход, чтобы жесткое разделение шло только по краю контейнера.