Share
Cette année a été une brillant année en web design. Plus que toute autre année peut-être, d’énormes progrès ont été accomplis vers la maturation du terrain. Examinons quelques-uns de ce à quoi nous pouvons nous attendre pour l'avenir de la conception Web en tant qu'industrie..
Toute personne qui conçoit des sites Web depuis plus de quelques années a sans aucun doute été confrontée au problème de l’écart entre la conception et le développement en amont. Les concepteurs vivent dans des outils similaires à Photoshop ou Sketch, et les développeurs vivent dans leurs éditeurs de texte..
Ce flux de travail commun a vu de nombreuses tentatives de solution, notamment avec SiteGrinder, Dreamweaver et, plus récemment, Adobe Muse. Toutes ces solutions viennent avec leurs problèmes et n'ont pas été largement adoptées. Dans la plupart des cas, les développeurs front-end sont restés fidèles à leurs anciennes méthodes ou les concepteurs se tournent davantage vers le navigateur pour travailler, réduisant ainsi l'écart. Cependant, des outils sont en train d’émerger pour combler cet écart. Avec des outils tels que Macaw sur le point de sortir, le chemin qui reste à parcourir pour combler le fossé laborieux entre conception et développement front-end est en train d'être raccourci..
Ces outils bénéficieront grandement du fait que les tendances en matière de conception de sites Web ont adopté des couleurs plates avec très peu de texture et des éléments répétés de manière prévisible. Ces éléments sont beaucoup moins complexes que les éléments d'interface utilisateur fortement dépendants de l'image d'il y a quelques années. Il est donc primordial d'introduire des outils pour générer automatiquement bien organisé, sémantique code.
Vous ne verrez pas une bonne implémentation JavaScript "WYSIWYG" - pour des choses autres que les widgets configurables de base. La raison principale en est que HTML et CSS sont à la fois déclaratif langues, alors que JavaScript est un langage de programmation. Le "canvas" pour JavaScript est par nature l'éditeur de texte. Le canevas pour HTML est par nature le document.
Au fur et à mesure que les navigateurs adoptent les normes les plus récentes, que les téléphones deviennent plus rapides, que les écrans deviennent plus imprévisibles et que les conceptions continuent à s’affaiblir, nous verrons une réduction significative du nombre d’images graphiques utilisées sur un site donné. Les éléments d'interface utilisateur complexes continueront de s'appuyer de plus en plus sur CSS, et pour les choses qui ne peuvent pas être accomplies uniquement avec CSS, SVG sera adopté. La principale exception est la photographie. Les grandes photos continueront de réclamer plus d'espace de conception, car les concepteurs s'appuient davantage sur des images transparentes orientées contenu pour définir l'expérience et la narration..
Avec de beaux exemples qui apparaissent partout, SVG bat son plein. Nous pouvons nous attendre à voir des outils plus accessibles pour créer de l’infovis de base sans trop de soucis (pensez à ChartJS), ainsi que des outils plus éducatifs exposant le potentiel et le pouvoir de SVG à des personnes qui n’avaient pas été incitées à explorer SVG auparavant..
Bien que la spécification flexbox soit toujours dans un no man's land non normalisé, le support est relativement bon sur tous les navigateurs. La flexbox n’a pas été largement adoptée (pour des raisons inconnues), mais nous pensons que cette année, il y aura une poussée vers son adoption..
Chez Tuts +, nous sommes suffisamment excités pour que nous publions bientôt un guide expliquant comment créer des présentations avec flexbox, alors faites bien attention à cela.!
Vous ne verrez pas encore l'adoption complète d'une solution d'image de la rétine. Bien que Webkit ait implémenté srcset, les développeurs résolvent déjà ce problème de manière légèrement moins efficace ou robuste. Tandis que srcset sera éventuellement nécessaire, car la plupart des développeurs continueront à résoudre les problèmes en enregistrant des images plus volumineuses avec des qualités inférieures.
Rappelez-vous quand la parallaxe est devenue la prochaine chose chaude? Tout le monde a commencé à l'utiliser de manière nouvelle et excitante (ainsi que épuisée et effrayante) pour raconter des histoires et améliorer l'expérience utilisateur. Vous pouvez vous attendre à ce que les gens adoptent largement la vidéo en tant qu'élément de conception (par exemple, en tant qu'arrière-plan) plutôt que comme une simple expérience de "théâtre" comme nous l'avons vu avec YouTube..
Cela a été autour depuis longtemps (il y avait même des incarnations construites dans Flash), mais n'a pas gagné en popularité avec les entreprises commerciales jusqu'à récemment. Cela entraînera des défis intéressants, notamment liés à la taille et à la compression de la vidéo..
Bien que les animations ne soient certainement pas une nouveauté, la popularité des éléments et des logos animés augmente. L'animation SVG peut être réalisée avec CSS, et des projets comme Iconic, qui ont multiplié par 6 leur cible sur Kickstarter, ainsi que des efforts en open source tels que Climacons, laissent entrevoir une nouvelle tendance dans la conception d'expérience utilisateur basée sur des animations de chemins vectoriels..
Icônes SVG animées avec CSS par Noah Blon (@noahblon) sur CodePen
L'année dernière, des émissions de télévision telles que Breaking Bad ont offert une deuxième expérience d'écran, offrant aux téléspectateurs un moyen plus profond d'interagir avec le contenu..
En 2014, alors que l'adoption du mobile continue d'atteindre les marchés bas de gamme et que la connectivité augmente dans l'omniprésence, l'adoption du deuxième écran s'étendra à davantage d'émissions et de formats. Cela peut même inclure la synchronisation de votre téléphone avec votre ordinateur tout en regardant une émission sur Hulu ou la connexion de votre tablette à votre console de jeu pour offrir des informations secondaires sur ce que vous voyez ou ce que vous faites à l'écran..
Il s’agit d’un domaine de conception très différent de celui du contenu de base. Les concepteurs devront examiner plus avant le concept d'attention secondaire, remplissant le rôle "d'accompagnement" au lieu de "scène principale".
"Responsive" est clairement la méthodologie dominante dans la conception Web. Malgré la manière dont vous gérez le besoin croissant de conceptions et de codes indépendants de la technologie, les utilisateurs continuent de passer à davantage de périphériques dans davantage d'environnements. Jusqu'à présent, l'optimisation mobile était une entreprise non triviale. rendre vos livrables de code aussi petits que possible, construire des requêtes de média, atteindre des taux de tramage élevés, utiliser la mise en cache et bien d'autres considérations nécessitent un investissement important.
En 2014, de nombreux frameworks adopteront pleinement la méthodologie mobile first et atténueront les obstacles à la création de sites hautement performants pour toutes les technologies. Des bibliothèques de code telles que Hammer.js, Zepto.js, Animate.css et bien d’autres ont mené la charge. Comme nous l’avions déjà fait avec l’adoption du secteur HTML5 par le secteur, nous espérons également voir adopter à l’échelle du secteur les meilleures pratiques en matière d’optimisation mobile qui vont au-delà de la simple écriture de requêtes CSS..
Medium, Svbtle, Editorually, exposure.so, Ghost et de nombreux autres outils et plates-formes ont inauguré une nouvelle ère de contenu Web axée uniquement sur la présentation de l'écriture dans un format hautement accessible, sans béquilles de conception. Ce changement se poursuivra, influençant le développement de thèmes, les nouveaux services Web et "l'esthétique de la conception collective".
Vous pouvez également consulter les idées récentes de Collis sur les tendances en matière de conception Web pour l'année à venir: prévisions 2014 pour la conception Web.
Vous pensez que les tests inter-navigateurs sont en voie de disparition? Avez-vous une idée d'une nouvelle tendance à la hausse? Partagez-le dans les commentaires!
Accentsconagua