Le design mobile m'a permis de dessiner plus verticalement. Et je ne pense pas que ce soit juste moi.
Je vois de plus en plus de sites sur toutes les plates-formes incorporant davantage de composants verticaux dans leur conception globale. Oublier? Au-dessus du rouleau ,? Parlons de la verticale.
Conception horizontale ou verticale
Pendant longtemps, la conception de sites Web a été centrée sur un concept distinctif: au-dessus du rouleau. mentalité. Pour concevoir des tablettes et des appareils mobiles, vous devez modifier votre orientation par défaut. Tous les sites mobiles bien conçus ajoutent réellement une influence verticale aux projets de conception, à la fois en ligne et sur papier.
Un grand nombre des mêmes principes de base s’appliquent que vous travailliez horizontalement ou verticalement. Une typographie propre, une palette de couleurs et des images fortes, et une organisation globale sont importants.
Concevoir dans un espace vertical n'est pas un nouveau concept cependant. Les graphistes le font depuis des années - pensez aux journaux et aux magazines comme des exemples classiques. Ce qui est nouveau, c'est la possibilité verticale presque illimitée. Dans les projets Web verticaux, vous pouvez augmenter la profondeur autant que vous le souhaitez (bien que cela ne soit pas toujours recommandé).
Créer un espace vertical
Parfois, le premier défi consiste à créer un espace vertical approprié à votre projet. Cela se produira presque par défaut lorsque vous travaillerez sur un projet incluant une contrepartie mobile, mais qu'en sera-t-il du site Web lui-même? (Cela, dans l'environnement de navigateur actuel, n'aura jamais vraiment une forme toujours verticale.)
Si vous avez un blog ou un site Web avec une barre latérale, votre espace de travail est peut-être déjà plus vertical que vous le pensez. Insistez sur cette forme avec d'autres parties verticales, telles qu'une image forte en haut ou en bas ou un court bloc de texte à lecture verticale.
Une autre option consiste à étendre votre espace au-delà du défilement. Créer des écrans en cascade? qui sont parcourus de haut en bas. C'est un concept qui a été mal vu pendant un certain temps, mais il gagne à nouveau parce que les utilisateurs ont été «recyclés». faire défiler un site Web grâce à l'abondance d'applications mobiles et tablettes qui fonctionnent de la même manière.
Vous pouvez également planifier votre conception autour de plusieurs espaces verticaux en créant une grille de plusieurs colonnes larges. Dans cette configuration, chaque colonne a un objectif distinct (très semblable à une barre latérale) qui crée un espace de travail vertical. Vous pouvez créer un espace de travail vertical à une seule colonne en réduisant la largeur en pixels de votre espace de travail et en remplissant le reste avec une image d'arrière-plan.
La clé est de ne pas le forcer. Parfois, vous ne pourrez tout simplement pas faire fonctionner un espace vertical. Si vous ne pouvez pas concevoir en utilisant une orientation entièrement verticale, essayez d’utiliser quelques éléments de conception verticaux, tels que des barres de navigation ou des images, dans votre conception globale.
Utiliser des éléments verticaux
Parfois, planifier une conception verticale va au-delà de l’espace. Pensez à utiliser des éléments verticaux dans un espace horizontal pour créer une sensation de haut en bas. Expérimentez avec des photos verticales ou des blocs de texte hauts et minces. Mais encore une fois, ne forcez pas; ces outils ne sont efficaces que s'ils fonctionnent avec (pas contre) votre contenu.
Créez des éléments statiques, tels que des barres de navigation ou des logos, également verticalement. Rappelez-vous simplement de structurer ces éléments pour qu'ils restent utilisables. Les barres de navigation fonctionnent mieux pour une disposition de défilement lorsqu'elles ne sont pas trop profondes et se déplacent avec la page lorsque les utilisateurs naviguent. (Vous ne voulez pas que les utilisateurs soient frustrés d'essayer de trouver des choses.)
Vous pouvez également utiliser la couleur pour créer une sensation plus verticale sur votre site. Pensez à l'arrière-plan - les rayures verticales peuvent ajouter un? Plus grand? sentir lorsqu'il est placé derrière d'autres objets.
Conception verticale en action
La conception d'impression s'appuie sur une toile verticale depuis des centaines d'années. Certaines des publications les plus connues - The New York Times, USA Today, Vogue et People - ont des formats plus grands que larges.
Mais cela ne s'arrête pas là. Les affiches de films sont l’un des exemples les plus connus de projets de conception orientés verticalement.
De plus en plus de cartes de visite, bien qu’elles soient le plus souvent imprimées horizontalement, prennent un format vertical. Pourquoi? Parce que cela les distingue des centaines d'autres personnes de la pile. Il en va de même pour les autres supports promotionnels imprimés tels que les aimants et les autocollants. Pour les projets d'impression, la décision d'utiliser une orientation verticale lorsque la plupart des personnes travaillent horizontalement peut réellement ajouter un peu de dynamisme et de flair au projet.
Considérations verticales
Les dispositions verticales peuvent devenir lourdes et difficiles à naviguer rapidement.Les dispositions verticales peuvent devenir lourdes et difficiles à naviguer rapidement. Assurez-vous de donner suffisamment de poids aux en-têtes et aux outils de navigation lors de la conception dans un espace vertical afin que votre utilisateur (ou votre lecteur) ne perde pas la trace de ce qu'il regarde.
Lorsque vous utilisez un format vertical, vous pouvez envisager de rendre le texte plus petit de quelques points (avec un interligne supplémentaire) et d'inclure des dispositifs de navigation (qu'il s'agisse de barres de défilement ou de descriptions) qui suivent l'utilisateur sur le site Web.
Méfiez-vous également de l'espace horizontal dans la disposition verticale. Résistez à la tentation de forcer un style horizontal dans un espace différent; il sera probablement tomber en panne. Vous ne voulez pas mélanger d'autres éléments pour les adapter à un espace plus étroit. Recherchez des moyens de réorganiser ou d'empiler des éléments afin que l'espace de travail ne soit pas encombré.
Amour vertical
Voici quelques sites qui utilisent le concept vertical.
Activer
Le site est construit verticalement et ils vous aident à naviguer en utilisant le défilement pour? Ouvrir? la bouteille et le reste du site. (Cela ne vieillit jamais.)
Enviro Homes
La barre de navigation située en haut de ce site, à la verticale, s’ajuste de sorte que vous ayez toujours le visuel parfait sur votre écran d’ordinateur.
Lotta Nieminen
Ce site utilise des colonnes verticales pour établir la forme.Le mélange de rectangles vous encourage à parcourir la page.
100% pure Nouvelle-Zélande
En faisant défiler cette page, vous créez un effet vidéo qui vous permet de voir davantage de Nouvelle-Zélande.
Conclusion
J'aime la résurgence et l'importance que les concepts mobiles apportent aux projets orientés verticalement. L'évolution des environnements utilisateur et l'émergence d'un design réactif influencent également cette tendance.
Dans l’ensemble, concevoir verticalement n’est pas vraiment différent de son équivalent horizontal. Cela peut sembler un peu inconnu au début, mais en utilisant les mêmes outils et concepts que ceux liés à une bonne conception dans un schéma horizontal, vous pouvez créer de grands projets verticaux. Si le résultat vous inquiète, commencez petit et développez quelques éléments verticaux à intégrer à un projet avant de devenir complètement vertical. Vous trouverez peut-être à quel point vous appréciez la nouvelle vue!
Sources d'images: Illyissimo, Food SenseSimon Collison et Spigot Design.