15 tendances de la conception Web à surveiller en 2012

Jusqu'à présent, l'année 2011 a été marquée par d'incroyables changements dans le design et la technologie Internet. Le développement Web est devenu un sujet beaucoup plus simple à aborder, sans parler des innombrables bibliothèques open source utiles pour rationaliser le processus. Et pourtant, il semble que la communauté mondiale du design est loin de jeter l'éponge.

Je souhaite présenter 15 idées qui ont connu une croissance très rapide au cours de la dernière année. Ces tendances englobent les techniques de conception Web et graphique qui joueront probablement un rôle important à l’horizon 2012. Vous en avez probablement déjà vu quelques-unes représentées dans bon nombre de vos sites préférés en ligne..

Heureusement, les méthodes pour implémenter ces fonctionnalités deviennent plus faciles à comprendre et beaucoup plus minces en code.

1. Conception d'interface réactive

L'expérience de l'utilisateur moyen est peut-être l'aspect le plus important à prendre en compte lors de la conception d'un site Web. Vous voulez que les éléments de page répondent rapidement aux entrées clavier / souris et se comportent comme prévu. Certains exemples peuvent inclure des menus déroulants latéraux, des menus déroulants et des fenêtres contextuelles..

Y compris les bibliothèques JavaScript célèbres telles que MooTools et jQuery, il est devenu beaucoup plus facile d’animer ces fonctionnalités et bien plus encore. La plupart des navigateurs modernes supportent ce code et se dégradent même gracieusement lorsque les scripts ne sont pas disponibles. En fin de compte, vous voulez que l’utilisateur se sente à l'aise lorsqu’il interagit avec n’importe où dans la conception.

De même, vous devez prendre en compte la saisie de formulaire et la vérification des données. Sur de nombreuses pages d'inscription, vous recevrez de petites réponses lorsque vous travaillerez dans chaque zone de saisie. Vous pouvez automatiser la recherche d’adresses de messagerie valides, dupliquer les noms d’utilisateurs et même vérifier les entrées de mots de passe. Cela fera gagner du temps à l'utilisateur et fournira un guide pratique tout au long du processus d'inscription.

2. Appareils mobiles à écran tactile

Au cours des deux dernières années, il est devenu évident que les smartphones sont de plus en plus prisés, même par les passionnés de technologies. Mais seulement depuis 2011, nous avons assisté à une explosion de sites mobiles et de modèles spécifiques aux mobiles..

La popularité des appareils iPhone et iPad, ainsi que des téléphones Android, signifie que les visiteurs interagiront pleinement avec vos pages au moyen de commandes tactiles. Cela doit devenir une considération réaliste avec chaque maquette de conception. Les tendances en matière de conception de sites Web mobiles ont montré que la création d'un thème mobile entièrement séparé donne souvent les meilleurs résultats. De cette façon, vous pouvez garder tout le contenu dynamique en place sur votre mise en page principale tout en servant une version allégée du site aux utilisateurs mobiles..

3. tonnes de cadeaux!

Qui peut dire qu'ils n'apprécient vraiment pas les téléchargements gratuits? Les concepteurs de sites Web partagent leur contenu en ligne depuis des années, mais ce n’est que récemment que cela est devenu une tendance très populaire parmi les artistes numériques. Quelques communautés ont été spécialement conçues pour offrir des téléchargements gratuits aux concepteurs Web et graphiques..

Deux de mes favoris personnels sont Download PSD et Designmoo, qui sont tous les deux mis à jour fréquemment par des membres de qualité supérieure. De plus, les archives de Hongkiat Freebies offrent une multitude de bonnes choses à découvrir. Jamais auparavant, rien de plus facile de télécharger des interfaces Web, des mises en page, des logos, des bannières et pratiquement tout autre type de fichier PSD / AI!

Quelques téléchargements intéressants

Vous trouverez ci-dessous quelques bonus intéressants à vérifier plus tôt en 2011. Et si vous pensez que cette liste contient des fichiers géniaux, attendez que 2012 soit écoulé.!

Ensemble Mini Web UI

Dark Mini Music Player

Tags coulissants

Dark Photo Slider

Zones de recherche

Login in / Signin Form

Login Modal Box

Formulaire de connexion propre

Tables de tarification

Barres de chargement minimales

Attachement Pop-up

4. Normes HTML5 et CSS3

Ces deux nouveaux archétypes de conception ont accumulé un nombre croissant de visiteurs tout au long de l'année 2011. Les concepteurs de sites Web sémantiques attendent depuis des années pour créer des conceptions CSS uniquement, rendant les coins arrondis et les ombres portées. De plus, le W3C a beaucoup progressé dans le soutien des navigateurs les plus populaires..

Je ne vois que de bonnes choses pour l’avenir du développement Web HTML5 / CSS3. Les concepteurs front-end sont souvent négligés dans le domaine actuel, mais ils jouent un rôle si important dans l'ensemble du processus de composition. Essayez de ne pas vous glisser dans une «étiquette» d’ensemble basée sur les techniques que vous connaissez et que vous pratiquez quotidiennement. Nous proposons un guide d'initiation au codage HTML5 / CSS3 pour les débutants si vous avez besoin de rattraper votre retard..

Le respect de ces nouvelles normes facilitera également le développement en JavaScript et jQuery. Les développeurs publient et partagent déjà leur code de projet HTML5 / CSS3 en ligne, et si cela continue, nous en verrons sûrement beaucoup plus dans l'année prochaine..

5. Rubans et bannières

Bien que cette technique de conception ne soit pas exactement “Nouveau” il n'a jamais vraiment traversé le courant dominant jusqu'à tout récemment. Vous avez probablement déjà vu des exemples de rubans de coin, de barres de navigation de bannière et de petits insignes de ruban. Ces tendances ont probablement explosé en raison de l’accumulation massive de didacticiels détaillés que l’on peut trouver tout au long de Google..

Les concepteurs de sites Web sont plus compétents ces jours-ci pour lancer leurs propres blogs afin de partager des informations. Maintenant, des techniques simples peuvent être facilement échangées entre les concepteurs pour dupliquer les effets les plus populaires. Vous pouvez même télécharger des fichiers PSD gratuits pour vous épargner les efforts.

6. Thèmes WordPress Premium

La version finale de WordPress 3.0 incluait une foule de fonctionnalités attendues depuis longtemps, telles que des types d'articles personnalisés et des images d'articles uniques. Pourtant, les changements les plus profonds que j'ai vus viennent des boutiques de développement WordPress, spécialisées dans les thèmes WP premium..

Après avoir acheté un tel thème, le processus d’installation est semblable à un autre. Cependant, il est maintenant possible d'inclure des fonctionnalités de plug-in personnalisées, des thèmes enfants, de nouveaux menus d'administration et bien d'autres fonctionnalités directement à partir du thème! WooThemes, ElegantThemes et Rocket Themes sont quelques marques qui me caractérisent par-dessus tout. Leur qualité est irréprochable et je sens que leurs développeurs vont au-delà pour créer les meilleurs modèles et les menus d'administration les plus intuitifs..

En ce début d’année 2012, j’imagine que WordPress deviendra encore plus facile à utiliser. Cela signifie plus de thèmes de haute qualité à publier et plus de blogs incroyables à lancer.

7. Magazines en ligne

En parlant de thèmes WordPress, nous devrions également évoquer le succès rapidement adopté des magazines en ligne. Ces sites Web ne sont pas si différents d'un blog WordPress générique, à l'exception de la structure générale et de la mise en page. Vous pouvez repérer ces magazines plus grands grâce à la présentation de leur page d'accueil et à la collection d'auteurs écrivant pour le site..

Lorsque les magazines commenceront à être utilisés en ligne, ils deviendront une source de revenus pour de nombreux écrivains. Accordé un sujet tel que «conception de sites Web» cible un créneau plus petit que, par exemple, les jeux ou l’économie. Mais le fait que nous voyions plus de magazines de design en ligne que d’imprimés montre que le monde se dirigera peut-être dans les années à venir.

8. Ombres portées faciles

En tant que facette de CSS3, il est maintenant plus facile que jamais pour les concepteurs d'implémenter une ombre portée n'importe où sur la page. Le texte et les éléments de style de boîte ont été dotés de propriétés respectives pour restituer des effets d'ombre nets.

La syntaxe texte-ombre est très facile à mémoriser et suit en tant que boîte-ombre. Les images étant désormais inutiles pour rendre ces effets, les développeurs Web peuvent développer davantage ces idées de base..

9. Typographie dynamique

Les polices font partie intégrante de la tradition de la conception Web. Les polices les plus remarquables, notamment Arial, Helvetica, Georgia et Trebuchet MS, existent depuis des années. Bien qu'ils continuent de servir un objectif profond dans les standards Web, il existe de nombreuses options alternatives pour la typographie avancée de pages Web..

Typekit, par exemple, ne nécessite que quelques lignes de code à inclure dans votre document. Ensuite, vous pouvez spécifier les noms de police à inclure et les ajouter à votre CSS. La meilleure partie de cette technique est qu'elle repose principalement sur JavaScript. Par conséquent, l'utilisateur final n'est pas obligé d'installer les polices..

Une autre alternative est Google Web Fonts qui se comporte de manière similaire à Typekit. Je recommande aux concepteurs intéressés de consulter la requête multimédia @ font-face de CSS3, car ils vous donnent beaucoup plus de créativité. Ce code peut être utilisé pour importer un .ttf ou .otf fichier de police de votre serveur Web et incluez-le en tant que police de style utilisable! Avec autant de systèmes alternatifs utilisés pour la création de polices dynamiques, je m'attends à ce que 2012 compte une vague d'innovation et de talents en matière de conception dans ce domaine..

10. Diaporamas de la galerie d'images

Avec la popularité de jQuery qui a suivi, j’ai repéré de plus en plus de diaporamas dans des présentations Web. Les galeries sont parfaites pour présenter un aperçu rapide du contenu d'une page intérieure. Cela pourrait être un ensemble d'entrées de portefeuille, de photographies, de billets de blog avec des images en vedette, de captures d'écran de démonstration, etc..

Lorsque vous considérez les nombreuses animations de glissement et de fondu uniques, il n’a jamais été aussi facile de créer un diaporama rapide pour votre page d’accueil. Je suis convaincu que 2012 verra une légère hausse de ces tendances, et pas seulement entre les concepteurs. Les entreprises Web de logiciels et d'applications Web utilisent des diaporamas sous forme de didacticiels guidés pour afficher des captures d'écran et des fonctionnalités uniques..

11. Modal Popup Boxes

Je pense que les boîtes modales sont encore relativement nouvelles sur Internet, étant donné qu'elles apparaissent dans les logiciels de bureau et les applications mobiles depuis des années. Le but d'une fenêtre modale est d'offrir du contenu de boîte (tel que l'enregistrement ou la connexion de l'utilisateur) en haut de la page en cours sans charger de nouvelle page..

La plupart des scripts de la galerie d'images open-source utilisent un type d'effet lightbox dans lequel l'arrière-plan s'estompe plus sombre que la zone contextuelle. J'apprécie vraiment cette fonctionnalité chaque fois que je la vois, même si elle n'a pas encore été adoptée par beaucoup. Et bien que les boîtes modales soient sexy et épurées, elles peuvent également être très difficiles à coder et à fonctionner correctement.

Pour trouver des idées pour vos propres sites Web, consultez certaines des communautés de partage d’activités sociales les plus populaires. Reddit et Digg sont les deux premiers qui viennent à l’esprit, car ils comportent tous deux des boîtes modales de registre / connexion avec une disposition typique. De plus, les effets d'interface utilisateur pour Google+ offrent une quantité considérable de fonctionnalités modales..

12. Listes inspirantes

Des collections d'éléments de liste sont apparues depuis les tout premiers jours de la conception Web. Alors que nous entrions dans le nouveau siècle, les concepteurs ont commencé à utiliser des listes HTML ordonnées et non ordonnées pour héberger des menus de navigation. Mais de nos jours, les listes peuvent et sont utilisées pour beaucoup plus.

Dans la plupart des thèmes de blog, je trouve que la barre latérale entière est chargée de listes! Sans parler des concepteurs qui ont créé de superbes styles CSS pour les listes dans leurs articles. Nous avons couvert des styles de liste inspirants dans un autre article publié plus tôt cette année, ce qui pourrait vous donner plus de perspicacité. En prévision de 2012, je m'attends à des exemples très créatifs, peut-être à égalité avec la présentation personnalisée de Flowapp pour les tâches et tâches à effectuer..

13. Miniatures d'images générées

Dans l'univers Web, nous pouvons convenir que le contenu est roi. Mais la plupart des concepteurs conviendront également qu'une page de texte vierge devient vite ennuyeuse. Les images peuvent ajouter cette épice supplémentaire si vous savez les saupoudrer doucement. Une de ces méthodes consiste à utiliser des vignettes dynamiques pour fournir des aperçus pour chaque page ou article..

Aujourd'hui, les blogs continuent d'adopter la tendance de l'image en vedette, alors pourquoi ne pas appliquer également les vignettes générées à votre thème? Celles-ci attirent souvent mon attention sur le titre de l'article et aident à casser une page remplie de liens de texte.

Comme autre exemple, Dribbble fournit une liste complète de miniatures dans la galerie pour chaque prise de vue. Dans un tel tableau, il est très facile de voir chaque vignette et de faire défiler pour trouver ce que vous recherchez. Cette tactique a attiré l'attention de toute la communauté du design! Euh, au moins les membres de Dribbble au mieux. Je ne peux que m'attendre à ce que 2012 continue de voir ces idées s'appuyer sur de tels exemples du passé.

14. Icônes surdimensionnées

Cette tendance unique provient en partie de la popularité des icônes de Mac OS X. Lorsque les programmeurs ont commencé à lancer des sites Web pour leurs applications Mac, nous avons trop souvent constaté les énormes tailles représentées dans la stratégie de marque. En conséquence, cette tendance a également été reprise par les développeurs iOS et s'inscrit désormais dans la culture du design moderne..

Il est difficile de prédire comment ces tendances se maintiendront à l'approche de 2012. D'un côté, ces icônes peuvent être maladroites et occuper plus de place que nécessaire. Pourtant, nous ne sommes même pas près de faire face à une pénurie d'applications iOS / OSX et les concepteurs élaborent toujours des spécifications relatives aux icônes au pixel près. Sans oublier que les concepteurs Web incluent maintenant des icônes surdimensionnées dans presque toutes les marques de page! C'est un bon moyen d'attirer l'attention directe de vos visiteurs et de donner un nom à votre entreprise..

15. Hyperliens exagérés

Les liens d'ancrage font certainement partie des cinq éléments les plus importants de tout site Web. Celles-ci ont évidemment parcouru un long chemin depuis les années 1990 et les tendances populaires en matière de conception ne se sont développées que de manière exponentielle. Il semble que nous entrions dans une ère où le design exagéré prime.

Jetez un œil à quelques exemples de liens tirés de Patterntap pour voir s’il y en avait qui sautaient aux yeux. Il y a tellement d'idées incroyables pour la conception d'hyperliens, à la fois dans les effets standard et les effets de survol. Les coins arrondis CSS3, les ombres de texte et les familles de polices personnalisées ajoutent encore plus d'idées géniales! Un de mes exemples préférés est celui de SimpleBits, qui utilise une courte animation dynamique sur chacun de leurs permaliens d’entrée de blog..

Conclusion

Ces idées ne sont que quelques-unes des tendances les plus populaires que j'ai remarquées et qui ont gagné en priorité tout au long de 2011. Une excellente conception de sites Web a toujours pour objectif de garder la priorité sur les intentions des utilisateurs. Il est peu probable que ces philosophies diffèrent à partir de 2012, mais la manière dont nous construisons les présentations et les données actuelles change toujours. Faites-nous savoir vos pensées ou questions dans la zone de discussion des commentaires.