Интуитивно понятная навигация — один из ключевых элементов веб-дизайна. То, как мы переходим от одного раздела сайта к другому, и как мы просматриваем контент, может сильно повлиять на наш пользовательский опыт.
В большинстве случаев владельцы веб-сайтов хотят перестраховаться, поэтому они используют проверенную вертикальную навигацию, к которой мы все привыкли. Однако горизонтальный скроллинг может выглядеть намного интереснее, чем его вертикальный аналог.
Макет с боковой прокруткой — привлекательный и практичный выбор, особенно для сайтов-портфолио, каталогов, карт и т. д… Открывать проекты, исследовать города и посещать онлайн-галереи гораздо интереснее благодаря горизонтальному скроллингу. Если все сделано правильно, горизонтальная прокрутка может сделать веб-сайт более привлекательным, увлекательным и запоминающимся, что прекрасно иллюстрируют веб-сайты в нашем списке. Вот несколько уникальных примеров, которые представляют собой идеальный синтез яркого контента и четкой горизонтальной навигации:
Square
Веб-сайт Squareподарит вам незабываемые впечатления. Это онлайн-платформа, где люди могут выставлять свои работы, и она выполнена очень необычно. С самого начала вас приглашают исследовать сайт с Let's Rock! Это кнопка, при нажатии на которую открывается врата веб-империи, где вас приветствуют контрастные цвета, популярные анимированные GIF-файлы, изображения в стиле 90-хи синтезаторные мелодии. И все это происходит еще до того, как вы получите доступ к основному контенту.
Чтобы увидеть работы художников, сначала нужно перетащить мышью квадрат, пока он не достигнет финишной черты, обозначенной красной точкой. Когда вы катитесь по квадрату, появляются известные иллюстрированные персонажи, которые составляют вам компанию, такие как Супер Марио, Дарт Вейдер, Эрик Картман, Бендер из Футурамы и т. д… Только после того, как вы завершите эту мини-игру, вы сможете увидеть избранные проекты.
На главной странице вы увидите слово Square,написанное огромными заглавными буквами на экране, и, в зависимости от того, как вы перемещаете указатель мыши, буквы будут наклоняться в том же направлении. Это действие также влияет на то, как вы перемещаетесь по сайту. Если вы переместите курсор в любом направлении, ваше плавание во вселенной Square начнется. Вы можете выбрать, хотите ли вы исследовать его по горизонтали, вертикали или даже случайным образом.
Home Société
Home Société — это бренд, который производит роскошную мебель для дома и открытых пространств. Их веб-сайт был разработан известным агентством Locomotive, поэтому неудивительно, что он выглядит таким креативным и интересным от самого первого до последнего экрана. Это одностраничная страница с гладкой горизонтальной прокруткой слева направо. Весь сайт по сути прост, но увлекателен плавными анимационными эффектами и привлекательными витринами работ компании. Основная навигация четкая и всегда видимая, она расположена в левой части экрана, поэтому вы всегда можете перейти прямо к наиболее интересному разделу. Когда вы дойдете до конца горизонтальной прокручиваемой домашней страницы, вас встречает полноэкранный раздел с большой типографикой.
D. Potfer Studio
D. Potfer Studio — французская консалтинговая и коммуникационная студия, специализирующаяся на искусстве жизни, культуре, еде и напитках. Их работы представлены в карусельной галерее с горизонтальной прокруткой. Изображения выглядят очень мягкими, мечтательными и прекрасно сочетаются с тонкой, четкой типографикой. Графика также великолепно анимирована, что делает приключение с прокруткой еще более увлекательным.
Kwok Yin Mak
Сайт Kwok Yin Mak — прекрасный оазис минимализма, который, несомненно, производит сильное впечатление на посетителей. Это еще один потрясающий пример одностраничного веб-сайта с горизонтальной прокруткой, который в данном случае работает в обоих направлениях. Как только сайт загрузится, вы можете выбрать прокрутку влево или вправо. Основная навигация скрыта в нижнем левом углу экрана. Но при наведении указателя мыши на О себе, Работаи Гостевая книга, стрелка укажет вам, в каком направлении прокручивать, чтобы добраться до этих разделов. Благодаря использованию привлекательных фотографий, отличному выбору типографики, размерам шрифтов и простым анимационным эффектам Квоку удалось создать потрясающий веб-сайт, который прекрасно демонстрирует его творческие способности и навыки.
Prevint
Prevint — это программа предотвращения межличностного насилия, цель которой — повысить осведомленность о различных типах насилия, которым люди чаще всего подвергаются. Разработчики этого сайта выбрали горизонтальную навигацию, чтобы познакомить посетителей с тем, чем занимается их организация, и поделиться тремя спектрами, которые могут быть полезны людям, подвергающимся насилию. Этот веб-сайт является отличным примером того, как работает горизонтальный скроллинг, когда вы хотите представить некоторые общие идеи своим пользователям, и при этом вам не обязательно придерживаться его на всем сайте. Фактически, здесь горизонтальная навигация исчезает в пользу эффекта прокрутки повествования, когда посетители нажимают, чтобы узнать больше о любом из спектров. Веб-сайт Prevint был неоднократно награжден и выигрывал награды CSS Design Awards, Awwwards, и The FWA.
Canals
Canals — очаровательный проект, созданный с целью рассказать историю знаменитых каналов Амстердама. Этот увлекательный веб-сайт напоминает журнал, и благодаря горизонтальной навигации мы ощущаем, что держим в руках настоящий журнал и листаем его страницы. Великолепные изображения, эффект параллакса, смелая типографика и яркие цвета мгновенно перенесут вас прямо на берег этих исторических каналов. Главное меню отображается в левой части экрана. По мере прокрутки цвет меню будет меняться в зависимости от оттенка фона слайда, на который вы смотрите.
Qode Interactive Catalog
Интерактивный каталог Qodeсоздан с целью продемонстрировать оригинальный подход к современному веб-дизайну. Каталог представляет собой тщательно подобранную подборку нескольких творческих тем, каждая из которых обладает особыми эстетическими качествами, вдохновленными различными формами искусства. В проекте реализован горизонтальный скроллинг, чтобы вызвать эффект прогулки по галерее и просмотра произведений искусства. Когда вы наводите курсор на название каждой из представленных тем, вы можете мельком увидеть ее дизайн. И нажав на заголовок, вы можете начать изучение страницы проекта темы.
Каталог QI получил несколько наград, в том числе « Сайт дня».признание Awwwards, награда « Веб-сайт дня» от CSSDA и награда Webpicksот Communication Arts.
Christie Tang
Кристи Танг — дизайнер продуктов с замечательным сайтом-портфолио. Горизонтальная навигация позволяет нам исследовать ее последние работы, которые элегантно перемещаются из правой в левую часть экрана. Когда вы дойдете до седьмого проекта, цвет фона изменится с белого на черный, а навигация перейдет с горизонтальной на вертикальную. С каждым новым свитком вы попадаете прямо в глубины творческого мира Кристи, где представлены примеры ее мастерства и разносторонности. Главное меню всегда видно: оно находится в верхней части экрана. Когда вы наводите курсор на меню, происходит классная вещь — забавные видеоролики появляются на всем экране (в одном из них даже изображена сама Кристи, играющая в видеоигру), побуждая вас узнать больше об этом, несомненно, уникальном и вдохновляющем дизайнере.
Peak'n Film
За Peak'n Filmстоит Том Гарсин, французский фотограф и видеомейкер. Этот удивительный веб-сайт представляет собой увлекательную демонстрацию захватывающих произведений Тома. Все просто и минималистично, что позволяет его творчеству привлекать внимание. Вверху страницы есть индикатор выполнения, показывающий, как далеко вы продвинулись и сколько его изображений осталось увидеть. Горизонтальный скроллинг гладкий, работает волшебно в обоих направлениях и идеально дополняет портфолио Тома. Весь проект поразителен, отсюда и все награды, которые он получил на FWA, Awwwardsи CSS Design Awards.
Gosha Khidzhakadze
Гоша Хиджакадзе — разработчик с незатейливым веб-сайтом, который очень интересно исследовать. Изображение одноцветное, а фон нейтральный. Итак, что сразу привлекает ваше внимание, так это имя Гоши, написанное массивными оранжевыми буквами, которые медленно уходят за пределы экрана, когда вы просматриваете его работы. Когда вы наводите курсор мыши на любой проект, изображения становятся волнистыми, как если бы они наблюдались сквозь воду, и именно здесь становится очевидным опыт Гоши в анимации. Указатель принимает форму рассеянного круга, и когда вы перемещаете его по фотографии, он открывает фрагменты других изображений, представленных в выбранном проекте.
Gingko
Сайт Gingkoтакже является отличным примером горизонтальной навигации в действии. С каждым экраном вы все больше погружаетесь в манящий мир ландшафтной архитектуры Карин Гокс. Все эффекты анимации ненавязчивы и плавны, но горизонтальная гармония немного нарушена в разделе, где отображаются работы Карин — вот где вертикальная навигация берет бразды правления, пусть даже на мгновение.
Emanuele Milella
Эмануэле Милелла — креативный директор и интерактивный дизайнер с отличным сайтом-портфолио. Страницы покрыты песчаной зернистой текстурой, которая придает сайту атмосферу ретро. В разделе « Работы» появляется эффект горизонтальной прокрутки. Вы можете отслеживать, сколько проектов вы просмотрели, следя за массивными жирными цифрами, отображаемыми рядом с каждым проектом, или проверяя индикатор выполнения, расположенный под изображениями. Когда вы наводите указатель мыши на изображение, графика начинает следовать за движением курсора и поэтому искажается, хотя и не сильно. Это просто забавный элемент, который демонстрирует внимание Эмануэля к деталям.
Myles Nguyen
Содержание веб-сайта Майлза Нгуена, кажется, беспрерывно шевелится. В буквальном смысле. Эффект волнистости распространяется на весь сайт, поэтому выбор горизонтальной навигации имеет смысл. С каждым поворотом колеса мышки пользователи чувствуют, что они покоряют волны, которые приводят их прямо к примерам работ Майлза. Чтобы сделать эту в основном монохромную витрину еще более запоминающейся, Майлз добавил в содержание немного юмора, еще больше продемонстрировав свою интересную личность.
Parsons Branding
Parsons Branding — студия стратегии и дизайна бренда из Кейптауна. На их веб-сайте вы можете выбирать между бесконечной каруселью и полной сеткой проекта. Если вы выберете первое (которое установлено по умолчанию), вы сможете просматривать проекты студии, используя горизонтальную прокрутку. Как только вы найдете проект, о котором хотите узнать больше, нажмите на него, чтобы открыть кейс. И когда вы дойдете до конца исследования, загрузится еще одно, посвященное другому проекту, и так далее, поддерживая идею непрерывности, которая вездесуща на этом сайте.
Studio Björk
Веб-сайт Studio Björk — еще один яркий пример горизонтальной прокрутки, которая используется на каждой странице сайта. Этот сайт довольно минималистичный, в основном черно-белый, а более яркие цвета видны только на выставленных работах. Экран разделен на несколько частей, каждая из которых соответствует одному проекту. Под каждой картинкой есть несколько основных деталей о работе, о которой идет речь.
Ciao Bella
Чао Беллабыл создан Netflix в честь Найроби, одного из главных героев популярного шоу La Casa de Papel. Сайт заполнен фотографиями, видео, письмами и аудиоконтентом, которые люди со всего мира отправляют своему любимому персонажу. Контент отображается на всем экране, и вы можете перемещаться по нему, перетаскивая курсор в любом направлении. Когда вы найдете что-то, что хотите посмотреть, прочитать или послушать, просто нажмите. Затем вы можете перетащить указатель мыши по горизонтали, чтобы изучить контент, представленный в той же строке, и узнать, что еще фанаты и актеры сериала сказали о Найроби.
Vogue España
Интернет-издание Vogue Españaо моде 80-х представляет собой одностраничный журнал, в котором освещаются все основные модные тенденции эпохи синти-попа. Вы можете перемещаться по графическому и текстовому контенту 80-х годов с помощью горизонтальной навигации, и именно этот эффект придает всему веб-сайту особый внешний вид.
Горизонтальная прокрутка — это эффект, который может сделать просмотр страниц более увлекательным и приятным. Главное — хорошо спланировать, упростить использование, организовать контент и обеспечить постоянную видимость основной навигации. Важно, чтобы все было просто и понятно, чтобы не запутать посетителей. Но это не значит, что вам не следует экспериментировать с выбором шрифтов, цветов и захватывающих анимационных эффектов. Не будем забывать об эффекте параллакса, который так эффективно использовался на нескольких сайтах из нашего списка. Дело в том, что элементы, которые вы могли бы добавить на вертикальный сайт, могут так же хорошо работать и на горизонтальном аналоге. Не ограничивайте себя только потому, что вы выбрали менее популярный тип навигации. Сделайте свой веб-сайт эстетически приятным, добавьте привлекательный и информативный контент и, прежде всего, убедитесь, что ваш проект приносит пользу вашим пользователям.
0 комментариев