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..
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!
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..
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..
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.
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??
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.
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..
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.
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 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..
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..
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!