Навигация в виде вкладок: 11 потрясающих примеров

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

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

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

Book.Land

Book.Land — это потрясающий проект для совместного написания историй. Он был разработан графическим дизайнером Гарри Бойдом с целью побудить людей во всем мире общими усилиями создавать рассказы. Каждому пользователю необходимо продолжить повествование с того места, где оно было прервано, и добавить несколько иллюстраций в дополнение к тексту. Макет сайта выглядит необычно и вызывает интерес. Первое, что мы видим при попадании на главную страницу, это забавная анимация логотипа, где на долю секунды буквы «o» превращаются в простые рисунки — кошку, смайлик, конверт и т.д. По обе стороны экрана есть вертикальные вкладки. Они напоминают книги, которые стоят на полке. Такой дизайн идеально дополняет предназначение сайта. Главная страница излучает атмосферу брутализма за счет применения шрифта без засечек, который используется в верхнем регистре, и кричащего флуоресцентного зеленого, контрастирующего с окружающим спокойствием нейтрального белого цвета. Вкладки с обеих сторон экрана содержат краткое описание своего контента. Внутренние страницы разделены на две части: слева расположены рисунки, а справа — текст. Название каждой истории динамично двигается, чем нарушает инертность окружающего контента и анонсирует рассказ в захватывающей манере. На странице также есть штрих-код — стандартный элемент бумажных книг. Но на этом сайте вместо 8-значного числа он показывает текущее время.

Queertrip

Queertrip — туристическое агентство для представителей сообщества ЛГБТ. Проект был разработан для того, чтобы показать людям с нетрадиционной сексуальной ориентацией места, куда они могут отправиться и при этом не беспокоиться о своей безопасности. На главной странице расположены вращающееся изображение Земли и анимированная стрелка, которая перемещается вдоль земного шара. Каждые несколько секунд цвет фона, элементов и типографики меняется, демонстрируя цвета радуги. В правой части экрана вы увидите две вкладки. Первая — черная, другая — белая. На обеих перпендикулярно экрану расположен анимированный текст, который информирует вас о содержимом этих вкладок. Несмотря на то, что главная страница наполнена цветами, зацикленная движущаяся типографика и монохромная цветовая палитра вкладок также привлекают к себе внимание. При наведении курсора на вкладку она немного разворачивается и показывает небольшую часть своего контента. При нажатии на нее она заполняет практически весь экран, но другие вкладки, расположенные сбоку, остаются видимыми. Это значит, что вы можете с легкостью переходить от одной вкладке к другой, когда вам это необходимо.

Canal Street Market

Canal Street Market — это розничный рынок, фуд-холл и общественное пространство, которое находится в Нью-Йорке. Контент веб-сайта организован в форме красочных вкладок. Цвет каждого раздела отличается от других. Фон главной страницы —  утонченный белый, в то время как фон других страниц имеет более яркие оттенки: синий, красный и оранжевый. Переход от одного цвета к другому подчеркивает визуальную привлекательность сайта и делает его более интересным. При нажатии на вкладки они элегантно разворачиваются на весь экран, и вы можете созерцать красоту представленного контента. Помимо великолепных визуальных эффектов, на некоторых страницах также есть анимированные строки. Например, в верхней части главной страницы представлена зигзагообразная линия, которая непрерывно движется от одной стороны экрана к другой. В нижней части вы увидите анимированные пунктирные линии. Их движение и яркая цветовая палитра идеально уравновешивают и смягчают жесткость вкладок, а также создают для пользователей увлекательную среду для исследования сайта.

Space — de Space

Space — de Space был местом в Люцерне, где представители творческих профессий могли выставлять свои работы. Несмотря на то, что на сайте представлена программа 2018 года, мы добавили этот пример сюда, потому что он демонстрирует особую изобретательность в проектировании вкладок. Главная страница выглядит неординарно. Название организации представлено в форме сочетания курсивного шрифта и геометрических фигур. Оно с трудом читается и больше похоже на декоративный элемент, который привлекает к себе внимание. Каждая выставка представлена ​​в форме вкладки. Они накладываются друг на друга. Мы можем видеть только верхнюю часть каждой вкладки, на которой написано имя мастера, дата и кусочек содержимого, расположенного внутри нее. У каждой вкладки свой цвет. Несмотря на то, что главная страница содержит множество элементов, ее легко просматривать, поскольку большинство вкладок окрашены в пастельные тона. Переходы от пудрово-розового и мягкого желтого к нежно-голубому и светло-фиолетовому делают ее более интересной для изучения. Благодаря тому, что вкладки расположены одна над другой, при просмотре главной страницы кажется, что перед вами хорошо структурированный ящик с картотекой.

Tablet Magazine

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

Vine Trail

Vine Trail закупает, импортирует и продает вина из Франции, Северной Испании и Италии. На главной странице перед вами откроется потрясающая полноэкранная анимированная фотография, которая перенесет вас в один из удивительных винных регионов. Главная страница красиво представляет бренд, но если вы хотите узнать больше о производителях и познакомиться с полной картой вин, вам следует кликнуть на две оригинальные вкладки: синюю и оранжевую соответственно, которые расположены в правой части экрана. При клике на них они разворачиваются и полностью занимают всю поверхность экрана. Обе вкладки содержат длинные списки данных в алфавитном порядке (производители) или по региону (вина) в форме столбцов. Вы также можете применять удобные фильтры, чтобы быстро найти интересующую вас информацию. Внедрение вкладок позволило дизайнерам отображать большой объем данных в визуально привлекательной форме, не перегружать сайт и снизить когнитивную нагрузку на пользователя. Все, что вам нужно, это кликнуть на раздел, о котором вы хотите узнать больше, и погрузиться в изучение полноэкранного, яркого контента.

Off Season

Off Season — студия дизайна и фотографии, которая специализируется на работе с музыкантами. Их сайт представляет собой интересное сочетание линий сетки и вкладок. Макет выглядит необычно и побуждает к исследованию сайта. С левой стороны небольшая часть экрана содержит краткое описание студии. Под текстом расположены два пересекающихся квадрата. Они взаимодействуют с вашим курсором — чем ближе вы подводите указатель мыши к квадратам, тем дальше друг от друга они смещаются и наоборот. Остальная часть макета состоит из разделов меню, которые представлены в виде вкладок. При нажатии на них, каждая папка разворачивается и раскрывает свой яркий контент. Перед заголовком каждого раздела расположен небольшой кружок с обводкой, который при наведении курсора и при нажатии становится черным. Это сигнализирует о том, что вкладка находится в «активном» состоянии.

G!Theimagineers

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

Embassy of Internet

Embassy of Internet — это экспериментальная платформа, которая создана для поощрения дискуссий о будущем интернета и его роли в нашем обществе. Несмотря на то, что этот проект больше не работает, мы добавили его в наш список из-за творческого подхода к использованию вкладок на сайте. При наведении курсора на раздел появляется его краткое описание, а цвет шрифта и фона меняются местами. Специфический синий цвет на странице напоминает синий экран смерти в старых версиях Windows (прим. на таком фоне появлялись сообщения о критическом сбое в операционных системах Microsoft Windows). По этой причине дизайн сайта напоминает ретро стиль. Главная страница излучает атмосферу брутализма. Он включает в себя привлекающий внимание крупный шрифт без засечек, который используется в верхнем регистре, а также практически полное отсутствие визуальных элементов. Исключением является пульсирующий большой синий круг, который расположен в левом нижнем углу экрана. Несмотря на то, что сайт в большей степени содержит текст, вам никогда не будет скучно его изучать. Сочетание синих и серых оттенков делает страницы интересными и побуждает пользователя к дальнейшему погружению в проект.

EDA Architects

EDA Architects — архитектурная, дизайнерская и проектная компания. Разделы меню представлены в форме вертикальных вкладок. На сайте присутствует элемент неожиданности, потому что вы не можете даже мельком увидеть содержимое вкладок. На некоторых страницах есть полноэкранный слайдер, на других расположены интересные галереи. Эффекты анимации впечатляют, особенно анимация по скроллу на странице «О компании» (англ. “About”). В какой-то момент вы наслаждаетесь полноэкранным фото, а затем при дальнейшей прокрутке экран делится на две части, в каждой из которых размещено по одной иллюстрации. Далее с одной стороны мы видим небольшую фотографию, а справа появляется сопроводительный текст. Изменения при прокрутке делают страницу динамичной и интересной для изучения. Непропорциональная типографика усиливает ультрасовременный характер зданий и прекрасно дополняет минималистичный стиль некоторых макетов. Страницы об услугах, которые предоставляет EDA, и их контактная информация содержат только текст, но непропорциональный шрифт и использование линий сетки делают их лаконичными и удобными для просмотра и изучения.

Great Jones

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

Заключение

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

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

Чтобы вкладки были более заметными, можно сделать их яркими. Анимация при наведении позволит подчеркнуть привлекательность вашей навигации в виде вкладок. Вы можете предусмотреть возможность изменения цвета вкладок при наведении, добавить к ним несколько анимированных объектов или увеличить их размер. Не бойтесь проявлять свои творческие способности, но помните, что такая навигация всегда должна оставаться четкой и интуитивно понятной.