Comment utiliser les grilles lors de la création de prototypes de pages

Cet article sera utile si vous créez des prototypes de sites afin de transmettre vos idées aux concepteurs et aux développeurs Web. Le tutoriel vous apprendra comment prototyper un maillage.

Clause de non-responsabilité: si vous réalisez un prototype sans grille, rien de grave ne se produira. Un designer professionnel ou un développeur Web ajoutera une grille pour vous. Mais si vous apprenez à travailler avec des grilles, la qualité des prototypes augmentera considérablement et vous regarderez les pages de sites différemment.

Qu'est-ce qu'une grille et pourquoi l'utiliser

Une grille est un système de lignes verticales ou verticales et horizontales qui divise une page en colonnes ou en cellules. Créé à l'aide d'une colonne ou d'une cellule de grille, il constitue la structure ou le squelette de la page, avec lequel les concepteurs organisent le contenu.

C'est-à-dire qu'à l'aide de grilles, vous créez un cadre sur lequel vous portez tous les éléments de la page: logo, menu, curseur, formulaire, image, etc. Grâce au squelette, les éléments de la page peuvent être positionnés harmonieusement, choisir leurs dimensions relatives et absolues, définir le rythme visuel.

Un point important: les grilles offrent une flexibilité de conception, nécessaire pour adapter la mise en page aux différentes tailles d'écran. C'est-à-dire l'utilisation du cadre - une étape pour créer une page sensible.

Sur la page finie, les grilles ne sont généralement pas visibles. Mais ils peuvent être vus sur des prototypes et des mises en page.

Quels sont les grilles

Si vous n’êtes pas engagé professionnellement dans la conception et le développement Web, il suffit de connaître l’existence de deux types de grilles: en colonnes et modulaires.

Une grille de colonnes est un système de lignes verticales qui divise une page en colonnes et en retrait.

Les zones sombres et larges de l'illustration sont les colonnes, les zones claires et étroites sont en retrait.

La grille modulaire est un système de lignes verticales et horizontales qui divise la page en modules.

Dans ce cas, les modules sont des rectangles de 20 x 20 pixels, délimités par des lignes plus épaisses.

Si vous n'êtes pas un concepteur et un développeur Web professionnel, utilisez une grille de colonnes pour créer des prototypes. Il y a au moins deux raisons à cela. Premièrement: les grilles de colonnes sont très populaires sur le Web. Ils construisent des frameworks populaires, tels que Bootstrap, Bulma, Skeleton, que les développeurs Web utilisent pour la mise en page.

La deuxième raison: pour le prototype de la page, il suffit d'utiliser la grille de colonnes. Si nécessaire, un concepteur Web professionnel ajoutera une grille modulaire lorsqu'il transformera votre croquis en une mise en page complète.

Comment utiliser les maillages lors du prototypage

Cette section pratique explique comment utiliser les maillages lors de la création de prototypes.

Où dessiner des grilles

La réponse dépend des outils que vous utilisez pour le prototypage. Les grilles peuvent être dessinées à la main si le prototype est sur une feuille de papier. Si l'esquisse est créée à l'aide de programmes et de services spéciaux, plongez vous dans les paramètres. Les outils du logiciel de prototypage le plus répandu ont des grilles. Exemples ci-dessous.

Pour activer la grille dans Moqups, cliquez sur l'icône Espace de travail et cochez l'option Afficher la grille de présentation. Si vous avez besoin d'une grille modulaire, cochez l'option Afficher la grille papier.

Pour activer les grilles dans Proto.io, sélectionnez le menu Préférences - Paramètres de la grille.

Cochez l'option Afficher la mise en page. Sélectionnez le nombre de colonnes, leur largeur et la largeur des retraits entre les colonnes et le long des bords de la page. Ces paramètres seront discutés ci-dessous.

Si vous avez besoin d'une grille modulaire, cochez l'option Afficher la grille et spécifiez les paramètres.

Si vous utilisez Justinmind Prototype, dans l'éditeur, sélectionnez l'onglet Modèles et utilisez l'une des grilles de modèles: 12 ou 16 colonnes.

Si vous utilisez un autre logiciel de prototypage, recherchez les maillages vous-même.

Comment construire une grille

Construire une grille - choisissez le nombre de colonnes, leur largeur, ainsi que la largeur des retraits entre les colonnes et le long des bords de la page.

Question: combien de colonnes doivent figurer dans la grille de colonnes? La réponse courte est 12. Le fait n’est même pas que la plupart des frameworks CSS utilisés par les développeurs Web reposent sur des grilles à 12 colonnes. Si nécessaire, les paramètres par défaut des frameworks sont modifiés.

Le nombre 12 est presque magique: il est divisé en 6, 4, 3 et 2. Cela signifie que sur une page avec une grille de 12 colonnes alignées, vous pouvez organiser harmonieusement six, quatre, trois ou deux éléments. Le nombre étant toujours divisible par lui-même et par un, vous pouvez placer 12 ou un élément à la suite.

De plus, si vous ne faites pas attention aux colonnes extrêmes, la grille de 12 colonnes vous permet de placer harmonieusement dans une rangée de cinq ou dix éléments.

Les grilles avec un nombre différent de colonnes n'offrent pas une telle flexibilité. Par exemple, 16 est divisé en 8, 4 et 2. Pour placer harmonieusement trois ou six éléments dans une rangée, vous pouvez supprimer deux colonnes extérieures.

Mais pour aligner cinq ou dix éléments, vous devez supprimer les trois colonnes extrêmes. Ce n'est pas très pratique.

Lorsque vous choisissez le nombre de colonnes dans la grille, supprimez le contenu que vous prévoyez de placer sur la page. Par exemple, si vous créez une page de contenu sans barre latérale, une colonne ou un large espace rectangulaire au centre de la page suffit. Et si vous créez une page de portfolio ou une galerie de photos, vous aurez besoin d’une grille modulaire complexe.

Mais pour créer un prototype dans 99 cas sur 100, il est pratique de travailler avec une grille de 12 colonnes. Un concepteur professionnel ou un développeur Web, grâce à la grille de colonnes, transformera votre prototype en plusieurs dispositions pour différentes tailles d'écran.

Lors de la création d'une grille, vous devez sélectionner la largeur des retraits sur les bords de la page, la largeur des retraits entre les colonnes et la largeur des colonnes elles-mêmes. En gros, lors du prototypage, il n'est pas nécessaire de déterminer ces valeurs avec une précision de pixel. Plus tard, le concepteur et le développeur Web s’occuperont de cela. Mais pour plus de commodité, utilisez les recommandations suivantes:

  • Dans le programme de prototypage choisi, utilisez la page de modèle du bureau. La largeur de la page doit être d'au moins 960 pixels. Quittez l'approche des premiers professionnels mobiles.
  • Les marges doivent être au moins deux fois supérieures à la largeur des tirets entre les colonnes (gouttières). Cette technique semble orienter la vue du visiteur dans la page.
  • Plus l'espace entre les colonnes est large, plus la page "air" ou l'espace libre sont nombreux.

Un exemple de grille avec laquelle travailler peut être vu dans l'illustration.

Comment utiliser la grille de colonnes avec souplesse lors de la planification de la mise en page

Grille de colonnes - la base de la mise en page. Ceci peut être illustré avec une mise en page typique de l'article "Comment créer des pages prototypes" (voir photo).

Dans ce cas, l'en-tête et le pied de page occupent les 12 colonnes. L'unité principale et la barre latérale peuvent occuper respectivement 9 et 3 ou 10 et 2 colonnes.

A l'aide de la grille de colonnes, il est possible de créer des présentations plus complexes, par exemple avec la distribution des colonnes 5–5–2, 3–6–3, etc.

C'est-à-dire qu'en utilisant une grille de 12 colonnes, il est possible de construire des présentations constituées de blocs de différentes largeurs. Il peut y avoir plusieurs blocs d'affilée.

Lorsque vous choisissez le nombre et la largeur des blocs, laissez-vous guider par le contenu que vous prévoyez de publier sur la page. Des exemples concrets aideront à comprendre cela.

Sur la page "Connecté", vous trouverez un menu de navigation et des cartes de catégories.

Une telle disposition peut être représentée sous la forme de quatre blocs de trois colonnes de largeur.

Un autre exemple tiré du site de "Svyaznoy": un répertoire des téléphones d’un fabricant avec un menu de navigation et quatre fiches produit à la suite.

La mise en page de cette page peut être réalisée sur une grille de 16 colonnes. Le menu de navigation comportera quatre colonnes et des fiches produits - trois colonnes chacune.

Un exemple pratique ci-dessous vous aidera à mieux comprendre les principes du travail avec une grille de colonnes.

Utiliser la grille: un exemple de page prototype

Pour faire un prototype de la page, j'ai utilisé une grille de 12 colonnes. Allumé et grille de papier, pour faciliter la disposition des éléments dans la direction verticale.

J'ajoute un logo, un bouton de conversion et un menu de navigation à l'en-tête. Faites attention à l'alignement de la grille: les éléments occupent respectivement 4, 4 et 9 colonnes.

Sous l'en-tête, ajoutez un grand curseur. Il occupe 10 haut-parleurs centraux.

Sous le curseur, j'ajoute trois fiches de produit, composées d'une photo, d'un texte et d'un bouton de navigation. Les cartes occupent quatre colonnes.

Sous la page de cartes est divisé en deux blocs verticaux: la barre principale et la barre latérale. Ils occupent respectivement 8 et 4 colonnes.

Dans le pied de page, ajoutez des informations sur le service. Le prototype de la page peut être visualisé à l’aide du bouton Aperçu situé dans le coin supérieur droit de l’écran.

En mode aperçu, la grille n'est pas affichée. Cela nous permet d'évaluer le prototype sans interférence visuelle et, si nécessaire, de revenir à l'édition. Par exemple, dans le mode de prévisualisation, le curseur semblait trop étroit.

J'augmente la largeur du curseur à 12 colonnes ou supprime les contrôleurs des images dans les colonnes les plus externes de la grille. Je me souviens qu’à côté du menu de navigation, il restait de la place pour le formulaire de recherche.

Le prototype est prêt.

Outil simple et puissant

C'est la dernière caractéristique de la grille. Avec cet outil, tout spécialiste sans formation technique recevra un cadre flexible sur lequel il sera commode de construire des prototypes de la page. Vous pouvez utiliser la grille sur une feuille de papier ou dans les programmes de prototypage courants. À l’avenir, le concepteur et le développeur seront en mesure de convertir la grille de colonnes pour transformer le prototype avec des détails faibles en une mise en page complète et une page adaptative.

Laissez Vos Commentaires