Что может сделать сайт не просто уникальным по дизайну, но и интересным и привлекательным, даже захватывающим воображение и внимание одновременно? Многие подумают о разном и будут частично правы. На сегодняшний день общее впечатление от проекта складывается у посетителей и заказчиков под воздействием ряда факторов. Да, главная скрипка принадлежит контенту, но без должного окружения толку от этого контента будет мало. Относится это и к приятным глазу эффектам, скорости загрузки, удобству чтения, особенностям современного дизайна в целом и, разумеется, к удобству навигации, без которой сайт потеряет свое значение и востребованность. И независимо от того, большой проект создается или нет, но грамотная навигация – тот залог, что поможет посетителю сориентироваться и понять, о чем вообще данный конкретный сайт.
Содержание и навигация – две главные и существенные вещи, которые, при умном использовании, могут обойтись без дополнительных эффектов, декора и прочих «прибамбасов». Только два этих элемента способны предоставить пользователям абсолютно все, что им требуется от проекта. Да-да. И несмотря на то, что достаточно часто создаются сайты с меню-«гамбургером» (однокнопочное, выпадающее), не меньшей популярностью пользуются и сайты с нестандартным подходом к навигации в целом. Иными словами, пункты меню располагаются не как обычно (на одной линии вертикально или горизонтально).
Мы рассмотрим вариации круговой навигации. И не просто использование кружочков и эллипсов, а именно кругового расположения и точного соответствия всего этого с контентом проекта. Согласитесь, расположить элементы можно по-разному, но вот тесно связать с содержанием – это поистине интересненько.
Круговая навигация в веб-дизайне
Стоит отметить, что такой вариант навигации добавляет немного утончённости проекту, пользовательскому интерфейсу, привлекает внимание и заинтересовывает посетителей одним своим видом. Как несложно догадаться, но и на посещаемости сайта это отражается, и на конверсии, и на всем остальном. И стремясь следовать плоскому дизайну, минимализму и прочим трендам, применять такой вид навигации все равно можно. Причина в том, что она точно так же, как и любая иная, подстраивается под оформление в целом. Без теней – нет проблем; без градиентов – тоже; строгость и линейность иконок – и такое, пожалуйста. Что уж говорить о том, что при работе с виртуальными турами именно круговая навигация обеспечивает атмосферность и погружение в новый мир. Хотя и на самом обычном проекте её появление не остается не замеченным.
1701 Franciacorta
1701 Franciacorta выбрали не просто круговую навигацию, но и использовали сами окружности, как формы иконок. При этом, что интересно, на иконках расположились вторичные подразделы и материалы, когда как основное меню скрыто в кнопке-гамбургере. Более того, добавлены были и анимация, видео, даже интерактивный виртуальный тур 3600 и многое иное.
Если рассматривать проект в целом, то он интересен во многих аспектах, о которых мы рассказывали в наших прошлых материалах.
Wine Explorer Brancott
Еще одни сайт, который посвящен винам. С одной стороны, дизайн создан иллюстрированным, анимационным и невероятно простым внешне. Но главное здесь – контент и его систематизированность. Переходя по пунктам кругового меню, взору открывается следующая информация, и следующая. И, несмотря на то, что текстовых материалов нет, каждой страницей можно поделиться в соцсетях, ибо иконки всегда находятся в меню слева и никуда никогда не пропадают.
Если же перейти на основной сайт бренда Brancott, то перед глазами предстанет обычный современный дизайн, не лишенный свих достоинств, но без круговой навигации.
Надежда
Сайт болгарской клиники женского здоровья полностью создан на основе круговой навигации. Точнее сказать – она здесь повсюду. При пролистывании страницы перед глазами посетителя будут появляться все новые и новые кружочки, в которых находятся и изображения, фотографии, тексты, и пункты меню. Смотрится очень красиво, удобно и функционально. Даже если человеку не нужна эта клиника, попадая на сайт, он может быстро сориентироваться и понять, что и где находится, куда кликнуть.
Luxury Resorts
Проект роскошных курортов использовал идею круговой навигации более просто. Дизайнеры создали схематические линейные иконки в виде кружочков, внутри которых находятся тематические рисунки, а расположили их по стандарту – вертикально и сбоку.
.jpg)
Но в целом, благодаря красивым фотографиям, изящной типографике и смешению всего этого со схематическими иконками, проект создает заманчивую и великолепную атмосферу. Более того, многие фотографии на сайте созданы анимированными, то есть «ожившими», о которых мы рассказывали ранее. Где-то ветер играет страницами книг, где-то пламя свечей тревожно светит в сумерках зари, и не только.
7Up
Сайт производителя напитков выбрал круговую навигацию в виду следования общему направлению тематики проекта. Что характеризирует такой продукт, как сок и вода от данного бренда? Пузырьки. Да-да, именно они отличают напитки компании от всех прочих на рынке. Вот именно анимацию пузырьков можно увидеть во время загрузки логотипа, затем появления соответствующей навигации. Даже в оформлении фона, типе градиента, фотографиях и элементов.
При этом при всей кажущейся пикантности и атмосферности, в дальнейшем на станицах сайта используется и навигация в виде плиток, и табличное расположение инфоблоков. Хотя, слайдеры у них тоже имеют круговую навигацию.
В общем и целом, проект интересен со всех сторон.
Причины популярности круга
Круг и окружность – фигура и форма, которую некоторые называют совершенной, некоторые «божественной». Но именно такая форма элементов на веб-сайте способна вдохнуть жизнь в проект и освежить его. На сегодняшний момент круги легко создаются с помощью CSS3 и потому нет необходимости использовать изображения. Более того, за многие годы, что веб-дизайнеры работали со строгими формами прямоугольников, рамок изображений, кнопок, переход к круглой форме выглядит необычно и занятно.
Важен и тот факт, что с появлением сенсорных экранов и мобильных устройств, круг (как форма элементов) стала более востребованной. Согласитесь, но по круглому элементу нажимать пальцем несколько удобнее, ибо происходит имитация кончика пальца, а он у нас все-таки более округлый, а не треугольный или квадратный. Более того, круговой элемент позволяет включить в себя гораздо больше информации, пунктов, иконок и прочего, а потому на небольшом экране смартфона или планшета и/или при адаптивном дизайне такая форма удобна для использования. Именно поэтому, круговая навигация стала с течением времени не просто возможностью украсить сайт, но сделать его чуть более удобным по функциональности.
Уникальные авторские проекты
Круговые элементы, разумеется, используются не только в навигации. Но если к оформлению иконок, фотографий, инфоблоков, логотипов посетители и веб-дизайнеры привыкли уже и это не считается чем-то особенным, то круговая навигация все еще считается некой экстравагантностью.
Например, проект Audi TT поражает не только навигацией, но и всем веб-дизайном в целом: анимацией, стилистикой, музыкой, даже экранами загрузки. В данном случае, несомненно, навигация не слишком выделяется, не особо привлекает внимание, но она соответствует общей тематике и контенту. Аналогично, как и в случае с проектом 7Up.
Другим интересным примером служит Interaction with Artificial Physics. Каждый пункт меню представлен в виде мячика, раскачивающегося на нитке, наподобие маятника. При этом каждый пункт навигации реагирует на движения курсора мышки и, соответственно, подсвечивается текст. Если же зажать ЛКМ на линии, к которой привязаны все маятники и начать её двигать влево-вправо, то и маятники будут раскачиваться строго в соответствии с законами физики.
Оригинально использовались круги для официального сайта «Зверопой» Sing от Illumination Entertainment. Что здесь интересного? Да, линию меню можно все также перетаскивать с помощью ЛКМ, можно подвести курсор к иконкам персонажей и услышать, как они поют, можно кликнуть по ним и перейти на соответствующие страницы. Но, что интересно, на этих страницах также использовались круговые элементы навигации (вниз и вправо). И, да, обычное меню то же есть.
Весьма иначе круговая навигация представлена на проекте Bergluft Hervi, рассказывающая о горнолыжном виде спорта. Можно пролистать главную страницу. Но можно выбрать значок пути и перенестись на круговую навигацию и выбрать подходящий раздел, будь то подготовка, моменты перед спуском или глянцевый журнал даже. При этом загрузится уже тематическая страничка.
И еще один авторский проект в завершении материала. Он способен поразить уникальностью. Круговая навигация в данном случае заключена в один только кружочек. Это проект Cantina Negrar. И речь не идет об иконках в верхнем меню. Достаточно пролистать страницу ниже и глазам предстанет круг, разбитый на сегменты разного цвета. Кликнув по каждому такому сегменту, можно получить соответствующую информацию о видах вин. В целом проект также интересен, ибо и рамочное оформление есть, и плиточная навигация, и эффекты на фотографиях весьма красивые, и многое другое.
Выводы
Круговая навигация или навигация с круговыми элементами, даже навигация с простыми точками или небольшими по размеру кружочками выглядит просто и немного по-родному для пользователей, позволяя так легко и комфортно управлять сайтом с помощью быстрого касания пальцев. Но такой тип навигации хорош и для настольных версий сайтов на широкоформатных экранах, ибо выглядит ничуть не хуже и не менее красиво, мышкой управлять не сложнее.
Особенность же такого варианта навигации – необходимое соответствие с контентом, тематикой. Вина создаются из винограда (овал, шарикообразная форма), хранятся в бочках и бутылках, что тоже имеют округлую форму. Соответственно, для сайтов такой тематики использование круговой навигации или отдельных элементов более чем понятно и естественно. Если рассматривать космическое оформление Audi или пузырьки напитков 7Up, то и здесь соответствие идеи и содержания так же понятно, и касается это даже тематического логотипа самой Audi. И в других случаях (примерах) – все то же самое.
Таким образом, будучи непривычной для большинства, круговая навигация способна быстро привлечь внимание посетителей и сфокусировать их внимание на главных областях страницы. У нее есть неоспоримые преимущества, что с одной стороны – улучшают сайт, с другой – превращают меню в важную и неотъемлемую часть, способную рассказать о многом и стать своеобразным лицом проекта и даже бренда.
