5 leçons de conception que j'ai tirées de la rédaction de 85 critiques en matière de conception de sites Web

Chez Design Shack, nous offrons un service simple mais utile appelé critique de la conception Web. Il s’agit en fait d’un service de conseil dont vous pouvez profiter à un prix bas et raisonnable en échange de l’autorisation de l’afficher sur le site en tant qu’outil pédagogique.

J'ai personnellement écrit pas moins de quatre-vingt-cinq de ces articles à ce jour (le numéro 85 sera publié plus tard cette semaine). C'est beaucoup de conseils en design! Lisez la suite pour voir ce que j'ai appris sur la conception de sites Web au cours du processus, à la fois par les bons exemples et par les mauvais.

Critiques de Web Design

Quand quelqu'un soumet une page pour une critique, j'y glisse, note ce qui fonctionne bien, ce qui pourrait être mieux et ce qui doit être corrigé immédiatement. J'écris ensuite le tout en tant que critique de conception de sites Web.

"En fait, j'apprends de vous autant que de moi!"

Il est évident que j'utilise ces critiques comme outil pédagogique, mais ce que vous avez peut-être oublié, c'est que je n'enseigne pas à proprement parler. En fait, j'apprends de vous autant que de moi! C’est souvent que nous demandons à un site Web de faire la critique de ce qui est vraiment fantastique, alors que j’analyse et explique pourquoi il est si formidable, j’absorbe des techniques, des idées, des schémas d’assurance-chômage, etc.

Après une vingtaine de choses, j'ai remarqué que des modèles et des tendances avaient émergé, des conseils que je donnais maintes et maintes fois, des endroits où les concepteurs avaient tendance à être forts et faibles, des erreurs souvent commises. Soixante critiques plus tard et j'ai beaucoup à dire sur les domaines dans lesquels la plupart des concepteurs doivent se concentrer sur l'amélioration.

1. La règle des trois secondes

Si vous avez lu quelques-unes des critiques que j'ai écrites, vous avez probablement remarqué que je commence toujours par ce que ma première impression me dit à propos du site. Lorsque je charge cette page dans le navigateur, que puis-je dire de cette page au cours des trois premières secondes?

"Qu'est-ce que je peux dire sur la page dans les trois premières secondes?"

Trois secondes vous dites? A quoi bon ça? La réponse est que, en tant que navigateur Web, il ne me faut que quelques secondes pour déterminer si votre site correspond à ce que je recherche. Après, j’ai pris la décision de continuer ou d’explorer plus avant.

Pour certains concepteurs, cela pose un défi d'attirer l'attention de l'utilisateur avec quelque chose de brillant à attirer. C'est une bonne technique, mais elle peut ne pas être appropriée à toutes les situations de conception. La vérité universelle ici est que je devrais toujours au minimum savoir qui vous êtes et pourquoi votre site existe depuis quelques secondes.

Nous avons vu que cela se passait bien dans Design Critique # 66 avec l'en-tête de site IdentyMe.

Les graphiques et la messagerie sont réunis pour créer un message clair, lisible en un instant: ce site vous permet de créer des cartes de visite virtuelles.

Quand on voit que cela se fait bien, il est difficile d’imaginer comment quelqu'un pourrait le gâcher, mais il est en fait beaucoup plus fréquent que les sites que je critique manquent la cible dans ce domaine avec des messages vagues. Nous oublions que lorsque nous sommes proches d'un projet, nous pouvons souvent perdre de vue le fait que tout le monde ne sait pas à quoi ça ressemble.

Après quelques réunions, vous savez tout sur les affaires de votre client et vous vous apercevez que vous devez toujours expliquer à tout le monde ce que vous voulez, la logistique de Smith? fait et ce que leur site Web cherche à accomplir.

2. Conception axée sur les objectifs

La deuxième chose importante que j'ai apprise au sujet de la conception Web, c'est que les projets ont beaucoup plus de succès lorsqu'ils sont approchés avec un ensemble d'objectifs très spécifiques à l'esprit. La leçon précédente n'était en réalité qu'une extension de ceci: l'un des objectifs majeurs de tout site est de communiquer son propre objectif.

"C'est un peu comme être un chauffeur de taxi qui demande à un type sur le siège arrière où il se dirige et qui conduit plutôt à un endroit aléatoire, en espérant qu'il a bien compris."

Bien trop souvent, les concepteurs ouvrent simplement Photoshop et commencent à dessiner des idées au hasard. C'est un excellent exercice créatif, mais en tant que méthode principale de création de sites clients, il est nul. C'est un peu comme être un chauffeur de taxi qui demande à un type sur le siège arrière où il se dirige et se dirige plutôt vers un endroit aléatoire, en espérant qu'il réussisse.

Au lieu de cela, vous devez définir un ensemble très intentionnel d'objectifs entre vous et votre client en ce qui concerne ce que vous espérez accomplir avec la conception. Cela devrait se produire avant d'écrire une seule ligne de code ou de créer un seul fichier PSD.

Nous avons vu cette idée se concrétiser très efficacement dans Web Design Critique n ° 61: Kit Undead. Étant donné que le site vendait un kit destiné à vous aider à survivre à une apocalypse de zombies imminente, le site devait atteindre deux objectifs évidents.

La première consistait à montrer ce qu’il en était exactement pour que les acheteurs potentiels sachent dans quoi ils s’embarquaient:

Le deuxième objectif était d'expliquer comment les acheteurs utiliseraient leur trousse pour survivre. La liste des éléments ne suffit pas, il faut que les gens voient les avantages de ces éléments dans la pratique.

Comme vous pouvez le constater, ces deux objectifs ont été atteints grâce à de superbes illustrations et à de simples descriptions textuelles. Le concepteur était encore capable de se moquer et de faire preuve de créativité, mais il l’a fait d’une manière qui a permis au site de réussir.

3. Les tendances du design ressemblent au papier peint

Imaginez la maison de votre grand-mère. Imaginez toutes les choses qui indiquent que la maison appartient à quelqu'un qui a grandi à une époque différente de la vôtre: les bibelots en porcelaine qui ornent chaque étagère, les combinaisons de couleurs éblouissantes et, bien sûr, le papier peint. Couche sur couche de papier peint, élément de conception principal (bien que maintenant assez dépassé) de la pièce qui change toutes les quelques années pour s'adapter aux dernières tendances.

"Si vous deviez enlever ces couches une à la fois, vous voyageriez dans le temps."

Les maisons appartenant à divers membres de ma famille ont sûrement sacrifié 5% de leur superficie en pieds carrés à des couches de folie de papiers peints. Si vous retiriez ces couches une par une, vous parcoureriez le temps et serez témoin de divers motifs et couleurs qui étaient autrefois considérés comme aptes à couvrir une pièce, mais qui étaient ensuite méprisés comme une terrible erreur et remplacés par quelque chose qui ne ferait que servir à continuer ce cycle incessant.

Comparé au papier peint, la conception Web en est encore à ses balbutiements, mais nous sommes déjà assez avancés pour constater que les tendances en matière de conception fonctionnent ici sur les mêmes principes. Attrapez toutes les tendances de conception qui semblaient si impressionnantes il y a cinq ans et qui servent probablement de date à un site.

Nous avons vu cela dans la pratique avec les motifs, textures et effets de biseau utilisés sur le site de Web Design Critique n ° 74:

Nous voyons ici ce qui était autrefois une conception avant-gardiste, mais maintenant, nous nous sentons tout simplement comme quelque chose de bien révolu. Les concepteurs de sites Web sont des animaux inconstants et lorsque la foule avance, vous bougez avec elle ou vous la laissez distancer.

Même si vous tenez compte du fait que le site ci-dessus a une impression volontairement rétro, le design ne fonctionne toujours pas, car la façon dont nous procédons en matière de rétro a également évolué au fil des ans!

«Mode, télévision, Hollywood, gastronomie, rien n’échappe à la mode».

Vous pensez peut-être qu'il est ridicule de suivre les tendances en matière de design moderne (ou d'en créer de nouvelles), mais ce n'est absolument pas le cas. Les tendances de la conception Web évoluent en tant que partie intégrante de votre culture. Mode, télévision, Hollywood, gastronomie, rien n’échappe à la mode. Tout comme les travailleurs de toutes ces industries doivent suivre le rythme ou risquer de perdre leur pertinence, vous aussi, en tant que concepteur de sites Web.

Ne me crois pas? Trouvez quelqu'un qui n'a pas créé de site Web depuis 1999 et laissez-le concevoir votre nouveau portefeuille. Les chances sont, vous fermez à la pensée.

4. De nombreux concepteurs de sites Web luttent toujours avec la typographie

Au cours des deux ou trois dernières années, les concepteurs Web ont pleinement adopté la typographie. Ce domaine particulier du design a dépassé de loin une tendance pour de nombreux designers et est devenu une obsession. Lancer une recherche pour? Typographie? sur Pinterest ou Dribbble et vous verrez d'innombrables exemples d'art étonnante typographique.

Combinez cela avec des services tels que Typekit et Google Web Fonts, qui apportent de superbes polices personnalisées sur le Web, et vous verrez un secteur qui a connu une croissance fulgurante dans ce domaine en très peu de temps.

Cela dit, l’un des problèmes que je rencontre le plus souvent dans la conception Web est une mauvaise typographie. Cela prend de nombreuses formes: peu de connaissances sur la manière de combiner efficacement les polices de caractères, choix médiocre des polices, crénage laide de Photoshop, dimensionnement impair, hauteur de ligne écrasée, etc. Voici un exemple tiré de Critique n ° 73:

Nous pouvons concentrer notre attention sur une œuvre d'art typographique pendant des heures, mais lorsque nous travaillons sur un projet réel, le type est jeté et mis en production, sans préparation ni examen approprié. Les bons designers d’impression craquent pour des exemples comme celui ci-dessus, car ils savent que dans leur secteur, il n’ya pas de retour en arrière. Une fois imprimé, vous avez terminé.

«Les bons designers d’impression craquent pour des exemples comme celui ci-dessus, car ils savent que dans leur secteur, il n’ya pas de retour en arrière. Une fois imprimé, vous avez terminé.

Avec les concepteurs Web, le fait de savoir que tout peut facilement être mis à jour à tout moment peut rendre le travail fastidieux et fastidieux. Prenez le temps de bien taper votre type dès la première fois.

5. Moins c'est plus

En parcourant ces 85 sites Web et en suggérant des modifications, il est franchement très rare que mon impression soit que la page est trop petite.

Au lieu de cela, j'ai toujours du mal à faire comprendre aux concepteurs qu'ils essaient trop de remplir la page. Il en résulte des conceptions encombrées et lourdes de texte que personne ne prend vraiment le temps de parcourir.

"J'ai toujours du mal à convaincre les concepteurs qu'ils essaient trop de remplir la page."

Le Web est un endroit au rythme rapide. Il y a une raison pour laquelle le terme est libellé? Naviguer sur le Web? plutôt que de «lire le Web». Nous sautons rapidement d'un endroit à l'autre, à la recherche de tout ce qui saute et retient notre attention.

Les choses qui le font sont généralement simples et attrayantes avec quelques déclarations audacieuses et / ou des images qui se détachent de leur environnement. Les pages pleines d'encombrement présentent un cas de surcharge d'informations et nous passons rapidement à autre chose.

Prenons l'exemple ci-dessous tiré de Critique n ° 68:

Cette boîte n’est certes pas laide, mais elle peut être rendue plus efficace en supprimant la majeure partie du texte et en ajoutant un peu de contraste typographique:

Le type n'est pas le seul domaine dans lequel les choses doivent être simplifiées. Prenons cet exemple de Critique n ° 77:

C’est un exemple classique d’essayer simplement de placer trop de choses dans un petit espace. Nous ne pensons pas de manière critique à l'organisation du contenu, mais plutôt à un point où nous avons encore beaucoup d'éléments à inclure et aucun endroit pour le dire. Nous nous contentons donc de tasser et le résultat est un fouillis moche et inefficace.

Qu'as-tu appris?

Voilà donc cinq leçons que j'ai apprises sur la conception Web en écrivant quatre-vingt-cinq critiques. Maintenant c'est ton tour.

Lisez-vous nos critiques de design web? Qu'avez-vous appris d'eux? Comment pouvons-nous les rendre encore meilleurs? Laissez un commentaire et faites le nous savoir.