Restez simple, stupide. Ce concept date de 1960 lorsque la US Navy a mis en œuvre le principe KISS, qui maintient que la plupart des systèmes fonctionnent mieux s'ils sont simples, plutôt que compliqués. Il en va de même pour presque tous les projets de conception.
La plupart des graphistes découvrent KISS tôt dans leur carrière. Alors, comment pouvez-vous le faire? Créer un design simple est un peu plus compliqué que vous ne le pensez. Voici sept règles à suivre pour vous aider à réduire l’encombrement et créer un compte magnifiquement simple.
1. Fixer un objectif par page
Le début d'une conception simple commence par un objectif pour le projet et des objectifs spécifiques pour chaque page du site Web. Chaque page doit mener les utilisateurs à une action, à l'exclusion de la navigation et du pied de page.
Cela peut être n'importe quoi: cliquer sur un lien, saisir des informations dans un formulaire, regarder une vidéo ou jouer à un jeu. Mais chaque page doit se concentrer sur une action ou une conversion d’utilisateur unique.
Trop de choses à faire peuvent submerger les utilisateurs. Ils peuvent perdre de vue les actions à mener et faire le choix le moins souhaitable. Planifiez la conception de manière à ce que chaque page conduise les utilisateurs à un objectif unique. Chaque bouton pouvant être actionné au-dessus du défilement et au-dessous du défilement sur la même page doit faire la même chose. Cette cohérence aide les utilisateurs à comprendre pourquoi ils se trouvent sur votre site et ce qu’ils sont censés faire. la simplicité de ces choix rend la conception facile et attrayante.
2. S'en tenir à deux types de familles
Il y a tellement de directives de conception qui recommandent trois polices de caractères pour un projet. Vous pouvez rationaliser encore plus avec deux familles de types robustes.
Recherchez une famille de types comprenant plusieurs graisses avec beaucoup de contraste entre les options normal et gras ou noir. Pour encore plus de talent, optez pour un choix d'affichage comprenant quelques caractères de remplacement que vous pouvez utiliser dans des titres surdimensionnés.
Ensuite, tout ce que vous avez à faire est de combiner une police de caractères corps et une police de caractères d'affichage pour obtenir d'excellentes combinaisons de lettrage pour l'ensemble du dessin. Utilisez deux familles de types comme si vous aviez sélectionné plus d'options avec des utilisations spécifiques pour certains poids ou styles.
Vous constaterez que cela peut vous aider à créer une palette de typographie très lisible et facile à utiliser, facile à gérer et cohérente visuellement.
3. Utilisez un alignement cohérent
À gauche, au centre ou même à droite - quel que soit l'alignement souhaité, respectez-le tout au long du projet. Cela inclut l'alignement d'éléments similaires, tels que les zones de texte et les éléments qui ne sont pas identiques mais qui s'emboîtent dans des groupes.
Adaptable fait un excellent travail avec le texte sur le curseur de la page d'accueil. Malgré le texte avec un nombre différent de lignes sur l'image, chaque titre s'aligne avec le bouton d'appel à l'action. L'espacement entre les éléments est également cohérent.
De plus, cet alignement cohérent se répercute sur le parchemin avec les autres paires titre et CTA.
L'alignement correspond au flux du curseur, qui se déplace également dans une direction complémentaire. Les alignements gauche et central sont les options les plus courantes en ce qui concerne les éléments de texte, car ils sont les plus lisibles. Avec un texte plus long, l'alignement à gauche est l'option préférée.
4. Établir une hiérarchie
Les utilisateurs ne devraient pas avoir à réfléchir à ce qu'il faut regarder ou comment se déplacer dans un dessin. Même les compositions visuelles les plus simples doivent avoir une hiérarchie distincte.
Cela commence par un visuel dominant. Il peut s’agir d’une image, d’une vidéo, d’un texte ou de tout autre élément susceptible de faire bonne impression.
Ensuite, il devrait y avoir une sorte de texte qui indique à l'utilisateur ce que le design et le site Web essaient de communiquer. Cela se présente généralement sous la forme d’un titre simple qui fonctionne avec le visuel dominant.
Troisième est un texte secondaire ou une action à compléter par les utilisateurs. L'élément visuel final est un menu de navigation. Les utilisateurs s'attendent à trouver tous ces éléments et l'œil est entraîné à se déplacer dans les éléments dans cet ordre. Rendez-le facile pour eux en concevant de cette manière.
5. Donner aux éléments beaucoup d'espace
Si vous ne le savez pas encore, mémorisez ceci: L'espace blanc est votre ami.
Donnez à chaque élément de la conception beaucoup d'espace. L'espace aidera à attirer l'attention sur des éléments individuels, occupera? Espace? de sorte que vous n'êtes pas tenté d'encombrer la toile et d'aider à créer une conception globale qui a le focus.
L'astuce pour bien utiliser l'espace est la cohérence. Définissez des règles pour la quantité d'espace qui entourera des éléments individuels ou s'ajuster entre les lignes de texte. Si la conception semble trop stérile, vous devrez peut-être réduire légèrement l'espacement. Vous saurez que l'espacement est correct lorsque vous ouvrez le nouveau design et que vous vous dirigez directement vers les endroits que les utilisateurs souhaitent voir en premier. (Vous ne savez pas ce qu'ils sont? Retournez au n ° 4 - Établir une hiérarchie.)
6. Amplification du contraste
Les éléments de conception à contraste élevé - des choix de couleurs à la taille des éléments - peuvent donner à un projet la quantité de finesse visuelle requise, même dans les cadres les plus minimes.
Pour une option tendance, essayez une palette de couleurs vives et contrastées pour attirer l’attention de l’utilisateur. Des couleurs vives feront en sorte que la conception simple soit plus complexe et intéressante qu’une option en noir et blanc. Pour tirer le meilleur parti des couleurs contrastantes, optez pour des teintes provenant de positions opposées sur la roue chromatique avec des saturations similaires. Si cette option vous convient trop, essayez d'autres paires basées sur une roue chromatique. (Vous pourriez même trouver un nouveau favori inattendu, tel que la combinaison pourpre et turquoise ci-dessus.)
7. Utiliser des icônes et des éléments cohérents
La cohérence dans la conception est l’un des secrets les mieux gardés de la conception Killer. C'est l'une de ces choses que l'on oublie trop souvent, car les projets de conception sont parsemés de multiples styles de boutons ou d'icônes de réseaux sociaux qui ne correspondent tout simplement pas au reste de l'iconographie du site.
Les éléments de l'interface utilisateur ne doivent pas être une réflexion après coup.
Il est important de créer un ensemble d’icônes et d’icônes d’interface utilisateur ainsi que des règles et de les utiliser tout au long du projet de la même manière. (Vous pouvez même acheter ou télécharger un kit d'éléments de police d'icônes ou d'interface utilisateur si vous ne souhaitez pas les créer à partir de rien.)
Choisissez une couleur pour les éléments, utilisez la même action ou effet de survol pour chacun (une pour les éléments cliquables et une autre pour les éléments non) et la taille des éléments en fonction de leur utilisation. (Il est acceptable d'avoir à la fois une taille d'icône et une option surdimensionnée pour les éléments un peu plus graphiques.)
Praticca Vending Machines utilise des icônes surdimensionnées, par exemple, pour indiquer aux utilisateurs plus d'informations. Un + est situé à l'intérieur d'une icône colorée. Les trois icônes sont identiques sauf la couleur. Ils font tous la même chose en vol stationnaire et agissent tous de la même manière quand un utilisateur clique. La même icône est utilisée plus petit sur l’ensemble du site pour créer de nouveaux éléments de contenu et aider les utilisateurs à numériser la copie.
Conclusion
Une conception simple ne doit pas nécessairement être totalement minimale ou manquer d'éléments amusants ou de gadgets d'interface utilisateur. Une conception simple, hautement utilisable et intuitive, permet aux utilisateurs de s’engager sans poser de questions ni d’instructions compliquées.
Bien qu'il existe une place pour des sites Web plus complexes ou des interactions utilisateur, la plupart des conceptions de sites Web peuvent tirer parti de l'approche KISS. N'y pensez pas trop, et les utilisateurs n'auront pas à le faire non plus.