20 tendances les plus en vogue qui façonneront la conception Web à venir 2016

Alors que le temps avance chaque année, de nombreuses nouvelles tendances en matière de design se profilent à l’horizon. Le domaine de la conception Web évolue constamment avec de nouveaux outils, de nouveaux flux de travail et de meilleures pratiques pour créer des mises en page utilisables..

Il est difficile de prédire quelles tendances exactes attireront la plus grande attention. Pourtant, l’histoire récente montre un ensemble de tendances qui se développent comme une traînée de poudre. J'ai organisé 20 tendances uniques qui ont gagné du terrain par rapport à 2015 et se poursuivront probablement jusqu'en 2016.

1. Application Sketch pour la conception d'interface utilisateur

Sketch remplace rapidement Photoshop pour toutes les tâches de conception d'interface utilisateur, allant de wireframes basse fidélité à maquettes haute fidélité & design d'icônes.

Sketch App est une application pour Mac uniquement conçue spécialement pour les concepteurs Web et mobiles. Il offre un environnement de travail plus fluide pour concevoir des éléments vectoriels pour toute interface, mais conserve également de nombreuses fonctionnalités que vous attendez de Photoshop, telles que les effets de texte et les styles de calque..

Bien qu'il n'y ait aucune preuve que Sketch sera un jour publié pour Windows, il reste un choix précieux pour les utilisateurs d'OS X. Le flux de travail simplifié et l’étiquette de prix moins chère font courir à Adobe un bon rendement. Si Sketch continue de fournir la meilleure expérience de conception d'interface utilisateur, il continuera certainement de croître jusqu'en 2016 et au-delà..

2. IDE basés sur un navigateur

Les IDE de bureau existent depuis des décennies avec des options allant de Notepad ++ à Xcode et Visual Studio. Un IDE facilite l'écriture de code avec des suggestions et une coloration syntaxique (entre autres fonctionnalités).

Mais traditionnellement, les IDE ont été publiés sous forme d'applications de bureau. Au cours des dernières années, nous avons assisté à une augmentation spectaculaire du nombre d'EDI en nuage basés sur un navigateur. Celles-ci ne nécessitent aucun logiciel autre qu'un navigateur Web, ce qui permet aux développeurs d'écrire du code à partir de tout ordinateur disposant d'un accès Internet..

Les IDE en nuage fonctionnent davantage comme des applications Web dans lesquelles vous pouvez enregistrer des extraits de code sur votre compte pour le partage ou le stockage personnel. CodePen est l’un des plus populaires IDE avec la prise en charge de HTML / CSS / JS avec un prétraitement personnalisé comme Jade / Haml et LESS / SCSS.

Mozilla Thimble est un autre IDE pour les développeurs débutants qui souhaitent apprendre à coder. De plus, Codeply est idéal pour tester des infrastructures sensibles telles que Bootstrap ou Zurb's Foundation sans avoir à télécharger de fichiers..

3. Free Sass / SCSS Mixins

Les pré-processeurs sont à la mode depuis des années, mais ce n’est que récemment que le grand public est devenu assez courant pour se sentir omniprésent dans tout le domaine de la conception et du développement de sites Web. De nos jours, il semble étrange d’écrire du CSS à la vanille quand Sass / SCSS peut fournir tellement plus.

Un avantage est un nombre croissant de bibliothèques Sass mixin. Les mixins simples sont comme des extraits de code ou des fonctions de base permettant de générer du code répétable en CSS. Bien que vous puissiez toujours écrire le vôtre, de nombreux développeurs ont eu la gentillesse de publier des mixins gratuits en ligne..

Certains mixins entrent dans des bibliothèques comme Bourbon alors que d'autres peuvent être des éléments autonomes. Essayez de faire une recherche dans GitHub pour les mixins Sass / SCSS pour voir ce que vous pouvez trouver..

4. Disposition des cartes

Les présentations de cartes de sites Web ont été popularisées par Pinterest il y a quelques années et sont depuis devenues une tendance pour les pages Web riches en contenu. Des plugins gratuits comme jQuery Masonry peuvent être utilisés pour imiter ce style de mise en page avec des cartes animées pour différentes hauteurs et largeurs..

Il est préférable d’utiliser une présentation de carte sur les pages contenant de nombreuses données devant être numérisées. La page d'arrivée de Google Now utilise une présentation de carte pour annoncer les cartes facultatives de l'application Google Now..

Vous pouvez considérer les mises en page des cartes comme des grilles plus dynamiques axées sur la minimisation du contenu au strict minimum pour répertorier davantage d'éléments. Les magazines en ligne tels que UGSMAG et The Next Web sont des exemples parfaits de la présentation de cartes utilisée pour présenter le contenu de publications récentes..

5. Vidéos Explainer personnalisées

Les grandes et les petites entreprises ont adopté la tendance des vidéos explicatives personnalisées. Celles-ci sont souvent créées avec une animation comme dans l'exemple de Crazy Egg. Mais d'autres vidéos s'appuient sur des séquences réelles comme Instagram Direct.

Le but d'une vidéo explicative est de démontrer le fonctionnement d'un produit ou d'un service. Les visiteurs peuvent parcourir une liste de fonctionnalités sans avoir la moindre idée du fonctionnement du produit. Les vidéos clarifient tout visuellement et couvrent l'essentiel en quelques minutes.

Si vous souhaitez vous essayer à la création d’un explicateur vidéo personnalisé, consultez le cours Udemy. C'est une étude approfondie axée sur les vidéos pour la conception de pages de destination..

6. Aperçus de produits en direct

La conception des pages de destination a connu une croissance incroyable découlant des vitesses plus rapides d'Internet et des capacités des navigateurs. Une tendance majeure que j'ai remarquée est l'ajout d'aperçus de produits en direct sur des pages d'accueil ou des pages de destination personnalisées..

Prenons par exemple la page produit de Slack. Il propose une visite vidéo et des graphiques vectoriels couvrant l'interface Slack. Ces aperçus de produits sont destinés à donner aux utilisateurs potentiels un aperçu du fonctionnement du produit..

Webydo est un autre exemple brillant avec une animation en direct sur la page d'accueil. Cela permet aux visiteurs de voir Webydo en action sans avoir à faire une démonstration manuelle du produit. Mais vous n'avez pas toujours besoin de compter sur des animations pour les aperçus de produits. Iconjar utilise une simple capture d'écran PNG pour montrer le produit et son fonctionnement..

7. Runners automatisés

Le monde du développement front-end a tellement changé avec quelques nouvelles meilleures pratiques pour la création de sites Web. Les systèmes de construction / construction de tâches tels que Gulp et Grunt sont utilisés beaucoup plus fréquemment pour une multitude de tâches qui nécessitaient auparavant un effort manuel..

L'automatisation est le moteur d'un redressement rapide et de la création d'un code de qualité. Les machines ne font pas d'erreur, donc plus vous pouvez automatiser en toute confiance, moins vous aurez de problèmes (en théorie).

Pour en savoir plus, consultez cet article Reddit expliquant le fonctionnement des coureurs de tâches. Ces outils exécutent essentiellement du code JS qui automatisera des parties de votre flux de travail, qu'il s'agisse de scripts JS personnalisés ou de scripts écrits par d'autres utilisateurs..

8. Applications natives JS Mobile

Je suis un grand partisan d'utiliser les bons outils pour le poste. Dans le cas du développement d'applications mobiles, cela signifie Java pour Android, Objective-C / Swift pour iOS.

Mais tout le monde ne veut pas apprendre une nouvelle langue uniquement pour créer une application mobile. Heureusement, il devient plus facile pour les applications natives d'être créées et compilées avec d'autres bibliothèques telles que NativeScript ou React Native.

L’écart pour devenir programmeur d’applications mobiles se réduit avec la possibilité de créer des applications mobiles via JavaScript. PhoneGap est encore une autre option basée sur le code HTML / CSS / JS.

Bien que le processus de création varie considérablement, JS devient rapidement une solution pour les développeurs qui souhaitent créer des applications mobiles sans apprendre une nouvelle langue..

9. Outils de collaboration pour la conception

La messagerie instantanée et la discussion de groupe existent depuis plus de 10 ans. Cependant, ces ressources reposent traditionnellement sur le texte en clair avec une capacité de joindre des fichiers.

Une nouvelle tendance émergente est la possibilité de partager des documents de conception en direct dans des applications de chat. Notable est un exemple où des annotations et des commentaires peuvent être superposés sur un document. Cela donne aux concepteurs un moyen propre de partager le travail directement avec tous les membres d'une équipe..

Slack est l'application de chat la plus populaire à l'heure actuelle, qui prend en charge de nombreuses fonctionnalités similaires. La base d'utilisateurs croissante de Slack a été catégorique sur la création d'extensions qui améliorent considérablement les capacités de Slack et s'intègrent à d'autres produits tels que Hangouts, MailChimp et même WordPress..

10. Cadres frontaux réactifs

Les frameworks frontend tels que Bootstrap existent depuis des années et continuent de s'avérer utiles pour des projets personnels et professionnels. La conception réactive s'est imposée dans les frameworks et a créé une demande de code frontal au lieu de simplement backend (Django, Laravel, etc.).

En 2016, je pense que nous en lirons beaucoup plus sur les frameworks frontaux réactifs et leur valeur dans les projets Web. De nombreux développeurs attendent avec impatience la sortie de Foundation 6 et la version v1 publique de Bootstrap 4..

Parmi les autres infrastructures moins connues que vous pourriez essayer, citons Gumby et Pure CSS..

11. Une plus grande attention sur la conception UX

Le domaine de la conception d’expérience utilisateur continuera à se développer rapidement et de plus en plus de concepteurs et de développeurs en prendront acte. La conception de l'interface utilisateur fait partie de la conception de l'expérience utilisateur, mais ce n'est pas l'objectif final. L’UI est un moyen de parvenir à une fin, la fin étant une expérience utilisateur fantastique.

Il y a à peine 5 ans, je connaissais à peine UX ou son application à la conception d'interfaces. Nous avons maintenant des ressources comme UX Stack Exchange et des ebooks UX gratuits. Si vous ne connaissez pas bien l'expérience utilisateur, le moment est bien choisi pour étudier et apprendre comment appliquer les principes de l'expérience utilisateur à toutes les formes d'interfaces numériques..

12. Gestionnaires de paquets

Les gestionnaires de paquets numériques ont augmenté si rapidement qu'ils sont pratiquement indispensables au développement Web moderne. Des solutions comme Bower et NPM peuvent faire gagner beaucoup de temps au démarrage de nouveaux projets..

La maîtrise de toute nouvelle technologie prendra du temps et s'accompagnera d'une courbe d'apprentissage. Mais s'il y a une chose que tous les développeurs front-end (ou back-end) devraient savoir, c'est un gestionnaire de paquets. Ils nécessitent une connaissance des commandes de terminal, mais une fois que vous vous êtes habitué au processus, vous ne voudrez plus jamais revenir en arrière..

13. Animations d'interface utilisateur avancées

Les transitions CSS3 n'étaient que le début d'une tendance d'animation à long terme sur le Web. Nous avons maintenant des dizaines de bibliothèques CSS et JavaScript dédiées à l'animation. Les choses que je n'aurais jamais imaginées possibles sont maintenant construites et disponibles gratuitement si vous savez où chercher.

L'animation n'est pas une exigence pour un bon design. Mais il peut transformer un bon design en un super design lorsqu'il est utilisé correctement.

Surveillez les tendances animées pour les interfaces et voyez ce que vous pouvez retirer de divers sites Web. N'oubliez pas que l'animation Web n'est pas un film Disney et doit être traitée avec respect. Utilisez les animations avec douceur pour améliorer l'interface sans devenir un élément gênant ou gênant du design.

14. Les concepteurs apprennent à coder

Un sujet brûlant cette année a été le cas pour les concepteurs qui apprennent à coder. Certains concepteurs estiment que ce n'est pas leur travail d'écrire du code, tandis que d'autres estiment que cela devient la norme et devrait être adopté..

J'ai lu des discussions passionnées et des articles fascinants sur ce sujet qui ne semblent attirer que des réponses émotionnelles. Un bon design est juste une jolie image sans code. Pourtant, se concentrer sur les deux nécessite un concepteur de passer moins de temps à pratiquer le métier.

Alors, y a-t-il une réponse définitive? Certains diront que la viabilité des tâches augmente pour les concepteurs connaissant le codage frontal. Et pourtant, si quelqu'un ne veut pas écrire de code? Vaut-il la peine d'apprendre juste pour rivaliser??

Je pense que la réponse la plus claire est de faire ce que vous voulez. Mais il semble que ce sujet est toujours d'actualité pour de nombreux designers qui poursuivront probablement la discussion jusqu'en 2016..

15. Outils et applications Web gratuits en ligne

Auparavant, tous les programmes étaient exécutés à partir du bureau, peu importe ce que vous deviez faire. Mais de nos jours, je suis toujours étonné du nombre d'applications Web disponibles gratuitement en ligne..

Vous trouverez tout, du codage / décodage d'URL à un éditeur de Markdown totalement gratuit. Même Google Drive a introduit les produits Microsoft Office dans le navigateur (encore une fois, totalement gratuit).

Le niveau actuel de puissance de calcul et les normes homogènes des navigateurs Web offrent un nombre apparemment illimité d'opportunités. Des tâches complexes telles que la création de CV pour la compression d’images peuvent être gérées directement à partir d’une fenêtre de navigateur..

16. La croissance des composants Web

Les composants Web tentent de résoudre des problèmes de complexité pour les développeurs. Le site Web de WebComponents offre d'excellentes ressources et matériaux pour donner aux développeurs un bon départ dans ce sujet..

Si vous ne savez pas comment comprendre les composants Web modulaires, consultez cet article pour en savoir plus..

Bien que les composants n'aient pas encore pris une ampleur considérable, ils sont discutés par des développeurs professionnels du monde entier. Google a publié Polymer, un framework utilisé pour ajouter des composants Web via JS et HTML.

Cela peut ne pas être pratique à utiliser dans les grands projets clients pour l'instant. Cependant, la technologie est disponible et avec un peu de pratique, vous pouvez maîtriser les concepts avec facilité. Pour en savoir plus et voir quelques exemples de code, vous pouvez lire cet article CSS-Tricks sur les composants Web modulaires..

17. Ressources d'apprentissage en ligne

Nous savons tous que le moment est le plus facile pour apprendre une compétence depuis le confort de votre ordinateur. Il semble que le marché de l'apprentissage en ligne se développe de manière exponentielle avec de nouveaux cours et sites Web qui apparaissent chaque année..

Je suis plus confiant que jamais que nous assisterons à une montée en puissance de l'apprentissage en ligne. Des sites connus comme Treehouse et CodeSchool proposent des cours incroyables aux côtés de nouveaux sites tels que Bitfountain et Learn-Verified.

Si vous souhaitez apprendre un sujet, il existe probablement un cours en ligne, en particulier si vous souhaitez apprendre des techniques numériques telles que la conception d'interface utilisateur ou le développement d'applications..

18. JavaScript côté serveur

Bien qu'il y ait eu des options passées pour JS côté serveur, aucune n'a été aussi rapide que Node.js. Les développeurs JavaScript sont tombés amoureux de cette bibliothèque et l'ont regardée entrer en concurrence directe avec d'autres langages d'arrière-plan tels que Python ou PHP..

Node permet aux développeurs de créer des sites Web en utilisant une seule langue pour le code frontend + backend. Et des ressources telles que Node Package Manager donnent encore plus de valeur à Node.js.

D'après ce que je peux dire, Node est toujours à la hausse et continue de gagner du terrain auprès des amateurs de l'industrie. Que vous souhaitiez apprendre Node ou non, il ne fait aucun doute que cela continuera à se développer comme une tendance majeure en 2016.

19. Caractéristiques du site Web pris en charge par le toucher

Les navigateurs de smartphones ont toujours pris en charge les fonctionnalités tactiles de tous les sites Web afin de maintenir la compatibilité avec les versions antérieures. Pourtant, récemment, j'ai remarqué de plus en plus de plugins et de fonctionnalités personnalisées ajoutés aux sites Web dans le but spécifique de gérer les événements tactiles..

Les plugins tels que Photoswipe et Dragend.js sont conçus pour traiter les glissements et les tapotements sur les écrans tactiles. Il semble que les développeurs Web ne construisent pas seulement des sites Web réactifs, mais aussi des sites Web tactiles..

Si vous effectuez une recherche dans les environs, vous découvrirez des fonctionnalités vraiment impressionnantes conçues pour le Web et reposant uniquement sur des événements tactiles..

20. Conception matérielle sur le Web

La publication par Google de la conception matérielle a été un énorme succès pour les designers Android. La conception matérielle est considérée comme un langage de conception destiné à simplifier le processus de création d'interfaces utilisateur pour les smartphones Android..

Au fil du temps, les concepteurs Web ont pris cela à cœur et ont construit des sites Web complets basés sur le nouveau langage de conception de Google. Il semble que la tendance en matière de conception matérielle a dépassé le stade de la conception Web au-delà des applications mobiles..

Les personnes qui souhaitent créer des sites Web pertinents n'ont même pas à réinventer la roue. Des bibliothèques gratuites telles que Material UI et Materialize proposent des codes personnalisés permettant de structurer une nouvelle mise en page au-dessus de la base de conception matérielle..

Fermeture

Au vu de ces tendances, il est clair que nous assistons à un réel effort concerté de la part de la communauté Web pour faciliter le processus de création de sites Web. Nous voulons tous gagner du temps dans notre flux de travail quotidien.

Depuis la création du Web, de nombreuses technologies ont vu le jour, pour être remplacées par de meilleures alternatives. Ces tendances de 2016 préconisent un ensemble de techniques de conception plus uniforme qui facilitera la création de sites Web et le rendra beaucoup moins complexe..