Concevoir avec des super pouvoirs —

C’était il y a moins d’un an quand J’ai d’abord eu la chance d’utiliser Penpot et j’en suis immédiatement devenu enthousiasmé. Ils ont réussi à créer quelque chose que les concepteurs n’avaient jamais vu auparavant : un outil moderne et open source pour tous. Dans le monde de la technologie, cela ne semble peut-être pas révolutionnaire. Après tout, les outils et logiciels open source sont considérés comme allant de soi comme la pierre angulaire du développement Web moderne. Mais pour une raison quelconque, pas pour le design – jusqu’à présent. L’approche de Penpot en matière de création de logiciels de conception s’accompagne de nombreux bons arguments. Et cela a rassemblé une communauté forte.

L’une des raisons pour lesquelles Penpot est si excitant est qu’il permet aux créateurs de créer des interfaces utilisateur dans un environnement visuel, mais en utilisant les mêmes normes et technologies que le produit final. Cela facilite le flux de travail de conception à plusieurs niveaux. Aujourd’hui, nous allons nous concentrer sur un seul d’entre eux : l’agencement des bâtiments.

Les outils de conception ont parcouru un long chemin en essayant de faciliter la conception de mises en page complexes et réactives et de composants flexibles et personnalisables. Certains d’entre eux ont tenté d’imiter les mécanismes utilisés dans les technologies Web et d’autres ont tenté d’imiter ces imitations. Mais une telle approche ne vous mènera pas loin.

Bref historique des mises en page Web

Alors, comment les mises en page pour le Web sont-elles construites en pratique ?

Si vous travaillez dans le secteur depuis assez longtemps, vous vous souvenez peut-être de l’époque où vous utilisiez des cadres, des tableaux et des flotteurs pour créer des mises en page. Et si ce n’est pas le cas, vous n’avez pas manqué grand-chose. Juste pour vous donner un avant-goût de la gravité de la situation : c’est la même chose que d’exporter de minuscules images de coins arrondis à partir d’un Photoshop en constante panne, juste pour les positionner méticuleusement dans chaque coin d’un rectangle afin de pouvoir créer un bouton terne et arrondi, c’était juste une douleur. Bien trop souvent, c’était un plaisir de créer un autre design étonnant, mais tant de larmes et de chagrin pour le mettre en œuvre.

Puis Flexbox est arrivé et a tout changé. Et peu de temps après, Grid. Deux moteurs puissants mais incroyablement simples pour créer des mises en page qui ont changé à jamais la vie des développeurs Web.

Ironiquement, les outils de conception n’ont jamais rattrapé leur retard. Flexbox et Grid ont ouvert un océan de possibilités, mais se cachent derrière la barrière du savoir coder. Aucun des outils de conception ne les a jamais implémentés, ce qui permet à un public plus large de concepteurs de les exploiter dans leurs flux de travail. Pas jusqu’à maintenant.

Créer des mises en page avec Penpot

Pot à stylo est en train de devenir le premier outil de conception à prendre en charge à la fois Flexbox et Grid dans leur boîte à outils. Et par support, je n’entends pas une fonctionnalité de mise en page qui tente de copier ce que Flexbox ou Grid a à offrir. Nous parlons d’une implémentation réelle de Flexbox et Grid dans l’outil de conception.

La mise en œuvre de Flexbox de Penpot a été rendue publique plus tôt cette année. Si vous souhaitez essayer, l’année dernière, J’ai écrit un article séparé à ce sujet. Maintenant, Penpot implémente entièrement Flexbox et Grid.

Vous vous demandez peut-être pourquoi nous avons besoin des deux. Ne pourriez-vous pas simplement utiliser Flexbox pour tout, de la même manière que vous utilisez les mêmes fonctionnalités de mise en page simples dans un outil de conception ? Techniquement, oui, vous pourriez. En fait, c’est le cas de la plupart des gens. (Au moment de la rédaction de cet article, seul un quart des sites Web dans le monde utilisent CSS Grid, mais son adoption est en constante augmentation ; source)

Donc, si vous souhaitez créer des mises en page simples, principalement linéaires, Flexbox est probablement tout ce dont vous aurez besoin. Mais si vous souhaitez acquérir des super pouvoirs en matière de conception ? Apprenez la grille.

La disposition de la grille CSS de Penpot est maintenant disponible, vous pouvez donc déjà Essaie. Cela fait partie de leur version majeure 2.0, apportant un certain nombre de fonctionnalités et d’améliorations tant attendues. Je vous encourage fortement à l’essayer et à voir comment cela fonctionne par vous-même. Et si vous avez besoin d’inspiration, continuez à lire !

Disposition de la grille CSS en pratique

À titre d’exemple, créons une page de portfolio composée d’une barre latérale et d’une grille d’images.

Créer une mise en page

Notre première étape consistera à créer une simple grille bidimensionnelle. Dans ce cas, l’utilisation d’une disposition en grille est plus logique que la disposition Flex, car nous souhaitons avoir un contrôle plus granulaire sur la façon dont les éléments sont disposés sur plusieurs axes.

Vous pouvez remarquer que chaque ligne et colonne de la mise en page a une valeur de « 1FR ». FR signifie fraction, ce qui signifie que l’espace disponible sera réparti uniformément entre les lignes et les colonnes.

Les FR sont extrêmement utiles. Par exemple, comme les autres unités, les FR peuvent prendre des valeurs différentes. Vous pourriez donc créer 3 colonnes, une prenant 2FR et deux comptant 1FR chacune. En conséquence, la première colonne occuperait la moitié de la largeur de la mise en page et les deux autres occuperaient chacune un quart de l’espace disponible.

Ajout d’éléments à la mise en page

Pour ajouter des éléments à la disposition de la grille CSS, vous pouvez simplement les faire glisser et les déposer sur le canevas.

Pour chaque élément vous pouvez soit l’attribuer à une cellule dédiée de la grille, soit lui permettre de trouver sa place tout seul et de remplir le premier blanc disponible.

Espacement et alignement

CSS Grid Layout vous donne un contrôle total sur la façon dont les éléments sont alignés et comment ils s’ajustent à l’espace disponible. Une multitude d’options très granulaires vous permettent de créer des mises en page très précises et réactives qui fonctionnent de manière transparente avec des éléments de n’importe quelle forme.

Vous pouvez ajuster les cellules et les lignes à la taille des éléments, mais vous pouvez également ajuster les éléments à la grille. Dans ce cas, nous allons ajouter une barre latérale sur le côté gauche de la mise en page et la placer dans une colonne d’une largeur fixe de 320 px.

La barre latérale elle-même a sa propre mise en page. Mais dans ce cas, pour le simple alignement vertical, le Flex Layout est tout ce dont nous avons besoin.

Création de zones de grille

Pour rendre la grille encore plus puissante, vous pouvez fusionner des cellules, les regrouper en zones fonctionnelles et les nommer. Ici, nous allons créer une zone dédiée pour la barre latérale.

Lorsque vous ajusterez la mise en page ultérieurement, vous constaterez que la barre latérale conserve toujours la même largeur et la même hauteur que le design, tandis que les autres cellules sont ajustées à l’espace disponible.

Construire des grilles encore plus complexes

Ce n’est pas tout. Outre la fusion des cellules de la grille, vous pouvez demander aux éléments à l’intérieur de prendre plusieurs cellules. Sur notre page de portfolio, nous allons utiliser cela pour rendre l’image présentée plus grande que les autres et prendre quatre cellules au lieu d’une.

En conséquence, nous avons créé une mise en page complexe et réactive qui serait un jeu d’enfant pour en faire un site Web fonctionnel, mais qui serait en même temps totalement impossible à intégrer dans un autre outil de conception. Et ce n’est qu’une fraction de ce que Grid Layout peut faire.

Prochaines étapes

J’espère que vous avez aimé cette démo de la disposition en grille de Penpot. Si vous souhaitez jouer avec les exemples utilisés dans cet article, n’hésitez pas et dupliquez ce fichier Penpot. C’est un excellent modèle qui explique tous les tenants et aboutissants de l’utilisation de Grid dans vos créations !

Si vous préférez l’apprentissage vidéo, il existe un excellent didacticiel sur la disposition en grille que vous pouvez regarder maintenant sur YouTube. Et si vous avez besoin d’aide à tout moment, la communauté Penpot se fera un plaisir de répondre à vos questions.

Résumé

Flexbox et Grid dans Penpot ouvrent des possibilités de création de mises en page comme jamais auparavant. Aujourd’hui, n’importe qui peut combiner la puissance de Flex Layout et de Grid Layout pour créer des structures complexes et sophistiquées, flexibles, réactives et prêtes à être déployées immédiatement, le tout sans écrire une seule ligne de code.

Travailler avec les bonnes technologies rend non seulement les choses plus faciles, mais c’est aussi une sensation agréable. C’est quelque chose que j’ai toujours désiré dans les outils de conception. L’adoption de CSS comme norme pour les concepteurs et les développeurs facilite une collaboration plus fluide et les aide tous deux à se sentir plus à l’aise dans leurs flux de travail.

Pour les designers, c’est aussi l’occasion de renforcer leurs compétences, ce qui compte aujourd’hui plus que jamais. L’industrie du design est un espace compétitif qui évolue rapidement, et rester compétitif est un travail difficile. Cependant, apprendre les aspects les moins évidents et mieux comprendre les technologies avec lesquelles vous travaillez pourrait vous aider à y parvenir.

Essayez la disposition en grille CSS et partagez vos réflexions !

Si vous décidez de essayez la disposition de la grille CSS, n’hésitez pas à partager votre expérience ! L’équipe derrière Penpot aimerait connaître vos commentaires. Être complètement outil gratuit et open sourcele développement de Penpot prospère grâce à sa communauté et à des personnes comme vous.

(je)