Catégories
Plugin et site web

10 interfaces utilisateur gratuites intégrées avec CSS et JavaScript

L'objectif de l'intégration est de familiariser les nouveaux utilisateurs avec une interface. Cela vient dans de nombreux styles différents, et il n'y a pas de bonne façon de le faire. Mais si vous étudiez comment les sites et les applications intègrent, vous pouvez trouver des idées pour votre propre travail.

Et avec ces interfaces utilisateur CSS et JavScript gratuites, vous aurez de nombreuses idées qui vous offriront à la fois de l'inspiration et des extraits de code pour vous aider à démarrer.

La boîte à outils du concepteur Web

Téléchargements illimités: 1 000 000+ modèles Web, thèmes, plugins, éléments de conception et bien plus encore!

1. Glissières de carrousel

L'intégration du carrousel rotatif est extrêmement populaire sur les mobiles où l'espace d'écran est limité. Mais cet effet peut tout aussi bien fonctionner sur les sites Web sur lesquels vous avez besoin de diffuser rapidement des informations.

Découvrez cette démonstration de diapositives de carrousel créée par Nick Wanninger pour voir ce que je veux dire.

Il s'agit d'un exemple d'intégration entièrement gratuit créé à l'aide de Flickity et d'un code CSS de base. Cela fonctionne pour les mobiles et les ordinateurs de bureau, c'est donc un excellent choix si vous avez besoin d'une solution réactive.

2. React Daily UI

Comme une simple conception pratique, Jack Oliver a créé ce stylo React Daily UI à partir de zéro. Et c'est l'une des expériences d'intégration les plus élégantes que j'ai vues.

L'interface comporte du texte factice car elle n'est pas destinée à une utilisation pratique et réelle, mais elle est très propre et devrait laisser suffisamment de place pour s'adapter à presque tout dans la page.

Une chose à noter est que je ne pouvais pas faire fonctionner cela sur mobile avec des balayages et il semble ne reconnaître que les taps pour le moment. Mais pour une solution en un seul clic, c'est vraiment sympa.

3. Écrans d'intégration

Non seulement ce stylet dispose d'une interface incroyable pour l'intégration, il a également des animations personnalisées pour démarrer.

Le développeur Jeff Ham connaît son chemin autour d'une interface et a créé cet écran d'intégration immaculé. Il s'appuie sur JavaScript pour créer les animations «écran suivant» ainsi que les événements de bascule pour les clics / taps des utilisateurs.

Un bon ajout à cette interface est le bouton bleu suivant en bas. Cela permet à l'utilisateur d'avancer écran par écran avec un grand CTA bien en vue. Je parie que cela augmenterait le nombre total de personnes qui se convertissent et améliore la qualité de l'expérience dans son ensemble.

4. Boardal

Cet extrait Boardal est plutôt unique car ce n'est pas quelque chose que vous voyez souvent.

Il utilise une fenêtre modale avec un contenu d'intégration pour aider l'utilisateur à parcourir le site plus rapidement. Il s'agit d'une conception personnalisée créée uniquement à des fins de test, et c'est l'un des moyens les plus intéressants d'améliorer le processus d'intégration.

Notez que cela fonctionne mieux sur le bureau car il repose sur l'effet modal (pas idéal pour les petits écrans).

Donc, si vous aimez le design et que vous souhaitez améliorer facilement l'intégration de votre site, essayez Boardal.

5. Visite guidée

L'intégration est généralement considérée comme un processus étape par étape présentant de nouvelles pages et fonctionnalités à l'utilisateur. Mais personnellement, je trouve les visites guidées beaucoup plus utiles.

Si vous voulez un simple extrait pour commencer, cette visite guidée est parfaite. Il s'appuie sur des composants Bootstrap et utilise de petites info-bulles avec des boutons «suivant» pour faire avancer la visite.

L'utilisateur peut fermer la visite à tout moment s'il s'énerve ou s'il ne s'en soucie plus. Cela en fait une visite facultative, donc moins de gens seront ennuyés par le processus.

Dans l'ensemble, c'est ma méthode préférée d'intégration, même si cela prend un peu plus d'efforts pour la configurer. Mais cette démo vous donne au moins un modèle pour commencer.

6. Visite du matériel

Une autre méthode de visite est la visite à progression automatique qui met en évidence des fonctionnalités spécifiques.

Le meilleur exemple que j'ai trouvé est ce stylo créé par Gregor Adams. Il est basé sur les consignes relatives aux matériaux et utilise des cercles en surbrillance pour présenter des parties de la page. Cette technique est parfaite si vous avez des interfaces très complexes avec un lot des fonctionnalités.

En assombrissant la page entière, vous mettez l'accent sur une zone à la fois. Cela attire immédiatement l'attention de l'utilisateur, ce qui est exactement ce que vous devez faire pour une bonne intégration.

Je sais que cela ne convient pas à tous les sites Web, mais si vous aimez l'interface, je vous recommande vivement de l'essayer.

7. Intégration de l'application Android

Les applications mobiles nécessitent généralement le processus d'intégration plus que les sites Web. Il est courant que les concepteurs d'interface utilisateur mobile entassent vraiment des fonctionnalités sur un écran plus petit, ce qui peut submerger les utilisateurs sans introduction guidée.

Ce guide d'intégration de Mat Swainson est un exemple petit mais éloquent de ce qui peut être fait pour les applications pour smartphone.

Il est basé sur un modèle Android, mais ce n'est certainement pas le seul style que vous pouvez utiliser. J'aime aussi la façon dont il prend en charge le balayage natif, qui fonctionne même dans les navigateurs Web mobiles.

De plus, le petit indicateur de progression en haut est une belle touche. Certainement une page d'intégration simple mais qui vaut la peine d'être sauvegardée si vous êtes à la recherche d'inspiration.

8. Ionic Intro

Vous pouvez faire beaucoup avec Ionic et ce stylo en est un excellent exemple.

Le développeur Clifford Fajardo a créé une intro ionique à bord fonctionnant uniquement sur le framework JavaScript. Il prend en charge toutes les interactions mobiles comme les tapotements, les balayages et prend même en charge les options de tapotements doubles si vous voulez cette fonctionnalité.

Ionic est principalement utilisé pour le développement mobile, et il fonctionne également très bien pour les sites Web mobiles. Je ne peux pas dire que cet écran d'intégration conviendrait à tous les sites Web, mais c'est un choix solide si plus de 50% de votre audience provient du mobile.

9. Forme verticale

Avec une légère animation d'interface utilisateur de gelée et un vrai design simple, cette forme verticale est un régal unique.

Il utilise pleinement les propriétés CSS flex avec quelques animations JavaScript et CSS personnalisées. Certes, je trouve le contenu un peu mince, donc il n'offre pas grand-chose en termes d'intégration détaillée.

Cependant, vous pouvez prendre cette interface et vraiment vous l'approprier sans trop d'effort, donc cela laisse beaucoup à l'imagination.

10. Info-bulle sur la visite guidée

Voici un autre exemple de visite guidée, mais celui-ci utilise une boîte à info-bulles complète fixée sur la page.

Si vous extrayez l'extrait, vous verrez qu'il n'est intégré à aucune interface spécifique. Il s'agit plutôt d'une info-bulle flottante contenant des conseils et des étapes de progression pour l'utilisateur.

La combinaison de cette interface utilisateur avec un certain type de script de positionnement d'infobulle fixe vous permettrait de déplacer facilement cette chose autour de votre interface avec des info-bulles pointant vers toutes vos fonctionnalités principales. Ce modèle nécessitera une réelle personnalisation pour le faire fonctionner, mais pour une interface utilisateur simple, il est beau.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *