Композиция в веб-дизайне: на что обратить внимание
Замечали, что художники, веб-дизайнеры и фотографы очень любят поговорить про композицию? Со стороны может показаться, что это секретное знание, доступное единицам, но на самом деле каждый из нас может разобраться в этом вопросе и сделать красивый и правильный сайт самостоятельно, не обращаясь за помощью к профессионалам.
Не совсем понимаете, что такое композиция? Ничего страшного, Если по-простому, то это умение организовывать элементы и объединять их в единое целое — хоть на картине, хоть на фотографии, хоть на сайте. В этой статье мы рассказываем про основы композиции и объясняем, как они работают в веб-дизайне. Цель? Сделать ваш сайт еще более неотразимым, конечно.
Цвет
Ваша задача: выбрать правильные цвета
Цвет считается полноценным элементом композиции. От него во многом будет зависеть то, как люди воспримут ваш сайт, а вместе с ним и продукт. Яркие, контрастные цвета кажутся нам энергичными и бодрыми, приглушенные и комплиментарные — спокойными, расслабленными. Подумайте, какую эмоцию вы хотите вызвать, и подберите подходящую цветовую схему.
Цветовые акценты можно использовать и для привлечения внимания. Контрастные цветовые сочетания, например, черный с белым, бросаются в глаза в первую очередь, поэтому вы можете оформить таким образом важные кнопки — «Заказать» или «Связаться с нами».
Если же вы слабо представляете, какая цветовая гамма вам нужна, возьмите за основу наш готовый шаблон. Или зайдите на сайт Adobe Color CC и поэкспериментируйте с цветами и правилами построения палитры.
Правило третей
Ваша задача: понять, куда что ставить
Правило третей — один из принципов построения композиции. Мысленно поделите страницу на девять равных частей, проведя две горизонтальные и две вертикальные линии. Считается, что люди фокусируются именно на точках пересечения этих линий, поэтому эти места — самые выигрышные. Вспоминайте об этом, когда будете думать, куда лучше поместить фотографию или кнопку c призывом к действию, например, с предложением подписаться на рассылку или перейти в раздел с покупками.
«Воздух»
Ваша задача: расчистить пространство
Помните времена, когда родители просили вас навести в комнате порядок, «потому что места свободного нет»? Золотые слова. Пространство, или, как говорят веб-дизайнеры, «воздух» — очень важный композиционный элемент. Если его мало — займитесь «уборкой» и не поддавайтесь желанию оставить как можно больше текста, картинок и иконок. Потому что «воздух» иногда гораздо важнее, чем контент.
Людям нравятся «просторные», не перегруженные сайты — от них не рябит в глазах, они доносят четко сформулированную мысль и не дают шанса запутаться. Подумайте, что вы хотите сказать миру, и ограничьтесь парой-тройкой картинок и коротким текстом строго по делу.
Визуальная иерархия
Ваша задача: направить взгляд пользователя на самое важное
Очень много исследований посвящено тому, как люди просматривают веб-страницы. Оказывается, они сканируют экран сверху вниз и слева направо, а траектория движения их глаз в этот момент напоминает букву F или букву Z.
Помните об этом, когда начнете проектировать страницы, и не забывайте, что у вас под рукой масса самых разных элементов, с помощью которых можно подать информацию максимально эффективно, в полном соответствии с правилами визуальной иерархии. Это цвета и оттенки, тексты и картинки разных размеров, комбинации шрифтов и, конечно же, линии — вертикальные, горизонтальные и диагональные. Поверьте, пользователи с удовольствием пройдут по предложенному вами пути и прочитают все как положено: сперва самое главное, а уже потом — все остальное.
Понимая, на что человек смотрит в первую очередь, а на что — во вторую и в третью, вы можете распределить информацию наиболее выгодным для вас способом. Хотите, чтобы покупатели не прошли мимо определенной кнопки? Значит, ставьте ее туда, куда первым делом падает взгляд, и выделяйте ярким цветом. Хотите показать, какие классные у вас товары с помощью фотографий? Найдите для них лучшее место и проследите, чтобы они не сливались с фоном.
Почувствовали вдохновение, чтобы создать сайт? Сделайте его на Wix — это просто и бесплатно!
Команда Wix
