Comment créer des mises en page plus solides avec le système de grille 8pt

CATÉGORIE : UI / UX, Design

LANGUE : Anglais

L’importance d’utiliser une grille à valeur fixe facilement multipliable pour concevoir des mises en page cohérentes. La méthode des 8pt stipule que tous les éléments d’une mise en page sont alignés et positionnés par rapport à des multiples de 8 (8, 16, 24, 32, …). C’est la méthode de mise en page la plus communément utilisée pour sa cohérence et sa facilité de mise en place pour les designers et les développeurs.

L’article explique également le rapport en point et pixel (pixel ≠ points). Depuis l’apparition d’écrans à haute densité d’affichage (Retina chez Apple) on utilise des multiples de résolution pour convertir les pixels en points pour que tout reste lisible (@2x, @3x, …). Sur un site web, c’est la valeur de viewport qui définit la densité d’affichage du site. Si le viewport est égale à 1, il convertira ses pixel par rapport à l’échelle de rendu du device. Sur un iPhone 11 Pro, l’écran affiche 375 x 812 points sur un écran 3x plus dense de 1125 x 2436 pixels (soit 458 dpi).

La règle des 8pt s’applique aux marges, espacements et aux dimensions. Elle s’utilise aussi avec les icônes et la typographie pour garder un système cohérent.

Plus d’informations sur l’article

Espace et Design System

CATÉGORIE : UI / UX, Design

LANGUE : Anglais

Traiter les valeurs d’espacements telles que les couleurs et la typographie. Les espaces sont partout, ils structurent la mise en page, organisent les informations importantes, et sont injustement délaissés. Comment créer un système pour les gérer efficacement et de manière cohérente. Une très efficace pour les designers et qui facilite grandement le travail des intégrateurs.

Souvent traitée de manière arbitraire, la méthode propose de créer une logique, un système pour que tous les positionnements se fassent naturellement. À partir d’une valeur de base, on définit un facteur et un ensemble de multiples pour obtenir un tableau d'espaces. Plus concrètement, si j’utilise en valeur de base égale à 16, et un facteur de 2, j’obtiens des multiples (32, 64, …) et des facteurs inférieurs (8, 4, 2, …) faciles à mémoriser. Pas besoin de plus.

Fini les valeurs arbitraires définies par le zèle d’un designer ou par un intégrateur qui compte les pixels d’un fichier bitmap. Il suffit de choisir dans la grille la valeur la plus proche. L’article explique aussi les avantages d’utiliser une échelle non linéaire (nombre d’or, progression géométrique, …)

Outre les avantages de design, la méthode est très simple à intégrer dans l’environnement de développement, en attribuant un nom simple à chaque valeur (xs, s, m, l, xl, xxl, …) on peut aisément faire appel à une classe avec la valeur correspondante.

Une lecture vivement recommandée pour un principe incroyablement efficace.

Le guide ultime des résolutions d_iPhone

CATÉGORIE : UI / UX, Design

LANGUE : Anglais

“Quelle résolution a le dernier iPhone ?” On devrait tous garder cette page en favoris car il est impossible de mémoriser toutes ces valeurs. Paintcode garde à jour un tableau très pratique pour nous éviter de nous en souvenir.

À consulter sans modérations

Statistiques des tailles d_écrans d_odinateurs

Quelles sont les tailles d’écrans les plus communes ? On se pose la question lorsqu’on doit définir un breakpoint pour une page web ou prévoir les maquettes d’un site. Des milliards d’utilisateurs, des millions de devices et des milliers de résolutions différentes. Laquelle choisir ? StatCounter nous aide dans notre choix grâce à leurs statistiques récoltées partout dans le monde.