Commencez avec la conception d'interface utilisateur avec ces conseils pour accélérer votre flux de travail

Cet article traite de la création de limites et de règles à suivre tout au long du processus de conception. Il existe un nombre illimité de façons de combiner des éléments dans une interface utilisateur. Vous devez donc définir des règles et des limites, sinon le flux de travail de conception pourrait devenir une tâche désagréable. Vous pourriez avoir du mal avec toutes les possibilités et essayer de choisir la meilleure option parmi les nombreuses options «correctes». En définissant (et en respectant) certaines règles de base, vous rendrez votre conception plus cohérente également.

Cet article est destiné aux concepteurs d'interface utilisateur débutants. Vous n'avez pas besoin de beaucoup d'expérience pour pouvoir suivre les astuces qui y sont partagées.

L'importance de créer votre Conception cohérente de l'interface utilisateur

Commençons par le tout début. Vous voulez que votre conception soit belle et digne de confiance et vous devez éviter le chaos à tout prix. Pour que cela se produise, il est très important d’avoir un système pour votre travail de conception.

Vos développeurs apprécieront également un système – ils adoreront le fait que votre conception soit ordonnée et que vous facilitent leur travail.

Un système de redimensionnement à une taille prédéterminée

Que vous souhaitiez redimensionner un bloc de texte, redimensionner une image ou ajuster un espace. Vous devez décider de la taille de chaque élément. Et je parie que vous avez été dans cette situation: avez-vous déjà choisi une taille pour un élément et après cinq minutes, vous la changez, puis encore, et peut-être encore et encore?

Quelle taille est parfaite? Ce pourrait être l'un de ceux que vous avez essayé, non? Vous devez éviter ce piège qui vous fait perdre du temps!

Commencez par choisir l’unité de base: la grille de 8 pixels

Pour que l’ensemble de la conception ait l’air plus propre, il est utile de régler d’abord la valeur de mesure qui déterminera ensuite tout. des tailles. C’est à vous de choisir la valeur que vous choisissez, mais le plus souvent, la meilleure option consiste à respecter quelques règles éprouvées. Et l’une de ces règles consiste à redimensionner et déplacer des éléments d’exactement huit pixels. Cette règle simplifiera votre prise de décision.

Outre le px contre dp : En plus des pixels (px), vous avez peut-être entendu parler de terme dp utilisé dans la conception et le prototypage d’écrans. L'unité dp est l'abréviation de “pixel indépendant de la densité”. L'unité est relative à un écran de 160 dpi, de sorte que 1 dp est égal à 1 pixel sur un écran de 160 dpi et à 2 pixels sur un écran 320 ppp, etc. La formule de valeur numérique est px = dp * (dpi / 160) .

Note : Si vous travaillez avec des éléments ou des objets plus petits, il est également correct d'utiliser des incréments de 4 pixels au lieu de 8, mais vous pouvez parfois effectuer d'autres réglages, si nécessaire.)

Mais pourquoi exactement 8 pixels?

Il existe plusieurs raisons pour lesquelles huit fonctionne souvent comme un “ nombre magique ”ici:

• Huit pixels est un« saut »minimum suffisant.
• Huit est un grand nombre car il est divisible par quatre et deux.
• Si vous utilisez huit, vous pouvez facilement redimensionner tout élément sans se terminant avec des demi-pixels, comme 8/2 = 4, 4/2 = 2 et 2/2 = 1. Si, au contraire, vous commencez par 10, vous vous retrouverez avec 5 pixels, puis 2,5 pixels , puis 1,25 pixels. Lors de la conception pour l’écran, évitez autant que possible les demi-pixels. En utilisant des pixels entiers, les éléments de la conception s'aligneront sur les limites de pixels et donneront ainsi un aspect plus net.
• Multiples de huit (8, 16, 24, 32, 40, 48, 56, 64, 72, 80, etc. .) sont intimement liés aux valeurs binaires (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, etc.).
• Enfin, les nombres sont faciles à retenir.

What Are The Avantages de l'utilisation d'une grille de 8 pixels?

• En tant que concepteur, votre temps de décision est précieux. Cela vous rendra plus rapide et plus efficace.
• Si vous travaillez avec un développeur, vous pouvez créer un système qui vous aidera, vous et votre équipe. Si le développeur doit apporter des modifications rapides, il peut ajuster les valeurs par incréments de 8 pixels. Cela garantira la cohérence et l'ordre.
• Les personnes qui utilisent votre site Web se sentiront à l'aise lorsqu'elles le visiteront. Ils vont faire confiance au site Web et utiliser l'interface plus facilement.

Utilisation d'une grille pour disposer tous les éléments

Harmonie horizontale

Je suis sûr que vous avez déjà utilisé une grille lors de la conception de sites Web. L'utilisation d'une grille vous aide à placer avec précision tous les éléments sur le canevas numérique.

La grille constitue le squelette de votre interface et détermine l'emplacement où vous pouvez placer les éléments. Le modèle contient la composition et définit des limites claires pour que votre conception soit plus cohérente. Il vous sera maintenant plus facile de décider où placer les éléments. Au fur et à mesure que vous gagnerez en expérience, vous pourrez mettre à jour les limites au besoin.

Mais comment créez-vous cette grille? Nous couvrirons les détails ensuite. Fondamentalement, le nombre et la taille des colonnes peuvent être aléatoires et dépendent de vos besoins. Plus votre conception est détaillée, plus la grille nécessitera de colonnes. Si vous êtes hésitant, demandez de l'aide à un collègue expérimenté.

Je vous recommande également de lire « Un guide complet de la conception d'interface utilisateur », qui devrait vous aider à comprendre un peu plus la conception de l'interface utilisateur. Harmonisation horizontale « />

Harmonie verticale

Comme pour le maintien de l'harmonie horizontale, il est important de garder les distances verticales cohérentes dans un dessin. Comme les lignes d'une feuille de calcul, elles vous aident à conserver le texte à intervalles réguliers.

Quelle doit être la taille de ces lignes? Encore une fois, c’est à vous de voir. Cependant, je recommande d'utiliser 8 pixels ou des multiples de 8 (tels que 16). Redéfinissez les limites dans lesquelles les éléments ou le texte doivent être alignés.

Choix de la taille des polices de caractères comme il convient

Si vous examinez des motifs bien conçus, vous constaterez la cohérence des tailles de police. . C'est pour une raison.

Remarque : N'oubliez pas également que vous n'avez besoin que de deux, voire trois, polices de caractères . Cependant, la sélection des types de caractères appropriés et leur compatibilité ne font pas partie de ce didacticiel.

Commencez par définir quelques tailles de police clés à utiliser tout au long du projet. (Par exemple, il serait insensé d'utiliser 30, 31 et 32 ​​pixels. Combinez plutôt ces trois tailles très similaires en une seule.)

Les tailles de police standard offrent deux avantages:

• Votre conception sera plus cohérente et plus cohérente. plus élégante.
• Cela accélérera le processus de conception et vous rendra plus efficace.

Taille des polices

Lorsque vous définissez la taille de la police, veillez à ne pas l'augmenter de la même manière. Lorsque vous agrandissez du texte, celui-ci doit être non linéaire. Cela signifie que plus le texte que vous créez est large, plus l'incrément doit être important.

Supposons que vous disposiez d'un bloc de texte avec une police de 12 pixels. taille, et vous voulez l'agrandir. Vous essayez 14 pixels et vous êtes satisfait. Mais imaginez alors que vous avez un gros titre (40 pixels) et que vous voulez le rendre plus grand. Souhaitez-vous augmenter la taille de seulement 2 pixels, de 40 à 42? Bien sûr que non. Optiquement, le texte nécessite un changement beaucoup plus important. Vous devrez peut-être l'augmenter de 24 pixels pour obtenir un titre plus gros de 64 pixels.

En bref, cela signifie que plus le texte est volumineux, plus l'incrément à utiliser est important. Ce principe très simple s'applique non seulement au texte, mais également à la taille des boutons, aux espaces blancs et à tout le reste

. Il repose généralement sur une progression géométrique. Voici un graphique très utile illustrant l’échelle de police:

Toutefois, pour la typographie, une échelle éprouvée est utilisée pour les tailles de police que vous souhaitez conserver pour toujours. L'échelle est de 12, 14, 16, 18, 20, 24, 30, 36, 48, 60 et 72 pixels.

Hauteur de ligne de texte

Une fois vous avez défini toutes les tailles de police, vous devrez vous occuper de l’espacement des lignes. Pour la hauteur de ligne, utilisez à nouveau des incréments de 4 pixels. Par exemple, pour un texte de 16 pixels, définissons la hauteur de ligne sur 24 pixels. Si vous souhaitez que le texte respire davantage, augmentez la hauteur des lignes de 4 pixels à 28.

Définition des couleurs de votre projet

Savez-vous combien de combinaisons de couleurs existent? Beaucoup! Vous perdrez trop de temps si vous ne prédéfinissez pas les nuances de couleur. Vous ne pouvez pas vous limiter au noir, au blanc et, par exemple, au bleu. Pour chaque couleur, vous aurez besoin d'autres nuances et il est important de les définir à l'avance pour que les nuances soient cohérentes tout au long de votre projet de conception. Nous ne voulons pas créer de chaos dans la conception. Visez 5 à 10 nuances pour chaque couleur. Je préfère définir 9 nuances pour chaque couleur.

Examinons de plus près les nuances de couleur.

Pourquoi 9 nuances de chaque couleur?

• Le premier avantage est le nommage des couleurs. Que vous utilisiez un éditeur graphique ou un code CSS, vous bénéficierez certainement de cette astuce. Chaque nuance se voit attribuer un numéro, tel que 100, 200, 300, 400, 500, 600, 700, 800 et 900. (Pourquoi des centaines? Typiquement, c'est ainsi que des coupes de caractères sont également organisées .)

• Deuxièmement, le 9 est un nombre pratique pour définir les couleurs. La meilleure façon de préparer ces nuances est de préparer une rangée de 9 carrés et de les remplir de couleurs. Celle du milieu sera la couleur de base . Ensuite, vous définissez l'ombre la plus claire (à l'extrême gauche) et l'ombre la plus sombre (à l'extrême droite). La prochaine étape consiste à sélectionner les teintes intermédiaires

Préparez les différentes tailles, types et états d’éléments

Lorsque vous travaillez sur un dessin, vous travaillerez généralement avec un nombre incalculable d’icônes, de boutons et d’autres composants. Encore une fois, c’est une bonne idée de préparer à l’avance plusieurs tailles et de limiter les options au minimum. Pendant le processus de conception, n’ajoutez pas d’autres tailles et n’essayez pas d’ajuster la taille des composants à vos besoins. Utilisez plutôt ceux que vous avez déjà définis pour que la conception soit plus cohérente et plus propre.

Voyons les boutons comme exemple. Lorsque vous commencerez, vous devrez définir leur structure hiérarchique. Pour ce faire, créez un bouton avec une action principale, un bouton avec une action secondaire et peut-être un autre bouton avec une action moins importante. Pour chaque bouton, spécifiez son statut (actif, inactif) et la variante de couleur. Essayez toujours de réduire le nombre d'éléments aux éléments les plus importants.

Définition des propriétés d'autres éléments

Les concepteurs d'interface utilisateur utilisent souvent des ombres dans leur conception. travail . Cependant, pour les concepteurs moins expérimentés, les ombres peuvent parfois être difficiles. Lorsque vous créez une ombre, vous devez définir la distance de l’ombre le long de l’axe des x et des y, ainsi que le rayon, la couleur et la transparence du flou. Les ombres peuvent prendre beaucoup de temps à s’ajuster, c’est pourquoi vous voudrez bien les préparer avant de vous plonger dans la conception. Il est utile de préparer un ensemble d'ombres (en utilisant la même méthode que pour les couleurs), puis de les appliquer tout au long du processus de conception.

De plus, soyez conscient de toutes les autres propriétés des éléments avec lesquels vous allez travailler, tels que le rayon d'angle, la transparence et les dégradés de couleurs.

Espace blanc

Il est important de bien ajuster l'espace blanc. Que vous décaliez des éléments de l’extérieur (marge) ou de l’intérieur (remplissage), vous devez vous fier à nouveau au nombre magique 8. Augmentez le décalage de 8 pixels (4 pour les petits éléments). Comme pour la taille de la police, plus l’écart souhaité est important, plus l’incrément devra être important (encore une fois, vous devrez définir ces incréments à l’avance).

Conclusion [19659002] Pour rendre vos conceptions propres et cohérentes, définissez des limites et une voie claire dans le processus.

Lorsque vous travaillez sur chaque élément de votre conception, gardez à l'esprit les points suivants:

• Vérifiez si vous l'avez déjà utilisé quelque part. dans votre conception. Si c'est le cas, vous pouvez simplement copier cet élément.
• Suivez un rythme horizontal et vertical et ajustez la taille des éléments en suivant les étapes que vous avez définies au tout début.
• Évitez les décisions compliquées et les batailles sans fin avec des pixels. . Ayez un système en place.
• Ne créez pas le même élément deux fois. Si votre conception est en ordre, votre travail sera meilleur et plus efficace, vous pourrez itérer plus rapidement et vous pourrez communiquer plus facilement avec les développeurs. Les développeurs définiront les variables qui suivent vos styles, donc définissez-les clairement. Vous obtiendrez une conception épurée et les développeurs pourront créer un code meilleur et plus durable. Tout le monde sera content.

Lecture connexe

• « Construire de meilleures conceptions d'interface utilisateur avec des grilles de présentation », Nick Babich, Smashing Magazine
• « Quelle est la différence entre« px », “Dip”, “dp” Et “sp”? ”Stack Overflow
• “ Pourquoi les concepteurs d'interface utilisateur utilisent-ils “dp” à la place de “pixel” , ”Kikahola, Medium
• “ font-weight Propriété CSS “Docs web de Mozilla Developer Network
• “ optimisez votre jeu de conception en utilisant moins de polices ”Jacci Howard Bear, Lifewire
• “ Créer des ombres UI qui ne craignent pas ”Anastasia Kas, Medium
• “ 10 règles d'or à respecter lors de la combinaison des polices: Conseils de Un concepteur ”Janie Kliever, Canva
• “ Conception matérielle: grille à 8 pd, grille à 4 dp ”Aide Google
• “ Pourquoi certains D esqus Look Messy, et les autres ne le font pas ”Reinoud Schuijers, UX Collective

(mb, il)