On ne peut qu'imaginer à quel point il était difficile de pratiquer le design web à une époque où tout semblait si nouveau - à l'époque de Netscape Navigator et de Microsoft FrontPage. En regardant en arrière, cela semble être une période si archaïque dans l'histoire du web design. Il était presque impossible de concevoir quelque chose de créativité suprême et intelligente. À l'époque, vous étiez vu comme créatif si vous aviez un arrière-plan clignotant affreux ou des barres de défilement colorées.

Il n’y avait pas beaucoup de flexibilité quand il s’agissait du détail du design. Bon nombre des dispositions étaient les mêmes et imitaient ce qui était vu dans les magazines et les journaux. Je veux dire, pensez-y: il n'y a pas si longtemps, nous avons finalement trouvé un moyen d'utiliser des polices décoratives en ligne. Auparavant, tout était Arial, tout Verdana et tout Times New Roman - en 2012, pouvez-vous imaginer vivre cette vie?

Les tables étaient la norme et celles-ci n'étaient pas trop souples. En parlant de flexibilité, comment avons-nous jamais vécu sans réactivité? Si vous vouliez concevoir un site Web il y a quelque temps, vous étiez pratiquement obligé de travailler avec ce que vous aviez. Personne ne s'est plaint à l'époque, mais Dieu merci pour la technologie progressive.

À présent…

Avance rapide jusqu'à maintenant, et nous pouvons pratiquement tout concevoir comme nous voulons, dans tout ce que nous voulons. Ces types de choses ne devraient pas être pris pour acquis, mais comme de nouvelles générations de concepteurs et de développeurs entrent dans ce domaine, c’est à peu près tout. Je veux dire, il y a quelques mois à peine, nous avons enfin pu utiliser des feuilles de style pour créer des coins arrondis - à quelle vitesse oublions-nous?

Les progrès de la conception de sites Web peuvent contribuer à l’évolution constante de différents langages de codage. Vous ne pouvez pas avoir un excellent design Web sans un excellent développement Web (et vice versa). Et on pourrait penser que les choses se sont peut-être compliquées en ce qui concerne le développement, mais il est évident que les choses se sont simplifiées. Jetez un coup d’œil, par exemple, à HTML4 ou à HTML5.

L’un des plus grands développements en matière de développement et de conception a été l’utilisation de jQuery. C'est probablement l'une des librairies JavaScript les plus faciles à apprendre et à coder, ainsi que quelques trucs intéressants. Si vous concevez librement et / ou désirez des interactions vraiment géniales entre votre design et votre public, vous utiliserez probablement jQuery.

Les plugins

jQuery ne se limite pas à la conception de votre projet, mais vous offre une expérience utilisateur plus fluide. Lorsque des sites Web doivent être conçus pour accueillir votre public et faciliter leur déplacement, cela est important. La conception est également importante si vous utilisez beaucoup de créativité avec votre conception. Fondamentalement, il ne devrait y avoir aucune limite quant à la création de sites Web, et jQuery est extrêmement utile pour vous assurer que vous n'êtes pas pris au piège dans des boîtes. Alors, que peut faire jQuery pour vous? Vous trouverez ci-dessous quelques excellents plug-ins qui vous permettent d'être aussi créatifs et novateurs que possible dans le développement Web.

jQuery grille mobile

Certains concepteurs aiment ouvrir le programme de leur choix et concevoir ce qu'ils veulent sans aucun scrupule. Il y en a d'autres qui aiment avoir une méthode à leur folie. Les normes de conception Web suggèrent d'utiliser des grilles pour nous aider à concevoir des sites Web performants et efficaces, surtout si vous concevez un blog ou un site de nouvelles. Une deuxième partie de cette idée est que la grille doit être souple et réactive. Ce plugin vous permet de créer plusieurs colonnes avec (et sans) réactivité.

ArcText.js

Il y a quelques années à peine, si vous vouliez avoir de très bonnes polices et effets typographiques sur votre site Web, vous deviez ouvrir le programme de conception de votre choix et créer un graphique avec ce que vous vouliez. C'était une bonne technique jusqu'à ce que les gens réalisent que ce n'était pas le plus flexible, et ils ne se sont pas bien comportés avec l'optimisation des moteurs de recherche. Grâce aux progrès et à la technologie, nous sommes en mesure d’utiliser des polices décoratives en ligne. Non seulement cela, mais avec ce plug-in, nous pouvons leur ajouter un style qui ne serait pas disponible en dehors de Photoshop.

Déménagements

Une tendance courante dans la conception de sites Web modernes est la capacité de faire bouger les choses. Il est presque impossible de visiter un site Web et de voir des images statiques - presque tout le monde utilise un curseur d'image sous une forme ou une autre. Bon nombre de ces curseurs sont automatiques et modifient les images en fonction d'une période spécifique. Il n'y a rien de mal à cela, mais comment pouvez-vous adopter un tel concept et le rendre plus grand pour l'expérience utilisateur? Ce plug-in Fancy Movies semble avoir compris cela en laissant les spectateurs contrôler la diapositive, pas seulement en cliquant sur la flèche suivante, mais en appuyant confortablement sur les touches fléchées de leurs claviers.

FitText

La typographie dans la conception est extrêmement importante. Les concepteurs Web ont besoin de pouvoir utiliser toutes les polices de leur choix, puis de les assembler comme bon leur semble. À travers des choses comme Cufon et CSS, c'est possible, mais la réactivité d'un site Web revêt une importance majeure. Si votre conception ne peut pas être flexible, elle est presque inutile et l'une des principales parties des sites qui doivent être réactives est la typographie. FitText permet à vos en-têtes et à votre texte de remplissage d'être parfaits, peu importe la taille de la fenêtre ou l'appareil utilisé pour vérifier votre site Web.

Hover Zoom

La manière dont certains éléments réagissent aux interactions sur un site peut avoir un impact (négatif et positif) sur la manière dont les téléspectateurs y réagissent. La fonctionnalité de vol stationnaire est une interaction simple qui se déroule toujours. Lorsque vous placez votre souris sur une image ou même un lien, il est presque courant que cet élément fasse quelque chose; et plus la réaction sera bonne, mieux les gens réagiront. Ce plug-in est destiné aux images qui, lorsqu'elles sont survolées, effectuent un zoom avant ou arrière et fournissent également des informations supplémentaires. Si utilisé correctement, cela peut être extrêmement efficace. Sans oublier que le design se porte bien.

jrumble

Ce que les concepteurs doivent comprendre, c'est que lorsque vous créez des sites Web, nous avons beaucoup de pouvoir. Nous pouvons amener les gens à voir ce que nous voulons qu'ils voient et à ne pas voir ce que nous ne voulons pas qu'ils voient. Les principes de conception de base, tels que l’équilibre et la hiérarchie, peuvent aider à orienter l’attention des téléspectateurs. Il y a des manières subtiles de faire cela. jRumble est plus passionné par l'idée de voir et de remarquer les choses de manière plus énergique et plus flagrante. C'est un plugin amusant et lorsqu'il est utilisé avec parcimonie, il peut être efficace dans tous les cas. Rappelez-vous juste de ne pas trop le faire.

jQSlickWrap

Créer des mises en page pour votre texte peut être une chose difficile. Il ne s'agit pas seulement des polices que vous choisissez, mais également de la manière dont vous le présentez et le rend efficace. Si vous concevez un site qui prévoit de gros blocs de texte, le configurer de manière inappropriée peut entraîner un désintéressement total de vos lecteurs. De nombreux concepteurs ont des problèmes lorsqu’ils tentent de faire interagir les images et le texte les uns avec les autres. Si vous n'êtes pas vraiment dans les blocs de texte ou si vous souhaitez que votre texte et vos images interagissent davantage, cela peut être le plug-in pour vous. Plus de lectures dans les journaux, mais plus de liberté créative.

Animation offset jQuery

Comme indiqué précédemment, les sites Web statiques ne sont plus aussi courants qu’ils l’étaient les années précédentes. De nombreuses choses contribuent à créer des sites Web dynamiques qui bougent et interagissent bien avec leurs téléspectateurs. Une chose que jQuery a ajoutée à cette conversation est la possibilité de créer d'excellentes animations et transitions d'un élément à l'autre. Ce plug-in crée une transition glissante ou progressive pour passer d'un élément à l'autre. Cela en fait un site très agréable.

Scroll-O-Rama

Avec un nom comme 'Scroll-O-Rama', vous pourriez passer ce plug-in, mais je vous conseille de ne pas le faire. Aussi amusant et génial que ce plugin est, je crois qu'il peut être rendu populaire dans le créneau à la mode des sites Web d'une seule page. Lorsque vous faites défiler des sites Web d'une seule page, vous vous attendez à quelque chose. Ce plugin permet à peu près aux titres et au texte de danser au fur et à mesure. C'est un autre plugin qui est utilisé principalement à des fins décoratives, mais si vous pouvez le saupoudrer sur votre site et l'utiliser aux bons endroits, vous pouvez jouer à ce plugin pour une force.

jQuery Shadow Plugin

Pour ajouter un peu de profondeur aux images ou aux éléments, les concepteurs aiment utiliser les ombres portées. Il existe deux méthodes courantes permettant aux concepteurs de créer des ombres et des fichiers CSS ou de créer des ombres dans leur programme de conception, et de les enregistrer en tant que fichiers transparents. La plupart du temps, cela fonctionne et parfois il peut y avoir des problèmes, mais ce qui est génial avec ce plugin, c’est qu’il vous permet d’ajouter différents types d’ombre à tous les éléments, sans avoir à les concevoir.

Slitslide

De bonnes transitions sur les sites Web constituent une expérience amusante et passionnante. Nous vous avons déjà donné un excellent plugin pour les transitions élément à élément, mais ce plugin est idéal pour les transitions de page en page. Avec ce plugin Slitslide, la page se divise, glisse et introduit de nouvelles pages directement derrière elle. Il s’agit d’un outil extrêmement dynamique qui ajoute de l’excitation et de la saveur aux sites susceptibles d’avoir besoin de ce niveau supplémentaire.

Renversé

Les info-bulles sont un élément utilisé pour de nombreuses raisons; pour attirer l'attention, ajouter des informations ou tout ce que vous pouvez y intégrer. Il agit beaucoup comme un effet de vol stationnaire, où s'il est utilisé correctement peut être extrêmement efficace. Il existe une tonne de plug-ins jQuery pour le développement et l'utilisation des info-bulles. Tipped est un plugin qui fonctionne et qui possède de nombreuses fonctionnalités, dont la plupart sont personnalisables par HTML5 et CSS, ce qui en fait une version simple et fluide.

Tubulaire

Nous pouvons tous convenir qu'un arrière-plan clignotant n'est pas là où réside la créativité. Cependant, il y a d'autres choses qui peuvent être ajoutées à votre arrière-plan pour donner un petit coup de fouet à votre site Web. Vous ne faites peut-être que de la conception et souhaitez un modèle bien organisé, mais vous voudrez peut-être quelque chose d'un peu plus dynamique. Tubular est un plugin qui vous permet d'utiliser des vidéos YouTube comme arrière-plan. Pensez aux possibilités amusantes et créatives que vous pourriez obtenir avec cela.

jmpress

Certains sites Web ou sous-sites ne sont là que pour nous donner un peu d’information. Il n'y a peut-être pas une tonne de copies et il n'y a peut-être pas une tonne de photographies, mais il s'agit néanmoins d'informations importantes. Dans de nombreuses rencontres avec ces volumes et types d'informations, nous avons l'habitude de les présenter et de les présenter sous des formes de type diaporama. Ce plugin jQuery fait penser à cela, tout en utilisant un arrière-plan infini avec de superbes animations.

jQuery Knob

Nous vivons dans un temps très visuel, où les chiffres et les informations sont plus faciles à voir qu’à réellement penser. Certains d'entre nous préfèrent même voir nos informations avant de les comprendre et de pouvoir les utiliser. Si vous avez des informations à offrir, ce plugin est idéal pour visualiser les nombres. Il s'agit d'un graphique interactif de type cadran / cercle qui fonctionne et permet aux téléspectateurs de modifier également les informations.

3d miniature

Nous avons déjà parlé de l'effet de survol de l'image et de son efficacité sur les sites Web. Eh bien, si vous voulez un peu plus de piquant pour vos images? Ce plug-in vous donne un effet de survol de l'image qui révèle des informations avec une touche 3D.

blur.js

Un bon design peut vraiment faire la différence entre un bon et un mauvais site Web. Souvent, la décision ne concerne pas le design dans son ensemble mais les petits détails; c'est pourquoi nous utilisons des info-bulles et de grands textes de titres. Ce plugin ajoute un peu plus de détails à votre site, si vous le souhaitez. Ce plug-in crée des éléments flous de type pseudo-transparents sur d'autres éléments. Ceci est un plugin décoratif, mais peut être utilisé pour en bénéficier.

Conclusion

Il existe de nombreuses manières d’améliorer votre conception Web pour la rendre fraîche et attrayante pour vos visiteurs. N'oubliez pas que vous voulez créer quelque chose qui soit non seulement créatif, mais aussi créatif et efficace. Les outils dont nous disposons actuellement sont excellents et ce qui est encore mieux, c'est que la technologie continue de croître et que de meilleures choses pour la création de sites Web nous attendent.