L'état des tendances de la conception Web édition annuelle 2011

2010 a été une année incroyablement verdoyante pour les concepteurs de sites Web. Le mobile a frappé le grand public; La typographie Web a atteint un nouveau niveau de sophistication. Les nouvelles techniques de codage ont considérablement amélioré notre capacité à faire preuve de créativité dans la conception (sans compromettre la stabilité). Globalement, l'année écoulée a été rapide, même au regard des standards du Web. Passons donc à notre premier article annuel traitant de l'état de la conception de sites Web, alors que 2010 se tourne vers 2011..


La mort du pli

Le "pli" traditionnel (la ligne imaginaire sur un écran qui désigne quel contenu est visible avant qu'un téléspectateur ait besoin de faire défiler) est devenu vague, sans importance et presque sans importance en 2010.

Pourquoi? Parce que l’écran traditionnel par lequel les internautes regardent le Web a connu une explosion de variété… nous ne pouvons plus nous attendre à ce que les internautes surfent sur un écran proche du 19 "avec une résolution comprise entre 1024x768 et 1280x700. toutes formes et tailles, des iPhones (et des téléphones plus petits) aux téléviseurs HD 60 ". Cependant, la résolution peut varier énormément. le rapport d'aspect même d'un écran (même sur le même appareil que l'iPhone) peut changer en un tour de main. Bien sûr, il sera toujours conseillé aux concepteurs Web de conserver les messages les plus importants d'un site près du sommet, mais avec tant de nouvelles façons pour les internautes de visualiser le Web, il n'y a plus de hauteur définie pour le contenu au-dessus..

Nous discuterons de ce sujet plus en détail ce mois-ci, alors inscrivez-vous (c'est gratuit) pour rester à l'écoute :)


Sites mobiles

Les sites ont été conçus pour des scénarios mobiles depuis la création d'appareils mobiles… mais l'année 2010 a été marquée par une avancée considérable vers des sous-sites entiers conçus spécifiquement pour être visionnés sur de petits écrans portables. Vous pouvez remercier l'iPhone pour avoir lancé cette tendance, mais la vague de sites "mobifiés" se répand comme une traînée de poudre… et à la même époque l'année prochaine, je suis sûr que vous aurez du mal à trouver un site majeur de publication sans site compagnon mobile.

Ce qui est bien avec les écrans mobiles, c’est qu’ils obligent les concepteurs à faire preuve de créativité avec une quantité relativement réduite de biens immobiliers. Réussir dans l'environnement mobile n'est pas difficile si vous gardez quelques règles à l'esprit: les messages doivent être transmis plus rapidement et plus efficacement; Les liens doivent être conçus pour un environnement d'écran tactile; et le texte doit devenir lisible (ou au moins efficacement zoomable). Voici quelques exemples de sites mobiles:

Vous pouvez en lire beaucoup plus sur le design mobile sur notre site partenaire: Mobile.tutsplus.com!

SubTrend: Sites Tabletifiés

Tout comme l'année 2010 a vu une explosion de conceptions de sites mobiles, on peut s'attendre à ce que les grands sites Web emboîtent le pas en créant des sites (et des applications) spécialement conçus pour un environnement à écran tactile de taille moyenne..


Une explosion typographique

D'accord, je suppose que vous pourriez affirmer que la "typographie va exploser" chaque année… mais l'année 2010 a été marquée par quelques changements majeurs apportés à la technologie sous-jacente qui rend cette revendication légitime. En particulier, l’énorme croissance de la technologie de remplacement des polices au cours de l’année écoulée et l’adoption massive de «polices en tant que services» dans le cadre desquelles des sociétés tierces hébergent des polices (et des licences) que les concepteurs peuvent utiliser dans des environnements de développement en direct. Vous pouvez également dire que les concepteurs deviennent de plus en plus audacieux avec typogrpahy également… et de plus en plus de motifs sortent récemment qui brouillent la frontière entre print-4design et web design.

Pour en savoir plus sur cette navigation entre la vaste gamme de ces nouvelles solutions de typographie, cliquez ici. Voyons quelques exemples (certains utilisant le remplacement de police, d'autres utilisant d'autres méthodes):

SubTrend: Sites inspirés par la conception d'impression

C'était à la mode en 2009-2010, mais la "révolution de l'impression" est bien vivante sur le Web, et de plus en plus de sites sont conçus pour imiter d'excellents modèles d'impression, tels que des magazines, des affiches, des tracts, etc..


Influence de l'interface utilisateur de l'application de bureau

Si j'avais été un homme de paris en 2009, j'aurais mis tout mon argent dans des applications… applications iPhone, applications Android, applications Apple, applications PC, applications Web… l'environnement logiciel semble être devenu complètement fou au cours des deux ou trois dernières années. . Tout cet enthousiasme suscité par la création d'applications s'est répercuté de manière intéressante sur le lexique de styles de conception Web: là où le Web ressemblait à un site Web, il ressemble aujourd'hui davantage à une application. Tout, qu'il s'agisse de fenêtres modales, de menus contextuels, de boutons inspirés du système d'exploitation, etc., est introduit dans l'environnement de conception Web de manière nouvelle et intéressante… le résultat final: des sites plus conviviaux et plus naturels..


Schémas intensifs de grille

Les mises en page de grille ne sont pas nouvelles en 2010 (ni même en 1980), mais les concepteurs Web commencent à se détacher des mises en page Web traditionnelles (en-tête, colonne de contenu, barre latérale, pied de page) au profit de mises en page plus uniques et basées sur une grille. Ce qui a commencé avec le mouvement 960.gs s'est rapidement étendu aux systèmes de grille qui peuvent réellement s'adapter à la résolution de l'écran du spectateur..


Images massives

Voici une autre tendance qui se poursuit depuis plus que la dernière année. Les images volumineuses étaient autrefois tabou pour les concepteurs Web, mais grâce à une meilleure optimisation des images, à des connexions Internet plus rapides et à des méthodes de chargement plus intelligentes, les concepteurs peuvent gagner beaucoup sur certains sites en poussant au maximum la taille des images..

Plus que de "grandes images", nous commençons à être de plus en plus orientés vers des sites utilisant de vastes fonds illustratifs (et photographiques) faisant partie de l'expérience réelle, car ils sont simplement des illustrations supplémentaires..


Intégration de scripts immersifs (curseurs jQuery, etc.)

Les plugins codés étaient souvent utilisés après coup dans la plupart des conceptions web… vous finissiez une maquette, puis remplaciez une image par un curseur si vous pouviez trouver un plugin de qualité. De nos jours, des conceptions entières peuvent être basées sur des scripts et des plugins qui font plus que "ajouter quelque chose" à une conception… ils peuvent définir toute l'expérience du site.

Voici quelques exemples de sites qui n’ajoutent pas que de l’interactivité aux scripts, ils en font la fondation du site:

Vous pouvez en savoir plus sur jQuery et d’autres astuces d’intégration de script sur notre site partenaire: Net.tutsplus.com.!


CSS3 frappe le courant principal

Si j'avais un centime pour chaque article CSS3 que j'ai vu en 2010, je nagerais dans une piscine. Bien que l’adoption massive de CSS3 soit encore loin (voici un lien pratique pour savoir quels navigateurs ont adopté quelles parties de CSS3), les concepteurs n’ont pas hésité à commencer à utiliser certaines des nouvelles fonctionnalités fantastiques. Des angles arrondis, des ombres de boîte, des effets de lumière, une animation CSS3, @ font-face, etc. ont commencé à apparaître dans les conceptions. voici juste une poignée d'exemples:

Vous pouvez en savoir plus sur les astuces CSS3 sur notre site partenaire: Net.tutsplus.com!


Texture, Texture, Texture

Les textures ne sont pas nouvelles, mais au fil des années, nous les voyons s'intégrer de manière nouvelle et intéressante. L'année 2010 a vu beaucoup de texture "subtil", mais plus que tout, nous commençons à entrer dans une phase de style où de plus en plus de designs commencent à être "touchables". Cela ne signifie pas nécessairement que des textures volumineuses, lourdes en termes de fichier, sont utilisées… nous voyons plutôt des textures plus subtiles et bien conçues qui se répètent naturellement..


Designs infographiques

J'ai toujours été un grand fan d'infographies, c'est donc bien que nous commencions à les voir être intégrées à la conception Web en tant que plus que des pièces jointes. Je pense qu'il y a beaucoup d'opportunités pour de nouvelles et passionnantes méthodes d'intégration de sites infographiques, alors surveillez bien ces conceptions en 2011..


Sites à une seule page


Environnements 3D

C'est plus une nouveauté qu'une tendance… Les sites basés sur la 3D sont amusants à utiliser, mais ne sont pas entièrement accessibles depuis certains navigateurs et appareils. Cela dit, il y a de nouvelles choses amusantes dans les environnements tridimensionnels, elles valent donc la peine d'être vérifiées, même si vous ne les verrez pas bientôt sur votre iPhone;)


Convergence des médias sociaux

La dernière tendance que je vais mentionner n’est pas celle qui nécessite beaucoup de captures d’écran… principalement parce que le décalage est plus important. stratégie que substance. Tandis que cette tendance se poursuit depuis des années, les choses semblent se concrétiser… et le sort de l'avenir d'Internet va être décidé.

Ce dont je parle c'est "convergence des médias sociaux", ou plutôt, la tendance des marques et des entreprises à concentrer leurs efforts sur les sites de médias sociaux (plutôt que sur leurs propres sites indépendants). Au lieu de domaines particuliers, de plus en plus d'entreprises commencent à adopter des stratégies basées sur des sites tels que Facebook, ou tout au moins intégrant des fonctionnalités sociales de manière totalement dépendante des sites de médias sociaux..

… Au lieu d'un Internet composé de millions de sites différents et uniques, nous pourrions nous retrouver avec une poignée de «méga-sites» sur lesquels tout le monde (particuliers ou entreprises) dispose simplement d'une page…

Cela a du sens pour un certain nombre d’entreprises; Il est beaucoup plus facile de faire découvrir et visiter votre page Facebook ou Twitter aux gens que de les laisser tomber par hasard sur votre propre domaine (par exemple: myownawesomewebsite.com/me). Les gagnants de cette tendance sont, bien sûr, les grands sites de médias sociaux qui rassemblent de plus en plus de trafic. Les perdants? Eh bien, si cette tendance se maintient, les perdants pourraient très bien être tous ceux qui ne prennent pas le train en marche… alors au lieu d'un Internet composé de millions de sites différents et uniques, nous pourrions nous retrouver avec une poignée de «méga-sites». que tout le monde (particuliers et entreprises) ait simplement une page sur.


Que la discussion commence!

D'accord, je viens donc de frapper la pointe de l'iceberg pour toutes les grandes tendances de 2010, et je serai le premier à admettre que je suis sûr d'avoir manqué quelque chose. Postez vos commentaires, pensées, tendances et tout autre élément dans la section commentaires et je prendrai en compte les commentaires vraiment intéressants lorsque viendra le temps de modifier ce message plus tard.!

Bonne année 2011!