Tendances de conception Web pour 2010
Les puristes diront qu'un bon design est intemporel. Oui, dans un monde idéal, nous devrions ignorer les tendances.
Sur le plan pragmatique, la surveillance et l’intégration des tendances de la conception, en particulier en ce qui concerne les sites Web, présentent un grand intérêt.
Let's face it: le web change à un rythme rapide. Contrairement aux autres médias, les tendances en matière de conception sur le Web ne sont pas uniquement dictées par l’esthétique.
La technologie change, ce qui peut modifier radicalement les capacités du support.
En 2010, nous voyons les concepteurs continuer à repousser les limites du design web, en définissant les tendances claires suivantes ...
Design d'impression
Le design d'impression a toujours été une source d'inspiration pour le web. La conception de sites Web existe depuis assez longtemps pour former un noyau solide de concepteurs qui n’ont jamais travaillé dans l’impression. En conséquence, nous voyons plus d'inspiration tirée de l'imprimé, car ces concepteurs regardent au-delà du Web.
Serif Polices
L'une des questions les plus importantes de la typographie est la lisibilité. Les concepteurs d'impression ont toujours privilégié les polices serif car les bords améliorent la visibilité et facilitent la reconnaissance des caractères.
Les polices sans empattement ont généralement été considérées comme plus faciles à lire à l'écran. Mais avec un plus grand nombre d’utilisateurs naviguant à haute résolution et les améliorations apportées à la technologie de lissage des polices, les polices serif sont devenues très lisibles pour le corps du texte.
Grandes têtes
Les concepteurs d'imprimés utilisent des gros titres pour attirer l'attention depuis longtemps. Le matériel imprimé devait avoir un impact important s'il devait être lu du tout. Si vous avez vu une brochure terne assise sur un bureau, voudriez-vous la récupérer? Probablement pas.
Cette tendance a commencé en 2009 et n'a gagné en popularité. Il a été prouvé que les gros titres attirent l'attention et communiquent clairement.
Dispositions multi-colonnes
Les concepteurs doivent travailler avec les contraintes de leur support. Contrairement au Web, l'impression n'offre aucune option pour le défilement, car elle est liée aux dimensions du papier. L'utilisation de plusieurs colonnes vous permet d'ajouter plus de contenu dans le même espace.
Maintenant, avec les résolutions d'écran accrues et l'avènement des dispositions de grille, de plus en plus de concepteurs adaptent cette méthode au Web pour rendre les sites Web plus faciles à utiliser et intégrer davantage de contenu.
Big Lead Image
Une image vaut mieux que mille mots. Bien que cela puisse prendre un certain temps avant qu'une photographie ait le même impact sur le Web que dans l'impression (qui a une résolution beaucoup plus élevée), l'adoption de l'accès à large bande a rendu les grandes photographies plus réalisables.
Nous voyons de plus en plus de sites Web utiliser de grandes images à fort impact pour attirer les utilisateurs et créer une expérience immersive.
Diagrammes et infographies
Les concepteurs d'imprimés utilisent les graphiques pour transmettre des informations complexes depuis des années. Cela se voit le plus souvent dans les magazines et les rapports annuels.
Les graphiques peuvent communiquer des relations et des rapports complexes d'une manière trop difficile à faire avec du texte brut. Les infographies ont tendance à avoir une apparence simple mais visuellement riche, et plus de concepteurs adoptent des infographies ou imitent le style dans leurs conceptions.
Simplicité
Antoine de Saint-Exupéry a dit un jour: "La perfection est atteinte non pas lorsqu'il n'y a plus rien à ajouter, mais qu'il n'y a plus rien à retirer". Les avantages de la simplicité dans la conception sont nombreux.
Hick's Law nous dit que le temps requis pour prendre une décision augmente avec chaque option. De plus, la théorie du signal sur bruit nous dit que tout ce qui n’ajoute rien au message ou à la fonction d’un site Web (le signal) fait obstacle et rend le design moins efficace (le bruit).
Les conceptions simples sont plus faciles à utiliser et à comprendre, et permettent une plus grande clarté dans la communication des messages.
Design minimaliste et quadrillé
Le minimalisme est puissant mais difficile à maîtriser. Il ne contient rien d'autre que l'essentiel. Tout le reste est supprimé, ce qui entraîne un impact maximal des éléments présents.
Les conceptions minimalistes exigent un système de grille solide pour être efficaces. Naturellement, ils auront beaucoup d'espace blanc et, sans cette grille, un design minimaliste se sentirait déconnecté et négligé. La grille lui donne une organisation et une structure.
Mise en page unique
Il y a plusieurs façons de simplifier. Une mise en page d'une page présente deux de ces manières: cacher et supprimer.
Les mises en page efficaces d'une page masquent tous les éléments qui ne sont pas prioritaires. Si un utilisateur souhaite voir l'un de ces éléments, il peut cliquer pour le découvrir. C'est beaucoup plus efficace que de tout laisser visible, ce qui rendrait la page compliquée et accablante.
De même, le principe des mises en page d'une page rend les pages supplémentaires inutiles. Grâce à la disponibilité de bibliothèques JavaScript puissantes et de connexions plus rapides, de nombreux sites Web n’ont plus besoin de plusieurs pages. Les concepteurs peuvent facilement adapter les informations sur une seule page sans déranger l'utilisateur par une hiérarchie.
Espace blanc massif
Dans les premiers temps de la conception de sites Web, nous n'avions pas beaucoup d’écrans immobiliers pour travailler, et nous n’avions donc pas beaucoup d’espace. Si vous avez déjà essayé de concevoir un site Web pour une résolution de 640 × 480, vous saurez exactement de quoi je parle.
Maintenant que nous avons des résolutions plus élevées et la possibilité de masquer et de révéler des éléments avec JavaScript, il est beaucoup plus facile d'exploiter les espaces blancs.
L'espace blanc est essentiel à une bonne conception. Cela donne à l'œil un endroit où se reposer. Il améliore naturellement la qualité d'un design. Et il montre quels éléments sont liés les uns aux autres par la proximité.
Dispositions typographiques
Alors que nous étions confinés à quelques "polices Web sécurisées" avec très peu de contrôle sur la manière dont ils étaient affichés, nous disposons désormais d'un large éventail d'outils pour enrichir notre typographie.
Les concepteurs Web apprécient depuis longtemps d’utiliser le type comme outil subtil pour communiquer des messages. Avec un contrôle et des capacités accrus, nous voyons plus de concepteurs se concentrer sur la typographie comme élément de conception principal.
Techniques CSS3
Vous n'êtes pas sûr de pouvoir tirer parti de CSS3? Pensez à nouveau. Les pionniers du Web tels que Andy Clarke et Jeremy Keith ont longtemps prêché sur "l'amélioration progressive" dans la conception de sites Web.
L'amélioration progressive consiste à concevoir des sites Web de manière à ce qu'ils soient utilisables sur les anciens navigateurs, tout en étant «améliorés» pour les utilisateurs qui s'engagent sur les dernières technologies.
La conception dans ce camp vous permet de tirer parti des propriétés CSS3 telles que les coins arrondis, les arrière-plans de bordure et les ombres de texte et de boîte. Les utilisateurs des navigateurs modernes verront la version plus agréable, et ceux qui utilisent une technologie plus ancienne ( toux | IE6 | cough ) verront la version de base.
Animation CSS3
L'animation sur le web a traversé de nombreuses étapes. Au départ, nous ne pouvions animer qu'avec des fichiers images GIF. Ensuite, nous étions pratiquement limités à Flash. Maintenant, nous pouvons choisir entre Flash, Silverlight, GIF, JavaScript et même CSS3. Une animation subtile peut être mémorable et CSS3 le rend léger et facile.
Coins arrondis
Le style Web 2.0 de 2005 et 2006 a rendu les coins arrondis populaires, au point d’être ennuyeux. À l'époque, leur création était difficile. Il n'y avait pas de moyen de créer des coins vraiment arrondis. Au lieu de cela, ils ont été simulés avec CSS, les hacks JavaScript et les fichiers image.
CSS3 nous permet maintenant de générer des coins arrondis directement dans le navigateur, ce qui les rend non seulement plus faciles à créer mais aussi beaucoup plus efficaces, car l'utilisateur n'a pas à télécharger des images ou des fichiers JavaScript supplémentaires.
Les concepteurs profitent de plus en plus de cette nouvelle fonctionnalité de navigateur en 2010.
Boîte et texte Ombres
L'utilisation des ombres pour créer une impression de profondeur a été faite (et parfois exagérée) depuis les premiers jours du Web. Mais ce n'était pas toujours pratique. Pour ajouter des ombres au texte, vous devez utiliser des images, ce qui augmente le temps de chargement et rend la maintenance plus difficile. Box shadows nécessitait plusieurs images et astuces CSS comme "portes coulissantes".
CSS3 dispose de fonctionnalités d'ombre hautement personnalisables, qui permettent un large éventail d'effets créatifs, y compris non seulement les ombres portées, mais aussi les ombres intérieures. Les concepteurs créatifs ont déjà utilisé ces effets CSS3 pour simuler des effets en relief et imprimés.
RGBa et Opacité
Pendant des années, travailler avec l'opacité et la transparence sur le Web était presque impossible. Vous aviez trois possibilités: simuler la transparence en utilisant des images plates, gérer les incompatibilités entre navigateurs de PNG, ou avoir du mal avec les filtres et sélecteurs de transparence CSS.
CSS3 donne aux concepteurs beaucoup plus de cohérence et de liberté dans l'utilisation de l'opacité avec la propriété RGBa. Bien que vous puissiez tirer parti de la transparence de nombreuses manières, un aspect particulièrement intéressant concerne les arrière-plans complexes superposés avec des couleurs semi-transparentes. Auparavant, cet effet était impossible ou impossible à créer sans recourir à des images PNG complexes.
Conception compatible avec le mobile
Le Web mobile a donné à des millions d’utilisateurs la possibilité de vérifier leur compte bancaire en attendant, de rechercher les derniers scores dans le métro et de mettre à jour leur statut Twitter au volant. (Lequel d’entre eux est une habitude dangereuse?) Et le Web mobile continue de croître rapidement.
Nous sommes arrivés au point où chaque entreprise doit se demander si son site Web sera utilisé en déplacement, et si oui, comment. Les entreprises innovantes ont déjà beaucoup investi dans des versions mobiles utiles et conviviales de leurs sites Web.
La créativité
La croissance explosive de l'utilisation des médias sociaux est la preuve que les gens veulent se connecter et partager des choses qui les passionnent.
Dans le domaine du design, nous avons constaté une forte croissance du partage et de la navigation dans le travail d'autres personnes. En tant que concepteurs, nous sommes maintenant bombardés par la créativité de tous. Non seulement cela augmente le niveau de qualité de la conception, mais cela encourage les idées à partager, ce qui contribue à une culture de créativité et d'innovation.
Illustrations propres
Si vous êtes comme moi, vous avez grandi en regardant des films de Disney, admirant tous les efforts déployés pour créer chaque image d'animation. Nous avons bien dépassé le temps où l'illustration était faite à l'encre et aux marqueurs, et cette évolution des outils a mené à des approches très créatives de la conception.
De nombreux concepteurs apprennent que des illustrations nettes, propres et nettes créent une sensation distincte qui ne peut pas être reproduite par la photographie ou de simples images clipart. Le résultat est un large éventail de designs illustrés par des professionnels qui sont attrayants et invitants.
Arrière-plans texturés
Les arrière-plans texturés ne sont pas nouveaux sur le Web. Mais cette technique a connu une variation intéressante au cours des derniers mois. Je l'appelle "micro-textures" qui sont des textures subtiles et à peine perceptibles en arrière-plan.
Des vignettes
Vous dites peut-être que "les miniatures existent depuis l'aube du Web. En quoi est-ce une tendance? "C'est vrai, ils ont toujours été utilisés, mais très simplement. Vous auriez une vignette sur laquelle vous pourriez cliquer pour obtenir une image plus grande. Il a fait le travail mais était ennuyeux.
Au cours des derniers mois, les concepteurs ont commencé à se demander: «Comment rendre les vignettes plus intéressantes?» Cela a entraîné une augmentation des vignettes à la fois intelligentes et utilisables.
Aquarelle
À mesure que le Web évolue, de plus en plus de concepteurs sont inspirés par une variété de sources et de médias. Pas étonnant que les beaux-arts soient parmi ces sources.
Un des styles qui a émergé est la simulation des aquarelles. Le look élégant et doux de ce style est distinct et apaisant.
Écriture
Les polices manuscrites et les polices de script sont les plus utilisées. Pour cette raison, de nombreux concepteurs évitent les deux types, soit par dégoût, soit par crainte de paraître amateur. Mais ces derniers temps, de nombreux concepteurs ont constaté que le style manuscrit, s’il était utilisé correctement, traduisait un sens de l’artisanat et de la planification. Utilisé dans le bon contexte, c'est un moyen puissant de communiquer.
Des médias sociaux
Étant donné que les gens passent plus de temps sur Facebook que Google, il n'est pas étonnant que les concepteurs cherchent des moyens innovants d'intégrer les médias sociaux sur leurs sites Web.
Certains concepteurs sont allés jusqu'à publier leur contenu sur les réseaux sociaux, puis à utiliser leurs sites Web pour l'agréger.
Il est raisonnable de dire qu'à mesure que 2010 progressera, nous verrons plus de concepteurs trouver des moyens créatifs d'intégrer les médias sociaux sur leurs sites Web afin de mieux impliquer les utilisateurs.
Éléments fixes
Maintenant que les navigateurs supportent mieux le position: fixed élément, nous en voyons des utilisations plus intelligentes.
Il existe de nombreuses situations dans lesquelles un élément fixe (comme la navigation persistante) peut servir les objectifs commerciaux du propriétaire et rendre le site Web plus utilisable.
Les éléments fixes sont mémorables et améliorent l'expérience utilisateur. Ils ont d'innombrables utilisations créatives et nous continuerons à voir les concepteurs en profiter.
Ce post invité est une collaboration entre les bons amis de Web Hosting Search et le concepteur et développeur Ross Johnson. Découvrez la recherche d'hébergement Web hébergement Web et 3point7designs pour plus de génial design web par Ross
Lesquelles de ces tendances suivez-vous le plus? Quelles sont les autres tendances émergentes?