В данной статье я расскажу Вам свое понимание построения сайта. Конечно, работая в веб студии, вы уже знаете законы графического построения. Эта статья призвана не обогатить Вас знаниями, а еще раз подчеркнуть важное, помочь подобрать нужное слово в беседе с заказчиком, и конечно узнать, что твориться в голове у дизайнера с многолетним стажем. И так, приступим…
Визуальная иерархия сайта.
При построении информационной направляющей для сайта я использую пять постулатов.
1.Люди читают слева направо и сверху вниз
2.Важное должно быть контрастно к менее важному
3.Пятна внимания.
4.Разделяй и властвуй.
5.Всему свое место и время
__________________________________________________________
1.Люди читают слева направо и сверху вниз
С первым пунктом все просто, располагайте текстовые элементы сайта, так что бы посетителю было удобно и просто знакомиться с контентом и функционалом.
2. Важное должно быть контрастно к менее важному
Второй пункт говорит нам о том, что посетитель нехотя выделит красное слово из черного текста.
3.Пятна внимания.
Третий пункт самый интересный. Ученые мужи Американских 80х, увлеченные шоп-бумом начали изучать внимание человека. Оказалось, что все люди, проходя мимо рядов в маркете, видят товары, расположенные в определенных частях полок. Оказалось, что даже контрастные объекты вне пятна внимания не привлекают человека, так как это делает объект, расположенный в месте, где зрение человека может сфокусироваться максимально быстро. Происходит это не механически, мозг отдает команды глазам, основываясь на своем многолетнем опыте. Что бы не томить вас, скажу, что внимание правши сосредоточено по диагонали от лево-верх до право-низ с увеличением диаметра пятна в центре отрезка.
4.Разделяй и властвуй.
Четвертый пункт относиться больше к функционалу и юзабилити. Посетителю будет удобно, если шапка, меню, функциональная часть, контентная часть сайта будут разделены на визуальные блоки. Глаз человека с расстояния до монитора (учитывая широкий формат новых мониторов) неспособен охватить весь сайт на 100%. Что то, находящееся за пределами пятна внимания расплывется в цветное пятно. По цвету этого пятна мозг человека легко определит координату, даже при концентрации внимания на другом объекте сайта. Например, если у вас красное меню белый фон и черный текст, человек сосредоточено читая контент в центре страницы все равно визуально видит меню, хотя и не сможет в данный момент его прочитать.
5.Всему свое место и время
Пятый пункт основан на уже устоявшихся вариантах верстки. Попробуйте сделать что-нибудь отличное от массового и вероятность потерпеть фиаско будет 90%.
Например, представьте окошко windowsс крестиком (закрывающим это окно) расположенным не справа сверху как обычно, а слева снизу. Многие не найдут крестик, другие потратят много времени на поиск оного. Это говорит нам о том, что элементы сайта не должны препятствовать пониманию и быстро находиться.
Так же очень важно не перегружать сайт лишними модулями, можно отключать часть из них при прохождении посетителя через сайт.
Итог
Можно сказать, что количество внимания к определенному объекту можно измерить. В таком случае у нас появляется единица измерения «внимание», какие-то элементы нашего сайта требуют у посетителя больше единиц «внимания», другие меньше.
В визуальном представлении элементы располагают в соответствии с их важностью, заставляя действовать посетителя сообразно определенной логике. Такая логика расположения деталей носит название визуальной иерархии.
Создавая правильную визуальную иерархию, используя основы зрительного восприятия, дизайнер добавляет или уменьшает весомость элементов на странице сайта. Тем самым он определяет путь, по которому будет двигаться внимание посетителя.
Сбалансированная графическая составляющая не только задаёт порядок, в соответствии с которым воспринимается информация, но также позволяет объединить разобщённые детали страницы в целостное содержание. Таким образом, сайт насыщается балансом и порядком.
Надеюсь вам понравилось….
________________________________
Любая графика для Вашего бизнеса
Оксана, дизайнер - фрилансер
Oksana, designer - freelancer
E-Mail: web-oksana@mail.ru
Site: web-oksana.ru
ICQ: 610080755
P.S. Орфография и оформление автора сохранены
