Chaque semaine, nous examinons un nouveau site Web et en analysons le 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 d'aujourd'hui est Influentials Network, un agrégateur et filtre de nouvelles politiques.
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 du réseau Influentials
? IN surveille et collecte en permanence les informations politiques les plus virales et les plus importantes dans tous les médias. IN filtre automatiquement les 10 personnalités et / ou personnalités politiques les plus pertinentes dans une page unique, dynamique et facile à numériser.
Voici une capture d'écran de la page d'accueil:
Première impression
Pour être honnête, il n'y a pas beaucoup de choses sur la conception de ce site qui semblent vraiment bien fonctionner. La disposition générale en trois colonnes est correcte, mais le thème visuel et l’esthétique générale pourraient faire l’objet d’une mise à jour drastique.
Beaucoup de gens qui veulent une critique veulent vraiment une tape dans le dos, mais j'ai parlé avec le concepteur et développeur derrière IN et il a exprimé un réel désir d'entendre les commentaires ouverts et honnêtes concernant le site. Il sait qu'il y a place à l'amélioration et cherche des conseils clairs sur la manière de le faire. Dans cet esprit, commençons!
Réflexions sur la conception d'agrégateur de nouvelles
Les agrégateurs de nouvelles sont des créatures très étranges pour un concepteur de sites Web et je reconnais pleinement que les règles qui régissent leur succès semblent concerner autre chose que la beauté esthétique.
Par exemple, un agrégateur que je visite assez souvent est Hacker News. Découvrez leur design:
Comme vous pouvez le constater, ce n’est pas exactement une image de la conception Web moderne. Ce n'est même pas un bon exemple du minimalisme moderne, c'est simplement une liste de liens remplis en arrière-plan! Malgré cela, j'aime toujours m'arrêter et voir les dernières nouvelles du monde du nerd. D'autres agrégateurs populaires tels que Reddit ne sont pas simplement simples, ils sont carrément laids.
Tout cela pour dire, mon premier réflexe est d’aborder la conception d’IN comme n’importe quel autre site, mais ce n’est peut-être pas la meilleure façon de procéder.
Le look de IN
Même compte tenu de l'état actuel de la conception des agrégateurs, je pense toujours qu'IN pourrait utiliser certains travaux dans le département visuel. Pour commencer, je ne suis pas un fan des arrière-plans utilisés dans chaque section. J'ai l'impression que le site est très dégradé. Méfiez-vous toujours des astuces de conception et des abus par abus.
En outre, le contenu principal a un fond gris moyen et est flanqué d’une bande claire de chaque côté. Cela se sent un peu gênant pour une raison quelconque. Les deux couleurs sont probablement beaucoup trop similaires. Il n'y a pas de vrai contraste de couleur pour aider le contenu principal à se démarquer, juste un léger décalage de couleur déroutant. Honnêtement, je pense que cela ne fait qu’ajouter des complications visuelles inutiles et que je recommande de simplement inonder l’arrière-plan en entier avec le gris qui occupe actuellement l’arrière-plan de la zone principale au centre. Un de nos objectifs de courrier pour ce site sera de simplifier la conception, qui est plutôt chargée.
Une autre chose qui, à mon avis, réduit instantanément l’attrait visuel de la page est la taille disgracieuse des vignettes. Les photos sont étirées et comprimées pour s’adapter aux tailles de boîte prédéfinies. Ce résultat est une conception vraiment maladroite qui suggère immédiatement un? Assez bon? mentalité du designer.
Il existe probablement de nombreux plugins JavaScript pour résoudre ce problème, même un CSS intelligent pourrait améliorer la situation.
Entête
Le principal problème que j'ai avec l'en-tête est le flux de communication. Actuellement, je pense qu'il contient toutes les informations nécessaires, mais peut-être pas dans le bon ordre.
Voici comment je le redessiner. En haut à gauche, où se trouve actuellement une boîte contenant une description du site, je placerais le nom et le logo du site beaux et grands pour que les gens sachent immédiatement où ils se trouvent. Ensuite, je déplacerais la description dans la case située sous la navigation.
En outre, le? En fluence? la ligne ne fonctionne pas. Il se trouve dans un endroit étrange qui jette un œil sur la mise en page du site et dont le libellé fait en sorte que tout se passe mal. Je voudrais en faire une balise secondaire pour le logo du site et supprimer les espaces. Réseau d'influence: INfluenced, INformed, INspired.
En ce qui concerne la navigation, c'est l'une de mes parties préférées de la page simplement parce que le noir apporte un contraste bien nécessaire à la page. J'envisagerais de chercher d'autres endroits pour répéter ce thème.
Widgets
Le contenu principal de chaque côté est encadré par des barres latérales contenant divers widgets et sections de contenu, comme suit:
Globalement, chacun d’entre eux pourrait utiliser un peu plus de peaufinage et de finesse. Par exemple, le? Qu'est-ce que la colline? La section ci-dessus pourrait utiliser un bref descripteur expliquant le contenu de la section. Le texte se sent également tout à fait écrasé ici, une hauteur de ligne supplémentaire pourrait aller très loin.
De plus, chacun des widgets contient les petites flèches haut et bas en haut, vous permettant de cliquer pour parcourir le contenu. Cela peut paraître plus minime, mais un simple parchemin fonctionnerait beaucoup mieux.
Un autre widget qui nécessite beaucoup de travail est la section photos. Ceci est juste un grand espace vide qui ne semble pas fonctionner correctement.
DANS 10 colonnes
La dernière section que nous pouvons parcourir est ce que je considérerais comme le contenu principal de la page. Nous avons déjà évoqué le problème de dimensionnement des photos et, à part cela, cette zone est plutôt décente.
Une chose que vous pourriez envisager de changer ici est l’effet de survol. Il déplace actuellement tout droit de quelques pixels, mais le mouvement est si léger qu'il ressemble presque à un bug.Augmentez le décalage du contenu ou passez à autre chose, par exemple un changement de couleur.
En outre, les boutons de partage semblent trop incohérents. Essayez de leur donner la même taille et la même forme.
Conclusion
Je pense que ce site nécessite beaucoup de travail, mais je pense aussi que c'est parfaitement faisable. Ma recommandation est de le prendre en morceaux. Concentrez-vous sur l'en-tête pendant une semaine et passez vraiment du temps à faire de votre mieux. Ensuite, passez à une autre section et passez une autre semaine à peaufiner cela jusqu'à ce que ce soit parfait. À l'heure actuelle, le principal problème du site est qu'il se sent pressé, comme s'il n'était pas encore prêt à être lancé, mais qu'il l'a été de toute façon.
En tant qu’objectif à long terme, réfléchissez à la façon dont vous pouvez simplifier le contenu. Arrêtez d'ajouter des fonctionnalités et commencez à supprimer des fonctionnalités. Soulignez mieux le contenu principal et éliminez presque tout le contenu secondaire. Chaque fois que vous avez des doutes quant à la possibilité de couper quelque chose, relisez Hacker News et réfléchissez à la simplicité de son utilisation!
À 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.