Web Design Critique # 80: Le nouveau site WebAppers réactif
Il est temps pour une autre critique impressionnante de conception de sites Web, où nous jetons un coup d'œil à un vrai site Web et analysons la conception. Nous soulignerons à la fois les domaines qui sont bien réalisés en plus de ceux qui pourraient utiliser un peu de travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site d'aujourd'hui est WebAppers, un excellent endroit pour trouver des ressources Web open source. Commençons et voyons ce que nous en pensons!
Explorez Envato Elements
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 critiquer votre conception - beaucoup moins que ce que vous paieriez pour qu'un consultant jette un œil à 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 haute qualité pour les développeurs et les concepteurs Web. En tant que concepteur de sites Web, vous trouverez certaines des meilleures icônes gratuites, photos de stock, pinceaux, polices et inspirations de conception. En tant que développeur Web, vous trouverez également certains des meilleurs composants Javascript et Ajax comme les fenêtres modales, les menus, les galeries, les info-bulles, les graphiques, les plugins 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 Design Shack en vaut la peine, vous n'avez pas besoin de chercher plus loin que les clients réguliers. WebAppers était en fait le client de notre 14e critique de conception Web et ils sont revenus nous voir jeter un œil à leur tout nouveau site réactif entièrement repensé.
Mes premières pensées pour le nouveau design sont très positives. Ce n'est pas une petite mise à jour, ils ont pris le site dans une direction visuelle complètement nouvelle et je pense vraiment que c'est mieux pour cela. L'ancien site avait une apparence pavée, comme si diverses ressources non correspondantes étaient regroupées. Le nouveau design, en revanche, est très propre et professionnel et se présente comme un travail entièrement personnalisé. Et il est réactif pour démarrer!
Nous sommes encore très tôt dans l'évolution sensible du Web, donc mon chapeau va à tous ceux qui prennent réellement l'initiative de retirer RWD du domaine confortable de la théorie et de le mettre en pratique dans le monde réel.
Examinons plus en profondeur 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 de rocker des années 80. Il y avait un chat quelconque, des formes de boulons d'éclairage; c'était excentrique mais amusant.
J'ai toujours trouvé le logo un peu déroutant. Je ne pourrais jamais vraiment dire si les formes d'éclair étaient censées être juste cela ou si c'était peut-être une crinière de lion. Et qu'est-ce que cela a à voir avec les ressources Web open source?
Le nouveau logo adopte une approche textuelle plus simple. J'adore le visuel de la boucle de page «W», dont le centre sert également de «A». C'est juste une idée géniale qui a été réussie.
J'aime aussi que le logo indique clairement en quoi consiste le site. Dès que je charge la page d'accueil, mes yeux dérivent vers le logo et je sais ce que la page m'offre. C'est extrêmement important et c'est trop souvent dans ces critiques que je dis le contraire à un designer (qu'il est difficile de voir de quoi parle leur site).
Disposition
Comme je l'ai mentionné ci-dessus, la nouvelle disposition est réactive, et j'entends par là qu'elle utilise des requêtes multimédias pour redistribuer la disposition à un certain nombre de points d'arrêt prédéfinis. Pour être «pleinement réactif», certains disent qu'un site doit également être construit sur une grille fluide comme celle vue sur Smashing Magazine, un projet qui a sans aucun doute inspiré celui-ci d'une certaine manière.
WebAppers ne se redistribue pas à chaque changement de minute dans la largeur du navigateur (au moins jusqu'à la plus petite itération), et pour être honnête, pendant 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 beaucoup 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, ce sont la navigation, le contenu principal, la barre latérale de contenu secondaire et 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 étant donné qu'ils se réduisent à mesure que la largeur se rétrécit.
Alors que nous rétrécissons la fenêtre, nous supprimons la colonne publicitaire à 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, poussant ce contenu vers le bas. Il s'agit d'une solution élégante qui a fière allure et conserve toujours la plupart du contenu original.
Il y a un saut subtil après cela qui rétrécit légèrement la colonne de contenu principale. 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 disposition le plus significatif:
Ici, nous pouvons voir que la troisième colonne a complètement disparu et que tout contenu qui s'y trouvait est devenu caché. Cela signifie que les publicités ont complètement disparu (Smashing Magazine fait la même chose) et que la barre latérale contenant le contenu populaire et le champ de recherche a également disparu.
Mon seul vrai problème ici est qu'à partir de ce moment, le site ne semble pas être consultable. Je suis tout à fait en faveur du changement de conception car la taille de l'écran change, mais la fonctionnalité est un sujet plus délicat et les réductions doivent être abordées avec prudence. La recherche semble être une fonctionnalité assez principale et je serais probablement frustré de ne pas pouvoir effectuer cette tâche sur mon téléphone ou ma tablette.
Finalement, le site se décompose en une seule disposition de colonne avec 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ûr que j'y changerais beaucoup.
En regardant dans les coulisses, nous pouvons voir que ce projet a été aidé par Twitter Bootstrap, ce qui est bien parce que la page ne ressemble pas du tout à votre projet Bootstrap typique de copier / coller et prouve que vous pouvez utiliser cette boîte à outils sous le capot sans sacrifier design personalisé.
Esthétique
Maintenant que nous avons discuté du fonctionnement de la structure ou des os du site, jetons un coup d'œil à la cerise sur le dessus. Le site prend une palette de couleurs largement grise avec de subtiles touches de couleur ici et là. Il fait un usage intensif d'icônes attrayantes et minimales et bien sûr Helvetica comme police de caractère 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 de vraiment remarquable. Je peux voir à quel point l'apparence en sourdine est censée être agréable pour les yeux, mais elle est suffisamment fade pour se sentir presque un peu tendue.
Pour moi, la solution est si simple qu'elle ne consiste qu'à remplacer un seul fichier: la texture d'arrière-plan. J'ai pris une texture sombre de 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 mettant 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 un peu 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. De l'autre, je pense que cela rend le texte beaucoup plus difficile à lire. Peut-être que si l'opacité de l'ombre était simplement réduite, ce serait moins gênant.
Résumé
Je pense que la refonte des WebAppers est définitivement un succès. Le site est plus beau que jamais et a fait un bon pas vers l'agnostic des appareils. C'est facile à utiliser, le branding est plus logique et la présentation du contenu est vraiment sympa.
Ma seule grande 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 sombre. Je suis également sceptique quant à la décision de supprimer 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 ne signifie pas nécessairement que j'ai perdu la possibilité de rechercher.
À part ces problèmes, c'est un excellent site. Assurez-vous de vous arrêter 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, lancez-vous et aidez-moi en donnant au designer quelques conseils supplémentaires. Faites-nous savoir ce que vous pensez de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons également d'être respectueux envers le concepteur du site et d'offrir des conseils constructifs clairs, sans insultes.
