• 0k
  • 0
Веб-дизайн \ 10 Март 2016

Композиция в веб-дизайне: на что обратить внимание

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

Не совсем понимаете, что такое композиция? Ничего страшного, Если по-простому, то  это умение организовывать элементы и объединять их в единое целое — хоть на картине, хоть на фотографии, хоть на сайте. В этой статье мы рассказываем про основы композиции и объясняем, как они работают в веб-дизайне. Цель? Сделать ваш сайт еще более неотразимым, конечно.

композиция веб-дизайн экран цвета дизайн

Цвет

Ваша задача: выбрать правильные цвета

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

Цветовые акценты можно использовать и для привлечения внимания. Контрастные цветовые сочетания, например, черный с белым, бросаются в глаза в первую очередь, поэтому вы можете оформить таким образом важные кнопки — «Заказать» или «Связаться с нами».

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

цвет зонтик радуга

Правило третей

Ваша задача: понять, куда что ставить

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

статистика композиция веб-сайт

«Воздух»

Ваша задача: расчистить пространство

Помните времена, когда родители просили вас навести в комнате порядок, «потому что места свободного нет»? Золотые слова. Пространство, или, как говорят веб-дизайнеры, «воздух» — очень важный композиционный элемент. Если его мало — займитесь «уборкой» и не поддавайтесь желанию оставить как можно больше текста, картинок и иконок. Потому что «воздух» иногда гораздо важнее, чем контент.

Людям нравятся «просторные», не перегруженные сайты — от них не рябит в глазах, они доносят четко сформулированную мысль и не дают шанса запутаться. Подумайте, что вы хотите сказать миру, и ограничьтесь парой-тройкой картинок и коротким текстом строго по делу.

белое пространство

Визуальная иерархия

Ваша задача: направить взгляд пользователя на самое важное

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

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

визуальная иерархия

 

 

 

 

 

 

 

 

 

 

 

 

 

Понимая, на что человек смотрит в первую очередь, а на что — во вторую и в третью, вы можете распределить информацию наиболее выгодным для вас способом. Хотите, чтобы покупатели не прошли мимо определенной кнопки? Значит, ставьте ее туда, куда первым делом падает взгляд, и выделяйте ярким цветом. Хотите показать, какие классные у вас товары с помощью фотографий? Найдите для них лучшее место и проследите, чтобы они не сливались с фоном.

 

Почувствовали вдохновение, чтобы создать сайт? Сделайте его на Wix — это просто и бесплатно!

Автор Команда Wix

Оставайтесь в курсе
новинок блога

Подпишитесь на блог и не пропустите ни одной статьи!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Давайте дружить \ 

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

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email