Choisir un système de grille

Dans l'article précédent, je vous ai présenté les systèmes de grille. Avec un peu de chance, vous devriez maintenant bien comprendre ce qu’ils sont et pourquoi ils sont une bonne arme à avoir dans votre arsenal de projets..

Aujourd'hui, je vais vous expliquer comment choisir un système de grille - de la création de votre propre réseau à l'utilisation de frameworks CSS prédéfinis. À la fin de cet article, vous aurez une bonne idée de la façon dont vous aimeriez marcher sur votre chemin avec les systèmes de grille - et si tout va bien vous sentir suffisamment en confiance pour le faire..


Nos choix

Commençons par rétrécir les choses.

Cadre ou D.I.Y.?

Nous avons deux choix devant nous: allons-nous avec un cadre prédéfini que quelqu'un d'autre a déjà construit, ou créons-nous notre propre système de grille et travaillons-nous avec cela? Vraiment, la réponse dépend de vos préférences personnelles.

Je recommanderais toujours que si vous débutez dans la conception Web, il peut être plus avantageux pour vous de commencer à concevoir avec des cadres prédéfinis. Ces conceptions ne doivent pas nécessairement être permanentes et peuvent être une manière de travailler avec des systèmes de grille de manière à alléger la pression et à vous permettre de les expérimenter et de les comprendre davantage..


Le système de grille 960

Les structures prédéfinies vous permettent également de travailler avec le prototypage d'une conception - où nous pouvons assembler rapidement différents éléments et modules dans une conception pour voir comment ils se déroulent lorsqu'ils sont réellement dans un navigateur (de manière aussi réaliste que possible). obtenir, sous une forme numérique telle que le Web).

Cependant, je pense toujours qu'il est préférable de créer votre propre réseau, si jamais vous le pouvez. Ainsi, non seulement vous maîtrisez mieux la conception et la structure de votre réseau, mais vous pouvez également contrôler davantage le rendement de votre réseau et son incidence sur la phase de développement de la conception de votre site Web. . Et je ne sais pas pour vous (même si j'imagine que de nombreux développeurs ressentiront la même chose que moi), mais j'aime avoir le moindre contrôle sur mon code et sur la manière dont il est présenté. créer mes propres grilles me permet de le faire.

Cadres préfabriqués

Les cadres prédéfinis se trouvent en abondance dans le monde de la conception Web. Ce qui avait apparemment commencé avec un ou deux systèmes de grille (tels que 960.gs) nous a rapidement paru: plusieurs dizaines, voire des centaines, de systèmes de grille disponibles pour nous utilisation.

Les grilles de calcul sont utiles car elles nous permettent d’obtenir facilement un prototype ou un site Web de base lorsque nous développons. Cependant, comment pouvons-nous changer cela pour qu'ils soient également utiles lorsque nous concevons?

Les frameworks pré-construits sont souvent accompagnés d'une sorte de fichier PNG ou PSD que vous pourrez utiliser lors de la conception. Sinon, vous devrez essayer de répliquer cette grille dans votre conception. Créez simplement un nouveau calque et mettez cette superposition de grille en place. Ensuite, vous pouvez commencer à concevoir la grille que vous avez.


Le système de grille d'or sensible

Les cadres de grille populaires incluent

  • 960.gs
  • 1140 grille (depuis sa retraite à cause de son manque de réactivité)
  • Système de grille réactif
  • Système Golden Grid
  • … Et la liste continue!

DIY. Des grilles

Tout comme lorsque je travaille avec mon code, j'aime contrôler ce que je conçois. Si je travaille avec un cadre de grille prédéfini, je mets en quelque sorte mon travail en accord avec les préférences de quelqu'un d'autre. Tandis que si je conçois mes propres grilles, cela signifie que je contrôle entièrement le fonctionnement de ma grille, son lien avec ma conception et je sais que j'aurai beaucoup plus de contrôle sur la sortie du code final, car je l'aurai conçue.

Bien que cela puisse sembler assez intimidant, tant que vous avez des connaissances, de la créativité et des idées de mise en page pour votre site Web, la création de vos propres grilles n'a pas besoin d'être aussi effrayante que cela puisse paraître..

Créer vos propres grilles est difficile quand vous ne l'avez pas encore fait - mais il y a tellement d'outils pour vous aider. Jusqu'à la sortie de quelques-uns de ces outils, je n'avais même pas essayé de créer mes propres grilles et j'étais un grand fan de frameworks - mais voir les avantages de pouvoir créer mes propres grilles pour chaque projet que je faisais m'a fait sentir beaucoup plus créatif. Je pense pouvoir proposer d'autres idées de design uniques et plus innovantes.

Tout d’abord, lorsque vous concevez vos propres grilles, revenez continuellement dans votre carnet de croquis en faisant quelques croquis et des idées de mise en page. Même si vous revenez à quelques-uns de vos croquis initiaux que vous avez faits au début du projet, imaginer comment ces esquisses peuvent s'intégrer dans une grille peut être utile et vous donner une longueur d'avance..

Créer vos propres grilles implique également beaucoup de théorie - et beaucoup trop à inclure ici, car il pourrait s'agir d'une session d'articles à part entière! Mais essayez d'abord de maîtriser les bases. Examinez vos sites Web préférés en ligne et voyez si vous pouvez choisir un motif modulaire ou en forme de grille pour leur conception. Voyez si vous pouvez regarder les conceptions que vous admirez et voir comment différents éléments s'alignent, comment la grille peut s'adapter lorsque la conception est redimensionnée ou réduite de manière adaptée - toutes ces petites choses vous aideront à mieux comprendre l'utilisation et la création de grilles..

Outils pour créer vos propres grilles

Comme je l'ai dit précédemment, de nombreux outils sont à votre disposition pour créer vos propres grilles à utiliser dans vos conceptions Web. J'ai choisi seulement trois solutions populaires, qui m'ont le plus aidé lorsque je roule avec mes propres grilles, mais sachez qu'il existe de nombreuses autres solutions juste à la recherche sur Google..

Gridset

Gridset est un outil formidable, créé par les adorables gens du studio de design Mark Boulton dans le sud du Pays de Galles..


De Mark Boulton Design, application Gridset

Selon leurs propres termes, Gridset est simplement un «outil pour créer des grilles» - et ils le rendent si facile à utiliser. Gridset est parfait pour toutes les étapes de la création et de l'utilisation de vos propres grilles - conception, prototypage et développement en phase de production.

Pour créer vos propres grilles avec Gridset, vous créez simplement un gridset, puis créez différentes grilles pour chacun des principaux points de rupture que vous pensez utiliser dans votre conception. Vous pouvez modifier la largeur de la colonne, la largeur de la gouttière et même modifier le rapport des colonnes - et bien plus encore.

Gridset vous fournit une superposition de grille PNG que vous pouvez utiliser lors de la conception, vous pouvez ajouter des classes à votre code HTML pour créer rapidement un prototype et vous pouvez utiliser les mesures que Gridset calcule dans votre propre balisage (vous n'avez donc pas à utiliser les classes Gridset fournies. ).

Avec Gridset, vous pouvez également utiliser leurs fonctions Sass intégrées, ce qui facilite encore l'intégration de la conception de votre grille dans votre flux de travail de développement..

Un autre grand avantage de Gridset est la richesse des informations qu’il fournit sur les grilles. J'ai découvert que j'avais tellement appris grâce au blog Gridset et au déchiffrement des spécimens Gridset qu'ils ont sur leur page d'accueil..

Gridpak

Gridpak est l’un des premiers outils de création de grille réactifs vraiment interactifs que j’ai trouvés en ligne, créé par Erskine Design à Nottingham..


De Erskine Design, Gridpak.

Gridpak crée un certain nombre de grilles (en définissant la taille, le remplissage et la largeur des colonnes) pour vos points d'arrêt personnalisés..

Une fois que vous avez créé toutes vos grilles dans Gridpak, vous obtenez un téléchargement avec tous les fichiers nécessaires pour intégrer vos grilles dans le flux de travail de votre site Web - un fichier PNG à utiliser comme superposition de grille lors de la conception, plusieurs fichiers que vous pouvez utiliser pour votre grille CSS Gridpak (CSS «vanille» pour vos classes standard, ainsi que les versions LESS et Sass) et vous obtenez également un fichier de superposition JavaScript que vous pouvez utiliser pour superposer votre grille sur vos sites Web au cours du développement.

Gridpak me semble très utile pour le prototypage plus que tout - il est très rapide d’obtenir des représentations visuelles de votre grille (à des points de rupture réactifs particuliers également) et de les intégrer à un prototype rapide. À partir de là, nous pouvons envisager de passer plus de temps à affiner les classes CSS fournies dans notre propre balisage, en veillant à ce que la qualité de notre code (qui devrait toujours être importante pour un développeur!) Soit optimale..

CSS Wizardry Fluid Grids

Si vous ne voulez pas tout le bric-à-brac et que vous recherchez plutôt un calculateur rapide qui vous aidera à créer des grilles réactives, alors je vous recommanderais un voyage chez Fluid Grids de Harry Roberts..


De Harry Roberts (CSS Wizardry) le calculateur de grilles de fluide.

Bien qu'il ne puisse plus héberger cela sur son propre site web (en raison de la configuration qu'il a maintenant), Harry a gentiment ajouté le code original à Github. Vous devrez peut-être effectuer un peu de travail manuel pour que cela fonctionne, mais cela en vaut la peine si vous voulez un système rapide et facile pour configurer votre structure de grille et votre conception..


Affectation

Maintenant que vous savez tout sur les grilles et sur certains des outils dont vous avez besoin pour créer des grilles, je veux que vous essayiez de créer vous-même! Utiliser l’un des outils mentionnés ci-dessus - ou bien utiliser le vôtre, si vous en avez déjà développé un. Essayez de créer certains de vos propres systèmes de grille et commencez à les intégrer à vos conceptions. Voyons les résultats dans les commentaires!