24 conceptions de sites Web intelligentes combinant JQuery et Illustration
Grâce à JavaScript, les mots "dynamique" et "illustration" ne s'appliquent plus exclusivement aux sites Web basés sur Flash.
Maintenant que le HTML dynamique est une réalité dans la plupart des navigateurs les plus couramment utilisés et que de nombreuses bibliothèques JavaScript sophistiquées existent pour faciliter son utilisation, les sites Web CSS peuvent reprendre une partie du crédit de rue si étroitement lié à Flash.
Parmi ces nouvelles bibliothèques JavaScript, jQuery est devenu l’une des plus largement adoptées en raison de sa facilité d’utilisation, de l’étendue de ses fonctionnalités et de son intérêt initial pour l’unicité visuelle.
Voici 24 exemples astucieux de conceptions de sites Web utilisant jQuery et Illustration .
1.Format de cinquante cinq
Caractéristiques: Modification de l'illustration de l'en-tête; plusieurs petites fenêtres de diaporama.
Description: Non seulement ce site Web contient-il beaucoup de contenu véritablement lié au design, mais jQuery est utilisé de diverses manières pour améliorer l'apparence et la convivialité du site Web. Ajoutez à cela un arrière-plan illustré changeant périodiquement et de jolies commandes d’interface circulaires et vous aurez un beau mariage de jQuery et d’illustration.
Page d'accueil avec illustration d'en-tête: 
Colonne gauche avec les balises activées sur: 
En-tête de store pour la connexion: 
2. Frozn
Caractéristiques: Coulissement vertical et horizontal.
Description: Mis à part les grands cercles colorés avec des chiffres, la caractéristique que j’ai remarquée était les images de profil illustrées. Alors, j'ai cliqué sur eux. C'est à ce moment que la magie s'est produite: ombrage vertical et horizontal des fenêtres qui a ouvert un ensemble complet d'entrées de blog avec des vidéos Vimeo intégrées. Le dégradé persistant de pied de page est un effet intéressant lorsque vous faites défiler vers le bas.
Grands cercles et illustrations de l'auteur sur la page d'accueil: 
Contenu en expansion verticale: 
Les illustrations des auteurs se développent pour révéler les entrées de blog et la vidéo: 
3. Maquette iPhone
Caractéristiques: glisser-déposer, ciblage
Description: Si vous avez déjà pensé à créer une application pour l’iPhone (et quel développeur Web ne l’a pas fait?), Alors cela pourrait être un site à consulter. Il vous permet de faire glisser et de déposer des éléments d'interface esquissés ou dessinés par ordinateur sur un contour d'iPhone dessiné ou dessiné par ordinateur. Bien qu’il s’agisse de conceptions nues, il s’agit d’une utilisation novatrice de l’illustration qui n’aurait pu être réalisée qu’avec Flash.
Éditeur iPhone dessiné par ordinateur: 
Sketched iPhone editor: 
4. Florida Flourish
Caractéristiques: Souris avec transparence, diaporama
Description: Les couleurs brillantes et les détails de l’arbre illustré sur cette page d’accueil attirent immédiatement l’attention. Cliquez sur l'une des catégories ramifiées dans l'arbre et vous obtiendrez non seulement un contenu descriptif basé sur jQuery, mais également un arbre complètement différent. Faites défiler vers le bas et vous verrez un beau diaporama centré et un pied de page qui prend le motif naturel sous terre.
Vue complète de la page d'accueil, avec grand arbre, diaporama et pied de page: 
Arbre "convivialité": 
Arbre "Flexibilité": 
5. Tea Round App
Caractéristiques: Diaporama, animation mineure, objets glissants
Description: Peut - être que c'est moi ou un signe que Apple a de brillants designers, mais j'aime les sites Web qui ont recadré des photos d'iPhone. Ce site Web est un site animé, avec un diaporama à l’écran déclenché par le passage de boutons bien conçus. Le type arrondi Helvetica se marie bien avec le design du téléphone et des boutons. Les illustrations sur le thème du thé sur la page et dans les captures d'écran de l'application lient tout.
Animations dans le graphique de l'iPhone sur la page: 
La fenêtre pop-up affiche l'écran de l'application: 
Un autre écran de l'application Tea Round montré dans le graphique de l'iPhone: 
6. Meilleur avant
Caractéristiques: Positionnement de l'écran, animation de navigation
Description: Si les sites Web peuvent prendre des stéroïdes jQuery, ce sont les liens Barry du Web. Avec tous les visuels dynamiques, ce site Web pourrait facilement être confondu avec un site Web Flash. Après une inspection minutieuse, vous constaterez que la page n'est ni Flash ni complexe du point de vue de la programmation. Mais la prise de conscience que pas de trace de Flash existe restera gravée dans votre psyché.
Le menu d'accueil: 
Plus de choses entre accolades: 
Sous-menu et portfolio: 
Animation
Trouver un design de site Web pour lequel DHTML a été choisi pour créer l'animation est toujours une surprise. La meilleure partie pour moi est que je peux le voir sur mon iPhone. Je suis sûr que ce n'est pas la raison principale pour laquelle les concepteurs ont choisi d'ignorer Flash et ses outils conviviaux pour l'animation. Je ne sais pas combien ils ont compté sur jQuery pour coder leurs animations, mais ils devaient avoir des tendances sadiques pour le faire.
7. Oeil de Tori
Caractéristiques: oiseaux en origami qui volent horizontalement.
Description: Qui pense utiliser l’origami sur une page Web? Et qui pense utiliser des oiseaux en origami bleu pour représenter les tweets, plutôt que l'illustration bleue standard? Et qui pense à animer les tweets? La réponse à ces questions est, les créateurs de Tori's Eye. Construisez un site Web avec l'une de ces fonctionnalités et vous aurez quelque chose de complètement original. Pour ces créateurs, toutes ces fonctionnalités ne suffisaient pas. Ils ont pris la décision contre-intuitive de faire toute l'animation sans Flash!
Origami Twitter oiseaux volant dans un paysage: 
8. sacs
Caractéristiques: Diaporama et animation de pied de page avec des icônes à une couleur.
Description: L'utilisation de jQuery est la plus évidente lorsque le diaporama est déclenché par un clic dans la zone de navigation. L'espace blanc expansif, le type noir et les illustrations d'icônes assorties en font un site Web attrayant. Mais voilà, une animation dans le pied de page n'a pas cessé de fonctionner depuis votre arrivée. Faites un clic droit sur les animations noires et vous découvrirez le secret du film de longue durée du site: Sprites et DHTML.
Page d'accueil avec beaucoup d'espace blanc: 
Grandes icônes disséminées dans le contenu du diaporama: 
L'animation du pied de page s'exécute en continu, quel que soit l'endroit où vous vous trouvez sur le site: 
9. Kidd 81
Caractéristiques: animation d'en-tête voyageant horizontalement.
Description: Les dessins aux couleurs de l’hiver, aux couleurs vives, attirent immédiatement votre attention et le design a une continuité jusqu’au pied de page. À l'instar de certains de ces sites Web qui utilisent jQuery pour animer des objets, les images fluides semblent impossibles à distinguer de Flash à première vue. La cerise sur le gâteau, cependant, est le draggable "Wow! Je ne peux pas croire que vous pouvez faire glisser ces "icônes".
Animations d'en-tête de page d'accueil: 
Un pied de page avec le même thème illustré: 
La section de magasin a le même caractère et les mêmes couleurs: 
Défilement vertical
Quelques outils JavaScript sont capables de déclencher un défilement régulier entre les sections d'une page. Bien entendu, jQuery est plus que capable de réaliser cet effet, et au moins quelques sites Web de cette section empruntent cette voie. Le défilement dynamique est un effet intéressant, mais combiné à des illustrations créatives et détaillées, cette fonctionnalité n’est qu’une partie de la vue d’ensemble.
10. Tomas Pojeta
Caractéristiques: Ciel, océan, sous l'eau.
Description: À l’instar de quelques autres sites Web de cette section, Pojeta adopte un motif qui va de la haute altitude à la surface. Le haut du site se trouve dans l’espace extra-atmosphérique, avec sa fusée et son singe très détaillés. Faites défiler vers le bas et vous verrez des extraterrestres et des ballons dans la basse atmosphère. Plus bas, il y a un morceau de terre ressemblant à une île de Pâques au milieu de l'eau, qui mène à une vue sous-marine avec un sous-marin. Chaque illustration correspond et les transitions sont à peu près aussi transparentes que possible.
Fusée et singe dans l'espace: 
Ile de Pâques et toucan: 
Sous-marin sous-marin: 
11. Morphix
Caractéristiques: Espace, ciel, terre, sous terre.
Description: Morphix commence aussi par une action atmosphérique supérieure, mais passe ensuite à la terre plutôt qu’à la mer et se termine par une coupe souterraine. Le style est évidemment différent, mais l'illustration de chaque couche couvre la largeur de la page, comme la dernière, créant un sentiment d'horizon. Et encore une fois, le passage du ciel au sous-sol se fait en douceur, surtout avec le défilement dynamique.
Ambiance supérieure, avec portfolio: 
Au niveau du sol, avec des vaches et des gratte-ciel: 
Souterrain, avec racines et marmotte: 
12. GANDRWeb
Caractéristiques: Diverses infographies.
Description: Contrairement aux deux sites précédents, celui-ci utilise des infographies à la place des personnages, des paysages et des arrière-plans. Chaque section de la page explique le graphique ci-joint. Le bas de la page comporte, sans surprise, un grand formulaire Web. Un site Web exclusivement axé sur les ventes et qui utilise beaucoup d'illustrations est rare. Les transitions déclenchées par jQuery ajoutent de la brillance au message.
Infographie expliquant les avantages et les prix: 
Infographie expliquant le processus de conception: 
Formulaire Web: 
13. Orman Clark
Caractéristiques: Nuages, objets terrestres et volants
Description: Comme les deux premiers sites Web de cette section, le site Web d’Orman Clark commence par le ciel, mais la grande page reste dans le ciel nuageux jusqu’au pied de page. Une différence notable entre cette page et la plupart des autres dans cet article est la position fixe de la navigation principale et de l'illustration. Ceci est accentué par la starburst en haut de l'arrière-plan qui met en évidence l'œuf flottant. Le site Web propose également un diaporama jQuery bien intégré pour le portefeuille.
Ballon, vache et oeuf: 
Diaporama du portefeuille Biplan et jQuery: 
Formulaire Web, pied de page et navigation fixe: 
14. Dreamerlines
Caractéristiques: Divers collages.
Description: Le site Dreamerlines adopte une approche discrète. Comme GANDRweb, chaque section possède un graphique distinct qui est lié aux sections voisines uniquement par des espaces blancs. Chaque section est cependant unique, détaillée, colorée et saisissante. De lourdes illustrations, un gros texte en gras et une couleur de fond donnent le ton.
Gros texte pour commencer: 
Collage In-Your-Face: 
Formulaire Web entouré de nombreux éléments visuels: 
15. Snack social
Caractéristiques: Fil, oiseaux et sol.
Description: Le motif du ciel ne vieillit jamais et les concepteurs peuvent choisir parmi un grand nombre de palettes pour colorer leur horizon. L'horizon de Social Snack est un peu flou, avec un vert et un brun prononcés. Les oiseaux sont assis sur des fils qui sont dispersés verticalement tout au long de la page pour séparer les sections. Le site Web se termine par un toit. Bien que le blog ne présente pas de défilement fluide sur jQuery, l’en-tête illustré avec des personnages mignons mérite d’être mentionné.
La palette de couleurs et le motif d'oiseau en haut: 
Les cadres pour les photos de l'équipe sont accrochés à un fil d'oiseau: 
Personnages mignons dans la section blog: 
Diaporama
L'une des utilisations les plus fréquentes et les plus reconnaissables de jQuery concerne le diaporama vénérable. Chaque fois que vous voyez du contenu glisser sur l'écran après un clic de souris, et qu'aucun Flash ne peut être trouvé, c'est probablement jQuery. Vous trouverez des diaporamas sur les sites Web d'entreprise, les pages de destination, les portefeuilles d'agences, les sites de commerce électronique, partout. Ils sont omniprésents. Voici quelques exemples de diaporamas qui prennent vie grâce à des illustrations nettes.
16. GoSiteWave
Caractéristiques: Diaporama vertical avec navigation horizontale et icônes attrayantes.
Description: Le diaporama à défilement vertical, associé aux icônes et aux images, est la véritable histoire ici. Les diaporamas doivent défiler horizontalement, de sorte que le contraire est frappant. Les bleus et les oranges brillants, les boutons arrondis et le fond sombre avec des traînées de lumière placées habilement ajoutent à l’effet. Bien sûr, si les icônes n'étaient pas si bien faites, le site Web n'aurait peut-être pas fait la différence.
Graphiques de diapos de la page d'accueil: 
Un autre diaporama: 
17. Sketchen
Caractéristiques: Diaporama horizontal de films Flash, avec contenu pré-chargé, gros texte et illustrations.
Description: Si vous aimez le jaune, vous allez adorer ce site. Ce diaporama présente de grandes illustrations recadrées qui conservent le fond jaune intact. Un diaporama supplémentaire dans la fenêtre "lightbox" contient le portfolio. Ai-je mentionné que les illustrations étaient grandes? Ils prennent beaucoup de place, mais ils sont très bien faits. La couleur d'arrière-plan et les images sont accentuées par les éléments de navigation verts et blancs, et le contraste net garantit que la facilité d'utilisation n'est pas un problème.
Mégaphone: 
Pied de page blanc: 
Pomme: 
Portefeuille en "lightbox": 
18. Formez cinquante-cinq
Caractéristiques: Défilement vertical fluide, contenu de blog généré dynamiquement, diaporama, mise en évidence de la navigation principale,
Description: Ne vous laissez pas tromper par la palette de couleurs monochromes et les simples dessins au trait. Ce site d'agence a tout. Un défilement vertical fluide, un pied de page fixe qui recouvre le contenu, un diaporama de portfolio, un contenu de blog incorporé de manière dynamique, etc. Toutes ces fonctions vont de pair avec le nombre total d'illustrations aléatoires et le fait qu'elles Tout est assez drôle. Dans ce sens, une visite sur le site n'est pas complète sans échantillonnage de la vidéo hilarante "About".
Beaucoup d'illustrations dans l'écran de démarrage
Les polices correspondent au style d'illustration
Diaporama de portfolio
Les titres de navigation du pied de page sont mis en surbrillance lorsque vous faites défiler
Défilement horizontal
Contrairement au diaporama, qui se limite généralement à une section d'un site Web, le défilement horizontal (tel que défini ici) se produit au niveau du navigateur, ou du moins le ressent. Le défilement horizontal dynamique n'a pas autant d'exemples de défilement vertical; mais comme vous le verrez, les concepteurs qui pensent horizontalement ont une grande imagination.
19. Serial Cut
Caractéristiques: Grandes illustrations pour portfolio; défilement horizontal et vertical.
Description: Ce diaporama est vraiment conçu pour occuper la zone de visualisation du navigateur. Vous ne pouvez pas faire défiler à gauche ou à droite, mais est-ce important? Les illustrations et la conception sont si remarquables que le développeur aurait pu avoir une navigation croisée, à l'envers ou toute autre méthode de navigation non intuitive, et les gens passeraient encore leur temps à déterminer ce qui allait arriver. Ce qui aide vraiment, c'est la taille de l'icône de navigation et le fait que les photos et les images du portefeuille occupent la totalité de l'écran.
Les trains: 
Pochette CD: 
3-D guy avec des chaussures: 
20. Tyler Finck
Fonctionnalités: Transitions horizontales, avec des animations créées en arrière-plan.
Description: Voici un excellent exemple d'utilisation de l'image d'arrière-plan pour créer un effet d'animation pour le défilement horizontal dynamique. La palette de couleurs est principalement noire et blanche. Les polices de caractères sont en gras et présentent des arrière-plans épais en blocs à certains endroits, et le type basé sur l'image présente un aspect sommaire. L'ensemble complet fonctionne bien.
Une page d'accueil minimaliste: 
Bio: 
L'argent tiré: 
Autre fonctionnalité
Certains sites Web utilisant jQuery ne sont pas facilement catégorisables. Ils peuvent avoir des caractéristiques peu communes ou utiliser jQuery de manière subtile ou adapter une technique courante de manière inhabituelle. Le préchargement, l’achèvement automatique du texte, l’intégration et le retrait progressifs du texte, ainsi que la superposition de texte sur les images sont quelques-unes des astuces trouvées dans le dernier ensemble de sites Web de cette collection.
21. étiquette orange
Caractéristiques: pré-chargement de l'image.
Description: Le préchargement de l’image est l’étendue de l’utilisation de jQuery par Orange Label. Au fur et à mesure que vous défilez vers le bas, les éléments du portefeuille sont ajoutés à la page (avec un graphique en rotation indiquant qu'ils sont préchargés). Du point de vue de la convivialité, cette fonctionnalité pratique empêche la page de charger automatiquement le contenu en bande passante. L'illustration en haut est grande, colorée, très détaillée et délicieuse.
L'illustration: 
Illustration agrandie: 
Article de portefeuille et pied de page: 
22. Finder Icône De Soie
Caractéristiques: achèvement du texte.
Description: Tapez le nom d'une icône et ce site trie ses icônes en fonction des résultats possibles de ce que vous avez tapé jusqu'ici. La qualité des icônes est plutôt bonne et le service est assez pratique dans l'ensemble. Parce que le design est vraiment axé sur les résultats de recherche, il n’ya guère de distraction visuelle, ce qui est un gros avantage.
Vue par défaut: 
Résultats de la recherche pour "light": 
23. Vyniknite
Caractéristiques: Fades.
Description: Ce site commence par une belle illustration de pissenlit, une bonne mise en page et une belle sélection de caractères. La seule action jQuery qui se produit est la disparition progressive de la navigation dans les onglets. Un autre petit coin de paradis est la façon dont les tiges de pissenlit chevauchent les onglets actifs et inactifs. Et si vous regardez de près le fond, vous verrez des tourbillons de vent élaborés accompagnant la faune flottante.
Pissenlits à gogo: 
24. Agence Halo
Caractéristiques: Diaporama automatique avec illustration de fond; texte sur les images.
Description: Arrière-plans, arrière-plans, arrière-plans. Naviguez sur ce site et vous trouverez une variété de décorations pleines d'illustrations 3D colorées. Un portfolio impressionnant est accessible via un diaporama jQuery sur la page d'accueil. Vous pouvez également trouver des informations sur chaque élément de la section portfolio (ou «work») à partir de la superposition de texte de la vignette.
Page d'accueil avec diaporama: 
Le portefeuille recouvre le texte sur les images: 
Un autre fond coloré: 
Écrit exclusivement pour WDD par Maurice Wright. Il est développeur web et concepteur et créateur de Moluv.com . Depuis 2000, Moluv est une source d’inspiration pour les créatifs qui recherchent les meilleurs sites Web sur Internet.
Comment jQuery a-t-il changé la façon dont vous concevez vos sites Web? S'il vous plaît commenter ci-dessous ...