Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Choix d’un système de grille

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
All About Grid Systems
Using Alignment to Improve Your Designs

French (Français) translation by Henri Lotin (you can also view the original English article)

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

Aujourd'hui, je vais expliquer le choix d’un système de grille - de créer le vôtre, à travailler avec les frameworks CSS pré-conçus. À la fin de cet article, vous aurez une bonne idée de la façon dont vous aimeriez faire 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éduire les possibilités.

Framework ou bricolage ?

Nous avons deux choix devant nous : y allons-nous avec un framework pré-conçu que quelqu'un d’autre a déjà construit, ou devons-nous créer notre propre système de grille et travailler avec ? Vraiment, la réponse est tout à votre préférence personnelle.

Je recommande toujours que si vous êtes débutant au design web, il peut être plus avantageux pour vous de commencer à travailler avec frameworks pré-conçus. Ces designs ne doivent pas être permanents et peuvent être plutôt une façon pour vous de travailler avec des systèmes de grille d’une manière qui soulage la pression et vous permet d’expérimenter et de mieux les comprendre.

The 960 Grid System
Le 960 Grid System

Les framworks pré-conçus aussi vous permettent de travailler en prototypant un design - où nous pourrons rapidement boulonner ensemble différents éléments et modules dans un design et voir comment ceux-ci se comportent quand ils sont en réalité dans un navigateur (d'une manière aussi réaliste que possible, dans un format digital comme le web).

Cependant, je pense toujours qu’il est préférable de créer votre propre grille, si jamais vous pouvez le faire. De cette façon, vous n’êtes pas seulement beaucoup plus en contrôle du design et de la structure de votre grille, mais vous pouvez alors être également beaucoup plus en contrôle sur l'extrant de votre grille et comment cela se comporte à l'étape de développement de votre design de site web. Et je ne sais pas pour vous (mais j’imagine que beaucoup de développeurs se sentiront comme moi) mais je voudrais avoir tout le contrôle que je peux avoir sur mon code et comment il est présenté ; créer mes propres grilles me permet de faire exactement cela.

Frameworks pré-conçus

Les frameworks pré-conçus se trouvent en abondance dans le monde du design web - ce qui apparemment a commencé avec un ou deux systèmes (par exemple, 960.gs) bientôt nous explose au visage pour nous fournir plusieurs dizaines, voire des centaines de systèmes disponibles à utiliser.

Les frameworks de grille sont utiles car ils permettent d’obtenir facilement un prototype ou le site web de base en place lorsque nous développons. Cependant, comment pouvons nous commuter pour qu'ils soient aussi utiles quand nous faisons du design ?

Les frameworks pré-conçus seront souvent accompagnés d’une sorte de PNG ou PSD que vous pouvez utiliser lorsque vous designez - et si ce n'est pas le cas, alors vous aurez besoin d’essayer de reproduire cette grille dans votre design. Il suffit de créer un nouveau calque et mettre cette superposition de la grille en place. Ensuite, vous pouvez commencer le design sur la grille que vous avez.

The responsive Golden Grid System
Le Golden Grid System responsive

Les frameworks de grille populaires incluent

Grilles D.I.Y. (Do It Yourself)

Tout comme lorsque je travaille avec mon code, j’aime avoir le contrôle sur ce que je crée. Si je travaille avec un framework de grille pré-conçus, puis d’une manière je confie mon travail aux préférences de quelqu'un d’autre - alors que si je crée mes propres grilles, cela signifie que j’ai tout le contrôle sur comment fonctionne ma grille, comment elle est liée à mon design et je sais que j’aurai beaucoup plus de contrôle sur l'extrant de code final, comme je l’aurai conçu.

Même si cela peut paraître assez impressionnant, aussi longtemps que vous êtes armé de quelques connaissances, de la créativité et d'idées d’une mise en pages pour votre site web, alors créer vos propres grilles ne doit pas être aussi effrayant que cela puisse paraître.

Il est difficile de créer vos propres grilles quand vous ne l’avez pas encore fait auparavant - mais il y a tellement d’outils pour vous aider. Jusqu'à ce que quelques-uns de ces outils soient sortis, je n’avais pas même essayé de créer mes propres grilles moi-même et j’étais une grand fan des frameworks - mais vu les avantages d’être en mesure de créer mes propres grilles pour chaque projet, je ne me sent beaucoup plus créative. J'ai l'impression que je peux avoir plusieurs autres idées de design unique et innovant.

Tout d’abord, lorsque vous créez vos propres grilles, revenez sans cesse à votre carnet de croquis, faire quelques croquis et idées de mise en pages. Même si vous revenez simplement à certaines de vos croquis initiaux que vous avez fait au début du projet, imaginer comment ces esquisses s’intègrent à une grille peut être utile et vous donner une longueur d’avance.

Créer vos propres grilles c'est aussi beaucoup de théorie - et beaucoup trop pour l’inclure ici, car ça pourrait être une session massive d’articles en soi ! Mais essayez de maîtriser les bases d’abord. Regardez vos sites favoris en ligne et voyez si vous pouvez en extraire un schéma modulaire ou grille de leur design. Voyez si vous pouvez observer les designs que vous admirez et voir comment les différents éléments s’alignent, comment la grille pourrait s’adapter lorsque le design est agrandi ou réduit en responsive - toutes ces sortes de choses pourraient faciliter votre compréhension de l’utilisation et de la création de grilles.

Outils pour créer vos propres grilles

Comme je l’ai déjà dit il y a beaucoup, beaucoup d'outils à votre disposition pour créer vos propres grilles à utiliser dans vos designs web. J’ai choisi trois solutions populaires, qui m’ont le plus aidé lorsque je travaillais avec mes propres grilles, mais sachez qu’il y a beaucoup plus à une recherche sur Google.

Gridset

Gridset est un outil merveilleux, créé par les mecs sympas de Mark Boulton Design Studio au pays de Galles du Sud.

From Mark Boulton Design, Gridset App
De Mark Boulton Design, Gridset App

En leurs propres mots, Gridset est tout simplement un « outil pour faire des grilles » - et ils le rendent si facile à faire. Gridset est parfait pour toutes les étapes de la création et de l’utilisation de vos propres grilles - design, prototypage et stade de production et développement.

Pour créer vos propres grilles avec Gridset, vous créez simplement un ensemble de grille et puis créez des grilles différentes pour chacun des principaux points d’arrêt pour lequel vous pensez que vous allez utiliser dans votre design. Vous pouvez modifier la largeur de colonne, la largeur de gouttière et même changer le rapport entre les colonnes - et beaucoup plus.

Gridset vous fournit une superposition de grille PNG que vous pouvez utiliser lors du design, vous pouvez rapidement ajouter des classes à votre code HTML au prototype, et vous pouvez utiliser les mesures que calcule Gridset dans vos propres balises (ainsi vous n'avez pas à utiliser les classes Gridset fournies).

Avec Gridset, vous pouvez également utiliser leur fonctionnalité Sass intégrée - ce qui rend encore plus facile d’intégrer le design de votre grille dans votre flux de travail de développement.

Un autre grand point au sujet de Gridset est la richesse des informations qu’ils fournissent sur les grilles. J’ai trouvé que j’ai appris tellement via le blog de Gridset et de déchiffrer les spécimens de Gridset qu’ils ont sur leur page d’accueil.

Gridpak

Gridpak est l’un des premiers outils de fabrication de grille responsive vraiment interactif, que j’ai trouvé en ligne, créé par Erskine Design à Nottingham.

From Erskine Design, Gridpak.
De Erskine Design, Gridpak.

Gridpak fonctionne en créant un certain nombre de grilles (en définissant une taille de colonne, de marge intérieure de colonne et de largeurs de gouttière) pour vos points d’arrêt personnalisés.

Une fois que vous avez créé toutes vos grilles dans Gridpak, vous obtiendrez en téléchargement tous les fichiers que vous devrez intégrer dans vos grilles dans votre flux de travail de site web - un PNG à utiliser comme une superposition de grille lorsque vous designez, plusieurs fichiers que vous pouvez utiliser pour votre grille de Gridpak CSS (« vanilla » CSS pour vos classes standards, ainsi qu'à la fois les versions LESS et Sass) et vous obtenez également un fichier de superposition JavaScript que vous pouvez utiliser pour votre grille de superposition sur vos sites web au cours du développement.

Gridpak semble vraiment utile pour moi pour le prototypage plus qu'autre chose - c’est vraiment rapide pour obtenir des représentations visuelles de votre grille (en particuliers les points d’arrêt responsive, aussi) et d’intégrer celles-ci dans un prototype rapide. A partir de là, nous pouvons chercher à passer plus de temps à affiner les classes CSS fournies dans notre propre balisage, à veiller à ce que la qualité de notre code (qui doit toujours être important pour un développeur !) est excellente.

CSS Wizardry Fluid Grids

Si vous ne voulez pas toutes les options et au lieu de cela, vous êtes juste après une calculatrice rapide qui vous aidera à créer quelques grilles responsive - alors je vous recommande un voyage pour Fluid Grids de Harry Roberts'.

From Harry Roberts (CSS Wizardry) the Fluid Grids Calculator.
De Harry Roberts (CSS Wizardry) le Fluid Grids Calculator.

Bien qu’il ne puisse plus héberger cela sur son propre site internet (en raison de l’installation, qu'il a maintenant), Harry a proposé avec bonté le code original sur Github. Vous devrez peut-être effectuer un petit travail manuel pour finaliser ce travail, mais il vaut bien l’effort si vous voulez un système rapide et facile pour mettre en place votre framework de grille et de design.


Devoir

Maintenant vous savez tout sur les grilles et certains des outils dont vous avez besoin lors de la création de grilles - je veux que vous vous amusiez à faire les vôtres ! Utilisez l’un des outils mentionnés ci-dessus - ou en effet utilisez le vôtre propre, si vous en avez déjà mis une au point. Essayez-vous à la création de certains de vos propres systèmes de grille et commencez à les intégrer à vos designs. Nous verrons les résultats dans les commentaires !

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.