Share
Comme le dit si bien Ferris Bueller: "La vie va très vite; si vous ne vous arrêtez pas et regardez de temps en temps, vous risquez de la manquer". Suivons ses conseils avisés et prenons un moment pour jeter un coup d'œil aux tendances en matière de conception de sites Web observées en 2011..
Le Web est une bête en constante évolution, pleine de défauts, d'imperfections et d'expérimentations. - Dan Cederholm
Responsive Web Design est en train de devenir un peu une chanson brillante, mais sur-jouée. Il semble que tout le monde ait eu son mot à dire et l'ordre du jour d'Ethan Marcotte n'a jamais été aussi sain. Il y a une bonne raison pour cela cependant; le concept est simple, les motifs sont logiques, la technologie est simple et les résultats sont extrêmement satisfaisants.
L'année 2011 a vu une explosion du nombre de sites Web construits de manière réactive, et la beauté de ce concept réside dans le fait que nous participons tous à l'élaboration du processus. Il en est encore à ses balbutiements. Les concepteurs et les développeurs concoctent sans cesse de nouvelles approches, et nous sommes encore loin de définir de véritables meilleures pratiques. Devrions-nous d'abord concevoir pour les grands écrans et utiliser les requêtes des médias pour dégrader gracieusement nos conceptions pour mobile? Ou devrions-nous concevoir d'abord pour le mobile, en améliorant progressivement pour des appareils plus performants? Paul Irish a lancé un fil intéressant sur GitHub si vous souhaitez vous plonger dans la discussion.
RWD a mis l'accent sur le contenu. Outre tous les autres facteurs, le contenu de tout site Web est ce qui importe. La viande et les deux légumes doivent être lisibles, accessibles et claires sur tout appareil. Les concepteurs prennent certainement cela en compte, comme en témoignent nombre des nouveaux sites Web de 2011.
En fin de compte, même si vous êtes un peu fatigué de voir encore plus de didacticiels RWD et d'articles apparaître, restez à l'écoute. 2012 va voir de grands développements dans la façon dont nous l'abordons tous.
Partenaire criminel de la mise en page réactive est la grille. En 2011, les structures de réseau fixes ont apporté des améliorations flexibles, sans parler de l'apparition d'outils supplémentaires pour nous aider. Tous les cadres, outils et guides suivants répondent aux besoins actuels et offrent une fluidité optimale. La plupart de ces sites présentent également un excellent design réactif, comme le montrent les vignettes 1: 1 ci-dessous:
De toute évidence, la typographie n'est pas une discipline apparue en 2011, mais un domaine de la conception Web qui continue de croître et qui est facilitée plus que jamais par les polices et les services Web..
Deux aspects remarquables de la typographie sont l’esthétique (les polices Web permettent aux concepteurs de se faire plaisir) et la compréhension croissante que ce type existe avant tout pour être lu. Les polices n'ont pas besoin d'être microscopiques pour apparaître chiques, et l'accent mis sur le contenu nous pousse d'abord vers un réseau plein de caractères gros et beaux..
L'année 2011 a été marquée par des avancées considérables en termes de fonctionnalités de navigateur (et de numéros de version!). Même Microsoft a récemment concédé que les mises à jour automatiques d'Internet Explorer sont probablement une bonne idée. Tout cela signifie que les concepteurs Web ont plus de jouets à jouer en termes de HTML et de CSS, ce qui conduit naturellement à la créativité grâce à la technologie. L'approche 'parce que je peux', si vous aimez.
Je ne peux pas penser à un meilleur titre pour ce morceau, désolé. Alors de quoi est-ce que je parle? Défilement vertical.
C'est une tâche quotidienne pour les concepteurs Web de minimiser l'importance du pli. Il est impossible de définir le repli avec la pléthore d'appareils et de résolutions de nos jours, de sorte que le contenu "au-dessus" ne devrait pas être la priorité numéro un du client dans une solution de conception..
Nous embrassons le défilement vertical. La montée des appareils mobiles a rappelé aux gens qu'ils pouvez faire défiler et là est contenu pertinent au-dessous des premiers pixels d'une page Web. Certains concepteurs ont poussé cela plus loin et ont fait du défilement une partie fondamentale de l'expérience de navigation..
Une approche consiste en des effets de parallaxe subtils.
Remarque: Les images ci-dessous ne font évidemment pas justice aux sites Web - allez les vérifier (et préparez la molette de la souris…)
Ensuite, il y a l'idée que certains contenus peuvent défiler jusqu'à un certain point. En 2011, cet effet a été largement utilisé. en gardant constamment à l'esprit les icônes sociales, les paniers d'achat, les barres de menus, les appels à l'action, etc.:
Alors, comment cela a-t-il été réalisé? Souvent, une combinaison de jQuery et de positionnement CSS. Voici juste deux ressources pour vous aider:
Certains sites ont poussé le concept encore plus loin, en animant des éléments et en appelant des événements lorsque certains points verticaux de la page sont atteints:
Et puis il y a des exemples qui prennent le défilement d'une page Web dans une dimension totalement nouvelle (vraiment, regardez celle-ci)…
Diagonal est gênant, il ne joue pas avec l’environnement basé sur la grille d’aujourd’hui, mais pour une raison quelconque, des lignes obliques ont surgi un peu partout en 2011, c’est comme un retour à Je trouverai d’autres rappels visuels de cette époque aussi; combinaisons de couleurs étranges, effets de lumière, beige et bronze. Bizarre.
Je ne peux m'empêcher de me souvenir d'anciennes annonces de magazines avec leurs lignes abstraites en diagonale, leurs empattements, leurs grands cheveux, Joan Collins et leurs perles. C'est un regard étrangement attrayant…
Approche des mises en page de manière modulaire est encore une chose privilégiée par Responsive Web Design. La gestion des zones d'une conception en morceaux modulaires permet un repositionnement fluide et une séparation claire du contenu. Vous pourriez soutenir que la montée en puissance des interfaces modulaires est due à l'influence des applications. Nous nous trouvons de plus en plus à publier (et à accéder) du contenu Web via des applications externes telles que Facebook et Twitter; les lignes sont floues entre les écrans de bureau et les appareils de poche.
J'ai demandé au maestro Ivor, examinateur de Themeforest, ce qu'il avait vu se dérouler sur le marché numéro un d'Envato au cours de la dernière année. Il a observé quelques aspects de tendance:
2011 a été l'année de Minimal Design dans ThemeForest - Ivor Padilla
Vous n'avez pas besoin d'aller au fond des archives de Themeforest pour voir ce qu'il veut dire non plus…
Il n’ya aucun moyen pour moi de couvrir tous les développements significatifs de la conception Web en 2011, alors tenez-vous au courant de vos commentaires! Quelles tendances vous ont marqué en 2011? Où en sommes-nous en ce moment et où pensez-vous que les choses vont?
Accentsconagua