Dans cet aperçu, vous découvrirez chaque tendance et de beaux exemples qui vous inspireront pour votre prochain projet.
1. Disposition extraordinaire
Figure 1
2. Mise en page sur une seule page
Figure 2
3. Disposition multi-colonnes
Figure 3
4. Illustrations géantes et graphiques éclatants
Figure 4
5. Plus d'espace blanc qu'avant
Figure 5
6. Éléments de conception sociale
Figure 6
7. Navigation conversationnelle
Figure 7
8. Onglet Dynamique
Figure 8
9. Grand champ de recherche
Figure 9
10. Ajouter des effets visuels à la classification
Figure 10
11. Avatar de l'auteur
Figure 11
12. Icônes et repères visuels
Figure 12
13. index de balises (remplacement du nuage de balises)
Figure 13
14. Utiliser des illustrations dans les blogs
Figure 14
15. Peinture à l'aquarelle
Figure 15
16. Écriture manuscrite
Figure 16
17. Rétro
Figure 17
18. Utilisez des matériaux organiques, des briques et des photographies comme arrière-plan
Figure 18
19. Sceau de marquage
Figure 19
20. Étiquette de prix
Figure 20
21. Ruban
Figure 21
Disposition extraordinaire
Comme démontré dans 40 mises en page de conception innovantes : Mise en page extraordinaire il y a quelques mois, nous observons une forte tendance vers des mises en page plus personnalisées et innovantes. Au lieu d'utiliser des mises en page traditionnelles en forme de boîte, les concepteurs expérimentent de nouvelles façons de structurer, de présenter et d'exprimer l'information.
Dans ces conceptions de mise en page extraordinaires, la créativité globale est souvent plus importante et mémorable que le contenu spécifique. Pourtant, la convivialité, la typographie et la conception visuelle sont rarement négligées et exécutées avec soin. La mise en page innovante est particulièrement populaire dans les grands projets, les agences de conception de sites Web et les sites Web promotionnels (comme les activités commerciales des grandes entreprises), mais elle est également populaire dans les blogs.
Figure 22
En matière de créativité, la frontière entre un design utilisable et inutilisable est très floue ; c'est pourquoi les tests d'utilisabilité sont particulièrement importants, car une nouvelle idée peut casser les éléments existants sur le site Web. C'est souvent une bonne idée d'avoir un équilibre entre les designs créatifs, classiques et traditionnels, ce qui signifie essayer de trouver un équilibre entre un design utilisable « indestructible » (ou même finalement ennuyeux) et un design créatif mais inutilisable. N'oubliez pas que les idées prennent du temps à se développer : elles sont repensées, révisées, peaufinées, affinées et finalement intégrées à votre conception.
Les concepteurs sont fortement encouragés à rompre avec les conventions des présentations de boîtes traditionnelles et à essayer de nouvelles approches et vos propres idées audacieuses et folles. Mettez en valeur vos talents !
Figure 23
Figure 24
Figure 25
Figure 26
Figure 27
Figure 28
Mise en page sur une seule page
Une autre façon que les concepteurs utilisent souvent pour impressionner les visiteurs est la mise en page dite sur une seule page : cette mise en page utilise une seule page pour présenter le contenu du site Web. Cela ne signifie pas nécessairement que ces designs sont minimalistes (suivant le principe « moins c'est plus »). Au contraire, ce type de conception est souvent très complexe, contient des images riches et des effets d'animation vifs, et prend donc un certain temps à charger.
Figure 32
Lorsque l'utilisateur clique sur une option de navigation, la page change (change partiellement) et le nouveau contenu de http://www.knowsky.com apparaît dans la zone où est affiché le contenu précédent. Les effets de glissement et de défilement de navigation dans cette mise en page sont pris en charge par les bibliothèques JavaScript publiques.
Le principal avantage pour les utilisateurs vient du simple fait qu’il faut moins de mouvements de souris et de clics pour obtenir les informations souhaitées. Étant donné que cette approche est si nouvelle, elle constitue une excellente opportunité pour les utilisateurs qui pourraient être confus en utilisant une navigation non traditionnelle. Il existe certaines situations où une version « statique » peut s'avérer utile, voire nécessaire ; par exemple, vous devrez fournir une autre version pour les moteurs de recherche et les utilisateurs qui ont désactivé JavaScript.
Figure 33
Figure 34
Figure 35
Disposition multi-colonnes
Plusieurs colonnes (plus de 3 colonnes) ne signifient pas nécessairement une conception complexe. D'un autre côté, si elles sont conçues correctement, plusieurs colonnes peuvent être très utiles aux visiteurs car elles fournissent un meilleur aperçu des options de navigation visibles, permettant aux utilisateurs de trouver rapidement les informations qu'ils recherchent.
Au cours des dernières années, nous avons assisté à une explosion du contenu des sites Web, ce qui a réduit l'attention et le temps que les utilisateurs investissent sur le site Web (voir ReadWriteWeb pour plus de détails). Il n’est donc pas étonnant que les concepteurs essaient de trouver des manières plus concises de présenter les informations, afin que les visiteurs puissent rester sur le site Web le plus longtemps possible et trouver le contenu plus facilement.
Figure 36
Une façon d'y parvenir consiste à utiliser une mise en page avec plusieurs colonnes adjacentes. Cette idée est parfaitement logique. Les résolutions d'écran ont augmenté ces dernières années (cependant, cela pourrait changer si les netbooks comme l'Asus Eee PC deviennent largement disponibles), offrant aux utilisateurs plus d'espace horizontal et aux concepteurs un espace supplémentaire pour remplir le contenu.
Les résultats montrent que de plus en plus de concepteurs utilisent de plus en plus de colonnes dans leurs conceptions. Nos recherches ont révélé une forte tendance vers ces dispositions dites multi-colonnes, généralement avec une largeur fixe de 850 pixels sur un écran de 1 000 pixels. Plusieurs colonnes sont souvent utilisées dans les mises en page de magazines et les grands projets. Dans ces mises en page, les grilles sont souvent utilisées pour garantir l’équilibre structurel, la hiérarchie et l’ordre.
Lorsque vous utilisez une disposition à plusieurs colonnes, l’importance de l’espace blanc actif et entre les colonnes individuelles ne peut être surestimée. (L'espace blanc actif est intentionnellement laissé vide pour mieux représenter la structure de la page et mettre en valeur différentes zones de contenu.)
À cette fin, les concepteurs utilisent souvent le « mantra de Shneiderman » (« Montrez d'abord la vue d'ensemble, montrez les détails plus tard »). , en donnant d'abord à l'utilisateur un aperçu des fonctionnalités, puis en fournissant des détails sur demande - plus tard, lorsqu'il clique sur un lien (Mozilla Labs en est un excellent exemple).
Figure 37
Figure 38
Figure 39
Figure 29
Figure 30
Figure 31