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


Web Design: 20 tendances les plus chaudes à surveiller en 2014

Après avoir passé des heures en ligne sur différents sites Web, vous avez tendance à repérer des tendances discernables dans la conception. Au fil des ans, j'ai écrit sur l'évolution des tendances, en particulier dans le domaine des mises en page de sites Web et des applications Web. L'avancement des spécifications du W3C couplé avec les navigateurs Web modernes ont ouvert la porte à une nouvelle ère de la conception numérique.

Dans cet article, je veux partager 20 tendances croissantes que j'espère voir fleurir au cours de l'année 2014 . Beaucoup ont déjà été mis en mouvement alors que d'autres commencent à peine à poindre. Les nouvelles tendances sont amusantes à vérifier et voir combien de temps ils restent. Lorsque vous naviguez sur des sites Web en 2014, gardez un œil sur l'une de ces tendances UI / UX en action.

1. Layouts de style grille

Ma première reconnaissance traditionnelle de la conception de la grille était sur Pinterest. Les flux d' actualités sociales ont toujours été rationalisés, tels que Twitter ou Tumblr. De nos jours, même de nombreuses pages Facebook diffusent des mises à jour chronologiques pour apparaître comme une grille.

Ce n'est pas quelque chose que vous pouvez forcer dans n'importe quel ancien site Web. Il doit y avoir un but, l'expérience de l'utilisateur vient toujours en premier. Dans les situations utilisant des images miniatures ou des mises à jour de texte, l'agencement de la grille se transforme en un format facile à lire . Tout est skimmable mais toujours cohérent et il ne nécessite pas beaucoup d'espace sur la page.

Les bibliothèques JS open source telles que Maçonnerie peuvent faire beaucoup de travail pour vous. Pas beaucoup de sites utilisent cette fonctionnalité, mais ceux qui le font sont souvent très agréables sur les yeux .

2. Légendes de l'image Crafty

Dans le passé, nous avons couvert certains effets de légende d'image CSS3 uniques. De nombreux sites Web utilisent des galeries d'images pour présenter des éléments de portfolio, des photographies, des miniatures d'articles, etc. L'utilisation d'une légende de texte aide le visiteur à connecter plus d'informations à l'image . Et avec CSS3, vous pouvez compter sur les ressources naturelles du navigateur sans aucun effet JavaScript.

Chaque site Web devrait avoir sa propre conception pour fournir des avantages au lecteur. Un autre tutoriel que j'apprécie de Codrops est la numérotation des figures avec CSS3. Vous pouvez créer des étiquettes de style de légende qui s'ajoutent automatiquement aux images (ou figures) sur chaque page.

3. Eléments de formulaire étendus

La plupart des développeurs frontend sont familiers avec le but de jQuery. Il vous aide à écrire du code JavaScript plus fluide avec moins de lignes et beaucoup moins d'encombrement . Les plugins jQuery open source gratuits ont pris leur propre marché - et ils sont actuellement très demandés.

Il y a un enthousiasme particulier autour des plugins de formulaire jQuery qui améliorent l'expérience de l'utilisateur . Ces effets peuvent inclure des étiquettes flottantes, la validation des entrées, des info-bulles guidées, presque tout ce que vous pouvez imaginer. Jetez un coup d'œil à la galerie de formulaire Unheap qui catalogue les plugins jQuery open source que vous pouvez télécharger et tester dans de nouveaux projets.

4. Pages de destination fortement ciblées

Je me souviens quand l'iOS App Store a été lancé et que les développeurs réclamaient leur prochaine bonne idée. Avance rapide quelques années et nous avons des millions d'applications pour les appareils Android + iOS. Beaucoup de ces applications ont même leur propre site Web.

Les développeurs de logiciels achètent souvent un nom de domaine et lancent un site Web comme outil de marketing. Cette idée s'est ensuite étendue à l' encapsulation de jeux mobiles, de scripts open source, d'applications pour smartphones, de tout produit numérique que vous pouvez imaginer. Ces pages d'atterrissage sont essentiellement essentielles pour encourager les clients potentiels à en apprendre davantage sur un produit avant d'acheter.

5. Lecteurs vidéo HTML5

Je me souviens en 2004 d'apprendre moi-même le code ActionScript de base pour créer un lecteur vidéo personnalisé pour mon site web. Il a fallu des mois de travail et la meilleure solution de lecture était une vidéo FLV. Heureusement, les temps changent rapidement avec les médias HTML5 et les nouvelles bibliothèques JavaScript.

Flash a toujours un but si nécessaire, mais la plupart des développeurs web seraient d'accord que l'avenir de la vidéo sur Internet est HTML5. Deux scripts que je recommande fortement sont Video.js et MediaElement.js. Le premier est beaucoup plus simple mais aussi limité avec des fonctionnalités de base.

Media Element fournit des skins par défaut et une documentation plus complète pour créer vos propres conceptions de lecteur. Vous pouvez également essayer de créer un lecteur audio / musique avec les mêmes codes. Les deux scripts fournissent une documentation avec une API et ce sont deux bibliothèques fantastiques. Gardez-les à l'esprit lorsque vous avez besoin de vidéos auto-hébergées sur de futurs projets.

6. Effets de transition 3D

J'ai trouvé un certain nombre d'animations 3D créatives dans plus de sites Web au cours de la dernière année. Ceux-ci sont souvent intégrés dans la page pour les galeries d'images animées, les menus de navigation et les éléments . Les effets 3D peuvent être créés en utilisant jQuery bien que CSS3 ait rattrapé son retard.

Naturellement, les animations ne sont pas entièrement supportées dans tous les navigateurs, et les concepteurs devraient se méfier d'utiliser trop d'animations sur une seule page. Mais si vous aimez essayer de nouvelles choses, je vous recommande fortement de parcourir le web pour trouver des exemples de code d'animation 3D avec lesquels jouer.

7. Éléments de design plat

Comment est-ce que je pourrais discuter des tendances de conception de Web sans mentionner l'utilisation répandue des éléments plats d'IU . CSS3 a permis aux concepteurs de créer des boutons beaucoup plus plats en utilisant des ombres en boîte naturelles, des ombres de texte ou des coins arrondis. Ce modèle d'interface utilisateur plat transcendé dans les entrées de formulaire et même les menus de navigation.

Mais je pense qu'il y a plus que nous pouvons nous attendre dans un proche avenir. Des jeux d'icônes plats et des kits graphiques ont été publiés gratuitement sur des dizaines de sites Web. Dans mon guide de conception de sites Web à plat, vous pouvez trouver des tas de graphiques PSD / AI téléchargeables gratuitement. Les mises en page de style Metro ont également gagné en popularité grâce au système d'exploitation Windows de Microsoft et au Windows Mobile Phone.

8. Portraits personnels

Les sites Web de portefeuille simples sont souvent mes préférés. Vous voulez transmettre un peu de vous-même, où vous avez été, et présenter vos échantillons de travail. Mais pour garder les gens vraiment intéressés, vous devez former un lien humain. L'une des meilleures façons d'y parvenir serait d'inclure un exemple de photo de vous-même quelque part sur la page.

Andrea Mann utilise une photo qui encapsule une grande partie de la page d'accueil. Ceci est également mélangé dans le fond sombre et recolored aux nuances de B & W. Il semble fantastique, même si vous n'avez pas besoin d'utiliser de grands portraits de fond sur votre site Web. Même une petite photo sur votre page d'accueil ou sur la page offre aux visiteurs un aperçu de qui vous êtes.

9. Images SVG et icônes

Les graphiques vectoriels ne sont pas construits autour des pixels, mais des lignes et des coordonnées. Les formes individuelles sont organisées par des équations mathématiques et cela vous permet d'étirer les vecteurs à n'importe quelle taille. Les images SVG sont comme des vecteurs dans le sens où elles peuvent être manipulées facilement sans perte de qualité.

Le plus gros problème est le support de ces images dans tous les navigateurs Web. Beaucoup de gens utilisent encore des versions plus anciennes d'Internet Explorer et d'autres titres hérités. C'est une tendance énorme qui va balayer Internet dans les années à venir (si ce n'est déjà fait).

Si vous voulez vraiment commencer, je vous recommande Codepen, un environnement de développement de communauté ouvert pour les développeurs de partager leur travail en ligne. Vous seriez surpris de la qualité. Snap.svg est une bibliothèque JavaScript dédiée à la prise en charge de plusieurs navigateurs avec des images SVG naturelles. C'est un sujet un peu détaillé mais si vous êtes curieux, il vaut la peine de s'y plonger.

10. Copie Web unique

L'une des nouveautés les plus cool du développement web est la déclaration @ font-face. Vous pouvez importer des fichiers de polices hébergés localement ou en externe sur un autre serveur. Ces polices sont définies dans CSS et vous pouvez les écrire dans les propriétés font-family pour styler le texte de votre page Web.

Cela a grandi pour inclure des icônes de polices où les icônes flexibles sont rendus sur la page en tant que texte. Ces icônes ne sont pas aussi bien conçues par rapport aux graphiques réels, qui peuvent incorporer une multitude de couleurs différentes. Pourtant, avoir simplement la possibilité de personnaliser une police sur la page est une technique puissante pour aider votre site à se démarquer de la foule.

11. Animations de chargement paresseux

Lorsque je naviguais sur ThemeForest un jour, je suis tombé sur de nombreux thèmes WordPress qui avaient des effets de transition appliqués sur des éléments, mais ils ne s'animent que lorsque vous les faites défiler dans la vue. Ces éléments se comportent comme des images paresseuses, sauf qu'ils sont déjà chargés dans la page et cachés à la vue.

En utilisant JavaScript, il est facile de détecter quand les éléments sont visibles, puis d'utiliser les transitions CSS3 ou JavaScript pour les animer.

Si vous faites défiler la page sur Chart.js, vous verrez des blocages de contenu + images commencer à apparaître progressivement. Cette tendance n'influe probablement pas sur la bande passante sauf si vous attendez délibérément de charger le contenu. Il s'agit plus d'esthétique de la page et de fournir une interface élégante pour vos visiteurs.

12. Galeries d'images personnalisées

L'intégration croissante de JavaScript et de CSS a permis aux développeurs de produire de nouveaux projets exceptionnels. Les galeries d'images sont une tendance qui existe depuis des décennies. En 2014, nous pourrions nous attendre à voir des solutions encore plus grandes aux carrousels dynamiques et aux visionneuses d'images.

Pour donner un petit exemple, jetez un oeil à ce didacticiel récent de la galerie sur Codrops qui utilise un effet de glissement élastique pour basculer entre les photos . C'est un peu expérimental mais vous pouvez voir comment les développeurs sont prêts à repousser les limites et voir ce qui est possible.

Si vous aimez ce concept, pourquoi ne pas jeter un coup d'œil sur certains plugins de la galerie jQuery? Ce serait une stratégie plus rapide pour commencer à apprendre et au fil du temps, vous pouvez même construire votre propre plugin de galerie.

13. Menus Mega-Navigation

Toutes sortes de nouvelles navigations sophistiquées ont été testées et adoptées ces dernières années. Le web responsive mobile est un gros morceau à cela, avec les spécifications HTML5 / CSS3. J'ai remarqué une petite tendance à la hausse des menus de méga-navigation qui s'étendent pour contenir de gros blocs de contenu et de liens .

Ceux-ci sont les plus courants sur les sites Web qui publient beaucoup de contenu unique dans de grands volumes. Les magazines en ligne ou les forums web viennent immédiatement à l'esprit. Il prend un peu d'espace sur la page, mais il donne également aux lecteurs un choix plus large pour naviguer sur votre site.

Je suis tombé sur un article connexe sur Smashing Magazine parlant tout sur les menus de navigation pour les méga-sites. Les concepts sont similaires et les exemples fournis peuvent être un bon point de départ pour quiconque s'intéresse à cette tendance.

14. Étendre les barres de recherche

Avec le recul, je ne suis pas tout à fait sûr quand ce concept a pris de l'ampleur. Mais il y a une popularité croissante pour construire des barres de recherche semi-cachées ou en expansion dans votre mise en page. L'utilisateur clique sur une icône de loupe ou clique sur le formulaire lui-même, puis il élargit plus large pour permettre plus de saisie de texte.

Codrops a écrit un tutoriel exceptionnel sur ce sujet et c'est une excellente lecture pour tout développeur. Principalement, le champ de recherche caché est utilisé pour économiser de l'espace sur la page. Vous pourriez même cacher le formulaire tout en haut et basculer vers le haut / bas comme un menu de navigation. Cette technique est proéminente avec des mises en page réactives, mais même des conceptions plus grandes et plus complètes incorporent ces champs de recherche adaptables.

15. Listes de détails en vedette

Récemment, j'ai mis en place une vitrine de conception de listes détaillées figurant sur les pages d'accueil du site. Ce sont des détails orientés liste expliquant des informations sur une entreprise ou un produit. Souvent, les détails sont couplés avec quelques icônes pour aider à illustrer les points d'une manière plus concise.

J'ai remarqué que ces listes de détails sont devenues un incontournable pour de nombreuses pages d'accueil. Une collection d'informations sur n'importe quel produit ou service fournit aux visiteurs une raison de rester. Il donne un aperçu de ce que vous fournissez aux clients et comment tout cela fonctionne . Les icônes sont comme le glaçage pour attirer l'attention des gens lorsque vous faites défiler rapidement.

16. Mobile-Premier Design

Un livre intitulé Mobile First de Luke Wroblewski m'a donné cette idée il y a quelque temps. Lorsque vous naviguez sur un site Web, il n'est pas facile de différencier le processus de conception. Mais l'idée est de simuler d'abord comment votre site Web devrait apparaître comme une mise en page adaptable sur les écrans mobiles. Éliminer tous les excès de peluches et ne garder que l'essentiel.

De ce point de vue, il est beaucoup plus facile d' étendre votre conception à des écrans plus larges . Les menus de navigation deviennent plus larges, le contenu est allongé avec une barre latérale possible. La conception mobile-première accorde une plus grande priorité à l'expérience mobile, qui devient alors une référence pour l'ensemble de la mise en page. J'adore le concept et j'espère que les concepteurs vont essayer de le mettre en œuvre pour voir comment cela peut affecter le flux de travail et le résultat final.

17. Toile HTML5

Il y a beaucoup à dire sur l'élément toile et c'est un sujet d'étude. En utilisant JavaScript, il est possible de créer des jeux ou de dessiner des applications directement dans HTML5. J'ai même vu l' élément canvas utilisé pour collecter des signatures avec la souris .

L'exemple ci-dessus provient d'une simple entrée Codepen. Quelqu'un a posté un cercle de chargement glacé sur Dribbble et ce stylo est une réplication utilisant l'élément canvas. Un autre exemple est cette petite barre de chargement horizontale construite sur HTML5 canvas et JavaScript. Les possibilités se développent rapidement et personnellement je suis excité de voir ce que la toile sera comme 2-3 ans sur la route.

18. Pixel Sprites et jeux de navigateur

Tout comme les lecteurs vidéo classiques, les jeux sur navigateur étaient exclusivement produits dans Adobe Flash. Mais JavaScript a pris pied dans la communauté et de nombreux développeurs sont heureux de publier des codes open source pour ces types de projets.

Il y a quelque temps, j'ai écrit un article détaillant des sites Web centrés sur les pixels qui pouvaient également utiliser des animations. Ces conceptions ne sont pas communes mais elles attirent votre attention. Il faut beaucoup de talent de conception pour créer de telles illustrations pixel exquis. Construire votre propre jeu de sprites dans un navigateur serait donc un défi encore plus grand.

L'une des meilleures ressources pour démarrer peut être trouvée sur HTML5 Game Engine. Le site répertorie de nombreuses bibliothèques JavaScript gratuites pour créer vos propres jeux par navigateur. Il y a beaucoup à apprendre sur le processus, mais heureusement, vous pouvez trouver des centaines de tutoriels en ligne dans Google.

19. Enregistrement rapide de l'utilisateur

Il y a un nombre croissant de nouvelles startups et d'applications web qui permettent l'enregistrement des utilisateurs. En fait, de nombreux services exigent que vous vous inscriviez avant de pouvoir commencer à utiliser le site Web. De longs formulaires d'inscription détaillés sont terriblement rebutants dans ce monde en évolution rapide.

Essayez de garder tous les formulaires d'inscription rapidement et au point . Beaucoup de webapps plus récents incluent le formulaire d'inscription directement sur leur page d'accueil pour capturer autant de visiteurs que possible. Cela arrive lorsqu'un nouveau visiteur est curieux au sujet de votre produit, voit que le formulaire n'a que 2 à 4 champs et décide d'y aller. Vous pourriez être choqué de voir à quel point cette stratégie fonctionne pour capturer de nouveaux utilisateurs.

20. Images clés animées CSS3

Depuis le début du millénaire, JavaScript a été le premier choix pour l'animation du navigateur. Ce n'est que récemment que CSS3 a été adopté dans le courant dominant, où les développeurs peuvent créer leurs propres effets d'animation en utilisant @keyframe.

Il existe une autre façon d'animer en utilisant la propriété de transition, bien que celle-ci n'ait qu'un seul état pour l'animation alors que les images clés se comportent comme Adobe Flash. Vous définissez une valeur de pourcentage d'image de 0% à 100% et définissez les propriétés qui changent avec le temps . La dernière spécification CSS3 fournit assez d'outils pour animer des éléments dans pratiquement n'importe quel style que vous aimez.

Fermeture

Les concepts d'interface plus petits ne sont pas quelque chose que nous pensons tous les jours. Mais ce sont ces petits accents qui donnent vie à une mise en page intelligente. J'espère que cet article fera la lumière sur une poignée de tendances de conception que nous remarquerons dans les projets futurs. Aussi, si vous avez des idées pour les tendances de design 2014 que j'ai peut-être oublié, n'hésitez pas à partager avec nous dans la zone des commentaires ci-dessous.

La version bêta d'Android 7.1.2 Nougat est maintenant disponible

La version bêta d'Android 7.1.2 Nougat est maintenant disponible

Les propriétaires d'appareils Pixel et Nexus se réjouissent que la version bêta d'Android 7.1.2 Nougat soit désormais disponible pour tous ceux qui se sont inscrits au programme bêta Android .Cette mise à jour bêta a été mise à la disposition des appareils Pixel, Pixel XL, Nexus 5X, Nexus Player et Pixel C. Pendant

(Conseils techniques et de conception)

Guide ultime pour configurer votre premier magasin en ligne

Guide ultime pour configurer votre premier magasin en ligne

Le commerce électronique est la tendance commerciale la plus populaire dans notre société futuriste, car la plupart des villes modernes ont Internet équipé et c'est un processus si simple d'envoyer des paiements partout dans le monde via une connexion Internet. Avec ces technologies ont augmenté des centaines de milliers de nouvelles boutiques en ligne numériques qui vendent des produits physiques et numériques à un marché mondial.Le commer

(Conseils techniques et de conception)