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 WPMU.org, un site pour les passionnés de WordPress. 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 de WPMU
WPMU.org est la source numéro un sur le Web pour les actualités, conseils, plugins et critiques de thèmes WordPress. Nous publions chaque jour plusieurs nouveaux articles publiés par l'équipe d'Incsub, le même groupe derrière le plus ancien (et deuxième plus grand) site multisite WordPress du Web, Edublogs.org, et la plus grande communauté de plug-ins et de thèmes premium, WPMU DEV.
Voici une capture d'écran de la page d'accueil:
Première impression
WPMU semble être une excellente source d'informations pour les développeurs WordPress. Il y a une tonne de contenu sur la page d'accueil, ce qui est à la fois un atout et un handicap pour le concepteur. Le site semble très propre et bien conçu, et pourtant, même au sein de la structure hautement organisée, ils semblent lutter contre le fouillis.
"Il y a une tonne de contenu ici sur la page d'accueil, ce qui est à la fois un atout et un handicap pour le concepteur."Le site est en fait réactif et, au début du jeu, je donne toujours des accessoires à quiconque tente au moins de faire ce saut. Peu de personnes, si tant est qu'il y en ait une, ont réussi un design complexe et réactif avec une perfection absolue, et cette page n'échappe pas à la règle. Néanmoins, je pense que les problèmes ici ne devraient pas être trop difficiles à résoudre.
Dans l'ensemble, les concepteurs ont produit quelque chose de grand ici. Ouvrons de plus près et voyons où nous pouvons suggérer des changements.
Le logo
La toute première chose que je vois sur le site est le logo. C'est un objet relativement grand dans le coin supérieur gauche, de sorte que vos yeux se dirigent naturellement vers lui.
Malheureusement, je trouve la situation un peu difficile sur les bords. Le concept n'est pas nécessairement mauvais, mais du point de vue du designer, les relations de taille sont toutes fausses. Le logo actuel est une grande partie du texte, qui est assez grande. Le problème, c’est que, plutôt que de jouer harmonieusement les uns avec les autres, chaque texte a plutôt l’impression de se faire concurrence.
"Plutôt que de jouer harmonieusement les uns sur les autres, chaque texte a plus l’impression de rivaliser pour attirer l’attention."Le contraste est l’un de vos outils les plus puissants en tant que concepteur et vous verrez qu’il aide à renforcer tout design qui manque un peu. Avec l'idée de contraste en tête, j'ai fait l'icône plus grande et le slogan beaucoup plus petit pour que ce ne soit pas en concurrence avec "WPMU". J'ai ensuite déposé le fichier «org» terriblement maladroit tourné. tout à fait parce que je pense que c'est tout à fait inutile.
Nous avons maintenant un simple logo bicolore avec un gros morceau de texte, un petit morceau de texte et une grande icône accrocheuse sur la gauche. Il est maintenant beaucoup plus équilibré et se sent moins encombré.
Autres logos
Si nous sautons de l’autre côté de l’en-tête, nous trouvons deux autres logos, cette fois de tiers.
À mon avis, elles sont un peu trop grandes. Encore une fois, nous rencontrons cette idée de compétition visuelle. En tant que designer, vous devez prendre des décisions difficiles concernant ce qui est le plus important. Si vous essayez de tout gérer et de contrôler tout, vous détruisez la hiérarchie des informations.
«Si vous essayez de tout gérer et de tout contrôler, vous détruisez la hiérarchie de l’information».De plus, l’alignement de ces deux logos est un peu déçu. La forme irrégulière du logo WPHonors donne l'impression que le logo Google+ est trop haut, même s'il est proche ou même au centre. Parfois? Visuellement? centrer deux objets peut conduire à une disposition plus harmonieuse que réellement les centrer.
En fin de compte, cette zone nécessite une solution de cinq minutes. Réduisez légèrement la taille des logos et non de manière spectaculaire, puis collez le logo Google+ de quelques pixels.
Disposition du bureau
Nous reviendrons un peu plus tard sur la réactivité de la mise en page. Pour l'instant, concentrons-nous simplement sur la mise en page du site, telle qu'elle est visible sur un ordinateur de bureau ou un ordinateur portable (version plus grande). Fondamentalement, nous examinons une disposition en trois colonnes.
Sur la gauche, vous avez ce qui semble être des articles récents, le centre est principalement occupé par une liste de tutoriels et la gauche contient une liste de messages populaires. Sur le plan conceptuel, cela semble à peu près correct, mais l'exécution n'est en réalité pas si géniale. Considérez la capture d'écran suivante:
Le problème que je rencontre avec ce site est que, lorsque je fais défiler la page, je suis complètement submergé. Il y a tellement de contenu ici et tout cela est formaté et dimensionné de manière très similaire, de sorte qu'il se fond en quelque sorte dans un grand désordre.
Dans des situations comme celle-ci, où la mise en page devient encombrée et désordonnée, j'aime bien éliminer toutes les distractions et me concentrer uniquement sur la taille et les relations spatiales des objets sur la page. Pour ce faire, je dépouille le contenu dans une structure filaire comme ceci:
Repenser les colonnes
Maintenant, nous pouvons vraiment avoir une idée de ce qui se passe avec cette page. Une chose que je remarque tout de suite quand je regarde la page comme celle-ci est le même vieux problème que nous rencontrons toujours, le dimensionnement relatif des objets étant beaucoup trop similaire.
Ici, je pense que ce problème se joue dans la largeur de la colonne. Bien que la colonne la plus à gauche soit la plus large, elle ne l'est pas beaucoup. Il n'y a pas clair? En vedette? colonne que je fais défiler cette page. Je n'ai pas une bonne idée du contenu principal, mais tout me crie dessus au même volume.
"Je n'ai pas une bonne idée du contenu principal. Au lieu de cela, tout me crie dessus au même volume."Pour retravailler cela, essayons de déplacer la colonne la plus à gauche vers le centre et d'ajuster sa largeur par rapport aux autres (élargissez la colonne du centre, rétrécissez les autres). Pendant que nous y sommes, corrigeons quelques problèmes d'alignement et réduisons la taille de ces logos d'en-tête. Cela nous amène à la mise en page suivante.
Comme vous pouvez le constater, nous avons maintenant défini un point focal beaucoup plus clair lorsque vous faites défiler la page: la colonne centrale. L'autre contenu est secondaire, là si vous le voulez, pas trop distrayant si vous ne le voulez pas.
Aérer la mise en page
Maintenant, malgré le fait que nous ayons aidé à remédier à la situation en introduisant une hiérarchie plus claire de l’information, nous sommes toujours aux prises avec des problèmes d’encombrement. Je pense simplement qu'il y a trop de choses sur la page à un moment donné. Nous n'avons pas à supprimer une tonne de contenu, mais nous pouvons améliorer la page avec quelques réductions et quelques modifications supplémentaires.
Maintenant, revenez en arrière et comparez cela avec le fil de fer avec lequel nous avons commencé. La différence peut sembler subtile, mais croyez-moi, si vous appliquiez ces changements à la présentation, l'impact serait énorme. L'empreinte du contenu serait beaucoup plus percutante et spacieuse, avec un chemin plus clair que les utilisateurs pourraient suivre lorsqu'ils feraient défiler la page.
Mise en page réactive
Dans l’ensemble, la disposition réagit assez bien lorsque la fenêtre de visualisation s’est réduite. La colonne des messages populaires descend au bas et la zone principale est occupée par les deux autres colonnes. La relation spatiale semble ici parfaite, bien meilleure que ce que nous observions auparavant.
Malheureusement, pendant tout ce temps, l'en-tête est pleine de problèmes. Le plus remarquable est la mauvaise réponse de la navigation à une réduction de la largeur. À un moment donné, il présente une rupture délicate en deux lignes.
C'est un peu gênant du point de vue esthétique, mais une fois que vous y êtes allé, même les choses les plus étroites tombent en morceaux. L'en-tête devient un espace vide énorme avec une liste de liens laids et sans style flottant à gauche.
Une fois que vous avez visualisé le site dans une fenêtre étroite, puis que vous avez repassé sa taille maximale, l'en-tête ne revient pas à sa présentation d'origine, mais devient plutôt bizarre avec des espaces supplémentaires. Je sais que ceci est un cas d'utilisation marginal (seuls les développeurs de nerd modifient la taille pour visualiser les résultats), mais cela indique tout de même un problème de mise en page.
Ce n'est pas facile Bein 'Responsive
En bout de ligne: la mise en page réactive est une bête délicate et instable. Chapeau bas aux développeurs ici pour avoir tenté le coup. Cela étant dit, il y a évidemment des problèmes à résoudre.
La navigation est la zone principale qui pose problème, il peut être utile de jeter un coup d'œil à notre procédure de création d'un menu de navigation réactif.
Résumé
WPMU est un bon site. Bien qu'un peu générique, cela représente une tentative forte d'organiser et de présenter une tonne de contenu intéressant. La plupart des designers auraient du mal à faire cela et je pense que ces gars-là ont fait du bon boulot.
Cela étant dit, les domaines ci-dessus sont ceux qui, à mon avis, doivent réellement être abordés. Mon conseil est de repenser complètement la mise en page, mais tant que vous avez construit le site sur une grille solide et flexible, le re-affichage de ce contenu ne doit pas être équivalent à tout recommencer. Si vous n'utilisez pas un système de grille sous-jacent puissant et personnalisable, je vous suggère de commencer!
À 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.