10 примеров оригинального дизайна курсора мыши

До этого момента людям приходилось использовать для ввода данных и работы с ними клавиатуру, что могло быть утомительно и зачастую отнимало много времени.

В 1960-х Дуглас Энгельбарт создал первую в мире мышь, и это навсегда изменило способ взаимодействия людей с компьютерами.

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

Стив Джобс использовал наклоненный курсор в первом Mac от Apple, сделав его полностью черным с белым контуром. Microsoft представил аналогичный курсор в своей операционной системе Windows 98, но раскрашен он был наоборот — контур стал черным, а внутренняя заливка — белой.

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

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

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

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

Мы рассмотрим следующие сайты:

1. Pest Stop Boys
2. Masters 1987
3. Qode Kaleidoscope
4. Le Cantiche 1320
5. The Current: Violent White Supremacy
6. Samuel Day
7. Groupe Castor & Pollux
8. The New Company
9. Glenn Catteeuw
10. Julie Guzal

1. Pest Stop Boys

Pest Stop Boys — это расположенная в Южной Англии компания, которая оказывает широкий спектр услуг по борьбе с вредителями. Ее веб-сайт — настоящая рапсодия красок. Он наполнен потрясающими анимационными эффектами и микровзаимодействиями, и представляет информацию о службе в очень творческой форме.

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

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

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

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

2. Masters 1987

‍Masters 1987 — компания по организации мероприятий из Лос-Анджелеса. Ее веб-сайт отлично демонстрирует, насколько эффектными могут быть прописные буквы без засечек, которые можно увидеть на всех страницах в разных размерах.

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

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

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

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

3. Qode Kaleidoscope

‍Qode Kaleidoscope — это тщательно подобранная коллекция тем от Qode Interactive. Идея сайта заключается в том, чтобы подчеркнуть важную роль цветов в современном веб-дизайне. Экран загрузки включает изображение глаза и множество крошечных цветных деталей, напоминающих узоры в калейдоскопе. Здесь курсор тоже выглядит как глаз.

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

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

4. Le Cantiche 1320

‍Le Cantiche 1320 — впечатляющий веб-сайт, вдохновением для которого послужила эпоха Возрождения. Он был создан к 700 годовщине со дня написания “Божественной комедии”, ключевого произведения Данте.

Сайт сам по себе можно считать произведением искусства. Он наполнен иллюстрациями, на которых можно увидеть путешествие Данте через Ад, Чистилище и Рай. Анимационные эффекты и переходы, а также горизонтальная прокрутка делают контент еще более захватывающим, а путешествие — интересным.

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

Добавление внутрь курсора инструкций — эффективный способ сделать процесс знакомства с сайтом интуитивно понятным и помочь пользователям с легкостью ориентироваться на нем.

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

5. The Current: Violent White Supremacy

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

The Current — публикация Jigsaw, задача которой состоит в обеспечении доступа к информации, в частности, всем тем, кто живет в государствах, где систематически нарушаются права граждан. Во втором выпуске, получившем престижную награду Вебби, затрагивается тема превосходства белых.

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

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

6. Samuel Day

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

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

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

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

7. Groupe Castor & Pollux

‍Groupe Castor & Pollux — агентство цифровых коммуникаций. На странице, посвященной корпоративной социальной ответственности, вы можете увидеть красивый курсор большого размера. Он окрашен в синий цвет, который становится бледнее ближе к краям и потому выглядит как градиент.

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

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

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

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

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

8. The New Company

‍The New Company — дизайн-агентство, офисы которого находятся в Сан-Франциско и Лос-Анджелесе. Веб-сайт наполнен красивыми изображениями, показывающими, насколько креативно студия подходит к решению задач. Расположение фотографий на белом фоне тщательно продумано, а их яркость контрастирует со спокойствием нейтрального фона.

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

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

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

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

9. Glenn Catteeuw

Glenn Catteeuw — многопрофильный дизайнер и арт-директор. Фон его одностраничного сайта выглядит как зернистый серый холст, что позволяет создать атмосферу старого кино.

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

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

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

10. Julie Guzal

‍Julie Guzal — дизайнер-фрилансер. Ее сайт-портфолио выглядит минималистично. Первое, что видит пользователь — простое приветствие на белом фоне.

Умиротворенность интерфейса немного нарушает курсор, который оставляет след из анимированных точек, медленно испаряющихся с экрана. Они окрашены в элегантный темно-зеленый оттенок и выделяются на фоне монохромных элементов.

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

Заключение

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

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

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

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

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

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