Avec les tendances actuelles en matière de design, je suis d’avis que le souci du détail est peut-être la partie la plus importante de tout design, qu’il soit Web ou imprimé.
Dans cet article, je vais exposer sur le Web quelques exemples de conceptions dépourvues du petit détail qui rendrait les sites Web beaucoup plus agréables à explorer.
Avertissement
? En aucun cas je dis que je suis parfait?Je dois souligner que je ne critique rien de ce que quelqu'un a fait dans le passé, je vous dis simplement ce que je ferais pour rendre la conception plus détaillée et améliorer l'expérience de l'utilisateur lorsqu'il utilisera le site. En aucun cas je dis que je suis parfait, j'apprends toujours et ces techniques ne sont peut-être même pas les meilleures solutions, mais quelques petites attentions ici ou là montreront que vous avez fait l'effort de rendre le site aussi performant que possible. vous pensez que cela pourrait être!
Par exemple:
La section commentaires de Dribbble n'a pas de largeur maximale, vous pouvez donc manipuler le look du site Web sans aucun problème. Je sais que ce n'est qu'un petit détail, mais je pense que l'attention portée aux détails est l'aspect le plus important du design.
Vous aimez l'article? Assurez-vous de vous abonner à notre flux RSS et suivez-nous sur Twitter pour rester au courant du contenu récent.
Zones de texte
Les zones de texte ont été le premier élément qui a attiré mon attention et qui m’a donné l’idée d’écrire cet article. Je vais donc commencer par ici.
Cet exemple est quelque peu ironique, car il provient du site Web de partage de conception populaire, Dribbble.
Si vous jouez sur le site d’un joueur sur le site, vous verrez une boîte de commentaires en bas. Maintenant que je suis un peu un violoneux, je joue toujours avec des éléments sur des sites Web lorsque je les découvre pour la première fois et j'ai remarqué que je pouvais "casser". celui-là:
Le correctif
Avec le textarea élément, la meilleure pratique consiste à utiliser largeur min / max & hauteur min / max. Le code actuellement utilisé est:
Je convertirais ceci en:
Ce code maintient alors la largeur de la boîte de commentaire fixée à 424px à tout moment, mais permet à l'utilisateur d'augmenter la hauteur de la boîte en fonction de la quantité d'écriture qu'il y écrit.
Merci à Chris Allwood qui m'a dirigé vers le post "Textarea Tricks" de Chris Coyier de CSS Tricks sur le textarea élément sur les différentes choses que vous pouvez faire pour le manipuler.
Survoler et états actifs sur les liens
Les états de survol et actifs sont probablement les détails et les fonctionnalités les plus simples que vous pouvez ajouter à une conception.
En ce qui concerne les liens, les concepteurs modifient généralement la couleur en survol, ajoutent un soulignement ou le rendent audacieux. L'utilisation de ces techniques simples conviendra bien à certaines conceptions, mais il y a quelques autres détails qui, à mon avis, ne sont pas utilisés assez souvent.
Le correctif
Retrait de gauche:
Ajout d'un fond:
Appuyez sur le clic:
Astuce Bonus
Tous les détails que j'ai mentionnés ci-dessus peuvent être légèrement améliorés avec l'utilisation des transitions CSS3. J'utilise souvent le code suivant pour animer légèrement l'effet, ce qui est un détail agréable:
Vous pouvez utiliser un certain nombre de variables, il s'agit simplement de la propriété principale que j'utilise régulièrement. NetTuts + a un bon article sur les transitions fondamentales de CSS3 qui est très utile.
Si vous voulez vraiment tout faire, je vous recommande de consulter Animate.css de Dan Eden. Je l'ai utilisé sur Cardinal Menswear et je pense que cela fait une grande différence dans l'expérience vécue lors de la consultation du site.
Attention aux États négatifs
Quand les concepteurs utilisent négatif flotter et actif États.
Harry Roberts de CSS Wizardry a écrit un article sur les survols négatifs en 2011, qui m'a fait penser à certains des détails que j'avais appliqués aux sites sur lesquels j'avais travaillé par le passé. Je me suis rendu compte que j'étais coupable d'avoir créé un lien avec un soulignement, puis un survol. J'avais supprimé ce soulignement. Après avoir lu l'article de Harry, je me suis rendu compte que cela pouvait être déroutant pour un visiteur.
Couleur de sélection du texte et de l'image
Même s’il s’agit d’un détail très mineur, c’est très facile à faire, je pense donc que cela montre que le concepteur s’inquiète quand il / elle ajoute ce code pour les personnes qui vont le remarquer et l’apprécier.
Le correctif
Conclusion
J'espère que vous avez appris une astuce ou deux de cet article, je vais certainement garder l'œil ouvert pour de nouveaux petits détails que je pourrai appliquer à mes créations à l'avenir.
Avez-vous des conseils ou des astuces que vous pensez avoir ratés ou que vous devriez envisager d'utiliser? Nous apprenons toujours en tant que concepteurs et je pense qu'il est important de rester vigilants pour que les utilisateurs de nos sites Web profitent de la meilleure expérience possible!
S'il vous plaît, laissez un commentaire ci-dessous avec des suggestions pour des extraits de code que vous avez utilisés dans vos conceptions.