Basix erreurs courantes dans la conception Web

Nous faisons tous des erreurs. C'est la nature humaine. Toutefois, dans l’industrie de la conception Web, de nombreux éléments peuvent être mal placés avec seulement quelques ajustements nécessaires pour les rendre stellaires. Celles-ci vont de la typographie au rembourrage, où un seul chiffre peut sérieusement endommager votre conception Web. Heureusement, une fois que vous êtes en mesure d'identifier les erreurs les plus courantes, quelques clics et quelques appuis sur votre clavier peuvent sauver une conception en train de couler. Aujourd'hui, nous allons examiner certaines erreurs de conception de sites Web que chaque concepteur devrait surveiller..


Nous faisons tous des erreurs? certains sont plus sales que d'autres.

À propos de Basix

Nos publications Basix traitent uniquement de la conception Web. Que vous soyez novice dans le domaine de la conception web ou que vous créiez sur le Web depuis un moment et que vous souhaitiez une formation "formelle", les articles et les tutoriels de cette bibliothèque sont dédiés à vous aider à acquérir un peu d'expérience ceinture de sorte que vous pouvez commencer à basculer sur des projets plus difficiles plus tard!


Typographie

La typographie est l'une des caractéristiques les plus importantes d'un dessin. Dans la plupart des conceptions, le texte domine la majorité de la page. Une typographie nette et bien adaptée peut donc être la clé pour libérer le potentiel de votre thème. Les concepteurs nouveaux ou expérimentés peuvent commettre de nombreuses erreurs susceptibles de dégrader l'attrait autrement attrayant de la typographie d'une page..

Sans Serif vs Serif

Pour les besoins de cet article, je suppose que le lecteur sait ce qu'est une police empattée. Il existe une certaine élégance dans l'utilisation des polices empattement sur une page Web et une impression plus moderne lorsqu'un concepteur utilise la vaste gamme de polices sans empattement. Cependant, ces deux effets ne se mélangent pas pour devenir la quintessence d'une bonne typographie lorsqu'ils sont utilisés simultanément. En fait, mélanger les deux dans des circonstances normales peut créer des résultats hybrides qui, pour être franc, n’ont tout simplement pas l’air attrayant..

Cela ne veut pas dire que mélanger les polices serif et sans-serif jamais travaux. En fait, dans certains cas, cela fonctionne plutôt bien, en particulier lorsque les types de polices sont utilisés à différents niveaux d'une hiérarchie. Par exemple, A List Apart utilise une police avec empattement pour un titre, tandis qu'une police sans empattement est utilisée pour le contenu du corps principal..

Nombre de polices

Une autre erreur majeure à laquelle certains concepteurs se livrent consiste à utiliser de nombreuses familles de polices différentes, plutôt qu’un couple choisi. L'utilisation de plusieurs polices peut entraîner une conception déconnectée qui perturbe la lisibilité de votre contenu. Au lieu d'utiliser un contenu multi-polices, essayer d'utiliser une famille de polices par niveau de la hiérarchie visuelle de la conception crée généralement un jeu de polices plus agréable qui a l'air beaucoup plus uni qu'un tas de styles aléatoires ici et là..

De même, une taille de police et un espacement ligne / lettre trop variables peuvent créer une expérience de lecture déconnectée et une mauvaise expérience utilisateur. Gardez-le constant et familier.

Manque de contraste

Un problème majeur qui peut se présenter est un manque de contraste entre la typographie et le fond. Cela peut poser de réels problèmes de lisibilité car certains utilisateurs auront du mal à faire la distinction entre les deux jeux de couleurs. Prenons l'exemple précédent, par exemple. Lequel est le plus facile à lire, la gauche ou la droite? Droite, la gauche!

Il n'y a pas de théorie complexe derrière le contraste. Vous ne mettriez pas d'écriture noire sur un fond noir, car vous ne pouvez pas déterminer ce qui est écrit et ce qui est l'arrière-plan. La seule suggestion est de placer la couleur du texte à l'extrême opposé de l'arrière-plan, sans porter atteinte aux autres qualités esthétiques, afin d'éviter toute frustration de la part de l'utilisateur final. Le thème Ellipsis montre un bon contraste dans la zone d'en-tête supérieure. Est-ce qu'un rose pâle ou un violet y travaillerait à la place??


Rembourrage, marges et espacement

Nous ne luttons plus sur des moniteurs minuscules (nous pensons principalement à la navigation sur le bureau ici, pas au smartphone). Au lieu de cela, nous vivons sur des écrans de 21 "et parcourons des résolutions plus élevées que la HD, ce qui laisse plus de temps aux concepteurs. Par conséquent, vous ne devriez pas vous sentir écrasé et consacrer plus d’espace au rembourrage et aux marges pour rehausser l’esthétique de Prenez par exemple le design d’Apple, qui utilise beaucoup d’espace blanc en concentrant toute la couleur et l’action sur le contenu dont il se soucie. Cela ne veut pas dire que vous devriez avoir beaucoup blanc l’espace, mais vos conceptions pourraient tirer avantage d’une séparation accrue de leur visibilité, de sorte qu’elles se distinguent facilement les unes des autres.

Il est important de maintenir un espacement constant et égal tout au long de votre conception, aussi bien que possible, tant dans le remplissage interne que dans les marges externes. Pour un exemple, consultez le diagramme ci-dessous. La deuxième moitié semble beaucoup mieux parce que toutes les marges sont le même espace 18px. Tout est aligné sur la même disposition de la grille. C'est clair et chaque domaine se distingue des autres, mais cela ne gaspille pas nécessairement de l'espace.

Systèmes de grille

De même, la grille est une caractéristique importante des concepteurs Web les plus performants. L'utilisation d'une grille garde tout en ordre et nettoie les conceptions avec des gouttières cohérentes à utiliser. La conception basée sur une grille rend tout beaucoup plus organisé. Cette section ne figure pas dans cet article, car c’est une erreur de ne pas en utiliser une; considérez-la comme une solution si vous sentez que vos conceptions échouent dans un domaine auquel elle contribue..


Maintenir les valeurs anciennes

L’industrie de la conception Web évolue rapidement et de nouveaux développements apparaissent régulièrement. L’une des pires choses qui puisse nuire à votre conception est de continuer à développer et à concevoir de la même manière qu’il ya quelques années. En 2003, Microsoft Frontpage avait un outil pour les "tableaux de présentation", mais aucun bon développeur ne devrait jamais oser ouvrir une balise de tableau sous le nom de présentation. De même, les GIF animés étonnants et la musique de fond de la décennie précédente sont un non-non. Oh, et ne songez pas à utiliser des cadres dans le cadre de votre conception Web. Toutes ces difficultés d’usage et d’autres problèmes, et c’est tout simplement notre façon de faire les choses..

Speider Schneider a publié un excellent article sur "L'âge de pierre du Web Design" ici chez Tuts +. Assurez-vous de vérifier pour un tutoriel sur ce que votre site Web ne devrait pas ressembler.


Des techniques plus anciennes telles que l’utilisation de tables ou de cadres iFrames peuvent sembler tentantes, mais il existe souvent un moyen plus élégant de faire avancer les choses si vous regardez les approches plus modernes..

Proportion et Taille

Vos conceptions doivent toujours s'en tenir à une sorte de hiérarchie à laquelle contribuent la taille et la proportion. En termes simples, vos éléments les plus importants devraient être les plus importants et leur permettre de diminuer de taille au fur et à mesure. Cela ne signifie pas que l'élément le moins important doit avoir une hauteur de 4 px, mais que cela devrait être votre feuille de route vers l'échelle des éléments sur une page. Ils doivent rester proportionnels à la précision d'entrée de l'appareil que vous concevez et suffisamment faciles à voir. S'ils sont là, ils seront là pour une raison.

Tout cela découle d'une perspective de convivialité qui suggère que tous les éléments doivent être facilement accessibles et ne nécessite aucune justification: ne demandez pas à l'utilisateur de faire autre chose que de regarder quelque chose. Pas de strabisme, pas de zoom, pas de tentative excessive de cliquer sur quelque chose qui est plus petit qu'un brin d'herbe.

Vous avez probablement aussi entendu parler de proportion divine, ou "Le nombre d'or". Bien que toutes les conceptions ne doivent pas nécessairement adhérer à ce principe, la plupart des conceptions standard doivent probablement essayer à tout prix. Le ratio de 1 à 1,62 (sous forme arrondie) est communément appelé le Golden Ratio et n'est pas uniquement utilisé dans la conception Web, bien que nous méritions un crédit pour son utilisation..

Le Golden Ratio présente un équilibre dans une conception Web, car nous, les humains, sommes habitués à cela. le rapport entre l'avant-bras et la main est compris entre 1 et 1,62, de même que le sourire humain. Trouver le séduisant peut aussi être basé sur le nombre d'or, raison pour laquelle nous pensons que le nombre d'or est "naturel". Garder tout ce qui est juste équilibré peut rendre la conception de sites Web et la chance meilleures car c'est plus naturel pour l'utilisateur.

Pour en savoir plus sur le nombre d'or et sur l'impact des mathématiques sur la conception Web, cliquez ici..


Oublier pourquoi tu fais ça

Oublier le but principal de votre conception est toujours mauvais. Si votre conception pour le commerce électronique et que vous avez cette brillante idée de curseur coulissant qui ne rentre tout simplement pas dans le projet actuel, ne l'intégrez pas uniquement pour le plaisir de le faire. De même, si vous avez l'habitude d'utiliser ce menu déroulant génial sur lequel vous avez passé d'innombrables heures à travailler, mais que cela ne fait que dégrader la convivialité de ce site particulier, ne l'utilisez pas. Ne vous laissez pas distraire par quoi que ce soit d'autre que ce pour quoi votre design sera finalement utilisé. Reculez à intervalles réguliers et demandez-vous si l'objectif correspond au design actuel et, sinon, manipulez-le pour le faire..


Pour le ThemeForest Inclined

Bien sûr, il y a plus de chances que vous soyez un auteur de ThemeForest si vous lisez cet article. Par conséquent, j’ai quelques conseils à partager avec vous, en fonction des facteurs de rejet courants avec lesquels l’équipe de révision doit régulièrement composer..

  • Hauteur de la ligne - le wiki suggère qu'un grand nombre de modèles de conception soumis manquent d'une bonne quantité de hauteur de ligne et / ou d'espacement. Avoir une hauteur de ligne spacieuse d'environ 1,3 à 1,6 degrés contribue à une meilleure convivialité de votre conception, mais lui donne également une apparence plus propre. L'utilisation de la valeur "em" pour mesurer la hauteur de ligne aide également à la maintenir proportionnée à votre texte..
  • Hiérarchie visuelle - Comme mentionné précédemment, une hiérarchie visuelle forte et distincte peut également être avantageuse, car elle aide votre utilisateur à déterminer ce qu'il doit lire en premier, puis à le laisser se frayer un chemin dans cette hiérarchie. Cela peut être particulièrement utile sur les sites qui veulent vendre quelque chose, car cela permet d'attirer l'attention du lecteur sur un élément spécifique de la page, comme les choses incroyables qu'un produit peut faire, ou sa capture soigneusement capturée, tout en conservant les éléments moins attrayants - comme prix - légèrement plus caché.
  • Compatibilité du navigateur - Une des pires choses que vous puissiez faire est d’aliéner une partie de l’audience potentielle de votre site Web en empêchant un site Web de fonctionner avec le navigateur de son choix. Il est fort probable que l'utilisateur quittera le site au lieu de perdre son temps à essayer de progresser dans la conception. S'assurer, au moins, que tous les principaux navigateurs sont couverts est toujours conseillé, et des tests appropriés doivent être assurés. Si vous n'avez pas de Mac, dirigez-vous vers un Apple Store et testez votre site s'il contribue à améliorer l'apparence de votre conception finale..

J'espère que vous avez des pistes de réflexion sur ce que vous ne devriez pas faire. Maintenant, retournez à la page d'accueil et découvrez ce que vous devrait être en train de faire!