hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


20 tendances les plus chaudes qui façonneront Web Design Come 2016

Au fur et à mesure que les années passent, chaque année qui passe, de nombreuses nouvelles tendances apparaissent à l'horizon. Le domaine de la conception Web est en constante évolution avec de nouveaux outils, flux de travail et meilleures pratiques pour la construction de 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 modèle de tendances qui ont grandi comme une traînée de poudre. J'ai organisé 20 tendances uniques qui ont gagné en popularité en 2015 et qui se poursuivront probablement en 2016.

1. Sketch App pour la conception de l'interface utilisateur

Sketch remplace rapidement Photoshop pour toutes les tâches de conception de l'interface utilisateur, allant des wireframes basse-fidélité aux maquettes haute fidélité et à la conception d'icônes .

Sketch App est une application pour Mac exclusivement conçue pour les concepteurs Web et mobiles. Il offre un environnement de travail plus fluide pour créer des éléments vectoriels pour n'importe quelle interface, mais il conserve également de nombreuses fonctionnalités que vous attendez de Photoshop, comme les effets de texte et les styles de calque.

Bien qu'il n'y ait aucune preuve que Sketch puisse être commercialisé pour Windows, cela reste un choix important pour les utilisateurs d'OS X. Le flux de travail simplifié et l'étiquette de prix moins chère donnent à Adobe une course pour son argent. Si Sketch continue d'offrir la meilleure expérience de conception d'interface utilisateur, elle continuera sûrement à bien se développer en 2016 et au-delà.

2. IDE basés sur le 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 la mise en évidence de la syntaxe (entre autres fonctionnalités).

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

Les IDE de cloud fonctionnent davantage comme des applications Web où vous pouvez enregistrer des extraits de code sur votre compte pour les partager ou les stocker. CodePen est l'un des IDE les plus populaires avec un support pour 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 veulent apprendre comme ils le code. Aussi Codeply est idéal pour tester des frameworks réactifs spécifiques comme Bootstrap ou la fondation de Zurb sans avoir à télécharger de fichiers.

3. Gratuit Sass / SCSS Mixins

Les préprocesseurs ont été à la mode pendant des années, mais sont devenus assez récemment assez courants pour se sentir omniprésents dans tout le domaine de la conception / développement web. De nos jours, il semble étrange d'écrire du CSS à la vanille quand Sass / SCSS peut fournir beaucoup plus.

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

Certains mixins viennent dans des bibliothèques comme Bourbon tandis que d'autres peuvent être des objets 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 mises en page 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.

Une mise en page de carte est mieux utilisée sur les pages avec beaucoup de données qui devraient être scannables. La page de destination de Google Now utilise une disposition de carte pour annoncer les cartes optionnelles pour l'application Google Now.

Vous pouvez considérer les mises en page de cartes comme des grilles plus dynamiques, en mettant l'accent sur la réduction du contenu à l'essentiel pour répertorier plus d'éléments ensemble. Les magazines en ligne comme UGSMAG et The Next Web sont deux exemples parfaits de mises en page de cartes utilisées pour mettre en valeur le contenu d'articles récents.

5. Vidéos explicatives personnalisées

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

Le but d'une vidéo explicative est de montrer comment fonctionne un produit ou un service. Les visiteurs peuvent parcourir une liste de fonctionnalités et n'ont toujours aucune idée du fonctionnement du produit. Les vidéos clarifient tout visuellement et couvrent les choses importantes en quelques minutes.

Si vous voulez vous essayer à faire une vidéo explicative personnalisée, consultez ce cours d'Udemy. C'est une étude approfondie axée sur les vidéos pour la conception de la page de destination.

6. Aperçu des produits en direct

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

Prenez 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 ont pour but de 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 à démonter manuellement le produit. Mais vous n'avez pas toujours besoin de faire appel à des animations pour les aperçus des produits. Iconjar utilise une simple capture d'écran PNG pour montrer ce qu'est le produit et comment cela fonctionne.

7. Coureurs de tâches automatisés

Le monde du développement frontend a tellement changé avec une poignée de nouvelles pratiques pour la création de sites Web. Les coureurs de tâches / systèmes de construction comme Gulp et Grunt sont utilisés beaucoup plus fréquemment pour une foule de tâches qui nécessitaient auparavant un effort manuel.

L'automatisation est la pierre angulaire de la rapidité d'exécution et de la qualité du code. Les machines ne font pas d'erreurs, donc plus vous pouvez automatiser avec confiance le moins de problèmes que vous aurez (en théorie).

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

8. Applications mobiles natives JS

Je suis un grand défenseur de l'utilisation des bons outils pour le travail. 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 un nouveau langage juste pour construire une application mobile. Heureusement, il devient plus facile pour les applications natives d'être créées et compilées avec des bibliothèques alternatives telles que NativeScript ou React Native.

L'écart pour devenir un programmeur d'application mobile raccourcit 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 codeurs qui veulent créer des applications mobiles sans apprendre une nouvelle langue.

9. Outils de collaboration pour la conception

La messagerie instantanée et le chat en groupe existent depuis plus d'une décennie. Cependant, ces ressources reposaient traditionnellement sur du texte en clair avec une certaine capacité à joindre des fichiers.

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

Slack est l'application de chat la plus populaire en ce moment qui supporte de nombreuses fonctionnalités similaires. La base d'utilisateurs Slack croissante a été catégorique sur la création d'extensions qui améliorent considérablement les capacités de Slack et se lient à d'autres produits comme Hangouts, MailChimp, et même WordPress.

10. Cadres de frontend réactifs

Les frameworks Frontend comme Bootstrap existent depuis des années et continuent à être utiles sur des projets à la fois personnels et professionnels. La conception adaptative s'est imposée dans les frameworks et a créé une demande de code frontend au lieu de 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 sortie publique de Bootstrap 4.

D'autres frameworks moins connus que vous pouvez consulter incluent Gumby et Pure CSS.

11. Gros plan sur la conception UX

Le domaine de la conception de l'expérience utilisateur continuera à croître rapidement avec plus de concepteurs et de développeurs prenant note. La conception de l'interface utilisateur fait partie de la conception UX mais ce n'est pas l'objectif final. L'interface utilisateur est un moyen de parvenir à une fin, la fin étant une expérience utilisateur fantastique.

Il y a à peine cinq ans, je connaissais à peine l'UX ou son application à la conception d'interfaces. Maintenant, nous avons des ressources comme UX Stack Exchange et ebooks gratuits UX. Si vous ne connaissez pas grand chose à l'expérience utilisateur, c'est le moment idéal pour étudier et apprendre comment les principes UX peuvent être appliqués à 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 une exigence pour le développement web moderne. Des solutions comme Bower et NPM peuvent vous faire gagner beaucoup de temps en démarrant de nouveaux projets.

Maîtriser toute nouvelle technologie prendra du temps et s'accompagne d'une courbe d'apprentissage. Mais s'il y a une chose que tout développeur frontend (ou backend) devrait savoir, c'est un gestionnaire de paquets. Ils nécessitent une certaine connaissance des commandes du terminal, mais une fois que vous vous êtes habitué au processus, vous ne voudrez plus jamais revenir en arrière.

13. Animations avancées de l'interface utilisateur

Les transitions CSS3 n'étaient que le début d'une tendance à long terme de l'animation sur le web. Maintenant, nous avons des dizaines de bibliothèques CSS et JavaScript dédiées à l'animation. Les choses que je n'ai jamais rêvé sont maintenant construites et disponibles gratuitement si vous savez où regarder.

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

Gardez un œil sur les tendances animées pour les interfaces et voyez ce que vous pouvez retirer de différents sites Web. Rappelez-vous que l'animation web n'est pas un film Disney et devrait être traitée avec respect. Utilisez l'animation doucement pour qu'elle améliore une interface sans devenir un élément gênant ou distrayant 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 designers pensent que ce n'est pas leur travail d'écrire du code, alors que d'autres pensent que c'est devenu la norme et devraient être adoptés.

J'ai lu des discussions passionnées et des articles passionnants sur ce sujet qui semble seulement susciter des réactions émotionnelles. Un bon design est juste une jolie image sans code. Pourtant, pour se concentrer sur les deux exige un concepteur de passer moins de temps à pratiquer l'artisanat.

Alors, y a-t-il une réponse définitive? Certains diront que la viabilité de l'emploi augmente pour les concepteurs qui connaissent le codage frontal. Et 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 soit encore sur la table pour de nombreux designers qui continueront probablement la discussion jusqu'en 2016.

15. Outils en ligne gratuits et Webapps

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é de voir combien de webapps sont disponibles gratuitement en ligne.

Vous trouverez tout de l'encodage / décodage d'URL à un éditeur de Markdown complètement gratuit. Même Google Drive a pris des produits Microsoft Office dans le navigateur (encore une fois, complètement gratuit).

Le niveau actuel de puissance de calcul et les normes homogènes des navigateurs Web offrent une quantité apparemment illimitée 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 les problèmes de complexité pour les développeurs. Le site web de WebComponents a d'excellentes ressources et de bons matériaux pour donner aux développeurs un bon départ sur ce sujet.

Si vous n'êtes pas sûr de comprendre les composants Web modulaires, consultez ce post pour en savoir plus.

Bien que les composants n'aient pas particulièrement explosé, ils sont discutés par des développeurs professionnels du monde entier. Google a publié Polymer qui est un cadre utilisé pour l'ajout de composants Web via JS et HTML.

Cela peut ne pas être pratique à utiliser dans les grands projets clients pour le moment. 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 ce post CSS-Tricks sur les composants Web modulaires.

17. Ressources d'apprentissage en ligne

Nous savons tous que c'est maintenant le moment le plus facile pour apprendre n'importe quelle compétence dans le confort de votre ordinateur. Il semble que le marché de l'apprentissage en ligne croisse de façon exponentielle avec de nouveaux cours et sites Web qui apparaissent chaque année.

Je me sens plus confiant que jamais que nous verrons une augmentation de l'apprentissage en ligne. Des sites bien connus comme Treehouse et CodeSchool offrent des cours incroyables à côté de sites plus récents comme Bitfountain et Learn-Verified.

S'il y a un sujet que vous voulez apprendre, il y a probablement un cours en ligne - surtout si vous voulez apprendre des techniques numériques comme la conception de l'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é se mettre en concurrence directe avec d'autres langages backend tels que Python ou PHP.

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

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

19. Caractéristiques du site Web tactile

Les navigateurs Smartphone ont toujours pris en charge les fonctions tactiles pour tous les sites Web afin de maintenir la compatibilité ascendante. Pourtant, récemment, j'ai remarqué plus de plugins et de fonctionnalités personnalisées ajoutées sur des sites Web dans le but précis de gérer les événements tactiles.

Les plugins comme Photoswipe et Dragend.js sont conçus pour gérer le balayage et le tapotement 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 autour de vous, vous découvrirez des fonctionnalités vraiment impressionnantes conçues pour le web et basées uniquement sur des événements tactiles.

20. Conception matérielle sur le Web

La sortie de Google de la conception matérielle a été un énorme succès pour les concepteurs 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 de sites Web ont pris cela à cœur et ont construit des sites Web entiers basés sur le nouveau langage de conception de Google. Il semble que la tendance du design matériel est allée au-delà des applications mobiles dans le monde du design web.

Les gens qui veulent construire des sites web matériels n'ont même pas besoin de réinventer la roue. Les bibliothèques gratuites telles que Material UI et Materialise proposent des codes personnalisés pour structurer une nouvelle mise en page au-dessus de la fondation de conception matérielle.

Fermeture

En regardant ces tendances, il devrait être clair que nous voyons 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, mais elles ont été remplacées par de meilleures alternatives. Ces tendances de 2016 poussent à un ensemble plus uniforme de techniques de conception qui rendront les sites Web de construction plus faciles et beaucoup moins complexes.

CSS Shorthand vs. Longhand - Quand utiliser

CSS Shorthand vs. Longhand - Quand utiliser

Sténo et Longhand - un est concis et l'autre précis. L'un est venu à l'existence par manque de brièveté, tandis que l'autre reste ferme pour préserver la clarté. Quoi qu'il en soit, ils ont leurs fins, avantages et inconvénients, pour ainsi dire.Cet article mettra en lumière à la fois les notations sténographiques CSS et les notations manuscrites, tout en concluant qu'il est préférable d'utiliser pour quelle situation .Qu'est-c

(Conseils techniques et de conception)

Les applications de messagerie s'affrontent: Google Allo contre Messenger et Skype

Les applications de messagerie s'affrontent: Google Allo contre Messenger et Skype

Internet of Things change nos vies avec des milliards d'appareils intelligents connectés à Internet. Les produits et les applications se transforment en bots intelligents intelligents, toujours connectés et intelligents, alimentés par des plateformes d' intelligence artificielle .Les applications de messagerie et de communication ne sont pas différentes - elles utilisent maintenant la technologie d'intelligence artificielle pour mieux comprendre leurs utilisateurs et fournir des services plus intelligents . Si

(Conseils techniques et de conception)