Masters 1987 es una empresa de producción de eventos con sede en Los Ángeles. Su sitio web ejemplifica a la perfección el poder de la tipografía sans serif en mayúsculas, que se utiliza en varios tamaños en todas las páginas. El fondo es negro, mientras que la tipografía es mayoritariamente blanca, aparte de algunas palabras resaltadas en naranja. Los colores y los tipos de letra son sencillos, lo que dio a los diseñadores la posibilidad de aplicar diversos efectos y jugar con los elementos del sitio, especialmente el cursor. El movimiento del puntero circular refleja el de un cometa: en cuanto se mueve en cualquier dirección, deja una estela animada que se desvanece cuando se detiene el movimiento. El puntero incluye el efecto de modo de fusión que lo hace parecer una especie de foco. No sólo invierte los colores de los elementos sobre los que se cierne, sino que también los anima. Esto es particularmente obvio cuando se coloca el cursor sobre las imágenes.
Le Cantiche 1320 es un notable sitio web de inspiración renacentista. Se creó para conmemorar el 700º aniversario de la finalización de la obra fundamental de Dante, La Divina Comedia. Todo el sitio es una obra de arte por derecho propio. Está repleto de imágenes que representan el viaje de Dante por el Infierno, el Purgatorio y el Paraíso. Las animaciones y los efectos de transición, junto con el efecto de navegación horizontal, hacen que el contenido parezca más envolvente y el viaje más vívido. El cursor es muy prominente y está diseñado como un gran círculo rojo. Dentro del círculo, verás un texto que te anima a realizar algún tipo de acción, como desplazarte con el ratón o arrastrar el puntero para explorar más contenido. La inserción de instrucciones en un cursor es una excelente manera de hacer que la exploración del sitio web sea más intuitiva para el usuario y de ayudarle a buscar su camino con mayor facilidad. Además, el cursor del sitio web de Le Cantiche 1320 cuenta con el efecto de mezcla. Al situarlo sobre las imágenes, la zona sobre la que se pasa el cursor se convierte en un negativo.
Qode Kaleidoscope es una cuidada colección de temas de Qode Interactive que destaca la importancia de los colores en el diseño web moderno. La pantalla de carga incluye una ilustración de un ojo y una miríada de pequeñas piezas de colores que recuerdan a las vidrieras de los caleidoscopios. El cursor de esta parte del sitio se parece al mencionado ojo. Pero, al moverlo por la página, el ojo se divide en varios trozos. La pupila sigue siendo el puntero principal del ratón, mientras que la córnea, la conjuntiva y otras partes se quedan atrás. En cuanto se detiene el movimiento, todas las partes se unen y vuelven a formar el ojo completo. Los elementos dispersos en forma de cristal siguen magnéticamente el movimiento del ratón, animando la página. Puede hacer clic en cualquier lugar que desee para acceder a la vibrante página web y disfrutar de sus atractivos efectos visuales, así como de los atractivos efectos de movimiento y transición que le permiten experimentar WordPress a través de una lente diferente.
Pet Stop Boys (cuidadin los que han vivido su juventud por mediados 80 /principios 90 que no se trata de los Pet Shop Boys) es un servicio de control de plagas situado en el sur de Inglaterra. Su sitio web es una verdadera rapsodia de colores. Está repleta de impresionantes efectos de animación y microinteracciones, que presentan el servicio de control de plagas de una forma muy imaginativa. Los efectos de desplazamiento traen varios tipos de bichos a la ventana gráfica, lo que hace que la experiencia de navegación sea un poco más interesante. El cursor tiene inicialmente la forma de una salpicadura ondulante de color, pero cuando empiezas a moverlo, se disuelve en varias manchas de color. Lo que hace que este puntero sea especialmente divertido es el efecto de mezcla que se le ha añadido, que define cómo se mezclará el elemento sobre el que se pasa el cursor con su fondo. Incluso cuando el cursor se divide en varios puntos más pequeños, cada uno de ellos incluye el modo de mezcla. Cuando se pasa el ratón por encima de varios elementos de distinto color al mismo tiempo (por ejemplo, si se coloca parcialmente el ratón sobre una letra, pero también se cubre una parte del fondo y otro elemento abstracto), el cursor los colorea a todos en distintos tonos. El efecto de mezcla es una gran manera de dar nueva vida a tu contenido con un simple hover y presentar los elementos mostrados de varias maneras diferentes y creativas.
Jigsaw es una unidad dentro de Google que se basa en la tecnología para investigar problemas globales, como el tráfico de personas, el terrorismo, la ciberdelincuencia y muchas otras amenazas sociales. The Current es la publicación de Jigsaw que garantiza el acceso a la información, en particular a todos aquellos que viven en sociedades opresivas. En su segunda edición, que ha ganado el prestigioso premio Webby, abordan el tema de la supremacía blanca violenta. A primera vista, la sección superior de la página de inicio parece de color blanco. Pero al desplazar el cursor, se ve una ilustración de un niño con los brazos extendidos, junto con varios pares de manos más. El puntero revela partes de la imagen a su paso, pero cuando el movimiento se detiene, todo vuelve a ser blanco salvo la zona en la que has detenido el ratón. Esta es la única sección del sitio en la que el cursor interactúa de esta manera con el contenido, lo que garantiza una impresionante introducción al tema.
Samuel Day es un diseñador afincado en Berlín. Su idiosincrático sitio web ofrece una visión envolvente de su mente creativa. Las impresionantes animaciones que se activan con el desplazamiento te llevan a un peculiar viaje lleno de impresionantes ilustraciones que te cuentan la historia de Samuel. El cursor tiene forma de ojo y en ocasiones incluso parpadea. Todos los personajes ilustrados del sitio tienen los ojos diseñados de la misma manera. Cuando llegues a la sección en la que pasa el tren, te darás cuenta de que los pasajeros encarnan realmente los proyectos de Samuel. Al pasar el ratón por encima, el globo ocular se convierte en un logotipo animado de la empresa en cuestión, invitándote a hacer click en él y explorar el proyecto en profundidad. A medida que el color del fondo cambia, también lo hace el color del cursor. Este sitio web es un gran ejemplo de cómo un buen diseño puede hacer que el cursor forme parte de la historia creativa que ilustra la atención al detalle de un diseñador, así como sus habilidades.
Groupe Castor & Pollux es un grupo de comunicación digital. En la página en la que hablan de su RSC (Responsabilidad Social Corporativa), se puede ver un bonito puntero de gran tamaño en acción. El cursor redondo es azul, pero hacia los bordes, la intensidad del color se desvanece ligeramente, haciendo que el puntero parezca tener un ligero efecto de degradado. Cuando lo colocas sobre el texto principal, se vuelve enorme y aparece una flecha hacia abajo dentro del círculo, indicándote que continúes desplazándote para descubrir más sobre la experiencia de RSC de la empresa. En otras secciones, el cursor colorea de otro modo la tipografía negra en vibrantes degradados rosas y morados. De nuevo, el texto aparece en su interior, invitando a leer más sobre un tema concreto. Al aplicar estos efectos, los diseñadores no sólo se aseguraron de dirigir la atención de los usuarios a elementos específicos del sitio, sino que también mejoraron la UX general al proporcionar señales claras que indicaban lo que el usuario debía hacer a continuación. También añadieron algunas interacciones puramente decorativas. Por ejemplo, cuando el cursor se coloca sobre una imagen, ésta se desplaza ligeramente y luego empieza a seguir el movimiento del ratón. En otras páginas del sitio, el diseño del puntero es igualmente interesante. Por ejemplo, en la página "Agence", el cursor sobredimensionado convierte la tipografía negra en letras perfiladas. También revela algunas imágenes de fondo que sólo pueden verse dentro de los bordes del cursor. Fuera de los bordes del puntero, el fondo sigue siendo blanco.
The New Company es una agencia de diseño estratégico con sede en San Francisco y Los Ángeles. Su sitio web está repleto de bellas imágenes que muestran la creatividad del estudio. Las fotos están cuidadosamente dispuestas sobre el fondo blanco y su vitalidad rompe la calma del fondo neutro. Otro elemento especialmente destacado del sitio es el cursor rojo. Su color es llamativo e intenso, lo que permite que destaque incluso cuando se coloca sobre fotos coloridas. El puntero tiene forma de círculo, pero cuando lo muevas, verás que se divide en dos partes, con un círculo más pequeño delante y otro más grande siguiéndolo con un efecto de movimiento muy dinámico. En cuanto el movimiento se detiene, los círculos vuelven a fusionarse. Mientras esté situado en el deslizador de la parte superior, el cursor se transformará en flechas triangulares a medida que lo desplace hacia cualquiera de los bordes de la pantalla, invitándole a explorar todas las diapositivas. Esta interacción aparentemente pequeña es, de hecho, una forma estupenda y discreta de hacer la exploración del sitio web más intuitiva y de garantizar una mejor experiencia del usuario en su sitio. El puntero es, por defecto, de gran tamaño. Pero en algunas secciones, al situarlo sobre las imágenes mostradas, su tamaño disminuye. En la mayoría de los sitios, suele ocurrir lo contrario, pero The New Company decidió cambiar un poco las cosas y sorprender a los espectadores. Los efectos Hover son atractivos, con vídeos destacados que se reproducen en el momento en que se pasa el ratón por encima de las fotos.
Glenn Catteeuw es un diseñador multidisciplinar y director de arte. El fondo de su sitio web, de una sola página, está diseñado como un lienzo gris granulado que transmite una sensación cinematográfica. El contenido es en blanco y negro. También hay muchas formas geométricas perfiladas que se mueven ligeramente al pasar el ratón, despertando de su estado inactivo por defecto. El cursor tiene forma de flecha hasta que se coloca sobre una imagen. Entonces se convierte en una forma ondulada que añade un efecto negativo a una pequeña parte de la foto. Al mover el cursor, la mancha negativa sigue su movimiento. Este detalle inusual amplifica el ambiente alternativo del sitio y hace que las presentaciones de los proyectos sean más efectivas y llamativas.
Julie Guzal es una freelancer francesa. El sitio web de su cartera tiene un aspecto minimalista, que comienza con la sencilla introducción de Julie sobre un fondo blanco liso. La tranquilidad del diseño se ve suavemente sacudida por el cursor que deja un rastro burbujeante a su paso, con puntos animados que se evaporan lentamente de la pantalla. El rastro del cursor está coloreado en un elegante tono verde intenso, rompiendo el carácter monocromático de la diapositiva de apertura. En cuanto se empieza a bajar por la página, los puntos danzantes desaparecen de la vista, dejando la simple flecha blanca en la pantalla. La simplicidad de este sitio complementa maravillosamente los vibrantes ejemplos de las obras de Julie que aparecen en la ventana de visualización con cada nuevo desplazamiento, lo que les permite captar toda la atención del espectador.
Aunque la mayoría de las veces tienen un tamaño reducido, los cursores del ratón ofrecen mucho espacio para expresar tu creatividad y mejorar la experiencia del usuario en tu sitio. Por supuesto, siempre se puede optar por la opción de diseño de flecha o mano de toda la vida. Pero los usuarios aprecian los diseños innovadores de los punteros, que no sólo complementan la estética de un sitio, sino que hacen que toda la presentación sea más memorable.
Hemos reconocido esas cualidades en los sitios que figuran en nuestra lista y hemos disfrutado explorando su contenido con algunos punteros de ratón realmente magníficos. Como puedes ver, en muchos casos los punteros del ratón se convierten en elementos cruciales de un sitio, asegurando una experiencia de navegación fácil, intuitiva e interesante.
Esperamos que estos diseños de cursor le resulten tan divertidos, geniales y bonitos como a nosotros, y que los utilice como inspiración a la hora de idear un puntero de ratón innovador para su propio sitio web o su próximo proyecto. Puedes optar por soluciones gráficas interesantes, utilizar el cursor para encender los cambios de color en los deslizadores o añadir atractivos efectos hover a tu contenido. Las posibilidades son infinitas. Al fin y al cabo, un cursor bien diseñado es, por sí solo, un gran complemento para un proyecto, pero puedes mejorar aún más el atractivo de tu sitio web si consigues implementar el cursor en la experiencia general y utilizarlo tanto para divertir como para guiar a los visitantes.
Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.
Nos vemos en la próxima. 👌
