Share
Nettoyer. Terme souvent utilisé pour décrire la conception d'un site Web, mais que signifie-t-il? Comment le définissez-vous? Je suis à peu près sûr que cela ne signifie pas que les espaces sont plus blancs que les blancs ou que toute la poussière a été balayée sous le pied de page… Regardons de plus près..
Les concepteurs du monde entier jaillissent d’admiration en voyant un site Web et s’exclament "C'est beau, c'est tellement propre!". Il existe un nombre incalculable de rafles de conceptions Web dédiées à la conception «propre» et c'est un terme assez répandu dans la communauté des concepteurs de sites Web. Il peut être facile de repérer un bon exemple de design épuré, car il favorise un certain sentiment de professionnalisme et de qualité. Cependant, les principes et les facteurs sous-jacents qui se combinent pour créer ce look «propre» ne sont pas souvent abordés. C’est précisément ce que cet article entend faire..
Avant de commencer, soyons clairs sur un point: un design propre n'est pas un design minimal.
Certaines personnes peuvent confondre les deux et il peut être facile de le faire. Bien que les principes de conception présentent des similitudes et des chevauchements, je crois qu’il existe des différences essentielles..
La conception minimaliste tend à éliminer les éléments superflus et non essentiels pour permettre au contenu et au message central du site d’occuper une place centrale. Chaque élément doit avoir un but légitime. La conception minimaliste par nature devrait être hautement utilisable et fonctionnelle, car il ne devrait y avoir aucune distraction pour concurrencer les informations que le site tente de communiquer..
Au lieu de demander ce qui peut être enlevé, vous devriez demander comment il peut être raffiné.
Oui, la conception propre devrait être utilisable, et oui, le but du site devrait être clairement évident. Cependant, il faut tenir compte d'éléments purement esthétiques et d'un flair créatif pour concevoir un site "propre". Au lieu de demander ce qui peut être enlevé (dans le cas d’un design minimaliste), vous devriez demander comment cela peut être. raffiné.
S'il y avait un mot que j'utiliserais pour définir une conception «propre», c'est un raffinement. Chaque élément individuel doit avoir l’apparence qui convient et doit être utile et complémentaire à la conception dans son ensemble. La conception globale doit être équilibrée pour permettre à l'information de circuler et d'être facile à consommer.
Avant de parvenir à la conception finale, chaque élément doit être examiné. Le concepteur devrait prendre un moment pour examiner le but de chaque élément et décider s'il est le meilleur possible et s'il peut être clarifié..
O.K, alors maintenant que nous avons une compréhension générale de la conception «propre», examinons les divers facteurs qui ont contribué à ce style..
Une attention aux détails est essentielle pour produire un site Web épuré. Un design vraiment génial et épuré repose sur l'exécution parfaite, au pixel près, de nombreux éléments de design subtils. Des détails apparemment mineurs, tels que les bordures, les rehauts, les ombres, les textures et beaucoup d'autres doivent tous être soigneusement pris en compte.
À titre d'exemple, examinons de plus près la section principale du thème Studeo Wordpress, conçue par Orman Clark. Orman est largement reconnu pour (et a très bien réussi) à produire des thèmes Wordpress propres et conviviaux..
Là où certaines conceptions de thèmes peuvent simplement implémenter un grand curseur d'image audacieux, la zone de fonctionnalités de Studeo est un paradis pour les détails de conception délicats. Remarquez la texture subtile superposée sur l'image, le surlignage d'un pixel et la bordure gris clair presque imperceptible en bas. Tous ces détails peuvent paraître insignifiants et peuvent même passer inaperçus, mais collectivement, ils créent un sentiment de qualité et de raffinement..
La précision est essentielle pour choisir de concevoir de la sorte. Une chose qui peut détruire une conception de site propre est le demi-pixel redouté. Des demi-pixels peuvent apparaître dans Photoshop lorsque les lignes et les bords des formes ne sont pas alignés exactement sur le pixel. Lorsque cela se produit, les bords d'une forme deviennent flous. Vous pouvez voir dans l'image ci-dessous, les carrés à droite sont légèrement flous.
Une façon d'éviter ce problème lors de la conception dans Photoshop consiste à sélectionner l'option "Aligner sur les pixels". Chaque fois que cette option est sélectionnée, tous les bords de votre forme seront magnifiquement nets et nets..
Il va sans dire qu'un design épuré ne peut en aucun cas paraître encombré. De nombreux éléments, cependant, à l’étroit, donneront l’apparence d’un site Web désordonné et encombré. Pas ce que nous voulons. C'est là qu'intervient l'espacement.
Les espaces, les marges, le remplissage et la hauteur de ligne ont tous un rôle crucial à jouer dans la création d’un site Web épuré. En prévoyant un espacement approprié des éléments d'un site Web, vous vous assurez qu'ils semblent appartenir et s'intégrer dans la conception globale. Un espacement adéquat génère également une sensation aérienne et élégante sur un site Web..
En plus de veiller à ce que vos éléments soient bien espacés, il est également nécessaire que vous soyez cohérent avec les valeurs que vous décidez. Essayez de répéter les valeurs de marge et de remplissage lorsque vous le pouvez et où il est judicieux de le faire. Les systèmes de grille tels que 960.gs sont des outils extrêmement utiles pour concevoir des sites Web de cette manière (plus d'informations à ce sujet dans un instant).
Pour voir le plein effet qu'un espacement adéquat a sur la conception d'un site Web, considérons les deux images suivantes. La première image est un aperçu d'un article de blog avec un espacement minimal et incohérent entre les éléments..
Maintenant, voici le même aperçu de publication de blog avec un espacement généreux.
La différence que cela peut faire est assez substantielle. La deuxième conception semble beaucoup plus équilibrée et nette maintenant que tous les éléments ont beaucoup plus de marge de manoeuvre et d’espace pour s’étirer.
Cependant, comme dans la plupart des choses de la vie, il est possible d'avoir trop d'une bonne chose. Un trop grand espacement peut donner l'impression que des éléments sont perdus et déconnectés les uns des autres. En conséquence, la cohésion et le flux d'un site Web peuvent être brisés.
L'un des meilleurs outils que vous pouvez utiliser pour vous aider à créer une conception de site Web «épurée» est un système de grille. Nous avons déjà expliqué comment ils peuvent être extrêmement utiles en termes d'espacement, mais ils sont également précieux pour vous assurer que votre alignement est parfait..
Tout comme l’espacement, l’alignement peut avoir un impact significatif sur l’apparence d’un site Web. Un alignement correct et continu permet des lignes épurées sur toute la longueur et la largeur de la conception de votre site. Les lignes lisses et continues sont visuellement agréables et peuvent attirer l’œil plus loin dans la page..
L'œil est très sensible aux changements d'alignement et il est capable de détecter des changements infimes et des incohérences. Il est donc important que vous soyez non seulement au pixel près dans la création de vos maquettes de conception, mais également que cette précision ne se perde pas pendant la phase de développement qui suit..
Idéalement, les gros corps de texte devraient (dans la plupart des cas) être alignés à gauche. Le texte aligné à gauche produit une ligne continue et crée des colonnes d’informations faciles à distinguer. D'autre part, le texte aligné au centre crée un bord inégal de chaque côté et peut être difficile à lire en colonnes de grande taille. Enregistrer l'alignement central pour les lignes courtes de texte.
À titre d’excellent exemple d’alignement, vous pouvez consulter Design Without Frontiers. Le concepteur a non seulement fait un usage exceptionnel de l'alignement, mais il a également rendu aveuglante ses intentions en simulant les repères Photoshop générés sur le site Web..
Avec l’arrivée de @ font-face et de nombreux types de services, la typographie dans la conception Web n’a jamais été aussi grande et, compte tenu du fait que la grande majorité des informations sur le Web est du texte, il n’est pas étonnant que la raison en soit. Nous n'allons pas explorer les subtilités de la typographie ici, car il y a beaucoup de ressources formidables, mais nous allons examiner plusieurs façons dont il peut jouer un rôle important.
Premièrement, l’utilisation de la typographie est un moyen efficace d’établir une très forte hiérarchie visuelle. Si vous avez déjà étudié les principes fondamentaux de la conception Web, vous réalisez que la hiérarchie est un gros problème. Utiliser la typographie pour établir votre hiérarchie est une méthode très élégante et propre pour le faire. En modifiant simplement la taille ou le poids de votre texte, vous pouvez guider l'utilisateur sur votre site et lui faire comprendre l'importance de divers éléments. Pas besoin de flèches brillantes ou d'insignes bruyants pour souligner ce que vous voulez que l'utilisateur voie..
Deuxièmement, certaines couleurs fonctionnent harmonieusement et se complètent, il en va de même pour les polices. Il existe de nombreuses suggestions et directives pour coupler et utiliser plusieurs polices, mais pour un design épuré, il est préférable de rester simple..
La sélection de deux polices de caractères est généralement une option sûre, car trop de polices différentes peuvent compliquer la création. Opter pour une police de caractères plus audacieuse ou plus décorative pour vos titres et un type plus sûr et plus lisible pour votre corps de texte peut rarement faire défaut. Combiner un serif et une police sans-serif peut bien fonctionner et est couramment pratiqué.
Il existe de nombreux articles et tutoriels traitant de la théorie des couleurs et de son application à la conception Web. Il existe également de nombreuses ressources utiles pour vous aider à choisir une palette de couleurs appropriée. En ce qui concerne la conception propre, il existe quelques directives de base.
La grande majorité des sites Web propres optent pour une palette de couleurs claire, neutre et limitée pour un certain nombre de raisons.
Les blancs, les gris et les couleurs claires sont simples et sobres, permettant à tout contenu de capter l'attention de l'utilisateur. C'est idéal du point de vue de la convivialité et pour ceux qui veulent que leurs travaux occupent une place centrale, tels que les concepteurs et les photographes. De petites touches de couleur sont souvent utilisées pour accentuer certains éléments, tels que les logos, la navigation et les titres, pour aider à établir une hiérarchie visuelle..
Les couleurs vives, surtout si elles sont nombreuses, peuvent compliquer excessivement le design et distraire l'attention de l'utilisateur. La couleur évoque certaines émotions et réactions et trop de couleurs peuvent induire des sentiments multiples et conflictuels. La dernière chose que nous souhaitons, c’est que les utilisateurs se sentent confus lorsqu’ils consultent notre site Web..
Cela ne veut pas dire qu'un design épuré ne peut pas être coloré, car il existe toujours des exceptions à la règle et de nombreux exemples de design épuré utilisent efficacement les couleurs. Il y a aussi des directives générales si vous voulez ou devez utiliser de la couleur dans vos propres dessins.
Optez pour des couleurs simples et solides plutôt que des dégradés dans votre conception. Des blocs de couleur pleins créent des lignes claires et ininterrompues et aident à distinguer les différentes sections d'un dessin. Les dégradés, les motifs et les textures peuvent être gênants et réduire la lisibilité du texte. Si vous décidez d’utiliser des dégradés et des textures, gardez-le discret et subtil..
Savoir ce qu’il faut faire pour créer un design épuré et savoir comment appliquer ce style de conception peut être inestimable pour un concepteur de sites Web. Un design épuré communique un sentiment de raffinement et de sophistication, précisément ce à quoi de nombreux clients et nous-mêmes voulons être associés. J'espère que vous pourrez retirer quelque chose de cet article et appliquer certaines de ces méthodes à l'un de vos projets futurs..
Y a-t-il d'autres caractéristiques de design épuré que vous avez remarquées? Ou connaissez-vous une démonstration particulièrement réussie du design épuré? S'il vous plaît laissez-nous savoir dans les commentaires.
Accentsconagua