Il est temps de faire une autre critique de conception de site Web impressionnante, où nous examinons un vrai site Web et analysons son design. Nous soulignerons les deux domaines qui sont bien faits en plus de ceux qui pourraient nécessiter du travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site actuel est WebAppers, un excellent endroit pour trouver des ressources Web open source. Faisons un saut et voyons ce que nous pensons!
Si vous souhaitez soumettre votre site Web pour qu'il soit présenté dans une future Critique de conception, cela ne prend que quelques minutes. Nous facturons 49 $ pour la critique de votre conception - bien moins que le coût d'un consultant pour consulter votre site! Vous pouvez en savoir plus ici.
À propos des WebAppers
WebAppers est un blog dédié au partage quotidien de ressources open source de qualité supérieure pour les développeurs et les concepteurs Web. En tant que concepteur Web, vous trouverez parmi les meilleures icônes gratuites, des images d'archives, des brosses, des polices et des inspirations de conception. En tant que développeur Web, vous trouverez également certains des meilleurs composants Javascript et Ajax tels que des fenêtres modales, des menus, des galeries, des info-bulles, des graphiques, des plug-ins de calendriers et bien plus encore.
Voici une capture d'écran de la page d'accueil:
Première impression
Si vous vous demandez si une critique de Design Shack en vaut la peine, ne cherchez pas plus loin que les clients fidèles. WebAppers était en fait le client de notre 14ème critique en matière de conception de sites Web et est revenu nous demander de jeter un coup d’œil à leur tout nouveau site responsive entièrement repensé.
Mes premières idées pour le nouveau design sont très positives. Ce n'est pas une petite mise à jour, le site a pris une toute nouvelle direction visuelle et je pense vraiment que c'est mieux. L'ancien site avait une apparence pavée, comme si différentes ressources non appariées étaient réunies. Le nouveau design, en revanche, est très propre et professionnel et se présente comme un travail complètement personnalisé. Et c'est réactif pour démarrer!
Nous sommes encore au tout début de l'évolution réactive du Web, je salue donc tous ceux qui prennent réellement l'initiative de supprimer RWD du domaine de la théorie et de le mettre en pratique.
Approfondissons la conception du site et voyons ce qui fonctionne bien et ce qui pourrait être amélioré.
Nouveau logo
L'ancien logo WebAppers avait ce genre d'appel de rocker des années 80. Il y avait un chat de quelque sorte, des formes de boulons d'éclairage; c'était bizarre mais amusant.
J'ai toujours trouvé que le logo était un peu déroutant. Je ne pourrais jamais dire avec certitude si les formes lumineuses étaient exactement ce qu'elles étaient ou s'il s'agissait peut-être d'une crinière de lion. Et qu'est-ce que tout cela a à voir avec les ressources web open source de toute façon?
Le nouveau logo adopte une approche plus simple, basée sur le texte. J'aime réellement le visuel de la page curl "W", dont le centre sert également de "A". C'est juste une idée géniale qui a été tirée avec succès.
J'aime aussi que le logo indique clairement en quoi consiste le site. Dès que je charge la page d'accueil, mes yeux se tournent vers le logo et je sais ce que la page me propose. C'est extrêmement important et c'est trop souvent dans ces critiques que je dis le contraire au concepteur (qu'il est difficile de voir en quoi consiste leur site).
Disposition
Comme je l’ai mentionné ci-dessus, la nouvelle présentation est sensible, et j'entends par là qu’elle utilise des requêtes de support pour rediffuser la présentation à un certain nombre de points d’interruption prédéfinis. Pour être? Totalement réactif? Certains disent qu'un site doit également être construit sur une grille fluide comme celle de Smashing Magazine, un projet qui a sans doute inspiré celui-ci d'une certaine manière.
Les WebAppers ne se répercutent pas à chaque changement de largeur de navigateur (du moins jusqu'à la plus petite itération), et pour être honnête, alors que je joue avec, je pense que ça va. C'est toujours une conception remarquablement flexible qui s'adapte bien à toutes sortes de tailles d'écran différentes, ce qui est bien plus que ce que la plupart des sites Web peuvent prétendre.
Dans la version large, il y a quatre colonnes principales. De gauche à droite, il s'agit de la navigation, du contenu principal, de la barre latérale du contenu secondaire et de la publicité. Les deux barres latérales ont été conçues pour ressembler presque à des tiroirs qui glissent hors du contenu principal. Une métaphore parfaite, car elles s’effondrent lorsque la largeur se rétrécit.
Au fur et à mesure que nous rétrécissons la fenêtre, nous lâchons la colonne de publicité à l'extrême droite. Cependant, le contenu ne disparaît pas simplement à ce stade, mais les annonces apparaissent au-dessus de la barre latérale droite, ce qui permet de faire passer ce contenu vers le bas. C'est une solution élégante qui a fière allure tout en conservant l'essentiel du contenu d'origine.
Il y a ensuite un saut subtil qui rétrécit légèrement la colonne du contenu principal. Le conteneur devient plus étroit, la taille du texte diminue et les images réduisent leur largeur. Si nous rétrécissons encore la fenêtre, nous obtenons le changement de présentation le plus important:
Ici, nous pouvons voir que la troisième colonne a complètement disparu et que tout contenu qui se trouvait à l'intérieur est devenu caché. Cela signifie que les annonces ont complètement disparu (Smashing Magazine fait la même chose) et que l'encadré contenant le contenu populaire et le champ de recherche a également disparu.
Mon seul vrai problème est que, de ce point du site, le site ne semble pas être interrogeable. Je suis tout à fait en faveur d'un changement de design car la taille de l'écran change, mais la fonctionnalité est un sujet plus sensible et les réductions doivent être abordées avec prudence. La recherche semble être une fonctionnalité assez primaire et je serais probablement frustré de ne pouvoir effectuer cette tâche sur mon téléphone ou ma tablette.
Finalement, le site se décompose en une seule disposition en colonnes, la navigation apparaissant maintenant dans un simple menu déroulant natif, qui fonctionne généralement bien sur les appareils mobiles et de bureau.
Dans l’ensemble, je pense que la mise en page fonctionne très bien et, à l’exception de la fonctionnalité de recherche, je ne suis pas sûre d’y changer beaucoup.
En regardant en coulisse, nous voyons que Twitter Bootstrap a aidé ce projet, ce qui est bien, car la page ne ressemble pas du tout à un projet Bootstrap copier / coller typique et prouve que vous pouvez utiliser cette boîte à outils sans vous sacrifier. design personalisé.
Esthétique
Maintenant que nous avons discuté du fonctionnement de la structure ou des os du site, examinons la cerise sur le gâteau. Le site adopte une palette de couleurs en grande partie grise avec de subtiles touches de couleur ici et là. Il utilise beaucoup d'icônes attrayantes et minimales et, bien sûr, Helvetica en tant que police de caractères principale et presque exclusive.
Mon aspect le moins préféré de tout ce site est le manque de contraste. Tout sur la page a une sorte de sensation monotone avec rien qui se démarque vraiment. Je peux voir à quel point l’aspect assourdi est censé être doux pour les yeux, mais il est assez fade pour qu’il semble presque un peu fatiguant.
En ce qui me concerne, la solution est si simple qu’elle ne nécessite que le remplacement d’un seul fichier: la texture d’arrière-plan. J'ai saisi une texture sombre dans Subtle Patterns et l'ai testée sur le site WebAppers avec d'excellents résultats.
Le fond sombre ajoute un contraste bien nécessaire au site et met vraiment en valeur le contenu principal en le plaçant au premier plan de votre attention. C'est incroyable à quel point une petite modification peut faire la différence!
Une autre petite chose qui me dérange légèrement est l'effet d'ombre sur les titres des articles, vu dans la capture d'écran ci-dessous:
D'une part, je pense que c'est un effet cool. D'autre part, je pense que cela rend le texte considérablement plus difficile à lire. Peut-être que si l'opacité de l'ombre était simplement réduite, ce serait moins distrayant.
Résumé
Je pense que la refonte de WebAppers est définitivement un succès. Le site est plus beau que jamais et a fait un bond en avant pour devenir agnostique. C'est facile à utiliser, la stratégie de marque est plus logique et la présentation du contenu est vraiment agréable.
Ma principale préoccupation est le manque de contraste visuel, une préoccupation qui disparaît complètement avec l’inclusion d’un motif de fond plus foncé. Je suis également sceptique quant à la décision d'abandonner la fonctionnalité de recherche sur les versions plus étroites de la mise en page. Je ne pense pas que visiter le site sur mon iPhone devrait nécessairement signifier que j'ai perdu la capacité de recherche.
Hormis ces problèmes, le site est génial. Assurez-vous de passer et de faire un essai routier. Je pense que vous allez aimer ce que vous voyez.
À ton tour!
Maintenant que vous avez lu mes commentaires, apportez votre contribution en donnant quelques conseils supplémentaires au concepteur. Dites-nous ce que vous pensez être génial à propos de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons d'être également respectueux du concepteur du site et d'offrir des conseils clairs et constructifs, sans aucune insulte dure.