1. Пространство

Священная концепция, которую дизайнеры называют белым пространством – это один из основных и действенных компонентов веб-дизайна. В коде это margin и padding для блоков, и letter spacing и line height для текста, это дорогой пространство, не имеет в себе элементов, которые привлекают внимание. То есть изображение и узоры также могут быть частью белого пространства, пока они не перехватывают фокус.


Когда тебе 18 лет, то в запасе есть 4 года точно, чтобы определиться, какая область дизайна ближе всего. Учась в вузе, можно попробовать анимацию, затем переключиться на UX, а потом целый семестр посвятить фотографии. Под конец станет понятно, что нравится и получается лучше всего. Но когда работаешь программистом, столько времени нет. Необходимо четко определиться, какие навыки необходимы, и изучать именно их.

Советы:

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

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

2. Контраст

Есть много способов достичь контраста в вашем дизайне, то только несколько из них следует использовать в создании сайта. Контраст цветов: люди всегда лучше замечают что-то яркое, пользователь скорее заметит кольоровую кнопку, чем с нейтральным цветом. Также еще есть контраст форм и размеров. Все формы контраста используются чтобы выделить важную информацию и сделать статическую страницу более интерактивной.

Этот сайт использует все три типа контраста. Яркие, плоские блоки выгодно контрастируют со светлыми и текстурными. Пышная форма логотипа контрастирует с остальными страницами, преимущественно прямоугольной формы.

Советы:

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

Шрифты должны всегда контрастировать по форме и размерам, но один из этих контрастов очень помогает в дизайне.

3. Баланс

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

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

Подсказка:

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