Share
Maintenant que vous savez tout sur la couleur, la typographie et diverses choses à entreprendre avant de commencer un projet de conception, il est temps de vous familiariser avec les bases du travail avec les grilles dans vos conceptions..
Les grilles vous permettent de construire une structure et une forme solides dans vos conceptions. Tout comme nous avons examiné les hiérarchies typographiques et le rythme, nous pouvons effectuer les mêmes sentiments en utilisant une structure en grille. Comme pour le codage, il existe des méthodes recommandées pour organiser les modules et les sections de code, et un système de grille peut aider de la même manière lors de la conception pour le Web..
Les grilles ne sont pas seulement utiles pour nous, concepteurs ou développeurs, mais également pour l'utilisateur. Tout au long de cette session, j'ai insisté sur l'importance de créer un bon parcours utilisateur et une bonne expérience utilisateur à travers vos conceptions. Après tout, l'utilisateur est là pour consommer votre contenu et vous souhaitez en faire une expérience aussi réussie que vous. pouvez. Avoir un système de grille solide à utiliser dans vos conceptions (et ensuite jusqu'à la phase de développement) vous permettra de faire exactement cela, en créant une cohérence et une familiarité (et en créant ainsi une confiance) dans votre conception..
Si votre site Web est bien conçu, une grille vous aidera à projeter cette confiance davantage à vos utilisateurs - aussi consciemment que soit consciemment cette projection. L'utilisation d'un système de grille ne signifie pas non plus que vos conceptions doivent devenir ennuyeuses ou carrées. Comme cela a été dit avec la conception Web réactive, il vous incombe de créer un design unique et différent de celui-ci - et un système de grille doit être considéré comme une solution activer vous faire cela plutôt que restreindre vous.
… Une structure comprenant une série de lignes horizontales et verticales, utilisée pour arranger le contenu.
Dans ses termes les plus élémentaires, un système de grille est une structure comprenant une série de lignes horizontales et verticales qui se croisent et sont ensuite utilisées pour organiser le contenu. En termes plus simples encore (ce qui facilite la compréhension!), Un système de grille est un moyen de fournir un système avec lequel les concepteurs peuvent travailler pour structurer et présenter le contenu et les images de manière beaucoup plus lisible et facile à gérer..
Les systèmes de grille ont longtemps été utilisés dans les publications imprimées, mais avec leur introduction dans la conception pour le Web et les très nombreux frameworks de grille CSS qui sont apparus depuis, ils sont maintenant utilisés presque en standard..
L'utilisation d'un système de grille dans vos conceptions est un moyen d'atteindre un niveau de cohérence qu'il serait extrêmement difficile de maîtriser et de représenter dans vos conceptions. Encore une fois, l'uniformité et la cohérence sont essentielles à la création d'un site Web que vos utilisateurs trouveront facile à naviguer, à lire et à comprendre. Une bonne expérience utilisateur est créée en dialoguant avec votre utilisateur et en lui créant un sentiment de familiarité - et un système de grille vous aide à le faire en fournissant une base solide sur laquelle vous pouvez développer votre conception..
Un exemple de grille, le Gerstner, sur le site Web de l'application Gridset. Bien que votre système de grille soit finalement invisible pour votre utilisateur final, vous pouvez l'utiliser pour vous aider à créer des présentations pour vos conceptions. Mais, comme toutes les règles lors de la conception (et parfois lors de l'élaboration), les règles sont faites pour être enfreintes. Vous n’avez peut-être pas nécessairement besoin de vous en tenir à votre formation de grille, mais vous devez comprendre les systèmes de grille avant de pouvoir vous engager à enfreindre les règles..
Sur le Web, nous disposons de nombreux frameworks de grille CSS, ainsi que de nombreux outils à utiliser avec nos propres systèmes de grille que nous pouvons créer nous-mêmes. C'est à vous de décider lequel de ces éléments vous choisirez d'utiliser lors de la conception - par exemple, un framework CSS peut vous être familier en tant que développeur. Vous voudrez peut-être aussi essayer de le concevoir - mais voyons pourquoi. Concevoir avec un système de grille est une bonne pratique, mais vous aide également à décider quel système de grille utiliser..
L'utilisation de systèmes de grille présente de nombreux avantages - cela peut commencer lors de la conception initiale du site Web, mais peut également s'avérer utile lorsque vous passez aux étapes de construction et de développement, ainsi que lorsque vous gérez à la fois la conception et la construction du site Web..
La bonne chose à propos des systèmes de grille est qu'ils vous permettent de concevoir des proportions équilibrées entre tous les éléments que vous pourriez avoir dans votre conception. Un système de grille doit toujours être très flexible, de sorte que vous puissiez presque l'adapter à vos besoins lorsque vous concevez les différentes parties de votre site Web..
Une superposition de grille, avec des guides dans Photoshop. L'utilisation d'un système de grille dans votre conception permet également ce sentiment d'uniformité et de familiarité - bien que certains sites aient parfois des conceptions de page très différentes, cela ne sera pas le cas pour beaucoup et vous souhaiterez un système uniforme et plus structuré. sentir à la mise en page principale. Cela facilite également beaucoup le travail de codage de la conception, car cela signifie que vous pourrez choisir les éléments uniformes dans votre conception et appliquer cet effet modulaire à votre code et à votre structure CSS..
Par souci d’équilibre, regardons quelques inconvénients…
Tout d’abord, beaucoup de personnes - en particulier les débutants dans la conception ou la conception avec des grilles - peuvent trouver que les systèmes de grille sont assez étouffants et limitent la créativité. Malheureusement, cela peut parfois arriver et - pardonner le jeu de mots - vous pouvez parfois avoir l'impression qu'on vous empêche de penser en dehors de la boîte et que vous créez plutôt des conceptions cliniques très claires. Dans ce genre de cas, je vous encourage à essayer de vous éloigner de la grille, mais plutôt de jouer avec les éléments d’une page jusqu’à ce qu’ils aient l’impression d’être au bon endroit, puis de passer à l’affichage des éléments. votre grille superposant votre conception (nous en parlerons un peu plus loin) et voyez comment vous pouvez adapter vos idées à la structure de grille que vous avez. Si cela ne correspond pas à la conception de la grille, il est peut-être temps de commencer à utiliser un autre système de grille ou une autre conception..
Les systèmes de grille sont aussi vraiment, vraiment difficile. Non seulement ils ont besoin de beaucoup de volonté pour se faire une idée des premières fois que vous les utilisez (bien que vous ayez probablement un moment «aha!» Peu de temps après quelques bons entraînements et jeux avec eux), mais ils peuvent aussi parfois impliquer beaucoup de maths et de calculs. Je ne suis pas du genre à me débrouiller avec beaucoup de calculs, donc je peux trouver cela très difficile personnellement. Il est également très difficile de simplement comprendre le concept des grilles et de voir comment elles peuvent aider votre conception - mais nous espérons que vous commencerez à en voir les effets peu après leur utilisation dans vos conceptions, comme vous l’auriez probablement fait avec votre pratiques de développement quelque part sur la ligne. Et bien que les grilles soient un travail difficile, elles en valent la peine pour le résultat final.
Voici quelques conseils simples et pratiques pour utiliser les systèmes de grille dans vos conceptions:
Vous devriez maintenant avoir une bonne idée des systèmes de grille, de leur nature et des moyens utiles pour commencer à les utiliser dans vos conceptions. Le prochain article expliquera comment choisir votre système de grille - et si vous choisissez de créer le vôtre ou si vous utilisez plutôt un framework pré-fabriqué.
En attendant, je vous demanderais de faire plus de planification. Une petite tâche assez courte (vous vous en sortez un peu à la légère!) Mais faites un croquis dans votre bloc-notes, jouant avec les grilles et la mise en page. Pensez à la structure en utilisant les colonnes comme une idée pour fonder votre contenu autour de la grille. Ce que vous créez ne sera peut-être pas une bonne chose le lendemain matin, mais cela vous aidera au moins à vous concentrer sur la réflexion sur les grilles et à voir ce que vous pouvez en faire dans un format jetable..
Accentsconagua