À quoi s'attendre dans la conception Web en 2015

Il y a douze mois, nous avions publié des prévisions sur ce que nous verrions (et ne verrions pas) en 2014. Cela vous a frappé, et nous avons décidé de faire la même chose cette année.!

L'année dernière, nous avions prédit l'augmentation continue du format SVG, le déclin du découpage PSD et une surcharge de la conception orientée vidéo, entre autres. Cette année à venir, nous allons voir plus de la même chose. Voici ce que nous pensons voir dans la conception Web en 2015!

Prototyping Extravaganza

Le prototypage n'est pas une simple lubie, c'est un élément essentiel de l'avenir de la conception Web..

Au fur et à mesure que le Web devient de plus en plus avancé et compliqué, nous allons continuer à nous éloigner des maquettes statiques pour aller vers des expériences entièrement interactives qui nécessitent beaucoup plus que de simples descriptions visuelles. Les outils de prototypage permettent au concepteur de montrer non seulement à quoi ressemble une expérience numérique particulière, mais aussi ce qu’elle peut faire.

Les outils de prototypage sont utilisés pour de nombreuses interactions spécifiques, notamment la conception d'animation simple, les transitions et la prise en charge de plusieurs périphériques. Mais les prototypes peuvent faire beaucoup plus que simplement montrer l'esthétique visuelle, ils peuvent aussi fonctionner comme des solutions de wireframing haute résolution. Les concepteurs et les architectes de l’information commenceront à se former un peu plus sur le territoire des uns et des autres, car l’architecture des applications continuera à être intégrée au processus de conception..

Outils que vous pouvez utiliser pour prototyper

  • Framer - Outil de prototypage intégré à Sketch et à Coffeescript conçu pour le prototypage en interaction haute résolution. 
  • Origami - construit par les gens de Facebook, Origami travaille avec Quartz Composer pour créer des prototypes interactifs. 
  • InVision - InVision est un excellent moyen de se lancer dans le prototypage. En prenant des captures d'écran statiques et en les rendant interactives à un niveau très simple, les utilisateurs peuvent créer des liens entre les vues, commenter des points spécifiques de la conception et utiliser une vue versionnée du prototype lui-même.. 
  • Codepen - Codepen est un outil qui vous permet d'essayer quelque chose dans le navigateur très rapidement. En quelques clics, vous pouvez obtenir un canevas vierge avec les bibliothèques populaires JavaScript, CSS et HTML. Codepen prend en charge des éléments tels que HAML, LESS / SASS et la liaison de fichiers externes (tels que jQuery). La création de démonstrations dans le navigateur présente également l’avantage d’être portable et d’être immédiatement utilisable dans un projet réel..

Lire plus loin, écouter et regarder:

  • Qu'est-ce qu'un prototype est (et n'est pas) 
  • Prototypage: Guide du praticien (livre) de Todd Zaki Warfel
  • Prototypage (@ Facebook) | Origami | Compositeur Quartz | Encadreur 
  • Introduction au prototypage
  • PrototypingTools.co

Ce que vous ne verrez pas: des outils pour passer directement du prototypage à la production

Les outils de prototypage ne sont pas encore suffisamment perfectionnés pour les intégrer directement dans le navigateur (à moins qu'ils ne démarrent bien sûr dans le navigateur, comme Codepen). Certains essaieront de le faire, mais au final, les développeurs humains continueront à convertir les prototypes en produits numériques codés prêts à la production. Avoir les compétences nécessaires pour convertir des prototypes en code prêt pour la production continuera à être un atout précieux pour les concepteurs autrement strictement visuels..

Adoption de croquis

Sketch a gagné en popularité depuis sa publication par Bohemian Coding. Sketch est spécialement conçu pour créer des conceptions numériques. Vous n’avez peut-être jamais entendu parler de Sketch, mais nous pensons que cela changera et cette année, vous le verrez continuer à croître.

L’ancien leader du groupe, Photoshop, n’a jamais été conçu pour être utilisé spécifiquement pour la conception Web. Adobe a continué à commercialiser des produits tels que Muse et Edge afin de résoudre certains problèmes de conception spécifiques au Web pour lesquels Photoshop n’est pas à la hauteur. Néanmoins, Sketch et d’autres solutions construites par de petites entreprises de développement sont à la hausse..

Ce que vous ne verrez pas: la mort d'Adobe

Même si Sketch et des outils similaires sont en train d’être adoptés, Adobe demeure une force puissante dans le monde du design. Adobe a continué de répondre publiquement aux voix des concepteurs. Par exemple, Adobe a créé un site reconnaissant le sujet de Photoshop for Design.. 

Adobe est également une très grande entreprise, ce qui lui donne l'avantage de cycles de publication plus rapides et de davantage de ressources pour lancer des fonctionnalités à grande échelle. En raison de la base utilisateur existante, les fonctionnalités de collaboration sont plus facilement adoptées. La présence persistante d'Adobe dans la communauté des concepteurs continuera de maintenir leur suite d'applications dans la liste des éléments essentiels pour les concepteurs..

Utilisation excessive et abus de la «conception matérielle»

La conception matérielle est le cadre conceptuel attendu depuis longtemps par Google pour la présentation et la rationalisation des produits numériques. Dans le cadre de la conception des matériaux, Google a publié des guides pratiques sur la mise en œuvre de ses concepts..

Certes, le design des matériaux s’inspire largement de l’esthétique du design «plat». Parce que l'esthétique de Google suit cette tendance, l'adoption massive a déjà commencé. La conception matérielle est en cours d'intégration dans des thèmes Wordpress et des widgets réutilisables / bibliothèques téléchargeables, des plugins et même Polymer, une bibliothèque de composants Web puissante intégrant non seulement des fonctionnalités plug-and-play, mais également un style spécifique aux composants..

Bien que la conception matérielle de Google fournisse définitivement une base de référence et une direction optimales pour le Web, nous pouvons également nous attendre à ce que la tendance se répercute au détriment des produits créés. L'esthétique de la conception matérielle n'est pas une solution universelle pour le Web en général. Tout comme nous assistons à des mises en œuvre à la fois géniales et épouvantables des arrière-plans vidéo et des effets de parallaxe sur le Web, nous verrons également des mises en œuvre géniales (et terriblement terribles) de Material Design..

Ce que vous ne verrez pas: moins de paradigmes de conception

Lorsque le Web en était à ses balbutiements, sa conception était relativement similaire sur une sélection aléatoire de sites. Ni la technologie ni la culture n'avaient poussé le médium à être une avenue d'expression.

Cela a été vrai pour la plupart des médias. Par exemple, bon nombre des premiers livres étaient probablement très similaires, arborant des mises en page similaires et s'appuyant principalement sur le contenu pour les différences d'expression..

Au fur et à mesure que la technologie progressait, que la vitesse de l’Internet augmentait et que le CSS était adopté, de nouvelles esthétiques apparurent sur le Web. Cet avancement n'était pas petit non plus; les techniques esthétiques sur le web ont explosé. Cependant, même au début des années 2000, de nombreux sites Web présentaient des styles similaires..

Avance rapide jusqu'à la mort proverbiale de Flash et à l'introduction des téléphones intelligents et des applications mobiles. Ce fut une période où la conception a mûri sur le web. De nouvelles avancées puissantes nous ont fait traverser l’ère du «Web 2.0», une entreprise axée sur les affaires, et nous sommes entrés dans une ère où le Web est devenu une toile vierge. Aujourd'hui, toute sélection aléatoire de sites Web peut paraître très différente, et cela ne changera pas.

La puissance et la polyvalence du navigateur, ainsi que la diversité des appareils accédant à Internet, ne feront que continuer à encourager des solutions de conception nouvelles et différentes à des problèmes nouveaux et différents. La conception matérielle n'est pas un signe de convergence, mais plutôt une reconnaissance collective de l'importance d'une conception réfléchie.

Modèle en croissance: Les collections en tant qu'interaction partageable

Bien sûr, Internet a fourni à quiconque ayant accès un stade propice à la création de contenu. Une partie importante de la population mondiale accède régulièrement à Facebook et, chaque jour, la race humaine génère plus de 2,5 milliards de gigaoctets de données..

Bien sûr, le genre de choses que nous créons change avec le temps et que de nouvelles voies de création s’ouvrent. Par exemple, il y a cinq ans, nous n'avions peut-être créé que des publications Facebook sur des murs et des images téléchargées, mais nous créons désormais des magasins complets sur Etsy et vendons des articles faits main et numériques en ligne facilement..

En 2015, nous verrons probablement une tendance continue vers dégustation comme une forme d'expression. Les faiseurs de dégustation sont des personnes qui organisent et publient des articles ou une collection d’articles que les autres peuvent voir et éventuellement adopter dans le cadre de leurs propres goûts. Ce modèle existe depuis très longtemps avec la création de listes de lecture de musique; nous nous exprimons à travers la sélection de chansons, puis partageons ces listes de lecture via Spotify (ou des mixtapes dans les années 80 et 90).

Mais ça va plus loin que la musique.

Aujourd'hui, nous partageons les tableaux Pinterest, les listes Amazon, les listes de lecture YouTube et infiniment plus de collections. Les opportunités dans cet espace n’ont pas diminué, mais continuent de croître. Nous apprécions ce type d'interactions, car elles sont humaines et beaucoup plus personnelles que les «suggestions» fournies par un algorithme..

ASongADay.co explique en grande partie pourquoi c'est si puissant:

“Pas d'algorithmes de fantaisie (pour le moment), pas d'automatisation (pour le moment). Je vous enverrai personnellement une chanson que vous aimerez tous les jours, entièrement déterminée par vos préférences musicales indiquées ci-dessous et par mon propre avis musical. Je ne suis pas un expert, j'écoute beaucoup de musique et les gens semblent me faire confiance. Chaque chanson sera une surprise, probablement pas à la même heure tous les jours. Parce que je suis humain, pas un robot (encore). "

Le service de Shannon est tellement sollicité qu'elle a dû commencer à faire appel à des volontaires pour l'aider à simplement envoyer une chanson personnalisée sélectionnée en fonction des goûts musicaux de cette personne..

Nous pouvons nous attendre à des choses telles que des curations de films (telles que des listes de lecture / collections Netflix - nous pouvons espérer, n'est-ce pas?), Une curation de produits de célébrités et même des préférences et paramètres d'applications partagés.

La demande des entreprises pour le mobile deviendra universelle

Nous savons que l'avenir du Web continuera de se diversifier et de s'orienter davantage vers l'espace mobile. Mais jusqu’à cette année, nous avons toujours constaté que la résistance aux considérations mobiles intégrales était une exigence commune à toute entreprise sérieuse..

Une masse critique d'utilisateurs accéderont à Internet principalement via des appareils mobiles cette année. Cela nécessite une réponse commerciale, pour aller là où les clients passent leur temps et leur argent.

Pour les concepteurs Web, cela signifie qu'aujourd'hui, il est temps de réfléchir à la façon de concevoir pour un monde multi-périphérique..

Les clients demanderont une expérience utilisateur artisanale de qualité supérieure (même s'ils ne savent peut-être pas ce que cela signifie)

En raison de la saturation continue de la culture de conception des startups, le langage de «l'expérience utilisateur faite à la main» a continué à imprégner les discussions sur ce qui fait un excellent produit. Ils pourraient ne pas savoir ce que cela signifie, mais vous devriez.

Un bon produit ne consiste pas nécessairement à suivre les tendances. Il n’est pas facile d’obtenir des «expériences utilisateur artisanales de qualité supérieure»; ils nécessitent des expériences très intentionnelles, ciblées et complètes qui sont très pertinentes pour l'utilisateur et ce qu'il tente d'accomplir. «Fabriqué à la main», en particulier, désigne le sens du caractère et de «l'âme» que vous pourriez trouver dans une table ou une paire de bottes fabriquées à la main. Le sens du travail artisanal et le souci du détail sont de plus en plus importants pour les clients. Les développeurs Web de classe mondiale seront ceux qui développeront les compétences nécessaires pour ajouter ce sens de l'artisanat et de l'âme à ce qui pourrait autrement ressembler à une matrice de pixels froide et sans vie.

Cartes, «Micro-expériences» et systèmes embarqués Composable Portable

Vous pouvez voir cette prédiction dans d'autres récapitulations de fin d'année ailleurs, mais elle est si importante que nous ne pouvons pas nous empêcher de nous entendre: conception de carte portable est un élément important du présent et de l'avenir de la conception Web. Twitter le fait depuis un certain temps, mais d’autres sites se développent. Le contenu en ligne continue d'être référencé sur le Web de différentes manières qui vont bien au-delà des simples hyperliens. YouTube et d’autres sites de partage de vidéos le font essentiellement depuis leur création..

Le modèle est simple: créez une interface intégrée, intégrable, qui fournit à l'utilisateur un ensemble cohérent d'interactions et affiche le contenu pertinent pour le contenu distant référencé..

Ces cartes incorporables ne doivent pas nécessairement vivre à distance de leurs sites hôtes. Ces cartes présentent un autre motif appelé «micro-expériences». Le bouton J'aime est un bon exemple de micro-expérience. En tant qu'utilisateur de Facebook, l'action «J'aime» est un simple clic qui contient beaucoup de sens. Premièrement, cela permet à Facebook de continuer à collecter vos préférences et vos goûts. Cela permet également aux autres utilisateurs de voir ces préférences et ces goûts. Ce type de micro-expérience permet à un utilisateur d'interagir avec une marque ou un site donné sans avoir à quitter son contexte actuel. Il permet également à un utilisateur d’interagir à différents niveaux de résolution. En d'autres termes, l'utilisateur n'a pas à suivre une série d'étapes et à utiliser l'intégralité de son application ou de son expérience en même temps; ils peuvent interagir à différents niveaux d'exigence d'entrée.

Les micro-expériences sont importantes pour de nombreuses raisons, mais la raison principale tient aux différences de résolution des différents appareils. Un utilisateur donné qui marche sur un trottoir par opposition à un utilisateur qui est assis sur son canapé avec son ordinateur portable ont des capacités d'interaction et des objectifs très différents. Les micro-expériences permettent une approche progressive des besoins en interaction des utilisateurs.

Wearables: pas encore une grosse affaire, mais préparez-vous quand même

La montre Apple Watch marque le début de la révolution vestimentaire, mais ne vous attendez pas à une montée en flèche trop rapide. Pour Apple, d’autres grandes entreprises de périphériques et les développeurs d’applications, mettre au point des pipelines d’applications pour dispositifs portables prendra un certain temps. En tant que développeurs Web, nous devrions préparer cette expansion dans une nouvelle classe d'appareils, mais cela n'arrivera pas immédiatement. Le plus sûr est de placer votre argent sur des appareils mobiles à écran tactile, en particulier des «phablets» (gros téléphones et petites tablettes)..

De http://sketchresources.com/elements/apple-watch

Conclusion

Il y a un thème commun dans beaucoup de prévisions pour 2015. Si 2014 était une année pour le mobile, 2015 était l'année du changement du même genre. Le monde continuera d'évoluer vers la mobilité et un paysage multi-appareils. L'esthétique Web continuera à se diversifier et les concepteurs Web devront se concentrer sur une conception numérique «page» plutôt que sur une conception flexible, flexible et conçue à la main, qui s'appuie sur de solides compétences en prototypage et sur la prise en compte de l'interaction dans divers environnements.

Que voyez-vous se passer dans la prochaine année? Faites le nous savoir dans les commentaires!