Самостоятельная раскрутка сайта uCoz
Главная » Раскрутка сайта uCoz » SEO советы


Симметрия, асимметрия и равномерность сайта


Симметрия в дизайне

Основные правила симметрии сайта и ее влияние на общее юзабилити. Как сделать свой сайт ровным и на какие моменты обращать внимание.


Симметрия в дизайне – это пропорциональное расположение элементов дизайна сайта относительно его середины (к центру). Противоположным определением симметрии будет асимметрия. Выделяют двустороннюю, радиальную и трансляционную симметрию. Связанную по вертикали или по горизонтали. Управляющую целыми элементами, их размерами, цветами и контрастом.

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

Даже если ваш сайт ничего не продает, все равно нужно следить за симметричностью, так как она влияет на действия посетителя – либо он покинет сайт, посчитав его непривлекательным и «кривым», либо просмотрит не одну, а несколько страниц.


«В дизайне сайта все должно быть параллельно и перпендикулярно!»

Я уверен, что большинство стандартных шаблонов uCoz отвечают требованиям симметричности или асимметричности, если не вносить в них своих «искривляющих» изменений, например, «влепление» рекламного блока не соответствующего ширине сайтбара или замена «родных» элементов шаблона - своими, совершенно не соответствующие заданным пропорциям.

Основные элементы дизайна (шапка, блоки, футер) взаимосвязаны по отношению друг к другу на одной конкретной странице и за их визуальное представление отвечает веб-дизайнер создающий шаблон. На любом сайте есть объекты притягивающие взгляд посетителя с первых секунд посещения. Это могут быть: слайдеры, объемные изображения, навигационное меню, рекламные блоки и другие элементы дизайна. Их «притягивающее» свойство напрямую зависит от расположения на странице, цвета, формы и даже от других элементов расположенных рядом.

Поэтому после получения первого визуального контакта с сайтом, посетитель может прокрутить страницу дальше, абсолютно бессознательно пропустив мимо своего взгляда важные для вебмастера объекты (меню навигации, уникальное предложение, полезный информер, рекламу и т.д.). Чтобы управлять взором посетителя вы должны понимать основные правила баланса в композиции вебдизайна:

  1. Темные цвета намного тяжелее светлых.
  2. Яркие цвета бросаются в глаза реще, чем тусклые.
  3. Большие объекты тяжелее для восприятия по сравнению с мелкими.
  4. Центр сайта имеет более сильное притягивающее свойство, нежели правый или левый край. В свою очередь – левый край сильнее, чем правый.
  5. При первом посещении взгляд посетителя концентрируется на верхнем левом углу (как при чтении книги).
  6. Каждый отдельный элемент (или определенная часть сайта) обладает свойствами «перекидывать» баланс на следующий объект, вследствие чего образуется очередь направления внимания.

Управляя этими свойствами можно предположить места концентрации внимания посетителя на определенных этапах просмотра участков сайта (например, порядок восприятия элементов в шапке, в футере или в контенте). Более важные объекты должны находиться первыми в очереди, менее значимые – в конце.




Равномерность сайта.

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

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

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


Симметрия в контенте.

Контент является самым важным для посетителя участком сайта. На него попадает более 70% взглядов в первые секунды посещения (если контент расположен в первом окне). Соответственно к визуальному оформлению контента нужно подходить с максимальной ответственностью и пониманием баланса в веб-дизайне.

Если в виде материалов вы используете громадный постер, под которым мелким шрифтом указано описание материала, то можно предположить, что посетитель будет смотреть именно картинки, но не читать описание. А если сделать сбалансированный вариант представления материалов, например, небольшое изображение слева и описание материала справа, то можно предположить, что в зависимости от предпочтений посетителя, он сможет сам решать что ему хочется получить – картинку или описание, при этом первым «ловить» взгляд будет именно изображение.

Но контентная симметрия затрагивает не только оформление конкретного материала, но и общее взаимодействие всех материалов друг с другом.

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

Но еще хуже, когда вы представляете посетителю несбалансированный вид материалов. Это когда краткое описание каждого добавленного материала заполняется без соблюдения общей структуры оформления с нарушением баланса композиции. В итоге целая страница категории или раздела так же принимает «тяпо-ляповкий» вид.


Симметрия в структуре.

Структурная симметрия определяет общий баланс в логической структуре сайта отображаемый в виде пунктов навигационного меню.

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

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

Немалозначимым фактором правильной организации навигационного меню является формирования анкоров ссылок на разделы и категории. Не нужно писать длинные анкоры, старайтесь чтобы каждая ссылка в меню была симметрична по отношению друг к другу и не допускайте таких ситуаций, когда большинство ссылок в меню состоят из 2-3 слов и располагаются на одной строке, а одна или две ссылки состоят из более 3-х слов и занимают не одну, а две строки. Такая же ситуация может произойти при использовании различных CSS стилей активирующихся при наведении мышки на ссылку. В этом случае, даже симпатичная 2-х словная ссылка может увеличиться в размере и растянутся на две строки, а цепная реакция очевидна – изменится визуальный вид всего меню.

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


Понятия симметрии и асимметрии довольно сложные в виду огромного количества различных нюансов, и чтобы в них полностью разобраться, нужно посвятить свою жизнь веб-дизайну и созданию продающих сайтов. Основная цель этой статьи – определить важность симметричного расположения элементов на страницах сайта, без углубления в основы веб-дизайна. По моим наблюдениям примерно 1/3 вебмастеров uCoz просто «забили» на этот чрезмерно важный показатель качественного веб-ресурса.


Проверьте свой сайт до мелочей. Найдите все «бока» самостоятельно и постарайтесь их устранить. Сайт должен быть ровным, параллельным и перпендикулярным. Обращайте внимание на кроссбраузерность, так как, настроив нормальное отображение в одном браузере – в другом эта ошибка может остаться, или даже появиться новая.

Поделитесь записью в социальных сервисах!






Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Быстрый вход ]







Опрос
Ваше отношение к uCoz?

Всего ответов: 750
Ваш профиль
Вся информация на этом сайте предоставляется бесплатно и без регистрации, но для того чтобы принимать участие в обсуждениях и комментариях необходимо зайти на сайт под своим именем (uID) или зарегистрироваться.
Новые пользователи